/* ==========================================================================
   Big League City Capital Ventures
   One drawing set: every page is a sheet, every hero is a view of the same
   wireframe render of downtown OKC. Navy is the render's own sky (#02132B),
   sampled, not picked, so the image bleeds into the page with no seam.

   Contrast (WCAG 2.x, measured): ice 16.1:1, ice-2 10.9:1, ice-3 7.3:1,
   signal 8.4:1 on navy-900. ink 18.4:1, ink-2 8.7:1, ink-3 5.9:1,
   signal-ink 6.5:1 on white. The accent swaps by ground: signal on navy,
   signal-ink on paper. Never use signal as text on a light surface (2.1:1).
   ========================================================================== */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:"Oswald Variable";font-style:normal;font-display:swap;font-weight:200 700;
  src:url("/assets/fonts/oswald-latin-wght-normal.woff2") format("woff2-variations"),url("/assets/fonts/oswald-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"),url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces Variable";font-style:italic;font-display:swap;font-weight:100 900;
  src:url("/assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations"),url("/assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans Variable";font-style:normal;font-display:swap;font-weight:400 700;
  src:url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"),url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;
  src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;

  --navy-950:#010D1F;
  --navy-900:#02132B;
  --navy-850:#051A38;
  --navy-800:#0A2242;
  --navy-700:#133058;
  --ice:#E8EFFC;
  --ice-2:#B7C7E3;
  --ice-3:#8FA4C7;
  --sky:#A9C6FF;
  --signal:#7DB0FF;
  --line:rgba(169,198,255,.16);
  --line-2:rgba(169,198,255,.30);
  --line-3:rgba(169,198,255,.55);

  --white:#FFFFFF;
  --paper:#F3F6FB;
  --paper-2:#E9EEF6;
  --ink:#06142B;
  --ink-2:#3D4C64;
  --ink-3:#56657E;
  --rule:#D6DEEA;
  --rule-2:#B9C5D8;
  --signal-ink:#1B55CC;

  --f-display:"Oswald Variable","Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Fraunces Variable","Fraunces",Georgia,"Times New Roman",serif;
  --f-sans:"Instrument Sans Variable","Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:.75rem;     /* 12 */
  --t-sm:.875rem;    /* 14 */
  --t-base:1.0625rem;/* 17 */
  --t-md:1.25rem;    /* 20 */
  --t-lg:clamp(1.45rem,1.1rem + 1vw,1.85rem);
  --t-xl:clamp(2.15rem,1.4rem + 3.1vw,3.7rem);
  --t-2xl:clamp(2.8rem,1.6rem + 5vw,5.4rem);
  --t-hero:clamp(3rem,1.2rem + 6.4vw,6.9rem);

  --maxw:1240px;
  --gutter:clamp(20px,4vw,44px);
  --sec-y:clamp(84px,6rem + 4vw,156px);
  --head-h:96px;
  --head-h-solid:66px;
  --radius:3px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.25,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h-solid) + 24px);
  background:var(--navy-900);
}
body{
  font-family:var(--f-sans);font-size:var(--t-base);line-height:1.6;
  color:var(--ice);background:var(--navy-900);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-kerning:normal;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul[role="list"],ol[role="list"]{list-style:none}
h1,h2,h3,h4{font-weight:inherit;text-wrap:balance}
p{text-wrap:pretty}
address{font-style:normal}
[hidden]{display:none !important}
::selection{background:var(--signal);color:var(--navy-900)}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.on-light :focus-visible,.sec-paper :focus-visible,.sec-white :focus-visible{outline-color:var(--signal-ink)}

.skip{
  position:fixed;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:var(--radius);
  background:var(--ice);color:var(--navy-900);font-weight:600;transition:top .2s var(--ease);
}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.coords{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em}
.arw{display:inline-block;transition:translate .28s var(--ease)}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--signal);
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75}
.sec-paper .eyebrow,.sec-white .eyebrow,.on-light .eyebrow{color:var(--signal-ink)}

.h2{
  font-family:var(--f-serif);font-weight:460;font-size:var(--t-xl);
  line-height:1.04;letter-spacing:-.018em;font-optical-sizing:auto;
}
.h3{
  font-family:var(--f-serif);font-weight:480;font-size:var(--t-lg);
  line-height:1.15;letter-spacing:-.01em;font-optical-sizing:auto;
}
.lede{font-size:var(--t-md);line-height:1.55;color:var(--ice-2);max-width:40ch}
.sec-paper .lede,.sec-white .lede{color:var(--ink-2)}

.sec-head{max-width:780px;margin-bottom:clamp(44px,5vw,72px)}
.sec-head .h2{margin-top:18px}
.sec-head .lede{margin-top:22px}
.sec-head--split{max-width:none;display:grid;grid-template-columns:1.1fr 1fr;gap:28px 56px;align-items:end}
.sec-head--split .lede{margin:0 0 6px}

/* ---------- buttons & links ---------- */
.btn{
  --bg:transparent;--fg:currentColor;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 28px;border-radius:999px;
  font-family:var(--f-sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),translate .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{translate:0 -2px}
.btn:hover .arw{translate:3px 0}
.btn:active{translate:0 0}
.btn-light{--bg:var(--ice);--fg:var(--navy-900);--bd:var(--ice)}
.btn-light:hover{--bg:var(--signal);--bd:var(--signal)}
.btn-ghost{--fg:var(--ice);--bd:var(--line-2)}
.btn-ghost:hover{--bg:rgba(169,198,255,.10);--bd:var(--line-3)}
.btn-dark{--bg:var(--navy-900);--fg:var(--white);--bd:var(--navy-900)}
.btn-dark:hover{--bg:var(--signal-ink);--bd:var(--signal-ink)}
.btn-quiet{--fg:var(--ink-2);--bd:var(--rule-2);padding:0 22px}
.btn-quiet:hover{--fg:var(--ink);--bd:var(--ink-3)}

.text-link{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;
  color:var(--signal-ink);border-bottom:1px solid currentColor;padding-bottom:2px;
}
.text-link:hover .arw{translate:3px 0}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
  view-transition-name:site-head;
}
.site-head.solid{
  background:rgba(1,13,31,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--head-h);transition:height .35s var(--ease)}
