:root {
  --canvas: #f0f0ec;
  --surface: #fafaf7;
  --surface-2: #e3e4de;
  --border: #ccccca;
  --border-strong: #81847c;
  --ink: #1c201d;
  --muted: #565c55;
  --accent: #b84221;
  --accent-hover: #9f351a;
  --accent-ink: #ffffff;
  --accent-text: #a43419;
  --accent-strong: #8b301b;
  --accent-soft: #f4ddd3;
  --accent-border: #c88570;
  --success: #2d6543;
  --success-ink: #ffffff;
  --success-soft: #dceade;
  --success-strong: #285a3b;
  --warning: #825119;
  --warning-ink: #ffffff;
  --warning-soft: #ede3cf;
  --warning-strong: #76501b;
  --danger: #a32c2c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dddd;
  --danger-strong: #962525;
  --chart-1: #b84221;
  --chart-2: #627565;
  --chart-3: #8a694f;
  --chart-4: #535d51;
  --chart-5: #607680;
  --chart-6: #777183;
  --font-display: "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-sans: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono Variable", monospace;
  --display-weight: 500;
  --display-tracking: -0.065em;
  --eyebrow-tracking: 0.08em;
  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 0.75rem;
  --x-night: #131713;
  --x-night-ink: #f0f1e8;
  --x-night-muted: #b6bdb2;
  --x-copper: #d07950;
  --x-metal: #b2b7ab;
  --x-moss: #c8d0b7;
  --x-panel: #dfe3d6;
  --x-deep: #26382c;
  --x-glass: #323b32;
}

html[data-theme="dark"] {
  --canvas: #151a16;
  --surface: #202720;
  --surface-2: #2b332b;
  --border: #3d483e;
  --border-strong: #768473;
  --ink: #eef0e7;
  --muted: #b6bdb2;
  --accent: #d58c6d;
  --accent-hover: #e4aa8e;
  --accent-ink: #211710;
  --accent-text: #e9ad92;
  --accent-strong: #f0bda5;
  --accent-soft: #442d22;
  --accent-border: #a26850;
  --success: #558a62;
  --success-ink: #101a12;
  --success-soft: #203a27;
  --success-strong: #a1c9a9;
  --warning: #c99b50;
  --warning-ink: #211a0f;
  --warning-soft: #3d3020;
  --warning-strong: #e4bb7d;
  --danger: #db8585;
  --danger-ink: #251212;
  --danger-soft: #432626;
  --danger-strong: #ecabab;
  --chart-1: #b84221;
  --chart-2: #627565;
  --chart-3: #8a694f;
  --chart-4: #535d51;
  --chart-5: #607680;
  --chart-6: #777183;
  --font-display: "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-sans: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono Variable", monospace;
  --display-weight: 500;
  --display-tracking: -0.065em;
  --eyebrow-tracking: 0.08em;
  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 0.75rem;
  --x-night: #131713;
  --x-night-ink: #f0f1e8;
  --x-night-muted: #b6bdb2;
  --x-copper: #d07950;
  --x-metal: #b2b7ab;
  --x-moss: #c8d0b7;
  --x-panel: #dfe3d6;
  --x-deep: #26382c;
  --x-glass: #323b32;
}

