/* HABU — brand tokens from "Basic design system — HABU" */
:root {
  color-scheme: dark;

  --bg: #05080F;
  --surface: #0E1420;
  --accent: #4E9D7E;
  --accent-strong: #63B393;
  --alert: #E5605E;

  --text-1: #FFFFFF;
  --text-2: #E9EDF5;
  --text-3: #CDD4E0;
  --text-4: #AEB6C6;
  --text-5: #8B94A8;
  --text-6: #7F889C;
  --text-7: #5A6478;

  --border: rgba(150, 170, 210, 0.14);
  --border-strong: rgba(150, 170, 210, 0.28);
  --card: rgba(146, 166, 210, 0.04);
  --chip: rgba(146, 166, 210, 0.07);
  --accent-tint: rgba(78, 157, 126, 0.12);

  --radius: 3px;
  --pad: clamp(24px, 6vw, 96px);
  --max: 1320px;
  --nav-h: 64px;

  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display: var(--body);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* Short pages (careers.html) still pin the footer to the bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--border-strong); text-underline-offset: 0.18em; }
a, button, input, select, textarea, label { touch-action: manipulation; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Contour field — the brand's only texture. A fixed canvas on which main.js
   draws the topographic lines live, so the cursor can push them around.
   Without JS it is a plain surface. */
.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .field { animation: field-in 1.4s var(--ease) both; }
}
@keyframes field-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Skip link */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Layout helpers */
.hero__inner, .section__inner, .nav__inner, .footer__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
}
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--primary:active { background: #438A6E; border-color: #438A6E; }
.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
}
.btn--ghost:hover { border-color: var(--text-5); background: var(--chip); }
.btn--ghost:active { background: var(--card); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background-color 240ms var(--ease);
}
.nav.is-scrolled,
.nav.has-menu {
  background: #0b111c;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-height: var(--nav-h);
  padding-top: max(0px, env(safe-area-inset-top));
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: auto;
  min-height: 44px;
}
.nav__brand img {
  width: 112px;
  height: auto;
  /* Display the supplied black logo in white while preserving its pixels and alpha. */
  filter: invert(1);
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links {
  display: flex;
  gap: 28px;
}
.nav__links a {
  display: inline-block;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-4);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.nav__links a:hover { color: var(--text-1); }
.nav__links a[aria-current] { color: var(--text-1); border-bottom-color: var(--accent); }
.nav__cta {
  width: 122.875px;
  min-height: 35px;
  padding: 0 12px;
  font-size: 15px;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.nav__toggle-bar {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: var(--text-1);
  border-radius: 1px;
  transition: transform 200ms var(--ease);
}
.nav__toggle-bar:nth-child(1) { top: 18px; }
.nav__toggle-bar:nth-child(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Use the tablet menu when the logo and section links would crowd the header. */
@media (max-width: 1023px) {
  .nav__toggle { display: block; }
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .nav__menu.is-open { display: flex; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--border);
  }
  .nav__links a[aria-current] { border-bottom-color: var(--border); color: var(--accent-strong); }
  .nav__cta { width: auto; margin-top: 16px; min-height: 48px; font-size: 16px; }
}

/* Hero */
.hero {
  /* Generous top space so the wordmark stays in view while the user scrolls
     through the expansion. */
  /* No bottom padding: the .backed strip owns its own symmetric spacing. */
  padding: clamp(96px, 13vw, 176px) 0 0;
  overflow: hidden;
}
.hero__inner {
  container-type: inline-size;
  --wm-gap: clamp(24px, 3vw, 48px); /* breathing room above and below the wordmark, in both states */
}

/* "Backed by Y Combinator" badge above the wordmark */
.yc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(6px, 0.8vw, 12px);
}
.yc-badge__logo { width: 20px; height: 20px; border-radius: 2px; }
.yc-badge__text {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0;
  width: 100%;
  /* Pull the box left to optically align the wordmark with the text below. */
  /* Half the gap above (the badge sits close), the full gap below. */
  margin: calc(var(--wm-gap) / 2) 0 var(--wm-gap) -0.073em;
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(84px, 19cqw, 280px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text-1);
  white-space: nowrap;
  transition: font-size 760ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* Expanded state is set by main.js as soon as the page scrolls. "Highest And
   Best Use" is ~10em wide, so the type scales down to 9.7cqw while the tails
   slide out; HABU shrinks into the full phrase and fits on one line. */
.wordmark.is-expanded { font-size: min(clamp(84px, 19cqw, 280px), 9.7cqw); }
/* Narrow phones: rather than shrinking to body-copy size, let the phrase break
   after "And" (each word is one flex item) and keep the type near HABU's size. */
@media (max-width: 479px) {
  .wordmark { flex-wrap: wrap; row-gap: 0.05em; }
  .wordmark.is-expanded { font-size: min(clamp(84px, 19cqw, 280px), 15.5cqw); } /* "Highest And" is ~6.2em */
}
/* Each letter is the capital followed by a hidden tail ("ighest ", "nd ",
   "est ", "se "). main.js measures each tail's natural width into --w (in em,
   so it tracks the font-size) and a single width transition carries the reveal. */
.wordmark__letter {
  display: inline-flex;
  align-items: baseline;
}
.wordmark__rest {
  display: block;
  width: 0;
  white-space: pre; /* keeps the trailing word space */
  overflow-x: clip; /* clip only horizontally so the "g" descender is not cut off */
  overflow-y: visible;
  opacity: 0;
  transition:
    width 760ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 520ms cubic-bezier(0.32, 0.72, 0, 1);
}
.wordmark.is-expanded .wordmark__rest {
  width: var(--w, auto);
  opacity: 1;
}

/* Copy on the left, space reserved on the right for the hero animation */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
  gap: 0;
  align-items: start;
  /* The copy is short, so the row is held taller than its text: the plat's
     frame spans this row and gets its size from it in the expanded state. */
  min-height: clamp(240px, 24vw, 340px);
}
.hero__copy { min-width: 0; padding-right: 6%; } /* keeps copy clear of the 38% plat frame */
/* The plat is taken out of flow so it never adds height. At rest its frame
   reaches up beside "HABU" (the wordmark box is font-size × 0.9 tall) so the
   plat centres between the wordmark and the definition; once the wordmark
   expands to full width the frame drops to the definition row and the plat
   shrinks to fit. --wm-h resolves against .hero__inner, like the wordmark. */
.hero__visual {
  --wm-h: calc(clamp(84px, 19cqw, 280px) * 0.9);
  position: absolute;
  top: calc(-1 * (var(--wm-h) + var(--wm-gap)));
  right: 0;
  bottom: 0;
  width: 38%; /* at rest the frame borrows a little of the copy column's slack */
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 760ms cubic-bezier(0.32, 0.72, 0, 1), width 760ms cubic-bezier(0.32, 0.72, 0, 1); /* matches the wordmark */
}
.hero__grid.is-expanded .hero__visual { top: 0; width: 34%; }

/* HABU plat: an isometric parcel map of nine blocks on the Phoenix grid.
   main.js draws the plat, then walks it through the four tests of highest
   and best use. Each test retires the parcels that fail it, and on the one
   that passes all four a townhome community rises, unit by unit.
   Every parcel carries --f, the test it fails (99 for the winner); .plat
   carries --stage. --alive is 1 while the failing test is still ahead and 0
   once it is reached, so a single fill/stroke transition does the retiring.
   Sized in cqw so it scales with the column. */
.plat {
  --stage: 0;
  --glow: rgba(99, 179, 147, 0.5);
  position: relative;
  container-type: inline-size;
  /* Widest block that still fits the frame's height: the block is about 0.8×
     as tall as it is wide (cq units here resolve against .hero__visual) */
  width: min(100cqw, 130cqh);
  display: flex;
  flex-direction: column;
}
/* Parcels still in the running; ticks down with each test. Sits in the empty
   corner beside the map's top vertex. */
.plat__count {
  position: relative;
  z-index: 1;
  text-align: right;
  font-size: max(9px, 3.4cqw);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-5);
}
.plat__map {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -7.5cqw;
  overflow: visible;
}
/* Solid slab of land so the map reads as an object, not a tint on the backdrop */
.plat__ground {
  fill: #151C2B;
  stroke: rgba(150, 170, 210, 0.42);
  stroke-width: 1;
}
/* Retired parcels stay as a dim plat so the map keeps its shape */
.plat__parcel {
  --alive: clamp(0, var(--f) - var(--stage), 1);
  fill: #96A6D2;
  fill-opacity: calc(0.07 + var(--alive) * 0.23);
  stroke: #AEBBDD;
  stroke-opacity: calc(0.3 + var(--alive) * 0.5);
  stroke-width: 0.9;
  stroke-linejoin: round;
  transition:
    fill-opacity 700ms var(--ease),
    stroke-opacity 700ms var(--ease),
    fill 500ms var(--ease),
    stroke 500ms var(--ease);
}
/* The winner becomes the site's lawn, edged by its property line */
.plat.is-built .plat__parcel.is-win {
  fill: #2F7656;
  fill-opacity: 1;
  stroke: var(--accent-strong);
  stroke-opacity: 1;
}
/* Scan: one pass of light across the land before the tests begin. Restarts
   whenever the loop returns to stage 0. */
