/* ==========================================================================
   Steve Cleland — design system

   Architecture inherited from the PHP Power Team build (~/Clients/php/projects/website/):
   token-driven, clamp-based fluid spacing, no framework, no build step. The ENGINEERING is
   reused. The brand layer is not — every colour, face and radius below is Steve's.

   PALETTE IS NO LONGER PROVISIONAL. It is sampled from Steve's own logo
   (assets/img/logo-mark.png): navy #002060, bright blue #1088F8. Type is still a
   proposal and has not been confirmed. Retheme = change the tokens block only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

/* ---------- tokens ---------- */
:root {
  /* SAMPLED FROM STEVE'S ACTUAL LOGO (assets/img/logo-mark.png), not guessed and no
     longer provisional. Navy #002060 is the script and the dark ring; #1088F8 is the
     bright arc. The earlier "Carolina blue" placeholder is gone, and with it the
     school-affiliation question: his blue is a vivid azure, not Carolina blue. */
  --navy:       #002060;
  --navy-2:     #0A2E72;
  --navy-3:     #14418F;
  --navy-line:  #1E4E9E;

  --blue:       #1088F8;
  --blue-light: #7CC0FD;
  /* The brand blue cannot carry white text: #1088F8 measures 3.56:1 against white,
     under the 4.5:1 required for normal text. #0D6FCC is the same hue darkened until
     it clears at 5.05:1, so buttons and links stay on-brand and stay legible. */
  --blue-deep:  #0D6FCC;

  --ink:        #002060;
  --ink-2:      #0F2B57;
  --grey:       #4F5E75;
  --grey-2:     #7A8AA0;
  --line:       #E1E7EF;
  /* Borders that have to be SEEN, not just felt: form controls, and the cards that
     hold them. #8492A6 measures 3.14:1 against white, clearing the 3:1 that
     WCAG 1.4.11 requires for a UI component boundary. --line is 1.2:1 and is for
     decorative dividers only. */
  /* A field's edge has TWO neighbours: the page behind it and its own fill. #8492A6
     cleared the page at 3.16:1 but only reached 2.94:1 against the fill. #7C8A9E
     measures 3.51:1 against white and 3.41:1 against --field-bg, so it passes on
     both sides rather than on the convenient one. */
  --field-line: #7C8A9E;
  --field-bg:   #FBFCFD;
  /* Between the two: visible enough that a card reads as a bounded area on white,
     without the weight of a form control's edge. --line was 1.2:1 and vanished. */
  --line-2:     #AFC0D1;
  --surface:    #FFFFFF;
  --surface-2:  #F4F7FA;
  --surface-3:  #FAFCFD;

  --amber:      #9A6B00;
  --amber-bg:   #FFF8E5;

  /* Archivo has jersey-number weight at 800 and stays editorial at 600, which suits a
     leadership/athletics register without becoming a sports team. Source Sans 3 is a
     workhorse that reads as financial-document-legible at small sizes.
     One-line swap if Scott wants PHP's Poppins carried across instead. */
  --font:       'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head:  'Archivo', var(--font);

  --wrap:       1200px;
  --gut:        clamp(20px, 5vw, 48px);

  --r-sm:       8px;
  --r:          14px;
  --r-lg:       20px;
  --r-xl:       28px;

  --shadow-1:   0 2px 8px rgba(0,32,96,.06);
  --shadow-2:   0 12px 32px -8px rgba(0,32,96,.14);
  --shadow-3:   0 32px 64px -16px rgba(0,32,96,.24);
  --shadow-blue:0 16px 40px -12px rgba(13,111,204,.42);

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--grey);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink); font-weight: 700; line-height: 1.08; letter-spacing: -.022em;
}

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

:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 10vw, 140px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--dark { background: var(--navy); color: rgba(255,255,255,.74); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--alt { background: var(--surface-2); }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.center { text-align: center; }
.measure { max-width: 62ch; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  background: rgba(13,111,204,.07); border: 1px solid rgba(13,111,204,.18);
  font-family: var(--font-head);
  /* Was .72rem (11.5px). Bumped to 12px: there is room for it in a standalone pill, and
     nothing on the page needs to be under 12px. */
  font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-deep); margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-deep); flex-shrink: 0;
}
/* `.phero` is a dark surface too. Without it here the light-background eyebrow was
   painting blue-on-navy at 3.89:1 on every interior page. */
