/* ============================================================================
   SECTAIR — SITE STYLESHEET
   The single source of visual truth for every page under website/.

   ---------------------------------------------------------------------------
   DIRECTION
   ---------------------------------------------------------------------------
   World it borrows from: the fine-press private-client memorandum — the printed
   dossier a discreet brokerage hands to one client. Warm ivory stock, Cormorant
   set large, letterpress hairlines, gilt spent once like a foil stamp. This is
   the world the Sectair token system already encodes; this direction interprets
   it rather than replacing it.

   The move: the page is one continuous case file following a single lead from
   arrival to closing. Stages are numbered. The product's real interface appears
   as evidence at the moment it acts — never as a screenshot gallery.

   Refusals:
     1. No parallel offer menu. Offers appear only as stages of the lead's
        passage. (Also required by biz-os/product/positioning/offer-map.md.)
     2. No cool tints on the warm ground. --forest-soft is a tint, never a
        section ground.
     3. One accent: clay. Brass is a hairline weight, never a text emphasis.
     4. No uniform section padding. Density alternates by narrative role.

   ---------------------------------------------------------------------------
   PROVENANCE — READ BEFORE EDITING TOKENS
   ---------------------------------------------------------------------------
   The token block below MIRRORS the canonical system at
     biz-os/marketing/brand/sectair-brand-tokens.css
   which itself mirrors biz-os/marketing/brand/design-system/colors_and_type.css

   Canon wins. Never fix a color or size by editing it here — change it in the
   canonical file and re-mirror, or the site drifts away from the brand again.
   Drift is exactly how this site ended up with eight hand-rolled palettes.
   scripts/tests/website-token-parity.test.mjs enforces the mirror.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS — mirrored from canon
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces & lines */
  --paper:       #f6f1e9;  /* primary page ground — warm ivory */
  --paper-dark:  #ece4d7;  /* recessed / alternating ground */
  --white:       #fffdf9;  /* cards, raised surfaces */
  --line:        #d8cdb6;  /* hairline borders, dividers */
  --line-gold:   #cdb789;  /* gilded hairline — RULES ONLY, never text */

  /* Forest — primary brand */
  --forest:      #123d35;  /* primary brand, headings */
  --forest-mid:  #2f6a5b;  /* eyebrows, links, secondary accents */
  --forest-deep: #0c2a25;  /* dark anchor ground */
  --forest-soft: #e3efeb;  /* forest TINT — never a section ground */

  /* Copper — the one accent */
  --clay:        #b0532f;  /* primary CTA, one key highlight per view */
  --clay-deep:   #8a3d21;  /* pressed / active, copper text on light */
  --clay-light:  #f0dccf;  /* copper tint */

  /* Gilt & oxblood — rare, sparing */
  --gold:        #b08d4f;  /* antique brass — hairlines, key detail */
  --gold-soft:   #e7d9bd;
  --bordeaux:    #5c2230;

  /* Ink */
  --ink:         #191c1a;  /* primary text — green-black, never #000 */
  --ink-mid:     #44494a;  /* secondary text */
  --taupe:       #6f5f49;  /* muted text, captions — raised from #87745a 2026-08-16 to clear WCAG AA */

  /* Cream — text on the forest anchor */
  --cream:       #f6f1e9;
  --cream-dim:   #aec0b7;

  /* Type families */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale */
  --fs-display: 76px;
  --fs-h1:      54px;
  --fs-h2:      38px;
  --fs-h3:      26px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 10px;

  --lh-display: 1.02;
  --lh-h1:      1.05;
  --lh-h2:      1.1;
  --lh-h3:      1.2;
  --lh-body:    1.6;

  --tracking-eyebrow: 0.15em;

  /* Weights */
  --w-display-reg: 500;
  --w-display-med: 600;
  --w-body-reg:    400;
  --w-body-med:    500;
  --w-body-bold:   600;

  /* Shape */
  --radius-sm:   4px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Elevation */
  --shadow-card:   0 1px 2px rgba(18, 61, 53, 0.05), 0 8px 24px rgba(18, 61, 53, 0.07);
  --shadow-raised: 0 2px 4px rgba(18, 61, 53, 0.07), 0 18px 40px rgba(18, 61, 53, 0.12);
}

/* ---------------------------------------------------------------------------
   2. WEB EXTENSIONS — deliberate additions, not drift
   The canonical ladder stops at 64px because it was built for documents and
   product UI. Marketing sections need 96–160px. These continue the same
   4-base ladder rather than inventing arbitrary values.
   --------------------------------------------------------------------------- */