.plat__scan { opacity: 0; }
.plat[data-stage="0"] .plat__scan { animation: plat-scan 1500ms cubic-bezier(0.45, 0, 0.55, 1) 250ms both; }
@keyframes plat-scan {
  0% { opacity: 0; transform: translateX(0); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(470px); }
}
.plat__scanline {
  stroke: var(--accent-strong);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px var(--glow));
}
/* Site pieces (trees, drive, homes) rise in sequence once the winner is found, sink on reset */
.plat__bld { transition: filter 600ms var(--ease); }
.plat.is-built .plat__bld { filter: drop-shadow(0 8px 16px rgba(99, 179, 147, 0.32)); }
.plat__unit {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms var(--ease), transform 460ms var(--ease);
}
.plat.is-built .plat__unit {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--k) * 70ms + 420ms);
}
.plat__unit polygon {
  stroke: rgba(5, 8, 15, 0.45);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.plat__face-t { fill: #7AC7A7; } /* roof slope in light */
.plat__face-r { fill: #4E9D7E; } /* gable end */
.plat__face-l { fill: #337059; } /* front wall and the shaded back slope */
.plat__seam { stroke: rgba(5, 8, 15, 0.35); stroke-width: 0.6; }
.plat__win { stroke: rgba(5, 8, 15, 0.55); stroke-width: 1.1; stroke-linecap: butt; }
.plat__door { stroke: rgba(5, 8, 15, 0.7); stroke-width: 1.8; stroke-linecap: butt; }
.plat__garage { stroke: rgba(5, 8, 15, 0.62); stroke-width: 3.6; stroke-linecap: butt; }
/* Site work: paving lies flat so it only fades in; trees rise with the homes */
.plat__paving { transform: none; }
.plat__unit .plat__drive {
  fill: rgba(5, 8, 15, 0.42);
  stroke: rgba(174, 187, 221, 0.55); /* curbs */
  stroke-width: 0.6;
}
.plat__shade { fill: rgba(5, 8, 15, 0.3); }
.plat__trunk { stroke: #2A3A2F; stroke-width: 1; stroke-linecap: round; }
.plat__canopy { fill: #3E9370; stroke: rgba(5, 8, 15, 0.45); stroke-width: 0.5; }
/* Caption: the current test and its question */
.plat__caption {
  margin-top: 2.5cqw;
  text-align: right;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.plat__caption.is-out {
  opacity: 0;
  transform: translateY(4px);
}
.plat__test {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: max(11px, 4.4cqw);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.plat__q {
  display: block;
  margin-top: 0.9cqw;
  font-size: max(9px, 3.5cqw);
  line-height: 1.4;
  color: var(--text-5);
}
@media (prefers-reduced-motion: reduce) {
  .plat__parcel, .plat__unit, .plat__caption { transition: none; }
  .plat[data-stage="0"] .plat__scan { animation: none; }
}

/* Hero copy: green kicker over a white lead, sitting beside the plat */
.hero__kicker {
  margin-top: clamp(18px, 2.4vw, 30px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--border); /* the ruled line under the wordmark */
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--accent-strong);
}
.hero__lead {
  margin-top: clamp(10px, 1.2vw, 16px);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text-1);
  text-wrap: pretty;
}
.hero__subheader {
  margin-top: 14px;
  max-width: 48ch;
  color: var(--text-3);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Backed by */
/* Full-bleed divider with the logos centered across the page. */
.backed {
  margin-top: clamp(56px, 7vw, 96px); /* room below the hero copy and plat */
  /* Slightly more on top than bottom so the strip reads as optically centered
     between the two dividers. */
  padding: clamp(15px, 1.8vw, 22px) 0 clamp(13px, 1.6vw, 19px);
  border-top: 1px solid var(--border);
  /* Slightly darker full-bleed backdrop so the strip reads as its own band. */
  background: color-mix(in srgb, var(--surface) 75%, var(--bg));
}
.backed__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.backed__inner > .rail { grid-area: 1 / 1; justify-self: start; }
.backed .rail__label { position: static; }
.backed__list {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px clamp(40px, 6vw, 96px);
}
.backed__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}
.backed__yc { width: 30px; height: 30px; border-radius: 3px; }
.backed__tt { width: auto; height: 26px; }
.backed__cs { width: auto; height: 38px; }
.backed__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px);
  letter-spacing: -0.015em;
  color: var(--text-1);
  white-space: nowrap;
}

/* Page-load reveal: one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise 900ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 110ms + 80ms);
  }
  .wordmark__letter {
    animation: rise 900ms var(--ease) both;
  }
  .wordmark__letter:nth-child(1) { animation-delay: 0ms; }
  .wordmark__letter:nth-child(2) { animation-delay: 60ms; }
  .wordmark__letter:nth-child(3) { animation-delay: 120ms; }
  .wordmark__letter:nth-child(4) { animation-delay: 180ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal for sections below the fold. main.js adds .js to <html> and
   .is-in when an element enters the viewport; --d staggers siblings. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 800ms var(--ease), transform 800ms var(--ease);
    transition-delay: calc(var(--d, 0) * 100ms);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* Sections */
.section {
  border-top: 1px solid var(--border);
  padding: clamp(64px, 9vw, 128px) 0;
}
/* Pages without a hero (careers.html) start straight under the nav. */
main > .section:first-child { border-top: 0; }
/* Same darker full-bleed band as the "Backed by" strip. */
.section--band { background: color-mix(in srgb, var(--surface) 75%, var(--bg)); }
.section__inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
}
.rail { align-self: start; }
.rail__label {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-5);
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  line-height: 1.2;
}
.content { min-width: 0; max-width: 900px; }
.content > * + * { margin-top: clamp(32px, 4vw, 48px); }
.content > .prose { margin-top: clamp(28px, 3vw, 40px); }
.content > .prose:first-child { margin-top: 0; }
.content > .content__subtitle { margin-top: clamp(28px, 3.5vw, 44px); }
.content > .content__subtitle:first-child { margin-top: 0; }
.content > .content__subtitle + * { margin-top: 20px; }
.content > .statement { margin-top: clamp(56px, 7vw, 88px); }

.section__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text-1);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
/* Word carousel in the #focus title. The static sentence stands on its own
   until main.js adds .has-carousel, which hides it from sight (not from
   assistive tech) and shows the live line. Without JS, or with reduced
   motion, nothing changes. The swap is an AnimatePresence "wait": the old
   word rises out, then the new one rises in while the slot's width eases to
   fit it. The slot clips sideways only, so the incoming word is revealed as
   the slot widens but its vertical travel is never cut off. */
.title-live { display: none; }
.has-carousel .title-static {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.has-carousel .title-live { display: inline; }
.carousel {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  clip-path: inset(-0.6em 0);
  /* Runs across both halves of the 220ms-out, 220ms-in swap */
  transition: width 440ms var(--ease);
}
.carousel__probe {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}
.carousel__word {
  display: inline-block;
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
  will-change: opacity, transform;
  /* In: decelerate to rest. Out: a touch of ease-in so it feels lifted, not
     dropped. 220ms each; main.js waits the same before swapping. */
  animation: carousel-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.6, 1), transform 220ms cubic-bezier(0.4, 0, 0.6, 1);
}
.carousel__word.is-out {
  opacity: 0;
  transform: translateY(-0.35em);
}
@keyframes carousel-in {
  from { opacity: 0; transform: translateY(0.35em); }
  to { opacity: 1; transform: none; }
}

.content__subtitle {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
.prose { max-width: 66ch; }
.prose p { color: var(--text-3); font-size: clamp(16px, 1.25vw, 18px); text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }
.statement {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent-strong);
  max-width: 28ch;
  text-wrap: balance;
}

/* Ledger — market facts */
.ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.ledger__item {
  padding-top: 20px;
  border-top: 1px solid var(--border-strong);
  min-width: 0;
}
.ledger__value {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.ledger__label {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-5);
  text-wrap: pretty;
}

/* Highest and best use — four connected criteria */
.focus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(36px, 4.5vw, 56px) 0 0; /* more air under the section title than the default content rhythm */
}
/* Each card carries a faint parcel grid in its top corner, a few parcels lit,
   dissolving toward the bottom: the plat from the hero, at rest. The grid is
   background layers on a pseudo-element (five 21px squares, then the two line
   directions, then a light wash) so it needs no markup or script. */
