/* Geometry shares a clock; each section owns and clips its artwork. */
.motion-world{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.has-motion-world main,.has-motion-world .footer{position:relative;z-index:1}
.has-motion-world .aligned-hero,.has-motion-world .focus-story{background:transparent}
.page-home .work-scene{min-height:calc(100svh - var(--header-height));padding:90px 0}
.page-home .work-art{pointer-events:none;left:0;width:50%}
.page-home .case-intro{top:calc(var(--header-height) + 24px);padding:20px 0}
.page-home .case-intro h2{margin:20px 0 22px}
.progress-art{height:clamp(180px,30svh,300px);margin-top:24px;width:100%;pointer-events:none}
.page-home .case-intro h2{font-size:clamp(2.8rem,4.3vw,4.5rem)}
.page-home .case-stage{padding-top:75px}
.page-home .case-card{margin-bottom:24svh}
.page-home .case-card:last-child{margin-bottom:0}
.page-home .story-sticky{overflow:hidden}
.page-home .client-proof,.page-about .client-proof{position:relative;background:var(--paper)}
.page-about .client-proof{padding:32px 0 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-about .about-opening{max-width:720px}
.page-about .about-belief{max-width:660px}
.page-about .about-belief p{font-size:clamp(2rem,3.1vw,3.3rem)}
.page-about .about-story{padding-top:15svh}
.page-about .experience-arc{height:265px}
.page-about .experience-arc dl{inset:70px 0 0}
.approach-proof h2{font-size:clamp(3.2rem,5.2vw,5rem);margin-bottom:28px}
.approach-proof{background:var(--paper);padding-top:120px}
.approach-proof .case-card{transition:transform .4s var(--scene-ease)}
.approach-proof .case-card:hover{transform:translateY(-6px)}
.closing-scene h2{font-size:clamp(3rem,5.4vw,5.5rem);max-width:1150px;margin-inline:auto}
/* The dial responds to native scroll. Without enhancement every milestone stays visible. */
.timeline-scene{position:relative;padding:75px 0;scroll-margin-top:var(--header-height)}
.timeline-sticky>.eyebrow{text-align:center;margin-bottom:50px}
.timeline-panels{width:min(880px,calc(100% - 48px));margin:auto}
.timeline-panel{text-align:center;padding:50px 0}
.timeline-panel h2{font-size:clamp(2.5rem,4.5vw,4.6rem);max-width:860px;margin:22px auto}
.timeline-panel>p:not(.timeline-year){font-size:18px;max-width:530px;margin:24px auto}
.timeline-year{font:500 22px/1 var(--font);color:var(--muted)}
.timeline-panel .text-link{font-size:13px}
.timeline-controls{display:none;justify-content:center;gap:10px;z-index:3}
.timeline-controls button{background:none;color:var(--pine);border:1px solid var(--line);border-radius:24px;padding:10px 22px;font-size:13px;min-height:44px;transition:background .2s,color .2s}
.timeline-controls button[aria-pressed=true]{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.timeline-enhanced{height:calc(var(--timeline-stops,3)*85svh + 40svh);padding:0}
.timeline-enhanced .timeline-sticky{height:calc(100svh - var(--header-height));position:sticky;top:var(--header-height);overflow:hidden}
.timeline-enhanced .timeline-sticky>.eyebrow{position:absolute;top:5%;left:0;width:100%;font-size:11px}
.timeline-enhanced .timeline-panels{position:absolute;inset:0;pointer-events:none}
.timeline-enhanced .timeline-panel{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .5s var(--scene-ease);padding:0;pointer-events:none}
.timeline-enhanced .timeline-panel.is-current{opacity:1;transform:none;pointer-events:auto}
.timeline-enhanced .timeline-panel h2{position:absolute;top:13%;left:50%;transform:translateX(-50%);width:min(860px,90vw);margin:0;font-size:clamp(2.5rem,4vw,4.2rem)}
.timeline-enhanced .timeline-year{position:absolute;top:45%;left:0;width:100%;font:400 2.8rem/1 var(--display)}
.timeline-enhanced .timeline-panel>p:not(.timeline-year){position:absolute;top:60%;left:50%;transform:translateX(-50%);width:min(530px,85vw);margin:0;font-size:17px}
.timeline-enhanced .timeline-panel .text-link{position:absolute;top:79%;left:50%;transform:translateX(-50%);white-space:nowrap}
.timeline-enhanced .timeline-controls{display:flex;position:absolute;bottom:3%;left:0;width:100%}
.timeline-needle{display:none}
.timeline-enhanced .timeline-needle{display:block;position:absolute;top:36%;left:50%;height:44px;width:1px;background:var(--clay)}
.timeline-enhanced .timeline-needle::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--clay);left:-2px;top:0}
/* The menu stays near its trigger, with the same simple circle mechanism. */
.site-menu{overflow-x:hidden;background:var(--blue);padding:28px max(4.2vw,24px)}
.menu-sculpture{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.menu-top,.menu-content{position:relative;z-index:1}
.menu-content{width:min(690px,70%);margin-left:28%;padding-top:clamp(35px,7vh,90px)}
.site-menu .nav{position:relative;inset:auto;padding:0;gap:clamp(22px,3.4vh,38px)}
.site-menu .nav a{font-size:clamp(2.6rem,4.5vw,4.6rem);line-height:1.15;padding:6px 0;gap:0}
.site-menu .button.menu-assessment{display:inline-flex;background:var(--clay);color:var(--pine);font:500 16px/1.3 var(--font);margin:40px 0 40px;min-height:54px}
.site-menu .button.menu-assessment:hover{background:#E59879}
.site-menu .menu-assessment .arrow{font:500 19px/1 var(--font)}
.site-menu .menu-bottom{display:flex;font-size:13px;flex-direction:row;align-items:center;justify-content:flex-start;gap:24px;padding-top:0;border:0;flex-wrap:wrap}
.site-menu .menu-bottom a{white-space:nowrap}
.site-menu .menu-bottom p{margin:0}
.site-menu[open] .nav a{animation:menu-link-arrive .55s var(--scene-ease) both}
.site-menu[open] .nav a:nth-child(2){animation-delay:.055s}.site-menu[open] .nav a:nth-child(3){animation-delay:.11s}.site-menu[open] .nav a:nth-child(4){animation-delay:.165s}
@keyframes menu-link-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 .motion-world{opacity:.8}
 .page-home .work-scene{display:block;min-height:0;padding:30px 0 70px}
 .page-home .work-art{position:relative;left:0;width:100%;height:310px}
 .page-home .case-intro{position:relative;top:0;padding:55px 0 25px}
 .progress-art{height:220px;max-width:380px;margin:24px auto 0}
 .page-home .case-stage{padding-top:0}
 .page-home .case-card{margin-bottom:18svh}
 .page-about .about-opening,.page-about .about-belief{max-width:100%}
 .page-about .about-belief p{font-size:2.05rem;line-height:1.23}
 .page-about .experience-arc{height:225px}
 .page-about .experience-arc dl{inset:60px 0 0}
 .page-about .client-proof{padding:22px 0 30px}
 .site-menu{padding:22px;min-height:100dvh}
 .site-menu .menu-top{gap:16px}
 .site-menu .menu-top .logo{width:min(205px,calc(100vw - 164px));min-width:0}
 .site-menu .menu-close{flex:none;white-space:nowrap;padding:11px 14px}
 .menu-content{width:100%;margin-left:0;padding-top:42px}
 .site-menu .menu-bottom{font-size:12px;gap:12px;flex-wrap:nowrap}
 .site-menu .nav{padding:0;gap:19px}
 .site-menu .nav a{font-size:clamp(2.1rem,8.8vw,3.3rem);padding:5px 0;gap:0}
 .site-menu .button.menu-assessment{margin:30px 0 30px;min-height:52px}
 .menu-sculpture{opacity:.62}
 .timeline-enhanced .timeline-sticky>.eyebrow{font-size:9px;top:6%}
 .timeline-enhanced .timeline-panel h2{font-size:2.5rem;top:15%;width:92vw}
 .timeline-enhanced .timeline-year{font-size:2.4rem;top:45%}
 .timeline-enhanced .timeline-panel>p:not(.timeline-year){font-size:15px;top:60%;width:calc(100vw - 45px);max-width:410px}
 .timeline-enhanced .timeline-panel .text-link{top:82%;font-size:11px}
 .timeline-enhanced .timeline-controls{bottom:2%}
 .timeline-controls{gap:6px}
 .timeline-controls button{padding:8px 11px;font-size:12px}
 .approach-proof{padding-top:70px}
 .closing-scene h2{font-size:clamp(2.65rem,9vw,3.5rem)}
}
@media(max-height:680px){
 .menu-content{padding-top:25px}
 .site-menu .nav{padding:0;gap:15px}
 .site-menu .nav a{font-size:clamp(1.85rem,5vh,3rem);padding:4px 0}
 .site-menu .button.menu-assessment{margin:22px 0 22px}
 .timeline-enhanced .timeline-panel h2{font-size:clamp(2rem,4.5vh,3rem);top:12%}
 .timeline-enhanced .timeline-panel>p:not(.timeline-year){font-size:14px;top:57%}
 .timeline-enhanced .timeline-year{top:43%;font-size:2rem}
 .timeline-enhanced .timeline-panel .text-link{top:82%}
 .timeline-enhanced .timeline-controls{bottom:0}
}
@media(prefers-reduced-motion:reduce){
 .motion-world{display:none}
 .progress-art{display:none}
 .timeline-panel{opacity:1;transform:none}
 .site-menu[open] .nav a{animation:none}
 .approach-proof .case-card{transition:none}.approach-proof .case-card:hover{transform:none}
}