/* GSB v3 — page styles. Began as a one-off export of the v3 design canvas; edit this file directly.
   Theme, neon, motion and scroll flags live on <html> (set by theme.js before paint, then main.js). */
html{background:var(--bg)}
[data-theme="day"]{color-scheme:light}[data-theme="night"]{color-scheme:dark}
[hidden]{display:none !important}
:root{--hero-slab:var(--accent);--stair-mid:var(--accent);--stair-mid-fg:var(--on-accent)}
[data-theme="night"]{--hero-slab:var(--moss);--stair-mid:var(--moss);--stair-mid-fg:var(--snow)}
/* Portfolio: the official logo by day, the neon render at night (the hidden one never loads: lazy + display none) */
[data-theme="day"] .cell .logo-night,[data-theme="night"] .cell .logo-day{display:none !important}

body{margin:0}
a{color:var(--accent-text)}a:hover{color:var(--fg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.gsb-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.gsb-page *,.gsb-page *::before,.gsb-page *::after{box-sizing:border-box}
html{scroll-padding-top:112px}
.gsb-page :where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.alt{--title-block:var(--title-block-surface)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.plus{color:var(--accent-text)}
/* The live site's neon period: on titles with no highlight, and on "More to come." */
.dot{color:var(--accent-text)}
[data-neon="on"][data-theme="night"] .dot{color:var(--leaf);text-shadow:0 0 .3em rgba(130,187,144,.6)}
.code{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--fg-muted);border:1px solid var(--rule-strong);padding:2px 5px;min-width:40px;text-align:center;line-height:1.3;white-space:nowrap}
.pend{background-image:repeating-linear-gradient(135deg,var(--rule-strong) 0 1px,transparent 1px 5px) !important}

/* Skip link */
.skip{position:absolute;left:-9999px;top:16px;z-index:200;background:var(--bg);color:var(--fg);padding:10px 14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;outline:1px solid var(--accent)}
.skip:focus{left:16px}

/* Nav: sticky, hides on scroll down past 400px, returns on scroll up or focus */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--rule);transition:transform .45s var(--ease-out)}
.nav.is-hidden{transform:translateY(-100%)}
.nav-in{max-width:1280px;margin:0 auto;padding:clamp(16px,1.7vw,24px) max(clamp(16px,4vw,48px),env(safe-area-inset-right)) clamp(16px,1.7vw,24px) max(clamp(16px,4vw,48px),env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-brand{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:var(--fg)}
.nav .gsb-wordmark{font-size:clamp(28px,3.6vw,52px) !important}
.nav-was{font-size:clamp(10px,.9vw,13px);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);line-height:1}
.navlinks{display:flex;gap:clamp(18px,2vw,30px);font-size:clamp(14px,1.1vw,16px);font-weight:500}
.navlinks a{position:relative;color:var(--fg-muted);text-decoration:none;transition:color var(--dur-1) var(--ease-out)}
.navlinks a:hover,.navlinks a.is-active{color:var(--fg)}
.navlinks a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--accent)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg-muted);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.magnet{transition:background-color .15s,border-color .15s,color .15s,transform .35s var(--ease-out)}

/* Theme toggle: square, hairline; shows the mode you'd switch to */
.theme-tg{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--rule-strong);color:var(--fg);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1)}
.theme-tg:hover{background:var(--surface);border-color:var(--fg)}
.theme-tg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-tg svg{transition:transform .5s var(--ease-out),opacity .3s}
[data-theme="day"] .tg-sun,[data-theme="night"] .tg-moon{display:none}
.theme-tg:hover svg{transform:rotate(-20deg)}
.gsb-page{transition:background-color .35s var(--ease-out),color .35s var(--ease-out)}
/* After a manual flip the neon re-ignites at once instead of waiting out the page-load sequence */
[data-flip="on"] .hero-tb,[data-flip="on"] .sec-head .gsb-title-block{animation-delay:.12s !important}

