/* ============================================================
   THE LATTICE — SITE STYLES (v3)

   Built against css/brand-tokens.css. No raw hex in here except
   inside the two inline SVG graphics, which carry their own
   stroke/fill: every other colour is a var(--lattice-*) token.

   Colour budget this page holds to:
     Ink navy 45-55%  · Mist grey + white 30-40%
     Cobalt 8-12%     · Iris 3-5%     · Citron 2-4%

   THE CITRON RULE. Citron means "act here". It carries primary
   CTAs on ink navy grounds ONLY, always with navy text, and does
   no decorative work — no dots, no underlines, no markers. On a
   light ground it is 1.5:1 against white and fails WCAG 1.4.11
   for the button's own edge, so light-ground CTAs are cobalt.

   Citron appears exactly three times: the header Express Interest
   button, the hero Get Early Access button, and the form submit.
   (The consent banner's Accept is the fourth, and it sits on its
   own navy bar — it is chrome, not page content.) Adding another
   is a brand decision, not a build decision.

   STRUCTURE. Panels and section blocks are square — no radius.
   Cards were removed from this direction deliberately. Section
   headings sit above a 2px navy rule; columns are divided by 1px
   hairlines, never by borders around a box.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--lattice-cool-white);
  color: var(--lattice-text-body);
  font-family: var(--lattice-font-ui);
  font-size: var(--lattice-size-body);
  line-height: var(--lattice-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }


/* ---------------- Layout primitives ---------------- */

.wrap {
  max-width: var(--lattice-content-max);
  margin-inline: auto;
  padding-inline: var(--lattice-gutter);
}

section { padding-block: var(--lattice-section-pad); }

/* The sticky header would otherwise sit on top of an anchored heading. */
[id] { scroll-margin-top: var(--lattice-header-offset); }

/* Grounds alternate deliberately: navy · white · grey · white · navy ·
   white · grey · navy · white. No two adjacent sections share a ground,
   and the page does not read as a strict navy/white stripe. */
.ground-white { background: var(--lattice-cool-white); }
.ground-mist  { background: var(--lattice-mist-grey); }
.ground-navy  { background: var(--lattice-ink-navy); }

/* Two balanced columns. auto-fit collapses to one column below the
   minmax floor without needing the 900px breakpoint. */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}


/* ---------------- Type ---------------- */

h1, h2, h3 {
  font-family: var(--lattice-font-display);
  color: var(--lattice-ink-navy);
  text-wrap: pretty;
}

h1 {
  font-weight: 500;
  font-size: var(--lattice-size-hero);
  line-height: var(--lattice-lh-hero);
  letter-spacing: var(--lattice-track-hero);
}

/* Section headline. */
h2 {
  font-weight: 600;
  font-size: var(--lattice-size-section);
  line-height: var(--lattice-lh-section);
  letter-spacing: var(--lattice-track-section);
}

/* Large statement, used in the navy sections and Why Now. */
.statement {
  font-weight: 500;
  font-size: var(--lattice-size-statement);
  line-height: var(--lattice-lh-statement);
  letter-spacing: var(--lattice-track-statement);
}
.statement-light { color: var(--lattice-text-on-navy); }
.statement-join {
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  line-height: var(--lattice-lh-section);
}
.statement-sm {
  font-family: var(--lattice-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: var(--lattice-track-section);
  color: var(--lattice-ink-navy);
  text-wrap: pretty;
}

/* Why Now sets its heading in Newsreader 600 at the statement scale. */
.why .statement { font-weight: 600; }

h3 {
  font-weight: 600;
  font-size: var(--lattice-size-column);
  line-height: 1.2;
}

/* Italic carries emphasis in this system — never colour. */
em { font-style: italic; }

p + p { margin-top: 1.1rem; }

/* Small label above a heading. Inter 600, uppercase, cobalt on light
   grounds and iris on navy. No lead rule, no tint chip. */
.eyebrow {
  display: block;
  font-family: var(--lattice-font-ui);
  font-size: var(--lattice-size-label);
  font-weight: 600;
  letter-spacing: var(--lattice-track-label);
  text-transform: uppercase;
  color: var(--lattice-cobalt);
  margin-bottom: 1.1rem;
}
.eyebrow-iris { color: var(--lattice-iris); }

/* 01 / 02 / 03 markers. */
.numeral {
  font-family: var(--lattice-font-ui);
  font-size: var(--lattice-size-label);
  font-weight: 600;
  letter-spacing: var(--lattice-track-numeral);
  color: var(--lattice-cobalt);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--lattice-citron);
  color: var(--lattice-ink-navy);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }


/* ---------------- Controls ---------------- */

a { color: var(--lattice-cobalt); text-decoration: none; }
a:hover { color: var(--lattice-ink-navy); }

.btn {
  font-family: var(--lattice-font-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: var(--lattice-radius-control);
  cursor: pointer;
  transition: background var(--lattice-motion-base),
              transform var(--lattice-motion-fast),
              color var(--lattice-motion-base);
}
.btn:hover { color: inherit; }

/* Primary action on NAVY grounds only. Navy text, never white. */
.btn-citron {
  background: var(--lattice-citron);
  color: var(--lattice-ink-navy);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.6rem;
}
.btn-citron:hover {
  background: var(--lattice-citron-hover);
  color: var(--lattice-ink-navy);
  transform: translateY(-1px);
}

/* Primary action on LIGHT grounds. */
.btn-cobalt {
  background: var(--lattice-cobalt);
  color: var(--lattice-cool-white);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.75rem 1.3rem;
}
.btn-cobalt:hover {
  background: var(--lattice-cobalt-hover);
  color: var(--lattice-cool-white);
}

.btn-ghost {
  background: transparent;
  color: var(--lattice-text-on-navy);
  font-weight: 500;
  border: 1px solid var(--lattice-border-on-navy);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--lattice-text-on-navy);
}

.btn-sm { font-size: 0.82rem; padding: 0.68rem 1.15rem; }
.btn-block { width: 100%; padding-block: 0.95rem; }

/* Cobalt text link with a travelling arrow. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--lattice-cobalt);
  transition: gap var(--lattice-motion-base), color var(--lattice-motion-base);
}
.text-link:hover { gap: 0.7rem; color: var(--lattice-ink-navy); }

.text-link-sm { font-weight: 500; font-size: 0.88rem; }

/* Focus: citron on navy, cobalt on light. */
:focus-visible {
  outline: 2px solid var(--lattice-cobalt);
  outline-offset: 2px;
}
.ground-navy :focus-visible,
.site-header :focus-visible,
.consent :focus-visible {
  outline-color: var(--lattice-citron);
}


/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--lattice-ink-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  min-height: 80px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.75rem;
  color: var(--lattice-text-on-navy);
}
.brand:hover { color: var(--lattice-text-on-navy); }
.brand .mark { color: var(--lattice-text-on-navy); flex: none; }

.wordmark {
  font-family: var(--lattice-font-ui);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: var(--lattice-track-wordmark);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.9rem);
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
}
.nav-links a {
  font-size: var(--lattice-size-ui);
  font-weight: 500;
  color: var(--lattice-text-on-navy-2);
  transition: color var(--lattice-motion-base);
}
.nav-links a:hover { color: var(--lattice-text-on-navy); }
/* The nav link colour must not reach the button sitting inside the nav. */
.nav-links a.btn-citron,
.nav-links a.btn-citron:hover { color: var(--lattice-ink-navy); }


/* ---------------- Hero ---------------- */

.hero {
  padding-block: 0;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.42fr 0.58fr;
  align-items: stretch;
}
.hero-copy {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem) 0;
}
.hero-copy h1 {
  color: var(--lattice-text-on-navy);
  margin-top: 1.6rem;
}
.hero-deck {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--lattice-text-on-navy-2);
  line-height: 1.55;
  max-width: 42ch;
  margin-top: 1.7rem;
}
.hero-cta { margin-top: 2.5rem; }
.hero-dates {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--lattice-text-on-navy);
  margin-top: 2.5rem;
}

/* The 1px rule between the columns. It disappears when they stack. */
.hero-figure {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-diagram { width: 100%; max-width: 320px; height: auto; }
.diagram-links { stroke: var(--lattice-cobalt); }
.node-iris   { fill: var(--lattice-iris); }
.node-cobalt { fill: var(--lattice-cobalt); }


/* ---------------- Section heading rows ---------------- */

/* Heading left, a short note right, above a 2px navy rule. */
.section-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--lattice-ink-navy);
}
.section-head-note {
  font-size: var(--lattice-size-body-lg);
  color: var(--lattice-text-body);
}

/* The label-only variant: eyebrow left, muted note right, on one line. */
.section-head-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
}
.section-head-inline .eyebrow { margin-bottom: 0; }
.section-head-inline .section-head-note {
  font-size: 0.85rem;
  color: var(--lattice-text-muted);
}