.section--dark .eyebrow,
.phero .eyebrow,
.cta-band .eyebrow,
.path .eyebrow {
  color: var(--blue-light); background: rgba(124,192,253,.14); border-color: rgba(124,192,253,.32);
}
.section--dark .eyebrow::before,
.phero .eyebrow::before,
.cta-band .eyebrow::before,
.path .eyebrow::before { background: var(--blue-light); }

.h-xl { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.034em; }
.h-lg { font-size: clamp(2.05rem, 4.4vw, 3.2rem); font-weight: 700; letter-spacing: -.028em; }
.h-md { font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 700; }
.h-sm { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head);
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--blue-deep); color: #fff;
  font-weight: 600; font-size: .96rem; letter-spacing: -.01em;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  min-height: 46px;
}
.btn:hover { background: var(--navy-3); transform: translateY(-2px); box-shadow: var(--shadow-blue); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn--lg { padding: 16px 32px; font-size: 1.02rem; min-height: 54px; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.6); box-shadow: none; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--surface-2); color: var(--navy); }
.btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { background: var(--surface-2); border-color: var(--blue-deep); box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; color: var(--blue-deep);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
a:hover .link-arrow svg, .link-arrow:hover svg { transform: translateX(4px); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 13px; }
/* Steve's real logo. The circular mark carries the script wordmark, so it is used at a
   size where the script still reads rather than shrinking to a blue dot. */
.brand__mark { width: 54px; height: 54px; flex-shrink: 0; display: block; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand__txt b { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
/* The logo's own tagline, in its own order. Was .66rem (10.6px), which is genuinely
   small. Raised to 11.2px and the tracking eased, which is as far as it goes before the
   header lockup stops fitting a 375px phone alongside the mark and the menu button.
   A wider sub-line would need the tagline dropped on mobile instead, and it is his
   positioning, so it stays. */
.brand__txt span { font-size: .7rem; color: var(--grey); letter-spacing: .1em; text-transform: uppercase; }

/* The logo is navy on transparent, so on a navy surface it disappears. Until Steve
   supplies a proper reversed lockup, knock it out to white: it loses the two-tone blue
   but stays legible, which is the right trade. Flagged for him to supply a real one. */
.brand--rev .brand__mark img { filter: brightness(0) invert(1); }

/* Gap was 30px with five items. Steve's "Belynda Tribute" makes six, and 22px is what buys
   the row back 40px so the full label can be used instead of his abbreviated fallback. */
.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  font-family: var(--font-head); font-weight: 600; font-size: .93rem; color: var(--ink-2);
  position: relative; padding-block: 6px;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--blue-deep); transition: right .25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

.hdr__cta { display: flex; align-items: center; gap: 12px; }

.navtoggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer;
}
.navtoggle span, .navtoggle span::before, .navtoggle span::after {
  display: block; width: 18px; height: 2px; background: var(--ink); margin-inline: auto; position: relative;
}
.navtoggle span::before { content: ''; position: absolute; top: -6px; }
.navtoggle span::after  { content: ''; position: absolute; top: 6px; }

/* Hidden on desktop, where the header button already carries this action.
   ORDER MATTERS: this must sit BEFORE the max-width block below. A media query adds no
   specificity, so an identical rule placed after it would win at every width and the
   link would stay hidden on mobile too. That is exactly what happened once. */
.nav .nav__book { display: none; }

/* Was 900px. Steve's "Belynda Tribute" makes six nav items, and measured at 901px the row
   needed 870px of a 796px track, so the brand lockup was being squeezed and the header grew
   a line taller. The choice was his abbreviated "BC Tribute" at every width or the full
   label with the menu button covering the tight band. The full label is the one a stranger
   can read, so the bar collapses later instead. Only the header moves; the 900px rules for
   .g-3/.g-4 and .phero__grid are unrelated layout and stay where they are.
   1070 rather than a round number, and measured on the rendered header rather than estimated.
   Sweeping the header's own width, the smallest one that keeps the brand tagline on a single
   line is 1046px, and a scrollbar costs another 15px of viewport on top of that. Measured
   alternatives, for the record: the full label at the old 30px gap needs 1086, Steve's shorter
   "BC Tribute" needs 1052 at 30px and 1012 at 22px. There is no arrangement of six items that
   goes back to the old 900px breakpoint, so the choice was which compromise to take, and a
   4px tighter gap costs less than an abbreviation a stranger cannot read. */
@media (max-width: 1070px) {
  .navtoggle { display: grid; place-items: center; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 20px; display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: 14px; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .hdr__cta .btn { display: none; }

  /* The header CTA is hidden on mobile to keep the bar uncluttered, which left the
     primary action of the whole site unreachable once the menu opened. Same
     destination, inside the panel, still looking like the button it replaces. */
  .nav .nav__book {
    display: block; margin-top: 14px; border-bottom: 0;
    background: var(--blue-deep); color: #fff;
    text-align: center; border-radius: 999px;
    font-family: var(--font-head); font-weight: 700;
  }
  .nav .nav__book:hover { background: var(--navy-3); }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--navy);
  color: rgba(255,255,255,.72);
  overflow: hidden;
  padding-block: clamp(80px, 11vw, 150px);
}
/* Brand wash and grain sit ABOVE the video and below the copy. Without the explicit z-index
   they paint in tree order and the video covers them. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 10%, rgba(16,136,248,.30) 0%, transparent 62%),
    radial-gradient(720px 500px at 6% 94%, rgba(20,65,143,.55) 0%, transparent 62%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.hero > .wrap { position: relative; z-index: 2; }

/* Single column on purpose. The footage IS the right-hand half of this hero: a second column
   here put an element over the stage lighting, which is the most useful part of the frame.
   The copy is width-limited instead, so Steve stays visible beside it rather than behind it. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 62ch); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--blue-light); }
.hero__sub { font-family: var(--font-head); font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 600; color: #fff; margin-bottom: 16px; letter-spacing: -.02em; }
.hero__body { font-size: 1.08rem; color: rgba(255,255,255,.68); max-width: 46ch; margin-bottom: 34px; }
/* The two hero CTAs are a pair and read as a pair, so they stay on one line
   rather than wrapping into a stack. They only break apart on a phone, where
   there is genuinely no room to sit them beside each other. */
.hero .btn-row { margin-bottom: 30px; flex-wrap: nowrap; }
/* Slightly tighter than a standard btn--lg so the pair has room to spare in the
   measure, rather than fitting to the pixel and breaking on a fallback font. */
.hero .btn-row .btn { white-space: nowrap; padding-inline: 26px; }
@media (max-width: 620px) {
  .hero .btn-row { flex-wrap: wrap; }
  .hero .btn-row .btn { flex: 1 1 100%; }
}

.hero__tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 8px; border-radius: 100px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.88);
  margin-bottom: 26px;
}
.hero__tag i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--blue-deep);
  display: grid; place-items: center; font-style: normal;
}
.hero__tag i svg { width: 12px; height: 12px; }

