/* ==========================================================================
   Mission Grant — design system

   Tokens and component styles lifted verbatim from the team's standalone
   design file. Values are unchanged; only the delivery mechanism differs
   (shared stylesheet + media queries instead of per-element inline styles).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — Satoshi 400 / 500 / 700 / 900
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../fonts/Satoshi-Black.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg:          #000000;  /* page background      */
  --bg-alt:      #060419;  /* alternating band     */
  --card:        #131125;  /* raised card on dark  */
  --border:      #4e4e6c;  /* hairline on dark     */
  --accent:      #d7d9f6;  /* accent border / rule */

  --text:        #ffffff;
  --text-soft:   #d9dbdf;
  --text-muted:  #9393a9;

  --light-bg:     #ffffff; /* light section background */
  --light-card:   #f6f7fd; /* raised card on light     */
  --light-border: #e5e7eb; /* hairline on light        */
  --ink:          #060419; /* text on light            */

  --radius-card: 12px;
  --radius-pill: 9999px;
  --radius-img:  20px;

  --shell:   1240px;       /* standard content width */
  --gutter:  40px;
  --band:    83.75px;      /* vertical section rhythm */

  --font: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; }

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

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.shell         { max-width: var(--shell); margin: 0 auto; padding: var(--band) var(--gutter); }
.shell--mid    { max-width: 1000px; }
.shell--prose  { max-width: 900px; }
.shell--form   { max-width: 800px; }
.shell--narrow { max-width: 700px; }

