/* The headline is the focal motion; supporting entrances run once on scroll. */
.hero-copy,.hero-stage{animation:none}
.header{position:sticky;top:0;z-index:10;transition:background-color .35s ease,box-shadow .35s ease}
.past-intro .header{background:#f4f6f8f5;box-shadow:0 4px 22px #142b450c}
html{scroll-padding-top:110px}
.header nav>a[aria-current]::after{transform:scaleX(1)}
.header .nav-contact[aria-current]{background:var(--ink);color:var(--white)}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}
.chapter-nav{position:fixed;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:9}
.chapter-nav a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:10px;background:var(--paper);color:var(--muted);border:1px solid var(--line);position:relative;transition:color .3s,background-color .3s}
.chapter-nav a[aria-current]{background:var(--ink);color:white;border-color:var(--ink)}
.chapter-label{position:absolute;right:40px;padding:5px 12px;background:var(--ink);color:white;white-space:nowrap;font-size:12px;opacity:0;transform:translateX(5px);pointer-events:none;transition:opacity .25s,transform .25s}
.chapter-nav a:hover .chapter-label,.chapter-nav a:focus-visible .chapter-label{opacity:1;transform:translateX(0)}
@media(max-width:1000px){.chapter-nav{display:none}}
@media(max-width:720px){
  html{scroll-padding-top:96px}
  .header nav{min-height:calc(100dvh - 78px);justify-content:center;gap:32px;padding-bottom:100px}
  .header nav>a{font-size:clamp(25px,7vw,40px);letter-spacing:-.03em}
  .header nav .nav-contact{font-size:17px;margin-top:10px}
  .menu-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
  .menu-toggle span{transition:transform .3s var(--ease)}
  body:has(.header nav.is-open){overflow:hidden}
}
.motion-word{display:inline-block;white-space:nowrap;overflow:clip;vertical-align:top;padding-bottom:.13em;margin-bottom:-.13em}
.motion-letter{display:inline-block}
.header nav>a{position:relative}
.header nav>a:not(.nav-contact)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.header nav>a:hover::after,.header nav>a:focus-visible::after{transform:scaleX(1)}
.button>span,.text-link>span,.project-open{transition:transform .4s var(--ease)}
.button:hover>span{transform:translateY(3px)}
.text-link:hover>span{transform:translate(3px,-3px)}
.project-media:hover .project-open{transform:rotate(45deg)}
.service-list article{transition:background-color .3s ease}
.service-list article:hover{background-color:#eaf0f4}
@media(prefers-reduced-motion:reduce){
  .motion-letter{transform:none!important;opacity:1!important}
  .button:hover>span,.text-link:hover>span,.project-media:hover .project-open{transform:none}
}

/* Original raster illustrations replace decorative Unicode glyphs. */
.service-list article{grid-template-columns:112px 1fr 230px}
.service-art{width:104px;height:104px;object-fit:contain}
.stage-art{width:72px;height:72px;object-fit:contain;flex-shrink:0}
.quote-art{width:112px;height:112px;object-fit:contain}
@media(max-width:1000px){.service-list article{grid-template-columns:90px 1fr}.service-art{width:84px;height:84px}}
@media(max-width:720px){.service-list article{grid-template-columns:64px 1fr;gap:16px}.service-art{width:64px;height:64px}.stage-art{width:54px;height:54px}.stage-note{gap:10px}.quote-art{width:96px;height:96px}}


/* About: original studio illustration with crisp live typography. */
.about-studio{aspect-ratio:4/3;min-height:0;border-radius:8px;isolation:isolate}
.about-studio::after{display:none}
.about-studio>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:-2;transition:transform 1.2s var(--ease)}
.about-studio::before{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#142b4590 50%,#142b45);z-index:-1}
.about-studio .studio-signature{position:absolute;inset:auto 24px 24px;text-align:left}
.about-studio .studio-signature p{font-size:30px;font-weight:700;letter-spacing:-1px;text-align:left;margin:0;color:white}
.studio-signature p>span{color:#ed9167}
.studio-signature>span{color:#d9e6e8;font-size:13px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.about-studio:hover>img{transform:scale(1.035)}}
@media(max-width:720px){.about-studio{aspect-ratio:4/3;min-height:0}.about-studio .studio-signature{inset:auto 22px 20px}.about-studio .studio-signature p{font-size:27px}}