/* The empty "portrait frame" placeholder that used to live here has been REMOVED. It was built
   to stand in until Steve's imagery landed, his imagery has landed, and by then nothing on any
   page referenced .shot or .shot__ph. Left in place it was not merely dead, it was a trap: it
   claimed a short, ordinary class name and attached a 4/4.6 aspect-ratio box, a navy gradient,
   a 48px grid overlay and `display: none` below 960px to anything that took the name. Something
   did, on 2026-08-21, and the result was two photographs boxed at the wrong shape with a grid
   drawn over them on desktop and nothing at all on a phone. Deleted rather than commented out;
   git has it if it is ever wanted back. */

/* ---------- dual path ---------- */
/* Scott's call 2026-08-21: EQUAL weighting, straight port of the PHP pattern, rather than the
   weighted version proposed in the spec. Both cards therefore share one class and one size;
   the lead is carried by the hero copy instead. Re-raise with Steve at review. */
.path {
  position: relative; overflow: hidden;
  padding: clamp(30px, 4vw, 46px);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,.76);
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.path h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 12px; }
.path p { margin-bottom: 22px; }
.path .link-arrow { margin-top: auto; }
.path--coach { background: linear-gradient(155deg, var(--navy-3) 0%, var(--navy) 100%); }
.path--advisory { background: linear-gradient(155deg, var(--blue-deep) 0%, var(--navy-2) 100%); }
.path::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none;
}

/* ---------- cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--blue-deep); }

/* A tile that says "have a look at X" must BE the link to X. Making only the little arrow
   clickable leaves a card-sized target that looks interactive and is not, and it forces a
   precise click on a short line of text. The whole card is the anchor; the arrow inside
   becomes a span, because anchors cannot nest. */
