/* ============================================================
   DOMINION TRAINING LTD. — Design System
   Dominion Training Ltd.  ·  incorporated British Columbia, 2022
   Built 2026-08-09 per Design Skills/ui-ux-pro-max (Rule 23)

   Product types #5 B2B Service + #13 Government/Public Service —
   the same two rows the audience justified for the Velocity build
   (program officers, Nations, regional partners). Structure, spacing
   and accessibility targets are carried over unchanged; the palette
   is deliberately NOT carried over.

   Velocity is navy #0F172A + gold #B45309. Dominion is forest #1A4331
   + ember #9A4A1B — the same pairing as the "From Smoke to Stewardship"
   partnership deck, and honest to the sectors this company works in:
   forestry, wildfire mitigation, trails and land.

   Two companies that share an owner should not share a face. A visitor
   who has seen both sites has to be able to tell them apart in one look.

   Target: WCAG AA minimum, AAA on body text. Every value below measured,
   not eyeballed — see the contrast table in the project note.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette — forest & ember. Contrast ratios stated against --bg. */
  /* Ratios below were MEASURED in the browser on 2026-08-09, not calculated by
     hand — the hand figures were out by up to 0.6. Re-measure if any value here
     changes; the snippet that produced them is in the project note. */
  --primary:#1A4331;        --on-primary:#FFFFFF;   /* 10.48:1 on --bg · 11.10:1 white on it — AAA */
  --secondary:#3A4F45;      --on-secondary:#FFFFFF;
  --accent:#9A4A1B;         --on-accent:#FFFFFF;    /*  5.88:1 on --bg · 6.23:1 on --card — AA */
  --bg:#FBF8F3;             --fg:#141C18;           /* 16.40:1 — AAA */
  --card:#FFFFFF;           --card-fg:#141C18;
  --muted:#EDE9E0;          --muted-fg:#57655C;     /*  5.79:1 on --bg — AA */
  --border:#E4E0D6;
  --destructive:#B91C1C;    --on-destructive:#FFFFFF;
  --ring:#9A4A1B;

  /* Working shades derived from the palette */
  --accent-dark:#7E3B13;
  --accent-light:#F7E9DC;
  --primary-soft:#265744;
  --success:#15803D;

  /* Warmth — carried across from the Velocity system as a structure, with
     ember substituted for gold. The variable NAMES are kept so the shared
     component CSS below needed no rewriting; only the values changed. */
  --warm-bg:#FBF8F3;        /* warm paper */
  --warm-bg-deep:#F3EDE2;   /* sand */
  --gold:#9A4A1B;           /* ember — 5.88:1 on paper, safe for text */
  --gold-bright:#C9713A;    /* decorative rails and hovers only */
  --gold-soft:#F2DFCD;
  --green:#4A7C59;          /* sage — lifted off --primary so both can sit together */
  --lake:#2A6F7B;           /* teal */

  /* Type scale — 12 14 16 18 24 32 (skill: font-scale) */
  --t-xs:0.75rem; --t-sm:0.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl:1.5rem;  --t-2xl:2rem;    --t-3xl:2.5rem; --t-4xl:3.25rem;

  /* Spacing — 4/8 scale (skill: spacing-scale) */
  --s-1:0.25rem; --s-2:0.5rem;  --s-3:0.75rem; --s-4:1rem;
  --s-6:1.5rem;  --s-8:2rem;    --s-12:3rem;   --s-16:4rem;  --s-24:6rem;

  /* ⭐ Vertical rhythm — ONE place, 2026-08-23. Tommy: "too many spaces between
     sections." Measured first: 57 section-to-section gaps across the site ran from
     128px to 241px, median 184 — two 96px paddings stacking, plus trailing margins
     drifting the total by up to 50px. Every section now takes its padding from
     these two tokens, so the gap between blocks is 96–128px and the same on every
     page. Change the rhythm HERE, never on a page. */
  --sec-pad:var(--s-16);        /* 64px  — standard section */
  --sec-pad-tight:var(--s-12);  /* 48px  — bands, CTAs, status boxes */

  /* Two families, one job each: serif sets the headings, Inter sets everything
     a person actually has to read at length. */
  --font-head:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --radius:4px; --radius-lg:8px;
  --container:1200px;

  /* Elevation scale (skill: elevation-consistent) */
  --sh-1:0 1px 2px rgba(2,6,23,.06), 0 1px 3px rgba(2,6,23,.08);
  --sh-2:0 4px 6px -1px rgba(2,6,23,.07), 0 2px 4px -2px rgba(2,6,23,.06);
  --sh-3:0 10px 20px -5px rgba(2,6,23,.10), 0 4px 8px -4px rgba(2,6,23,.06);

  /* Motion (skill: duration-timing, motion-consistency) */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:200ms;

  /* z-index scale (skill: z-index-management) */
  --z-nav:100; --z-overlay:1000;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--t-base);      /* 16px min on mobile — avoids iOS auto-zoom */
  line-height:1.6;              /* skill: line-height 1.5–1.75 */
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* Headings run in a serif — the second half of the "these are two different
   companies" signal, and the right register for the reader. Velocity's build
   note argued against a serif on the grounds that heavy equipment training is
   infrastructure work, not literature. Dominion's front door is a different
   room: the reader is a program officer assessing whether a company formed in
   2022 can be trusted with a contribution agreement, and the visual language
   that audience already reads all day is the one government and university
   publishing uses. Source Serif keeps the same measured, plain tone as Inter —
   it is not a decorative face — and Inter still carries every word of body
   copy, so nothing gets harder to read (Rule 24). */
h1,h2,h3,h4{line-height:1.2;margin:0 0 var(--s-4);color:var(--primary);font-weight:650;
  font-family:var(--font-head);letter-spacing:-0.005em;text-wrap:balance}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{margin:0 0 var(--s-4);max-width:68ch}   /* skill: line-length 65–75ch */
ul,ol{margin:0 0 var(--s-4);padding-left:1.25rem}
li{margin-bottom:var(--s-2)}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--accent-dark)}
strong{font-weight:650}

/* Focus — never removed (skill: focus-states) */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

/* Skip link (skill: skip-links) */
.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-overlay);
  background:var(--primary);color:var(--on-primary);
  padding:var(--s-3) var(--s-4);border-radius:0 0 var(--radius) 0;font-weight:600;
}
.skip:focus{left:0}

/* ---------- 3. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-6)}
.section{padding-block:var(--sec-pad)}
.section--tight{padding-block:var(--sec-pad-tight)}
/* The last block in a section carries no bottom margin — a trailing paragraph's
   24px was leaking into the gap and making identical sections measure different. */