html{scroll-behavior:smooth;scroll-padding-top:2rem}
.motion-site{font-family:var(--font-body);overflow-x:clip}
.motion-site button,.motion-site a{-webkit-tap-highlight-color:transparent}
.motion-site a{color:inherit;text-decoration:none}
.motion-site button{font:inherit;cursor:pointer}
.motion-site .icon{width:1.15rem;height:1.15rem;flex-shrink:0}
.motion-site :focus-visible{outline:2px solid var(--accent-text);outline-offset:6px}
.skip-link{position:fixed;top:0;left:1rem;transform:translateY(-150%);z-index:99;background:var(--canvas);padding:1rem}
.skip-link:focus{transform:none}
.site-header{height:7rem;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;gap:2rem}
.wordmark{display:flex;align-items:center;gap:.75rem;font-size:.7rem;font-weight:700;line-height:1.2;letter-spacing:.03em}
.brand-symbol{font-size:3.75rem;letter-spacing:-.12em;line-height:1;font-weight:600;padding-right:.25rem}
.header-note{font-size:.75rem;line-height:1.5;margin-right:auto;margin-left:12vw}
.header-actions{display:flex;align-items:center;gap:1.75rem;font-size:.8rem}
.talk-link{display:flex;align-items:center;gap:.5rem}
.theme-switch{background:none;border:1px solid var(--border);border-radius:50%;width:2.5rem;height:2.5rem;display:grid;place-items:center}
.menu-trigger{display:flex;align-items:center;gap:.75rem;background:none;border:0}
.menu-lines{width:1.5rem;height:.5rem;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.hero{position:relative;isolation:isolate;margin:0 1rem;min-height:46rem;height:calc(100svh - 8rem);max-height:68rem;border-radius:1.5rem;background:var(--x-night);color:var(--x-night-ink);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 70%)}
.hero-topline{position:absolute;left:2rem;right:2rem;top:2rem;display:flex;justify-content:space-between;font-size:.7rem;z-index:2;color:var(--x-night-muted)}
#sculpture{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-title{position:absolute;bottom:6rem;left:3rem;z-index:2;pointer-events:none}
.small-label{text-transform:uppercase;font-size:.6rem;letter-spacing:.12em}
.hero h1{font-size:clamp(4.5rem,7.8vw,8.75rem);font-weight:500;letter-spacing:-.075em;line-height:.93;margin:1.5rem 0 0}
.hero h1 span{color:var(--x-copper)}
.hero-aside{position:absolute;right:3rem;bottom:6rem;z-index:2;display:flex;gap:1rem;align-items:flex-start;font-size:.8rem;line-height:1.6}
.orbit-dot{width:.6rem;height:.6rem;background:var(--x-copper);border-radius:50%;margin-top:.5rem}
.hero-bottom{position:absolute;z-index:2;bottom:2rem;left:3rem;right:3rem;display:flex;align-items:center;justify-content:space-between;font-size:.65rem;color:var(--x-night-muted)}
.hero-bottom a{display:flex;align-items:center;gap:1.5rem}
.motion-toggle{border:0;background:none;color:inherit;display:flex;align-items:center;gap:.5rem;font-size:.65rem}
.motion-toggle .icon{width:.8rem;height:.8rem}
.sculpture-fallback{position:absolute;width:32rem;height:32rem;left:54%;top:42%;transform:translate(-50%,-50%) rotate(-25deg);opacity:.8}
.sculpture-fallback i{position:absolute;inset:0;border:4rem solid var(--x-copper);border-radius:50%;box-shadow:inset .75rem 1rem 1rem rgba(255,255,255,.25),1rem 2rem 3rem rgba(0,0,0,.6);transform:rotateY(60deg)}
.sculpture-fallback i:nth-child(2){transform:rotate(60deg) rotateY(60deg);border-color:var(--x-metal)}
.sculpture-fallback i:nth-child(3){transform:rotate(120deg) rotateY(60deg)}
.webgl-ready .sculpture-fallback{display:none}
.section-frame{padding:7rem 4rem}
.section-kicker{display:flex;justify-content:space-between;font-size:.65rem;letter-spacing:.025em;color:var(--muted)}
.statement{display:grid;grid-template-columns:1.5fr 1fr;gap:5rem;align-items:end;margin-top:5rem}
.statement h2,.approach-section h2{font-size:clamp(2.5rem,4.5vw,5rem);font-weight:500;line-height:1.06;letter-spacing:-.065em;margin:0}
.statement h2>span:not(.kinetic-word){color:var(--muted)}
.studio-copy{max-width:24rem;font-size:.9rem;line-height:1.7}
.studio-copy p{margin:0 0 2rem}
.text-link{display:inline-flex;gap:1rem;align-items:center;border-bottom:1px solid var(--border-strong);padding-bottom:.5rem;font-size:.75rem}
.work-section{padding-top:3rem}
.work-head{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--border);padding-top:3rem;margin-bottom:3rem}
.work-head h2{font-size:clamp(3rem,5vw,5.75rem);font-weight:500;line-height:1;letter-spacing:-.06em;margin:0;position:relative}
.work-count{font-size:.7rem;letter-spacing:0;position:absolute;top:.5rem;right:-2.5rem}
.work-head>p{font-size:.7rem;line-height:1.5;max-width:16rem;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start}
.project{border:0;background:none;padding:0;color:var(--ink);text-align:left;min-width:0}
.project-offset{margin-top:9rem}
.project-art{height:34rem;border-radius:1rem;position:relative;overflow:hidden;transition:border-radius .5s}
.project:hover .project-art{border-radius:3rem}
.flow-art{background:var(--x-panel);color:var(--x-deep)}
.art-label{position:absolute;top:1.75rem;left:1.75rem;font-size:.55rem;letter-spacing:.08em;z-index:2}
.art-title{position:absolute;left:1.5rem;bottom:1.5rem;font-size:7rem;line-height:.8;letter-spacing:-.085em;font-weight:500}
.flow-rings{position:absolute;left:35%;top:12%;width:22rem;height:22rem;transform:rotate(-35deg);transition:transform 1s}
.flow-rings i{position:absolute;border:1.5rem solid var(--x-deep);border-radius:50%;inset:0;box-shadow:inset 0 .5rem .5rem rgba(255,255,255,.3),0 1rem 1rem rgba(0,0,0,.15)}
.flow-rings i:nth-child(2){inset:2.5rem}
.flow-rings i:nth-child(3){inset:5rem}
.flow-rings i:nth-child(4){inset:7.5rem}
.flow-rings i:nth-child(5){inset:10rem}
.project:hover .flow-rings{transform:rotate(-5deg) scale(1.08)}
.project-arrow{position:absolute;right:1.5rem;bottom:1.5rem;border:1px solid currentColor;border-radius:50%;height:2.75rem;width:2.75rem;display:grid;place-items:center;transition:background .3s,transform .3s}
.project:hover .project-arrow{transform:rotate(45deg)}
.project-caption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.25rem .25rem}
.project-caption h3{margin:0;font-size:1.2rem;font-weight:500;letter-spacing:-.04em}
.project-caption>span{font-size:.6rem;color:var(--muted)}
.signal-art{background:var(--x-glass);color:var(--x-night-ink)}
.signal-title{position:absolute;font-size:4.75rem;line-height:.95;letter-spacing:-.07em;left:1.75rem;bottom:1.75rem;z-index:1}
.signal-orb{width:19rem;height:19rem;border-radius:50%;position:absolute;left:15%;top:10%;background:radial-gradient(circle at 35% 25%,var(--x-night-ink),var(--x-metal) 25%,var(--x-copper) 55%,var(--x-night) 80%);box-shadow:2rem 3rem 4rem rgba(0,0,0,.35);transition:transform 1s}
.signal-orb::after{content:"";position:absolute;inset:-10%;border:1px solid var(--x-metal);border-radius:50%;transform:rotate(-35deg) scaleY(.35)}
.signal-orb i{position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(255,255,255,.35);transform:scaleX(.5)}
.signal-orb i:nth-child(2){transform:rotate(45deg) scaleX(.5)}
.signal-orb i:nth-child(3){transform:rotate(90deg) scaleX(.5)}
.signal-orb i:nth-child(4){transform:rotate(135deg) scaleX(.5)}
.project:hover .signal-orb{transform:rotate(35deg) translateY(-.5rem)}
.approach-section{background:var(--surface-2);border-radius:1.5rem;margin:0 1rem}
.approach-section h2{margin-top:5rem;max-width:60rem}
.approach-section h2>span:not(.kinetic-word){color:var(--accent-text)}
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:8rem;margin-top:5rem}
.approach-intro{font-size:.9rem;line-height:1.7;max-width:22rem;margin:0;color:var(--muted)}
.method-list details{border-bottom:1px solid var(--border-strong)}
.method-list summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.5rem 0;list-style:none;cursor:pointer;font-size:1rem;letter-spacing:-.02em}
.method-list summary::-webkit-details-marker{display:none}
.method-list details:first-child summary{padding-top:0}
.method-list details[open] .icon{transform:rotate(45deg)}
.method-list details p{font-size:.8rem;line-height:1.7;color:var(--muted);max-width:25rem;padding-bottom:1.5rem;margin:0}
.contact-section{padding-top:8rem;padding-bottom:4rem}
.contact-title{display:block;position:relative;font-size:clamp(4rem,8.3vw,9rem);font-weight:500;line-height:.97;letter-spacing:-.075em;margin:5rem 0 4rem}
.contact-title>span:not(.kinetic-word){color:var(--accent-text)}
.contact-arrow{position:absolute;right:0;bottom:0;width:8vw;height:8vw;stroke:currentColor;fill:none;stroke-width:1}
.contact-bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.contact-bottom p{font-size:.8rem;color:var(--muted)}
.contact-pill{display:inline-flex;justify-content:center;align-items:center;gap:2rem;border:1px solid var(--border-strong);border-radius:999px;padding:1.25rem 1.75rem;font-size:.75rem;transition:background .3s,color .3s}
.contact-pill:hover{background:var(--ink);color:var(--canvas)}
.site-footer{margin:0 4rem;padding:2rem 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:2rem;font-size:.65rem;color:var(--muted)}
.footer-brand{font-size:1rem;letter-spacing:-.05em;color:var(--ink)!important}
.site-footer a{display:flex;gap:.5rem;align-items:center}
.navigation-dialog,.project-dialog{background:var(--canvas);color:var(--ink);border:none;padding:3rem;max-height:100svh}
.navigation-dialog::backdrop,.project-dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(8px)}
.navigation-dialog{width:100vw;height:100svh;max-width:none;margin:0}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:2rem;font-size:.8rem}
.dialog-top button{display:flex;align-items:center;gap:.75rem;border:0;background:none}
.navigation-dialog nav{display:flex;flex-direction:column;margin:5rem 0 3rem;gap:1rem}
.navigation-dialog nav a{font-size:clamp(2.5rem,7vw,7rem);letter-spacing:-.065em;line-height:1.1}
.navigation-dialog nav a:hover{color:var(--accent-text)}
.navigation-dialog sup{font-size:.75rem;vertical-align:top;letter-spacing:0}
.navigation-dialog>p{font-size:.75rem;color:var(--muted)}
.project-dialog{margin:auto;max-width:48rem;width:calc(100% - 2rem);border-radius:1.5rem}
.project-dialog>.small-label{margin-top:4rem;color:var(--muted)}
.project-dialog h2{font-size:clamp(3rem,6vw,5rem);line-height:1;letter-spacing:-.07em;margin:1rem 0 2rem;font-weight:500}
#project-description{font-size:1rem;line-height:1.7;max-width:35rem}
.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:2rem;border-top:1px solid var(--border);margin:2rem 0;padding-top:1.5rem}
.project-facts span{font-size:.65rem;color:var(--muted)}
.project-facts p{font-size:.8rem;line-height:1.5}
.concept-note{font-size:.7rem;color:var(--muted);margin:2rem 0}
[data-inview].entered{animation:perspective-shift .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes perspective-shift{from{transform:translateY(2rem)}to{transform:translateY(0)}}
body.dialog-open{overflow:hidden}
@media(min-width:1500px){.hero{min-height:52rem}.section-frame{padding-left:7vw;padding-right:7vw}}
@media(max-width:900px){.site-header{padding:0 2rem}.header-note{display:none}.header-actions{gap:1rem}.hero{min-height:48rem}.hero-title{left:2rem}.hero h1{font-size:6rem}.hero-aside{right:2rem;bottom:6rem}.hero-bottom{left:2rem;right:2rem}.hero-caption{display:none}.section-frame{padding:5rem 2rem}.statement{grid-template-columns:1fr;gap:3rem;margin-top:3rem}.studio-copy{margin-left:auto;max-width:25rem}.project-grid{gap:1.5rem}.project-art{height:29rem}.project-offset{margin-top:6rem}.art-title{font-size:5rem}.flow-rings{width:18rem;height:18rem;left:25%}.signal-orb{width:15rem;height:15rem;left:10%}.signal-title{font-size:3.5rem}.approach-grid{gap:3rem}.site-footer{margin:0 2rem}.site-footer>span:nth-child(2){display:none}}
@media(max-width:600px){.site-header{height:5.5rem;padding:0 1.25rem;gap:1rem}.wordmark{font-size:.55rem;gap:.5rem}.brand-symbol{font-size:3rem}.header-actions{gap:1rem}.talk-link{display:none!important}.theme-switch{width:2.25rem;height:2.25rem}.menu-trigger{font-size:.7rem}.hero{margin:0 .5rem;border-radius:1rem;min-height:43rem;height:calc(100svh - 6rem);max-height:56rem}.hero-topline{top:1.5rem;left:1.5rem;right:1.5rem;font-size:.6rem}.hero-topline>span:last-child{max-width:8rem;text-align:right}.hero-title{bottom:7rem;left:1.5rem}.hero-title .small-label{font-size:.5rem}.hero h1{font-size:clamp(4.25rem,15vw,5.75rem);margin-top:1rem}.hero-aside{right:1.5rem;bottom:4rem;font-size:.65rem;line-height:1.4}.hero-aside p br{display:none}.hero-aside p{max-width:12rem}.hero-aside .orbit-dot{display:none}.hero-bottom{bottom:1.5rem;left:1.5rem;right:1.5rem;font-size:.55rem}.hero-bottom a{gap:.5rem}.motion-toggle{font-size:.55rem}.sculpture-fallback{width:22rem;height:22rem;left:60%;top:30%}.sculpture-fallback i{border-width:3rem}.section-frame{padding:4rem 1.5rem}.section-kicker{font-size:.55rem;gap:2rem}.section-kicker>span:last-child{text-align:right;max-width:9rem}.statement{margin-top:3rem}.statement h2,.approach-section h2{font-size:2.6rem}.studio-copy{max-width:19rem;font-size:.8rem}.work-head{align-items:start;gap:2rem;padding-top:2rem;margin-bottom:2rem}.work-head h2{font-size:2.75rem}.work-head>p{max-width:7rem;font-size:.55rem;margin:0}.work-count{font-size:.5rem;right:-1.4rem}.project-grid{grid-template-columns:1fr;gap:2rem}.project-offset{margin-top:0}.project-art{height:30rem}.flow-rings{width:21rem;height:21rem;left:25%}.art-title{font-size:6rem}.signal-orb{width:18rem;height:18rem;left:15%}.signal-title{font-size:4.5rem}.project-caption h3{font-size:1.1rem}.project-caption>span{font-size:.55rem}.approach-section{margin:0 .5rem;border-radius:1rem}.approach-section h2{margin-top:3rem}.approach-grid{grid-template-columns:1fr;gap:2rem;margin-top:3rem}.approach-intro{font-size:.8rem}.method-list summary{font-size:.9rem}.contact-title{font-size:3.65rem;margin:3rem 0 2.5rem}.contact-arrow{width:3rem;height:3rem;bottom:.25rem;right:-.25rem}.contact-bottom{flex-direction:column;align-items:start;gap:1rem}.contact-bottom p{font-size:.75rem}.contact-pill{font-size:.7rem;padding:1rem 1.5rem}.site-footer{margin:0 1.5rem;padding:1.5rem 0;gap:1rem;font-size:.55rem}.footer-brand{font-size:.8rem}.navigation-dialog,.project-dialog{padding:1.5rem}.navigation-dialog nav{margin-top:6rem;gap:1.5rem}.navigation-dialog nav a{font-size:3rem}.project-facts{gap:1rem}.project-dialog>.small-label{margin-top:3rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
html.reduced-motion{scroll-behavior:auto}
html.reduced-motion *,html.reduced-motion *::before,html.reduced-motion *::after{animation:none!important;transition:none!important}

/* Scroll-controlled dimensional stage */
.hero-scroll{position:relative;height:235svh}
.hero-scroll .hero{position:sticky;top:.5rem;height:calc(100svh - 1rem);min-height:34rem;max-height:none;perspective:1000px}
.hero-scroll .hero-title{bottom:7rem;will-change:transform,opacity}
.hero-scroll .hero::after{background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 65%);z-index:1}
.hero-scroll #sculpture{z-index:0;cursor:grab;touch-action:pan-y}
.hero-scroll #sculpture:active{cursor:grabbing}
.hero-scroll .hero-topline,.hero-scroll .hero-bottom{z-index:5}
.depth-copy{position:absolute;bottom:7rem;left:3rem;z-index:2;pointer-events:none}
.depth-copy h2{font-size:clamp(4.5rem,7.8vw,8.75rem);font-weight:500;letter-spacing:-.075em;line-height:.93;margin:1.5rem 0 0}
.depth-copy h2 span{color:var(--x-copper)}
.depth-copy{visibility:hidden}
.scene-active .depth-copy{visibility:visible}
.depth-meter{position:absolute;top:5rem;left:2rem;display:flex;align-items:center;gap:.75rem;font-size:.5rem;letter-spacing:.08em;z-index:3;color:var(--x-night-muted)}
.depth-meter>div{height:1px;width:5rem;background:var(--x-glass)}
.depth-meter i{display:block;height:100%;width:100%;background:var(--x-copper);transform:scaleX(0);transform-origin:left}
.scene-grid{z-index:1;position:absolute;left:-20%;bottom:-50%;width:140%;height:100%;opacity:.25;background-image:linear-gradient(var(--x-metal) 1px,transparent 1px),linear-gradient(90deg,var(--x-metal) 1px,transparent 1px);background-size:5rem 5rem;transform:perspective(600px) rotateX(65deg);transform-origin:center;pointer-events:none;mask-image:linear-gradient(transparent,rgba(0,0,0,.8));will-change:transform}
.project{perspective:1100px}
.project-art{transform-style:preserve-3d;will-change:transform;transition:transform .16s linear,border-radius .5s}
.flow-rings,.signal-orb{will-change:transform;transition:transform .16s linear}
.art-title,.signal-title{will-change:transform}
.studio-section .statement h2,.studio-copy,.approach-section h2{will-change:transform}
.motion-paused .hero-scroll{height:105svh}
.motion-paused .depth-copy{visibility:hidden}
@media(max-width:900px){.depth-copy{left:2rem}.depth-copy h2{font-size:6rem}}
@media(max-width:600px){
.hero-scroll{height:210svh}
.hero-scroll .hero{height:calc(100svh - 1rem);min-height:35rem}
.hero-scroll .hero-title,.depth-copy{left:1.5rem;bottom:9rem}
.depth-copy h2{font-size:clamp(4.25rem,15vw,5.75rem)}
.depth-copy .small-label{font-size:.5rem}
.hero-scroll .hero-aside{bottom:4.5rem}
.depth-meter{left:1.5rem;top:4.5rem;font-size:.45rem;gap:.5rem}
.scene-grid{background-size:3rem 3rem}
}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:105svh}.depth-copy{display:none}.scene-grid{transform:perspective(600px) rotateX(65deg)!important}}
html.reduced-motion .hero-scroll{height:105svh}
html.reduced-motion .depth-copy{display:none}