a.card--link { display: block; cursor: pointer; }
a.card--link .link-arrow { color: var(--blue-deep); }
a.card--link:hover .link-arrow svg { transform: translateX(4px); }
a.card--link:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
.card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.card p { font-size: .97rem; }
.card__ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  background: rgba(13,111,204,.10); color: var(--blue-deep);
  display: grid; place-items: center;
}
.card__ico svg { width: 22px; height: 22px; }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(20px,3vw,40px); }
.stat b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); color: #fff; letter-spacing: -.03em; line-height: 1;
  margin-bottom: 8px;
}
.stat span { font-size: .92rem; color: rgba(255,255,255,.66); }

/* ---------- quote ---------- */
.quote {
  border-left: 3px solid var(--blue); padding-left: clamp(20px, 3vw, 32px);
}
.quote p { font-family: var(--font-head); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 500; color: var(--ink); line-height: 1.4; letter-spacing: -.02em; margin-bottom: 16px; }
.quote cite { font-style: normal; font-size: .9rem; color: var(--grey-2); }

/* ---------- steps ---------- */
.step { position: relative; padding-left: 62px; }
.step__n {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--blue-light);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--font-head); font-size: .88rem; font-weight: 600; color: var(--ink); }

/* WCAG 1.4.11 Non-text Contrast requires 3:1 for the boundary of a user interface
   component. `--line` (#E1E7EF) measures ~1.2:1 against white, so fields built on it
   were effectively invisible and failing. `--field-line` (#8492A6) measures 3.14:1.
   The faint fill is a second, redundant cue so a field still reads as a field even
   before anyone looks for its edge. */
.field input, .field textarea, .field select {
  padding: 13px 15px;
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  font-size: 1rem; min-height: 48px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--grey); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: #fff;
  border-color: var(--blue-deep); box-shadow: 0 0 0 3px rgba(36,100,143,.22);
}
/* Disabled fields still have to be legible: this form ships disabled on purpose and a
   reader must be able to see what it would ask for. */
.field input:disabled, .field textarea:disabled, .field select:disabled {
  background: var(--surface-2); border-color: var(--field-line);
  color: var(--grey); cursor: not-allowed;
}
.field textarea { min-height: 130px; resize: vertical; }
.field__hint { font-size: .82rem; color: var(--grey); }
.field--required label::after { content: ' *'; color: var(--blue-deep); }

.consent {
  display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; margin-bottom: 22px;
  padding: 14px 16px; border: 1.5px solid var(--field-line); border-radius: var(--r-sm);
  background: var(--field-bg); color: var(--ink-2);
}
/* 20px measured under the 24px WCAG 2.5.8 minimum, and a consent checkbox is the one
   control nobody should have to aim at twice. */
.consent input { width: 24px; height: 24px; margin-top: 0; flex-shrink: 0; accent-color: var(--blue-deep); }

/* Shown only when someone actually submits a form that has nowhere to go. Amber rather
   than red: nothing is broken and nobody did anything wrong, but they must not walk away
   believing the message was sent. */
.form-notice {
  margin-top: 16px; padding: 14px 16px;
  background: var(--amber-bg); border: 1.5px solid rgba(154,107,0,.5);
  border-radius: var(--r-sm); color: #6B4B00; font-size: .92rem; line-height: 1.6;
}
.form-notice a { color: #6B4B00; text-decoration: underline; font-weight: 600; }
.form-notice:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }

/* ---------- branching intake form ---------- */
/* Two fields on one row where they naturally pair (first/last, date/length). */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* Browser fieldset chrome is inconsistent and ugly; reset it and build the grouping
   with our own rule, keeping the semantics that a screen reader relies on. */
.branch { border: 0; padding: 0; margin: 0; min-width: 0; }
.branch > legend {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue-deep);
  padding: 0; margin-bottom: 16px;
}
.branch[hidden] { display: none; }

/* The chooser that drives the branch. Given more weight than the fields it controls,
   because everything below it depends on this answer. */
.chooser { margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1.5px solid var(--line-2); }
.chooser select { font-family: var(--font-head); font-weight: 600; }

.form-sep { border: 0; border-top: 1.5px solid var(--line-2); margin-block: 26px; }

/* ---------- helper text ---------- */
.form-intro { font-size: .95rem; color: var(--grey); margin-bottom: 22px; }