.section .container>:last-child,.section--tight .container>:last-child,
.prose>:last-child,.rail>:last-child,.phead__grid>div>:last-child,
.list-check:last-child,.list-x:last-child,
.list-check li:last-child,.list-x li:last-child{margin-bottom:0}
.container>.callout:first-child,.container>.callout--warn:first-child{margin-top:0}
.section--muted{background:var(--muted)}
.section--dark{background:var(--primary);color:#E4EAE5}
.section--dark h2,.section--dark h3{color:#FFFFFF}
.section--dark p{color:#D5DED7}

.grid{display:grid;gap:var(--s-6)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.stack>*+*{margin-top:var(--s-4)}

.eyebrow{
  font-size:var(--t-sm);font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--s-3);
}
.section--dark .eyebrow{color:#E8B27F}
.lede{font-size:var(--t-lg);color:var(--secondary);max-width:62ch}
.section--dark .lede{color:#D5DED7}
.measure{max-width:70ch}

/* ---------- 4. Header / nav ---------- */
.header{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
/* Header stepped up one size 2026-08-07 at Tommy's request — brand mark 38→46px,
   brand name t-lg→t-xl, sub t-xs→t-sm, nav links t-sm→t-base, bar 72→86px. */
.header__inner{display:flex;align-items:center;gap:var(--s-8);
  min-height:86px;padding-block:var(--s-4)}
.brand{display:flex;align-items:center;gap:var(--s-4);text-decoration:none;flex-shrink:0}
/* The mark is a "D" in the serif with an ember rule under it. Velocity's was a
   heavy sans "V" on navy; at thumbnail size the two must not be confusable. */
.brand__mark{
  width:46px;height:46px;border-radius:var(--radius);background:var(--primary);
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:var(--t-xl);
  font-family:var(--font-head);letter-spacing:0;
  border-bottom:3px solid var(--gold-bright);
}
.brand__name{font-weight:600;color:var(--primary);font-size:var(--t-xl);letter-spacing:-.005em;
  line-height:1.15;font-family:var(--font-head)}
.brand__sub{display:block;font-size:var(--t-sm);color:var(--muted-fg);font-weight:500;letter-spacing:0}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-1)}
.nav a{
  color:var(--secondary);text-decoration:none;font-weight:550;font-size:var(--t-base);
  padding:var(--s-3) var(--s-2);border-radius:var(--radius);
  min-height:48px;display:inline-flex;align-items:center;   /* skill: touch-target-size */
  white-space:nowrap;   /* at the larger type these wrap to "Safety / courses" otherwise */
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.nav a:hover{background:var(--muted);color:var(--primary)}
/* `page` = you are here · `true` = this page sits under that section */
.nav a[aria-current]{color:var(--primary);font-weight:650;box-shadow:inset 0 -2px 0 var(--accent)}
.nav a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--border)}

/* Nav CTA — must beat `.nav a` specificity or it renders slate-on-blue */
.nav a.nav__cta{
  background:var(--accent);color:var(--on-accent);
  margin-left:var(--s-2);padding:var(--s-3) var(--s-5,1.25rem);
  font-weight:650;box-shadow:var(--sh-1);
}
.nav a.nav__cta:hover{background:var(--accent-dark);color:#fff;box-shadow:var(--sh-2)}

/* ---------- 4a-ii. Header submenus ----------
   The parent stays a real link to the section page; the caret is a separate button.
   Opens on hover for mouse, on :focus-within for keyboard (so it works with JS off),
   and on aria-expanded for touch, where the caret is tapped. */
.nav__item{position:relative;display:flex;align-items:center}
.nav__caret{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-left:calc(var(--s-2) * -1);
  border:0;background:none;padding:0;cursor:pointer;color:var(--muted-fg);
  border-radius:var(--radius);
}
.nav__caret svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur) var(--ease-out)}
.nav__caret:hover{background:var(--muted);color:var(--primary)}
.nav__caret:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav__item:hover .nav__caret svg,
.nav__caret[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav__menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-nav);
  margin:0;padding:var(--s-2);list-style:none;min-width:262px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),
             visibility var(--dur);
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu,
.nav__caret[aria-expanded="true"] + .nav__menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav__menu li{margin:0}
.nav .nav__menu a{
  display:block;width:100%;min-height:0;padding:var(--s-3) var(--s-3);
  font-size:var(--t-sm);font-weight:550;white-space:nowrap;
}
.nav .nav__menu a[aria-current]{box-shadow:none;background:var(--muted);color:var(--primary)}
@media (prefers-reduced-motion:reduce){
  .nav__menu,.nav__caret svg{transition:none}
}

/* ---------- 4b. Mobile navigation ----------
   The 768px breakpoint used to do `.nav{display:none}` with a comment promising a
   toggle that was never built — which left every page with NO navigation on a phone.
   This is that toggle. Disclosure pattern: a real <button> with aria-expanded,
   panel toggled by the `data-open` attribute on .header so it works without JS
   classes on <body>. If JS fails, `.nav-toggle` is hidden and the nav stays visible
   (progressive enhancement — no-JS users get a wrapped link list, not a dead end). */
.nav-toggle{
  display:none;margin-left:auto;
  align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;min-width:44px;padding:var(--s-2) var(--s-3);
  background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  color:var(--primary);font:650 var(--t-sm)/1 Inter,sans-serif;cursor:pointer;
}
.nav-toggle:hover{background:var(--muted);border-color:var(--secondary)}
.nav-toggle__bars{position:relative;width:18px;height:12px;flex:0 0 auto}
.nav-toggle__bars span{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:5px}
.nav-toggle__bars span:nth-child(3){top:10px}
.header[data-open="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.header[data-open="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.header[data-open="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Breakpoint raised 900 → 1180 on 2026-08-07. Measured, not guessed: with the
   larger type the brand + full nav needs ~1120px, and the 1200px container only
   offers 1152px of it, so anything under about 1180px viewport must use the panel.

   ⛔ LOWERED 1180 → 1040 on 2026-08-23. That 1120px figure was measured on the
   VELOCITY nav ("Browse courses", the longer item list). Dominion's nav is shorter
   and the number was inherited, never re-measured: brand 170 + nav 755 + gap 24 +
   container padding 48 = 996px. So for eighteen days every viewport between 996
   and 1180 got a hamburger menu it did not need — and that is exactly where a
   150%-scaled Windows laptop with a little page zoom lands (Tommy's Chrome:
   1045 CSS px on a 1920 screen → "Menu" button on a desktop monitor → "the site
   looks strange"). 1040 leaves 44px of slack over the measured need. */
@media (max-width:1040px){
  .nav-toggle{display:inline-flex}
  .header__inner{flex-wrap:wrap}
  .nav{
    display:none;                       /* replaced by the panel below when open */
    order:3;width:100%;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--border);
    padding-block:var(--s-2) var(--s-4);
    max-height:calc(100vh - 86px);overflow-y:auto;
  }
  .header[data-open="true"] .nav{display:flex}
  .nav a{
    padding:var(--s-3) var(--s-2);border-radius:var(--radius);
    font-size:var(--t-base);width:100%;
  }
  .nav a[aria-current]{box-shadow:none;background:var(--muted)}
  .nav a.nav__cta{
    margin-left:0;margin-top:var(--s-3);justify-content:center;
  }

  /* In the panel a dropdown is the wrong idea — the whole site should just be
     visible as an indented list. The caret is redundant there, so it is hidden. */
  .nav__item{display:block;width:100%}
  .nav__caret{display:none}
  .nav__menu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;background:none;border:0;box-shadow:none;
    padding:0 0 var(--s-2) var(--s-4);
    border-left:2px solid var(--border);margin-left:var(--s-3);
  }
  .nav .nav__menu a{font-size:var(--t-sm);white-space:normal;padding:var(--s-2) var(--s-2)}
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:var(--s-3) var(--s-6);
  border-radius:var(--radius);border:2px solid transparent;
  font-size:var(--t-base);font-weight:650;text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--accent-dark);color:#fff;box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}
.btn--secondary{background:transparent;color:var(--primary);border-color:var(--border)}
.btn--secondary:hover{background:var(--muted);color:var(--primary);border-color:var(--secondary)}
.btn--onDark{background:#fff;color:var(--primary)}
.btn--onDark:hover{background:#E4EAE5;color:var(--primary)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}

/* ---------- 6. Hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--primary) 0%,#1F5140 55%,#2A6B52 100%);
  color:#fff;padding-block:calc(var(--sec-pad) * 1.25);position:relative;overflow:hidden;
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-16);align-items:center}
.hero h1{color:#fff;font-size:var(--t-4xl);margin-bottom:var(--s-6)}
.hero .eyebrow{color:#E8B27F}
.hero__lede{font-size:var(--t-lg);color:#D5DED7;max-width:56ch}
.hero__proof{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-6) var(--s-8);margin-top:var(--s-12);
  padding-top:var(--s-8);border-top:1px solid rgba(255,255,255,.15);
  max-width:34rem;
}
@media (max-width:520px){ .hero__proof{grid-template-columns:1fr} }
.stat__num{font-size:var(--t-2xl);font-weight:750;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.stat__label{font-size:var(--t-sm);color:#A8B5AC;margin-top:var(--s-2);max-width:20ch}

.video{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:#0A1712;box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.12);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__caption{font-size:var(--t-sm);color:#A8B5AC;margin-top:var(--s-3);max-width:48ch}

/* ---------- 6a. Light Okanagan hero ----------
   Replaces the dark scrim hero. Warm paper background, navy type, gold accents,
   photograph shown bright and unobscured in its own panel. Contrast is trivial
   (navy on cream ≈ 16:1) instead of fought with an overlay. */
.hero--light{
  background:
    radial-gradient(120% 90% at 88% 8%, var(--gold-soft) 0%, rgba(245,230,200,0) 58%),
    linear-gradient(175deg, var(--warm-bg) 0%, var(--warm-bg-deep) 100%);
  color:var(--fg);padding-block:calc(var(--sec-pad) * 1.25);
}
.hero--light h1{color:var(--primary);font-size:var(--t-4xl);margin-bottom:var(--s-6)}
.hero--light .eyebrow{color:var(--gold)}
.hero--light .hero__lede{color:var(--secondary);font-size:var(--t-lg);max-width:52ch}
.hero--light .hero__proof{border-top:1px solid rgba(15,23,42,.14)}
.hero--light .stat__num{color:var(--primary)}
.hero--light .stat__label{color:var(--muted-fg)}
.hero--light .hero__grid{grid-template-columns:1fr 1.04fr;gap:var(--s-12);align-items:center}

/* Stats sit BELOW both columns, full width — keeps the two columns close in height
   instead of stacking everything on the left against a floating photo. */
.hero__proof--wide{
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:none;margin-top:var(--s-16);gap:var(--s-8);
}
@media (max-width:900px){ .hero__proof--wide{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .hero__proof--wide{grid-template-columns:1fr} }

/* Gold rule used under eyebrows / section openers */
.rule-gold{width:56px;height:4px;border-radius:2px;background:var(--gold-bright);
  margin:0 0 var(--s-6)}

/* Bright photo panel — no scrim, image does the work */
.shot{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-3);
  border:1px solid rgba(15,23,42,.10);background:var(--muted);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--tall{aspect-ratio:5/4}
.shot__cap{font-size:var(--t-sm);color:var(--muted-fg);margin-top:var(--s-3);max-width:46ch}

/* ---------- 6b. Photographic hero ---------- */
/* Photos are from the HVET project archive. Source images are low-resolution,
   so every photo sits under a heavy navy scrim — this keeps text contrast well
   above 4.5:1 AND reads the softness as atmosphere rather than poor quality.
   Replace with originals from Shawn when available. */
.hero--image{
  position:relative;isolation:isolate;
  padding-block:calc(var(--sec-pad) * 1.5);
}
.hero--image::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img);
  background-size:cover;background-position:center 62%;
  transform:scale(1.04);filter:saturate(.85);
}
.hero--image::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(105deg, rgba(8,15,32,.95) 0%, rgba(10,20,40,.88) 38%,
                            rgba(12,26,48,.50) 68%, rgba(14,32,58,.28) 100%),
    linear-gradient(to top, rgba(8,15,32,.80) 0%, rgba(8,15,32,0) 50%);
}
.hero--image .hero__grid{grid-template-columns:1.1fr .9fr}

/* Media frame used for photos and video */
.frame{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.14);
  background:#0A1712;
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame--tall{aspect-ratio:4/3}

/* ---------- 6c. Photo cards & bands ---------- */
/* `.card.card--photo` — must out-specify `.card{padding:…}` which is declared later */
.card.card--photo{padding:0;overflow:hidden}
.card.card--photo .card__media{
  display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--muted);position:relative;
}
.card.card--photo .card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 400ms var(--ease-out);
}
a.card.card--photo:hover .card__media img{transform:scale(1.05)}
.card.card--photo .card__body{
  display:flex;flex-direction:column;flex:1;
  padding:var(--s-6) var(--s-6) var(--s-8);
}
.card.card--photo h3{margin-bottom:var(--s-2);font-size:1.3rem;text-wrap:pretty}