/* Bottom tab bar: phones and small tablets (the top bar keeps the wordmark, toggle and Talk to us) */
.mbar{display:none}
@media (max-width:1000px){
.mbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-top:1px solid var(--rule);height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:44px;color:var(--fg-muted);text-decoration:none;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mbar a:hover,.mbar a:active,.mbar a.is-active{color:var(--accent-text)}
.gsb-page{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.navlinks{display:none !important}
}
@media (max-width:480px){.nav-cta{display:none !important}.nav .gsb-wordmark{font-size:24px !important}}
@media (max-width:1100px) and (min-width:1001px){.nav-was{display:none}.nav .gsb-wordmark{font-size:min(3.4vw,36px) !important}}

/* Cursor follower: small muted square, eased; desktop pointers only */
.cursor{position:fixed;left:0;top:0;width:6px;height:6px;background:var(--fg-muted);opacity:0;pointer-events:none;z-index:9999;transition:opacity .3s var(--ease-out)}
@media (hover:none),(max-width:720px),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* Hero: the shoot grows out of the colour fields, over a faint 80px grid that fades out from the top */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:80px 80px;background-position:-1px -1px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 0,#000 30%,transparent 75%)}
.hw{display:inline-block;clip-path:inset(-0.3em -0.15em 0);vertical-align:top}
.hwi{display:inline-block}
.shoot path{fill:none;stroke:var(--fg);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:square;stroke-linejoin:miter}
.shoot .vein{stroke-width:1;opacity:.55}
.shoot .leaf-new path{stroke:var(--accent);stroke-width:2.5}
.shoot .leaf-new .blade{fill:var(--accent);fill-opacity:.28}
[data-neon="on"][data-theme="night"] .shoot .leaf-new{filter:drop-shadow(0 0 4px var(--leaf))}

/* Neon = the live site's #82bb90 (v3 "leaf"), lit only on pine */
/* Neon on light: a neon highlighter under ink type (ink on leaf reads at about 8:1), and a glowing seed */
[data-neon="on"][data-theme="day"] .gsb-title-block{background-image:linear-gradient(transparent 58%,var(--leaf) 58%,var(--leaf) 96%,transparent 96%)}
[data-neon="on"][data-theme="day"] .gsb-seed{background:var(--leaf);box-shadow:0 0 .2em var(--leaf),0 0 .6em rgba(130,187,144,.6)}
[data-neon="on"][data-theme="night"] .gsb-seed,[data-neon="on"] [data-theme="night"] .gsb-seed{box-shadow:0 0 .2em var(--leaf),0 0 .6em rgba(130,187,144,.6)}
[data-neon="on"][data-theme="night"] .gsb-title-block,[data-neon="on"] [data-theme="night"] .gsb-title-block{background:none;color:var(--leaf);text-shadow:0 0 .12em rgba(130,187,144,.55),0 0 .45em rgba(130,187,144,.35)}
/* Brand logos: the neon-sign renders at night (screen-blended), flat versions by day. */
.neon-logo{transition:transform var(--dur-1) var(--ease-out),filter var(--dur-1)}
[data-theme="night"] .neon-logo{opacity:.95;mix-blend-mode:screen}

/* Growth stages: hand-drawn line art */
.gs path,.gs line{fill:none;stroke:var(--fg);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:square;stroke-linejoin:miter}
.gs .vein{stroke-width:1;opacity:.5}
.gs-1{--st:0}.gs-2{--st:1}.gs-3{--st:2}
.gs>:nth-child(1){--i:0}.gs>:nth-child(2){--i:1}.gs>:nth-child(3){--i:2}.gs>:nth-child(4){--i:3}.gs>:nth-child(5){--i:4}.gs>:nth-child(6){--i:5}.gs>:nth-child(7){--i:6}.gs>:nth-child(8){--i:7}.gs>:nth-child(9){--i:8}.gs>:nth-child(10){--i:9}.gs>:nth-child(11){--i:10}
.gs>:nth-child(12){--i:11}.gs>:nth-child(13){--i:12}.gs>:nth-child(14){--i:13}.gs>:nth-child(15){--i:14}.gs>:nth-child(16){--i:15}.gs>:nth-child(17){--i:16}.gs>:nth-child(18){--i:17}.gs>:nth-child(19){--i:18}.gs>:nth-child(20){--i:19}.gs>:nth-child(21){--i:20}.gs>:nth-child(22){--i:21}
.vine path{fill:none;stroke:var(--fg);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.3}
.gcard{transition:background-color var(--dur-1) var(--ease-out),opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.gcard:hover{background:var(--surface-strong)}

/* Portfolio cells: logo, hairline, units left / states right. Two up on phones. */
.port{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.cell{display:flex;flex-direction:column;gap:24px;padding:36px 28px 24px;min-height:288px;background:var(--surface);transition:background-color var(--dur-1) var(--ease-out),opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.cell:hover{background:var(--surface-strong)}
.cell-mark{flex:1;min-height:140px;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out)}
.cell .neon-logo{display:block;width:auto;height:auto;max-width:92%;max-height:132px}
.cell-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--rule)}
.cell-n{display:inline-flex;align-items:baseline;gap:6px}
.cell-n .gsb-num{font-size:28px;font-weight:600;line-height:1;letter-spacing:-0.025em}
.cell-u,.cell-s{font-size:13px;color:var(--fg-muted)}
.cell-s{text-align:right}
@media (max-width:560px){
.port{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cell{min-height:0;padding:20px 14px 14px;gap:14px}
.cell-mark{min-height:92px}
.cell .neon-logo{max-width:100%;max-height:80px}
.cell-meta{flex-direction:column;align-items:flex-start;gap:2px;padding-top:10px}
.cell-n .gsb-num{font-size:22px}
.cell-s{text-align:left;font-size:12px}
}
.cell:hover .cell-mark{transform:translateY(-2px)}
[data-theme="night"] .cell:hover .neon-logo{filter:brightness(1.15)}

/* Principles: a modern storefront. Sign = operating excellence, three windows = the pillars, sidewalk = the values. */
.store{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr)}
.st-parapet{grid-column:2;grid-row:1}.st-sign{grid-column:2;grid-row:2}.st-canopy{grid-column:2;grid-row:3}
.st-front{grid-column:2;grid-row:4}.st-kick{grid-column:2;grid-row:5}.st-walk{grid-column:2;grid-row:6}
.slab{grid-column:1;display:flex;align-items:center;gap:12px}
.slab-sign{grid-row:2}.slab-front{grid-row:4}.slab-walk{grid-row:6}
.slab span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}
.slab::after{content:"";flex:1;min-width:16px;height:1px;background:var(--rule-strong);transform-origin:0 50%}
.st-parapet{height:1.5px;margin:0 calc(3% - 6px);background:var(--fg);transform-origin:50% 50%}
.st-sign{margin:6px 3% 0;padding:clamp(18px,2.4vw,30px) 20px;background:var(--accent);color:var(--on-accent);text-align:center}
.st-sign h3{margin:0;font-size:clamp(28px,3.8vw,52px);font-weight:600;line-height:1;letter-spacing:-0.04em}
[data-neon="on"][data-theme="night"] .store.in .st-sign{box-shadow:0 0 0 1px rgba(130,187,144,.5),0 0 40px rgba(130,187,144,.3)}
.st-canopy{height:10px;background:var(--fg);transform-origin:50% 50%}
.st-front{position:relative;margin:0 3%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);padding:clamp(16px,2vw,26px) clamp(14px,2vw,28px) 0}
.st-front::before,.st-front::after{content:"";position:absolute;top:0;bottom:0;width:1.5px;background:var(--fg);transform-origin:50% 100%}
.st-front::before{left:0}.st-front::after{right:0}
/* Glass: slim frame, a transom bar near the top, two small reflection marks */
.bay{position:relative;min-height:clamp(150px,15vw,210px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 12px 16px;text-align:center;border:1.5px solid var(--fg);border-bottom:0;background:linear-gradient(var(--fg),var(--fg)) 0 18px / 100% 1.5px no-repeat,var(--bg)}
.bay::before,.bay::after{content:"";position:absolute;right:14px;height:1.5px;background:var(--rule-strong);transform:rotate(-45deg)}
.bay::before{top:34px;width:30px}.bay::after{top:44px;right:12px;width:16px}
[data-theme="night"] .bay{background:linear-gradient(var(--fg),var(--fg)) 0 18px / 100% 1.5px no-repeat,rgba(130,187,144,.10)}
.bay .pn{font-size:12px;font-weight:500;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.bay h4{margin:0;font-size:clamp(18px,1.9vw,26px);font-weight:600;line-height:1.1;letter-spacing:-0.025em}
.st-kick{height:clamp(16px,1.8vw,24px);margin:0 3%;border:1.5px solid var(--fg);background:repeating-linear-gradient(90deg,transparent 0 27px,var(--rule) 27px 28px)}
.st-walk{padding:clamp(16px,1.8vw,22px) 0 clamp(18px,2vw,24px);background:var(--surface-strong);border-bottom:1.5px solid var(--fg);text-align:center}
.st-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px clamp(10px,1.4vw,18px);margin:0 3%;padding:0 clamp(14px,2vw,28px)}
.st-vals h4{margin:0;font-size:clamp(16px,1.6vw,21px);font-weight:600;line-height:1.15;letter-spacing:-0.02em}
@media (max-width:720px){
/* Phones: the same storefront as desktop with every detail, just scaled down */
.st-sign{padding:16px 10px}
.st-sign h3{font-size:21px}
.st-canopy{height:8px}
.st-front{gap:6px;padding:12px 8px 0}
.bay{min-height:128px;gap:4px;justify-content:flex-start;padding:36px 4px 10px;background:linear-gradient(var(--fg),var(--fg)) 0 12px / 100% 1.5px no-repeat,var(--bg)}
[data-theme="night"] .bay{background:linear-gradient(var(--fg),var(--fg)) 0 12px / 100% 1.5px no-repeat,rgba(130,187,144,.10)}
.bay::before{top:22px;right:7px;width:16px}.bay::after{top:28px;right:6px;width:9px}
.bay .pn{font-size:10px}
.bay h4{font-size:13px;line-height:1.2}
.st-kick{height:14px;background:repeating-linear-gradient(90deg,transparent 0 17px,var(--rule) 17px 18px)}
.st-vals{gap:6px;padding:0 8px}
.st-vals h4{font-size:12px;line-height:1.25}
/* Same building as desktop: a narrow label column, labels on two lines, short leaders */
.store{grid-template-columns:64px minmax(0,1fr)}
.slab{gap:4px}
.slab span{font-size:10px;letter-spacing:.06em;line-height:1.3;white-space:normal}
.slab::after{min-width:6px}
}

/* Footprint: the real map, dots sized by open units, a light card on hover/tap, KPI cards beside it */
.fp-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:32px 40px;align-items:center}
.fmap{position:relative;min-width:0}
.fmap-svg{display:block;width:100%;height:auto;overflow:visible}
.fmap-states path{fill:transparent;stroke:var(--rule-strong);stroke-width:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill var(--dur-1) var(--ease-out),stroke var(--dur-1) var(--ease-out)}
.fmap-states path.on{fill:var(--accent);fill-opacity:.14;cursor:pointer}
.fmap-states path.on.is-hot{fill-opacity:.3;stroke:var(--fg)}
.fdot{cursor:pointer;outline:none}
.fdot circle{fill:var(--accent);fill-opacity:.9;stroke:var(--bg);stroke-width:1.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:fill-opacity var(--dur-1) var(--ease-out)}
.fdot.lb circle{fill-opacity:1}
.fdot.is-hot circle,.fdot:focus-visible circle{fill-opacity:1;stroke:var(--fg);stroke-width:2}
.fdot circle.hit,.fdot.is-hot circle.hit,.fdot:focus-visible circle.hit{fill:transparent;fill-opacity:0;stroke:none;filter:none}
@media (pointer:fine){.fdot circle.hit{display:none}}
.fdot text{fill:var(--on-accent);font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-variant-numeric:tabular-nums}
[data-neon="on"][data-theme="night"] .fdot circle{filter:drop-shadow(0 0 5px rgba(130,187,144,.45))}
.fmap-card{position:absolute;z-index:2;min-width:190px;max-width:260px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:var(--bg);border:1px solid var(--rule-strong);font-size:13px;line-height:1.4;pointer-events:none}
.fmap-card b{font-size:15px;font-weight:600}
.fc-open{color:var(--fg-muted)}
.fc-brands,.fc-co{display:flex;flex-direction:column;margin-top:4px;padding-top:8px;border-top:1px solid var(--rule)}
.fc-brands>span,.fc-co-rows>span{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.fc-brands b,.fc-co-rows b{font-weight:600;font-variant-numeric:tabular-nums}
.fc-co-rows{display:flex;flex-direction:column}
.fc-co-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.fmap-note{margin:12px 0 0;font-size:13px;color:var(--fg-muted)}
.fkpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fkpi{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;background:var(--surface);border-top:2px solid var(--fg)}
.fkpi-v{font-size:clamp(30px,2.8vw,40px);font-weight:600;line-height:1;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fkpi-v .unit{margin-left:.2em;font-size:.5em;font-weight:500;letter-spacing:0;color:var(--fg-muted)}
.fkpi-n{font-size:13px;line-height:1.4;color:var(--fg-muted)}
@media (max-width:900px){.fp-grid{grid-template-columns:minmax(0,1fr)}.fkpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){.fkpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fkpi{padding:14px 12px 12px}.fdot text{font-size:20px}.fmap-card{min-width:150px}}

/* Trajectory */
.traj-curve{position:relative;height:240px;margin:0 0 40px}
.tc-fill{fill:url(#tc-grad);stroke:none}
.tc-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.tc-next{fill:none;stroke:var(--fg-muted);stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.tl{position:absolute;transform:translate(-50%,calc(-100% - 14px));font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.tl--now{font-size:22px;color:var(--accent-text);letter-spacing:-0.02em}
.tl--next{color:var(--fg-muted);font-weight:500;transform:translate(-100%,calc(-100% - 14px))}
.tk{position:absolute;width:10px;height:10px;background:var(--fg-muted);transform:translate(-50%,-50%)}
.tk--now{width:14px;height:14px;background:var(--accent);box-shadow:0 0 0 6px var(--title-block)}
.tk--next{background-color:transparent}
.traj-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.node{position:relative;display:flex;flex-direction:column;gap:12px;padding-top:16px}
.rule-line{position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule-strong);transform-origin:0 50%}
.node--now .rule-line{height:2px;background:var(--accent)}
.node--now .yr,.node--now .ey{color:var(--accent-text)}
.node--next .yr{color:var(--fg-muted)}
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:4px;padding-top:12px;border-top:1px solid var(--rule)}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--fg-muted)}
.chip i{width:3px;height:12px;display:block}
.chips--row{flex-direction:row;gap:6px}
.ghost{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px dashed var(--rule-strong);font-size:12px;font-weight:600;color:var(--fg-muted)}
.seed-dot{display:inline-block;width:6px;height:6px;margin-right:7px;vertical-align:1px;background:var(--accent)}
[data-neon="on"][data-theme="night"] .seed-dot{box-shadow:0 0 6px var(--leaf)}
.stair{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;margin-top:48px}
.stair>div{padding:16px 20px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.stair-1{grid-column:1 / 3;min-height:76px}
.stair-2{grid-column:3 / 6;min-height:108px}
.stair-3{grid-column:6 / 7;min-height:140px}
@media (max-width:900px) and (min-width:721px){.traj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.traj-curve{height:120px}.stair{grid-template-columns:repeat(3,minmax(0,1fr))}.stair-1,.stair-2,.stair-3{grid-column:auto}}
/* Mobile: the living spine. Phases interleave with the years on one stem that thickens to today, then dashes into the future. */
@media (max-width:720px){
.traj-curve{display:none}
.traj-wrap{display:flex;flex-direction:column}
.traj-grid,.stair{display:contents}
.stair-1{order:0}.traj-grid>:nth-child(1){order:1}.traj-grid>:nth-child(2){order:2}.stair-2{order:3}.traj-grid>:nth-child(3){order:4}.traj-grid>:nth-child(4){order:5}.traj-grid>:nth-child(5){order:6}.stair-3{order:7}.traj-grid>:nth-child(6){order:8}
.stair-1,.stair-2,.stair-3{min-height:0;margin:8px 0}
.node{padding:4px 0 32px 32px}
.node .rule-line{display:none}
.node::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--fg)}
.node::after{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;background:var(--fg)}
.traj-grid>:nth-child(3)::before,.traj-grid>:nth-child(4)::before{width:3px;left:3.5px}
.node--now::before{width:4px;left:3px;background:var(--accent)}
.node--now::after{background:var(--accent)}
.node--next::before{background:repeating-linear-gradient(to bottom,var(--fg-muted) 0 5px,transparent 5px 11px)}
.node--next::after{background:transparent;box-shadow:inset 0 0 0 1px var(--fg-muted)}
}

/* Team */
.tm-photo{position:relative;aspect-ratio:4 / 3;background:var(--surface-strong);overflow:hidden}
.tm-init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(36px,4vw,48px);font-weight:600;letter-spacing:-0.02em;color:var(--fg-muted)}
.tm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;z-index:1;filter:grayscale(.15);transition:filter .5s var(--ease-out),transform .5s var(--ease-out)}
.tm:hover .tm-photo img{filter:grayscale(0);transform:scale(1.03)}
.tm-role{transition:color var(--dur-1)}
.tm:hover .tm-role{color:var(--accent-text)}