/* A form needs a visible edge of its own on a white page, or it reads as loose text. */
.formcard {
  border: 1.5px solid var(--field-line); border-radius: var(--r);
  padding: clamp(22px, 3.5vw, 38px); background: #fff; box-shadow: var(--shadow-1);
}

/* ---------- cta band ---------- */
.cta-band { background: var(--navy); color: rgba(255,255,255,.74); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { max-width: 54ch; margin: 0 auto 30px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- legal / prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.4rem; margin-block: 34px 12px; }
.prose h3 { font-size: 1.1rem; margin-block: 24px 8px; }
.prose p, .prose li { margin-bottom: 12px; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 16px; }
.prose a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.ftr { background: var(--navy); color: rgba(255,255,255,.6); padding-block: clamp(48px, 6vw, 72px) 28px; }
.ftr a { color: rgba(255,255,255,.72); }
.ftr a:hover { color: #fff; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-bottom: 40px; }
@media (max-width: 760px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); margin-bottom: 14px; }
/* Footer links measured 21px tall, under the 24px minimum in WCAG 2.5.8 Target Size.
   They are inline by default, so the box was exactly the text height. Made inline-block
   with vertical padding, and the gap reduced so the column does not grow. */
.ftr ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .93rem; }
.ftr ul a { display: inline-block; padding-block: 5px; }
.ftr__brand .brand__txt b { color: #fff; }
.ftr__brand .brand__txt span { color: rgba(255,255,255,.5); }
.ftr__brand p { font-size: .93rem; max-width: 38ch; margin-top: 16px; }
/* The memorial link measured 22px tall, just under the 24px target minimum. It is the
   quietest link on the site and should still be easy to hit. */
.ftr__base a { display: inline-block; padding-block: 4px; }
.ftr__base {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  align-items: center;
  /* .45 measured 4.41:1 against a 4.5:1 requirement on the navy footer. */
  font-size: .85rem; color: rgba(255,255,255,.6);
}

/* ---------- note / disclosure ---------- */
.note {
  background: var(--amber-bg); border: 1px solid rgba(154,107,0,.25); border-left: 3px solid var(--amber);
  border-radius: var(--r-sm); padding: 16px 20px; font-size: .9rem; color: #6B4B00;
}

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .09s; }
.rv-d2 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html:focus-within { scroll-behavior: auto; }
}

/* ==========================================================================
   hero background video
   Standard: ~/Vault/Playbooks/website-hero-video.md
   Scrim opacities below are placeholders taken from the PHP build. They were measured
   against PHP's footage, NOT Steve's. ⚠️ They MUST be re-measured against the real
   speaking video before launch — contrast is a property of the footage, not of the CSS.
   ========================================================================== */

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;   /* re-aim once the real footage is in: a stage shot frames differently */
  display: block;
}

/* The scrim is a CSS layer on purpose, so legibility can be retuned without re-encoding.
   Heavier on the left because the copy sits left. */
.hero__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(0,32,96,.95) 0%,
      rgba(0,32,96,.88) 30%,
      rgba(0,32,96,.64) 58%,
      rgba(0,32,96,.48) 100%),
    linear-gradient(rgba(0,32,96,.42), rgba(0,32,96,.42));
}

/* Body copy lifts over video: 68% white was legible over the flat hero and is not over motion. */
.hero:has(.hero__media) .hero__body { color: rgba(255,255,255,.93); }

/* The poster paints on the CONTAINER too, not only on the <video>. Anything that stops the
   video (reduced motion, data saver, autoplay refusal) then reveals an image, not a black box. */
.hero__media { background: url('../video/hero-poster.jpg') center / cover no-repeat; }

@media (max-width: 767px) {
  /* main.js attaches a PORTRAIT rendition below this breakpoint; the container keeps the
     portrait poster so a stopped video reveals a still framed for a phone. */
  .hero__media { background-image: url('../video/hero-poster-portrait.jpg'); }
  /* On a phone the copy spans full width, including the light side of the directional scrim,
     so the flat layer carries more of the load. Re-measure against real footage. */
  .hero__media::after {
    background:
      linear-gradient(100deg,
        rgba(0,32,96,.95) 0%,
        rgba(0,32,96,.88) 30%,
        rgba(0,32,96,.64) 58%,
        rgba(0,32,96,.48) 100%),
      linear-gradient(rgba(0,32,96,.66), rgba(0,32,96,.66));
  }
  .hero:has(.hero__media) .hero__body { color: #fff; }
}

/* WCAG 2.2.2 Pause, Stop, Hide is Level A. An autoplaying loop behind copy meets all three of
   its conditions, so this control is mandatory, keyboard-operable, and exposes its state.
   Hidden until JS actually starts a video — nothing to pause otherwise. */
.hero__videobtn {
  position: absolute; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px);
  z-index: 3; pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,32,96,.58); border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(6px); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hero__videobtn:hover { background: rgba(0,32,96,.8); border-color: rgba(255,255,255,.58); }