/* Full-width photo band with caption */
.band{
  position:relative;min-height:340px;display:grid;align-items:end;
  background-size:cover;background-position:center 60%;
  border-radius:var(--radius-lg);overflow:hidden;
}
/* ⛔ STRENGTHENED 2026-08-22 — the old ramp (.92 → .35 at 55% → .15) looked fine and
   failed everywhere. Measured with the caption hidden, sampling the lightest pixel
   actually behind each line of text:

     index band 1 · sectors · tourism-trails   eyebrow  3.1–3.2:1   (needs 4.5)
     forestry-wildfire                          eyebrow  1.74:1     body 3.84:1
     index band 0                               heading  2.68:1     body 3.69:1
     aviation                                   eyebrow  1.67:1

   The eyebrow sits highest in the caption and therefore gets the least scrim, which
   is why it failed on every single band. ⚠️ Recolouring the text could not have fixed
   it — against a backdrop that light even pure white measures 3.17:1, so the scrim was
   always the thing that had to change.

   The ramp now holds ≈.72 alpha at the caption's top edge, which is what the
   arithmetic requires to bring a near-white sky down to a legible backdrop. It is a
   visibly darker lower half; that is the trade, and legibility wins.

   ⚠️ Re-measure after ANY band image change — the number depends entirely on what is
   behind the words: `node reviewcheck.mjs band`. */
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(8,15,32,.94) 0%,
    rgba(8,15,32,.86) 30%,
    rgba(8,15,32,.72) 50%,
    rgba(8,15,32,.30) 75%,
    rgba(8,15,32,.10) 100%);
}
.band__caption{position:relative;z-index:1;padding:var(--s-8);color:#fff;max-width:56ch}
.band__caption h3{color:#fff;margin-bottom:var(--s-2)}
.band__caption p{color:#D5DED7;margin:0}

/* Photo credit / provenance line */
.credit{font-size:var(--t-xs);color:var(--muted-fg);margin-top:var(--s-3)}
.section--dark .credit,.hero .credit{color:#A8B5AC}

/* ---------- 7. Cards ---------- */
.card{
  background:var(--card);color:var(--card-fg);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s-8);box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
  display:flex;flex-direction:column;
}
a.card{text-decoration:none;color:var(--card-fg)}
a.card:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--accent)}
.card h3{margin-bottom:var(--s-3)}
.card p{color:var(--secondary);font-size:var(--t-base);margin-bottom:var(--s-4)}
.card__num{
  font-size:var(--t-sm);font-weight:750;color:var(--accent);
  background:var(--accent-light);width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:var(--s-4);font-variant-numeric:tabular-nums;
}
.card__more{margin-top:auto;font-weight:650;color:var(--accent);font-size:var(--t-sm)}
a.card:hover .card__more{color:var(--accent-dark)}

/* ---------- 7b. Process row ("what we do" = a sequence, not three parallel things) ----------
   Deliberately NOT photo cards: there is no honest photograph of grant writing, and a second
   photo-card row flattens the page rhythm. Icons + a visible progression instead. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);position:relative}
.step{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s-8) var(--s-6) var(--s-6);text-decoration:none;color:var(--card-fg);
  display:flex;flex-direction:column;position:relative;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
a.step:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--gold-bright)}
/* gold rail across the top, filling left→right to signal sequence */
.step::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(90deg,var(--gold-bright),rgba(217,146,43,.25));
}
.step__head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.step__icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  background:var(--gold-soft);display:grid;place-items:center;color:var(--gold);
}
.step__icon svg{width:24px;height:24px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step__n{
  font-size:var(--t-xs);font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-fg);
}
.step h3{font-size:1.25rem;margin:0 0 var(--s-3);text-wrap:pretty}
.step p{color:var(--secondary);font-size:var(--t-base);margin-bottom:var(--s-4)}
.step__more{margin-top:auto;font-weight:650;color:var(--accent);font-size:var(--t-sm)}
a.step:hover .step__more{color:var(--accent-dark)}
/* Sequence connector — the copy claims "in sequence, on one file", so the layout
   should show it. A chevron sits in the gap between cards, vertically centred on the
   icon tile (4px rail + s-8 padding + half of the 46px icon). Points right when the
   cards sit in a row, down once they stack. */