.site-head.solid .head-in{height:var(--head-h-solid)}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{width:auto;height:64px;transition:height .35s var(--ease)}
.site-head.solid .brand-logo{height:40px}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{font-size:.94rem;font-weight:500;color:var(--ice-2);transition:color .2s var(--ease);position:relative;padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ice)}
.nav a:not(.nav-cta):not(.nav-portal)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav a:not(.nav-cta):not(.nav-portal):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .nav-cta{
  color:var(--ice);padding:9px 20px;border:1px solid var(--line-2);border-radius:999px;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.nav .nav-cta:hover,.nav .nav-cta[aria-current="page"]{background:var(--signal);border-color:var(--signal);color:var(--navy-900)}
.nav-portal{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice) !important;
}
.nav-portal:hover{color:var(--signal) !important}
.nav-portal:hover .arw{translate:3px 0}
/* Investor portal while it's switched off (site.portalLive in data.json): the
   footer link and the Home card stay as placeholders, dimmed, with no arrow or
   hover (the header and menu links are left out). */
.is-soon{cursor:default}
.is-soon .arw{display:none}
.foot-col a.is-soon,.foot-col a.is-soon:hover{color:var(--ice-3)}

.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span,.menu-close span{display:block;width:18px;height:1.5px;background:var(--ice);transition:transform .3s var(--ease)}

/* mobile menu: native popover, works without JS */
.menu[popover]{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;
  background:var(--navy-950);color:var(--ice);overflow:auto;
  opacity:0;translate:0 -10px;
  transition:opacity .32s var(--ease),translate .32s var(--ease),overlay .32s allow-discrete,display .32s allow-discrete;
}
.menu[popover]:popover-open{opacity:1;translate:0 0}
@starting-style{.menu[popover]:popover-open{opacity:0;translate:0 -10px}}
.menu::backdrop{background:transparent}
/* browsers without the Popover API: script.js toggles .open instead */
@supports not selector(:popover-open){
  .menu{display:none}
  .menu.open{display:block;opacity:1;translate:none}
}
.menu-in{
  min-height:100%;display:flex;flex-direction:column;gap:40px;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));
  background:
    linear-gradient(var(--navy-950),rgba(1,13,31,.86)),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(169,198,255,.05) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(169,198,255,.05) 47px 48px);
}
.menu-top{display:flex;align-items:center;justify-content:space-between}
.menu-logo{height:44px;width:auto}
.menu-close{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center}
.menu-close span{grid-area:1/1}
.menu-close span:first-child{transform:rotate(45deg)}
.menu-close span:last-child{transform:rotate(-45deg)}
.menu-nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.menu-nav a{
  display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,9vw,2.8rem);line-height:1;
  text-transform:uppercase;letter-spacing:.01em;
}
.menu-nav a[aria-current="page"]{color:var(--signal)}
.menu-sheet{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;color:var(--ice-3);translate:0 -.9em}
.menu-foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.menu-meta{font-size:var(--t-sm);color:var(--ice-3);line-height:1.7}

/* ==========================================================================
   HOME HERO
   The canvas keeps the render's aspect ratio and covers the hero, so the
   annotations (dimension, callouts) are placed in image coordinates and
   stay pinned to the buildings at every viewport.
   ========================================================================== */