/* Press */
.press-row svg{transition:transform var(--dur-1) var(--ease-out),color var(--dur-1)}
.press-row:hover svg{color:var(--accent);transform:translate(2px,-2px)}

/* Contact */
.ci{display:block;opacity:.85;transition:opacity var(--dur-1),transform var(--dur-1) var(--ease-out)}
.ci path,.ci rect,.ci circle{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:square;stroke-linejoin:miter}
.ci .vein{stroke-width:1;opacity:.55}
.ccard{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.ccard:hover .ci{opacity:1;transform:translateY(-2px)}
.clink{align-self:flex-start;max-width:100%;font-size:13px;font-weight:600;letter-spacing:-0.005em;white-space:nowrap;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule-strong);transition:color var(--dur-1)}
.clink::after{content:"→";display:inline-block;margin-left:6px;transition:transform var(--dur-1) var(--ease-out)}
.ccard:hover .clink{color:var(--accent-text)}
.ccard:hover .clink::after{transform:translateX(3px)}
.fl-outline{fill:var(--fg);fill-opacity:.04;stroke:var(--fg);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:miter;opacity:.6}
.fl-ring{fill:none;stroke:var(--fg);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.4}
.fl-dot{fill:var(--accent)}
.foot a{color:var(--fg-muted);text-decoration:none;transition:color var(--dur-1)}
.foot a:hover{color:var(--fg)}