.step:not(:last-child)::after{
  content:"";position:absolute;z-index:1;
  left:100%;top:calc(4px + var(--s-8) + 23px);
  margin-left:calc(var(--s-6) / 2);
  width:11px;height:11px;
  border-top:2px solid var(--gold-bright);
  border-right:2px solid var(--gold-bright);
  transform:translate(-50%,-50%) rotate(45deg);
}

@media (max-width:1024px){
  .steps{grid-template-columns:1fr}
  /* stacked: the chevron moves to the bottom edge and points down */
  .step:not(:last-child)::after{
    left:50%;top:100%;margin-left:0;
    margin-top:calc(var(--s-6) / 2);
    transform:translate(-50%,-50%) rotate(135deg);
  }
}

/* ---------- 8. Proof / evidence ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.pill{
  background:var(--card);border:1px solid var(--border);border-radius:100px;
  padding:var(--s-2) var(--s-4);font-size:var(--t-sm);color:var(--secondary);font-weight:550;
}
.section--dark .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#DDE4DE}

.quote{
  background:var(--card);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:var(--s-8);box-shadow:var(--sh-1);
}
.quote p{font-size:var(--t-lg);color:var(--primary);font-style:italic;margin-bottom:var(--s-4)}
.quote cite{font-style:normal;font-size:var(--t-sm);color:var(--muted-fg);line-height:1.5;display:block}
.quote cite b{display:block;color:var(--primary);font-style:normal;font-size:var(--t-base);
  font-weight:650;margin-bottom:var(--s-1)}

.note{
  font-size:var(--t-sm);color:var(--muted-fg);border-top:1px solid var(--border);
  padding-top:var(--s-4);margin-top:var(--s-8);max-width:80ch;
}
.section--dark .note{color:#A8B5AC;border-color:rgba(255,255,255,.15)}

/* ---------- 9. CTA band ---------- */
.cta{background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:var(--s-16)}
.cta h2{color:#fff}
.cta p{color:#D5DED7;max-width:60ch}

/* ---------- 10. Footer ---------- */
.footer{background:var(--primary);color:#A8B5AC;padding-block:var(--s-16) var(--s-8);
  font-size:var(--t-sm);margin-top:0}
.footer h3{color:#fff;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:var(--s-4)}
.footer a{color:#D5DED7;text-decoration:none;display:inline-block;padding-block:var(--s-1)}
.footer a:hover{color:#fff;text-decoration:underline}
.footer ul{list-style:none;padding:0;margin:0}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s-8)}
/* Three columns, not four: this site has no store, so there is no "Your account"
   column of learner logins and receipt lookups. */
.footer__grid--3{grid-template-columns:1.6fr 1.1fr 1.1fr}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s-12);
  padding-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between}

/* ---------- 11. Responsive (375 / 768 / 1024 / 1440) ---------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s-12)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  :root{--t-4xl:2.5rem;--t-3xl:2rem}
}
@media (max-width:768px){
  /* Mobile nav is the .nav-toggle disclosure at 900px — see §4b.
     Do NOT reintroduce `.nav{display:none}` here: it would also hide the open panel. */
  .grid-3{grid-template-columns:1fr}
  .cta{padding:var(--s-8)}
  :root{--t-4xl:2rem;--t-2xl:1.625rem;--s-24:3.5rem;--sec-pad:var(--s-12);--sec-pad-tight:var(--s-8)}
  .hero__proof{gap:var(--s-6)}
}
/* Pillar cards stay two-up on a portrait tablet (768) — a single 720px card with a
   720px-wide photograph is a poster, not a card. They drop to one column at phone
   width. 2026-08-23, after Tommy asked whether tablet was actually optimised. */
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:420px){
  .container{padding-inline:var(--s-4)}
  .btn{width:100%}
  .btn-row{flex-direction:column}
}

/* ============================================================
   14. INTERIOR PAGE COMPONENTS — added for the 15-page build
   ============================================================ */

/* ---------- 14a. Interior page header ----------
   Compact version of the light Okanagan hero. Interior pages do not get a
   full-height hero — the reader arrived with intent and wants the content. */
.phead{
  background:
    radial-gradient(120% 90% at 92% 0%, var(--gold-soft) 0%, rgba(245,230,200,0) 60%),
    linear-gradient(175deg, var(--warm-bg) 0%, var(--warm-bg-deep) 100%);
  padding-block:var(--s-8) var(--sec-pad);
  border-bottom:1px solid rgba(15,23,42,.08);
}
/* 20ch → 27ch, 2026-08-09. Tommy on training-delivery: "there is too much empty
   space, maybe we can make the text two lines or three instead of four?"
   The cause was measurable: the cap resolved to 420px inside a 635px column, so
   the heading wrapped to four lines while 215px of its own column sat unused.
   Checked on all ten interior pages with h1check.mjs before changing it — at 27ch
   (567px) every four-line heading drops to three and none exceeds three. */
.phead h1{font-size:var(--t-3xl);max-width:27ch;margin-bottom:var(--s-4)}
.phead .lede{max-width:60ch}
.phead .eyebrow{color:var(--gold)}
.phead__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-12);align-items:center}
@media (max-width:900px){ .phead__grid{grid-template-columns:1fr;gap:var(--s-8)} }
.phead__grid>*{min-width:0}

