:root {
      --color-navy: #0c1b2e;
      --color-navy-2: #102540;
      --color-navy-3: #081421;
      --color-gold: #d4af37;
      --color-gold-light: #e8c84a;
      --color-bg: #fafaf8;
      --color-bg-warm: #f2ede6;
      --color-text: #0c1b2e;
      --color-text-light: #ede8e0;
      --color-muted: #4e5c6c;
      /* Light-section accent ramp — see the note above the contrast guard below.
         Both tones are hue ~31deg: the brand gold darkened along a metal's own
         path rather than straight down its 46deg hue, which is what produced
         the olive Cristie flagged on the About page. */
      --color-gold-ink: #8a5a2b;    /* small gold-toned TEXT on light bg — 5.04:1 on warm */
      --color-gold-ink-lg: #a06b2c; /* large display accents on light — 3.89:1 on warm */
      --color-rule: rgba(12, 27, 46, 0.1);
      --color-rule-gold: rgba(212, 175, 55, 0.25);

      /* ── Section spacing scale (Phase 3.5) — mirrors home.css ── */
      --sec-tight:    clamp(2.5rem, 6vh, 4.5rem);
      --sec-std:      clamp(4.5rem, 12vh, 7.5rem);
      --sec-generous: clamp(7.5rem, 19vh, 13rem);
    }

    .sec-tight { padding-top: var(--sec-tight);    padding-bottom: var(--sec-tight); }
    .sec-std   { padding-top: var(--sec-std);      padding-bottom: var(--sec-std); }
    .sec-gen   { padding-top: var(--sec-generous); padding-bottom: var(--sec-generous); }

    html, body { margin: 0; padding: 0; background: var(--color-navy); }
    body { font-family: "DM Sans", system-ui, sans-serif; color: var(--color-text); overflow-x: hidden; }
    .font-display { font-family: "Cormorant Garamond", Georgia, serif; }

    /* Lenis */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-stopped { overflow: hidden; }

    ::selection { background: var(--color-gold); color: var(--color-navy); }

    /* ── Type scale ── */
    .t-display   { font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.014em; }
    .t-display-sm{ font-size: clamp(2rem, 3.4vw, 3.25rem);  line-height: 1.12; letter-spacing: -0.01em; }
    .t-cta       { font-size: clamp(3.2rem, 7vw, 6rem);     line-height: 0.94; letter-spacing: -0.022em; }

    .eyebrow {
      font-family: "DM Sans", sans-serif;
      letter-spacing: 0.22em; text-transform: uppercase;
      font-size: 0.78rem; font-weight: 500;
    }
    .rule-gold { height: 1px; background: var(--color-rule-gold); }

    /* ── Section seam — scroll-drawn gold rule + star at dark-to-dark boundaries ── */
    .seam { display:flex; align-items:center; gap:1.25rem; margin:0 auto; max-width:88rem; padding:0 1.5rem; }
    @media (min-width:768px){ .seam { padding:0 2.5rem; } }
    .seam-rule { height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--color-gold) 30%, var(--color-gold) 70%, transparent); opacity:0.45; transform-origin:center; }
    .seam-star { color:var(--color-gold); opacity:0.7; font-family:"Cormorant Garamond", serif; font-size:1.1rem; line-height:1; }

    /* ── Star-field texture — art-directs "waiting" navy bands ── */
    .navy-stars::before {
      content:""; position:absolute; inset:0; pointer-events:none;
      background-image:
        radial-gradient(rgba(212,175,55,0.20) 1px, transparent 1.6px),
        radial-gradient(rgba(237,232,224,0.10) 1px, transparent 1.6px);
      background-size: 210px 210px, 140px 140px;
      background-position: 0 0, 70px 90px;
      opacity:0.5;
    }

    /* ── Founder icon rows (Military Service · Awards · Education · Beyond Service) ──
       Sizes raised one step: the column ran 52px heading straight to 16px/300
       body with nothing between, which is the "fonts are too little" note. The
       missing mid-tier is .founder-deck below. */
    .icon-row { display:flex; align-items:flex-start; gap:1.1rem; max-width:36rem; }
    .icon-badge {
      flex:none; display:inline-grid; place-items:center;
      width:2.75rem; height:2.75rem; border-radius:50%;
      border:1px solid var(--color-rule-gold); color:var(--color-gold);
      background:rgba(212,175,55,0.06);
    }
    .icon-badge-dark { border-color:rgba(212,175,55,0.35); background:rgba(212,175,55,0.08); }
    .icon-row-title {
      font-family:"DM Sans", sans-serif; font-weight:500; font-size:0.8rem;
      letter-spacing:0.18em; text-transform:uppercase; color:var(--color-gold-ink);
      margin:0.3rem 0 0.45rem;
    }
    .icon-row-text { color:var(--color-muted); font-weight:300; font-size:1.0625rem; line-height:1.72; margin:0; }

    /* ── Founder section layout ──────────────────────────────────
       Masthead (heading + role + deck) above, then portraits and fact rows as
       equal halves. The media column used to be md:col-span-5 holding a 360px
       overlapping stack, so both photos were small and one was 45% hidden; at
       half of max-w-[88rem] each portrait is ~300px wide. */
    .founder-masthead { display:grid; gap:1.5rem 4rem; align-items:end; }
    .founder-masthead > div { min-width:0; }
    .founder-masthead h2 { margin:0; }
    @media (min-width:900px){
      .founder-masthead { grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); }
    }

    .founder-role {
      margin:1rem 0 0; font-size:1rem; font-weight:500;
      letter-spacing:0.015em; color:var(--color-gold-ink);
    }

    /* The tier that was missing between the heading and the 16px fact rows. */
    .founder-deck {
      margin:0; max-width:34rem;
      font-family:"Cormorant Garamond", Georgia, serif; font-weight:300;
      font-size:clamp(1.3rem, 1.8vw, 1.7rem); line-height:1.5;
      color:var(--color-text);
      padding-left:1.5rem; border-left:2px solid var(--color-gold);
    }

    .founder-body {
      display:grid; gap:clamp(2.5rem, 5vw, 4rem);
      margin-top:clamp(3rem, 6vh, 4.5rem); align-items:start;
    }
    @media (min-width:900px){
      .founder-body { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    }
    .founder-facts { display:flex; flex-direction:column; gap:1.9rem; }

    /* ── Stat bar ── */
    .stat-cell { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.65rem; padding:0 1rem; }
    .stat-label {
      font-family:"DM Sans", sans-serif; font-weight:500; font-size:0.68rem;
      letter-spacing:0.26em; text-transform:uppercase; color:rgba(237,232,224,0.55); margin:0;
    }
    .stat-value { color:var(--color-text-light); font-size:clamp(26px,3vw,40px); line-height:1; margin:0; }
    .stat-value { background:linear-gradient(120deg, #ede8e0 30%, var(--color-gold) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    @media (min-width:1024px){
      .stat-grid > .stat-cell + .stat-cell { border-left:1px solid var(--color-rule-gold); }
    }

    /* ── Founder portrait pair ───────────────────────────────────
       Both frames are 700x1105 and 520x821 — the same 0.63:1 — so they pair
       exactly at aspect-ratio 7/11 with no cropping decision to get wrong.
       Uniform first: it is the earlier photograph, and it is the one the old
       overlapping stack buried. */
    .founder-portraits { display:grid; grid-template-columns:1fr 1fr; gap:clamp(0.9rem, 2vw, 1.75rem); }
    /* Below ~560px a two-up grid puts each frame at ~156px — smaller than the
       overlapping stack this replaced, which defeats the point. Stack instead
       so each portrait gets the full column. */
    @media (max-width:559px){
      .founder-portraits { grid-template-columns:1fr; gap:1.75rem; }
    }
    .founder-portrait { margin:0; min-width:0; }
    .founder-portrait img {
      display:block; width:100%; height:auto;
      aspect-ratio:7 / 11; object-fit:cover; object-position:center 12%;
      border-radius:3px;
      box-shadow:0 24px 48px -28px rgba(12,27,46,0.55);
      transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;
    }
    .founder-portrait:hover img {
      transform:translateY(-4px);
      box-shadow:0 34px 60px -30px rgba(12,27,46,0.6);
    }
    .founder-portrait figcaption {
      margin-top:0.9rem; padding-top:0.6rem;
      border-top:1px solid var(--color-rule);
      color:var(--color-muted); font-size:0.85rem; line-height:1.5;
    }

    /* ── Line mask reveal ── */
    .line-mask { display: block; overflow: hidden; }
    .line-mask > * { display: block; will-change: transform; }

    /* ── About hero (navy · split panel) ─────────────────────────
       2026-08-25. This was a full-bleed photograph: cristie-speaking.jpg
       (700x1105, 0.63:1) stretched across a ~2.4:1 band under object-fit:
       cover, so the visible slice was a ~700x287 crop across her face and the
       700px source was upscaled past 1900px. Cristie flagged the crop.

       A studio portrait on a dark backdrop cannot be cropped to a horizontal
       band — no object-position value fixes a 3.8x aspect mismatch. It now
       sits in its own panel at its native ratio, from the higher-resolution
       1100x1600 frame, and the band behind it is navy plus the existing
       ambient treatments. */
    .about-hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      align-items: center;
      min-height: clamp(38rem, 82vh, 52rem);
      color: var(--color-text-light);
      background-color: var(--color-navy);
    }

    /* Ambient gold wash, weighted behind the copy column. */
    .about-hero::before {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background:
        radial-gradient(ellipse 60% 70% at 12% 30%, rgba(212,175,55,0.10), transparent 62%),
        linear-gradient(180deg, rgba(8,20,33,0.55), transparent 38%, rgba(8,20,33,0.72));
    }

    /* The gold hairline the old .field-hero::after drew along the base. */
    .about-hero::after {
      content: ""; position: absolute; z-index: 1;
      inset: auto 1.5rem clamp(2rem, 5vh, 3.5rem) 1.5rem;
      height: 1px;
      background: linear-gradient(90deg, var(--color-gold), rgba(212,175,55,.08) 70%, transparent);
    }
    @media (min-width: 768px) { .about-hero::after { inset: auto 2.5rem clamp(2rem, 5vh, 3.5rem) 2.5rem; } }

    .about-hero__inner {
      position: relative; z-index: 2;
      width: min(100%, 88rem); margin-inline: auto;
      padding: clamp(9rem, 17vh, 11.5rem) 1.5rem clamp(5rem, 10vh, 7rem);
      display: grid; align-items: center;
      gap: clamp(2.5rem, 5vw, 4.5rem);
    }
    @media (min-width: 768px) { .about-hero__inner { padding-inline: 2.5rem; } }
    @media (min-width: 900px) {
      .about-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
    }

    .about-hero__copy { min-width: 0; }
    .about-hero .hero-sub {
      margin: 1.75rem 0 0; max-width: 30rem;
      font-weight: 300; font-size: 1.0625rem; line-height: 1.75;
      color: rgba(237,232,224,.82);
    }
    .about-hero .hero-cta {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 0.75rem; margin-top: 2.25rem;
    }

    .about-hero__portrait {
      position: relative; margin: 0;
      justify-self: center; width: min(100%, 17rem);
    }
    @media (min-width: 900px) {
      .about-hero__portrait { justify-self: end; width: min(100%, 27rem); }
    }
    .about-hero__portrait img {
      display: block; width: 100%; height: auto;
      aspect-ratio: 7 / 11; object-fit: cover; object-position: center 10%;
      border-radius: 3px;
      filter: saturate(.84) contrast(1.04);
      box-shadow: 0 40px 80px -40px rgba(0,0,0,.85);
    }
    /* Corner bracket — restrained frame, same gesture as the section seams. */
    .about-hero__portrait::after {
      content: ""; position: absolute; z-index: 1;
      top: -0.7rem; right: -0.7rem; width: 42%; aspect-ratio: 1;
      border-top: 1px solid var(--color-gold);
      border-right: 1px solid var(--color-gold);
      opacity: .5; pointer-events: none;
    }

    /* Sized to the copy column, not the viewport: at 1.25fr of 88rem the
       longest line ("service & purpose.") measures ~635px inside ~810px. */
    .t-hero-fit { font-size: clamp(2.4rem, 5.6vw, 4.75rem); line-height: 1.06; letter-spacing: -0.01em; }
    @media (max-height: 720px) { .t-hero-fit { font-size: clamp(2.1rem, 4.6vw, 3.75rem); } }

    .hero-rule { width: 48px; height: 2px; background: var(--color-gold); margin: 1.1rem 0 1.6rem; }

    .ghost {
      position:absolute; pointer-events:none; user-select:none;
      font-family:"Cormorant Garamond", serif; font-weight:500;
      line-height:0.8; white-space:nowrap;
    }

    /* ── Buttons ── */
    .btn-gold {
      border-radius: 2px;
      background: var(--color-gold); color: var(--color-navy);
      transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
      box-shadow: 0 8px 24px -10px rgba(212,175,55,0.6);
    }
    .btn-gold:hover { background: var(--color-gold-light); transform: translateY(-3px); box-shadow:0 16px 34px -12px rgba(212,175,55,0.7); }
    .btn-outline {
      border-radius: 2px;
      border: 1px solid var(--color-rule-gold); color: var(--color-text-light);
      transition: border-color .3s ease, color .3s ease, transform .3s ease;
    }
    .btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-3px); }

    /* ── Core values band ───────────────────────────────────────
       Was five white 20px-radius cards holding one word each, with no section
       heading anywhere. Set as a typographic band instead: the words carry
       themselves, so no descriptive copy had to be invented to fill a card. */
    /* Mission (--color-bg) -> Values (--color-bg-warm) is the page's ONLY
       light-to-light section join; every other boundary is marked by a navy
       swap. Two sec-std pads stacked to 216px of near-identical cream with
       nothing in it and no visible division — the "uneven spacing" note.
       Trim the top pad and let a real hairline carry the join, matching the
       rules on .statement and .value-item rather than inventing a motif. */
    .values-section {
      border-top:1px solid var(--color-rule-gold);
      padding-top:clamp(3rem, 8vh, 5rem);
    }
    .value-list {
      list-style:none; margin:clamp(2.75rem, 6vh, 4rem) 0 0; padding:0;
      display:grid; gap:0;
      border-top:1px solid var(--color-rule-gold);
    }
    .value-item {
      display:flex; align-items:center; gap:0.9rem; min-width:0;
      padding:clamp(1.05rem, 2.2vh, 1.5rem) 0;
      border-bottom:1px solid var(--color-rule-gold);
    }
    .value-item::before {
      content:"\2605"; flex:none; opacity:0.65; line-height:1;
      color:var(--color-gold); font-family:"Cormorant Garamond", serif; font-size:0.9rem;
    }
    .value-word {
      font-size:clamp(1.7rem, 3.2vw, 2.7rem); font-weight:300;
      line-height:1.15; color:var(--color-text);
    }
    @media (min-width:900px){
      .value-list { grid-template-columns:repeat(5, minmax(0,1fr)); border-top:none; }
      .value-item {
        flex-direction:column; align-items:flex-start; gap:0.85rem;
        padding:1.6rem clamp(0.9rem, 1.8vw, 1.5rem) 0 0;
        border-bottom:none; border-top:1px solid var(--color-rule-gold);
      }
    }

    /* ── Mission & Vision statements ─────────────────────────────
       The statements were t-display-sm (52px) — the same size as the founder
       heading — so a 40-word paragraph ran to 11 lines beside the vision's 6.
       Dropped to a statement tier; the matched gold rules make the pair read
       as a pair regardless of length. */
    .statement-grid {
      display:grid; gap:clamp(2.5rem, 5vw, 4.5rem);
      margin-top:clamp(2.75rem, 6vh, 4rem); align-items:start;
    }
    @media (min-width:900px){
      .statement-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    }
    .statement { border-top:1px solid var(--color-rule-gold); padding-top:1.75rem; }
    .statement-label {
      margin:0 0 1rem;
      font-family:"Cormorant Garamond", Georgia, serif; font-weight:400;
      font-size:clamp(1.5rem, 2vw, 1.9rem); color:var(--color-gold-ink);
    }
    .statement-text {
      margin:0; max-width:34rem;
      font-family:"Cormorant Garamond", Georgia, serif; font-weight:300;
      font-size:clamp(1.35rem, 1.85vw, 1.75rem); line-height:1.5;
      color:var(--color-text);
    }

    /* ── Founding story ────────────────────────────────────────
       The standfirst fills the top-right quadrant the 14ch headline left
       empty. Below it the narrative is one lede plus balanced magazine
       columns, rather than two blocks in different faces and sizes. */
    .story-masthead { display:grid; gap:1.5rem 4rem; align-items:end; }
    .story-masthead h2 { margin:0; max-width:14ch; }
    @media (min-width:900px){
      .story-masthead { grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); }
    }
    .story-standfirst {
      margin:0; max-width:32rem;
      font-family:"Cormorant Garamond", Georgia, serif; font-weight:300;
      font-size:clamp(1.25rem, 1.7vw, 1.6rem); line-height:1.55;
      color:var(--color-text);
      padding-left:1.5rem; border-left:2px solid var(--color-gold);
    }
    .story-lede {
      margin:clamp(2.5rem, 5vh, 3.75rem) 0 0; max-width:46rem;
      font-family:"Cormorant Garamond", Georgia, serif; font-weight:300;
      font-size:clamp(1.5rem, 2.5vw, 2.1rem); line-height:1.34;
      color:var(--color-text);
    }
    .story-body {
      margin-top:clamp(2rem, 4vh, 2.75rem);
      color:var(--color-muted); font-weight:300;
      font-size:1.0625rem; line-height:1.8;
    }
    @media (min-width:900px){
      .story-body { columns:2; column-gap:clamp(2.5rem, 5vw, 4.5rem); }
    }
    .story-body p { margin:0 0 1.35rem; break-inside:avoid; }
    .story-body p:last-child { margin-bottom:0; }

    /* ── Nav (section-aware theme) ── */
    #site-header { transition: background .45s ease, backdrop-filter .45s ease, box-shadow .45s ease, border-color .45s ease; }
    #site-header .logo-text, #site-header .nav-link { transition: color .45s ease; }
    #site-header .logo-accent { color: var(--color-gold); font-style: italic; }

    #site-header.nav-dark { background: transparent; box-shadow: none; }
    #site-header.nav-dark .logo-text { color: #ffffff; }
    #site-header.nav-dark .nav-link { color: rgba(237,232,224,0.85); }

    /* dark mode, scrolled — navy backdrop so page content never collides with nav links */
    #site-header.nav-dark.nav-scrolled {
      background: rgba(12,27,46,0.90);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(212,175,55,0.14), 0 8px 24px rgba(8,20,33,0.35);
    }

    #site-header.nav-light { background: rgba(250,250,248,0.96); backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(12,27,46,0.08), 0 4px 20px rgba(12,27,46,0.06); }
    #site-header.nav-light .logo-text { color: #0c1b2e; }
    #site-header.nav-light .nav-link { color: rgba(12,27,46,0.75); }

    .nav-link { position:relative; }
    .nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--color-gold); transition:width .35s ease; }
    .nav-link:hover::after { width:100%; }
    .nav-link.is-current::after { width:100%; }
    #site-header .nav-link:hover { color: var(--color-gold); }

    #about-hero .line-mask, .hero-line-wrap { padding-top: 0.08em; padding-bottom: 0.18em; }

    .reveal, .reveal-stagger > * { will-change:transform, opacity; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * { animation:none !important; scroll-behavior:auto !important; transition:none !important; }
      .line-mask > * { transform:none !important; }
    }

