/* ==========================================================================
   Wild Field — home page
   Components first (they mirror design-system/components/), page sections after.
   No shadows, no gradients, no motion beyond 150ms colour transitions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   TopoPattern — decorative isolines, always aria-hidden
   Frozen SVGs from design-system/assets/pattern. `cover` + a horizontal
   background-position reproduces preserveAspectRatio="xMax|xMin YMid slice".
   -------------------------------------------------------------------------- */

.topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

.topo--hero {
  background-image: url('../assets/pattern/topo-hero.svg');
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 30%, #000 62%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 30%, #000 62%);
}

/* One green isoline (ring 9) and one blue (ring 13). The fade that keeps them
   clear of the copy is baked into the SVG, in the group's own coordinates. */
.topo--hero-accents {
  background-image: url('../assets/pattern/topo-hero-accents.svg');
  background-position: right center;
}

.topo--inverse {
  background-image: url('../assets/pattern/topo-inverse.svg');
  background-position: left center;
}

/* Card texture is drawn in a 600x400 viewBox so the isolines read at card
   scale; anchored bottom-right, as in the design draft. */
/* Second half of the page: the pattern has to carry through, otherwise the
   brand's only decorative motif dies after the second screen. Masked from the
   side the copy sits on. */
.section:has(> .topo),
.site-footer:has(> .topo) { overflow: hidden; }

.topo--section {
  background-image: url('../assets/pattern/topo-hero.svg');
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
}
.topo--footer {
  background-image: url('../assets/pattern/topo-inverse.svg');
  background-position: left bottom;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 40%, transparent 72%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 40%, transparent 72%);
}

/* --------------------------------------------------------------------------
   Logo
   Letters inherit `currentColor`; the isolines inside them are painted in the
   ground colour, so a tone switch only sets those two values.
   -------------------------------------------------------------------------- */

.logo {
  /* Proportions come from wf-lockup-horizontal.svg: against a 100-unit mark the
     wordmark is 44 units tall and clears the accent blocks by 18. Deriving both
     from --logo-size keeps header and footer true to the shipped lockup. */
  --logo-size: 44px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-size) * 0.18);
  color: var(--wf-ink);
  --logo-ground: var(--wf-paper);
}

.logo--paper {
  color: var(--wf-paper);
  --logo-ground: var(--wf-ink);
}

.logo__mark { flex-shrink: 0; }
.logo__mark--topo { stroke: var(--logo-ground); }

.logo__word {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: calc(var(--logo-size) * 0.44);
  line-height: 1;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: calc(var(--logo-size) * 0.045);
}

/* Footer lockup: 28px mark, isolines dropped per guidelines/logo-usage.md
   (below 40px they turn to mud — that is what wf-favicon.svg is for). */
.logo--sm { --logo-size: 28px; }

/* Keyboard users land on five in-page anchors before the content; this jumps
   past them. Off-screen until focused, never visible to a pointer. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: var(--wf-ink);
  color: var(--wf-paper);
  font-size: var(--text-ui);
  font-weight: var(--weight-body-medium);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--page-x);
  top: 12px;
  color: var(--wf-paper);
}

/* --------------------------------------------------------------------------
   Button
   Hover fills use the deep accents so paper text on them clears 4.5:1.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 28px;
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-sm);
  line-height: 1.2;
  border: var(--border-w-strong) solid transparent;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}

.btn--sm { padding: 10px 18px; font-size: var(--text-ui); }
.btn--lg { padding: 18px 32px; font-size: var(--text-body-size); }

.btn--primary {
  background: var(--wf-ink);
  border-color: var(--wf-ink);
  color: var(--wf-paper);
}
.btn:active { transform: translateY(1px); }
.btn--primary:hover {
  background: var(--wf-green-deep);
  border-color: var(--wf-green-deep);
  color: var(--wf-paper);
}
.btn--primary.btn--hover-blue:hover {
  background: var(--wf-blue-deep);
  border-color: var(--wf-blue-deep);
}

/* Primary on an ink ground */
.btn--paper {
  background: var(--wf-paper);
  border-color: var(--wf-paper);
  color: var(--wf-ink);
}
.btn--paper:hover {
  background: var(--wf-green-deep);
  border-color: var(--wf-green-deep);
  color: var(--wf-paper);
}

.btn--secondary {
  background: transparent;
  border-color: var(--wf-ink);
  color: var(--wf-ink);
}
.btn--secondary:hover {
  border-color: var(--text-accent-2);
  color: var(--text-accent-2);
}