/* ---------------- What We're Building ---------------- */

/* The section pads its top only; the navy pull band closes it. */
.building { padding-bottom: 0; }

.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pillars > :first-child {
  padding: 2.5rem clamp(1.5rem, 3vw, 3rem) 3rem 0;
  border-right: 1px solid var(--lattice-border);
}
.pillars > :last-child {
  padding: 2.5rem 0 3rem clamp(1.5rem, 3vw, 3rem);
}

/* Numeral and heading share a baseline. */
.block-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.pillar h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.pillar p { margin-top: 1.1rem; line-height: var(--lattice-lh-body-loose); }
.lead-line { font-weight: 600; color: var(--lattice-ink-navy); }

/* Full-bleed navy band carrying the pull quote. */
.pull-band { padding: clamp(3rem, 6vw, 4.5rem) var(--lattice-gutter); }
.pull {
  font-family: var(--lattice-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--lattice-size-pull);
  line-height: 1.25;
  color: var(--lattice-text-on-navy);
  text-align: center;
  text-wrap: pretty;
  max-width: 26ch;
  margin-inline: auto;
}


/* ---------------- Why Now ---------------- */

.ruled-body {
  border-left: 2px solid var(--lattice-ink-navy);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.ruled-body p {
  font-size: var(--lattice-size-body-lg);
  line-height: var(--lattice-lh-body-loose);
}
.ruled-body p + p { margin-top: 1.35rem; }

/* A phrase lifted into the display face, inline, to mark it. */
.inline-display {
  font-family: var(--lattice-font-display);
  font-style: italic;
  color: var(--lattice-ink-navy);
}


/* ---------------- What We're Starting With ---------------- */

.offers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.offer {
  display: flex;
  flex-direction: column;
  padding-top: 2rem;
}
.offers > :not(:last-child) { border-right: 1px solid var(--lattice-border); }
.offers > :first-child  { padding-right: clamp(1.25rem, 2.4vw, 2rem); }
.offers > :nth-child(2) { padding-inline: clamp(1.25rem, 2.4vw, 2rem); }
.offers > :last-child   { padding-left: clamp(1.25rem, 2.4vw, 2rem); }

.timing {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lattice-text-muted);
  margin-top: 0.9rem;
}
.offer-body {
  font-size: 0.98rem;
  margin-top: 0.9rem;
  flex: 1;
}
.offer .text-link { margin-top: 1.5rem; align-self: flex-start; }

/* The two-column variant, for Online Community + Membership sitting below
   the Peer Circle feature. The 1fr 1fr 1fr rule above assumes three. */
.offers-two { grid-template-columns: 1fr 1fr; }
/* With two children, :nth-child(2) is also :last-child, so it picks up
   padding-inline from the three-column rule. Only the left side is wanted. */
.offers-two > :last-child { padding-right: 0; }
.offer h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }


/* ---------------- Peer Circles (feature) ----------------

   Introduction, three facts, then what a Circle actually does in the
   page's existing three-column rhythm. */

.circle-lead {
  font-size: var(--lattice-size-body-lg);
  line-height: var(--lattice-lh-body-loose);
  max-width: 68ch;
  margin-top: 2.25rem;
}

/* Three facts, not a pricing table. The label sits above the value, both
   at body weight, so no single figure shouts. */
.circle-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 2.5rem clamp(2.5rem, 6vw, 5rem);
  margin-top: 2rem;
  padding-block: 1.4rem;
  border-block: 1px solid var(--lattice-border);
}
.circle-facts dt {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lattice-text-muted);
}
.circle-facts dd {
  font-size: 1.05rem;
  color: var(--lattice-ink-navy);
  margin-top: 0.35rem;
}

/* The practical footnote to the three columns above — quieter than body,
   louder than fine print. */
.circle-format {
  font-size: 0.95rem;
  color: var(--lattice-text-muted);
  max-width: 62ch;
  margin-top: 2.25rem;
}

.circle-cta { margin-top: 1.75rem; }
.circle-note {
  font-size: 0.9rem;
  color: var(--lattice-text-muted);
  margin-top: 1rem;
  max-width: 42ch;
}

/* A quieter divider than the 2px navy section rule. */
.rule-soft {
  border: 0;
  border-top: 1px solid var(--lattice-border);
  margin-block: clamp(2.5rem, 5vw, 3.5rem);
}


/* ---------------- Who It's For ---------------- */