.hero{
  --hero-h:clamp(640px,100svh,1060px);
  position:relative;height:var(--hero-h);overflow:hidden;
  display:flex;align-items:flex-end;background:var(--navy-900);isolation:isolate;
}
.hero-stage{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-push,.hero-tilt{position:absolute;inset:0}
.hero-tilt{transform:perspective(1800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1.1s var(--ease-out);transform-origin:50% 40%}
.hero-canvas{
  --top:clamp(34px,6vh,80px);
  position:absolute;left:50%;top:var(--top);
  width:max(104%,calc((var(--hero-h) - var(--top)) * 1.7917 * 1.02));
  aspect-ratio:2752/1536;translate:-50% 0;
  background-color:var(--navy-900);
  view-transition-name:city;
}
.hero-canvas picture,.hero-canvas .city{position:absolute;inset:0;width:100%;height:100%}
.city{object-fit:cover}
.scanline{
  position:absolute;left:-2%;right:-2%;bottom:var(--scan,110%);height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(169,198,255,.55) 12%,#fff 50%,rgba(169,198,255,.55) 88%,transparent);
  box-shadow:0 0 18px 3px rgba(125,176,255,.55),0 0 80px 18px rgba(125,176,255,.18);
}

/* the build: the hero opens blank and the drawing's structure drafts itself
   (horizon, construction lines, skyline, towers, streets, the park). Then, once
   the full-res render has loaded, a scan line sweeps up from the street grid
   and fills in the detail, taking the draft lines with it. JS adds .is-drafting
   at once and .is-ready when the draft is done and the render is in; with no
   JS, or with reduced motion, the render simply shows. */
.bones{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.bones path{
  fill:none;stroke:var(--sky);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 2;stroke-dashoffset:1.01;
}
.bones .g{stroke-width:1.6;opacity:.32}
@media (prefers-reduced-motion:no-preference){
  .js .bones{display:block}
  .js .hero.is-drafting .bones path{animation:draft var(--t,.8s) var(--ease-io) var(--d,0s) forwards}
  .js .hero.is-ready .bones{clip-path:inset(0 0 max(0%,var(--scan)) 0)}
}
.js .hero.is-late .bones{display:none}
@keyframes draft{to{stroke-dashoffset:0}}
@property --scan{syntax:"<percentage>";inherits:true;initial-value:110%}
.js .hero:not(.is-ready) .city{clip-path:inset(100% 0 0 0)}
.js .hero.is-ready .hero-canvas{animation:scan 2.6s cubic-bezier(.42,.12,.26,1) .1s both}
.js .hero.is-ready .city{clip-path:inset(max(0%,calc(100% - var(--scan))) 0 0 0)}
.js .hero.is-ready .scanline{animation:scanline 2.6s cubic-bezier(.42,.12,.26,1) .1s both}
@keyframes scan{from{--scan:-2%}to{--scan:102%}}
/* slow connection: skip the build-up and just show the city */
.js .hero.is-late .hero-canvas,.js .hero.is-late .scanline{animation:none}
.js .hero.is-late .city{clip-path:none}
@keyframes scanline{0%{opacity:0}6%{opacity:1}88%{opacity:1}100%{opacity:0}}

.hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(97deg,rgba(2,19,43,.94) 0%,rgba(2,19,43,.78) 24%,rgba(2,19,43,.28) 50%,rgba(2,19,43,0) 70%),
    linear-gradient(180deg,rgba(1,13,31,.72) 0%,rgba(1,13,31,0) 20%,rgba(2,19,43,0) 52%,rgba(2,19,43,.85) 88%,var(--navy-900) 100%);
}

.hero-inner{position:relative;padding-bottom:clamp(56px,11vh,120px);padding-top:calc(var(--head-h) + 40px)}
.eyebrow--hero{color:var(--sky);text-shadow:0 1px 14px rgba(1,13,31,.9)}
.hero-title{
  margin-top:24px;font-family:var(--f-display);font-weight:600;font-size:var(--t-hero);
  line-height:.94;letter-spacing:.004em;text-transform:uppercase;color:var(--white);
  text-shadow:0 2px 30px rgba(1,13,31,.5);
}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .ln>span{display:inline-block}
.hero-title .ln--em{font-weight:300;color:var(--sky);letter-spacing:.012em}
.hero-sub{margin-top:26px;max-width:38ch;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--ice-2);line-height:1.5}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* load sequence for the type: rises out of its own line box */
@media (prefers-reduced-motion:no-preference){
  .js .hero-title .ln>span{animation:rise 1.1s var(--ease-out) both}
  .js .hero-title .ln--em>span{animation-delay:.12s}
  .js .hero .eyebrow--hero,.js .hero-sub,.js .hero-cta{animation:fade-up 1s var(--ease-out) both}
  .js .hero-sub{animation-delay:.28s}
  .js .hero-cta{animation-delay:.4s}
}
@keyframes rise{from{translate:0 105%}to{translate:0 0}}
@keyframes fade-up{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

/* dimension string beside Devon Tower (844 ft, architectural) */
.dim{position:absolute;left:var(--x);top:var(--y1);height:calc(var(--y2) - var(--y1));width:1px;pointer-events:none}
.dim-line{position:absolute;inset:0;background:var(--sky);opacity:.8;transform-origin:top}
.dim-line::before,.dim-line::after{
  content:"";position:absolute;left:50%;width:13px;height:1px;background:var(--sky);translate:-50% 0;rotate:-45deg;
}
.dim-line::before{top:0}.dim-line::after{bottom:0}
.dim::before,.dim::after{content:"";position:absolute;left:-7px;width:15px;height:1px;background:var(--sky);opacity:.55}
.dim::before{top:0}.dim::after{bottom:0}
.dim-label{
  position:absolute;top:50%;left:10px;translate:0 -50%;padding:3px 6px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--sky);
  background:rgba(2,19,43,.78);border:1px solid var(--line-2);white-space:nowrap;
}

/* detail callouts (drafting convention: detail letter over sheet number) */
.callout{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:flex;align-items:center;gap:10px;color:var(--ice)}
.callout-bubble{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;grid-template-rows:1fr 1fr;
  border:1px solid var(--sky);background:rgba(2,19,43,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-family:var(--f-mono);font-size:11px;line-height:1;text-align:center;position:relative;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),scale .3s var(--ease);
}
.callout-bubble::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;background:var(--sky)}
.callout-bubble b{font-weight:500;align-self:end;padding-bottom:3px;color:var(--white)}
.callout-bubble i{font-style:normal;align-self:start;padding-top:4px;color:var(--sky)}
.callout-tag{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  padding:6px 9px;background:rgba(2,19,43,.8);border:1px solid var(--line-2);
  opacity:0;translate:-6px 0;transition:opacity .25s var(--ease),translate .25s var(--ease);
}
.callout:hover .callout-bubble,.callout:focus-visible .callout-bubble{background:var(--signal);border-color:var(--signal);scale:1.08}
.callout:hover .callout-bubble b,.callout:hover .callout-bubble i,.callout:focus-visible .callout-bubble b,.callout:focus-visible .callout-bubble i{color:var(--navy-900)}
.callout:hover .callout-bubble::after,.callout:focus-visible .callout-bubble::after{background:var(--navy-900)}
.callout:hover .callout-tag,.callout:focus-visible .callout-tag{opacity:1;translate:0 0}