/* --------------------------------------------------------------------------
   Badge — uppercase tracked label preceded by a flat accent square
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: none;
  color: var(--wf-ink);
}

.badge--sm { font-size: var(--text-label); color: var(--text-muted); }
.badge--xs { font-size: var(--text-micro); color: var(--text-muted); }
.badge--paper { color: var(--wf-ink-faint); }

.badge__square {
  width: var(--accent-square);
  height: var(--accent-square);
  flex-shrink: 0;
  /* Centre the square on the cap height of the first line (line-height 1.3),
     so a badge that wraps to two or three lines keeps its marker at the top */
  margin-top: calc((1.3em - var(--accent-square)) / 2);
  background: var(--wf-green);
}
.badge--sm .badge__square,
.badge--xs .badge__square {
  width: var(--accent-square-sm);
  height: var(--accent-square-sm);
  margin-top: calc((1.3em - var(--accent-square-sm)) / 2);
}
.badge__square--blue { background: var(--wf-blue); }
/* The ink ground swallows the standard green; the footer label takes the same
   light green the step numbers already use there. */
.badge__square--inverse { background: var(--wf-green-light); }

/* --------------------------------------------------------------------------
   Steps and FAQ — the founder-facing section
   Both reuse the open-column grid the spec list uses: a top hairline, no boxes.
   -------------------------------------------------------------------------- */

/* The label and the list are one block; the footer's own flex gap spaces it
   from the pitch above and the legal line below, so the list sets no margin. */
.site-footer__process {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-6) var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-w) solid var(--border-subtle);
}
/* Same shape as a spec-list cell — marker above, text below — so four steps
   read as parallel cells rather than four sentences in a row. */
.steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.steps__n {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h4);
  line-height: 1;
  color: var(--text-accent);
}
/* On the ink footer the hairline and the accent flip */
.steps--inverse { border-top-color: var(--border-inverse); }
.steps--inverse .steps__n { color: var(--text-accent-inverse); }

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--border-subtle);
}
.faq__item { display: flex; flex-direction: column; gap: var(--space-2); }
.faq__q {
  margin: 0;
  font-size: var(--text-body-size);
  font-weight: var(--weight-body-medium);
  line-height: 1.4;
}
.faq__a {
  margin: 0;
  max-width: 44ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Stat, Tag, SpecList, Card, ImageSlot, Quote
   -------------------------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__value {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-stat);
  line-height: var(--leading-heading);
}
.stat__label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  color: var(--text-muted);
}

.tag { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-body-sm); }
.tag__key { color: var(--text-muted); }
.tag__value { font-weight: var(--weight-body-medium); font-variant-numeric: tabular-nums; }

/* Open columns with a top hairline — never a bordered table: an odd cell
   count in a container-background grid leaves a solid grey hole. */
.spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-6) var(--space-7);
  border-top: var(--border-w) solid var(--border-subtle);
}
.spec-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
}
/* Excludes is the edge of the mandate, not a fifth thing we back — it takes the
   full row. That also kills the orphan: auto-fit lands on exactly four columns
   between roughly 1180px and 1400px, which left the fifth cell alone beside
   three empty slots on a 13" screen. */
#focus .spec-list__item:last-child { grid-column: 1 / -1; }
.spec-list__term {
  font-size: var(--text-label);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}
.spec-list__term--blue { color: var(--text-accent-2); }
.spec-list__definition {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 280px;
  padding: 32px 28px;
  border-radius: var(--radius-md);
}
.card--outlined { border: var(--border-w-strong) solid rgba(21, 23, 27, .25); }
.card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
}
.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 40px;   /* the handoff's card-title size: between h3 and h2 on the ramp */
  line-height: var(--leading-heading);
  text-transform: uppercase;
}
.card__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
/* Portraits are cropped to one composition before upload — head 60% of the
   frame height, eye line at 37% — so five faces sit at the same size. */
.team__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface-alt);
}


.quote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-7) var(--space-10);
  align-items: end;
}
.quote__statement {
  grid-column: span 2;
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display-light);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  padding: var(--section-y) var(--page-x);
}
.section--alt { background: var(--surface-alt); }
.section--inverse {
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
/* Keyboard focus on ink: the deep blue ring measures 2.5:1 against #15171B.
   The light blue is the token already written for accent text on ink, 7.5:1. */
.section--inverse,
.site-footer { --focus-ring: var(--wf-blue-light); }
.section__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  text-transform: uppercase;
}
.section__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.prose { margin: 0; font-size: var(--text-body-size); line-height: var(--leading-relaxed); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Header — inside the hero, not sticky
   -------------------------------------------------------------------------- */

/* The header sits above the hero as its own landmark and, from 721px, stays
   at the top of the viewport so every anchor is one click from anywhere. At
   rest it is transparent over the hero's pattern; once the page has scrolled
   (html[data-scrolled], set by js/header.js) it takes the paper ground, a
   hairline and a tighter height. Without JS it simply stays transparent. */
.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--header-y) var(--page-x);
}
[data-scrolled] .site-header {
  background: rgba(242, 237, 228, .96);
  border-bottom: var(--border-w) solid var(--border-subtle);
  padding-block: var(--space-3);
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
}
.site-header__link {
  font-size: var(--text-ui);
  font-weight: var(--weight-body-medium);
  transition: color .15s;
}

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

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The header now stands above the hero, so the first screen is header + hero */
  min-height: calc(100vh - 2 * var(--header-y) - 44px);
  min-height: calc(100svh - 2 * var(--header-y) - 44px);
  overflow: hidden;
}
.hero__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(32px, 6vw, 96px) var(--page-x);
}
.hero__title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6) var(--space-9);
}
.hero__lead {
  margin: 0;
  max-width: 48ch;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
/* nowrap on both buttons + no shrink on the group: the paragraph wraps, not the labels */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}
.hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-7);
  padding: clamp(24px, 3vw, 40px) var(--page-x);
  border-top: var(--border-w) solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   The position
   -------------------------------------------------------------------------- */