.band       { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band--last { border-bottom: none; }

.center { text-align: center; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

h1, h2, h3 { margin: 0; font-weight: 700; }

.h-hero    { font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 24px; }
.h-section { font-size: 48px; line-height: 1.15; margin: 16px 0 40px; }
.h-mid     { font-size: 40px; line-height: 1.2;  margin: 16px 0 32px; }
.h-sub     { font-size: 36px; line-height: 1.2;  margin: 16px 0 32px; }
.h-card    { font-size: 28px; line-height: 1.25; margin: 16px 0 20px; }

.lede    { font-size: 20px; line-height: 1.5; color: var(--text-soft); margin: 0 0 32px; max-width: 560px; }
.body-lg { font-size: 18px; line-height: 1.7; color: var(--text-soft); margin: 0 0 16px; }
.body    { font-size: 16px; line-height: 1.7; color: var(--text-soft); margin: 0 0 16px; }
.body-sm { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.note    { font-size: 14px; color: var(--text-muted); margin: 0; }
.fine    { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.strong-line { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.muted { color: var(--text-muted); }
.soft  { color: var(--text-soft); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 160ms ease, background 160ms ease, color 160ms ease;
}
.btn--primary { background: var(--text); color: #000000; }
.btn--ghost   { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ink     { background: var(--ink); color: var(--text); }
.btn--sm      { padding: 12px 22px; font-size: 14px; }
.btn--block   { display: block; width: 100%; text-align: center; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.btn-row--center { justify-content: center; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Pills / chips
   -------------------------------------------------------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pill-row--center { justify-content: center; }

.pill {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 14px;
  color: var(--text-soft);
}
.pill--solid {
  background: var(--card);
  border-color: transparent;
  padding: 12px 22px;
  font-size: 15px;
  color: var(--text);
}
.pill--accent { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.grid  { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid--tight { gap: 20px; }
.span-all { grid-column: 1 / -1; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
}
.card--plain  { background: var(--card); border-color: transparent; }
.card--hollow { background: transparent; border: 1px solid var(--border); padding: 24px; }
.card--accent { border-color: var(--accent); }
.card--roomy  { padding: 40px; }

.stat-figure { font-size: 36px; font-weight: 700; margin-bottom: 8px; }
.stat-note   { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Timeline — horizontal on desktop/laptop, vertical on tablet and phone.

   One set of markup drives both: the same node + card, re-flowed. The
   connector is drawn as a per-item segment reaching to the NEXT node rather
   than one long line on the container — with cards of unequal height, a
   single container-spanning line cannot stay anchored to the nodes.
   -------------------------------------------------------------------------- */
.tl {
  --tl-node: 38px;   /* node diameter; the connector maths depends on it */
  --tl-gap:  18px;   /* space between steps */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tl-gap);
}

.tl__step { position: relative; display: flex; min-width: 0; }

.tl__node {
  position: relative;
  z-index: 1;          /* above the connector segment */
  flex: none;
  width: var(--tl-node);
  height: var(--tl-node);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
}
.tl__num { position: relative; z-index: 1; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }

.tl__card {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 18px 18px 20px;
  transition: background 200ms ease, border-color 200ms ease;
}

.tl__when {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.tl__title { font-size: 18px; margin: 0 0 8px; }
.tl__desc  { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ── Horizontal: desktop and laptop ─────────────────────────────────────
   Node sits on the rail, card hangs beneath it. */
@media (min-width: 1025px) {
  .tl { grid-template-columns: repeat(5, 1fr); }
  /* Grid rows default to stretch, so every .tl__step is already as tall as the
     tallest. The card then claims the leftover height and all five bottom
     edges line up — descriptions here run from one line to four. */
  .tl__step { flex-direction: column; }
  .tl__node { margin-bottom: 20px; }

  /* Segment runs from this node's centre to the next node's centre: across
     the rest of this column (100% - half a node) plus the gap plus half of
     the next node. */
  .tl__step::before {
    content: '';
    position: absolute;
    top: calc(var(--tl-node) / 2 - 1px);
    left: calc(var(--tl-node) / 2);
    width: calc(100% - var(--tl-node) / 2 + var(--tl-gap) + var(--tl-node) / 2);
    height: 2px;
    background: var(--border);
  }
  .tl__step:last-child::before { display: none; }

  /* Accent rule on the edge nearest the node. Width only — the colour is set
     in theme.css, which loads later and whose `border-color` shorthand would
     otherwise overwrite a border-top-color set here. */
  .tl__card { flex: 1; border-top-width: 2px; }
}

/* ── Vertical: tablet and phone ─────────────────────────────────────────
   Node in a left rail, card to its right. */
@media (max-width: 1024px) {
  .tl { --tl-gap: 14px; grid-template-columns: 1fr; }
  .tl__step { flex-direction: row; align-items: flex-start; gap: 16px; }

  /* Runs from under this node to the top of the next one. */
  .tl__step::before {
    content: '';
    position: absolute;
    top: var(--tl-node);
    left: calc(var(--tl-node) / 2 - 1px);
    width: 2px;
    height: calc(100% - var(--tl-node) + var(--tl-gap));
    background: var(--border);
  }
  .tl__step:last-child::before { display: none; }

  .tl__card { flex: 1; border-left-width: 2px; }
}

@media (max-width: 720px) {
  .tl { --tl-node: 34px; }
  .tl__title { font-size: 17px; }
}

/* Image placeholder — swap the inner text for a real <img> when art is ready */
.media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-img);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.media > img,
.media > picture { width: 100%; height: 100%; border-radius: inherit; display: block; }
.media > img { object-fit: cover; }
.media > picture > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* The 24px padding on .media is for the placeholder's centred label. Once a
   real photo is in the slot that padding reads as a dark frame around it, so
   a filled slot drops it and the image runs to the rounded border. */
.media--photo { padding: 0; }

/* A portrait photograph in the default 4/3 slot gets cropped through the
   subject's head. This ratio is close enough to the source's 3/4 that `cover`
   trims the edges rather than the content, and the 30% object-position keeps
   the crop biased toward the face rather than dead centre. */
.media--portrait { aspect-ratio: 4 / 5; }
.media--portrait > picture > img { object-position: center 30%; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}

/* The glass lives on a pseudo-element, not on .nav itself. iOS Safari
   composites a sticky element that ALSO carries backdrop-filter from a stale
   position while scrolling: the bar lags behind the top of the screen and
   leaves a strip of page above it. Keeping .nav filter-free fixes the stick;
   the ::before still blurs everything that passes under it. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Brand lockup — the colourful horizontal variant, rebuilt.

   The supplied SVG sets its wordmark in Figtree, which isn't loaded here and
   would fall back to Helvetica and clash with the rest of the type. So the
   MARK is inlined as SVG with the brand gradient, and the wordmark is real
   Satoshi text carrying the same gradient via background-clip. The source
   runs one diagonal sweep across the whole lockup (violet -> pink -> coral),
   so the mark takes the first half of the ramp and the wordmark continues
   from where it left off — one sweep, left to right, as drawn. */
.nav__brand { display: flex; align-items: center; gap: 11px; line-height: 1.1; }
.brand__mark { width: 32px; height: 32px; flex: none; }
.nav__text  { display: flex; flex-direction: column; }

.nav__name,
.brand__word {
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #DC8BC4 0%, #EC8CC0 35%, #F9976A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nav__name { font-size: 19px; }

/* Smaller than the name so the lockup reads as one unit with a caption,
   not two competing lines. */
.nav__sub { font-size: 11px; letter-spacing: 0.01em; color: var(--text-muted); }

/* Desktop: links + CTA sit together on the right. Mobile: this whole block
   becomes the hamburger panel. */
.nav__menu  { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.nav__links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.nav__links a { font-size: 14px; color: var(--text-soft); }
.nav__links a[aria-current='page'] { color: var(--text); font-weight: 700; }

/* Hamburger — hidden on desktop */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 200ms ease, opacity 150ms ease;
}
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.hero__badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin-bottom: 24px;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split--tight { gap: 40px; }
.split--about { grid-template-columns: 0.9fr 1.1fr; align-items: center; }

/* --------------------------------------------------------------------------
   Light section
   -------------------------------------------------------------------------- */
.light {
  background: var(--light-bg);
  color: var(--ink);
  border-top: 1px solid var(--border);
}

.panel {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-card);
  padding: 48px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: left;
}
.panel__price { font-size: 48px; font-weight: 700; }
.panel__label {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 12px;
}
.panel p { font-size: 15px; line-height: 1.7; margin: 0; }

/* --------------------------------------------------------------------------
   FAQ — each row is its own rounded card rather than a hairline-separated
   list. Rows stay real <details>, so without JS every answer still opens;
   faq.js adds search, single-open, and the height animation on top.
   -------------------------------------------------------------------------- */
.faqs { display: flex; flex-direction: column; gap: 12px; }

.faq-search { position: relative; display: flex; align-items: center; }
/* An explicit `display` outranks the UA stylesheet's [hidden] { display:none },
   so anything given one here has to opt back out by hand. */
.faq-search[hidden],
.faq-search__clear[hidden] { display: none; }
.faq-search__ico {
  position: absolute; left: 18px;
  width: 18px; height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.faq-search__input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 46px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  appearance: none;
}
.faq-search__input::placeholder { color: var(--text-muted); }
/* The native clear affordance would sit on top of our own button. */
.faq-search__input::-webkit-search-cancel-button,
.faq-search__input::-webkit-search-decoration { appearance: none; display: none; }

.faq-search__clear {
  position: absolute; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.faq-search__clear svg { width: 15px; height: 15px; }
.faq-search__clear:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.faq[hidden] { display: none; }

.faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__chev {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 3px;
  color: var(--text-muted);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq[open] .faq__chev { transform: rotate(180deg); }

.faq__panel { overflow: hidden; }
.faq__a {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-soft);
}

.faq mark {
  background: rgba(255, 155, 106, 0.32);
  color: var(--text);
  border-radius: 3px;
  padding: 0 1px;
}

.faq-empty {
  margin: 0;
  padding: 32px 8px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Lead form success panel — replaces the form once the lead is recorded.
   -------------------------------------------------------------------------- */
.form-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 40px 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
/* An explicit display outranks the UA stylesheet's [hidden] { display: none }. */
.form-done[hidden] { display: none; }
/* It takes focus programmatically so the outcome is announced; the ring on a
   whole panel is visual noise nobody asked for. */
.form-done:focus { outline: none; }

.form-done__mark { width: 52px; height: 52px; color: var(--accent-cool); margin-bottom: 20px; }

.form-done__title { font-size: 28px; line-height: 1.25; margin: 0 0 10px; }
.form-done__lede { font-size: 16px; line-height: 1.6; color: var(--text-soft); margin: 0 0 28px; }

/* Numbered, left-aligned inside a centred panel: a three-step sequence read
   centred is genuinely harder to follow. */
.form-done__steps {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: done;
  text-align: left;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-done__steps li {
  counter-increment: done;
  position: relative;
  padding-left: 38px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}
.form-done__steps li::before {
  content: counter(done);
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.form-done__steps strong { color: var(--text); }

.form-done__note { max-width: 460px; }

@media (max-width: 720px) {
  .form-done { padding: 32px 22px 28px; }
  .form-done__title { font-size: 23px; }
}

/* --------------------------------------------------------------------------
   Lead form status + honeypot
   -------------------------------------------------------------------------- */
.form__status {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.form__status--ok      { color: var(--text); font-weight: 700; }
.form__status--error   { color: var(--text); }
.form__status--pending { color: var(--text-muted); }

/* Off-screen rather than display:none — a bot reading the DOM still finds and
   fills it, which is the whole point, while nobody sees or tabs into it. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 20px; }
/* Same trap as .faq-search__clear: an explicit display beats the UA
   stylesheet's [hidden] { display: none }, so form.hidden = true left the
   whole form on screen above the success panel. */
.form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--text-muted); }
.field input,
.field select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  width: 100%;
}
.field select { appearance: none; cursor: pointer; }
.field input::placeholder { color: var(--text-muted); }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-soft); cursor: pointer;
}
.check input { accent-color: var(--accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); }
.footer__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 64px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 32px;
}
.footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.brand__mark--footer { width: 28px; height: 28px; }

/* Parent-company link. Underlined so it reads as a link at note size, where
   a colour shift alone would be too subtle. */
.footer__parent { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.footer__parent:hover { color: var(--text); opacity: 1; }

/* Inline link inside body prose. Underlined rather than colour-only, so it is
   still identifiable as a link without relying on colour. */
.link { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { opacity: 1; text-decoration-thickness: 2px; }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--text-soft); }
.footer__legal { border-top: 1px solid var(--border); padding-top: 24px; }
.footer__legal p { margin: 0 0 8px; }
.footer__legal p:last-child { margin: 0; }

/* --------------------------------------------------------------------------
   Responsive — the source design file is a fixed-width artboard; these are
   the breakpoints that make it behave as a real site. No desktop value changes.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero,
  .split,
  .split--about { grid-template-columns: 1fr; gap: 40px; }
  .split--about .media { order: 2; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .h-hero    { font-size: 48px; }
  .h-section { font-size: 38px; }
  .h-mid     { font-size: 32px; }
  .h-sub     { font-size: 30px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --band: 56px; }

  .nav { padding: 12px var(--gutter); }
  .nav__toggle { display: flex; }

  /* The menu becomes a dropdown panel anchored to the sticky nav. Near-opaque
     so page content cannot ghost through the links. */
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 20px;
    background: rgba(2, 1, 8, 0.97);
    border-bottom: 1px solid var(--border);
  }
  .nav--open .nav__menu { display: flex; }

  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a {
    font-size: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__cta { margin-top: 12px; text-align: center; }

  .grid--2,
  .grid--3,
  .grid--5,
  .check-grid { grid-template-columns: 1fr; }

  .h-hero    { font-size: 36px; }
  .h-section { font-size: 30px; }
  .h-mid     { font-size: 26px; }
  .h-sub     { font-size: 24px; }
  .h-card    { font-size: 22px; }

  .lede    { font-size: 17px; }
  .body-lg { font-size: 16px; }

  .card, .card--roomy { padding: 24px; }
  .panel { padding: 28px; }
  .panel__price { font-size: 38px; }

  .btn { padding: 14px 22px; font-size: 15px; }
  .footer__inner { padding: 48px var(--gutter) 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}