/* Jump block — the right-hand column on text-only page headers.
   Hub pages left a dead right half otherwise (the same imbalance flagged on the
   homepage hero). This fills it with navigation the reader actually wants: on a
   hub page the next action is almost always "take me to one of these". */
.jump{
  background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.10);
  border-radius:var(--radius-lg);padding:var(--s-6) var(--s-8) var(--s-8);
  box-shadow:var(--sh-1);backdrop-filter:blur(4px);
}
.jump h2{
  font-size:var(--t-xs);font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-fg);margin:0 0 var(--s-2);
}
.jump ol,.jump ul{list-style:none;padding:0;margin:0;counter-reset:jump}
.jump li{margin:0;border-bottom:1px solid rgba(15,23,42,.09)}
.jump li:last-child{border-bottom:none}
.jump a{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:52px;padding:var(--s-3) 0;
  text-decoration:none;color:var(--primary);font-weight:650;line-height:1.3;
}
.jump a:hover{color:var(--accent)}
.jump a::after{
  content:"→";margin-left:auto;color:var(--gold);font-weight:700;
  transition:transform var(--dur) var(--ease-out);
}
.jump a:hover::after{transform:translateX(3px)}
.jump .jump__n{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--gold-soft);color:var(--gold);
  display:grid;place-items:center;font-size:var(--t-xs);font-weight:750;
  font-variant-numeric:tabular-nums;
}
.jump__note{
  font-size:var(--t-sm);color:var(--muted-fg);margin:var(--s-4) 0 0;
  padding-top:var(--s-4);border-top:1px solid rgba(15,23,42,.09);
}