.focus__item {
  position: relative;
  overflow: hidden;
  padding: 20px 22px 22px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.focus__item::before {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 80px);
  width: 100%;
  height: 100%;
  pointer-events: none;
  --cell: 16px;
  --sqs: calc(var(--cell) + 1px) calc(var(--cell) + 1px);
  --grid-line: rgba(150, 170, 210, 0.14);
  --grid-fill: rgba(146, 166, 210, 0.07);
  --grid-lit: rgba(99, 179, 147, 0.2);
  --sq: linear-gradient(var(--grid-fill), var(--grid-fill));
  --lit: linear-gradient(var(--grid-lit), var(--grid-lit));
  background-image:
    var(--lit), var(--sq), var(--sq), var(--sq), var(--sq),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 166, 210, 0.06), rgba(146, 166, 210, 0.01));
  background-size:
    var(--sqs), var(--sqs), var(--sqs), var(--sqs), var(--sqs),
    var(--cell) var(--cell), var(--cell) var(--cell), 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-position: var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), -12px 4px, -12px 4px, 0 0;
  /* Two masks intersected: a dome from the top edge, and a straight fade so
     the lower half of the card is clear. Browsers without mask-composite
     union the two instead, which is only a softer version of the same. */
  -webkit-mask-image: radial-gradient(farthest-side at top, #000, transparent), linear-gradient(#000, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(farthest-side at top, #000, transparent), linear-gradient(#000, transparent);
  mask-composite: intersect;
  opacity: 0.85;
  transition:
    opacity 400ms var(--ease),
    background-position 700ms var(--ease),
    --grid-line 400ms var(--ease),
    --grid-lit 400ms var(--ease);
}
/* Registered so the grid colours can transition on hover (unsupported
   browsers snap between the two values, which is fine). */
