/* Scroll changes the drawings; the browser remains in control of scrolling. */
.hero-scroll{position:relative}
.scroll-cue,.assembly-story,.page-progress{display:none}
.follow-scroll{background:none;padding:3px 0 10px;text-align:left;font-size:12px;color:var(--accent);align-self:flex-start;min-height:30px}
.motion-toggle{position:static;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;background:var(--paper);border:1px solid #c7b39e;border-radius:2px;box-shadow:0 3px 15px #4b27330a;font-size:12px;letter-spacing:.025em}
.motion-toggle svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.3}
.motion-toggle[aria-pressed=false] svg{stroke:#705956}
.motion-toggle:disabled{cursor:default;color:var(--muted)}
.motion-on .page-progress{display:block;position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none}
.page-progress>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--page-progress,0));transform-origin:left}
.motion-on .scroll-cue{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:12px;letter-spacing:.09em;color:#705956}
.scroll-cue-line{width:36px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue-line::after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--hero-progress,.05));transform-origin:left}
.scroll-cue>span:last-child{font-size:17px;line-height:1}
.motion-on .assembly-story{display:block;margin-top:4px}
.story-topline{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:600;letter-spacing:.1em;color:#705956;font-variant-numeric:tabular-nums}
.story-topline>span:last-child{font-size:12px;color:#705956;white-space:nowrap}
.story-track{height:1px;background:#cdb9a4;margin:12px 0 10px;position:relative}
.story-track>span{position:absolute;inset:0;transform:scaleX(var(--hero-progress,0));transform-origin:left;background:var(--accent)}
.story-stages{display:flex;justify-content:space-between;font-size:12px;color:#705956;margin-bottom:13px}
.story-stages span{transition:color .2s}
.story-stages .is-current{color:var(--accent)}
.motion-on .assembly-controls{padding-top:10px;padding-bottom:8px}
.motion-on .figure-note{padding-top:1px}
.motion-on .assembly-stage{transform:translate3d(0,var(--camera-y,0px),0) scale(var(--camera-scale,1));transform-origin:50% 55%;will-change:transform}
.motion-on .scroll-linked .assembly-layer,.motion-on .scroll-linked .layer-guide,.motion-on #study-assembly .assembly-layer{transition:none}
.motion-on .hero h1{transform:translate3d(0,var(--hero-title-y,0px),0)}
.motion-on .scroll-reveal{transform:translate3d(0,var(--reveal-y,0px),0);opacity:var(--reveal-opacity,1)}
.motion-on .work-card .work-image svg{transition:none;transform:translate3d(0,var(--art-y,0px),0) scale(var(--art-scale,1))}
.motion-on .work-link:hover .work-image svg{transform:translate3d(0,var(--art-y,0px),0) scale(var(--art-scale,1))}
.scan-sweep{display:none}
.motion-on #study-detection .scan-sweep{display:initial;transform:translate(var(--scan-x,0px),var(--scan-y,0px))}
.motion-on #study-detection .detection-ring{transform-origin:300px 285px;transform:scale(var(--scan-ring,1));opacity:var(--scan-opacity,1)}
.motion-on #study-detection .signal-wave{stroke-dasharray:1;stroke-dashoffset:var(--signal-offset,0)}
.motion-on #study-sequence .sequence-panel{transform:translateY(var(--panel-y,0px));opacity:var(--panel-opacity,1)}
.process-grid article{position:relative}
.motion-on .process-grid article::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(var(--step-progress,0));transform-origin:left}
.motion-on .process-mark svg>*{stroke-dasharray:1;stroke-dashoffset:var(--step-offset,0)}
.motion-on .studio-stamp .studio-orbit{transform:rotate(var(--stamp-rotation,0deg))}
.motion-on .footer-wordmark{transform:translate3d(0,var(--wordmark-y,0px),0)}
.site-footer{overflow:hidden;padding-bottom:64px}
.motion-paused{scroll-behavior:auto}
.motion-paused *, .motion-paused *::before, .motion-paused *::after{transition:none!important;animation:none!important}

@media(min-width:901px) and (min-height:640px){
  .motion-on .hero-scroll{height:205svh}
  .motion-on .hero{position:sticky;top:0;height:100svh;min-height:0;max-height:none;padding-top:24px;padding-bottom:64px;overflow:hidden;align-items:stretch;background:var(--paper)}
  .motion-on .hero-intro{padding-top:clamp(12px,3vh,36px);align-self:center}
  .motion-on .hero h1{font-size:clamp(78px,min(7.6vw,13.5vh),118px);margin-top:28px;margin-bottom:25px}
  .motion-on .hero-copy{font-size:13px;margin-bottom:24px}
  .motion-on .hero-signature{margin-top:25px}
  .motion-on .hero-visual{padding-top:20px;min-height:0}
  .motion-on .assembly-stage{min-height:0;margin-top:8px;margin-bottom:4px}
  .motion-on #assembly{height:100%;max-height:calc(100svh - 220px);width:100%;object-fit:contain}
  .motion-on .services-intro{position:sticky;top:75px;align-self:start}
}
@media(min-width:901px) and (min-height:640px) and (max-height:730px){
  .motion-on .hero{padding-top:14px;padding-bottom:60px}
  .motion-on .hero h1{font-size:clamp(74px,7.2vw,91px);margin-top:23px;margin-bottom:20px}
  .motion-on .hero-copy{font-size:12px;margin-bottom:20px;line-height:1.8}
  .motion-on .scroll-cue{margin-top:22px}
  .motion-on .hero-signature{margin-top:20px}
}
@media(max-width:900px),(max-height:639px){
  .motion-on .scroll-cue{margin-top:22px}
  .motion-on .hero h1{transform:none}
  .motion-on .assembly-stage{transform:translate3d(0,var(--camera-y,0px),0)}
  .motion-on .assembly-story{margin-top:12px}
}
@media(max-width:540px){
  .motion-toggle{right:12px;bottom:12px;min-height:44px;padding:7px 10px;font-size:12px}
  .motion-on .scroll-cue{font-size:12px}
  .story-topline{font-size:12px}
  .story-stages{font-size:12px}
  .follow-scroll{font-size:12px;padding-bottom:9px}
  .site-footer{padding-bottom:66px}
}
@media(prefers-reduced-motion:reduce){
  .motion-on .hero-scroll{height:auto}
  .motion-on .hero{position:relative;height:auto;overflow:visible}
  .motion-on .scroll-reveal,.motion-on .assembly-stage,.motion-on .hero h1,.motion-on .footer-wordmark{transform:none;opacity:1}
}

/* Reading comfort takes precedence over fitting copy into the pinned hero. */
.motion-on .hero-copy{font-size:16px;line-height:1.75;margin-bottom:14px}
.motion-on .hero-signature{margin-top:20px}
.motion-on .scroll-cue{margin-top:20px;font-size:12px;letter-spacing:.035em}
.follow-scroll{min-height:44px;font-size:12px}
.motion-toggle{font-size:12px;min-height:44px;box-shadow:none;padding:9px 14px;flex-shrink:0}
.story-topline,.story-topline>span:last-child,.story-stages{font-size:12px;letter-spacing:.015em}
.site-footer{padding-bottom:30px}
@media(min-width:901px) and (min-height:760px){
 .motion-on #assembly{max-height:calc(100svh - 330px)}
 .motion-on .hero{padding-bottom:28px}
 .motion-on .hero h1{font-size:clamp(76px,min(7.2vw,12.5vh),108px);margin-top:24px;margin-bottom:22px}
}
@media(min-width:901px) and (max-height:759px){
 .motion-on .hero-scroll{height:auto}
 .motion-on .hero{position:relative;height:auto;overflow:visible;min-height:730px;padding:34px 40px 50px}
 .motion-on .hero-intro{align-self:start;padding-top:20px}
 .motion-on .hero h1{font-size:85px}
 .motion-on #assembly{max-height:none;height:auto}
 .motion-on .assembly-stage{min-height:360px}
}
@media(max-width:540px){
 .motion-on .scroll-cue{font-size:12px}.story-topline{font-size:12px}.story-topline>span:last-child{display:none}
 .story-stages{font-size:12px}.follow-scroll{font-size:12px}.motion-toggle{font-size:12px}
}