/* ============ FONT: Geist (self-referenced via Fontsource CDN) ============ */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:200;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-200-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-100-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:italic;font-weight:200;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-200-italic.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:italic;font-weight:300;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:italic;font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-400-italic.woff2) format('woff2')}

/* ============ TOKENS ============ */
:root{
  --paper:#F7F7F5;      /* paper white ground */
  --panel:#FFFFFF;      /* pure white cards */
  --white:#FFFFFF;
  --ink:#15171C;        /* near-black */
  --ink-2:#565A63;      /* secondary text */
  --muted:#6B7079;      /* mono labels / tertiary */
  --line:#E6E6E2;       /* hairline */
  --line-2:#D3D4CF;     /* stronger hairline */
  --shadow:none;

  /* accent (shown on hover / active). Change this ONE value to recolor. */
  --accent:#2E5BFF;       /* electric cobalt */
  --accent-ink:#FFFFFF;   /* text on accent */

  /* canvas palette (read by app.js) */
  --c-line:rgba(21,23,28,.13);
  --c-fill:#2E5BFF;       /* scanned / active unit fill = accent */
  --c-fills:#C2255C,#9C36B5,#6741D9,#3B5BDB,#0CA678,#099268,#E67700,#A61E4D;  /* multi-color scan */
  --c-text:#FFFFFF;

  --maxw:1180px;
  --pad:clamp(20px,5vw,60px);
  --sect:clamp(72px,10vw,140px);

  --f-display:"Geist",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D0E11; --panel:#15171C; --white:#1B1E24;
    --ink:#F3F3F1; --ink-2:#B7BBC3; --muted:#7C818B;
    --line:#24262B; --line-2:#33363C;
    --shadow:none;
    --accent:#5C7CFF; --accent-ink:#0D0E11;
    --c-line:rgba(243,243,241,.13); --c-fill:#5C7CFF; --c-fills:#22D3EE,#38BDF8,#818CF8,#A78BFA,#E879F9,#F472B6,#FB7185,#34D399; --c-text:#0D0E11;
  }
}
:root[data-theme="light"]{
  --paper:#F7F7F5; --panel:#FFFFFF; --white:#FFFFFF;
  --ink:#15171C; --ink-2:#565A63; --muted:#6B7079;
  --line:#E6E6E2; --line-2:#D3D4CF;
  --shadow:none;
  --accent:#2E5BFF; --accent-ink:#FFFFFF;
  --c-line:rgba(21,23,28,.13); --c-fill:#2E5BFF; --c-fills:#C2255C,#9C36B5,#6741D9,#3B5BDB,#0CA678,#099268,#E67700,#A61E4D; --c-text:#FFFFFF;
}
:root[data-theme="dark"]{
  --paper:#0D0E11; --panel:#15171C; --white:#1B1E24;
  --ink:#F3F3F1; --ink-2:#B7BBC3; --muted:#7C818B;
  --line:#24262B; --line-2:#33363C;
  --shadow:none;
  --accent:#5C7CFF; --accent-ink:#0D0E11;
  --c-line:rgba(243,243,241,.13); --c-fill:#5C7CFF; --c-fills:#22D3EE,#38BDF8,#818CF8,#A78BFA,#E879F9,#F472B6,#FB7185,#34D399; --c-text:#0D0E11;
}

/* ---- near-white + bright blue palette (overrides every theme) ---- */
:root, :root[data-theme="light"], :root[data-theme="dark"]{
  /* paper sits on the same warm axis as --sand now, so the cream sections read as a
     deeper shade of one material rather than a different one. ink takes a slight blue
     cast to tie the dark bands to the navy accent. */
  --paper:#F7F4EE; --panel:#FDFBF6; --white:#FFFFFF;
  --ink:#0B0C12; --ink-2:#43454E; --muted:#6B6C75;
  --line:#E7E3DA; --line-2:#DAD5CA;
  --sand:#F9F4E6; --sand-2:#E7DEC9; --sand-line:#EDE5D3;  /* light cream surface */
  --warm:#C0794E;                                        /* terracotta warm accent, used sparingly */
  --sage:#3C7A63;                                        /* muted green accent */
  --gold:#B8892C;                                        /* ochre / gold accent */
  --shadow:none;
  --accent:#2A2E80; --accent-ink:#FFFFFF;
  --c-line:rgba(11,11,12,.14); --c-fill:#2A2E80;
  --c-bldg:#2B307E; --c-hover:#FF9E2C;
  --c-fills:#3E6BFF,#2F6BFF,#5B7CF5,#3D6BFF,#2E63F0,#4F7BFF;
  --c-text:#FFFFFF;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0; display:none}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* subtle film grain across the whole page for a textured, professional finish */
body::after{content:""; position:fixed; inset:0; z-index:70; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px; opacity:.045; mix-blend-mode:multiply}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.hero .wrap{max-width:none; padding-inline:clamp(10px,1.2vw,20px)}
nav .wrap{max-width:none; padding-inline:clamp(20px,2.4vw,38px)}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:700;
  letter-spacing:-.02em; text-wrap:balance; line-height:1.02}
p{margin:0}
::selection{background:var(--ink); color:var(--paper)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}

.mono{font-family:var(--f-mono); text-transform:uppercase;
  letter-spacing:.16em; font-size:.7rem; color:var(--muted); font-weight:500}
.num{font-variant-numeric:tabular-nums}

/* ============ NAV ============ */
/* logo stays pinned top-left over the hero; the full bar reveals on scroll */
nav{position:fixed; top:0; left:0; right:0; z-index:40; pointer-events:none;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease}
nav .brand{pointer-events:auto; margin-left:10px}
.nav-links, .nav-right{opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease}
nav.show{background:color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter:blur(12px) saturate(1.15); -webkit-backdrop-filter:blur(12px) saturate(1.15);
  border-bottom-color:var(--line)}
nav.show .nav-links, nav.show .nav-right{opacity:1; transform:none; pointer-events:auto}