@property --grid-line { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --grid-lit { syntax: "<color>"; inherits: false; initial-value: transparent; }
/* Square positions on the 16px grid, offset to sit on the lines (x·16−12, y·16+4);
   a different scatter per card, fixed so the page is the same on every load.
   --h1..--h5 are where each square slides to on hover: one or two cells over,
   so the parcels read as being re-screened rather than reshuffled. */
.focus__item:nth-child(1)::before {
  --p1: 132px 36px; --p2: 100px 20px; --p3: 116px 68px; --p4: 148px 52px; --p5: 100px 100px;
  --h1: 148px 20px; --h2: 116px 36px; --h3: 132px 84px; --h4: 164px 52px; --h5: 84px 84px;
}
.focus__item:nth-child(2)::before {
  --p1: 116px 52px; --p2: 148px 20px; --p3: 100px 36px; --p4: 132px 84px; --p5: 116px 100px;
  --h1: 132px 36px; --h2: 164px 36px; --h3: 84px 52px; --h4: 148px 68px; --h5: 100px 116px;
}
.focus__item:nth-child(3)::before {
  --p1: 148px 68px; --p2: 100px 20px; --p3: 132px 36px; --p4: 116px 52px; --p5: 148px 100px;
  --h1: 164px 52px; --h2: 116px 36px; --h3: 148px 20px; --h4: 100px 68px; --h5: 132px 100px;
}
.focus__item:nth-child(4)::before {
  --p1: 100px 36px; --p2: 148px 20px; --p3: 116px 84px; --p4: 132px 52px; --p5: 100px 84px;
  --h1: 116px 20px; --h2: 164px 36px; --h3: 132px 100px; --h4: 148px 68px; --h5: 84px 68px;
}
/* Scanline: one pass of light across the grid on hover, the hero's plat-scan
   at card scale. Same box as the grid but only its visible (right) part, so
   the sweep spends its whole run over parcels. Two background layers, a 1px
   line and a soft glow, ride background-position from edge to edge. */
.focus__item::after {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 80px);
  width: calc(50% + 80px);
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent, var(--accent-strong), transparent),
    linear-gradient(90deg, transparent, rgba(99, 179, 147, 0.16), transparent);
  background-size: 2px 100%, 32px 100%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(#000, transparent 70%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(#000, transparent 70%);
  mask-composite: intersect;
  opacity: 0;
}
@media (hover: hover) {
  .focus__item:hover::before {
    opacity: 1;
    --grid-line: rgba(150, 170, 210, 0.24);
    --grid-lit: rgba(99, 179, 147, 0.5);
    background-position: var(--h1), var(--h2), var(--h3), var(--h4), var(--h5), -12px 4px, -12px 4px, 0 0;
  }
  .focus__item:hover::after { animation: focus-scan 1100ms cubic-bezier(0.45, 0, 0.55, 1) both; }
}
@keyframes focus-scan {
  0% { opacity: 0; background-position: 0% 0, 0% 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: 100% 0, 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the brightening, drop the movement */
  .focus__item::before { transition: opacity 400ms var(--ease), --grid-line 400ms var(--ease), --grid-lit 400ms var(--ease); }
  .focus__item:hover::before { background-position: var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), -12px 4px, -12px 4px, 0 0; }
  .focus__item:hover::after { animation: none; }
}
/* Text sits above the absolutely positioned grid */
.focus__term, .focus__value, .focus__note { position: relative; }
.focus__term {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-strong);
}
.focus__icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 22px;
  color: var(--text-3);
}
.focus__value {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-1);
  text-wrap: balance;
}
.focus__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-5);
  text-wrap: pretty;
}