/* Prominent call panel — contact page header */
.callpanel{
  background:var(--primary);color:#fff;border-radius:var(--radius-lg);
  padding:var(--s-8);box-shadow:var(--sh-3);
}
.callpanel h2{color:#fff;font-size:var(--t-sm);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:var(--s-3)}
/* Standalone tap target, not an inline link — so it has to clear 44px on its own
   (the WCAG 2.5.8 inline-text exception does not apply to a primary CTA). */
.callpanel .callpanel__num{
  display:inline-flex;align-items:center;min-height:48px;
  font-size:var(--t-2xl);font-weight:750;letter-spacing:-.02em;
  color:#fff;text-decoration:none;line-height:1.1;
  margin-bottom:var(--s-3);padding-block:var(--s-1);
  font-variant-numeric:tabular-nums;
}
.callpanel .callpanel__num:hover{color:#E8B27F;text-decoration:underline}
.callpanel p{color:#D5DED7;font-size:var(--t-sm);margin-bottom:0;max-width:34ch}

/* Breadcrumb (skill: navigation-clarity — the reader must always know where they are) */
.crumb{font-size:var(--t-sm);color:var(--muted-fg);margin:0 0 var(--s-4)}
.crumb a{color:var(--secondary);text-decoration:none}
.crumb a:hover{color:var(--accent);text-decoration:underline}
.crumb span{margin-inline:var(--s-2);color:#A8B5AC}

/* ---------- 14b. Prose column ---------- */
.prose{max-width:70ch;min-width:0}
.prose h2{margin-top:var(--s-12)}
/* A heading directly under its eyebrow sits 12px below it everywhere else on the
   site; inside .prose it was getting the 48px "new subsection" margin as well.
   Measured 2026-08-23: 48px on eight section openings vs 12px on the rest. */
.prose h2:first-child,.prose .eyebrow+h2{margin-top:0}
.prose h3{margin-top:var(--s-8);font-size:var(--t-lg)}
.prose>p:last-child{margin-bottom:0}

/* Two-column: content + sticky rail */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-16);align-items:start}
@media (max-width:1024px){ .split{grid-template-columns:1fr;gap:var(--s-12)} }
/* Grid children default to min-width:auto, so a wide descendant (the 560px min-width
   on table.tbl) sets the track's minimum and blows the whole page out horizontally.
   This caused +229px of overflow at 375px on every page with a table inside .split. */
.split>*{min-width:0}
.rail{position:sticky;top:96px;display:grid;gap:var(--s-6)}
@media (max-width:1024px){ .rail{position:static} }

/* ---------- 14c. Checked / crossed lists ---------- */
.list-check,.list-x{list-style:none;padding:0;margin:0 0 var(--s-4)}
.list-check li,.list-x li{
  position:relative;padding-left:2rem;margin-bottom:var(--s-3);max-width:66ch;
}
.list-check li::before,.list-x li::before{
  position:absolute;left:0;top:.15em;width:1.25rem;height:1.25rem;
  display:grid;place-items:center;border-radius:50%;
  font-size:.7rem;font-weight:800;line-height:1;
}
.list-check li::before{content:"✓";background:#DCFCE7;color:#15803D}
.list-x li::before{content:"—";background:var(--muted);color:var(--muted-fg)}
.section--dark .list-check li::before{background:rgba(34,197,94,.18);color:#86EFAC}
.section--dark .list-check li,.section--dark .list-x li{color:#D5DED7}

/* ---------- 14d. Numbered process flow ---------- */
.flow{list-style:none;padding:0;margin:0;counter-reset:flow}
.flow li{
  counter-increment:flow;position:relative;
  padding-left:3.5rem;padding-bottom:var(--s-8);margin:0;
}
.flow li:last-child{padding-bottom:0}
.flow li::before{
  content:counter(flow);position:absolute;left:0;top:0;
  width:2.25rem;height:2.25rem;border-radius:50%;
  background:var(--accent-light);color:var(--accent);
  display:grid;place-items:center;font-weight:750;font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;
}
/* connector rail between the numbers */
.flow li::after{
  content:"";position:absolute;left:calc(1.125rem - 1px);top:2.5rem;bottom:.25rem;
  width:2px;background:var(--border);
}
.flow li:last-child::after{display:none}
.flow h3{font-size:var(--t-lg);margin:0 0 var(--s-2)}
.flow p{margin:0;color:var(--secondary)}
.section--dark .flow li::before{background:rgba(232,178,127,.18);color:#E8B27F}
.section--dark .flow li::after{background:rgba(255,255,255,.15)}

/* ---------- 14e. Data table ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--s-4)}
table.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-sm)}
table.tbl caption{
  text-align:left;font-size:var(--t-sm);color:var(--muted-fg);
  padding-bottom:var(--s-3);
}
table.tbl th,table.tbl td{
  text-align:left;padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border);vertical-align:top;
}
table.tbl thead th{
  background:var(--primary);color:#fff;font-weight:650;
  border-bottom:none;white-space:nowrap;
}
table.tbl thead th:first-child{border-radius:var(--radius) 0 0 0}
table.tbl thead th:last-child{border-radius:0 var(--radius) 0 0}
table.tbl tbody tr:nth-child(even){background:rgba(232,236,241,.45)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl td strong{color:var(--primary)}

/* ---------- 14f. Callout / disclosure notices ----------
   Used for the honesty notes this site needs: what a certificate does and does not
   cover, what is unverified, what requires an in-person practical. */
.callout{
  border:1px solid var(--border);border-left:4px solid var(--accent);
  background:var(--card);border-radius:var(--radius);
  padding:var(--s-6);margin-block:var(--s-6);box-shadow:var(--sh-1);
}
.callout>*:last-child{margin-bottom:0}
/* `.callout__h` is the same thing as the h3 but without the heading semantics —
   used where a callout appears before the section's first h2, so it does not
   create an h1→h3 heading-order skip for a screen reader walking the outline. */
.callout h3,.callout .callout__h{
  font-size:var(--t-base);margin:0 0 var(--s-2);
  font-weight:700;line-height:1.3;color:var(--primary);letter-spacing:-.015em;
}
.callout p{font-size:var(--t-sm);color:var(--secondary);max-width:72ch}
.callout--warn{border-left-color:var(--gold-bright);background:#FFFBEB}
.callout--warn h3,.callout--warn .callout__h{color:#78350F}
.callout--warn p{color:#78350F}

/* ---------- 14g. FAQ (native disclosure — no JS) ---------- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s-4) 2.5rem var(--s-4) 0;
  font-weight:650;color:var(--primary);position:relative;min-height:44px;
  display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:var(--s-2);top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{color:var(--accent)}
.faq details>*:not(summary){margin-bottom:var(--s-4)}
.faq details p{color:var(--secondary);max-width:70ch}
/* Two columns from 1024px up. A single column of questions capped at 80ch left the
   right 445px of a 1152px section empty for the whole height of the accordion — the
   same dead-half fault fixed on the homepage and sectors headers. Columns rather
   than full-width rows because a one-line question with its chevron 1152px away
   reads as a stretched rule, not a control. */
@media (min-width:1024px){
  .faq--2col{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-12);border-top:none}
  .faq--2col>details{border-top:1px solid var(--border)}
  .faq--2col>details:last-child{border-bottom:1px solid var(--border)}
}

/* ---------- 14h. Forms ---------- */
.form{display:grid;gap:var(--s-5,1.25rem);max-width:34rem}
.field{display:grid;gap:var(--s-2)}
.field label{font-weight:650;font-size:var(--t-sm);color:var(--primary)}
.field .hint{font-size:var(--t-sm);color:var(--muted-fg);margin:0}
.field .req{color:var(--destructive);font-weight:700}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--t-base);          /* 16px — prevents iOS zoom on focus */
  width:100%;padding:var(--s-3) var(--s-4);min-height:48px;
  border:1px solid #D5DED7;border-radius:var(--radius);
  background:var(--card);color:var(--fg);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.field textarea{min-height:9rem;resize:vertical;line-height:1.6}
/* Checkboxes: 24×24 is the WCAG 2.5.8 (AA) minimum target size, and the label
   wrapping it gives a much larger clickable area than the box itself. */
.field input[type="checkbox"],.field input[type="radio"]{
  width:24px;height:24px;min-height:24px;flex:0 0 auto;
  accent-color:var(--accent);cursor:pointer;
}
.field label:has(input[type="checkbox"]),
.field label:has(input[type="radio"]){
  min-height:44px;padding-block:var(--s-2);cursor:pointer;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--secondary)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(3,105,161,.18);outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}

/* ---------- 14i. Course catalogue ---------- */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media (max-width:1024px){ .courses{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .courses{grid-template-columns:1fr} }
.course{
  display:flex;flex-direction:column;gap:var(--s-2);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s-5,1.25rem) var(--s-6);text-decoration:none;color:var(--card-fg);
  box-shadow:var(--sh-1);min-height:100%;
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
a.course:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--accent)}
.course strong{font-size:var(--t-base);color:var(--primary);line-height:1.35}
.course span{font-size:var(--t-sm);color:var(--muted-fg)}
.tag{
  display:inline-flex;align-items:center;align-self:flex-start;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:4px;margin-top:auto;
}
.tag--online{background:#DCFCE7;color:#14532D}
.tag--practical{background:var(--gold-soft);color:#78350F}

/* ---------- 14i-2. Real product cards (BIS store) ----------
   The store is BIS's; these cards merchandise it and deep-link into it.
   Price, rating and review count are real values pulled from the store — they are
   the strongest trust signal the business has and neither site was using them. */
.buy{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s-6);box-shadow:var(--sh-1);height:100%;
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.buy:hover{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:var(--accent)}
.buy h3{font-size:var(--t-lg);margin:0 0 var(--s-2);text-wrap:pretty}
/* The course title is a standalone product link, not inline prose — so it has to
   clear 44px on its own rather than relying on the WCAG 2.5.8 inline exception. */
.buy h3 a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--primary);text-decoration:none;
}
.buy h3 a:hover{color:var(--accent);text-decoration:underline}
.buy__desc{font-size:var(--t-sm);color:var(--secondary);margin-bottom:var(--s-4)}
.buy__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-4);border-top:1px solid var(--border)}
.buy__price{font-size:var(--t-xl);font-weight:750;color:var(--primary);
  line-height:1;font-variant-numeric:tabular-nums}
.buy__price small{display:block;font-size:var(--t-xs);font-weight:500;color:var(--muted-fg);
  margin-top:var(--s-1);letter-spacing:0}
.buy__price--free{color:var(--success)}
.buy .btn{min-height:44px;padding:var(--s-2) var(--s-5,1.25rem);font-size:var(--t-sm)}

/* Rating + review count */
.rating{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);
  color:var(--muted-fg);margin-bottom:var(--s-3);flex-wrap:wrap}
.rating__stars{color:var(--gold-bright);letter-spacing:.06em;font-size:var(--t-base)}
.rating__score{font-weight:700;color:var(--primary)}
.rating__n{font-variant-numeric:tabular-nums}
.section--dark .rating{color:#A8B5AC}
.section--dark .rating__score{color:#fff}

/* ---------- 14i-3. The two doors ---------- */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
@media (max-width:900px){ .doors{grid-template-columns:1fr} }
.door{
  display:flex;flex-direction:column;border-radius:var(--radius-lg);
  padding:var(--s-8);text-decoration:none;box-shadow:var(--sh-2);
  border:1px solid var(--border);background:var(--card);color:var(--card-fg);
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.door:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.door--buy{background:var(--primary);border-color:var(--primary);color:#fff}
.door--buy h2,.door--buy h3{color:#fff}
.door--buy p{color:#D5DED7}
.door__eyebrow{
  font-size:var(--t-xs);font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--s-2);
}
.door--buy .door__eyebrow{color:#E8B27F}
.door h2,.door h3{font-size:var(--t-xl);margin:0 0 var(--s-3);letter-spacing:-.02em}
.door p{font-size:var(--t-base);margin-bottom:var(--s-4)}
.door__go{margin-top:auto;font-weight:700;color:var(--accent)}
.door--buy .door__go{color:#E8B27F}
.door:hover .door__go{text-decoration:underline}

/* ---------- 14i-4. Category tiles ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
@media (max-width:1024px){ .cats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px){ .cats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .cats{grid-template-columns:1fr} }
.cat{
  display:flex;flex-direction:column;gap:var(--s-1);min-height:96px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s-5,1.25rem);text-decoration:none;color:var(--card-fg);box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.cat:hover{box-shadow:var(--sh-2);border-color:var(--accent);transform:translateY(-2px)}
.cat strong{color:var(--primary);font-size:var(--t-base)}
.cat span{font-size:var(--t-sm);color:var(--muted-fg)}

/* Icons on the occupation cards (added 2026-08-07). Sixteen near-identical link
   tiles were the real reason this page read as flat — an image would have been
   decoration, whereas an icon per grouping aids scanning AND adds texture.
   Deliberately NOT applied to the store's own seven categories: those are
   abstract admin groupings, and leaving them plain creates a useful hierarchy
   between "start from your work" and "or browse the store's filing system". */
.cat__icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  background:var(--gold-soft);display:grid;place-items:center;color:var(--gold);
  margin-bottom:var(--s-2);
}
.cat__icon svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a.cat:hover .cat__icon{background:var(--gold-bright);color:#fff}

/* ---------- 14j. Leadership ---------- */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-8)}
@media (max-width:768px){ .people{grid-template-columns:1fr} }
.person{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s-8);box-shadow:var(--sh-1);
}
.person__avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--primary);color:#fff;display:grid;place-items:center;
  font-weight:750;font-size:var(--t-xl);letter-spacing:-.02em;margin-bottom:var(--s-4);
}
/* A photograph fills the same circle the initials do, so a card with a headshot and
   a card without still sit in the same grid. Sources are 256px for a 64px circle —
   4× for retina, and nowhere near the never-upscale line. Full-resolution originals
   are kept out of build/ in Source/Headshots 2026-08-12/ (14MB each). */
.person__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.person h3{margin-bottom:var(--s-1)}
.person__role{
  font-size:var(--t-sm);font-weight:650;color:var(--accent);
  margin:0 0 var(--s-4);text-transform:uppercase;letter-spacing:.06em;
}

/* ---------- 14k. Blog / posts ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
@media (max-width:1024px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .posts{grid-template-columns:1fr} }
.post__meta{
  font-size:var(--t-xs);font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-fg);margin-bottom:var(--s-2);
}

/* ---------- 14l. Stat row on light backgrounds ---------- */
.stats-light{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-8);
  padding-top:var(--s-8);border-top:1px solid rgba(15,23,42,.14);margin-top:var(--s-12);
}
@media (max-width:900px){ .stats-light{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .stats-light{grid-template-columns:1fr} }
.stats-light .stat__num{color:var(--primary)}
.stats-light .stat__label{color:var(--muted-fg)}

/* ---------- 12. Reduced motion (skill: reduced-motion) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  a.card:hover,.btn--primary:hover{transform:none}
}

/* ---------- 13. Print ---------- */
@media print{
  .header,.footer,.btn-row{display:none}
  body{background:#fff;color:#000}
  .hero{background:#fff;color:#000}
  .hero h1,.hero__lede{color:#000}
}

/* ---------- Dominion additions ---------- */

/* The four hero stats carry an attribution qualifier each ("our principals have
   delivered since", not "we have delivered since"), which makes their labels
   longer than a normal stat row. Ragged 1-vs-3-line labels read as a mistake, so
   the labels are held to two lines and the one fact that would not fit — that
   the company is in good standing — runs as a note beneath the row instead. */
.hero__proof-note{
  font-size:var(--t-sm);color:var(--muted-fg);max-width:78ch;
  margin:var(--s-6) 0 0;padding-top:var(--s-4);border-top:1px solid var(--border);
}
/* The stat row already closes the hero, so it does not need a further 96px of
   air beneath it before the next section's own 96px begins. */
.hero .hero__proof--wide{margin-bottom:calc(-1 * var(--s-8))}

/* Three stats spanning the full container. The base .hero__proof is a 2-column
   grid capped at 34rem because it was built for the Velocity homepage's narrow
   left column; dropped into a full-width dark band it breaks 2+1 and leaves the
   section using 544px of 1200. --wide (4 cols) and --3 (3 cols) release it. */
.hero__proof--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;
  margin-top:var(--s-16);gap:var(--s-8)}
@media (max-width:700px){ .hero__proof--3{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* .people is a hard 2-column grid in the Velocity system. This site shows five
   cards (Shawn, Barbara, Tommy, Maria, plus the instructors card), so two columns
   would leave a single orphan on a third row. Three columns gives 3 + 2, which
   reads as a deliberate layout rather than a mistake. */
.people{grid-template-columns:repeat(3,1fr)}
/* "Instructors & field crew" is not a fourth person, it is the bench behind the three
   named ones — so it runs the full row rather than sitting in a person-shaped slot.
   That is also what stops the grid from orphaning it: dropping Maria's card on
   2026-08-22 left four cards in a three-column grid, i.e. one card beside two empty
   cells. Cap the measure — a paragraph 1152px wide is well past a readable line. */
.person--wide{grid-column:1/-1}
.person--wide p{max-width:72ch}

/* ── Leadership rows, 2026-08-23 ──────────────────────────────────────────
   Tommy: "is the photo too small? should we do a horizontal layout instead of
   vertical?" One person per row: a 160px photograph (4× the old 64px circle),
   the bio in the middle, and an "at a glance" list on the right where the
   checkable figures live — a funder scans those, they do not read for them.
   Sources are 480px, so the circle is never upscaled, even at 2× DPR. */
/* `.people.people--rows` on purpose: the 2-column tablet rule for the old card grid
   sits later in this file and would otherwise win at ≤1000px — measured 2026-08-23,
   rows were being squeezed into two 348px columns on an iPad. */
.people.people--rows{grid-template-columns:1fr;gap:var(--s-6)}
.person--row{
  display:grid;grid-template-columns:160px minmax(0,1fr) 280px;
  gap:var(--s-8);align-items:start;
}
.person__avatar--lg{width:160px;height:160px;font-size:var(--t-3xl);margin-bottom:0}
.person__body h3{margin-bottom:var(--s-1)}
.person__body p{max-width:62ch}
.person__facts{
  list-style:none;margin:0;padding:var(--s-4) 0 0 var(--s-6);
  border-left:3px solid var(--accent);
  font-size:var(--t-sm);color:var(--secondary);
}
.person__facts li{position:relative;padding-left:0;margin-bottom:var(--s-3);line-height:1.45}
.person__facts li:last-child{margin-bottom:0}
.person__facts li::before{content:"";}
.person--crew{grid-template-columns:160px minmax(0,1fr)}
.person--crew .person__body p{max-width:72ch}
@media (max-width:1024px){
  .person--row{grid-template-columns:128px minmax(0,1fr)}
  .person__avatar--lg{width:128px;height:128px}
  .person__facts{grid-column:2;padding-top:0;border-left-width:3px}
}
@media (max-width:640px){
  .person--row,.person--crew{grid-template-columns:1fr}
  .person__avatar--lg{width:112px;height:112px}
  .person__facts{grid-column:1}
}
@media (max-width:1000px){ .people{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .people{grid-template-columns:1fr} }

/* ---------- Archive photograph grid ---------- */
/* Three columns at ~368px per cell inside the 1200px container. That number is
   not arbitrary: the archive photographs are 372–640px wide at native resolution
   and must never be displayed larger than they are. `object-fit:cover` on a fixed
   4:3 box keeps the grid even despite the mixed source ratios (one is portrait).
   Do not widen these cells without re-checking the source pixel widths. */
.archive{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8);margin-top:var(--s-12)}
.archive figure{margin:0}
.archive img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:var(--radius);box-shadow:var(--sh-2);background:var(--muted);
}
.archive figcaption{
  font-size:var(--t-sm);color:var(--muted-fg);margin-top:var(--s-3);line-height:1.5;
}
@media (max-width:900px){ .archive{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .archive{grid-template-columns:1fr} }

/* ---------- Footer brand mark ---------- */
/* Bug found 2026-08-09 by measuring the header brand against the footer brand:
   in the header the "D" sits beside the wordmark; in the footer it sat ABOVE it.
   Cause is specificity, not markup — `.footer a` (0-1-1) sets display:inline-block
   and outranks `.brand` (0-1-0), so the flex row silently collapsed on all 14
   pages. Restated at higher specificity rather than by adding !important. */
.footer a.brand{display:flex;align-items:center;gap:var(--s-4)}

/* ---------- Hero, rebalanced 2026-08-09 ---------- */
/* See the comment in index.html for the reasoning. The short version: the two
   columns were within 21px of each other in height, so this was never a height
   problem — it was that all the words were on one side. */

/* Headline spans the container. ~28ch keeps it to two lines at 1200px rather
   than running edge to edge, which would be a different kind of unbalanced. */
.hero__title{max-width:28ch;margin-bottom:var(--s-10, 2.5rem)}

/* ⚠️ align-items MUST be set at .hero--light specificity. `.hero__grid--split`
   alone (0-1-0) loses to `.hero--light .hero__grid` (0-2-0), which centres — and
   the first attempt at this hero shipped with a 400px hole above the buttons for
   exactly that reason. Measured, not eyeballed: the columns were 177px and 595px. */
.hero__grid--split{margin-top:var(--s-8)}
/* The left column is deliberately the NARROW one. It holds the lede, the buttons
   and the standing note; making it narrow forces the paragraph to run longer, which
   is what brings it level with a photograph — a wide text column would sit half the
   height of the image beside it and look like an accident. */
.hero--light .hero__grid--split{
  grid-template-columns:.72fr 1.28fr;gap:var(--s-16);align-items:start;
}

.btn-row--hero{margin-top:0}
.hero__note{
  font-size:var(--t-sm);color:var(--muted-fg);max-width:44ch;
  margin:var(--s-8) 0 0;padding-top:var(--s-6);border-top:1px solid var(--border);
}
/* 16:9 rather than the 5:4 used elsewhere. A tall photo beside a short column is
   exactly what produced the imbalance Tommy spotted. */
.shot--wide{aspect-ratio:16/9}
/* max-width off: the lede is already constrained by a narrow column, and the 52ch
   cap would otherwise stop it filling that column and reintroduce the gap. */
.hero--light .hero__grid--split .hero__lede{margin-top:0;max-width:none}
.hero--light .hero__grid--split .btn-row{margin-top:var(--s-8)}

@media (max-width:900px){
  .hero--light .hero__grid--split{grid-template-columns:1fr;gap:var(--s-8)}
  .hero__title{max-width:none}
  .hero__note{margin-top:var(--s-6)}
}

/* ---------- Sectors header + page closer ---------- */
/* Heading block left, a plain-prose aside right, so the section header uses the
   full container instead of leaving half of it empty.
   ⚠️ The aside is deliberately NOT a `.callout`. That component is bordered,
   ember-ruled and shadowed because it carries warnings; ordinary copy inside one
   reads as an interruption bolted to the header. This version carries no chrome at
   all — it shares the header's own eyebrow + hairline-rule language so the two
   columns read as one block. Do not "tidy" it back into a card. */
.sector-head{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-16);align-items:start}
.sector-head__aside{padding-top:var(--s-2)}
.sector-head__aside p{color:var(--muted-fg);max-width:42ch}
.sector-head__aside p:last-child{margin-bottom:0}
.sector-head__aside .eyebrow{margin-bottom:var(--s-3)}
.sector-head__aside .rule-gold{margin-bottom:var(--s-5, 1.25rem)}
.sector-head>*{min-width:0}
@media (max-width:900px){ .sector-head{grid-template-columns:1fr;gap:var(--s-8)} }

/* The slim closing action. Deliberately NOT a second copy of the CTA band — the
   band moved up the page, and repeating it verbatim at the bottom would read as a
   template rather than a decision. */
.closer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-6);padding:var(--s-8) var(--s-12);
  background:var(--warm-bg-deep);border-radius:var(--radius-lg);
  border:1px solid var(--border);
}
.closer p{margin:0;max-width:46ch;font-size:var(--t-lg);color:var(--primary);font-weight:550}
@media (max-width:700px){ .closer{padding:var(--s-6);flex-direction:column;align-items:flex-start} }

/* Tommy, 2026-08-09: sector cards to 16:9. Slightly shorter than the 16:10 they
   were, which also brings the three cards up under the header a little tighter. */
.card.card--photo .card__media{aspect-ratio:16/9}

/* The narrow left column stacks the two hero buttons. Left to themselves they take
   their content width, so they end up ragged — 152px above 189px. Stretching both
   to the column reads as a deliberate pair rather than a wrap. */
.hero--light .hero__grid--split .btn-row{flex-direction:column;align-items:stretch;gap:var(--s-3)}
.hero--light .hero__grid--split .btn-row .btn{justify-content:center;width:100%}
@media (min-width:1200px){
  .hero--light .hero__grid--split .btn-row{flex-direction:row;align-items:center}
  .hero--light .hero__grid--split .btn-row .btn{width:auto;flex:1 1 0}
}

/* CTA band as an action bar: message left, buttons right, vertically centred. As a
   stack the whole thing sat in the left half and the right half was empty green. */
.cta--split{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--s-12);align-items:center}
.cta--split>*{min-width:0}
.cta--split h2{margin-bottom:var(--s-3)}
.cta--split .btn-row{margin-top:0;flex-direction:column;align-items:stretch;gap:var(--s-3)}
.cta--split .btn-row .btn{justify-content:center;width:100%}
@media (max-width:860px){
  .cta--split{grid-template-columns:1fr;gap:var(--s-8)}
  .cta--split .btn-row{flex-direction:row;align-items:center}
  .cta--split .btn-row .btn{width:auto}
}

/* 16:10 — the native ratio of the archive photographs (485×303 = 1.601, and
   16/10 = 1.600). An archive image in this box lands with zero crop and, at the
   468px the page-head column gives it, no upscaling either. `.shot--tall` is 5:4
   and would scale the same image up 24% to fill. */
.shot--photo{aspect-ratio:16/10}

/* ---------- Generated working-detail frames ---------- */
/* 3:2 — the native ratio of two of the four generated frames (1537×1023 = 1.502).
   Sits alongside .shot--photo (16:10) so each image lands in a box matching its
   own source and nothing is cropped or scaled up. */
.shot--3x2{aspect-ratio:3/2}

/* "Illustrative photograph." on every generated frame's caption. Small, quiet and
   non-negotiable: these pictures are of a desk, not of a project, and the caption
   is what stops a reader assuming otherwise. Real archive photographs say
   "Photograph from the project archive" instead — the two must stay distinguishable. */
.cap-note{color:var(--muted-fg);font-style:italic;white-space:nowrap}

.feature-shot{margin:0 0 var(--s-16)}
.feature-shot img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--sh-2);
  aspect-ratio:3/2;object-fit:cover;background:var(--muted)}
.feature-shot figcaption{font-size:var(--t-sm);color:var(--muted-fg);margin-top:var(--s-3);
  max-width:70ch}

.inline-shot{margin:0 0 var(--s-8)}
.inline-shot img{width:100%;border-radius:var(--radius);box-shadow:var(--sh-1);
  aspect-ratio:16/10;object-fit:cover;background:var(--muted)}
.inline-shot figcaption{font-size:var(--t-sm);color:var(--muted-fg);margin-top:var(--s-3);
  max-width:60ch}