.contrarian {
  position: relative;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-6) var(--space-10);
  align-items: start;
}
/* Both paragraphs share one grid cell so they keep the same left edge at every
   width — auto-placement stranded the second one in a side column at 1024. */
/* The left column is sized for the handoff's display heading (14ch at up to
   44px). It held a 14px badge instead, which is what left the column empty and
   the prose beside it reading as an undifferentiated slab. */
.contrarian__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.contrarian__heading {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(28px, 3vw, 44px);
  line-height: var(--leading-heading);
  text-transform: uppercase;
}
/* The heading carries the hierarchy now, so both paragraphs sit at one size,
   sharing a left and a right edge from the wrapper's own measure. */
.contrarian__body {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 56ch;
  font-size: var(--text-lead);
}
.contrarian__body > p {
  font-size: inherit;
  line-height: var(--leading-relaxed);
}

/* Lead-in to What we bring: who the advisors are, before what they do. */
.what-we-bring__lead {
  max-width: 58ch;
  font-size: var(--text-lead);
}

/* --------------------------------------------------------------------------
   Focus, Portfolio, Team
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--space-5) var(--space-7);
}
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-6);
}
.team {
  border-top: var(--border-w) solid var(--border-subtle);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-8) var(--space-7);
}
/* Partners, then advisors: the split the roles already make, drawn as one */
.team__group + .team__group {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--border-w) solid var(--border-subtle);
}
.team__member {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.team__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h4);
  line-height: var(--leading-heading);
  text-transform: none;
}
.team__role {
  font-size: var(--text-label);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  color: var(--text-accent);
}
/* One profile link per card, in the role's label style; the arrow is a mask so
   it takes the text colour and needs no glyph the webfont does not carry. */
.team__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  font-size: var(--text-label);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-subtle);
}
.team__link:hover { color: var(--wf-blue-deep); text-decoration-color: currentColor; }
.team__link::after {
  content: '';
  width: .62em;
  height: .62em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.team__bio {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Contact / footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
  padding: var(--section-y) var(--page-x) clamp(24px, 3vw, 40px);
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.site-footer__row {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
}
.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.site-footer__note {
  margin: 0;
  max-width: 34ch;
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--wf-ink-faint);
}
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.site-footer__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.site-footer__label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--wf-ink-faint);
}
.site-footer__headline {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(40px, 6vw, 96px);   /* the handoff's footer display line */
  line-height: .95;
  text-transform: uppercase;
}
.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--border-inverse);
  font-size: var(--text-label);
  color: var(--wf-ink-faint);
}
.site-footer__disclaimer { max-width: 70ch; }

/* Links on the ink ground */
.section--inverse a:hover,
.site-footer a:hover { color: var(--wf-blue-light); }

/* --------------------------------------------------------------------------
   Narrow viewports
   The design specifies no breakpoints — clamp() and auto-fit carry the layout.
   The single exception is the header: four links plus a CTA do not fit beside
   the lockup below ~720px, so the nav drops to its own row under a hairline.
   A plain stacked row, in keeping with the brand: no overlay, no animation.
   -------------------------------------------------------------------------- */

/* Four fixed columns once there is room for them, so the count never depends on
   how wide the window happens to be. Below this the auto-fit rule takes over. */
@media (min-width: 900px) {
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1080px) {
  #focus .spec-list { grid-template-columns: repeat(4, 1fr); }
  /* Three to a row. The gutter takes the width a full-bleed card would have
     used, so each card is 85% of an even third — smaller portraits, same
     full-width row. (7.5% + 27px solves 3·card + 2·gap = W with card at
     0.85·(W − 64)/3.) */
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(7.5% + 27px);
  }
}

/* Between those widths auto-fit lands on three columns, which leaves Check size
   alone in the second row — the same orphan, one cell over. Two columns divide
   the four terms evenly. */