/* Metrics — DS "accent list / metric row" */
.metrics { max-width: 640px; }
.metrics__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0 16px 20px;
  border-left: 2px solid var(--accent);
}
.metrics__row + .metrics__row { margin-top: 12px; }
.metrics__term { min-width: 0; font-size: 18px; color: var(--text-3); }
.metrics__value {
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

/* Founders — profile cards. The portrait fills the whole card and dissolves
   into the surface through three stacked scrims (one flat gradient, two
   masked backdrop blurs) so the copy at the bottom sits on legible ground
   without a hard edge. */
.founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 860px;
}
.founder {
  /* Scale the portrait and copy offset with card width, leaving the full
     face visible above the name on desktop and mobile. */
  --founder-portrait: 100%;
  --founder-lift: 94%;
  --founder-photo-scale: 1;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  min-width: 0;
  display: grid;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  transform: translateZ(0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms var(--ease), box-shadow 600ms var(--ease);
}
/* Crop the thin dark edge from Bryan's source photo at every card size. */
.founder--bryan { --founder-photo-scale: 1.04; }
.founder__media, .founder__scrim { position: absolute; pointer-events: none; }
.founder__scrim { inset: 0; }
/* The portrait fits the card width exactly and is pinned to the top. A long,
   gentle mask dissolves its lower half into the surface so the studio grey
   drifts into the card rather than stopping. */
.founder__media {
  z-index: 0;
  top: 0; left: 0; right: 0;
  height: 0;
  padding-top: var(--founder-portrait);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.95) 78%, rgba(0, 0, 0, 0.6) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.95) 78%, rgba(0, 0, 0, 0.6) 90%, transparent 100%);
}
.founder__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
  transform: translateZ(0) scale(var(--founder-photo-scale));
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Portrait sources live in CSS so they are never a candidate for link-preview
   fallback (scrapers only consider <img>). image-set() prefers WebP where supported. */