/* annotations arrive after the scan has built the city */
@media (prefers-reduced-motion:no-preference){
  .js .hero .dim-line{scale:1 0}
  .js .hero .dim::before,.js .hero .dim::after,.js .hero .dim-label,.js .hero .callout{opacity:0}
  .js .hero.is-ready .dim-line{animation:draw-y .9s var(--ease-out) 2.5s both}
  .js .hero.is-ready .dim::before,.js .hero.is-ready .dim::after,.js .hero.is-ready .dim-label{animation:fade .6s var(--ease) 3.1s both}
  .js .hero.is-ready .callout{animation:pop .6s var(--ease-out) both}
  .js .hero.is-ready .callout:nth-of-type(1){animation-delay:2.9s}
  .js .hero.is-ready .callout:nth-of-type(2){animation-delay:3.05s}
  .js .hero.is-ready .callout:nth-of-type(3){animation-delay:3.2s}
}
.js .hero.is-late .dim-line,.js .hero.is-late .dim::before,.js .hero.is-late .dim::after,.js .hero.is-late .dim-label,.js .hero.is-late .callout{animation-delay:0s !important}
@keyframes draw-y{from{scale:1 0}to{scale:1 1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

/* title block, lower right of the hero */
.titleblock{
  position:absolute;right:var(--gutter);bottom:clamp(56px,11vh,120px);z-index:2;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;width:300px;
  background:var(--line-2);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.tb-cell{background:rgba(2,19,43,.84);padding:8px 11px 9px;min-width:0}
.tb-wide{grid-column:1 / -1}
.titleblock dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-3)}
.titleblock dd{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;color:var(--ice);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:no-preference){
  .js .titleblock{animation:fade-up .9s var(--ease-out) .6s both}
}

/* scroll: the camera pushes in toward Devon Tower as you leave the hero */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-push{animation:push linear both;animation-timeline:scroll(root block);animation-range:0 100vh;transform-origin:49% 22%}
    .hero-inner{animation:lift linear both;animation-timeline:scroll(root block);animation-range:0 85vh}
  }
}
@keyframes push{to{scale:1.18;translate:0 4%;opacity:.35}}
@keyframes lift{to{translate:0 -10vh;opacity:0}}

/* ==========================================================================
   INNER PAGE HERO: a detail view of the same drawing
   ========================================================================== */
.phero{
  position:relative;background:var(--navy-900);overflow:hidden;isolation:isolate;
  padding-top:calc(var(--head-h) + clamp(28px,5vw,64px));padding-bottom:clamp(56px,7vw,104px);
}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(169,198,255,.045) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(169,198,255,.045) 47px 48px);
  -webkit-mask-image:radial-gradient(120% 90% at 20% 30%,#000 30%,transparent 85%);
          mask-image:radial-gradient(120% 90% at 20% 30%,#000 30%,transparent 85%);
}
.phero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(36px,5vw,80px);align-items:center}
.page-title{
  margin-top:22px;font-family:var(--f-display);font-weight:600;font-size:var(--t-2xl);
  line-height:.95;text-transform:uppercase;letter-spacing:.005em;color:var(--white);
  view-transition-name:page-title;
}
.phero-lede{margin-top:24px;font-family:var(--f-serif);font-weight:380;font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem);line-height:1.28;color:var(--ice-2);max-width:26ch;letter-spacing:-.005em}

.detail{position:relative;margin:0;view-transition-name:city}
.detail-frame{position:relative;aspect-ratio:4/3;background:var(--navy-850);border:1px solid var(--line-2)}
.detail-frame picture{position:absolute;inset:0;overflow:hidden}
.detail-frame img{width:100%;height:100%;object-fit:cover}
.detail-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,19,43,0) 55%,rgba(2,19,43,.55) 100%);
}
/* registration ticks at the frame corners */
.detail-frame::before{
  content:"";position:absolute;inset:-9px;pointer-events:none;z-index:1;
  --t:var(--line-3);
  background:
    linear-gradient(var(--t),var(--t)) 0 8px/17px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) 8px 0/1px 17px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 8px/17px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) calc(100% - 8px) 0/1px 17px no-repeat,
    linear-gradient(var(--t),var(--t)) 0 calc(100% - 8px)/17px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) 8px 100%/1px 17px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% calc(100% - 8px)/17px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) calc(100% - 8px) 100%/1px 17px no-repeat;
}
.detail figcaption{
  display:flex;align-items:center;gap:14px;margin-top:16px;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ice-3);
}
.detail figcaption .callout-bubble{width:40px;height:40px}
.detail figcaption strong{color:var(--ice);font-weight:500}
@media (prefers-reduced-motion:no-preference){
  .js .phero .detail-frame img{animation:settle 1.6s var(--ease-out) both}
  .js .phero-copy>*{animation:fade-up .9s var(--ease-out) both}
  .js .phero-copy>*:nth-child(2){animation-delay:.08s}
  .js .phero-copy>*:nth-child(3){animation-delay:.16s}
}
@keyframes settle{from{scale:1.12;filter:brightness(.6)}to{scale:1;filter:none}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding-block:var(--sec-y);position:relative}
.sec-navy{background:var(--navy-900);color:var(--ice)}
.sec-paper{background:var(--paper);color:var(--ink)}
.sec-white{background:var(--white);color:var(--ink)}

/* drafting grid: navy blueprint and light graph paper */
.blueprint{isolation:isolate}
.blueprint::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 239px,rgba(169,198,255,.07) 239px 240px),
    repeating-linear-gradient(90deg,transparent 0 239px,rgba(169,198,255,.07) 239px 240px),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(169,198,255,.035) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(169,198,255,.035) 47px 48px);
  background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.graph{isolation:isolate}
.graph::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(27,85,204,.055) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(27,85,204,.055) 47px 48px);
  background-position:center top;
  -webkit-mask-image:radial-gradient(90% 80% at 85% 10%,#000 20%,transparent 80%);
          mask-image:radial-gradient(90% 80% at 85% 10%,#000 20%,transparent 80%);
}

/* ---------- strategy ---------- */
.strategy{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,110px);align-items:start}
.strategy .sec-head{margin:0;position:sticky;top:calc(var(--head-h-solid) + 48px)}
.pillars{display:flex;flex-direction:column;border-top:1px solid var(--rule-2)}
.pillar{position:relative;padding:34px 0 36px;border-bottom:1px solid var(--rule-2);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px 32px;align-items:baseline}
.pillar p{color:var(--ink-2)}
.pillar::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--signal-ink);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);
}
.pillar:hover::after{transform:scaleX(1)}

/* ---------- approach ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);position:relative;padding-top:6px}
.steps::before{
  /* the grid line that ties the three bubbles together */
  content:"";position:absolute;left:22px;right:0;top:28px;height:1px;background:var(--line-2);transform-origin:left;
}
.phase{position:relative}
.grid-bubble{
  position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--sky);background:var(--navy-900);
  font-family:var(--f-mono);font-weight:500;font-size:.9rem;color:var(--white);
}
.phase .h3{margin:26px 0 14px;color:var(--white)}
.phase p{color:var(--ice-2)}