/* Stats strip, as on the live site: label over figure, hairline dividers, one rail line */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{display:flex;flex-direction:column;gap:10px;min-width:0;padding:clamp(24px,3vw,40px) clamp(12px,1.6vw,24px);border-right:1px solid var(--rule)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:0}
.stat-v{font-size:clamp(28px,3.4vw,48px);font-weight:600;line-height:1;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-v .unit{margin-left:.2em;font-size:.5em;font-weight:500;letter-spacing:0;color:var(--fg-muted)}
.stats-rail{margin:0;padding:14px 0 18px;border-top:1px solid var(--rule);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
@media (max-width:720px){
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat:nth-child(2n){border-right:0}
.stat:nth-child(3){padding-left:0}
.stat:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}

/* Phones: tap targets of at least 40px, readable small text, no wasted rows */
@media (hover:hover){.on-touch{display:none}}
@media (hover:none){.on-hover{display:none}}
@media (max-width:720px){
.hero-art{min-height:260px !important}
.nav-was{font-size:11px}
.foot li a{display:inline-block;padding:10px 0}
.foot ul{gap:0 16px !important}
.clink{padding:10px 0}
.ccard{min-height:0 !important;padding:24px !important}
.press-row>span:first-child{flex-basis:100% !important}
.press-row>span:nth-child(2){flex:1 1 0 !important;min-width:0;font-size:17px !important}
}
@media (max-width:400px){.mbar a{letter-spacing:.04em}}

/* Counters */
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
.count{--n:var(--to);counter-reset:n var(--n)}
.count::after{content:counter(n)}
.c388{--to:388}.c8{--to:8}.c21{--to:21}.c500{--to:500}

/* ---------- Motion. v3: slow, eased, one gesture each. Three quiet loops carried over from the live site:
   the shoot's sway, the marching future line on the trajectory, and the marching future stem on phones. ---------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes word-up{from{transform:translateY(115%)}}
@keyframes block-in{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes grow-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes draw-stem{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes shoot-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
@keyframes march{to{stroke-dashoffset:-10}}
@keyframes spine-march{to{background-position:0 11px}}
@keyframes leaf-in{from{opacity:0;transform:translateY(4px)}}
@keyframes count{from{--n:0}}
@keyframes parallax{to{transform:translateY(12%)}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes word-lit{from{opacity:.14}}
/* Neon ignition: three dips, then steady. One time only; no more than three flashes a second. */
@keyframes neon-on{0%{opacity:.06;filter:brightness(.15) saturate(0)}6%{opacity:.55;filter:brightness(.7) saturate(.4)}9%{opacity:.08;filter:brightness(.18) saturate(0)}15%{opacity:.05;filter:brightness(.15) saturate(0)}20%{opacity:.75;filter:brightness(.85) saturate(.6)}24%{opacity:.8;filter:brightness(.9) saturate(.7)}27%{opacity:.12;filter:brightness(.2) saturate(.05)}36%{opacity:.85;filter:brightness(.95) saturate(.85)}40%{opacity:.35;filter:brightness(.45) saturate(.25)}50%{opacity:.9;filter:brightness(1.05) saturate(.95)}58%{opacity:.82;filter:brightness(.92) saturate(.9)}70%{opacity:.95;filter:brightness(1.08) saturate(1)}82%{opacity:.88;filter:brightness(.96) saturate(1)}100%{opacity:.95;filter:none}}
@media (prefers-reduced-motion:no-preference){
/* Hero, on load: fields grow up, words rise out of their masks, the highlight draws, the shoot grows */
.hero-ey{animation:rise .7s var(--ease-out) .1s both}
.hwi{animation:word-up 1.1s cubic-bezier(.16,1,.3,1) both}
.w1 .hwi{animation-delay:.25s}.w2 .hwi{animation-delay:.335s}.w3 .hwi{animation-delay:.42s}.w4 .hwi{animation-delay:.505s}.w5 .hwi{animation-delay:.59s}.w6 .hwi{animation-delay:.675s}
.hero-tb{background-size:100% 100%;background-repeat:no-repeat;animation:block-in .7s var(--ease-out) 1.1s both}
/* By day the highlighter swipes in; at night the neon ignites */
[data-neon="on"][data-theme="night"] .hero-tb{animation:neon-on 2.4s ease-out 1.1s backwards}
.hero-sub{animation:rise .9s var(--ease-out) .9s both}
.grow{animation:grow-up .9s var(--ease-out) both}
.g1{animation-delay:.15s}.g2{animation-delay:.3s}.g3{animation-delay:.42s}.g4{animation-delay:.55s}
.shoot-stem{stroke-dasharray:1400;animation:draw-stem 2.4s var(--ease-out) .6s both}
.leaf{animation:leaf-in .6s ease-out both}
.l1{animation-delay:1.5s}.l2{animation-delay:1.75s}.l3{animation-delay:2s}.l4{animation-delay:2.25s}.l5{animation-delay:2.5s}.l6{animation-delay:2.75s}.l7{animation-delay:3s}.l8{animation-delay:3.25s}
/* Then the shoot sways from its base, gently, for as long as the page is open (starts at rest, so no jump) */
.shoot{transform-origin:50% 100%;animation:shoot-sway 6s ease-in-out 4.2s infinite}
/* On scroll-in (JS adds .in once): rise, draw, count, ignite. Hidden states apply only once JS is running. */
[data-motion="on"] [data-reveal]:not(.in){opacity:0;transform:translateY(16px)}
[data-motion="on"] [data-reveal]{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-motion="on"] [data-reveal="row"]:not(.in){transform:translateY(14px)}
[data-motion="on"] [data-reveal="row"]{transition-duration:.6s}
[data-motion="on"] .gcard[data-reveal],[data-motion="on"] .cell[data-reveal]{transition:background-color var(--dur-1) var(--ease-out),opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-motion="on"] .sec-head .gsb-title-block{background-size:0% 100%;background-repeat:no-repeat;transition:background-size .7s var(--ease-out) .3s}
[data-motion="on"] .sec-head.in .gsb-title-block{background-size:100% 100%}
[data-motion="on"][data-neon="on"][data-theme="night"] .sec-head.in .gsb-title-block,[data-motion="on"][data-neon="on"] [data-theme="night"] .sec-head.in .gsb-title-block{animation:neon-on 2.4s ease-out .3s backwards}
/* The storefront builds once, from the ground up: sidewalk, walls, windows, canopy, sign */
[data-motion="on"] .store:not(.in) .st-walk,[data-motion="on"] .store:not(.in) .st-kick{clip-path:inset(0 50% 0 50%)}
[data-motion="on"] .store.in .st-walk,[data-motion="on"] .store.in .st-kick{clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease-out)}
[data-motion="on"] .store.in .st-kick{transition-delay:.15s}
[data-motion="on"] .store:not(.in) .st-vals{opacity:0}
[data-motion="on"] .store.in .st-vals{transition:opacity .6s var(--ease-out) .45s}
[data-motion="on"] .store:not(.in) .slab span{opacity:0}
[data-motion="on"] .store:not(.in) .slab::after{transform:scaleX(0)}
[data-motion="on"] .store.in .slab span{transition:opacity .5s var(--ease-out)}
[data-motion="on"] .store.in .slab::after{transition:transform .6s var(--ease-out)}
[data-motion="on"] .store.in .slab-walk span,[data-motion="on"] .store.in .slab-walk::after{transition-delay:.45s}
[data-motion="on"] .store.in .slab-front span,[data-motion="on"] .store.in .slab-front::after{transition-delay:1s}
[data-motion="on"] .store.in .slab-sign span,[data-motion="on"] .store.in .slab-sign::after{transition-delay:1.9s}
[data-motion="on"] .store:not(.in) .st-front::before,[data-motion="on"] .store:not(.in) .st-front::after{transform:scaleY(0)}
[data-motion="on"] .store.in .st-front::before,[data-motion="on"] .store.in .st-front::after{transition:transform .8s var(--ease-out) .4s}
[data-motion="on"] .store:not(.in) .bay{opacity:0;transform:translateY(14px)}
[data-motion="on"] .store.in .bay{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
[data-motion="on"] .store.in .bay:nth-child(1){transition-delay:.7s}[data-motion="on"] .store.in .bay:nth-child(2){transition-delay:.85s}[data-motion="on"] .store.in .bay:nth-child(3){transition-delay:1s}
[data-motion="on"] .store:not(.in) .st-canopy{transform:scaleX(0)}
[data-motion="on"] .store.in .st-canopy{transition:transform .7s var(--ease-out) 1.25s}
[data-motion="on"] .store:not(.in) .st-sign{clip-path:inset(0 50% 0 50%)}
[data-motion="on"] .store.in .st-sign{clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease-out) 1.5s,box-shadow .6s var(--ease-out) 2.4s}
[data-motion="on"] .store:not(.in) .st-sign>*{opacity:0}
[data-motion="on"] .store.in .st-sign>*{transition:opacity .6s var(--ease-out) 1.95s}
[data-motion="on"][data-neon="on"][data-theme="night"] .store.in .st-sign h3{animation:neon-on 2.4s ease-out 1.95s backwards}
[data-motion="on"] .store:not(.in) .st-parapet{transform:scaleX(0)}
[data-motion="on"] .store.in .st-parapet{transition:transform .6s var(--ease-out) 1.85s}
[data-motion="on"] .stats:not(.in) .count{--n:0}
[data-motion="on"] .stats.in .count{animation:count 1.6s cubic-bezier(.33,1,.68,1) both}
[data-motion="on"] .stats.in>:nth-child(2) .count{animation-delay:.12s}[data-motion="on"] .stats.in>:nth-child(3) .count{animation-delay:.24s}[data-motion="on"] .stats.in>:nth-child(4) .count{animation-delay:.36s}
[data-motion="on"] .port:not(.in) .neon-logo{opacity:0}
[data-motion="on"] .port.in .neon-logo{animation:neon-on 2.4s ease-out backwards}
/* By day the logos are flat print, not signs: they rise in once, staggered, instead of flickering on. */
[data-motion="on"][data-theme="day"] .port.in .neon-logo{animation:rise .8s var(--ease-out) backwards}
/* Footprint: states fade in, then the dots grow in west to east; the KPI figures count up */
[data-motion="on"] .fp-grid:not(.in) .fmap-states path{opacity:0}
[data-motion="on"] .fp-grid.in .fmap-states path{transition:opacity .8s var(--ease-out),fill var(--dur-1) var(--ease-out),stroke var(--dur-1) var(--ease-out)}
[data-motion="on"] .fp-grid:not(.in) .fdot circle{transform:scale(0)}
[data-motion="on"] .fp-grid.in .fdot circle{transition:transform .7s cubic-bezier(.34,1.56,.64,1) var(--d),fill-opacity var(--dur-1) var(--ease-out)}
[data-motion="on"] .fp-grid:not(.in) .fdot text,[data-motion="on"] .fp-grid:not(.in) .fkpi{opacity:0}
[data-motion="on"] .fp-grid.in .fdot text{transition:opacity .4s var(--ease-out) calc(var(--d) + .4s)}
[data-motion="on"] .fp-grid.in .fkpi{transition:opacity .6s var(--ease-out)}
[data-motion="on"] .fp-grid.in .fkpi:nth-child(2){transition-delay:.1s}[data-motion="on"] .fp-grid.in .fkpi:nth-child(3){transition-delay:.2s}[data-motion="on"] .fp-grid.in .fkpi:nth-child(4){transition-delay:.3s}
[data-motion="on"] .fp-grid:not(.in) .count{--n:0}
[data-motion="on"] .fp-grid.in .count{animation:count 1.6s cubic-bezier(.33,1,.68,1) both}
[data-motion="on"] .growth .gs path,[data-motion="on"] .growth .gs line{stroke-dasharray:800;stroke-dashoffset:800}
[data-motion="on"] .growth.in .gs path,[data-motion="on"] .growth.in .gs line{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out);transition-delay:calc(var(--st) * .45s + var(--i) * .06s)}
[data-motion="on"] .vine path{stroke-dasharray:1;stroke-dashoffset:1}
[data-motion="on"] .vine.in path{stroke-dashoffset:0;transition:stroke-dashoffset 2.5s cubic-bezier(.4,0,.2,1) .5s}
[data-motion="on"] .ccard .ci>*{stroke-dasharray:320;stroke-dashoffset:320}
[data-motion="on"] .ccard.in .ci>*{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-out)}
.ci>:nth-child(1){transition-delay:.1s !important}.ci>:nth-child(2){transition-delay:.22s !important}.ci>:nth-child(3){transition-delay:.34s !important}.ci>:nth-child(4){transition-delay:.46s !important}.ci>:nth-child(5){transition-delay:.58s !important}
[data-motion="on"] .trajectory:not(.in) .tc-line{stroke-dasharray:3000;stroke-dashoffset:3000}
[data-motion="on"] .trajectory.in .tc-line{stroke-dasharray:3000;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .4s}
[data-motion="on"] .trajectory:not(.in) .tc-fill,[data-motion="on"] .trajectory:not(.in) .tc-next{opacity:0}
[data-motion="on"] .trajectory.in .tc-fill{transition:opacity 1.4s var(--ease-out) .6s}
[data-motion="on"] .trajectory.in .tc-next{transition:opacity .6s var(--ease-out) 2s;animation:march 1.2s linear infinite}
[data-motion="on"] .trajectory:not(.in) .tl{opacity:0;margin-top:4px}
[data-motion="on"] .trajectory.in .tl{transition:opacity .5s var(--ease-out),margin-top .5s var(--ease-out)}
.tl-1{transition-delay:.78s !important}.tl-2{transition-delay:1.16s !important}.tl-3{transition-delay:2.26s !important}.tl-4{transition-delay:2.64s !important}
[data-motion="on"] .trajectory:not(.in) .tk{opacity:0}
[data-motion="on"] .trajectory.in .tk{transition:opacity .4s var(--ease-out)}
.tk-1{transition-delay:.62s !important}.tk-2{transition-delay:.98s !important}.tk-3{transition-delay:1.34s !important}.tk-4{transition-delay:1.7s !important}.tk-5{transition-delay:2.06s !important}.tk-6{transition-delay:2.42s !important}
/* Phones: the future stem marches downward and dissolves */
@media (max-width:720px){[data-motion="on"] .trajectory.in .node--next::before{animation:spine-march 1.5s linear infinite;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}}
[data-motion="on"] .trajectory:not(.in) .rule-line{transform:scaleX(0)}
[data-motion="on"] .trajectory.in .rule-line{transition:transform .7s var(--ease-out)}
.traj-grid>:nth-child(1) .rule-line{transition-delay:.1s !important}.traj-grid>:nth-child(2) .rule-line{transition-delay:.22s !important}.traj-grid>:nth-child(3) .rule-line{transition-delay:.34s !important}.traj-grid>:nth-child(4) .rule-line{transition-delay:.46s !important}.traj-grid>:nth-child(5) .rule-line{transition-delay:.58s !important}.traj-grid>:nth-child(6) .rule-line{transition-delay:.7s !important}
[data-motion="on"] .trajectory:not(.in) .stair>div{clip-path:inset(100% 0 0 0)}
[data-motion="on"] .trajectory.in .stair>div{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-out)}
.stair-1{transition-delay:.9s !important}.stair-2{transition-delay:1.1s !important}.stair-3{transition-delay:1.3s !important}
/* Scroll-linked (progressive enhancement; only where the page really scrolls) */
@supports ((animation-timeline: view()) and (animation-range: entry)){
[data-scroll="on"] .shoot-wrap{animation:parallax linear both;animation-timeline:scroll(root);animation-range:0px 680px}
[data-scroll="on"] .foot{view-timeline:--mission}
[data-scroll="on"] .mw{animation:word-lit linear both;animation-timeline:--mission}
[data-scroll="on"] .mw:nth-child(1){animation-range:entry 15% entry 35%}
[data-scroll="on"] .mw:nth-child(2){animation-range:entry 22% entry 42%}
[data-scroll="on"] .mw:nth-child(3){animation-range:entry 30% entry 50%}
[data-scroll="on"] .mw:nth-child(4){animation-range:entry 37% entry 57%}
[data-scroll="on"] .mw:nth-child(5){animation-range:entry 44% entry 64%}
}
}