.founder--bryan .founder__photo {
  background-image: url("assets/bryan.jpg");
  background-image: image-set(url("assets/bryan.webp") type("image/webp"), url("assets/bryan.jpg") type("image/jpeg"));
}
.founder--jun .founder__photo {
  background-image: url("assets/jun.jpg?v=2");
  background-image: image-set(url("assets/jun.webp?v=2") type("image/webp"), url("assets/jun.jpg?v=2") type("image/jpeg"));
}
/* Soft vignette: a light darkening at the sides and top edge so the photo's
   backdrop blends toward the card border without a visible frame */
.founder__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 120% at 50% 40%,
      rgba(14, 20, 32, 0) 50%,
      rgba(14, 20, 32, 0.25) 78%,
      rgba(14, 20, 32, 0.6) 100%),
    linear-gradient(to bottom, rgba(14, 20, 32, 0.4), rgba(14, 20, 32, 0) 22%);
}
/* Layer 1: flat gradient over the whole card */
.founder__scrim {
  z-index: 1;
  background: linear-gradient(to top,
    rgba(14, 20, 32, 0.96) 0%,
    rgba(14, 20, 32, 0.78) 22%,
    rgba(14, 20, 32, 0.25) 42%,
    rgba(14, 20, 32, 0.08) 58%,
    rgba(14, 20, 32, 0.06) 74%,
    rgba(14, 20, 32, 0) 100%);
}
/* Layers 2 + 3: soft backdrop blurs faded out with masks, so the blur
   itself has no visible edge */