.founder-band{
  margin-top:clamp(56px,7vw,96px);padding:clamp(26px,3.4vw,44px) clamp(24px,3.6vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  border:1px solid var(--line-2);background:linear-gradient(110deg,rgba(125,176,255,.10),rgba(125,176,255,0) 70%);
  position:relative;
}
.founder-q{font-family:var(--f-serif);font-weight:420;font-size:clamp(1.4rem,1rem + 1.3vw,2rem);line-height:1.2;max-width:24ch;color:var(--white)}

/* ---------- experience / stats ---------- */
.sec-exp{padding-top:0}
.exp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.exp-title{
  margin:20px 0 34px;font-family:var(--f-display);font-weight:600;font-size:var(--t-2xl);
  line-height:.92;text-transform:uppercase;color:var(--white);
}
.exp-title span{display:block}
.exp-title em{
  display:block;font-family:var(--f-serif);font-style:italic;font-weight:360;text-transform:none;
  color:var(--sky);letter-spacing:-.02em;font-size:1.02em;line-height:1.05;
}
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2);position:relative}
.stat{background:var(--navy-900);padding:clamp(24px,3vw,38px) clamp(20px,2.6vw,34px) clamp(26px,3vw,36px);display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:16px}
.stat dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ice-3)}
.stat dd{display:flex;flex-direction:column;gap:12px}
.fig{
  --fig:clamp(3.2rem,2rem + 4vw,5.6rem);
  display:flex;align-items:flex-start;gap:4px;
  font-family:var(--f-display);font-weight:500;font-size:var(--fig);line-height:.9;
  color:var(--white);font-variant-numeric:tabular-nums lining-nums;
}
.stat .plus{font-weight:300;color:var(--signal);font-size:.55em;line-height:1;margin-top:.08em}
/* a unit that belongs to the figure ($30M): full size, set tight to the number */
.stat .unit{margin-left:-4px}
/* a range ($250K–$1M) is wider than a single figure, so it's set as large as
   its own cell allows: full size where cells are wide, smaller where not */
.stat--range{container-type:inline-size}
.fig--range{align-items:flex-end;min-height:calc(var(--fig) * .9)}
.fig--range .range{
  display:flex;align-items:flex-start;gap:.045em;white-space:nowrap;
  font-size:calc(var(--fig) * .56);font-size:min(var(--fig),22cqi);
}
.fig--range .unit{margin-left:-.045em}
.fig--range .to{font-weight:300;color:var(--signal);margin:0 .03em;translate:0 -.13em}
/* dimension string under each figure */
.stat .measure{display:block;height:9px;position:relative;width:min(100%,9.5rem)}
.stat .measure::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line-3);transform-origin:left}
.stat .measure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(var(--line-3),var(--line-3)) left/1px 100% no-repeat,linear-gradient(var(--line-3),var(--line-3)) right/1px 100% no-repeat;
}
/* registration crosses at the board's corners */
.board::before{
  content:"";position:absolute;inset:-12px;pointer-events:none;--t:var(--line-3);
  background:
    linear-gradient(var(--t),var(--t)) 0 11px/23px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) 11px 0/1px 23px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 11px/23px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) calc(100% - 11px) 0/1px 23px no-repeat,
    linear-gradient(var(--t),var(--t)) 0 calc(100% - 11px)/23px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) 11px 100%/1px 23px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% calc(100% - 11px)/23px 1px no-repeat,
    linear-gradient(var(--t),var(--t)) calc(100% - 11px) 100%/1px 23px no-repeat;
}

/* ---------- portfolio ---------- */
.portfolio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.portfolio[data-cards="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.pcard{
  position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .3s var(--ease),translate .3s var(--ease),box-shadow .3s var(--ease);
}
.pcard:hover{border-color:var(--rule-2);translate:0 -3px;box-shadow:0 22px 44px -28px rgba(6,20,43,.35)}
.pcard-mark{height:148px;display:grid;place-items:center;padding:26px 28px;border-bottom:1px solid var(--rule);background-color:var(--white)}
.pcard-mark img{max-height:62px;max-width:78%;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.82;transition:filter .35s var(--ease),opacity .35s var(--ease)}
/* White logos (made to sit on dark backgrounds): the logo's shape is a mask,
   painted dark grey at rest like the other marks, and in the company's own
   finish on hover. */