/* ---------- Launch fixes ---------- */
[data-scroll="on"][data-neon="on"] .progress{background:var(--leaf);box-shadow:0 0 8px var(--leaf)}
@supports (animation-timeline: scroll()){[data-scroll="on"] .progress{animation:progress auto linear both;animation-timeline:scroll(root)}}
@media (max-width:1000px){html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}.mbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}
/* Controls that need main.js stay out of the way without JavaScript */
html:not([data-js]) [data-theme-toggle],html:not([data-js]) [aria-label="Filter press by year"],html:not([data-js]) [data-press-more]{display:none !important}
/* The swaying shoot never widens the page */
.hero{overflow-x:clip}
@supports not (overflow-x:clip){.hero-art{overflow:hidden}}
/* Footer wordmark: each line, and the SHOOT highlight, sizes to its word */
.foot .gsb-wordmark--stacked{align-self:flex-start;align-items:flex-start}
/* Night hover keeps text contrast (moss under muted text fell to 2.7:1) */
[data-theme="night"] .gcard:hover,[data-theme="night"] .cell:hover{background:linear-gradient(rgba(130,187,144,.06),rgba(130,187,144,.06)) var(--surface)}
[data-theme="night"] .bay .pn{color:var(--fg)}
h3.slab{margin:0;font:inherit}
/* Figure affixes drawn by CSS, so the visible text isn't duplicated in copy/paste or search snippets */
.count.money::before{content:"$"}.count.money::after{content:counter(n) "M+"}
.unit[data-u]::before{content:attr(data-u)}
/* Loops pause while their section is off-screen */
.is-off .shoot,.is-off .tc-next,.is-off .node--next::before{animation-play-state:paused !important}
/* Narrow phones: the CTA lives in the tab bar; the wordmark steps down so the toggle stays on-screen */
@media (max-width:600px){.nav-cta{display:none !important}}
@media (max-width:374px){.nav .gsb-wordmark{font-size:20px !important}}