/* Hero headline. Two tiers, both inside the copy column. */
.about-hero .t-hero-fit {
  margin: 0;
  /* Measured: "service & purpose." is 290px at the 3rem floor, inside the
     327px column at 375px — one line box. The max is sized to the copy
     column (1.25fr of 88rem), not the viewport. */
  font-size: clamp(3rem, 5.6vw, 5.25rem);
  line-height: .92;
  letter-spacing: -.022em;
}

/* Under 900px the portrait drops below the copy, so the band no longer needs
   to be tall enough to hold a full-height photograph beside the headline. */
@media (max-width: 899px) {
  .about-hero { min-height: 0; align-items: flex-start; }
  .about-hero__inner { padding-bottom: clamp(4rem, 8vh, 5.5rem); }
}
/* ══ WCAG AA contrast guard ══════════════════════════════════════════
       Gold is a DARK-background colour: 8.24:1 on navy, but only 2.01:1 on
       --color-bg and 1.81:1 on --color-bg-warm, so gold TEXT on any light
       section fails AA. Rather than chase every call site, the gold custom
       properties are redefined *inside* light sections — every
       var(--color-gold) consumer below them inherits the safe tone.

       2026-08-25: the tones were previously #7f6921 and #a1852a. Those are the
       brand gold (46deg, s74%) darkened to v50% / v63% with the hue untouched,
       and a dark 46deg yellow reads as olive — Cristie's note on the About page
       ("the yellow colour used does not complement the overall design"). They
       also sat 1.7% above the 3:1 bar. Replaced with a two-step bronze ramp at
       hue ~31deg, the direction a real metal darkens toward:

         --color-gold-ink    #8a5a2b  5.04:1 on warm, 5.62:1 on bg  (small text)
         --color-gold-ink-lg #a06b2c  3.89:1 on warm, 4.34:1 on bg  (>=24px)

       Both clear their AA bar with real margin and read as one metal at two
       depths. Gold on navy is untouched.

       Attribute selector catches opacity variants (text-gold/70 etc).      */
    .bg-bg, .bg-bg-warm, .bg-white {
      --color-gold: #8a5a2b;
      --color-gold-light: #6f4820;
      /* Hairlines and icon badges read against warm cream, not navy. */
      --color-rule-gold: rgba(138, 90, 43, 0.30);
    }

    /* Dark cards nested inside a light section keep the real gold. */
    .bg-navy, .bg-navy-2, .bg-navy-3, .rcard.is-dark, [data-theme="dark"] {
      --color-gold: #d4af37;
      --color-gold-light: #e8c84a;
      --color-rule-gold: rgba(212, 175, 55, 0.25);
    }

    /* Small gold text on light needs the full 4.5:1, not just 3:1. */
    .bg-bg      [class*="text-gold"],
    .bg-bg-warm [class*="text-gold"],
    .bg-white   [class*="text-gold"],
    .bg-bg .eyebrow, .bg-bg-warm .eyebrow { color: var(--color-gold-ink); }

    /* …but large display accents keep the richer tone. */
    .bg-bg .t-hero [class*="text-gold"], .bg-bg-warm .t-hero [class*="text-gold"],
    .bg-bg .t-mission [class*="text-gold"], .bg-bg-warm .t-mission [class*="text-gold"],
    .bg-bg .t-display [class*="text-gold"], .bg-bg-warm .t-display [class*="text-gold"],
    .bg-bg .t-display-sm [class*="text-gold"], .bg-bg-warm .t-display-sm [class*="text-gold"],
    .bg-bg .t-cta [class*="text-gold"], .bg-bg-warm .t-cta [class*="text-gold"] { color: var(--color-gold-ink-lg); }

    /* Large custom-class accents (all >=2.6rem) clear 3:1 with the richer tone. */
    .bg-bg .mission-word.key-word, .bg-bg-warm .mission-word.key-word,
    .bg-bg .tm-quote,   .bg-bg-warm .tm-quote { color: var(--color-gold-ink-lg); }