.who-intro {
  font-size: 1.12rem;
  color: var(--lattice-text-on-navy);
  margin-top: 1.5rem;
}

/* Numerals are generated, so the markup stays a plain ordered list. */
.who-list {
  list-style: none;
  counter-reset: who;
  border-top: 1px solid var(--lattice-border-on-navy);
}
.who-list li {
  counter-increment: who;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0.75rem;
  align-items: start;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--lattice-border-on-navy);
  font-size: 1.08rem;
  color: var(--lattice-text-on-navy);
  line-height: 1.55;
}
.who-list li::before {
  content: counter(who, decimal-leading-zero);
  font-family: var(--lattice-font-ui);
  font-size: var(--lattice-size-label);
  font-weight: 600;
  letter-spacing: var(--lattice-track-numeral);
  color: var(--lattice-iris);
  padding-top: 0.35rem;
}

.who-close {
  font-family: var(--lattice-font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--lattice-text-on-navy);
  text-align: center;
  text-wrap: pretty;
  max-width: 58ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}


/* ---------------- For Organizations ---------------- */

/* Deliberately smaller in footprint than the sections around it. */
.orgs { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.org-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--lattice-cool-white);
  border: 1px solid var(--lattice-border-strong);
  border-top: 2px solid var(--lattice-ink-navy);
  padding: clamp(1.5rem, 2.6vw, 2rem);
}
.orgs .eyebrow { margin-bottom: 0.8rem; }
.org-heading {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.org-body {
  font-size: 0.98rem;
  margin-top: 0.65rem;
  max-width: 52ch;
}
.org-cta { margin-top: 0; }


/* ---------------- Who We Are ---------------- */

.whoweare-intro { margin-top: clamp(2rem, 4vw, 2.75rem); }
.whoweare-intro p { font-size: 1.05rem; line-height: var(--lattice-lh-body-loose); }
/* Must out-specify the rule above, or the display line picks up body leading. */
.whoweare-intro p.statement-sm {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.25;
}

/* Explicit three, not auto-fit: with portraits in play, auto-fit kept
   three columns down to ~600px and squeezed the photos to postage stamps.
   The breakpoints below step it down deliberately. */
.founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--lattice-border);
}
.founder { display: flex; flex-direction: column; gap: 0.45rem; align-items: start; }
.founder-name {
  font-family: var(--lattice-font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: var(--lattice-ink-navy);
}
.founder-bio {
  font-size: 0.92rem;
  line-height: var(--lattice-lh-body-loose);
}
.founder .text-link-sm { margin-top: 0.35rem; }

/* Square corners, fixed ratio, shared wash — see brand-tokens.css. The
   aspect-ratio plus width/height on the <img> is what holds the row open
   before the lazy image arrives, so nothing jumps. */
.founder-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lattice-mist-grey);
  margin-bottom: 0.55rem;
}
/* No filter here: the muting, contrast and shadow-cooling are graded into
   the files themselves, per image. See tools/founders.py. */
.founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lattice-portrait-wash);
  pointer-events: none;
}


/* ---------------- Advisory ----------------

   Same mist-grey ground as the founders, one hairline and a full spacing
   step below them. An H2 semantically, but sized well under "The founding
   team" so the hierarchy reads correctly.

   Currently unused: the Advisory markup is held back for a later release
   (see the note in index.html). These rules are kept so restoring that
   section is a markup-only change. */

.rule-soft-wide { margin-block: clamp(3rem, 6vw, 4.5rem); }

.advisory-heading {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: var(--lattice-track-section);
}
.advisors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem 2rem;
  margin-top: 1.75rem;
}
.advisor { display: flex; flex-direction: column; gap: 0.25rem; align-items: start; }
.advisor-name {
  font-family: var(--lattice-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--lattice-ink-navy);
}
.advisor-role {
  font-size: 0.88rem;
  color: var(--lattice-text-muted);
}
.advisor .text-link-sm { margin-top: 0.3rem; }


/* ---------------- Join ---------------- */

.join {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.join-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.join-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.join-body {
  font-size: 1.05rem;
  color: var(--lattice-text-on-navy-2);
  margin-top: 1.5rem;
}
.join-pitch {
  font-family: var(--lattice-font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--lattice-text-on-navy);
  text-wrap: pretty;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}


/* ---------------- The form ---------------- */

/* Square panel, faint white fill. */
.form-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--lattice-border-on-navy);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.signup { display: flex; flex-direction: column; gap: 0.75rem; }

.hp { position: absolute; left: -9999px; }