.hero__videobtn:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; }
.hero__videobtn[hidden] { display: none; }

/* Two bars for playing, one triangle for paused. aria-pressed carries the real state. */
.hero__videobtn-ico { width: 12px; height: 13px; border-left: 3.5px solid #fff; border-right: 3.5px solid #fff; }

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* ---------- page hero ----------
   Compact by design. Only the homepage gets a full-height hero; every other page
   should put the reader into real content inside one screen. */
.phero {
  position: relative; overflow: hidden;
  background: var(--navy); color: rgba(255,255,255,.74);
  padding-block: clamp(56px, 8vw, 104px);
}
.phero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 460px at 80% 8%, rgba(16,136,248,.26) 0%, transparent 64%),
    radial-gradient(640px 440px at 4% 96%, rgba(20,65,143,.5) 0%, transparent 62%);
}
.phero > .wrap { position: relative; z-index: 1; }
.phero h1 { color: #fff; margin-bottom: 16px; }
.phero h1 em { font-style: normal; color: var(--blue-light); }
.phero__lede { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: rgba(255,255,255,.8); max-width: 56ch; }
.phero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; } }
.phero__shot img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }

/* ---------- full-bleed image band ---------- */
.band { position: relative; overflow: hidden; background: var(--navy); }
.band img { width: 100%; display: block; object-fit: cover; }
.band--short img { max-height: 260px; }
.band--tall img { max-height: 420px; }
/* Bands are photographic wallpaper, not content. The tint keeps them from competing
   with the sections either side. */
.band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,32,96,.5), rgba(0,32,96,.24) 40%, rgba(0,32,96,.62));
}
.band__cap {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: clamp(16px,3vw,28px) var(--gut);
  font-family: var(--font-head); font-weight: 600; color: #fff;
  font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: -.02em; text-align: center;
  text-shadow: 0 2px 24px rgba(0,0,0,.7);
}

/* ---------- split: image beside text ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--narrow { grid-template-columns: 1fr .8fr; }
@media (max-width: 860px) { .split, .split--narrow { grid-template-columns: 1fr; } }
.split img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2); }

/* ---------- the book ---------- */
.book { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.book__cover {
  width: 100%; max-width: 260px; border-radius: 4px; display: block;
  box-shadow: 0 30px 60px -22px rgba(0,32,96,.55), 0 0 0 1px rgba(0,32,96,.08);
}
.book__buy { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* An inline link inside running text inherits the line box, and at this size that was 43x21
   against WCAG 2.5.8's 24px minimum. Padding it out to 24px would push the lines apart, so it
   grows through its own line box instead: the hit area reaches 24px while the text stays put. */
.consent a {
  display: inline-block;
  position: relative;
  padding-block: 2px;   /* 21 -> 25px, measured, without moving the baseline */
}

/* ---------- a photograph carrying a section ----------
   For images that are the point of a section rather than decoration beside it, so they get the
   full content width and a caption of their own. */
.photo-full { margin: 0; }
.photo-full img {
  width: 100%; display: block;
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.photo-full figcaption {
  margin-top: 12px; font-size: .88rem; color: var(--grey-2); text-align: center;
}

/* ---------- inline link in running text ----------
   The base rule strips colour and underline from every anchor, which is right for nav items
   and whole-card links and wrong for a link inside a sentence: without this it is invisible.
   Underlined rather than coloured alone, so it does not depend on colour to be seen. */
.lnk {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.lnk:hover { text-decoration-thickness: 2px; }
/* On a dark panel the deep blue sinks into the navy, so the link takes the surrounding light
   colour instead and is identified purely by the underline. */
.phero .lnk, .section--dark .lnk, .cta-band .lnk, .hero .lnk { color: #fff; }

/* ---------- click-to-load video ----------
   A poster and a play button that become the real player on click. The whole cover is the
   target, so there is no tap-target question, and the aspect ratio is fixed by the box, so
   swapping the image in for an iframe does not move the page under the reader. */
.reel {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-3); background: #000;
}
.reel > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel__cover { display: block; cursor: pointer; }
.reel__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Darkens toward the middle so a white play button holds against any frame behind it. */
.reel__cover::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,16,47,.42) 0%, rgba(0,16,47,.16) 45%, rgba(0,16,47,0) 70%);
}
.reel__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(62px, 9vw, 84px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; z-index: 1;
  background: rgba(255,255,255,.94); color: var(--navy);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.6);
  transition: transform .22s var(--ease), background .22s var(--ease);
}
.reel__play svg { width: 42%; height: 42%; margin-left: 8%; }
.reel__cover:hover .reel__play { transform: translate(-50%, -50%) scale(1.07); background: #fff; }
.reel__cover:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .reel__play, .reel__cover:hover .reel__play { transition: none; transform: translate(-50%, -50%); }
}