/* ══ Keyboard accessibility (Phase 3.6) ══════════════════════════════
       Four of the six page bundles previously defined no focus styles at
       all, so keyboard users had no visible indication of position. The
       ring is gold on dark and ink on light so it stays visible on every
       section background this theme alternates between.                  */
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 3px;
      border-radius: 1px;
    }
    .bg-bg a:focus-visible, .bg-bg-warm a:focus-visible, .bg-white a:focus-visible,
    .bg-bg button:focus-visible, .bg-bg-warm button:focus-visible {
      outline-color: var(--color-text);
    }

    /* Never remove the ring for keyboard users, even if a component resets it. */
    :focus-visible { outline-style: solid; }

    /* Skip link — first tab stop, visually hidden until focused. */
    .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 300;
      background: var(--color-gold); color: var(--color-navy);
      padding: 0.7rem 1.15rem; font-weight: 500; font-size: 0.9rem;
      border-radius: 2px; transition: top .18s ease;
    }
    .skip-link:focus { top: 1rem; }

    /* Touch targets — WCAG 2.5.5. Inline .eyebrow links rendered at 11px
       gave a 14px-tall hit area; pad them to a thumb-friendly 44px without
       changing how they look. */
    a.eyebrow, .eyebrow a {
      display: inline-flex; align-items: center;
      min-height: 44px;
    }
/* Footer + mobile-menu link hit areas (WCAG 2.5.5). These render at
       ~18px tall; padding brings them to 44px without shifting the layout
       they sit in, since they are stacked in flex columns already. */
    footer nav a, footer ul a, #mobile-menu a {
      display: inline-flex; align-items: center; min-height: 44px;
    }