.pcard-logo{
  position:relative;display:block;width:min(78%,calc(62px * var(--ar)),200px);aspect-ratio:var(--ar);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:#1e1e1e;opacity:.82;transition:opacity .35s var(--ease);
}
.pcard-logo::before{content:"";position:absolute;inset:0;background:#1e1e1e;transition:opacity .45s var(--ease)}
.pcard:hover .pcard-logo,.pcard:focus-within .pcard-logo{opacity:1}
.pcard:hover .pcard-logo::before,.pcard:focus-within .pcard-logo::before{opacity:0}
/* metal-red: polished red metal. The bands are placed for the Ultimate Bots
   wordmark, whose two lines sit at 1-39% and 60-98% of its height: each line
   gets a bright top, a dark horizon at mid-height and a lighter reflection
   below, with soft light and shade across. On hover a glint (the top layer,
   parked off to the left at rest) crosses the logo once. */
.pcard-mark--metal-red .pcard-logo{
  background:
    linear-gradient(104deg,rgba(255,236,238,0) 43%,rgba(255,236,238,.85) 48%,rgba(255,236,238,0) 53%) 100% 0/300% 100% no-repeat,
    linear-gradient(100deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 22%,rgba(255,255,255,.14) 38%,rgba(0,0,0,0) 52%,rgba(0,0,0,.16) 70%,rgba(255,255,255,.1) 86%,rgba(0,0,0,.12) 100%),
    linear-gradient(180deg,#ff6f7a 1%,#e8303c 10%,#c3141f 18%,#8f0b15 19.5%,#4d040a 20.5%,#6f0911 27%,#a8121c 34%,#d8323d 39%,
      #ff6f7a 60%,#e8303c 69%,#c3141f 77%,#8f0b15 78.5%,#4d040a 79.5%,#6f0911 86%,#a8121c 93%,#d8323d 98%);
}
.pcard:hover .pcard-mark--metal-red .pcard-logo,.pcard:focus-within .pcard-mark--metal-red .pcard-logo{background-position:0 0,0 0,0 0}
@media (prefers-reduced-motion:no-preference){
  .pcard:hover .pcard-mark--metal-red .pcard-logo,.pcard:focus-within .pcard-mark--metal-red .pcard-logo{
    transition:opacity .35s var(--ease),background-position 1.2s cubic-bezier(.4,.1,.4,1) .1s;
  }
}
.pcard-mark--tall{padding-block:18px}
.pcard-mark--tall img{max-height:104px}
.pcard:hover .pcard-mark img,.pcard:focus-within .pcard-mark img{filter:none;opacity:1}
.pcard-type{
  font-family:var(--f-display);font-weight:500;font-size:1.15rem;line-height:1.1;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;color:var(--ink-2);max-width:14ch;text-wrap:balance;
}
.pcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-sector{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink)}
/* every foot is as tall as one with a link, so the rules line up across a row */
.pcard-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:6px;min-height:60px}
.pcard-place{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pcard-name{font-family:var(--f-serif);font-weight:500;font-size:1.3rem;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.pcard-desc{font-size:.95rem;color:var(--ink-2);line-height:1.55;margin-bottom:8px}
.pcard-link{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 0;margin:-8px 0;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--signal-ink);
}
.pcard-link::after{content:"";position:absolute;inset:0}
.pcard-link:hover{text-decoration:underline;text-underline-offset:3px}
.pcard-link .arw{transition:translate .25s var(--ease)}
.pcard:hover .pcard-link .arw{translate:2px -2px}
.soon{margin-top:34px;padding-top:22px;border-top:1px dashed var(--rule-2);color:var(--ink-2);max-width:none}
.soon strong{color:var(--ink);font-weight:600}

/* ---------- two doors ---------- */
.doors-sec{background:var(--navy-950);padding-block:clamp(64px,8vw,120px)}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.door{
  display:flex;flex-direction:column;gap:14px;padding:clamp(30px,4vw,56px);background:var(--navy-950);
  transition:background-color .35s var(--ease);position:relative;
}
.door:hover{background:var(--navy-850)}
.door-title{font-family:var(--f-serif);font-weight:440;font-size:var(--t-xl);line-height:1.02;letter-spacing:-.018em;color:var(--white);margin-top:8px}
.door-text{color:var(--ice-2);max-width:38ch}
.door-go{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--ice)}
.door:hover .door-go{color:var(--signal)}
.door:hover .door-go .arw{translate:4px 0}
.door.is-soon:hover{background:var(--navy-950)}
.door.is-soon .door-go{color:var(--ice-3)}

/* ---------- about ---------- */
.intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(36px,6vw,96px);align-items:end}
.intro-big{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.8rem,1.1rem + 2.4vw,3.1rem);line-height:1.12;letter-spacing:-.018em;color:var(--ink)}
.intro-side{display:flex;flex-direction:column;gap:22px;align-items:flex-start;color:var(--ink-2)}

.group-label{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-family:var(--f-mono);font-weight:500;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.group-label::after{content:"";flex:1;height:1px;background:var(--rule)}
/* Each group is one row of the sheet: a rule across the page, the label in
   the first column, three portraits in the other three. Both rows share one
   four-column grid, so every portrait is the same size and lines up. */
.team-group{
  --team-gap:clamp(18px,2vw,28px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--team-gap);
  border-top:1px solid var(--rule-2);padding-top:clamp(18px,2vw,26px);
}
.team-group+.team-group{margin-top:clamp(56px,6vw,84px)}
.team-group .group-label{grid-column:1;align-self:start;margin:0}
.team-group .group-label::after{content:none}
.team{grid-column:2 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--team-gap)}
.member{display:flex;flex-direction:column}
.member-photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy-900);border-radius:var(--radius);
}
.member-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(1.02);transition:filter .5s var(--ease),scale .8s var(--ease-out)}
/* monotone: blacks become navy, whites stay white (so a white backdrop
   reads as white at rest too). Full colour on hover or focus. */
.member-photo::before,.member-photo::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .5s var(--ease)}
.member-photo::before{background:var(--navy-900);mix-blend-mode:lighten;z-index:1}
.member-photo::after{inset:0;background:none;z-index:2;box-shadow:inset 0 0 0 1px var(--rule)}
.member:hover .member-photo img,.member:focus-within .member-photo img{filter:none;scale:1.03}
.member:hover .member-photo::before,.member:focus-within .member-photo::before{opacity:0}
/* placeholder until a headshot arrives: light graph paper, so it sits
   comfortably next to portraits shot on white */
.member-photo--mono{display:grid;place-items:center;isolation:isolate;background:var(--paper)}
.member-photo--mono::before{
  mix-blend-mode:normal;background:
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(27,85,204,.07) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(27,85,204,.07) 23px 24px);
  z-index:-1;
}
.member:hover .member-photo--mono::before{opacity:1}
.monogram{
  font-family:var(--f-display);font-weight:300;font-size:clamp(3.4rem,2rem + 3vw,5rem);letter-spacing:.04em;color:var(--signal-ink);
}
.member-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding-top:16px}
.member-name{font-family:var(--f-serif);font-weight:500;font-size:1.28rem;line-height:1.15;color:var(--ink);letter-spacing:-.01em}
.team--leaders .member-name{font-size:clamp(1.4rem,1rem + .8vw,1.7rem)}
.member-title{grid-column:1;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.member-in{
  grid-column:2;grid-row:1 / span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule-2);color:var(--ink-2);transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.member-in svg{width:16px;height:16px}
.member-in:hover{background:var(--signal-ink);border-color:var(--signal-ink);color:var(--white)}

.cta-sec{padding-block:clamp(72px,9vw,128px)}
.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px 64px;align-items:end}
.cta .h2{margin-top:18px;color:var(--white)}
.cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px;color:var(--ice-2)}