/* ---------- cropped photograph ----------
   For a photograph that needs to be framed tighter than the file it came from. The crop
   lives here rather than in a re-cut file so the original stays whole and the framing is
   three custom properties to adjust: --crop-x / --crop-y name the point that stays put, and
   --crop-zoom says how far in to push. Zoom origin and object-position share the same point,
   so the subject does not drift as the zoom changes. */
.photo-crop {
  overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  aspect-ratio: var(--crop-ratio, 3 / 2);
}
.photo-crop img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(var(--crop-zoom, 1));
  transform-origin: var(--crop-x, 50%) var(--crop-y, 50%);
}

/* ---------- tools ---------- */
.tools { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .tools { grid-template-columns: 1fr 1fr; gap: 10px 24px; } }
.tools li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: .98rem; color: var(--ink-2);
}
.tools li::before {
  content: ''; flex-shrink: 0; margin-top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-deep);
}
/* Each tool is a link into the workbook. The whole row is the target rather than the words
   alone, so the tap area is the full width of the column instead of a phrase. */
.tools li a {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  color: var(--ink-2); font-weight: 600;
}
.tools li a:hover { color: var(--blue-deep); }
.tools li a::after {
  /* Which page of the one document it opens at. The reader is not being sent to ten files. */
  content: 'p' attr(data-page);
  flex-shrink: 0; font-size: .8rem; font-weight: 600; color: var(--grey-2);
  font-variant-numeric: tabular-nums;
}
.tools li a:hover::after { color: var(--blue-deep); }

/* ---------- topic list ---------- */
.topics { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.topics li { padding: clamp(18px,2.4vw,24px) 0; border-bottom: 1px solid var(--line); }
.topics h3 { font-size: clamp(1.1rem,1.8vw,1.3rem); margin-bottom: 7px; }
.topics p { font-size: .97rem; }

/* ---------- placeholder marker (internal, never ships to the client's live site) ---------- */
.todo {
  background: var(--amber-bg); border: 1px dashed rgba(154,107,0,.45);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-sm); padding: 15px 18px; font-size: .89rem; color: #6B4B00;
  line-height: 1.6; margin-block: 18px;
}
.todo b { color: #4A3400; }
.section--dark .todo { background: rgba(255,248,229,.1); border-color: rgba(255,220,140,.45); color: #FFE9B8; }
.section--dark .todo b { color: #fff; }
.hero__videobtn[aria-pressed="true"] .hero__videobtn-ico {
  width: 0; height: 0; border: none;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 12px solid #fff; margin-left: 3px;
}

/* ---- enquiry form: honeypot + status ------------------------------------------------
   The honeypot must be invisible to people but still a real, focusable input in the DOM,
   because bots skip type="hidden" and increasingly skip display:none too. Moved off screen
   instead, and taken out of the tab order in the markup. aria-hidden keeps it away from
   screen readers, so nobody using one is asked to fill in a trap field. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.45;
}
.form-status[data-state="error"] {
  background: #fdecec;
  border: 1px solid #d69a9a;
  color: #6d1b1b;
}
.form-status[data-state="sent"] {
  background: #e8f5ec;
  border: 1px solid #96c9a8;
  color: #12492a;
}
.form-status[data-state="sending"] {
  background: #eef2f7;
  border: 1px solid #c3cede;
  color: #2f3b4a;
}
.form-status ul { margin: 6px 0 0; padding-left: 18px; }