/* The scene is the centre of the experience. Native scrolling remains in charge. */
.experience-page{--paper:#f4f5f3;--ink:#303332;--muted:#646967;--line:#d0d4d1;background:var(--paper);color:var(--ink)}
.experience-page .site-header{position:fixed;inset:0 0 auto;height:100px;pointer-events:none;transition:height .4s}
.experience-page .header-inner>*{pointer-events:auto}
.experience-page .header-inner{gap:20px}
.experience-page .site-header:before{content:'';position:absolute;inset:0;background:var(--paper);opacity:0;transition:opacity .4s}
.has-scrolled .experience-page .site-header:before{opacity:1}
.experience-page .brand{width:76px;top:18px}
.experience-page .header-rule{opacity:.4}
.experience-page .desktop-nav{border:1px solid #bfc5c1;border-radius:40px;padding:12px 20px;gap:25px;font-size:12px;background:#f4f5f3c9}
.experience-page .nav-contact{margin-left:0}
.experience-page .nav-position{left:15%;font-size:11px}
.experience-page .menu-button{width:40px;height:40px}
.experience-page .menu-button span{width:15px}
.sound-toggle{display:flex;align-items:center;gap:10px;padding:10px 0;border:0;background:transparent;font-size:11px;white-space:nowrap}
.sound-bars{display:flex;align-items:center;gap:3px;height:19px;width:22px}
.sound-bars i{display:block;width:2px;height:4px;background:currentColor;transform-origin:center;transition:height .3s}
.sound-bars i:nth-child(2){height:11px}.sound-bars i:nth-child(3){height:17px}.sound-bars i:nth-child(4){height:8px}
.sound-toggle[aria-pressed=true]{color:var(--blue)}
.sound-toggle[aria-pressed=true] .sound-bars i{animation:sound-meter .8s ease-in-out infinite alternate}
.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:-.4s}.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:-.65s}
@keyframes sound-meter{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.intro-running .sound-toggle{position:fixed;top:30px;left:var(--gutter);z-index:50}
.intro-running .site-header:before{opacity:0!important}
.intro-running .brand{top:18px}
.experience-page .hero{min-height:100svh;padding-top:max(175px,20vh);padding-bottom:55px;align-content:center;grid-template-columns:minmax(0,3fr) minmax(220px,1fr);column-gap:5vw}
.experience-page h1{font-size:clamp(64px,7.5vw,146px);font-weight:550;letter-spacing:-.075em;line-height:1.04}
.hero-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-line>span{display:block;transform-origin:left bottom}
.js .hero-line>span{transform:translateY(115%) rotate(3deg)}
.experience-ready .hero-line>span{animation:hero-type 1.3s cubic-bezier(.19,1,.22,1) both}
.experience-ready .hero-line:nth-child(2)>span{animation-delay:.11s}.experience-ready .hero-line:nth-child(3)>span{animation-delay:.22s}
@keyframes hero-type{from{transform:translateY(115%) rotate(3deg)}to{transform:none}}
.experience-page .hero-context{font-size:12px;letter-spacing:.01em;margin-bottom:30px}
.experience-page .hero-aside{padding-top:125px}
.experience-page .hero-aside>p{font-size:clamp(16px,1.45vw,22px);max-width:310px}
.experience-page .hero-since{font-size:11px;margin-top:40px}
.experience-ready .hero-aside,.experience-ready .hero-context,.experience-ready .scroll-cue{animation:editorial-arrive 1s .3s both}
@keyframes editorial-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.experience-page .scroll-cue{margin-top:70px;margin-bottom:0;font-size:11px}
.scroll-line{overflow:hidden;position:relative;width:48px}
.scroll-line:after{content:'';position:absolute;inset:0;background:var(--paper);transform:translateX(-100%);animation:scroll-invitation 2.5s 2s ease-in-out 3}
@keyframes scroll-invitation{to{transform:translateX(100%)}}

/* One continuous architectural space, built in four chapters. */
.process-section{position:relative;background:var(--paper);border-top:1px solid var(--line)}
.process-pin{position:relative;min-height:850px}
.process-stage{height:730px;min-height:0!important;border-radius:0;background:var(--paper);isolation:isolate;overflow:hidden}
.motion-ready .process-section{height:500svh}
.motion-ready .process-pin{position:sticky;top:0;height:100svh;min-height:0;padding-top:95px;display:flex;flex-direction:column}
.motion-ready .process-stage{flex:1;height:auto;min-height:0}
.stage-word{position:absolute;top:8%;left:27%;right:8%;z-index:0;pointer-events:none;line-height:.95}
.stage-word>span{display:block;font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-.075em;font-size:clamp(80px,12.4vw,210px);color:transparent;-webkit-text-stroke:1px #2287d970;transform:translateY(calc(var(--word-shift,0)*1px));opacity:var(--word-opacity,1)}
.process-stage .stage-intro{top:24px;left:var(--gutter);z-index:4}
.stage-intro .section-caption{font-size:11px;letter-spacing:.01em;margin-bottom:10px}
.stage-intro h2{font-size:24px;line-height:1.15;letter-spacing:-.045em}
.stage-intro .connection-toggle{font-size:11px;margin-top:19px}
.connection-icon{width:26px;height:26px;border-color:#a5b2ac;font-size:19px;transition:transform .5s,background .3s}
.connection-toggle[aria-pressed=true] .connection-icon{transform:rotate(45deg)}
.process-stage .process-art{inset:0;width:100%;height:100%;transition:none;transform:translate3d(calc(var(--camera-x,0)*1px),calc(var(--camera-y,0)*1px),0) scale(var(--camera-scale,1));transform-origin:50% 53%;will-change:transform;z-index:1;pointer-events:none}
.process-art>svg{display:block;width:100%;height:100%;overflow:visible}
.process-art [id^=phase-]{transition:none;filter:none!important}
.process-art .phase-muted,.process-art .phase-highlight{opacity:1}
.process-art #process-links{opacity:var(--connection-amount,0);transition:none}
.connections-on .process-art #process-links{filter:none;opacity:1!important}
.draw-layer{fill:none;pointer-events:none}
.draw-layer *{fill:none!important;stroke:#5d6762!important;stroke-width:1.05!important;filter:none!important;vector-effect:non-scaling-stroke}
.scene-wireframe{mix-blend-mode:multiply}
.blueprint-layer{pointer-events:none;opacity:0;transition:opacity .25s}
.lens-active .blueprint-layer,.connections-on .blueprint-layer{opacity:1}
.blueprint-layer .blueprint-solid{fill:#eaf4fc;fill-opacity:.94;stroke:none}
.blueprint-layer .blueprint-lines *{fill:none!important;stroke:#2287d9!important;stroke-width:1!important;filter:none!important;vector-effect:non-scaling-stroke}
.blueprint-label{font-family:'DM Sans',sans-serif;font-size:13px;fill:#0066b9}
.scene-readout{position:absolute;right:var(--gutter);top:22px;z-index:4;display:grid;grid-template-columns:1fr;justify-items:end;gap:5px;color:var(--muted);font-size:10px}
.readout-number{font-family:Manrope;font-size:56px;line-height:1;letter-spacing:-.07em;color:#c2c8c4;font-variant-numeric:tabular-nums;font-weight:600}
.readout-number:after{content:' / 100';font-size:15px;letter-spacing:-.04em}
.readout-meter{display:block;width:115px;height:2px;background:var(--line);margin-block:7px}
.readout-meter i{display:block;height:100%;background:var(--blue);width:100%;transform:scaleX(var(--scene-progress,0));transform-origin:left}
.process-stage .stage-caption{z-index:4;left:var(--gutter);bottom:27px;right:auto;width:420px;max-width:43%;border:0;padding:0}
.stage-caption>span{font-size:11px;letter-spacing:.06em;color:var(--blue)}
.stage-caption h3{font-size:clamp(24px,2.6vw,40px);font-weight:500;letter-spacing:-.045em;line-height:1.15;margin:14px 0 12px}
.stage-caption p{font-size:15px;color:#606562;line-height:1.6;max-width:380px}
.process-stage .stage-marker{left:auto;right:var(--gutter);bottom:35px;z-index:4;max-width:250px;justify-content:flex-end;flex-wrap:wrap;gap:10px;font-size:10px}
.stage-marker .scene-skip{display:block;flex-basis:100%;text-align:right;color:var(--muted);margin-top:9px;text-decoration:underline;text-underline-offset:4px}
.process-controls{position:relative;flex-shrink:0;z-index:4}
.process-tabs{gap:30px;margin-top:0}
.process-tabs button{position:relative;font-size:12px;padding:20px 0 23px;transition:color .25s;border-color:#d0d4d1}
.process-tabs button:before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--blue);transform:scaleX(var(--tab-progress,0));transform-origin:left;transition:transform .1s linear}
.process-tabs button[aria-selected=true]{border-color:#d0d4d1;color:#0066ad}
.phase-panel{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scene-lens{position:absolute;width:170px;height:170px;left:0;top:0;border:1px solid #2287d9;border-radius:50%;z-index:3;pointer-events:none;opacity:0;transform:translate(-300px,-300px);transition:opacity .25s;box-shadow:0 0 0 6px #2287d90a,inset 0 0 0 4px #f4f5f399}
.lens-active .scene-lens{opacity:1}
.lens-cross:before,.lens-cross:after{content:'';position:absolute;left:calc(50% - 5px);top:50%;width:10px;height:1px;background:#2287d9}
.lens-cross:after{transform:rotate(90deg)}
.lens-label{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);white-space:nowrap;font-size:10px;background:var(--paper);padding:3px 7px;color:#0066b9}
.signal-dot{fill:#2287d9;stroke:var(--paper);stroke-width:3}
.scene-pulse{fill:none;stroke:#2287d9;stroke-width:1}

/* Editorial motion follows the reading position rather than repeating card fades. */
.experience-page .js .reveal{transform:none}
.manifesto-body h2{color:#aeb5b0}
.manifesto-body .reading-word{color:var(--ink);opacity:var(--read-opacity,.22);transition:opacity .12s}
.experience-page .section-space{padding-block:150px}
.experience-page .manifesto{padding-top:170px;padding-bottom:170px}
.experience-page .method-section,.experience-page .contact-section{background:#e9ede9}
.experience-page .method-title{top:145px}
.method-steps:after{content:'';position:absolute;left:11px;top:10px;width:1px;height:calc(100% - 100px);background:var(--blue);transform:scaleY(var(--method-progress,0));transform-origin:top}
.method-steps li>span{z-index:1;background:#e9ede9}
.method-steps li{opacity:var(--step-opacity,.35);transition:opacity .2s}
.experience-page .application-visual{border-radius:0}
.experience-page .flow-sheet.front{transform:translate(calc(var(--document-progress,0)*26px),calc(var(--document-progress,0)*-25px)) rotate(calc(-13deg + var(--document-progress,0)*10deg)) skewY(8deg)}
.experience-page .footer-word{transform:translateY(calc((1 - var(--footer-progress,1))*70px));opacity:var(--footer-progress,1)}
.experience-page .solution-list details{overflow:clip}
.experience-page .solution-body{transform-origin:top}

/* Menu opens from its circular control, then the chapters lift into place. */
.experience-page dialog{background:#222725;color:#f5f6f3;padding-top:35px;overflow:auto}
.experience-page dialog::backdrop{background:#22272566}
.experience-page dialog[open]{animation:menu-open .8s cubic-bezier(.16,1,.3,1) both}
.experience-page dialog[open] nav a{animation:menu-item .85s cubic-bezier(.16,1,.3,1) both}
.experience-page dialog[open] nav a:nth-child(1){animation-delay:.08s}.experience-page dialog[open] nav a:nth-child(2){animation-delay:.14s}.experience-page dialog[open] nav a:nth-child(3){animation-delay:.2s}.experience-page dialog[open] nav a:nth-child(4){animation-delay:.26s}
.experience-page dialog nav a{color:#8b9690;font-size:clamp(50px,7.9vw,124px);line-height:1.25;font-weight:500;transition:color .25s,translate .4s}
.experience-page dialog nav a:hover,.experience-page dialog nav a:focus-visible{color:white;translate:14px 0}
.experience-page dialog nav a span{color:#85c5f7;font-size:11px}
.experience-page dialog.is-closing{animation:menu-close .4s ease-in both}
.menu-top{border-bottom:1px solid #ffffff30;padding-bottom:24px}
.menu-email{display:block;border-top:1px solid #ffffff30;padding-top:25px}
.menu-preview{position:absolute;right:7%;top:28%;width:27%;color:#b3c9bb;pointer-events:none}
.menu-preview img{width:100%;opacity:.9;filter:grayscale(1) invert(1);transition:transform .65s var(--ease)}
.menu-preview p{font-size:12px;max-width:210px;margin-top:30px;color:#a4b1a8}
.menu-preview .menu-preview-count{display:block;font-size:11px;color:#80bded;margin-bottom:25px}
@keyframes menu-open{from{clip-path:circle(0 at 93% 5%)}to{clip-path:circle(150% at 93% 5%)}}
@keyframes menu-close{from{clip-path:circle(150% at 93% 5%)}to{clip-path:circle(0 at 93% 5%)}}
@keyframes menu-item{from{opacity:0;transform:translateY(55px) rotate(2deg)}to{opacity:1;transform:none}}

@media(min-width:1800px){.experience-page h1{font-size:146px}.hero{min-height:900px}.process-stage .stage-caption{max-width:470px}}
@media(max-width:1100px){.experience-page .nav-position{display:none}.experience-page .desktop-nav{gap:18px;padding:11px 17px}.experience-page .header-inner{gap:16px}.experience-page .hero{grid-template-columns:minmax(0,2.7fr) minmax(210px,1fr);gap:4vw}.experience-page .hero-aside{padding-top:108px}.experience-page h1{font-size:7.6vw}.stage-intro h2{font-size:22px}.process-stage .stage-caption{width:350px}.stage-caption p{font-size:13px}.stage-word{left:25%;top:13%}.menu-preview{width:25%;right:5%}.experience-page dialog nav{max-width:73%}}
@media(max-width:760px){
 .experience-page .site-header{height:85px}.experience-page .brand{width:66px;top:16px}.experience-page .header-inner{gap:18px}.experience-page .desktop-nav{border:0;background:none;padding:0}.experience-page .desktop-nav .nav-contact{font-size:11px}.sound-toggle{width:24px;padding:9px 0}.sound-toggle [data-sound-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.experience-page .menu-button{width:34px;height:34px}.intro-running .sound-toggle{left:auto;right:var(--gutter);top:24px;width:auto}.intro-running .sound-toggle [data-sound-label]{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
 .experience-page .hero{min-height:95svh;padding-top:145px;padding-bottom:45px;display:block}.experience-page h1{font-size:clamp(37px,9.2vw,70px);line-height:1.1;letter-spacing:-.07em}.experience-page .hero-context{font-size:10px;margin-bottom:26px}.experience-page .hero-aside{padding-top:32px}.experience-page .hero-aside>p{font-size:16px;max-width:310px}.experience-page .hero-since{margin-top:24px}.experience-page .scroll-cue{margin-top:48px;font-size:10px}
 .motion-ready .process-section{height:410svh}.motion-ready .process-pin{padding-top:85px}.process-pin{min-height:750px}.process-stage{height:650px}.process-stage .stage-intro{top:15px;left:6vw}.stage-intro .section-caption{font-size:9px;margin-bottom:7px}.stage-intro h2{font-size:20px}.stage-intro .connection-toggle{margin-top:12px;font-size:10px}.connection-icon{width:23px;height:23px}.scene-readout{right:6vw;top:15px;font-size:8px}.readout-number{font-size:38px}.readout-number:after{font-size:11px}.readout-meter{width:82px}.stage-word{left:9%;right:4%;top:24%;z-index:0}.stage-word>span{font-size:19vw}
 .process-stage .process-art{width:140%;left:-23%;top:3%;height:85%}.process-stage .stage-caption{bottom:49px;left:6vw;max-width:88%;width:360px}.stage-caption h3{font-size:24px;margin:11px 0 8px}.stage-caption p{font-size:12px;max-width:340px;line-height:1.5}.stage-caption>span{font-size:9px}.process-stage .stage-marker{left:6vw;right:6vw;bottom:12px;max-width:none;justify-content:space-between;font-size:9px;gap:5px}.stage-marker>span:first-child{display:none}.stage-marker .scene-skip{flex-basis:auto;margin:0;font-size:9px}.process-tabs{gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}.process-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:10px;padding:14px 0 18px}.process-tabs button>span{font-size:9px}.scene-lens{display:none}.scene-hint{font-size:9px}
 .experience-page .section-space{padding-block:85px}.experience-page .manifesto{padding-block:100px}.experience-page .method-title{position:static}.experience-page dialog nav{max-width:none;margin-top:12vh}.experience-page dialog nav a{font-size:11.5vw;line-height:1.5;gap:20px}.menu-preview{display:none}.menu-email{font-size:14px}.experience-page .footer-word{font-size:19.2vw}
}
@media(max-height:700px) and (min-width:761px){.motion-ready .process-pin{padding-top:85px}.process-stage .stage-intro{top:15px}.stage-intro h2{font-size:20px}.scene-readout{top:15px}.stage-caption h3{font-size:24px}.stage-caption p{font-size:12px}.process-stage .stage-caption{bottom:15px}.process-tabs button{padding:15px 0}.stage-word>span{font-size:11vw}}
@media(prefers-reduced-motion:reduce){
 .motion-ready .process-section{height:auto}.motion-ready .process-pin{position:relative;min-height:750px;height:auto;padding-top:100px}.motion-ready .process-stage{height:650px;flex:auto}.hero-line>span{transform:none!important}.experience-page .process-art{transform:none!important}.scene-lens,.draw-layer{display:none}.manifesto-body .reading-word{opacity:1!important}.method-steps li{opacity:1!important}.experience-page .footer-word{transform:none;opacity:1}.sound-toggle[aria-pressed=true] .sound-bars i{animation:none}.experience-page dialog[open],.experience-page dialog.is-closing{clip-path:none;animation:none}.js .hero-line>span{transform:none}.stage-word>span{transform:none;opacity:1}.signal-dot,.scene-pulse{display:none}
}