:root{
  --paper:#F5F5F3;--ink:#121212;--graphite:#6E7478;--line:#DAD9D4;--steel:#2B6E72;--steel-light:#6FC3C6;--skin:#E9CDBB;
  --night:#111213;--night-2:#1A1C1E;--night-line:#2C3033;--snow:#ECECE8;--snow-2:#B9BDBF;
  --bg:var(--paper);--fg:var(--ink);--fg-2:var(--graphite);--rule:var(--line);--accent:var(--steel);--btn-bg:var(--ink);--btn-fg:var(--paper);--statement:var(--night);
  --font:"Golos Text",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--bg:var(--night);--fg:var(--snow);--fg-2:#9AA0A3;--rule:var(--night-line);--accent:var(--steel-light);--btn-bg:var(--snow);--btn-fg:var(--night);--statement:var(--night-2)}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--snow);color:var(--night);padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin:0 0 12px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.btn--light{background:var(--snow);color:var(--night)}
.btn--light:hover{box-shadow:0 12px 34px rgba(236,236,232,.16)}
.btn--dark{background:var(--btn-bg);color:var(--btn-fg)}
.btn--dark:hover{box-shadow:0 12px 34px rgba(18,18,18,.16)}

.stage{position:relative;height:280vh;height:280svh;background:var(--night);color:var(--snow)}
.stage__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:0 20px;padding-bottom:max(20px,env(safe-area-inset-bottom));isolation:isolate}
.stage__glow{position:absolute;inset:-10%;z-index:0;pointer-events:none;background:radial-gradient(42% 36% at 50% 44%,rgba(111,195,198,.20),rgba(111,195,198,0) 70%),radial-gradient(30% 26% at 64% 30%,rgba(233,205,187,.07),rgba(233,205,187,0) 70%);animation:breathe 8s ease-in-out infinite alternate;will-change:transform}
@keyframes breathe{from{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-1.5%)}}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
.topbar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;height:56px}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(236,236,232,.16),rgba(236,236,232,0))}
.wordmark{font-weight:700;letter-spacing:.14em;font-size:13px;color:var(--snow);text-decoration:none}
.topnav{display:flex;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.topnav a{position:relative;color:var(--snow);opacity:.72;text-decoration:none;transition:opacity .3s}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.topnav a:hover,.topnav a:focus-visible{opacity:1}
.topnav a:hover::after,.topnav a:focus-visible::after{transform:scaleX(1)}
.topnav .only-desktop{display:none}

.stage__face{position:relative;z-index:2;justify-self:center;align-self:center;width:min(72vw,320px);perspective:900px;will-change:transform;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage__face svg{outline:none}
.stage__face svg:focus{outline:none}
.pt:focus:not(:focus-visible){outline:none}
.stage__face image{pointer-events:none}
.pt .hit{fill:transparent;stroke:none}
.face__tilt{transform-style:preserve-3d;will-change:transform}
.stage__face svg{display:block;width:100%;height:auto;overflow:visible}
.stage__face--photo{width:min(80vw,360px)}
.portrait{opacity:0;transform:scale(1.04);transform-origin:50% 40%;transition:opacity 1.4s ease .1s,transform 2.6s cubic-bezier(.2,.7,.2,1) .1s}
.is-drawn .portrait{opacity:1;transform:none}
.stage__face--photo .pt .dot{stroke-width:2.5}
.stage__face--photo .guide{stroke-width:1.6;stroke-dasharray:3 10;opacity:.22}
.guide{fill:none;stroke:var(--snow);stroke-width:1;stroke-dasharray:2 7;opacity:.16}
.face-line{fill:none;stroke:var(--snow);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:var(--line-alpha,.92)}
.face-line--soft{stroke-width:1.05;opacity:calc(var(--line-alpha,.92)*.5)}
.face-iris{fill:var(--snow);opacity:0;transition:opacity .8s ease 2s}
.is-drawn .face-iris{opacity:.32}
.pt{cursor:pointer;outline:none;opacity:0;transition:opacity .6s ease var(--d,0s)}
.is-drawn .pt{opacity:1}
.is-ready .pt{transition:none}
.pt .ring{fill:var(--steel-light);opacity:.35;transform-box:fill-box;transform-origin:center;animation:pulse 2.8s ease-out infinite;animation-delay:var(--d,0s)}
.pt .dot{fill:var(--steel-light);stroke:var(--night);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:transform .6s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
.is-drawn .pt .dot{transform:scale(1)}
.is-ready .pt .dot{transition:transform .25s ease,fill .25s ease}
.pt:hover .dot,.pt.is-active .dot,.pt:focus-visible .dot{fill:var(--snow);transform:scale(1.35)}
@keyframes pulse{from{transform:scale(1);opacity:.45}to{transform:scale(3.2);opacity:0}}
.chip{position:absolute;z-index:4;opacity:0;pointer-events:none;transform:translate(16px,-50%) scale(.96);background:var(--night-2);border:1px solid var(--night-line);border-radius:12px;padding:10px 14px;max-width:220px;font-size:13px;line-height:1.35;box-shadow:0 20px 50px rgba(0,0,0,.45);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.chip.is-open{opacity:1;transform:translate(16px,-50%) scale(1)}
.chip--left{transform:translate(calc(-100% - 16px),-50%) scale(.96)}
.chip--left.is-open{transform:translate(calc(-100% - 16px),-50%) scale(1)}
.chip__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--steel-light);margin-bottom:4px}
.chip__zone{display:block;font-weight:600;font-size:14px;margin-bottom:2px}
.chip__procs{color:var(--snow-2)}

.stage__intro{position:relative;z-index:2;max-width:38rem;padding:12px 0 8px}
.stage__intro > *{opacity:0;transform:translateY(16px);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.is-drawn .stage__intro > *{opacity:1;transform:none}
.stage__intro h1{font-size:clamp(2.4rem,9vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:.98;margin-bottom:12px}
.role{margin:0 0 6px;color:var(--snow-2);font-size:15px;line-height:1.4;max-width:30rem}
.motto{margin:0 0 18px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--steel-light)}
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.actions .link{color:var(--snow);opacity:.8;text-decoration:none;font-size:15px;border-bottom:1px solid rgba(236,236,232,.35);padding-bottom:2px;transition:opacity .3s}
.actions .link:hover{opacity:1}
.scrollhint{display:none}

.stage__list{position:absolute;left:20px;right:20px;top:64px;z-index:1;opacity:0}
.stage__list .eyebrow{color:var(--snow-2);margin:0}
.zones{list-style:none;margin:80px 0 0;padding:0}
.zone{display:grid;grid-template-columns:16px 22px 1fr;column-gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--night-line);opacity:0;font-size:14px;line-height:1.35}
.zone__mark{width:10px;height:10px;border-radius:50%;background:var(--steel-light);opacity:0}
.zone--body .zone__mark{opacity:1}
.zone__n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--snow-2)}
.zone__text{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
.zone__name{font-weight:600}
.zone__procs{color:var(--snow-2);font-size:13px}
.flyers{position:absolute;inset:0;z-index:2;pointer-events:none}
.flyer{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--steel-light);box-shadow:0 0 10px rgba(111,195,198,.45);opacity:0;will-change:transform}