:root {
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Section rhythm by narrative role. Refusal #4 lives here: consecutive
     sections must not share a value, so the page has loud and quiet passages
     instead of a stripe pattern. */
  --rhythm-anchor: var(--space-11);  /* hero, closing — most air */
  --rhythm-major:  var(--space-10);  /* the big narrative beats */
  --rhythm-minor:  var(--space-9);   /* supporting passages */
  --rhythm-tight:  var(--space-8);   /* dense / spec passages */

  /* Measure — prose stays readable independent of layout width */
  --measure: 65ch;
  --measure-tight: 54ch;

  /* Layout */
  --container: 1180px;
  --container-narrow: 860px;
  --gutter: var(--space-5);

  /* Tracking follows size (craft: −0.01em at 2rem → −0.04em at 6rem+).
     The canon ships a single −0.01em; these are size-aware and stated. */
  --tracking-display: -0.03em;
  --tracking-h1:      -0.02em;
  --tracking-h2:      -0.015em;
  --tracking-h3:      -0.01em;

  /* Motion */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state:    ease-in-out;
  --dur-state:     160ms;
  --dur-entrance:  620ms;
}

/* Forest anchor — dark sections on a paper page. Set data-theme="forest" on a
   section and its contents re-map. This is how backgrounds carry structure. */
[data-theme='forest'] {
  --ground:      var(--forest-deep);
  --surface:     var(--forest);
  --text:        var(--cream);
  --text-muted:  var(--cream-dim);
  --border:      rgba(246, 241, 233, 0.16);
  --heading:     var(--cream);
}

:root,
[data-theme='paper'] {
  --ground:      var(--paper);
  --surface:     var(--white);
  --text:        var(--ink-mid);
  --text-muted:  var(--taupe);
  --border:      var(--line);
  --heading:     var(--forest);
}

[data-theme='paper-dark'] {
  --ground:      var(--paper-dark);
  --surface:     var(--white);
  --text:        var(--ink-mid);
  --text-muted:  var(--taupe);
  --border:      var(--line);
  --heading:     var(--forest);
}

/* ---------------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-mid);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-body-reg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; }

/* Grain — one full-bleed overlay, visible only by its absence. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   4. TYPE — semantic classes lifted from canon
   --------------------------------------------------------------------------- */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-body-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--forest-mid);
  margin: 0;
}

[data-theme='forest'] .t-eyebrow { color: var(--cream-dim); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  margin: 0;
  text-wrap: balance;
}

.t-display,
h1 {
  font-size: clamp(44px, 2rem + 4vw, var(--fs-display));
  font-weight: var(--w-display-reg);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  /* Optical flush: display type carries side bearing the box model ignores. */
  margin-left: -0.02em;
}

.t-h1 { font-size: clamp(38px, 1.6rem + 3vw, var(--fs-h1)); font-weight: var(--w-display-reg); line-height: var(--lh-h1); letter-spacing: var(--tracking-h1); }

.t-h2,
h2 {
  font-size: clamp(30px, 1.4rem + 1.6vw, var(--fs-h2));
  font-weight: var(--w-display-reg);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}

.t-h3,
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-display-med);  /* 600 — 500 goes thin below 30px */
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
}

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.t-body  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.t-lead  { font-size: 20px; line-height: 1.55; color: var(--text); max-width: var(--measure-tight); }
.t-small { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }

/* Numerals in anything data-bearing align by column. */
.t-num {
  font-family: var(--font-display);
  font-weight: var(--w-display-med);
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}

/* Stat — a number that carries weight. Scale is what makes it read as evidence
   rather than as a word; without it the figure disappears into body copy. */
.stat { display: grid; gap: var(--space-1); }

.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-display-reg);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: var(--tracking-h2);
  color: var(--heading);
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-body-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The one figure per view allowed to spend the accent. */
.stat--key .stat-value { color: var(--clay); }
[data-theme='forest'] .stat--key .stat-value { color: var(--gold); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-6);
}

/* ---------------------------------------------------------------------------
   5. LAYOUT
   --------------------------------------------------------------------------- */
.section {
  padding-block: var(--rhythm-minor);
  padding-inline: var(--gutter);
  background: var(--ground);
  color: var(--text);
}

.section--anchor { padding-block: var(--rhythm-anchor); }
.section--major  { padding-block: var(--rhythm-major); }
.section--tight  { padding-block: var(--rhythm-tight); }

.container        { width: 100%; max-width: var(--container); margin-inline: auto; }
.container--narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; }

/* Asymmetric splits — 6/6 every time is the stripe pattern in plan view. */
.split-5-7,
.split-7-5,
.split-4-8 { display: grid; gap: var(--space-8); align-items: start; }

@media (min-width: 900px) {
  .split-5-7 { grid-template-columns: 5fr 7fr; }
  .split-7-5 { grid-template-columns: 7fr 5fr; }
  .split-4-8 { grid-template-columns: 4fr 8fr; }
}

.stack     { display: grid; gap: var(--space-4); }
.stack--lg { display: grid; gap: var(--space-7); }