@media (min-width: 640px) and (max-width: 1079px) {
  #focus .spec-list { grid-template-columns: repeat(2, 1fr); }
}

/* The three-item lists (What we bring, the 404): three across once there is
   room, one below. Two columns would strand the third cell; four would leave
   an empty one under the hairline. */
@media (min-width: 900px) {
  #what-we-bring .spec-list,
  .notfound__spec { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  #what-we-bring .spec-list,
  .notfound__spec { grid-template-columns: 1fr; }
}

/* 13–14" laptops: the viewport is short, not narrow. 1280x800 gave the hero
   154px of vertical padding and a 115px headline, which pushed the stats strip
   — the page's proof block — below the fold. Compress the vertical rhythm only;
   widths and the wide-screen design are untouched. */
@media (min-width: 721px) and (max-height: 960px) {
  .hero__body {
    padding-block: clamp(24px, 3vh, 56px);
    gap: clamp(20px, 2.4vh, 32px);
  }
  .hero__title { font-size: clamp(56px, 7vw, 104px); }
  .hero__stats { padding-block: clamp(18px, 2.2vh, 32px); }
}

@media (max-width: 720px) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .site-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .site-header__nav {
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-w) solid var(--border-subtle);
  }
  .site-header__nav .btn { display: none; }

  /* On a phone only the button follows the reader: bottom-right, once the
     hero's own "Pitch us" has scrolled away, gone again over the contact
     block, which has the address. Flags come from js/header.js. */
  [data-past-hero]:not([data-at-end]) .site-header__cta-mobile {
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    padding: var(--space-3) var(--space-5);
  }

  /* In a one-column auto-fit grid, `grid-column: span 2` still reserves a
     second track and its gap, pushing the text past the gutter; span nothing. */
  .quote__statement {
    grid-column: auto;
    max-width: min(30ch, 100%);
  }
  .contrarian__body {
    grid-column: auto;
    max-width: 100%;
  }

  /* The first screen has to show the stats strip — the proof — not just the
     headline. Tighter vertical rhythm, a smaller display size, smaller figures.
     The phone hero is content-height: a viewport-based minimum would centre
     the copy and open a gap under the two-row header. */
  .hero { min-height: auto; }
  .hero__body {
    gap: var(--space-5);
    padding-block: 24px 28px;
  }
  .hero__title { font-size: clamp(44px, 12vw, 56px); }
  .hero__stats {
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-5);
  }
  .stat__value { font-size: clamp(32px, 9vw, 40px); }

  /* The accent isolines are masked for a wide frame; in a portrait one they
     cross the headline, which the design system forbids. With the header now
     outside the hero there is no room above the title to keep them in. */
  .topo--hero-accents { display: none; }

  /* Five portraits in one column ran to 3.5 screens; two columns */
  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }

  /* Five fund parameters in five sparse rows; two columns fit at 327px */
  .facts { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); }
}

@media (min-width: 721px) {
  /* Anchors land below the stuck header (12px padding twice, plus the 44px lockup) */
  html { scroll-padding-top: calc(2 * var(--space-3) + 44px + var(--space-2)); }
  .site-header { position: sticky; top: 0; }
  .site-header__top { display: contents; }
  .site-header__cta-mobile { display: none; }
}

/* Below 480px the four nav links need the full width; let them wrap */
/* Five links do not fit one phone row. Wrapping leaves four and a stranded
   fifth; three columns split them 3 + 2 and line the second row up under the
   first, so the break reads as a grid rather than an overflow. */
@media (max-width: 560px) {
  /* The button group refuses to shrink so the two labels never break mid-word.
     Below ~330px the pair is wider than the gutter allows, so let it wrap to
     two rows instead of running under the edge. */
  .hero__actions { flex-shrink: 1; }
  .hero__actions .btn { flex: 0 1 auto; }

  .site-header__nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: var(--space-7);
    row-gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Print
   Browsers drop backgrounds by default, so everything set light-on-ink would
   print light-on-white: The name and the whole contact block including the
   address. Bring those grounds back to ink-on-paper.
   -------------------------------------------------------------------------- */
@media print {
  .section--inverse,
  .site-footer { background: #fff; color: var(--wf-ink); }
  .badge--paper,
  .site-footer__label,
  .site-footer__bottom { color: var(--text-muted); }
  .steps--inverse,
  .site-footer__bottom { border-top-color: var(--border-subtle); }
  .steps--inverse .steps__n { color: var(--text-accent); }
  .badge__square--inverse { background: var(--wf-green); }
  /* The footer lockup is the inverse mark — light on white is nothing */
  .site-footer .logo,
  .skip-link { display: none; }
  .team__link::after { display: none; }
  .team__link[href]::before { content: attr(href); text-transform: none; letter-spacing: 0; }
  .team__link { font-size: var(--text-caption); }
}