.field { display: block; }
.field + .field { margin-top: 0; }

/* Fields on navy. The explicit ::placeholder and option colours matter:
   without them placeholders render at ~3.3:1 and the open dropdown
   paints white-on-white. */
.signup input,
.signup select {
  width: 100%;
  font-family: var(--lattice-font-ui);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--lattice-text-on-navy);
  background: rgba(11, 27, 58, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--lattice-radius-control);
  padding: 0.9rem 1rem;
}
.signup input::placeholder { color: var(--lattice-text-on-navy-2); opacity: 1; }
.signup select option { background: var(--lattice-ink-navy); color: var(--lattice-text-on-navy); }
.signup input:focus,
.signup select:focus {
  outline: 2px solid var(--lattice-citron);
  outline-offset: 1px;
}
.signup [aria-invalid="true"] { border-color: var(--lattice-error-on-navy); }

/* #B3261E is unreadable on navy; this is the on-navy equivalent. */
.error-text {
  font-size: 0.82rem;
  color: var(--lattice-error-on-navy);
  margin-top: 0.4rem;
}
.error-text:empty { display: none; }

.fineprint {
  font-size: 0.82rem;
  color: var(--lattice-text-on-navy-2);
  text-align: center;
  margin-top: 0.35rem;
}

/* Success replaces the form inside the same panel — no navigation. */
.form-done {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 12rem;
  justify-content: center;
}
.form-done h3 {
  font-family: var(--lattice-font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--lattice-text-on-navy);
}
.form-done p { color: var(--lattice-text-on-navy-2); margin-top: 0; }


/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--lattice-cool-white);
  border-top: 2px solid var(--lattice-ink-navy);
  padding-block: 3rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}
.f-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--lattice-ink-navy); }
.f-brand .mark { color: var(--lattice-ink-navy); flex: none; }
.f-brand .wordmark { font-size: 0.88rem; color: var(--lattice-ink-navy); }
.f-dates { font-size: 0.9rem; color: var(--lattice-text-muted); margin-top: 0.7rem; }
.f-links { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.f-links a { font-size: 0.92rem; }
.copyright {
  width: 100%;
  border-top: 1px solid var(--lattice-border);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--lattice-text-muted);
  margin-top: 0;
}


/* ---------------- Cookie consent ---------------- */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 150;
  background: var(--lattice-ink-navy);
  border-top: 1px solid var(--lattice-border-on-navy);
  padding-block: 1.1rem;
}
.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.consent-title {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: var(--lattice-track-label);
  text-transform: uppercase;
  color: var(--lattice-text-on-navy);
}
.consent-text {
  font-size: 0.9rem;
  color: var(--lattice-text-on-navy-2);
  max-width: 60ch;
  margin-top: 0.35rem;
}
.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }


/* ---------------- Responsive ---------------- */

/* One breakpoint. The three grids with hairline dividers — the hero, the
   two pillars and the three offer columns — carry [data-stack].
   This rule matters: without it the vertical dividers survive the stack
   and draw rules that point at nothing. */
@media (max-width: 900px) {
  [data-stack] {
    grid-template-columns: 1fr;
    row-gap: 2.75rem;
  }
  /* !important on purpose: the per-section divider rules below are more
     specific than this one, and a vertical rule that survives the stack
     draws a line pointing at nothing. This must win, always. */
  [data-stack] > * {
    border-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .hero-copy { padding-bottom: 0; }
  .hero-figure { padding-top: 0; padding-bottom: clamp(3rem, 8vw, 4rem); }
  .hero-diagram { max-width: 260px; }

  .offers > * { padding-top: 0; }
  .pillars > * { padding-block: 0; }

  .founders { grid-template-columns: repeat(2, 1fr); }
  .advisors { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .header-inner { min-height: 0; padding-block: 0.75rem; }
  .nav-links { gap: 0.9rem 1.1rem; }
  .footer-inner { flex-direction: column; }

  /* The three facts stop fitting side by side well before this width. */
  .circle-facts { grid-template-columns: 1fr; gap: 1.1rem; }

  /* Three stacked 4:5 portraits at full width would be a scroll in itself.
     The photo moves alongside the text instead. */
  .founders { grid-template-columns: 1fr; gap: 2rem; }
  .founder {
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: 1.1rem;
    align-items: start;
  }
  .founder-photo { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .founder-name,
  .founder-bio,
  .founder .text-link-sm { grid-column: 2; }

  .advisors { grid-template-columns: 1fr; }
}