.founder__scrim::before, .founder__scrim::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
}
.founder__scrim::before {
  height: 48%;
  background: linear-gradient(to top, rgba(14, 20, 32, 0.55), rgba(14, 20, 32, 0));
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent);
  mask-image: linear-gradient(to top, #000 45%, transparent);
}
.founder__scrim::after {
  height: 30%;
  background: linear-gradient(to top, rgba(14, 20, 32, 0.6), rgba(14, 20, 32, 0));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
  mask-image: linear-gradient(to top, #000 35%, transparent);
}
/* Body fills the card. Name and role start at the same offset on every
   card, the bio takes the middle, and the footer is pinned to the bottom, so
   every line aligns across the pair. */
.founder__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0; /* never let the nowrap footer widen the body past the card */
  min-height: 100%;
  padding: var(--founder-lift) 14px 22px;
}
.founder__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
.founder__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.founder__letters { display: inline-block; white-space: pre-wrap; }
.founder__letter { display: inline-block; }
/* LinkedIn mark sits on the role line, sized to its text */
.founder__linkedin {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.15em;
  margin-left: 4px;
  color: #0a66c2;
  transition: color 160ms var(--ease), transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.founder__linkedin svg { width: 14px; height: 14px; }
.founder__linkedin:hover { color: #3b8de0; transform: scale(1.1) rotate(5deg); }
.founder__role {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-strong);
}
.founder__bio { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--text-3); text-wrap: balance; }
.founder__prev {
  margin-top: auto; /* footer sits on the card's bottom edge */
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  font-size: clamp(10px, 4.1cqw, 12.5px); /* shrinks with the card so it stays on one line */
  line-height: 1.4;
  color: var(--text-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.founder__bio { padding-bottom: 14px; }
.founder__prev-label { display: inline-block; margin-right: 8px; color: var(--text-6); }
@media (hover: hover) {
  .founder:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--border-strong);
    box-shadow: 0 32px 70px -28px rgba(0, 0, 0, 0.8);
  }
  .founder:hover .founder__photo { transform: translateZ(0) scale(calc(var(--founder-photo-scale) + 0.05)); }
}
/* Entrance: once the card scrolls in, the copy rises out of a slight blur,
   one line after another, and the name pops in letter by letter. */
@media (prefers-reduced-motion: no-preference) {
  .js .founder__body > * {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    filter: blur(2px);
    transition: opacity 600ms var(--ease), transform 600ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms var(--ease);
    transition-delay: calc(var(--d, 0) * 100ms + 180ms + var(--i, 0) * 80ms);
  }
  .js .founder.is-in .founder__body > * { opacity: 1; transform: none; filter: none; }
  .js .founder__letter {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 400ms var(--ease), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--d, 0) * 100ms + 260ms + var(--l, 0) * 22ms);
  }
  .js .founder.is-in .founder__letter { opacity: 1; transform: none; }
}

/* Careers */
#careers { padding-block: clamp(40px, 5vw, 64px); }
#careers .content > .form,
#careers .content > .form__success { margin-top: 24px; }
.careers__roles {
  margin: 12px 0;
  padding-left: 1.25em;
  list-style: disc;
  color: var(--text-3);
  font-size: clamp(16px, 1.25vw, 18px);
}
.careers__roles li + li { margin-top: 4px; }
.careers__roles li::marker { color: var(--accent-strong); }
.careers__details { grid-column: 1 / -1; }
.careers__details[hidden] { display: none; }

/* Contact and careers forms */
/* The title stays on one line: it measures ~20.7em wide, so it is sized
   against the content column (4.75cqi ≈ 1/21 of the width) and capped at
   the normal title size. Below 600px that would get too small, so it wraps. */
#work-with-us .content { container-type: inline-size; }
/* Fill each line normally so the investor phrase stays on the first line when it fits. */
#work-title { text-wrap: wrap; }
.section__title--nowrap {
  white-space: nowrap;
  font-size: min(clamp(28px, 3.2vw, 44px), 4.75cqi);
}
@media (max-width: 599px) {
  .section__title--nowrap { white-space: normal; font-size: clamp(28px, 3.2vw, 44px); }
}
.content > .form,
.content > .form__success { margin-top: clamp(28px, 3.5vw, 44px); }
.form { min-width: 0; max-width: 680px; }
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 16px;
}
.form__field { display: flex; flex-direction: column; min-width: 0; }
.form__field--full { grid-column: 1 / -1; }
.form__field--submit { grid-column: 1 / -1; justify-content: flex-end; }
.form__field--submit .btn { align-self: flex-start; min-height: 42px; }
/* Honeypot: off-screen and out of the tab order; bots fill it, people never see it */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-5);
  margin-bottom: 6px;
}
.form__field label .form__optional { font-weight: 400; color: var(--text-6); }
.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--text-1);
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.form__field textarea {
  min-height: 112px;
  line-height: 1.5;
  resize: vertical;
}
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--text-6); }
.form__field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23AEB6C6' stroke-width='1.6'><path d='M3.5 6l4.5 4.5L12.5 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.form__field select option { background-color: var(--surface); color: var(--text-1); }
.form__field input:hover,
.form__field select:hover,
.form__field textarea:hover { border-color: var(--text-6); }
.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 0;
  border-color: var(--accent-strong);
}
.form__field [aria-invalid="true"] { border-color: var(--alert); }
.form__error {
  min-height: 0;
  margin-top: 6px;
  font-size: 13px;
  color: var(--alert);
}
.form__error:empty { display: none; }
.form__note { margin-top: 16px; font-size: 14px; color: var(--text-6); }
.form__note a { color: var(--text-3); text-decoration-color: var(--accent); }
.form__note a:hover { color: var(--accent-strong); }
.form__status { margin-top: 12px; font-size: 14px; color: var(--text-4); }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--alert); }