/* ---------- careers ---------- */
.careers{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.careers-copy{position:sticky;top:calc(var(--head-h-solid) + 40px)}
.status{
  display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 14px;border:1px solid var(--rule-2);border-radius:999px;
  background:var(--white);font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 4px rgba(86,101,126,.15)}
.status-k{color:var(--ink-3)}
.status-v{color:var(--ink);font-weight:500}
.careers .h2{margin-top:26px;color:var(--ink)}
.prose{margin-top:24px;display:flex;flex-direction:column;gap:16px;color:var(--ink-2);max-width:48ch}
.prose a{color:var(--signal-ink);border-bottom:1px solid currentColor}

/* ---------- forms ---------- */
.form{color:var(--ink)}
.card-form,.pitch{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(24px,3.4vw,44px);box-shadow:0 30px 60px -44px rgba(6,20,43,.35)}
.form-title{font-family:var(--f-serif);font-weight:500;font-size:1.6rem;line-height:1.1;margin-bottom:24px;letter-spacing:-.01em}
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;min-width:0}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.fld label{font-size:.9rem;font-weight:600;color:var(--ink)}
.req{color:var(--signal-ink)}
.opt{font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-left:6px}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--rule-2);border-radius:var(--radius);
  background-color:var(--paper);color:var(--ink);font-size:1rem;line-height:1.4;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.fld textarea{resize:vertical;min-height:108px}
.fld input::placeholder,.fld textarea::placeholder{color:#7A879C}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--ink-3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--signal-ink);background-color:var(--white);box-shadow:0 0 0 3px rgba(27,85,204,.16)}
.fld select{
  appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233D4C64' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
.fld input.file{padding:10px;min-height:auto;background-color:var(--white);border-style:dashed;font-size:.9rem}
.fld input.file::file-selector-button{
  margin-right:14px;padding:9px 16px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);
  font:600 .85rem var(--f-sans);color:var(--ink);cursor:pointer;
}
.hint{font-size:.82rem;color:var(--ink-3)}
.fld.invalid input,.fld.invalid select,.fld.invalid textarea{border-color:#B42318;box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.err{font-size:.82rem;color:#B42318;font-weight:500}
.hp{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-actions{margin-top:8px}

/* the pitch form: four sheets, one at a time once JS takes over */
/* DOM order is intro, form, extras, so phones get to the form first; on wide
   screens intro and extras stack in the left column beside the form */
.pitch-wrap{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  grid-template-areas:"intro form" "extra form";grid-template-rows:auto 1fr;
  gap:28px clamp(36px,5vw,80px);align-items:start;
}
.pitch-intro{grid-area:intro;color:var(--ink-2);display:flex;flex-direction:column;gap:16px}
.pitch-intro .h2{color:var(--ink);font-size:clamp(2rem,1.4rem + 2vw,2.9rem);margin-bottom:6px}
.pitch{grid-area:form}
.pitch-extra{grid-area:extra;color:var(--ink-2);display:flex;flex-direction:column;gap:16px}
.aside-k{margin-top:6px;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.looking{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.looking li{padding:12px 0;border-bottom:1px solid var(--rule);font-family:var(--f-serif);font-size:1.2rem;color:var(--ink);display:flex;align-items:center;gap:12px}
.looking li::before{content:"";width:7px;height:7px;border:1px solid var(--signal-ink);rotate:45deg;flex:none}
.aside-alt a{color:var(--signal-ink);border-bottom:1px solid currentColor;font-weight:600}

.pitch{position:relative}
.stepper{display:none}
.step{border:0;min-width:0}
.step+.step{margin-top:34px;padding-top:34px;border-top:1px solid var(--rule)}
.step legend{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;padding:0;
  font-family:var(--f-serif);font-weight:500;font-size:1.45rem;line-height:1.15;letter-spacing:-.01em;color:var(--ink);
}
.sb{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--rule-2);font-family:var(--f-mono);font-size:.8rem;font-weight:500;color:var(--ink-2);
}
.step legend .sb{border-color:var(--signal-ink);color:var(--signal-ink)}
.step-nav{display:none}
.step-nav--final{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}
.step-nav--final [data-prev]{display:none}
.autosave-note{margin-top:18px;font-size:.82rem;color:var(--ink-3)}

.pitch.is-stepped .stepper{
  display:flex;justify-content:space-between;margin:-4px 0 34px;padding-bottom:30px;position:relative;
}
.pitch.is-stepped .stepper::before{content:"";position:absolute;left:17px;right:17px;top:17px;height:1px;background:var(--rule)}
.pitch.is-stepped .stepper::after{
  content:"";position:absolute;left:17px;top:17px;height:1px;background:var(--signal-ink);
  width:calc((100% - 34px) * var(--p,0));transition:width .5s var(--ease-out);
}
/* fixed-width marks so the four bubbles sit at exactly 0, 1/3, 2/3 and 1 of
   the track, which is where the progress line stops */
.stepper li{position:relative;z-index:1;width:34px;flex:none}
.stepper .sl{position:absolute;top:44px;left:50%;translate:-50% 0;white-space:nowrap}
.stepper li:first-child .sl{left:0;translate:none}
.stepper li:last-child .sl{left:auto;right:0;translate:none}
.stepper .sb{background:var(--white);transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.stepper .sl{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stepper li.done .sb{background:var(--signal-ink);border-color:var(--signal-ink);color:var(--white)}
.stepper li.now .sb{border-color:var(--signal-ink);color:var(--signal-ink);box-shadow:0 0 0 4px rgba(27,85,204,.12)}
.stepper li.now .sl,.stepper li.done .sl{color:var(--ink)}
.pitch.is-stepped .step{display:none}
.pitch.is-stepped .step.now{display:block;animation:step-in .45s var(--ease-out) both}
.pitch.is-stepped .step+.step{margin-top:0;padding-top:0;border-top:0}
.pitch.is-stepped .step legend .sb{display:none}
.pitch.is-stepped .step-nav{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:24px;border-top:1px solid var(--rule)}
.pitch.is-stepped .step[data-step="1"] .step-nav{justify-content:flex-end}
.pitch.is-stepped .step-nav--final [data-prev]{display:inline-flex}
@keyframes step-in{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}

/* ---------- end cards (thanks, 404) ---------- */
.endcard{position:relative;min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:calc(var(--head-h) + 40px) 0 clamp(56px,9vh,110px)}
.endcard-media{position:absolute;inset:0;z-index:-2}
.endcard-media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.endcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,var(--navy-900) 15%,rgba(2,19,43,.6) 55%,rgba(2,19,43,.25)),linear-gradient(0deg,var(--navy-900),rgba(2,19,43,0) 50%)}
.endcard .page-title{max-width:16ch}
.sheet-index{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line)}
.sheet-index a{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-2);display:inline-flex;gap:10px;padding:6px 0}
.sheet-index a span{color:var(--ice-3)}
.sheet-index a:hover{color:var(--signal)}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-950);color:var(--ice-2);padding:clamp(64px,8vw,104px) 0 calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:52px;border-bottom:1px solid var(--line)}
.foot-logo{height:74px;width:auto;margin-bottom:22px}
.foot-brand p{max-width:30ch;font-size:.95rem;color:var(--ice-3)}
.foot-h{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin-bottom:16px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-col a,.foot-col address{font-size:.95rem;color:var(--ice-2);padding:5px 0;line-height:1.5;transition:color .2s var(--ease)}
.foot-col address a{padding:0}
.foot-col a:hover{color:var(--white)}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-top:26px}
.foot-bot p,.to-top{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ice-3)}
.to-top{padding:8px 0}
.to-top:hover{color:var(--ice)}