/* nav flips to light type whenever a dark section is under the bar */
nav.on-dark .brand{color:#F6F6F3}
nav.on-dark .brand .logo-mark{filter:brightness(0) invert(1)}
nav.on-dark .nav-links a{color:rgba(246,246,243,.74)}
nav.on-dark .nav-links a:hover{color:#F6F6F3}
nav.on-dark .loc{color:rgba(246,246,243,.62)}
nav.on-dark .loc b{color:#F6F6F3}
nav.show.on-dark{background:color-mix(in srgb, #0B0B0C 78%, transparent);
  border-bottom-color:rgba(246,246,243,.14)}

/* skip-to-content link for keyboard / screen-reader users */
.skip{position:fixed; left:14px; top:-64px; z-index:60; background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:4px; font-family:var(--f-body); font-size:.85rem; font-weight:600;
  transition:top .2s ease}
.skip:focus{top:14px}
.nav-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; height:82px}
.brand{font-family:var(--f-body); font-weight:700; letter-spacing:.2em;
  font-size:1.02rem; display:flex; align-items:center; gap:9px}
.brand .logo-mark{height:24px; width:auto; display:block; filter:brightness(0)}
.nav-in .logo-mark{height:44px}
.nav-links{display:flex; gap:26px; justify-content:center}
.nav-right{display:flex; align-items:center; justify-content:flex-end}
.nav-cta{padding-block:9px}
.nav-links a{font-size:.9rem; color:var(--ink-2); transition:color .2s}
.nav-links a:hover{color:var(--accent)}

.btn{font-family:var(--f-body); font-size:.9rem; font-weight:600;
  padding:11px 20px; border-radius:2px; cursor:pointer; border:1px solid var(--ink);
  display:inline-flex; align-items:center; gap:9px; transition:transform .18s ease, background .2s, color .2s, box-shadow .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
/* clear glass button with a mild iridescent edge */
.btn-solid{background:var(--ink); color:var(--paper); border:1px solid var(--ink)}
.btn-solid:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
/* ghost button on dark sections: light text + visible hairline border */
.dark-band .btn-ghost{color:#F3F5FB; border-color:rgba(255,255,255,.34)}
.dark-band .btn-ghost:hover{background:#fff; border-color:#fff; color:var(--ink)}
/* on a dark band the glass fill has nothing bright behind it, so the iridescence sits on solid white */
nav.on-dark .btn-solid,
.dark-band .btn-solid{background:var(--paper); color:var(--ink); border-color:var(--paper)}
nav.on-dark .btn-solid:hover,
.dark-band .btn-solid:hover{background:#FFFFFF; border-color:#FFFFFF}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}

/* ============ HERO ============ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden;
  /* night sky: deepest overhead, warming very slightly toward the horizon */
  background:
    radial-gradient(120% 85% at 50% 108%, rgba(90,74,150,.30), transparent 62%),
    linear-gradient(#05060C 0%, #0A0B16 44%, #14142400 100%), #0B0C12}
.hero-stars{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero-stars circle{fill:#EDEBFF}
.hero .head, .hero .head .hw, .hero .head .thin{color:#F3F5FB}
.hero .sub{color:rgba(243,245,251,.62)}
.hero .eyebrow .rule{background:rgba(243,245,251,.24)}
.hero .yc-badge{color:rgba(243,245,251,.72)}
/* atmospheric background: soft light bloom + faint grid behind the skyline */
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.hero-bg::before{content:""; position:absolute; left:58%; top:34%; width:min(1200px,92vw); height:820px;
  transform:translate(-50%,-50%);
  background:radial-gradient(46% 46% at 50% 50%, rgba(150,120,240,.16), rgba(90,80,170,.08) 46%, transparent 72%);
  filter:blur(26px)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(200,210,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,210,255,.045) 1px, transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(115% 92% at 58% 38%, #000 26%, transparent 76%);
  mask-image:radial-gradient(115% 92% at 58% 38%, #000 26%, transparent 76%)}
#plan{position:absolute; inset:0; width:100%; height:100%; z-index:1;
  display:block; touch-action:none}
.hero-scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  /* darkens the corner the copy sits in, leaving the sky clear top-right */
  background:
    linear-gradient(to top, #05060C 7%, rgba(5,6,12,.62) 27%, transparent 56%),
    linear-gradient(to right, rgba(5,6,12,.82) 0%, rgba(5,6,12,0) 48%)}
.hero-in{position:relative; z-index:3; flex:1; display:flex; flex-direction:column;
  align-items:flex-start; text-align:left; justify-content:flex-end; padding:80px 0 clamp(48px,7vh,96px)}
.hero-in .cta-row{justify-content:flex-start}
/* live layout switcher (bottom-right of hero) */
.lswitch{position:absolute; z-index:5; right:clamp(16px,3vw,40px); bottom:clamp(16px,4vh,40px);
  display:flex; gap:4px; padding:5px; border-radius:100px;
  background:rgba(255,255,255,.62); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid var(--line)}
.lswitch button{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 13px; border:0; border-radius:100px; background:transparent; color:var(--ink-2); cursor:pointer;
  transition:background .2s, color .2s}
.lswitch button:hover{color:var(--ink)}
.lswitch button.on{background:var(--ink); color:var(--paper)}
@media (max-width:720px){ .lswitch{right:12px; bottom:12px; flex-wrap:wrap; max-width:180px; justify-content:center} }
/* clean minimal hero search */
.hero-search{margin-top:32px; display:flex; align-items:center; gap:10px; width:min(460px,92vw);
  background:rgba(255,255,255,.92); border:1px solid var(--line-2); border-radius:14px; padding:6px 6px 6px 16px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s ease, box-shadow .2s ease}
.hero-search:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.hero-search .hs-ico{display:flex; color:var(--muted)}
.hero-search input{flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-family:var(--f-body); font-size:.98rem; color:var(--ink); padding:9px 0; letter-spacing:-.01em}
.hero-search input::placeholder{color:var(--muted)}
.hero-search button{flex-shrink:0; width:42px; height:42px; border:0; border-radius:10px; cursor:pointer;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, background .2s ease}
.hero-search button:hover{background:#2456e0; transform:translateY(-1px)}
.hero-search button .arw{font-size:1.1rem; line-height:1}
/* text stays hidden until the user has hovered the design (JS adds .revealed) */
@keyframes heroIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.hero-in > *{opacity:0}
.hero-in.revealed > *{animation:heroIn .7s cubic-bezier(.4,0,.2,1) forwards}
.hero-in.revealed > .eyebrow{animation-delay:0s}
.hero-in.revealed > h1.head{animation-delay:.15s}
.hero-in.revealed > .sub{animation-delay:.3s}
.hero-in.revealed > .cta-row{animation-delay:.45s}
.hero-in.revealed > .yc-badge{animation-delay:.6s}
@media (prefers-reduced-motion: reduce){ .hero-in > *{opacity:1} }
.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:26px}
.eyebrow .rule{height:1px; width:44px; background:var(--line-2)}
h1.head{font-size:clamp(2.2rem,5.4vw,4.6rem); font-weight:200; letter-spacing:-.03em; max-width:24ch; text-align:left; text-wrap:normal}
.head .line1{white-space:nowrap}
.head .thin{font-weight:200; font-style:italic; letter-spacing:-.02em}
.head .hw{font-weight:300}
.sub{margin-top:28px; max-width:46ch; font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--ink-2); line-height:1.55}
.cta-row{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.yc-badge{margin:0 0 22px; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.yc-badge b{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  background:#FF6600; color:#fff; font-family:var(--f-body); font-weight:800; font-size:.8rem; border-radius:3px; letter-spacing:0}
.scan-hint{margin-left:6px; display:inline-flex; align-items:center; gap:8px}
.scan-hint .blink{width:7px; height:7px; border-radius:50%; background:var(--ink);
  animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}


/* ============ SECTIONS ============ */
section{padding-block:var(--sect)}
.sec-head{display:flex; flex-direction:column; gap:18px; margin-bottom:56px; max-width:44ch}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:500; letter-spacing:-.03em; line-height:1.04}
/* #how leads with the headline alone, set wide enough to hold one line */

/* how it works */
#how{position:relative; overflow:hidden}
#how>.wrap{position:relative; z-index:1}
/* process: centred statement over a row of image cards, on a dark band */
#how{background:
    radial-gradient(56% 44% at 13% -8%, rgba(178,150,244,.30), transparent 64%),
    radial-gradient(46% 40% at 93% 14%, rgba(178,150,244,.22), transparent 62%),
    radial-gradient(72% 48% at 50% 108%, rgba(178,150,244,.17), transparent 66%),
    var(--ink)}
.howx-head{max-width:none; margin:0 auto; text-align:center}
.howx-kick{display:block; font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(243,245,251,.48); margin-bottom:24px}
.howx-head h2{font-family:var(--f-display); font-size:clamp(2.05rem,4.1vw,3.4rem); font-weight:400;
  letter-spacing:-.02em; line-height:1.16; color:#F3F5FB; text-wrap:balance}
.howx-head p{margin:24px auto 0; max-width:58ch; font-size:clamp(1rem,1.12vw,1.1rem);
  line-height:1.6; color:rgba(243,245,251,.58)}

.howx-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px); margin-top:clamp(44px,5.5vw,78px)}
.howx-card{position:relative; overflow:hidden; border-radius:8px; aspect-ratio:4/5.4; isolation:isolate}
.howx-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.howx-card:hover img{transform:scale(1.045)}
.howx-card::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,9,12,.97) 0%, rgba(8,9,12,.78) 22%, rgba(8,9,12,.30) 44%, rgba(8,9,12,0) 62%)}
.howx-cap{position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:clamp(20px,2vw,30px); display:flex; flex-direction:column; gap:9px}
.howx-n{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(243,245,251,.75)}
.howx-cap b{font-family:var(--f-display); font-size:clamp(1.12rem,1.5vw,1.42rem); font-weight:500;
  letter-spacing:-.01em; color:#fff}
.howx-cap p{margin:0; font-size:.92rem; line-height:1.5; color:rgba(243,245,251,.68)}

/* featured spaces */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px}
.card{border:1px solid var(--line); background:var(--panel); padding:24px;
  display:flex; flex-direction:column; gap:14px; min-height:230px; cursor:pointer;
  transition:transform .22s ease, border-color .22s, background .22s, box-shadow .22s}
.card:hover{border-color:var(--accent)}
.card-top{display:flex; justify-content:space-between; align-items:center}
.tag{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 9px; border:1px solid var(--line-2); border-radius:2px; color:var(--ink-2)}
.tag.live{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.card .type{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.card .sqft{font-family:var(--f-display); font-weight:400; font-size:2.3rem;
  letter-spacing:-.04em; line-height:1}
.card .sqft small{font-size:.9rem; font-weight:400; color:var(--muted); letter-spacing:0}
.card .addr{font-size:1rem; color:var(--ink); font-weight:500}
.card .grow{flex:1}
.card-bot{display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line); padding-top:14px}
.card .price{font-family:var(--f-display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em}
.card .price small{font-size:.72rem; color:var(--muted); font-weight:500}
.card .go{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink);
  transition:transform .2s}
.card:hover .go{transform:translateX(4px); color:var(--accent)}

/* free-for-tenants band (the one bold moment) */
.band{background:var(--ink); color:var(--paper)}
.band .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.band h2{font-family:var(--f-display); font-weight:500; letter-spacing:-.035em;
  font-size:clamp(2.2rem,5vw,4rem); line-height:1.0}
.band .free-sub{color:color-mix(in srgb,var(--paper) 72%, transparent); font-size:1.05rem; max-width:40ch}
.fee{display:flex; flex-direction:column; gap:1px; background:color-mix(in srgb,var(--paper) 16%, transparent)}
.fee-row{display:flex; justify-content:space-between; padding:18px 22px;
  background:var(--ink); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase}
.fee-row span:first-child{color:color-mix(in srgb,var(--paper) 60%, transparent)}
.fee-row b{font-weight:600}
.fee-row.pay b{color:var(--paper)}

/* markets */
/* ===== coverage: centred statement, the drawing as the hero, metros as a footing row ===== */
.mk-head{text-align:center; margin:0 auto}
.mk-kick{display:block; font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:24px}
.mk-head h2{font-family:var(--f-display); font-size:clamp(2.05rem,4.1vw,3.4rem); font-weight:400;
  letter-spacing:-.02em; line-height:1.16; color:var(--ink); text-wrap:balance}
.mk-head p{margin:24px auto 0; max-width:54ch; font-size:clamp(1rem,1.12vw,1.1rem);
  line-height:1.6; color:var(--ink-2)}

.coverage{display:block}

/* metros read as a footing under the drawing, one column each */
.metros{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-2); margin-top:clamp(28px,3.6vw,48px)}
.metro{display:flex; flex-direction:column; gap:11px; text-decoration:none; color:var(--ink);
  padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,24px) 4px;
  border-left:1px solid var(--line); transition:background .3s ease}
.metro:first-child{border-left:0}
.metro:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.m-name{font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); transition:color .25s ease}
.metro:hover .m-name{color:var(--accent)}
.m-val{display:flex; align-items:baseline; gap:7px; line-height:1}
.m-val b{font-family:var(--f-display); font-weight:300; line-height:.9;
  font-size:clamp(1.85rem,2.8vw,2.55rem); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.m-val em{font-style:normal; font-size:.44em; color:var(--muted); margin-left:.04em}
.m-val i{font-style:normal; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.m-sub{font-style:normal; font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.metro-foot{display:flex; justify-content:space-between; gap:16px; margin:20px 2px 0;
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* the drawing: hairline geometry, dot-matrix land, metro marks sized by square footage */
.ca-map{margin:clamp(26px,3.4vw,46px) auto 0; width:min(620px,100%); position:relative;
  display:flex; justify-content:center; align-items:center}
.ca-map svg{width:100%; height:auto; overflow:visible}
.ca-land, .ca-isle{fill:color-mix(in srgb, var(--accent) 12%, var(--paper))}
.ca-outline{fill:none; stroke:var(--accent); stroke-opacity:.30; stroke-width:.7; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:990; stroke-dashoffset:0}
.coverage:not(.in) .ca-outline{stroke-dashoffset:990}
.coverage.in .ca-outline{transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1)}

.ca-pin{color:var(--accent); transition:color .25s ease}
.ca-halo{fill:url(#ca-reach)}
.ca-city{fill:currentColor; stroke:var(--paper); stroke-width:1.3; paint-order:stroke}
.ca-lbl{font-family:var(--f-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  fill:var(--ink)}
/* hovering a ledger row lights its mark on the drawing, and the reverse */
.coverage:has(.metro[data-m="sf"]:hover)  .ca-pin[data-pin="sf"],
.coverage:has(.metro[data-m="la"]:hover)  .ca-pin[data-pin="la"],
.coverage:has(.metro[data-m="sd"]:hover)  .ca-pin[data-pin="sd"],
.coverage:has(.metro[data-m="sac"]:hover) .ca-pin[data-pin="sac"],
.ca-pin:hover{color:var(--warm)}


@media (prefers-reduced-motion: reduce){ .coverage:not(.in) .ca-outline{stroke-dashoffset:0} }
@media (max-width:860px){
  .coverage{grid-template-columns:1fr; gap:44px}
  .ca-map svg{max-height:470px}
}


/* ===== animated auras ===== */
.aura{position:absolute; border-radius:50%; filter:blur(74px); pointer-events:none; z-index:0; opacity:.7;
  animation:auraDrift 15s ease-in-out infinite; animation-play-state:paused}
/* only the section in view pays for its blurred layers */
.in-view .aura{animation-play-state:running; will-change:transform}
.aura.blue{background:radial-gradient(circle, rgba(54,60,170,.52), transparent 66%)}
.aura.indigo{background:radial-gradient(circle, rgba(78,58,180,.46), transparent 66%)}
.aura.teal{background:radial-gradient(circle, rgba(48,72,190,.42), transparent 66%)}
.aura.warm{background:radial-gradient(circle, rgba(214,148,88,.42), transparent 68%)}
.aura.gold{background:radial-gradient(circle, rgba(224,176,96,.40), transparent 68%)}
.aura.clay{background:radial-gradient(circle, rgba(196,112,74,.34), transparent 68%)}
.aura.sage{background:radial-gradient(circle, rgba(70,132,104,.34), transparent 68%)}
.aura.lilac{background:radial-gradient(circle, rgba(178,150,244,.46), transparent 66%)}
@keyframes auraDrift{0%{transform:translate(0,0) scale(1)} 50%{transform:translate(34px,-28px) scale(1.16)} 100%{transform:translate(0,0) scale(1)}}

/* ===== warm beige surfaces: adds color + cool/warm rhythm between the dark bands ===== */
#spaces{background:var(--sand); --line:var(--sand-line); --line-2:var(--sand-2)}
#spaces{position:relative; overflow:hidden}
#spaces > .wrap{position:relative; z-index:1}
/* warm the eyebrow labels only inside beige sections for a subtle pop of color */
#spaces .sec-head .mono{color:var(--warm)}
.hero .aura{z-index:2; opacity:.55}
@media (prefers-reduced-motion: reduce){ .aura{animation:none} }



/* ===== cursor-tracking aura glow on cards ===== */
.card{position:relative}
.card::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; z-index:0;
  transition:opacity .35s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(58,62,175,.26), transparent 60%)}
.card:hover::after{opacity:1}
/* step hover glow follows each step's own colour */
.card>*{position:relative; z-index:1}
.card{overflow:hidden}

/* ===== space-card photos ===== */
.card-img{width:100%; height:172px; object-fit:cover; border-radius:9px; display:block; margin-bottom:16px;
  background:var(--panel); border:1px solid var(--line)}

/* ===== image gallery (space types) ===== */
.gal-sec{padding-block:var(--sect)}
.gal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px)}
.gal{position:relative; border-radius:15px; overflow:hidden; aspect-ratio:4/3; background:var(--panel); border:1px solid var(--line)}
.gal img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.gal{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.gal:hover img{transform:scale(1.07)}
.gal-cap{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; z-index:1;
  background:linear-gradient(to top, rgba(8,10,18,.8), rgba(8,10,18,.12) 46%, transparent)}
.gal-cap h4{color:#fff; font-family:var(--f-display); font-weight:500; font-size:1.18rem; letter-spacing:-.01em}
.gal-cap p{color:rgba(255,255,255,.8); font-size:.86rem; margin-top:4px}
@media (max-width:860px){ .gal-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .gal-grid{grid-template-columns:1fr} }

/* ===== dark sections: flat black, hard edges ===== */
.dark-band{position:relative; background:var(--ink)}
.dark-band .mono{color:#8EA0FF}
.dark-band .aura{opacity:.45; mix-blend-mode:screen; filter:blur(80px)}

/* ===== card carousel with arrows ===== */
.cards-carousel{position:relative}
.cards-track{display:flex; gap:20px; overflow-x:auto;
  padding:8px 2px 4px; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent); mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.cards-track::-webkit-scrollbar{display:none}
.cards-track .card{width:min(340px,80vw); flex-shrink:0}
.cx-arrow{position:absolute; top:calc(50% + 4px); transform:translateY(-50%); z-index:4; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:transform .2s ease, background .2s ease}
.cx-arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cx-arrow:hover{background:#fff; transform:translateY(-50%) scale(1.08)}
.cx-arrow.prev{left:-8px} .cx-arrow.next{right:-8px}
@media (max-width:600px){ .cx-arrow{display:none} .cards-track{scroll-snap-type:x mandatory} }

/* dark closer */
.closer.dark-band, .dark-band .closer{color:#EEF0F6}
.dark-band .closer h2{color:#F3F5FB}
.dark-band .closer .sub{color:rgba(238,240,246,.68)}
.dark-band .closer .mono{color:#8EA0FF}

/* dark-band text on the black areas */
.dark-band h2{color:#F3F5FB}
.dark-band .sec-head .mono ~ p{color:rgba(238,240,246,.7)}

/* ===== animated lease demo ===== */
.demo-stage{margin-top:clamp(30px,5vw,56px); display:flex; justify-content:center}
.demo-app{width:min(620px,100%); background:#12141F; border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.demo-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02)}
.demo-bar .demo-dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16)}
.demo-url{margin-left:12px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.4)}
.demo-body{padding:clamp(18px,2.4vw,30px)}
.demo-field{display:flex; align-items:center; gap:12px; padding:15px 18px; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  background:rgba(255,255,255,.04); color:#E8EAF4; font-family:var(--f-display); font-weight:400; font-size:clamp(1rem,1.6vw,1.3rem); min-height:28px}
.demo-si{width:20px; height:20px; color:#8EA0FF; flex-shrink:0}
.demo-caret{width:2px; height:1.1em; background:#8EA0FF; display:inline-block; animation:caret 1.05s steps(1) infinite}
.demo-status{display:flex; align-items:center; gap:10px; margin-top:16px; color:rgba(232,234,244,.6); font-size:.92rem;
  opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s}
.demo-app.matching .demo-status{opacity:1; transform:none}
.demo-app.results .demo-status-t::after{content:" · 3 matches found"; color:#8EA0FF}
.demo-spin{width:15px; height:15px; border-radius:50%; border:2px solid rgba(142,160,255,.3); border-top-color:#8EA0FF; animation:spin .8s linear infinite}
.demo-app.results .demo-spin{border-color:#6BE39A; border-top-color:#6BE39A; animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-list{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.demo-item{display:flex; align-items:center; gap:14px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:12px;
  background:rgba(255,255,255,.03); opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.demo-app.results .demo-item{opacity:1; transform:none}
.demo-app.results .demo-item:nth-child(2){transition-delay:.12s}
.demo-app.results .demo-item:nth-child(3){transition-delay:.24s}
.demo-thumb{width:50px; height:46px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,#2A2E80,#4A2E80); border:1px solid rgba(255,255,255,.1)}
.demo-meta{flex:1; min-width:0}
.demo-meta b{display:block; color:#EEF0F8; font-weight:500; font-size:.98rem}
.demo-meta span{color:rgba(232,234,244,.5); font-size:.82rem}
.demo-score{text-align:right; flex-shrink:0}
.demo-score .ds-num{color:#8EA0FF; font-family:var(--f-display); font-weight:400; font-size:1.5rem; letter-spacing:-.02em}
.demo-score small{color:rgba(232,234,244,.45); font-size:.7rem; display:block}
.demo-toast{margin-top:16px; display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:100px;
  background:rgba(107,227,154,.12); border:1px solid rgba(107,227,154,.4); color:#BDF3D2; font-size:.92rem;
  opacity:0; transform:translateY(10px); transition:opacity .4s, transform .4s}
.demo-app.booked .demo-toast{opacity:1; transform:none}
.demo-check{color:#6BE39A}
@media (prefers-reduced-motion: reduce){ .demo-caret,.demo-spin{animation:none} }

/* cta closer */
.closer{text-align:center; display:flex; flex-direction:column; align-items:center; gap:30px}
.closer h2{font-size:clamp(1.9rem,4.6vw,3.4rem); font-weight:500; letter-spacing:-.03em; max-width:20ch; line-height:1.05}
.closer .cta-row{justify-content:center}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line); background:var(--panel); padding-block:64px 40px}
.foot-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; margin-bottom:56px}
.foot-brand .brand{margin-bottom:20px}
.foot-brand .logo-mark{height:42px}
.foot-brand p{color:var(--ink-2); font-size:.92rem; max-width:30ch}
.foot-col h4{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 18px; font-weight:600}
.foot-col a{display:block; font-size:.92rem; color:var(--ink-2); padding:5px 0; transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-bot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  border-top:1px solid var(--line); padding-top:26px}
.foot-bot .mono{font-size:.66rem}

/* ============ REVEAL ============ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ============ SOCIAL PROOF ============ */
/* each credential is staked out like a lot on a site plan: dashed boundary, survey mark
   in the corner, sitting on the same faint grid the plan drawings use. Two labelled
   groups, because an investor and a former employer are different claims. */
.proof{position:relative; padding-block:clamp(70px,8.6vw,126px); background:var(--sand);
  --line:var(--sand-line); --line-2:var(--sand-2)}
.proof::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--sand-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--sand-line) 1px, transparent 1px);
  background-size:58px 58px; opacity:.6;
  -webkit-mask-image:radial-gradient(115% 80% at 50% 50%, #000 35%, transparent 78%);
  mask-image:radial-gradient(115% 80% at 50% 50%, #000 35%, transparent 78%)}
.proof .wrap{position:relative; z-index:1}
.proof-kick{display:block; font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.proof-h{font-family:var(--f-display); font-size:clamp(1.6rem,2.9vw,2.45rem); font-weight:400;
  letter-spacing:-.025em; line-height:1.2; color:var(--ink); margin:22px 0 0; max-width:100%}
.proof-groups{display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,4.4vw,72px);
  align-items:start; margin-top:clamp(40px,4.8vw,68px)}
.proof-lab{display:block; font-family:var(--f-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.proof-marks{list-style:none; display:flex; flex-wrap:wrap; gap:clamp(12px,1.6vw,20px); margin:0; padding:0}
.proof-g:last-child .proof-marks{flex-wrap:nowrap}
.proof-g:last-child .lot{flex:1 1 0; min-width:0}

/* the lot */
.lot{position:relative; display:flex; align-items:center; justify-content:center;
  min-width:clamp(132px,15.5vw,204px); padding:clamp(28px,3.4vw,46px) clamp(20px,2.4vw,34px);
  border:1px dashed var(--sand-2); background:color-mix(in srgb, var(--paper) 55%, transparent);
  transition:border-color .3s ease, background .3s ease}
.lot:hover{border-color:var(--accent); background:color-mix(in srgb, var(--paper) 90%, transparent)}
/* survey mark, top-left corner */
.lot::before{content:""; position:absolute; top:-3px; left:-3px; width:6px; height:6px;
  background:var(--sand-2); transition:background .3s ease}
.lot:hover::before{background:var(--accent)}
.lot-n{position:absolute; top:7px; right:9px; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.12em; color:var(--muted); opacity:.7}
.lot img{width:auto; max-width:100%; display:block; filter:grayscale(1); opacity:.74;
  transition:filter .3s ease, opacity .3s ease}
.lot:hover img{filter:none; opacity:1}
.lot span{font-family:var(--f-display); font-weight:500; font-size:clamp(.95rem,1.3vw,1.1rem);
  color:var(--ink-2); white-space:nowrap}
/* each mark has its own padding and aspect ratio, so each gets its own height */
.lot .m-yc{height:clamp(34px,3.8vw,48px)}
.lot .m-amz{height:clamp(32px,3.5vw,44px)}
.lot .m-mat{height:clamp(17px,1.9vw,24px)}
.lot .m-lee{height:clamp(37px,4vw,52px)}
.lot .m-mm{height:clamp(20px,2.1vw,28px)}

/* ============ CAPABILITY ============ */
.cap{padding-block:clamp(58px,7.5vw,104px)}
.cap-kick{display:block; font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.cap-h{font-family:var(--f-display); font-size:clamp(2.3rem,4.6vw,4rem); font-weight:400;
  letter-spacing:-.032em; line-height:1.16; margin-top:26px; max-width:100%;
  --grad:linear-gradient(102deg, var(--accent) 0%, #5340B8 46%, #B296F4 100%);
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent}


.cap-lead{margin-top:18px; max-width:46ch; font-size:clamp(1rem,1.12vw,1.1rem);
  line-height:1.6; color:var(--ink-2)}

/* two numbers that are actually numbers, given room to land */
.cap-stats{display:flex; flex-wrap:wrap; gap:clamp(34px,7vw,110px);
  margin-top:clamp(38px,4.6vw,64px)}
.cap-stats b{display:block; font-variant-numeric:tabular-nums; font-family:var(--f-display); font-weight:300; letter-spacing:-.04em;
  line-height:1; font-size:clamp(2.4rem,4.4vw,3.9rem); color:var(--ink)}
.cap-stats span{display:block; margin-top:12px; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}

/* services read as a list, name left and what it means right */
/* the skyline: windows come on from the ground up as the figures count.
   pure CSS transitions with a per-cell delay, so there is no animation loop to pay for. */
.cap-sky{display:block; width:100%; height:auto; margin-top:clamp(34px,4.4vw,58px)}
.cap-sky .w{fill:var(--accent); opacity:.07;
  transition:opacity .55s ease var(--d,0ms), fill .55s ease var(--d,0ms)}
.cap-sky.lit .w{opacity:.5}
.cap-sky.lit .w:nth-child(3n){opacity:.9}
.cap-sky.lit .w:nth-child(7n){opacity:.22}
@media (prefers-reduced-motion: reduce){ .cap-sky .w{transition:none} }

.cap-serv{margin-top:clamp(40px,5vw,70px); border-bottom:1px solid var(--line)}
.cap-row{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,4vw,64px); align-items:baseline;
  padding:clamp(20px,2.2vw,28px) 0; border-top:1px solid var(--line)}
.cap-row b{font-family:var(--f-display); font-weight:500; letter-spacing:-.012em;
  font-size:clamp(1.1rem,1.6vw,1.38rem); color:var(--ink)}
.cap-row p{margin:0; font-size:clamp(.98rem,1.05vw,1.06rem); line-height:1.55; color:var(--ink-2)}

/* ============ SCROLL ENGINE ============ */
/* the rail is the scroll runway; the stick is what the viewer actually sees */
#engine{padding-block:0; background:var(--ink); position:relative}
.eng-rail{height:320vh}
.eng-stick{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden}
.eng-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,6vw,90px); align-items:center; width:100%}
.eng-kick{display:block; font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(243,245,251,.45); margin-bottom:clamp(24px,3vw,40px)}

/* the three beats occupy the same box and cross-fade */
.eng-beats{list-style:none; margin:0; padding:0; position:relative; min-height:clamp(210px,26vh,290px)}
.eng-beat{position:absolute; inset:0; opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.eng-beat.on{opacity:1; transform:none; pointer-events:auto}
.eng-n{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; color:var(--accent-2,#B296F4)}
.eng-beat h2{margin-top:16px; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.9rem,3.4vw,3rem); letter-spacing:-.025em; line-height:1.12; color:#F3F5FB}
.eng-beat p{margin-top:18px; max-width:44ch; font-size:clamp(1rem,1.12vw,1.1rem);
  line-height:1.62; color:rgba(243,245,251,.6)}

.eng-prog{margin-top:clamp(26px,3vw,40px); height:2px; background:rgba(243,245,251,.14); position:relative}
.eng-prog i{position:absolute; inset:0 auto 0 0; width:var(--p,0%); background:#B296F4;
  transition:width .12s linear}

.eng-fig{margin:0; position:relative}
.eng-iso{width:100%; height:auto; display:block; overflow:visible}

/* the site plan sits underneath and never moves */
.eng-iso .iso-plan path{fill:none; stroke:rgba(243,245,251,.13); stroke-width:1; stroke-dasharray:3 4}

/* volumes rise into place, back to front */
.eng-iso .iso-b{opacity:0; transform:translateY(16px);
  transition:opacity .6s ease var(--d,0ms), transform .7s cubic-bezier(.2,.8,.25,1) var(--d,0ms)}
.eng-iso.b2 .iso-b, .eng-iso.b3 .iso-b{opacity:1; transform:none}
.eng-iso .f-t{fill:#4A3E7E}
.eng-iso .f-l{fill:#322A5C}
.eng-iso .f-r{fill:#251F45}
.eng-iso .iso-b path{stroke:rgba(178,150,244,.42); stroke-width:.9; stroke-linejoin:round;
  transition:fill .5s ease, stroke .5s ease, opacity .5s ease}

/* the ones that never reached the market read as outline only */
.eng-iso .iso-b.off .f-t, .eng-iso .iso-b.off .f-l, .eng-iso .iso-b.off .f-r{fill:none}
.eng-iso .iso-b.off path{stroke:#C0794E; stroke-dasharray:3 3; stroke-width:1.1}

/* beat 3: the field recedes and one volume is lit */
.eng-iso.b3 .iso-b{opacity:.2}
.eng-iso.b3 .iso-b.pick{opacity:1}
.eng-iso.b3 .iso-b.pick .f-t{fill:#F3F5FB}
.eng-iso.b3 .iso-b.pick .f-l{fill:rgba(243,245,251,.55)}
.eng-iso.b3 .iso-b.pick .f-r{fill:rgba(243,245,251,.32)}
.eng-iso.b3 .iso-b.pick path{stroke:#F3F5FB; stroke-dasharray:none; stroke-width:1.1}

.eng-cap{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; opacity:0;
  transition:opacity .5s ease .25s}
.eng-iso.b3 ~ .eng-cap{opacity:1}
.eng-cap span{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,245,251,.72); border:1px solid rgba(243,245,251,.22); padding:6px 10px}
.eng-cap span::before{content:"\2713"; margin-right:7px; color:#B296F4}

@media (prefers-reduced-motion: reduce){
  .eng-rail{height:auto}
  .eng-stick{position:static; height:auto; padding-block:clamp(56px,8vw,110px)}
  .eng-beats{min-height:0; display:flex; flex-direction:column; gap:38px}
  .eng-beat{position:static; opacity:1; transform:none}
  .eng-prog{display:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .nav-in{grid-template-columns:auto minmax(0,1fr) auto; gap:10px; height:58px}
  .eng-rail{height:280vh}
  .eng-in{grid-template-columns:1fr; gap:30px}
  .eng-fig{order:-1; max-width:330px; margin-inline:auto}
  .eng-beats{min-height:250px}
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-stats{gap:28px}
  .cap-row{grid-template-columns:1fr; gap:8px}
  .proof-groups{grid-template-columns:1fr; gap:26px}
  .lot{flex:1 1 132px; min-width:0}
  .nav-in .logo-mark{height:30px}
  nav .brand{margin-left:0}
  .nav-links{gap:clamp(10px,2.6vw,26px); justify-content:flex-end}
  .nav-links a{font-size:.8rem; white-space:nowrap}
  .nav-cta{font-size:.8rem; padding:8px 14px}
  .band .wrap{grid-template-columns:1fr; gap:32px}
  .howx-grid{grid-template-columns:1fr; gap:14px}
  .howx-card{aspect-ratio:4/3}
  .howx-head h2 br{display:none}
  .metros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metro:nth-child(3){border-left:0}
  .metro:nth-child(n+3){border-top:1px solid var(--line)}
  .foot-top{grid-template-columns:1fr 1fr; gap:32px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .market{grid-template-columns:auto 1fr; row-gap:6px}
  .market .mstat{grid-column:2; text-align:left}
  .market .go{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .scan-hint .blink{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.card,.market{transition:none}
  .plan-thumb rect,.stat,.bignum,.market .cap{transition:none}
  .market .cap{transform:scaleX(1)}
}

/* ===== below-the-fold: creative detailing ===== */

.card{--cc:var(--accent)}
.card:hover{border-color:var(--cc)}
.card:hover .go{color:var(--cc)}
.plan-thumb{width:100%; height:64px; display:block; margin:2px 0 4px}
.plan-thumb rect{fill:transparent; stroke:var(--line-2); stroke-width:1; transition:fill .3s ease, stroke .3s ease}
.plan-thumb .hl{fill:color-mix(in srgb,var(--cc) 13%, transparent)}
.card:hover .plan-thumb .hl{fill:var(--cc)}
.card:hover .plan-thumb rect{stroke:color-mix(in srgb,var(--cc) 45%, var(--line-2))}#start{position:relative; overflow:hidden}
.closer-mark{height:52px; width:auto; display:block; margin:0 auto 26px; opacity:.95}
#start>.wrap{position:relative; z-index:1}
/* biograph-style impact stats: big thin numerals over a hairline rule, each with a supporting sentence */
.impact{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3.2vw,54px)}@media (max-width:900px){ .impact{grid-template-columns:1fr 1fr; gap:34px 30px} }
@media (max-width:560px){ .impact{grid-template-columns:1fr; gap:30px} }

.market{position:relative}
.market .cap{position:absolute; left:4px; bottom:0; height:2px; width:var(--w,40%);
  background:var(--cc,var(--accent)); transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.4,0,.2,1)}
.market:hover .cap{transform:scaleX(1)}
.market:hover .mname{color:var(--cc,var(--accent))}
.market:hover{box-shadow:inset 3px 0 0 var(--cc,var(--accent))}


/* rainbow marker echoing the grid */
.dot-row{display:flex; gap:7px; margin-bottom:2px}
.dot-row span{width:15px; height:15px; border-radius:3px; display:block}

@media (max-width:900px){ .stat-grid{grid-template-columns:1fr 1fr} .stat{grid-column:auto !important; min-height:180px} .stat.s-a .bignum{font-size:clamp(3.4rem,10vw,5rem)} }

@media (max-width:600px){
  :root{--sect:clamp(52px,12vw,88px)}
  .wrap{padding-inline:18px}
  .scan-hint{display:none}
  .hero-in{padding:60px 0}
  .sub{font-size:1.02rem}
  .sec-head{margin-bottom:34px}
  .cta-row{width:100%}
  .cta-row .btn{flex:1 1 auto; justify-content:center}
  .stat-grid{grid-template-columns:1fr}
  .stat{padding:26px 22px; min-height:150px}
  .plan-thumb{height:56px}
}

/* ===== rudus-style minimal sections ===== */
.r-sec{padding:clamp(80px,11vw,150px) 0}
.r-head{max-width:40ch; margin-bottom:clamp(42px,6vw,74px)}
.r-ey{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.r-ey i{width:6px; height:6px; border-radius:1px; background:var(--accent); display:block}
.r-h2{margin-top:18px; font-family:var(--f-display); font-weight:500; font-size:clamp(26px,3.6vw,46px); line-height:1.08; letter-spacing:-.02em; color:var(--ink); text-wrap:balance}

.r-feat{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,56px)}
.r-card .r-k{font-family:var(--f-mono); font-size:12px; color:var(--accent); letter-spacing:.1em}
.r-card h3{margin-top:18px; font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.r-card p{margin-top:10px; color:var(--ink-2); font-size:15px; line-height:1.6}

.r-metrics{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.r-metrow{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.r-metric .r-v{font-family:var(--f-display); font-weight:500; font-size:clamp(44px,5.4vw,72px); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink)}
.r-metric .r-v em{font-style:normal; font-size:.5em; color:var(--muted); font-weight:500}
.r-metric .r-l{display:block; margin-top:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

.r-time{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.r-t{padding:26px 26px 26px 0; border-top:2px solid var(--line); transition:border-color .3s}
.r-t.r-acc{border-top-color:var(--accent)}
.r-t .r-day{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; color:var(--muted)}
.r-t.r-acc .r-day{color:var(--accent)}
.r-t h4{margin-top:16px; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.r-t p{margin-top:10px; color:var(--ink-2); font-size:14px; line-height:1.55; max-width:26ch}

.r-cta{position:relative; text-align:center; max-width:640px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:20px}
.r-cta::before{content:""; position:absolute; top:-70px; left:50%; transform:translateX(-50%); width:520px; height:340px; background:radial-gradient(circle, rgba(46,91,255,.10), transparent 70%); z-index:-1; pointer-events:none}
.r-cta .r-ey{justify-content:center}
.r-cta-h{font-family:var(--f-display); font-weight:500; font-size:clamp(30px,4.6vw,56px); letter-spacing:-.03em; line-height:1.02; color:var(--ink)}
.r-cta p{color:var(--ink-2); font-size:17px; line-height:1.55; max-width:44ch}
.r-cta .btn{margin-top:6px}

.r-foot{border-top:1px solid var(--line); padding:46px 0 40px}
.r-foot-in{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.r-foot-links{display:flex; gap:26px}
.r-foot-links a{font-size:14px; color:var(--ink-2)}
.r-foot-links a:hover{color:var(--ink)}
.r-foot-b{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:36px; padding-top:22px; border-top:1px solid var(--line)}
.r-foot-b .mono{font-size:10px; color:var(--muted)}
.r-foot-b .yc{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.r-foot-b .yc b{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; background:#FF6600; color:#fff; font-family:var(--f-body); font-weight:800; font-size:11px; border-radius:3px}

@media (max-width:860px){
  .r-feat{grid-template-columns:1fr}
  .r-metrow{grid-template-columns:1fr 1fr; gap:34px 24px}
  .r-time{grid-template-columns:1fr 1fr}
}

/* dynamic bits: typewriter caret, feature mark, moving marquee */
.head .tw{font-style:normal; white-space:nowrap; color:#fff; text-shadow:0 1px 4px rgba(15,20,40,.55)}   /* white typed word */
.head .tw::after{content:""; display:inline-block; width:.055em; height:.82em; margin-left:.05em; vertical-align:-.02em; background:currentColor; animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.r-card .r-mk{display:block; width:26px; height:2px; background:var(--accent); margin-bottom:22px; border-radius:2px}

.r-marq{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0}
.r-marq-run{display:flex; align-items:center; gap:26px; width:max-content; white-space:nowrap; animation:rmarq 36s linear infinite}
.r-marq-run span{font-family:var(--f-display); font-weight:400; font-size:clamp(20px,2.4vw,32px); letter-spacing:-.01em; color:var(--ink)}
.r-marq-run b{color:var(--accent); font-weight:400; font-size:clamp(15px,1.8vw,24px)}
@keyframes rmarq{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  .r-marq-run{animation:none}
  .head .tw::after{animation:none}
}

/* hard-left hero + stable typewriter word */
.hero .hero-in{align-items:flex-start; text-align:left}
.hero .hero-in > *{align-self:flex-start; margin-inline:0}
.head .tw{display:inline-block; min-width:7em; white-space:nowrap; vertical-align:baseline}
/* caret holds steady while letters are moving, blinks only on the pause */
.head .tw.typing::after{animation:none; opacity:1}

/* nuclear: force hero content full-width and hard-left */
.hero > .hero-in, .hero .wrap.hero-in{
  max-width:none !important; width:100% !important; margin:0 !important;
  align-items:flex-start !important; text-align:left !important; justify-content:flex-end !important;
  padding-left:clamp(28px,4.5vw,84px) !important; padding-right:24px !important;
  padding-bottom:clamp(48px,7vh,96px) !important;
}
.hero .hero-in > *{ align-self:flex-start !important; margin-inline:0 !important }
.r-cta-btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px}


/* ===== merged sections: process+demo, and one dark stats band ===== */
#how .demo-stage{margin-top:clamp(48px,6.5vw,88px)}