/* Cinematic sequence */
.hero-scroll{height:345svh}
.hero-scroll .hero{overflow:hidden}
#scene-effects{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.scene-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 63% 45%,transparent 20%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.45));}
.scene-scanline{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--x-copper);opacity:.15;z-index:2;pointer-events:none}
.hero-scroll .hero-title,.hero-scroll .depth-copy,.hero-scroll .beyond-copy{z-index:3;transform-origin:left center}
.beyond-copy{position:absolute;left:3rem;bottom:7rem;pointer-events:none;visibility:hidden}
.scene-active .beyond-copy{visibility:visible}
.beyond-copy h2{font-size:clamp(4.5rem,7.8vw,8.75rem);font-weight:500;letter-spacing:-.075em;line-height:.93;margin:1.5rem 0 0}
.beyond-copy h2 span{color:var(--x-copper)}
.scene-chapters{position:absolute;z-index:6;right:2rem;top:5rem;display:flex;gap:1.25rem}
.scene-chapters button{display:flex;align-items:center;gap:.5rem;background:none;border:0;color:var(--x-night-muted);font-size:.65rem;padding:.5rem 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.scene-chapters button span{font-size:.5rem;opacity:.7}
.scene-chapters button[aria-current="step"]{color:var(--x-night-ink);border-color:var(--x-copper)}
.scene-chapters button:hover{color:var(--x-copper)}
.hero-topline,.depth-meter,.hero-bottom{mix-blend-mode:normal}
.page-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none}
.page-progress i{height:100%;width:100%;display:block;background:var(--accent-text);transform:scaleX(0);transform-origin:left}
.cursor-orbit{position:fixed;left:0;top:0;width:3.5rem;height:3.5rem;border:1px solid var(--x-copper);border-radius:50%;z-index:80;pointer-events:none;display:grid;place-items:center;color:var(--x-copper);font-size:.45rem;letter-spacing:.1em;opacity:0;transition:width .25s,height .25s,background .25s;will-change:transform}
.cursor-orbit.is-active{opacity:.8}
.cursor-orbit.is-link{background:color-mix(in srgb,var(--x-copper) 12%,transparent)}
.cursor-orbit.is-dragging{width:4.5rem;height:4.5rem}
.cursor-orbit span{text-align:center}
.kinetic-word{display:inline-block;will-change:transform,opacity;transform-origin:bottom center}
.navigation-dialog[open]{animation:menu-arrive .5s cubic-bezier(.2,.8,.2,1)}
.navigation-dialog[open] nav a{animation:menu-word .75s cubic-bezier(.16,1,.3,1) both;transform-origin:bottom left}
.navigation-dialog[open] nav a:nth-child(2){animation-delay:.05s}
.navigation-dialog[open] nav a:nth-child(3){animation-delay:.1s}
.navigation-dialog[open] nav a:nth-child(4){animation-delay:.15s}
.navigation-dialog[open] nav a:nth-child(5){animation-delay:.2s}
.navigation-dialog nav{margin-top:3rem;gap:.6rem}
.navigation-dialog nav a{font-size:clamp(2.5rem,6.5vw,6.5rem)}
.project-dialog[open]{animation:project-arrive .6s cubic-bezier(.16,1,.3,1)}
.project-dialog[open] h2{animation:menu-word .8s cubic-bezier(.16,1,.3,1)}
.project-dialog[open] .project-facts{animation:project-arrive .9s cubic-bezier(.16,1,.3,1)}
@keyframes menu-arrive{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes menu-word{from{transform:perspective(800px) translateY(3rem) rotateX(30deg);opacity:.2}to{transform:none;opacity:1}}
@keyframes project-arrive{from{transform:translateY(4rem) scale(.96);opacity:.2}to{transform:none;opacity:1}}
/* Living Lab */
.playground-section{position:relative;isolation:isolate;margin:1rem;background:var(--x-night);color:var(--x-night-ink);border-radius:1.5rem;padding:4rem;overflow:hidden}
.playground-section .section-kicker{color:var(--x-night-muted)}
.playground-heading{display:flex;justify-content:space-between;align-items:end;margin-top:4rem;gap:3rem;position:relative;z-index:2;pointer-events:none}
.playground-heading h2{font-weight:500;font-size:clamp(3.5rem,6vw,7rem);line-height:.95;letter-spacing:-.07em;margin:0}
.playground-heading h2>span:not(.kinetic-word){color:var(--x-copper)}
.playground-heading p{font-size:.75rem;line-height:1.8;color:var(--x-night-muted);margin:0}
.field-stage{position:relative;height:35rem;margin-top:-3rem}
#connection-field{display:block;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
.field-crosshair{position:absolute;left:50%;top:50%;width:1rem;height:1rem;border-left:1px solid var(--x-metal);border-top:1px solid var(--x-metal);opacity:.3;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
.field-note,.field-instruction{position:absolute;bottom:1rem;font-size:.5rem;letter-spacing:.12em;color:var(--x-night-muted);pointer-events:none}
.field-note{left:0}.field-instruction{right:0}
.field-toolbar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:2rem;border-top:1px solid var(--x-glass);padding-top:1.5rem}
.field-modes{display:flex;gap:.5rem}
.field-modes button{border:1px solid var(--x-glass);border-radius:999px;background:none;color:var(--x-night-muted);font-size:.65rem;padding:.7rem 1.5rem;transition:color .3s,background .3s,border-color .3s}
.field-modes button[aria-pressed="true"]{background:var(--x-night-ink);color:var(--x-night);border-color:var(--x-night-ink)}
.field-modes button:hover{border-color:var(--x-copper)}
#field-mode-label{font-size:.6rem;color:var(--x-night-muted)}
.contact-title{perspective:900px}
.project-art::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(circle at var(--x-shine-x,50%) var(--x-shine-y,50%),rgba(255,255,255,.18),transparent 45%);opacity:0;transition:opacity .4s}
.project:hover .project-art::after{opacity:1}
@media(max-width:900px){.beyond-copy{left:2rem}.beyond-copy h2{font-size:6rem}.playground-section{padding:3rem 2rem}.field-stage{height:30rem}}
@media(max-width:600px){
.hero-scroll{height:290svh}
.scene-chapters{right:1.5rem;left:1.5rem;top:6.5rem;justify-content:space-between;gap:1rem}
.scene-chapters button{font-size:.6rem}
.beyond-copy{left:1.5rem;bottom:9rem}
.beyond-copy h2{font-size:clamp(4.25rem,15vw,5.75rem)}
.beyond-copy .small-label{font-size:.5rem}
.playground-section{margin:.5rem;padding:2.5rem 1.5rem;border-radius:1rem}
.playground-heading{margin-top:3rem;display:block}
.playground-heading h2{font-size:3.5rem}
.playground-heading p{font-size:.65rem;margin-top:1.5rem}
.field-stage{height:26rem;margin-top:-1rem}
.field-note{max-width:7rem;font-size:.4rem;line-height:1.6}
.field-instruction{max-width:7rem;font-size:.4rem;text-align:right;line-height:1.6}
.field-toolbar{flex-direction:column;align-items:stretch;gap:1rem}
.field-modes{display:grid;grid-template-columns:repeat(3,1fr)}
.field-modes button{padding:.7rem .5rem}
#field-mode-label{text-align:center}
.cursor-orbit{display:none}
.navigation-dialog nav{margin-top:5rem;gap:1.25rem}
.navigation-dialog nav a{font-size:2.75rem}
}
@media(pointer:coarse){.cursor-orbit{display:none}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:105svh}.beyond-copy,.cursor-orbit,.scene-chapters{display:none}.kinetic-word{transform:none!important;opacity:1!important}}
.motion-paused .hero-scroll,html.reduced-motion .hero-scroll{height:105svh}
.motion-paused .depth-copy,.motion-paused .beyond-copy,html.reduced-motion .beyond-copy{visibility:hidden}