.form__success {
  max-width: 680px;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid rgba(78, 157, 126, 0.4);
  border-radius: var(--radius);
  background: var(--accent-tint);
}
.form__success-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
.form__success-text { margin-top: 8px; font-size: 16px; color: var(--text-3); }
.form__success-email { color: var(--text-1); }

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 calc(40px + env(safe-area-inset-bottom));
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px 40px;
}
.footer__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer__linkedin {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  color: #0a66c2;
  transition: color 160ms var(--ease);
}
.footer__linkedin svg { width: 16px; height: 16px; }
.footer__linkedin:hover { color: #3b8de0; }
/* Matches the 16px YC mark beside it and the LinkedIn icon. */
.footer__logo {
  display: block;
  width: 16px;
  height: 16px;
}
.yc-badge--inline { margin-bottom: 0; gap: 8px; }
.yc-badge--inline .yc-badge__logo { width: 16px; height: 16px; }
.yc-badge--inline .yc-badge__text { font-size: 10px; letter-spacing: 0.14em; }
.footer__copy { justify-self: end; font-size: 14px; color: var(--text-6); }

/* Responsive */
@media (max-width: 1023px) {
  .section__inner { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 479px) {
  .form__field--submit .btn { align-self: stretch; width: 100%; }
}
@media (max-width: 767px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .footer__brand, .footer__copy { justify-self: center; text-align: center; }
  .footer__brand { justify-content: center; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  /* One column: the plat comes back into flow under the copy instead of
     floating beside it. The frame keeps size containment so the plat's cq
     units still resolve; 5:4 leaves a little slack under the caption. */
  .hero__visual,
  .hero__grid.is-expanded .hero__visual {
    position: static;
    width: min(100%, 360px);
    aspect-ratio: 5 / 4;
    margin: 32px auto 0;
    transition: none;
  }
  .hero__copy { padding-right: 0; }
  /* Hero copy steps down a size so the lead holds to two lines on a phone. */
  .hero__lead { font-size: 21px; }
  .hero__subheader { margin-top: 8px; font-size: 14.5px; }
  .section__inner, .backed__inner { grid-template-columns: 1fr; gap: 20px; }
  .rail__label { position: static; }
  .backed__inner > .rail, .backed__list { grid-area: auto; }
  .ledger { grid-template-columns: 1fr; gap: 20px; }
  .ledger__item { padding-top: 16px; }
  .focus { grid-template-columns: 1fr; gap: 10px; }
  .focus__item { padding: 18px 18px 20px; }
  .focus__icon { margin-bottom: 18px; }
  /* Founder cards: a shorter portrait (the faces sit in the top ~78% of the
     source photos, so the name still clears the chin) and smaller type. */
  .founders { grid-template-columns: 1fr; gap: 16px; max-width: 440px; }
  .founder { --founder-portrait: 84%; --founder-lift: 80%; border-radius: 12px; }
  .founder__body { padding-left: 18px; padding-right: 18px; padding-bottom: 16px; }
  .founder__name { font-size: 20px; }
  .founder__role { font-size: 13px; }
  .founder__bio { margin-top: 8px; padding-bottom: 10px; font-size: 13.5px; }
  /* Backed-by strip: logos and names small enough that all three fit one row. */
  .backed__list { gap: 10px 20px; }
  .backed__item { gap: 8px; min-height: 28px; }
  .backed__yc { width: 22px; height: 22px; }
  .backed__tt { height: 20px; }
  .backed__cs { height: 26px; }
  .backed__name { font-size: 13px; }
  .form__grid { grid-template-columns: 1fr; gap: 14px; }
  .form__field--submit { margin-top: 6px; }
  .metrics__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .metrics__value { font-size: 26px; }
}