/* Section head: eyebrow, heading, optional standfirst. */
.section-head { margin-bottom: var(--space-8); }
.section-head .t-eyebrow { margin-bottom: var(--space-4); }
.section-head p { margin-top: var(--space-5); }

/* ---------------------------------------------------------------------------
   6. COMPONENTS
   --------------------------------------------------------------------------- */

/* Rules — a labeled hairline, not a bare <hr>. Gilt is spent here and only
   here: refusal #3. */
.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}
.rule--gilt { border-top-color: var(--line-gold); }

.rule-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-body-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.rule-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Stage numerals — the case-file idiom. */
/* Gilt on warm ivory measures 1.74:1 — near-invisible. The case-file numeral
   carries the sequence, so it has to be readable; gilt stays on hairlines
   (refusal #3) and on the forest ground where it actually has contrast. */
.stage-num {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-display-reg);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--forest-mid);
}

[data-theme='forest'] .stage-num { color: var(--gold); }

/* Buttons — exactly one filled accent per view; secondaries are hairline. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.5em;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--w-body-med);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-state) var(--ease-state),
              border-color var(--dur-state) var(--ease-state),
              color var(--dur-state) var(--ease-state);
}

.btn--primary { background: var(--clay); color: var(--paper); }
.btn--primary:hover { background: var(--clay-deep); }

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--heading);
}
.btn--ghost:hover { border-color: var(--forest-mid); }

[data-theme='forest'] .btn--ghost { color: var(--cream); }
[data-theme='forest'] .btn--ghost:hover { border-color: var(--cream-dim); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Cards — used only where whitespace genuinely cannot group. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}

.card--raised {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  border-color: transparent;
}

/* Links in prose. */
.link {
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-gold);
}
.link:hover { text-decoration-color: currentColor; }

[data-theme='forest'] .link { color: var(--cream); text-decoration-color: var(--gold); }

/* --- Credential seal ------------------------------------------------------
   The credential leaf of the memorandum: a seal impressed on the paper, and
   the file's contents entered in a ruled register beside it.

   The seal is the one object on this page that somebody else issued, so it is
   set alone and unboxed — the register's hairlines opposite it do the
   grouping. Refusals: never a row of logos, never a box around the mark, and
   never a peer of the work it sits next to. They are different kinds of thing.

   The mark carries its own ground, so it needs a hairline to seat it on ivory
   rather than a surface behind it. */
.seal {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.seal img {
  width: 168px;
  height: 168px;
  border-radius: var(--radius-sm);
}

.seal-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-display-med);
  line-height: var(--lh-h3);
  color: var(--heading);
  margin: 0;
}

/* Issuer and date sit as a letterpress footing under the mark. */
.seal-issued {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-body-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.seal-scope {
  margin: var(--space-4) 0 0;
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text);
}

@media (max-width: 899px) {
  .seal img { width: 128px; height: 128px; }
}

/* Lists — hairline separated, no bullets, no boxes. */
.list-hairline { list-style: none; margin: 0; padding: 0; }
.list-hairline > li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}
.list-hairline > li:last-child { border-bottom: 1px solid var(--border); }

/* Register — the file's contents, entered rather than merchandised. A wider
   rule gap than a plain hairline list because each entry carries four parts. */
.register > li { padding-block: var(--space-6); }
.register h3 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.register p { margin: 0; max-width: 62ch; }
.register .link { display: inline-block; margin-top: var(--space-4); }

/* --- Nav ------------------------------------------------------------------ */
/* The bar is always forest — it merges into the forest hero at the top of the
   page and stays legible over ivory further down. A transparent-until-scrolled
   nav depends on JS, and cream links over ivory are invisible if that fails. */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--forest-deep);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-state) var(--ease-state);
}

.nav.is-scrolled {
  border-bottom-color: rgba(246, 241, 233, 0.16);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
}

/* Design system: wordmark only, no logo mark — Cormorant 600 with a copper period. */
.wordmark {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: var(--w-display-med);
  letter-spacing: 0.02em;
  color: var(--cream);
  text-decoration: none;
  margin-right: auto;
}
.wordmark-dot { color: var(--clay); }

.nav-links { display: flex; gap: var(--space-5); }
.nav-links a {
  font-size: var(--fs-small);
  font-weight: var(--w-body-med);
  color: var(--cream-dim);
  text-decoration: none;
  transition: color var(--dur-state) var(--ease-state);
}
.nav-links a:hover { color: var(--cream); }

.btn--sm { padding: 0.55em 1.1em; min-height: 0; }

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* --- Hero panel — the product as evidence, not a screenshot gallery -------- */
.hero { padding-top: calc(var(--rhythm-anchor) + var(--space-7)); }
.hero-grid { align-items: center; }

