/* =====================================================================
   Home page: pinned stage scroll story, statement, services, process
   ===================================================================== */

/* ---------- the pinned story ---------- */
.story{position:relative;background:var(--ink-0)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:0;background:radial-gradient(120% 90% at 50% 20%,#0f1a13 0%,#070b08 70%)}
.stage canvas.tray{position:absolute;inset:0;width:100%;height:100%;opacity:calc(1 - var(--bp,0));transform:scale(calc(1 + var(--hp,0)*.12));transform-origin:50% 62%;will-change:transform,opacity}
.stage .bp{position:absolute;inset:0;opacity:var(--bp,0);will-change:opacity}
.stage svg.bldg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,10,7,calc(.72 - var(--bp,0)*.72)) 0%,rgba(6,10,7,calc(.35 - var(--bp,0)*.35)) 45%,rgba(6,10,7,0) 75%),
  linear-gradient(180deg,rgba(6,10,7,.55) 0%,rgba(6,10,7,0) 22%,rgba(6,10,7,0) 60%,rgba(6,10,7,.85) 100%),
  radial-gradient(140% 100% at 0% 100%,rgba(6,10,7,calc(.75 - var(--bp,0)*.35)) 0%,rgba(6,10,7,0) 60%)}
.stage-grid{position:absolute;inset:0;pointer-events:none;opacity:calc(var(--bp,0)*.5);background-image:linear-gradient(rgba(143,181,151,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(143,181,151,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(90% 80% at 60% 45%,#000 30%,transparent 85%);-webkit-mask-image:radial-gradient(90% 80% at 60% 45%,#000 30%,transparent 85%)}

/* drawing title block, bottom-right of the stage */
.titleblock{position:absolute;right:var(--gutter);bottom:calc(22px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto auto;gap:0;border:1px solid rgba(170,194,136,.35);font:500 10.5px/1.2 var(--f-mono);letter-spacing:.08em;color:#b9cfb3;background:rgba(6,10,7,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:var(--bp,0);text-transform:uppercase}
.titleblock span{padding:6px 10px;border-right:1px solid rgba(170,194,136,.25);border-bottom:1px solid rgba(170,194,136,.25)}
.titleblock span:nth-child(2n){border-right:0}
.titleblock span:nth-last-child(-n+2){border-bottom:0}
.titleblock .k{color:#76907a}
.titleblock .v{color:#e6f0e2;min-width:13ch}
.titleblock .v b{color:var(--sage);font-weight:500}

/* layer legend, top-right of the stage */
.legend{position:absolute;right:var(--gutter);top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 18px);display:block;font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#7f9483;opacity:var(--bp,0)}
.legend li{display:flex;align-items:center;gap:9px;list-style:none;transition:color .4s}
.legend ul{margin:0;padding:8px 14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 18px;border:1px solid rgba(170,194,136,.18);border-radius:999px;background:rgba(6,10,7,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.legend i{width:18px;height:3px;border-radius:2px;background:var(--c);opacity:.35;transition:opacity .4s,box-shadow .4s}
.legend li.on{color:#eef3ec}
.legend li.on i{opacity:1;box-shadow:0 0 10px var(--c)}

/* building drawing */
.bldg .base path{fill:none;stroke:#8fb597;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0));opacity:.62}
.bldg .base path.slab{stroke-width:2.4;opacity:.85}
.bldg .base path.thin{stroke-width:.8;opacity:calc(var(--draw,0)*.34);stroke-dasharray:none}
.bldg .base path.hatch{stroke-width:.7;opacity:calc(var(--draw,0)*.2);stroke-dasharray:none}
.bldg .base text{font:500 13px var(--f-mono);letter-spacing:.12em;fill:#6f8a74;opacity:var(--draw,0)}
.bldg .ly{opacity:calc(var(--draw,0)*.16);transition:opacity .9s var(--ease)}
.bldg .ly.on{opacity:1}
.bldg .ly path,.bldg .ly circle,.bldg .ly rect{vector-effect:non-scaling-stroke}
.bldg .ly .ln{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bldg .ly .glow{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .9s}
.bldg .ly.on .glow{opacity:.16}
.bldg .ly .dev{fill:#0a110c;stroke:var(--c);stroke-width:1.6}
.bldg .ly .solid{fill:var(--c);stroke:none}
.bldg .ly .soft{fill:var(--c);opacity:.08;stroke:none}
.bldg .ly.on .run{stroke-dasharray:5 11;animation:flow 1.1s linear infinite}
.bldg .ly.on .run.rev{animation-direction:reverse}
.bldg .ly .run.dots{stroke-dasharray:2 6;stroke-width:1.4}
.bldg .ly.on .run.dots{stroke-dasharray:2 6}
.bldg .ly .cone{fill:var(--c);opacity:0;transition:opacity .9s}
.bldg .ly.on .cone{opacity:.09}
.bldg .ly.on .sweep{animation:sweep 5s var(--ease-in-out) infinite alternate;transform-box:fill-box}
.bldg .ly .beam{fill:url(#beam);opacity:0;transition:opacity 1s}
.bldg .ly.on .beam{opacity:1}
.bldg .ly.on .blink{animation:blink 1.6s steps(2,jump-none) infinite}
.bldg .ly.on .wave{animation:wave 2.4s var(--ease) infinite;transform-box:fill-box;transform-origin:50% 100%}
.bldg .ly.on .spin{animation:spin 2.2s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes flow{to{stroke-dashoffset:-32}}
@keyframes sweep{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes blink{0%{opacity:1}50%{opacity:.25}}
@keyframes wave{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.25)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- chapters that scroll over the stage ---------- */
.chapters{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh}
.ch-hero{height:185vh;height:185svh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(64px,10vh,120px)}
.hero-copy{transform:translate3d(0,calc(var(--hp,0)*-90px),0) scale(calc(1 - var(--hp,0)*.07));transform-origin:0 100%;opacity:calc(1 - var(--hp,0)*1.6);will-change:transform,opacity}
.hero-copy>*{animation:rise 1.1s var(--ease) both}
.hero-copy>:nth-child(1){animation-delay:.15s}
.hero-copy>:nth-child(2){animation-delay:.25s}
.hero-copy>:nth-child(3){animation-delay:.45s}
.hero-copy>:nth-child(4){animation-delay:.6s}
.stage canvas.tray{animation:fadein 1.6s ease backwards}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}}
.hero-copy h1{font-family:var(--f-display);font-stretch:122%;font-weight:800;font-size:clamp(46px,9.4vw,148px);line-height:.9;letter-spacing:-.045em;margin:22px 0 0;max-width:9.5em}
.hero-copy h1 em{font-style:normal;color:transparent;background:linear-gradient(92deg,#c6dca5 0%,#9ccf7a 30%,#35d6c8 62%,#3d8bff 100%);-webkit-background-clip:text;background-clip:text}
.hero-copy .lede{margin-top:clamp(20px,2.6vh,30px);max-width:34em;color:#c8d3c9}
.hero-copy .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vh,38px)}
.scroll-cue{position:absolute;right:var(--gutter);bottom:clamp(64px,10vh,120px);display:flex;flex-direction:column;align-items:center;gap:12px;font:500 11px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);opacity:calc(1 - var(--hp,0)*3)}
.scroll-cue i{width:2px;height:64px;border-radius:2px;background:linear-gradient(var(--sage),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;right:0;top:-20px;height:20px;background:linear-gradient(transparent,#fff);animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:64px}}
@media (max-width:760px){.scroll-cue{display:none}}

.glass{background:rgba(9,14,11,.62);-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);border:1px solid rgba(206,230,196,.12);border-radius:var(--r-lg);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.ch-bridge{min-height:150vh;min-height:150svh;display:flex;align-items:center}
.bridge-card{padding:clamp(26px,3.4vw,44px);max-width:620px}
.bridge-card h2{font-family:var(--f-display);font-stretch:116%;font-weight:740;font-size:clamp(28px,3.8vw,48px);line-height:1.04;letter-spacing:-.025em;margin-top:16px}
.bridge-card p{margin-top:16px;color:var(--fg-2)}

.step{min-height:125vh;min-height:125svh;display:flex;align-items:center}
.step-card{position:relative;padding:clamp(24px,3vw,40px);max-width:500px;opacity:calc(.25 + var(--lp,1)*.75);transform:translate3d(0,calc((1 - var(--lp,1))*30px),0);transition:border-color .5s}
.step.on .step-card{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.step-card .sheet{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.step-card .sheet b{color:var(--c);font-weight:500}
.step-card h3{font-family:var(--f-display);font-stretch:116%;font-weight:760;font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.025em;margin-top:18px}
.step-card h3 i{display:block;width:44px;height:4px;border-radius:3px;background:var(--c);box-shadow:0 0 16px var(--c);margin-bottom:18px}
.step-card p{margin-top:14px;color:var(--fg-2)}
.step-card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.step-card li{display:flex;gap:10px;align-items:flex-start;color:#d6e0d6;font-size:15.5px}
.step-card li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:2px;background:var(--c)}
.step-card .tags{margin-top:20px}
.step-card .tag{--wc:var(--c)}
.ch-end{height:100vh;height:100svh}

@media (max-width:899px){
  .step{align-items:flex-end;padding-bottom:6vh}
  .step-card,.bridge-card{max-width:none}
  .step-card ul{display:none}
  .step-card{opacity:1;transform:none;background:rgba(9,14,11,.84)}
  .bridge-card{background:rgba(9,14,11,.84)}
  .ch-bridge{align-items:flex-end;padding-bottom:8vh}
  .legend{display:none}
  .titleblock{top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 14px);bottom:auto;right:auto;left:var(--gutter);font-size:9.5px}
  .titleblock span{padding:5px 8px}
}

/* ---------- statement: slides up over the pinned stage ---------- */
.statement{position:relative;z-index:3;margin-top:-100vh;margin-top:-100svh;height:240vh;height:240svh;border-radius:34px 34px 0 0;background:linear-gradient(180deg,#0e1711 0%,color-mix(in srgb,#0e1711 calc(100% - var(--sp,0)*100%),#20382a) 100%);box-shadow:0 -40px 90px -20px rgba(0,0,0,.85)}
.statement-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.statement-pin::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 40% at calc(20% + var(--sp,0)*60%) 60%,rgba(170,194,136,.16),transparent 70%);pointer-events:none}
.statement p.big{position:relative;font-family:var(--f-display);font-stretch:112%;font-weight:700;font-size:clamp(30px,4.9vw,72px);line-height:1.08;letter-spacing:-.028em;max-width:19em}
.statement p.big span{opacity:.16;transition:opacity .35s,color .35s}
.statement p.big span.lit{opacity:1}
.statement p.big span.hl.lit{color:var(--sage)}
.statement .eyebrow{position:relative;margin-bottom:28px}

/* ---------- services bento ---------- */
.services{position:relative;z-index:3;background:var(--ink-1)}
.bento{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}
.svc{grid-column:span 4;position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,#141e17,#0e1511);padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;min-height:300px;text-decoration:none;color:inherit;transition:border-color .4s,transform .5s var(--ease)}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 22%,transparent),transparent 60%);opacity:0;transition:opacity .4s}
.svc:hover::before,.svc.is-live::before{opacity:1}
.svc:hover,.svc.is-live{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.svc.wide{grid-column:span 7}
.svc.mid{grid-column:span 5}
.svc.half{grid-column:span 6}
.svc .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.svc .ico svg{width:24px;height:24px}
.svc h3{font-family:var(--f-display);font-stretch:112%;font-weight:720;font-size:clamp(22px,2vw,27px);line-height:1.08;letter-spacing:-.015em;margin-top:6px}
.svc p{color:var(--fg-2);font-size:16px}
.svc .tags{margin-top:auto;padding-top:8px}
.svc .tag{--wc:var(--c)}
.svc .art{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(16px,2vw,26px);width:min(46%,340px);opacity:.75;pointer-events:none;z-index:-1;overflow:visible}
.svc.has-art p{max-width:54%}
.svc.mid.has-art p{max-width:100%}
.svc.mid .art{bottom:20px;right:22px;width:min(44%,230px);opacity:.7}
.art .box{fill:#0c140f;stroke:rgba(170,194,136,.45);stroke-width:1.2}
.art .port{fill:#050806;stroke:rgba(170,194,136,.35);stroke-width:1}
.art .tick{stroke:rgba(170,194,136,.35);stroke-width:2;stroke-linecap:round}
.art .ln{fill:none;stroke:var(--c);stroke-width:1.6;opacity:.8}
.art .ln.flow{stroke-dasharray:4 6;animation:flow 1.2s linear infinite}
.art .ln.dash{stroke-dasharray:2 5;opacity:.5}
.art .cord{fill:none;stroke-width:3;stroke-linecap:round;opacity:.85}
.art .led{fill:#2c3a30}
.art .led.g{fill:#7dff8e;animation:blink 1.4s steps(2,jump-none) infinite}
.art text{font:500 10px var(--f-mono);letter-spacing:.12em;fill:#6f8a74}
@media (max-width:680px){.svc.has-art p{max-width:100%}.svc .art{display:none}}
@media (max-width:1079px){.svc,.svc.wide,.svc.mid,.svc.half{grid-column:span 6}}
@media (max-width:680px){.bento{grid-template-columns:1fr}.svc,.svc.wide,.svc.mid,.svc.half{grid-column:1/-1;min-height:0}}

/* ---------- why us ---------- */
.why{background:var(--ink-1)}
.why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,90px);align-items:start}
.why-grid .section-head{position:sticky;top:calc(var(--head-h) + 40px);margin:0}
.pillars{display:grid;gap:14px}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 28px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.pillar .n{font:500 12px var(--f-mono);letter-spacing:.12em;color:var(--sage);padding-top:6px}
.pillar h3{font-family:var(--f-display);font-stretch:110%;font-weight:700;font-size:23px;letter-spacing:-.01em}
.pillar p{margin-top:8px;color:var(--fg-2)}
@media (max-width:899px){.why-grid{grid-template-columns:1fr}.why-grid .section-head{position:static}}

/* ---------- process: pinned horizontal track ---------- */
.process{position:relative;background:var(--ink-0);border-block:1px solid var(--line)}
.process-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--head-h)}
.process .section-head{margin-bottom:clamp(28px,4vh,48px)}
.track{display:flex;gap:18px;padding-inline:var(--gutter);width:max-content;transform:translate3d(calc(var(--tx,0) * -1px),0,0);will-change:transform}
.pstep{position:relative;flex:none;width:clamp(290px,30vw,400px);min-height:clamp(320px,46vh,420px);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,#121b15,#0c130f);padding:30px;display:flex;flex-direction:column;gap:12px;transition:border-color .5s,background .5s}
.pstep.on{border-color:rgba(170,194,136,.45);background:linear-gradient(180deg,#17251c,#0e1611)}
.pstep .num{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:76px;line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(170,194,136,.5)}
.pstep.on .num{color:var(--sage);-webkit-text-stroke:0}
.pstep h3{font-family:var(--f-display);font-stretch:112%;font-weight:720;font-size:25px;letter-spacing:-.015em;margin-top:auto}
.pstep p{color:var(--fg-2);font-size:15.5px}
.pstep .mono{color:var(--fg-3);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.pull{position:relative;height:2px;margin:clamp(26px,4vh,40px) var(--gutter) 0;background:rgba(170,194,136,.14);border-radius:2px}
.pull i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pp,0)*100%);background:linear-gradient(90deg,#2e4f3e,var(--sage));border-radius:2px}
.pull i::after{content:"";position:absolute;right:-10px;top:-3px;width:10px;height:8px;border-radius:1px 4px 4px 1px;background:linear-gradient(#e7a35a,#b8682f)}
.pull span{position:absolute;right:0;top:12px;font:500 11px var(--f-mono);letter-spacing:.12em;color:var(--fg-3)}
@media (max-width:899px){
  .process{height:auto!important}
  .process-pin{position:static;height:auto;padding-block:clamp(84px,11vw,150px)}
  .track{flex-direction:column;width:auto;transform:none;padding-left:calc(var(--gutter) + 26px);position:relative}
  .track::before{content:"";position:absolute;left:calc(var(--gutter) + 6px);top:0;bottom:0;width:2px;background:rgba(170,194,136,.18)}
  .pstep{width:auto;min-height:0}
  .pstep::before{content:"";position:absolute;left:-26px;top:36px;width:12px;height:12px;border-radius:50%;background:var(--ink-0);border:2px solid rgba(170,194,136,.5);transform:translateX(-1px)}
  .pstep.on::before{background:var(--sage);border-color:var(--sage);box-shadow:0 0 12px var(--sage)}
  .pstep .num{font-size:52px}
  .pull{display:none}
}

/* ---------- where we work ---------- */
.where{background:var(--ink-1);overflow:hidden}
.boroughs{display:grid;gap:0;border-top:1px solid var(--line)}
.boroughs li{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-stretch:120%;font-weight:760;font-size:clamp(34px,6.4vw,92px);line-height:1;letter-spacing:-.035em;color:#2c3a30;transition:color .5s var(--ease)}
.boroughs li.lit{color:var(--fg)}
.boroughs li .mono{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--fg-3);font-stretch:100%}
.boroughs ul{margin:0;padding:0}
.types{margin-top:clamp(36px,5vw,60px)}
.types .tag{font-size:13px;padding:8px 14px}

/* ---------- final call ---------- */
.final{background:var(--ink-1);padding-bottom:clamp(84px,10vw,130px)}