.section{padding:80px 20px;max-width:1120px;margin:0 auto}
.section + .section{border-top:1px solid var(--rule)}
.section h2{font-size:clamp(1.9rem,5vw,3rem);font-weight:700;line-height:1.08;margin-bottom:26px}
.section p{max-width:60ch}
.directions{display:grid}
.direction{display:grid;gap:6px;padding:26px 0;border-top:1px solid var(--rule);transition:background .4s ease}
.direction:last-child{border-bottom:1px solid var(--rule)}
.direction:hover{background:linear-gradient(90deg,rgba(233,205,187,.22),rgba(233,205,187,0) 70%)}
.direction h3{font-size:1.35rem;font-weight:600}
.direction p{margin:0;color:var(--fg-2)}
.direction .zones-line{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.section__more{margin:26px 0 0}
.more{display:inline-flex;align-items:center;gap:10px;color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;transition:border-color .3s}
.more::after{content:"\2192";font-weight:400;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.more:hover{border-color:var(--fg)}
.more:hover::after{transform:translateX(4px)}
.about__grid{display:grid;gap:30px}
.about__photo{position:relative;margin:0;max-width:420px}
.about__photo::before{content:"";position:absolute;inset:16px -16px -16px 16px;background:var(--skin);opacity:.55;border-radius:12px}
.about__photo img{position:relative;display:block;width:100%;height:auto;border-radius:12px;filter:grayscale(1) contrast(1.04)}
.about__text .eyebrow{margin-top:8px}
.about__text p{margin:0 0 1em}
.contacts ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;font-family:var(--mono);font-size:14px}
.contacts ul a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule)}
.disclaimer{margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--fg-2)}
.disclaimer strong{color:var(--fg);font-weight:600}
.copy{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--fg-2)}