.panel {
  margin: 0;
  background: var(--forest);
  border: 1px solid rgba(246, 241, 233, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-raised);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(246, 241, 233, 0.16);
}
.panel-dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--forest-mid);
}

.panel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.panel-stats .stat-value { font-size: var(--fs-h3); }

.panel-row {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid rgba(246, 241, 233, 0.16);
}
.panel-row .t-small { color: var(--cream-dim); }
.panel-row--muted { opacity: 0.72; }

.panel-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.panel-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-display-med);
  color: var(--cream);
}
.panel-note {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--gold);
  font-size: var(--fs-small);
  color: var(--cream-dim);
}

.tag {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: rgba(246, 241, 233, 0.1);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-body-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cream-dim);
}
/* Accent as a tint, not a slab: the filled CTA stays the only solid clay in
   view, so the eye still lands on the headline first. */
.tag--live {
  background: rgba(176, 83, 47, 0.22);
  color: var(--clay-light);
  box-shadow: inset 0 0 0 1px rgba(176, 83, 47, 0.55);
}

/* The quarantined fake is evidence, not a headline. Dropping it out of the
   display face stops the junk reading as important as the real buyer. */
.panel-row--muted .panel-name {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--w-body-med);
  color: var(--cream-dim);
}

/* --- The passage — numbered case file ------------------------------------- */
.passage { list-style: none; margin: 0; padding: 0; }

.passage-stage {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
}
.passage-stage:last-child { border-bottom: 1px solid var(--border); }

@media (min-width: 760px) {
  .passage-stage { grid-template-columns: 4rem 1fr; gap: var(--space-8); }
}

.passage-body { max-width: var(--measure); }
.passage-body h3 { margin-bottom: var(--space-4); }

/* --- Start table ---------------------------------------------------------- */
.start-table { min-width: 620px; }
.start-table td:last-child { white-space: nowrap; color: var(--heading); }
.start-note { margin-top: var(--space-5); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { margin: 0; }
.faq-item {
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq dt {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-display-med);
  line-height: var(--lh-h3);
  color: var(--heading);
  margin-bottom: var(--space-3);
}
.faq dd { margin: 0; max-width: var(--measure); }

/* --- Footer ---------------------------------------------------------------
   The colophon of the memorandum: the back page that records what is in the
   file. Every page carries the same one, so no page is a dead end.

   Grouped under letterpress labels rather than run out as a single long row —
   a reader scanning for their own situation finds it by heading, not by
   reading twelve links. Refusal carried from the page direction: gilt stays on
   hairlines, so links darken to forest on hover and never go gold. */
.site-footer {
  padding: var(--space-7) var(--gutter) var(--space-6);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.footer-nav {
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

@media (min-width: 760px) {
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer-group h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-body-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--forest-mid);
}

.footer-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.footer-group a,
.footer-links a {
  font-size: var(--fs-small);
  color: var(--taupe);
  text-decoration: none;
}

.footer-group a:hover,
.footer-links a:hover { color: var(--forest); }

/* The current page is named but not a link, so the footer says where you are. */
.footer-group [aria-current='page'] {
  font-size: var(--fs-small);
  color: var(--forest);
  font-weight: var(--w-body-med);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* The credential, stamp-sized. Small enough to read as a seal on the colophon
   rather than a second logo competing with the wordmark. */
.footer-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.footer-badge img { width: 34px; height: 34px; flex-shrink: 0; }

/* Seal and imprint line read as one block, opposite the legal links. */
.footer-imprint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}
.footer-imprint p { margin: 0; }

/* Comfortable thumb targets once the columns stack. */
@media (max-width: 759px) {
  .footer-group a,
  .footer-group [aria-current='page'],
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-group ul { gap: 0; }
}

/* ---------------------------------------------------------------------------
   7. MOTION
   One orchestrated entrance. Fails safe: content is visible by default and
   only animates once JS opts in, so a script error can never leave the page
   blank.
   --------------------------------------------------------------------------- */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-entrance) var(--ease-entrance),
              transform var(--dur-entrance) var(--ease-entrance);
}

.js-motion .reveal:nth-child(2) { transition-delay: 80ms; }
.js-motion .reveal:nth-child(3) { transition-delay: 160ms; }
.js-motion .reveal:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal,
  .js-motion .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   8. DETAIL PASS
   --------------------------------------------------------------------------- */
::selection { background: rgba(176, 83, 47, 0.2); color: var(--ink); }

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

[data-theme='forest'] { scrollbar-color: var(--forest-mid) transparent; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-body-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
td {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Wide content scrolls inside its own container — the page never does. */
.scroll-x { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   9. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --rhythm-anchor: var(--space-9);
    --rhythm-major:  var(--space-8);
    --rhythm-minor:  var(--space-7);
    --rhythm-tight:  var(--space-7);
    --gutter: var(--space-4);
  }

  .section-head { margin-bottom: var(--space-6); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
}