/* The official logo stays unchanged. Switch data-accent on <html> to try the
   original orange direction; the same tokens also color the Canvas renderer. */
:root{
  --brand-green:#8cc63f;
  --original-orange:#ff5b23;
  --accent:var(--brand-green);
  --accent-rgb:140,198,63;
  --accent-halo:#182010;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.studio-service-link{margin-top:15px;font-size:12px}
.work-page .project-summary{font-size:12px;line-height:1.65;color:#b4b3ac;max-width:38em;margin:10px 0 0}
:root[data-accent="orange"]{
  --accent:var(--original-orange);
  --accent-rgb:255,91,35;
  --accent-halo:#1c1711;
}
.brand{gap:10px;letter-spacing:-.7px;font-weight:800;font-size:23px}
.brand-logo{display:block;width:36px;height:36px;object-fit:contain;flex:none}
footer .brand-logo{width:30px;height:30px}
.studio-logo{width:33px;height:33px;object-fit:contain;grid-row:span 2}
.story-progress,.state-track{background:rgba(var(--accent-rgb),.14)}
.chapter-nav a:after{background:rgba(var(--accent-rgb),.23)}
.chapter-nav a[aria-current]:after{background:var(--accent)}
.component-list span{border-color:rgba(var(--accent-rgb),.32)}
.contact.section{padding-top:38px;padding-bottom:42px;background:var(--accent);color:#111}
.contact .section-label{padding-bottom:17px;color:#18200f;border-color:#1114}
.contact-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;margin-top:27px}
.contact h2{font-family:var(--font-text);font-weight:400;font-size:clamp(40px,4.2vw,62px);line-height:1;letter-spacing:-.055em;margin:0}
.contact h2 .dot-word{width:6.1em;margin-top:12px}
.contact-copy p{font-family:var(--font-text);font-size:14px;line-height:1.6;margin:20px 0 0;letter-spacing:0}
.contact-team{display:flex;flex-direction:column;min-width:0}
.contact-team a{display:grid;grid-template-columns:54px minmax(0,1fr) 20px;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid #1114;font-family:var(--font-text);font-size:16px;font-weight:400;line-height:1.4;letter-spacing:0}
.contact-team a:first-child{border-top:1px solid #1114}
.contact-name{font-size:14px;opacity:.75}
.contact-email{overflow-wrap:anywhere}
.contact-team a>span:last-child{font-size:20px;transition:transform .2s}
.contact-team a:hover .contact-email{text-decoration:underline;text-underline-offset:4px}
.contact-team a:hover>span:last-child{transform:translate(2px,-2px)}
.contact-team a:focus-visible{outline-color:#111;outline-offset:4px}
@media(max-width:900px){.contact-layout{gap:5%}.contact h2{font-size:4.8vw}.contact-team a{gap:10px;grid-template-columns:40px minmax(0,1fr) 18px;font-size:14px}.contact-name{font-size:13px}}
@media(max-width:600px){
  .brand{font-size:19px;gap:8px}.brand-logo{width:30px;height:30px}.header nav{gap:16px}
  .contact.section{padding-top:28px;padding-bottom:30px}
  .contact-layout{grid-template-columns:1fr;gap:24px;margin-top:23px}
  .contact h2{font-size:9vw}.contact h2 .dot-word{margin-top:10px}
  .contact-copy p{font-size:13px;margin-top:16px}
  .contact-team a{grid-template-columns:44px minmax(0,1fr) 18px;padding:13px 0;font-size:15px;gap:12px}
  .contact-name{font-size:13px}.contact-team a>span:last-child{font-size:18px}
  footer .brand{font-size:19px}footer .brand-logo{width:28px;height:28px}
}

/* One type family throughout; retain the custom vector dot lettering. */
.story-copy h1,.story-copy h2,.studio h2,.section-heading h1,.contact h2{letter-spacing:-.055em}
.story-copy p{max-width:560px}
.scene-right h2{font-size:clamp(46px,5.1vw,84px)}
@media(max-width:600px){
  .story-copy h1{font-size:13vw}
  .story-copy h2,.scene-right h2{font-size:10.5vw}
  .scene-play h2{font-size:12vw}
  .studio h2{font-size:14vw}
  .story-copy p{font-size:12px;line-height:1.65}
  .story-copy p br{display:none}
  .header nav{gap:13px}
}
@media(max-width:360px){.brand{font-size:17px;gap:6px}.brand-logo{width:26px;height:26px}.header nav{gap:10px;font-size:10px}.home-page .header nav{gap:10px}}