/* ==========================================================================
   MOTION: scroll-driven reveals (CSS only; no observer to wait on)
   ========================================================================== */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rv-in linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
    .steps::before{animation:draw-x linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .stat .measure::before{animation:draw-x linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
  }
}
@keyframes rv-in{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes draw-x{from{scale:0 1}to{scale:1 1}}

/* page-to-page: the header stays put, the title and the drawing morph */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--ease)}
::view-transition-group(city),::view-transition-group(page-title){animation-duration:.7s;animation-timing-function:var(--ease-out)}
::view-transition-image-pair(city){isolation:isolate}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .titleblock{width:270px}
  .portfolio[data-cards="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--head-h:84px}
  .nav{display:none}
  .burger{display:flex}
  .brand-logo{height:54px}
  .strategy,.exp,.intro,.careers,.pitch-wrap,.cta,.phero-in{grid-template-columns:minmax(0,1fr)}
  .strategy .sec-head,.careers-copy{position:static}
  .pitch-wrap{grid-template-areas:"intro" "form" "extra";grid-template-rows:auto}
  .sec-head--split{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr);gap:40px}
  .steps::before{left:22px;right:auto;top:28px;bottom:30px;width:1px;height:auto;transform-origin:top}
  .phase{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:22px}
  .phase .grid-bubble{grid-row:1 / span 2}
  .phase .h3{margin:8px 0 10px}
  /* one company per row: logo panel left, details right */
  .portfolio,.portfolio[data-cards]{grid-template-columns:minmax(0,1fr);gap:14px}
  .pcard{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .pcard-mark{height:auto;min-height:190px;border-bottom:0;border-right:1px solid var(--rule)}
  /* the label goes back above its row, ruled out to the edge */
  .team-group{display:block;border-top:0;padding-top:0}
  .team-group .group-label{margin:0 0 22px}
  .team-group .group-label::after{content:""}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .titleblock,.callout,.dim{display:none}
  .detail{max-width:640px}
  .phero-lede{max-width:32ch}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .steps::before{animation-name:draw-y}
    }
  }
}
@media (max-width:640px){
  :root{--head-h:74px;--head-h-solid:62px}
  .brand-logo{height:46px}
  .site-head.solid .brand-logo{height:36px}
  .hero{--hero-h:clamp(600px,100svh,900px)}
  .hero-scrim{
    background:linear-gradient(180deg,rgba(1,13,31,.7) 0%,rgba(1,13,31,0) 18%,rgba(2,19,43,.12) 34%,rgba(2,19,43,.72) 50%,rgba(2,19,43,.92) 66%,var(--navy-900) 100%);
  }
  .hero-cta .btn{flex:1 1 auto}
  .pillar{grid-template-columns:minmax(0,1fr)}
  .pcard{display:flex}
  .pcard-mark{height:128px;min-height:0;border-right:0;border-bottom:1px solid var(--rule)}
  .pcard-mark--tall img{max-height:90px}
  .doors{grid-template-columns:minmax(0,1fr)}
  .fld-2{grid-template-columns:minmax(0,1fr)}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig{--fig:clamp(2.6rem,12vw,3.4rem)}
  /* phones: one person per line, portrait left, name on a ruled baseline */
  .team{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .member{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);column-gap:16px;align-items:end}
  .member-info{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 0 14px;border-bottom:1px solid var(--rule-2)}
  .member-in{margin-top:8px}
  .member-name{font-size:1.2rem}
  .team--leaders .member-name{font-size:1.4rem}
  .member-title{font-size:10.5px}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .stepper .sl{display:none}
  .pitch.is-stepped .stepper{margin-bottom:26px;padding-bottom:0}
  .step-nav .btn{flex:1 1 0;padding:0 16px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero-tilt{transform:none !important}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}