.depth{position:relative;height:240vh;height:240svh;background:var(--bg)}
.depth__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:20px 20px 24px;max-width:1120px;margin:0 auto;overflow:hidden}
.depth__art{order:-1;display:flex;justify-content:center;align-items:flex-end}
.depth__art svg{width:min(100%,360px);height:auto;max-height:30vh;overflow:visible}
.depth__lead{color:var(--fg-2);margin:0 0 12px;max-width:44ch;font-size:15px}
.layers{list-style:none;margin:0;padding:0}
.layers li{display:grid;grid-template-columns:1fr auto;column-gap:14px;padding:8px 0;border-top:1px solid var(--rule);opacity:.38;transition:opacity .35s ease,color .25s ease;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.layers li:hover,.layers li:focus-visible{opacity:.85}
.layers li:hover .layer__name,.layers li:focus-visible .layer__name{color:var(--accent)}
.depth__art svg g,.depth__art svg text{pointer-events:none}
.band{cursor:pointer}
.layers li.is-on{opacity:1}
.layer__name{font-weight:600;font-size:15px}
.layer__mm{font-family:var(--mono);font-size:12px;color:var(--fg-2);text-align:right;align-self:baseline}
.layer__proc{grid-column:1 / -1;font-size:13.5px;color:var(--fg-2)}
.band{opacity:.5;transition:opacity .45s ease}
.band.is-on{opacity:1}
#needle{will-change:transform}
.depth-caption{font-family:var(--mono);font-size:10px;letter-spacing:.08em;fill:var(--fg-2)}

.statement{background:var(--statement);color:var(--snow);padding:18vh 20px}
.statement__text{max-width:1120px;margin:0 auto;font-size:clamp(1.9rem,6.5vw,4.6rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.statement__word{display:block;font-family:var(--mono);font-weight:500;font-size:.42em;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-light);margin-bottom:.7em}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}

.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 60%,transparent);transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ctabar.is-visible{transform:none}
.ctabar .btn{width:100%;max-width:420px}

@media (max-height:700px){
  .stage__face{width:min(58vw,250px)}
  .stage__face--photo{width:min(62vw,280px)}
  .stage__list{top:56px}
  .zones{margin-top:70px}
  .zone{padding:4px 0;font-size:13px}
  .zone__procs{font-size:12px}
  .depth__art svg{max-height:24vh}
  .depth__lead{display:none}
  .depth__pin{padding-top:12px}
  .layers li{padding:6px 0}
}

@media (min-width:900px){
  .stage__pin{padding:0 48px}
  .topbar{height:72px}
  .topnav{gap:26px;font-size:12px}
  .topnav .only-desktop{display:inline}
  .stage__face{width:min(44vh,380px)}
  .stage__pin{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:32px}
  .topbar{grid-column:1 / -1}
  .stage__face--photo{grid-column:2;grid-row:2;align-self:center;justify-self:end;width:min(64vh,560px);margin-right:2vw}
  .stage__intro{grid-column:1;grid-row:2;align-self:end}
  .stage__glow{background:radial-gradient(34% 40% at 72% 42%,rgba(111,195,198,.22),rgba(111,195,198,0) 70%),radial-gradient(26% 26% at 80% 28%,rgba(233,205,187,.07),rgba(233,205,187,0) 70%)}
  .stage__intro{padding-bottom:44px;max-width:46rem}
  .stage__intro h1{font-size:clamp(3.2rem,6.4vw,5.8rem)}
  .role,.actions .link{font-size:16px}
  .scrollhint{display:flex;position:absolute;right:48px;bottom:48px;z-index:2;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--snow-2);opacity:0;transition:opacity .8s ease 2.8s}
  .is-drawn .scrollhint{opacity:.9}
  .scrollhint i{display:block;width:1px;height:40px;background:linear-gradient(to bottom,var(--snow-2),transparent);transform-origin:top;animation:hint 2.2s ease-in-out infinite}
  @keyframes hint{0%{transform:scaleY(0);opacity:0}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(14px);opacity:0}}
  .stage__list{left:50%;right:8vw;top:18vh}
  .zones{margin-top:28px}
  .zone{padding:11px 0;font-size:16px;grid-template-columns:18px 30px 1fr}
  .zone__procs{font-size:14px}
  .section{padding:110px 48px}
  .section h2{margin-bottom:40px}
  .direction{grid-template-columns:280px 1fr;column-gap:48px;row-gap:8px;padding:34px 0}
  .direction h3{grid-row:1 / span 2;font-size:1.5rem}
  .direction p{grid-column:2}
  .depth__pin{grid-template-columns:1fr 1fr;grid-template-rows:none;align-items:center;gap:64px;padding:0 48px}
  .depth__art{order:0;align-items:center}
  .depth__art svg{width:min(100%,440px);max-height:78vh}
  .layers li{padding:12px 0}
  .layer__name{font-size:17px}
  .layer__proc{font-size:14.5px}
  .about__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .about__photo{max-width:none}
  .about__text .eyebrow{margin-top:24px}
  .statement{padding:22vh 48px}
  .ctabar{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage__glow{animation:none}
  .pt .ring{animation:none;opacity:.25}
  .pt,.stage__intro > *,.face-iris,.pt .dot,.portrait{transition:none;opacity:1;transform:none}
  .face-iris{opacity:.32}
  .stage{height:auto}
  .stage__pin{position:static;height:auto;overflow:visible;display:block;padding-bottom:40px}
  .stage__face{width:min(62vw,300px);margin:20px auto}
  .stage__list{position:static;opacity:1;margin-top:40px}
  .zones{margin-top:16px}
  .zone{opacity:1}
  .zone__mark{opacity:1}
  .flyers,.scrollhint{display:none}
  .depth{height:auto}
  .depth__pin{position:static;height:auto;overflow:visible}
  .layers li,.band{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
  .ctabar{transition:none}
}