/* ==========================================================================
   64MOVES — DESIGN SYSTEM
   "The Notation Grid"

   The academy publishes its method, its fees and its coaches' FIDE IDs. The
   design does the same thing: hairlines instead of shadows, real numbers set
   large, nothing hidden behind decoration. Structure comes from the board —
   squares, ranks, files — and warmth comes from the paper it is printed on.

   Rules this file keeps:
     · Light only. Deep green appears twice per page at most.
     · Amber is a mark, never a fill. It underlines, it never shouts.
     · Boxes are earned. Most groupings are made with a rule, not a card.
     · Two typefaces. DM Serif Display speaks, Manrope explains.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* -- Colour ------------------------------------------------------------ */
  --paper:       #F7F8F5;   /* the page                                     */
  --white:       #FFFFFF;   /* lifted surfaces                              */
  --sage:        #EEF2EC;   /* the one soft section tint                    */
  --cream:       #F2EBDD;   /* highlight — pull quotes, callouts            */
  --ink:         #17231F;   /* body copy, headlines                         */
  --stone:       #59645F;   /* secondary copy, labels                       */
  --board:       #245C4A;   /* brand green                                  */
  --board-deep:  #174638;   /* dark ground                                  */
  --amber:       #D89B55;   /* accent — marks and rules only                */
  --amber-ink:   #8A5825;   /* amber dark enough to read: 5.1:1 on cream    */
  --line:        #DDE3DD;   /* hairline                                     */
  --line-soft:   #E8ECE7;   /* hairline, quieter                            */

  /* Reversed-out equivalents, for the two dark grounds */
  --on-dark:     #F4F6F2;
  --on-dark-dim: rgba(244, 246, 242, .68);
  --on-dark-line:rgba(244, 246, 242, .18);
  --mint:        #93C4AF;

  /* Legacy aliases — inline styles in the page markup still name these */
  --paper-deep:  var(--sage);
  --board-lift:  #2E7259;
  --eval:        var(--board);
  --flag:        var(--amber-ink);

  /* -- Type -------------------------------------------------------------- */
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    var(--font-body);

  --fs-display: clamp(2.5rem, 1.85rem + 2.9vw, 4.25rem);      /* 40 → 68 */
  --fs-h1:      clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);      /* 36 → 60 */
  --fs-h2:      clamp(1.75rem, 1.36rem + 1.75vw, 2.75rem);    /* 28 → 44 */
  --fs-h3:      clamp(1.1875rem, 1.09rem + 0.42vw, 1.5rem);   /* 19 → 24 */
  --fs-h4:      clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-body:    clamp(1rem, 0.965rem + 0.16vw, 1.0625rem);    /* 16 → 17 */
  --fs-lede:    clamp(1.125rem, 1rem + 0.55vw, 1.375rem);     /* 18 → 22 */
  --fs-small:   0.9375rem;
  --fs-label:   0.6875rem;                                     /* 11      */

  /* -- Space (4px base) --------------------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px; --s11: 160px;

  --pad-section: 72px;
  --pad-tight:   48px;
  --pad-deep:    88px;
  --gutter:      20px;

  /* -- Form ------------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;
  --shell:   1280px;
  --measure: 66ch;

  --shadow-sm:   0 1px 2px rgba(23, 35, 31, .04);
  --shadow-lift: 0 16px 34px -18px rgba(23, 35, 31, .22);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: .18s var(--ease);
  --mid:  .28s var(--ease);
}

@media (min-width: 700px) {
  :root { --gutter: 32px; --pad-section: 104px; --pad-tight: 64px; --pad-deep: 132px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 44px; --pad-section: 112px; --pad-tight: 72px; --pad-deep: 148px; }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

::selection { background: var(--board); color: var(--on-dark); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--board);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip {
  position: fixed; left: 0; top: -100px; z-index: 200;
  background: var(--board-deep); color: var(--on-dark);
  padding: 14px 22px;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  transition: top var(--fast);
}
.skip:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.028em; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.024em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.012em; }

h4, .h4 {
  font-family: var(--font-body); font-size: var(--fs-h4);
  font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}

p { max-width: var(--measure); }
p + p { margin-top: .9em; }

em { font-style: italic; }
b, strong { font-weight: 700; }

.lede {
  font-size: var(--fs-lede); line-height: 1.5; font-weight: 400;
  color: var(--ink); letter-spacing: -0.012em; max-width: 56ch;
}
.small  { font-size: var(--fs-small); line-height: 1.62; }
.muted  { color: var(--stone); font-size: var(--fs-small); line-height: 1.62; }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }

/* Figures — every number on this site is tabular so columns line up. */
.mono, .num, .n, .price, .age, .rating {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The kicker. A square, then a tracked label. Repeated on every section.
   max-width lets the label wrap on a 320px screen instead of widening its
   grid column and pushing the whole page sideways. */
.eyebrow {
  display: inline-flex; align-items: flex-start; gap: 10px;
  max-width: 100%;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.5;
  color: var(--stone);
  margin-bottom: var(--s5);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: none;
  margin-top: .38em;
  background: var(--amber);
}
.eyebrow--board::before { background: var(--board); }
.eyebrow--paper { color: var(--on-dark-dim); }
.eyebrow--paper::before { background: var(--amber); }

/* Long-form prose */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-top: 2em; }
.prose h3 { margin-top: 1.9em; }
.prose h2 + p, .prose h3 + p { margin-top: .7em; }
.prose a:not(.btn):not(.textlink) {
  text-decoration: underline; text-decoration-color: var(--amber);
  text-decoration-thickness: 1.5px;
}
.prose a:not(.btn):not(.textlink):hover { color: var(--board); }

.bullets { display: grid; gap: var(--s4); max-width: var(--measure); }
.bullets li { position: relative; padding-left: 26px; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--amber);
}
.numbered { display: grid; gap: var(--s4); counter-reset: n; max-width: var(--measure); }
.numbered li { position: relative; padding-left: 38px; counter-increment: n; }
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em;
  color: var(--amber-ink);
}

/* A running index — "01", "02" — set as a label, not as body copy. */
.num {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em;
  color: var(--amber-ink); font-variant-numeric: tabular-nums;
}
/* The description that follows a bold label. Always its own line. */
.d {
  display: block; margin-top: 3px;
  color: var(--stone); font-size: var(--fs-small); line-height: 1.55;
  font-weight: 400;
}

.mark { background: var(--cream); padding: 0 .25em; }
.tag {
  display: inline-block; margin-right: 12px;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
  font-variant-numeric: tabular-nums;
}

/* Values the client still has to supply. Deliberately visible. */
.confirm {
  display: inline; background: var(--cream);
  box-shadow: inset 0 -1px 0 var(--amber);
  color: var(--amber-ink);
  font-size: .9em; font-weight: 600;
  padding: 1px 6px;
}

.textlink {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-weight: 600; font-size: var(--fs-small); color: var(--board);
  transition: gap var(--fast), color var(--fast);
}
.textlink:hover { gap: 12px; color: var(--board-deep); }

/* Vertical spacing utilities used throughout the markup */
.mt2 { margin-top: var(--s4); }
.mt3 { margin-top: var(--s5); }
.mt4 { margin-top: var(--s6); }
.mt5 { margin-top: var(--s7); }
.mt6 { margin-top: var(--s8); }
.mt7 { margin-top: var(--s9); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--pad-section); position: relative; }
.section--tight { padding-block: var(--pad-tight); }
.section--deep  { padding-block: var(--pad-deep); }

/* The one tinted ground. Edge-to-edge, with hairlines top and bottom. */
.section--board {
  background: var(--sage);
  border-block: 1px solid var(--line);
}

.section-head { max-width: 62ch; margin-bottom: var(--s8); }
.section-head h2 { max-width: 20ch; }
.section-head > p { margin-top: var(--s5); color: var(--stone); font-size: var(--fs-lede); line-height: 1.5; }

.grid { display: grid; gap: var(--s6); }
/* Grid children default to min-width:auto, so one wide child drags the whole
   track past the viewport. Every grid on this site opts out of that. */
.grid > *, .hero__grid > *, .board-wrap > *, .founder > *,
.compare > *, .faq-layout > *, .footer__grid > * { min-width: 0; }
@media (min-width: 620px)  { .g2, .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .g3 { grid-template-columns: repeat(3, 1fr); }
                             .g4 { grid-template-columns: repeat(4, 1fr); }
                             .grid { gap: var(--s7); } }

/* Asymmetric two-column. Text leads, visual follows. */
.hero__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--s9); align-items: start; }
  .hero__grid--wide { grid-template-columns: 1.15fr .85fr; }
}
@media (min-width: 1180px) {
  .hero__grid { grid-template-columns: 1.06fr .94fr; }
}
/* Several pages carry no hero visual. One column of text in a two-column grid
   reads as a mistake rather than as air, so those heroes get a single wide
   measure instead of a stranded half. */
@media (min-width: 900px) {
  .hero__grid:not(:has(> * + *)) { grid-template-columns: minmax(0, 780px); }
}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247, 248, 245, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast), background var(--fast);
}
.header.is-stuck {
  background: rgba(255, 255, 255, .9);
  border-bottom-color: var(--line);
}

.header__inner {
  position: relative;
  max-width: var(--shell); margin-inline: auto;
  padding: 0 var(--gutter);
  height: 66px;
  display: flex; align-items: center; gap: var(--s5);
}
@media (min-width: 1100px) { .header__inner { height: 74px; } }

/* Logo. The header carries the supplied artwork; the footer keeps the drawn
   mark, because the artwork is dark brown and gold and would disappear on the
   footer's dark green ground. */
.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
/* The artwork is tightly cropped (0% transparent margin on all four sides) and
   stacks three tiers of type, so it is set as tall as the header allows. */
.logo__img {
  display: block; width: auto; max-width: none;
  height: 36px;
}
@media (min-width: 1100px) { .logo__img { height: 46px; } }
.logo__mark {
  width: 22px; height: 22px; flex: none;
  background:
    linear-gradient(45deg, transparent 49.5%, var(--amber) 49.5% 50.5%, transparent 50.5%),
    conic-gradient(var(--board) 0 25%, var(--sage) 0 50%, var(--board) 0 75%, var(--sage) 0);
  background-size: 100% 100%, 100% 100%;
  border-radius: 2px;
}
.logo__text {
  font-family: var(--font-display); font-size: 1.3rem;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.logo__text b { font-weight: 400; color: var(--board); }

/* Nav */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.nav__link:hover { background: var(--sage); color: var(--board-deep); }
.nav__link svg { width: 9px; height: 6px; opacity: .5; transition: transform var(--fast); }
.nav__item:hover .nav__link svg,
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Mega panels — a sheet of paper, not a glass slab. */
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  padding: var(--s6);
  display: grid; gap: var(--s7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}
.mega--1 { width: 340px; }
.mega--3 { width: min(860px, calc(100vw - 60px)); grid-template-columns: repeat(3, 1fr); }
/* The three-column panel is wider than the nav item it hangs from, so at
   1024px it would centre itself off the left edge. Anchor that one to the
   header instead, which is always wide enough to hold it. */
.nav__item:has(> .mega--3) { position: static; }
.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega__col > h4 {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone);
  padding-bottom: var(--s3); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.mega__link {
  display: block; padding: 9px 10px; margin-inline: -10px;
  border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 600; color: var(--ink); line-height: 1.35;
  transition: background var(--fast), color var(--fast);
}
.mega__link span {
  display: block; margin-top: 3px;
  font-size: .8125rem; font-weight: 400; color: var(--stone); line-height: 1.45;
}
.mega__link:hover { background: var(--sage); color: var(--board-deep); }

.header__cta { display: none; margin-left: var(--s4); }
@media (min-width: 1024px) { .header__cta { display: flex; align-items: center; gap: var(--s3); } }
@media (min-width: 1024px) { .nav + .header__cta { margin-left: var(--s5); } }

.iconbtn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--board);
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.iconbtn svg { width: 17px; height: 17px; fill: currentColor; }
.iconbtn:hover { background: var(--board); border-color: var(--board); color: var(--white); }

.burger {
  margin-left: auto; width: 42px; height: 42px;
  display: grid; place-content: center; gap: 5px;
  cursor: pointer; border-radius: var(--r-sm);
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform var(--fast), opacity var(--fast);
}
body.drawer-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.drawer-open .burger span:nth-child(2) { opacity: 0; }
body.drawer-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed; inset: 66px 0 0; z-index: 80;
  background: var(--paper);
  padding: var(--s5) var(--gutter) var(--s9);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--mid), transform var(--mid), visibility var(--mid);
}
body.drawer-open { overflow: hidden; }
body.drawer-open .drawer { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1024px) { .drawer { display: none; } }

.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary {
  list-style: none; cursor: pointer;
  padding: var(--s5) 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after {
  content: ""; width: 11px; height: 11px; flex: none;
  border-right: 1.5px solid var(--stone); border-bottom: 1.5px solid var(--stone);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--fast);
}
.drawer details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.drawer__sub { padding-bottom: var(--s5); display: grid; gap: 2px; }
.drawer__sub h5 {
  margin: var(--s4) 0 var(--s2);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone);
}
.drawer__sub h5:first-child { margin-top: 0; }
.drawer__sub a { padding: 10px 0; font-size: 1rem; font-weight: 500; color: var(--stone); }
.drawer__sub a:hover { color: var(--board); }
.drawer__flat {
  display: block; padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em;
}
.drawer__ctas { display: grid; gap: var(--s3); margin-top: var(--s7); }
.drawer__nap {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line); color: var(--stone);
}
.drawer__nap a { color: var(--board); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: .9375rem; font-weight: 700;
  letter-spacing: -0.005em; line-height: 1.2; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--fast), border-color var(--fast),
              color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--board); color: var(--white); }
.btn--primary:hover { background: var(--board-deep); box-shadow: var(--shadow-lift); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--white); }

.btn--paper { background: var(--white); color: var(--board-deep); }
.btn--paper:hover { background: var(--cream); }

.btn--outline-paper { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.btn--outline-paper:hover { border-color: var(--on-dark); background: rgba(244, 246, 242, .08); }

.btn--sm { padding: 10px 17px; font-size: .875rem; }
.btn--wide { width: 100%; }
.btn--wa { background: #1FA855; color: #fff; padding-inline: 18px; }
.btn--wa:hover { background: #17904a; }
.btn--wa svg { width: 18px; height: 18px; fill: currentColor; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* --------------------------------------------------------------------------
   8. BREADCRUMBS
   -------------------------------------------------------------------------- */
.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-block: var(--s4);
  font-size: .8125rem; color: var(--stone);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--stone); }
.crumbs a:hover { color: var(--board); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s8) var(--pad-section); position: relative; }
@media (min-width: 900px) { .hero { padding-block: var(--s9) var(--pad-section); } }

.hero h1 { max-width: 17ch; }
.hero__sub {
  margin-top: var(--s5);
  font-size: var(--fs-lede); line-height: 1.52; color: var(--stone);
  max-width: 46ch; letter-spacing: -0.012em;
}

/* Three facts under the fold. Rules, not pills. */
.trust {
  display: flex; flex-wrap: wrap; gap: 0 var(--s6);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.trust li {
  position: relative; padding: 6px 0 6px 18px;
  font-size: var(--fs-small); font-weight: 500; color: var(--stone);
}
.trust li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 6px; height: 6px; background: var(--board);
}

/* --------------------------------------------------------------------------
   10. THE LEDGER — numbered editorial rows, used instead of a card grid
   -------------------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--ink); }
.ledger__row {
  display: grid; gap: var(--s4);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--line);
  transition: background var(--mid);
}
@media (min-width: 860px) {
  .ledger__row {
    grid-template-columns: 84px minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: var(--s7); align-items: start;
  }
}
.ledger__row:hover { background: linear-gradient(90deg, rgba(238,242,236,.7), transparent 70%); }
.ledger__n {
  font-family: var(--font-display); font-size: 2.25rem; line-height: 1;
  color: var(--line); transition: color var(--mid);
}
.ledger__row:hover .ledger__n { color: var(--amber); }
.ledger__row h3 { max-width: 15ch; text-wrap: balance; }
.ledger__body > p { color: var(--stone); }
.ledger__body .textlink { margin-top: var(--s4); }

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: var(--s6) 0 var(--s6);
  border-top: 1px solid var(--ink);
  transition: border-color var(--mid);
}
.card::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
  background: var(--amber); transition: width var(--mid);
}
.card:hover::after { width: 44px; }
.card h3 { margin-bottom: var(--s3); max-width: 18ch; }
.card p { color: var(--stone); }
.card__num {
  display: block; margin-bottom: var(--s5);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--stone);
}
.card__foot { margin-top: var(--s5); }

/* A card that really is a surface — used for forms and enclosed content. */
.formcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s6);
}
@media (min-width: 700px) { .formcard { padding: var(--s7); } }
.formcard > .eyebrow { margin-bottom: var(--s4); }
.formcard address, .formcard p { color: var(--stone); }
.formcard strong { color: var(--ink); }

/* Programme cards — the one place a price needs to sit large. */
.prog {
  display: flex; flex-direction: column;
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform var(--mid), box-shadow var(--mid), border-color var(--mid);
}
.prog:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-soft); }
.prog__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding-bottom: var(--s4); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.prog__age {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone);
}
.prog__price {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--board);
  font-variant-numeric: tabular-nums;
}
.prog h3 { margin-bottom: var(--s3); }
.prog p { color: var(--stone); font-size: var(--fs-small); }
.prog__go { margin-top: auto; padding-top: var(--s5); }

/* Blog index — a contents page, not a card wall. Wide enough and it becomes
   three columns: when it ran, what it is called, what it says. */
.postcard {
  display: block; padding: var(--s6) 0;
  border-top: 1px solid var(--line);
  transition: padding-left var(--mid);
}
.postcard:hover { padding-left: var(--s4); }
.postcard h3 { margin-top: var(--s3); max-width: 26ch; transition: color var(--fast); }
.postcard:hover h3 { color: var(--board); }
.postmeta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stone);
}
.postcard p { margin-top: var(--s3); color: var(--stone); font-size: var(--fs-small); }

@media (min-width: 900px) {
  .related--list .postcard {
    display: grid;
    grid-template-columns: 150px minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--s7); align-items: baseline;
    padding-block: var(--s7);
  }
  .related--list .postcard .postmeta { flex-direction: column; gap: 5px; }
  .related--list .postcard h3 { grid-column: 2; margin-top: 0; max-width: 20ch; }
  .related--list .postcard p  { grid-column: 3; margin-top: 0; }
}

/* Comparison — columns held together by a shared top rule rather than boxes.
   No vertical dividers: a third column wrapping to a second row would leave
   a rule hanging in mid-air. */
.compare { display: grid; gap: var(--s6) var(--s7); }
@media (min-width: 780px)  { .compare { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .compare { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.compare__col { padding-top: var(--s6); border-top: 2px solid var(--ink); }
@media (min-width: 780px) { .compare__col { padding-top: var(--s7); } }
.compare__col h3 { margin-bottom: var(--s5); }
.compare__col ul { display: grid; gap: var(--s4); }
.compare__col li { position: relative; padding-left: 24px; color: var(--stone); font-size: var(--fs-small); }
.compare__col li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; background: var(--amber);
}

/* --------------------------------------------------------------------------
   12. EDITORIAL BLOCKS
   -------------------------------------------------------------------------- */

/* The promise — one sentence, given a whole screen of air. */
.promise {
  max-width: 880px; margin-inline: auto; text-align: center;
}
.promise p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.15rem + 2.7vw, 3.25rem);
  line-height: 1.14; letter-spacing: -0.022em;
  color: var(--ink); max-width: none;
}
.promise em {
  font-style: normal; position: relative; white-space: nowrap;
}
.promise em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em;
  height: 3px; background: var(--amber); opacity: .9;
}

.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.24; letter-spacing: -0.018em;
  color: var(--ink); max-width: 22ch;
  padding-left: var(--s5); border-left: 2px solid var(--amber);
}

/* Mid-page call to action — warm inset, no box shadow. */
.midcta {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: var(--s8) var(--s5);
  text-align: center;
}
@media (min-width: 700px) { .midcta { padding: var(--s9) var(--s7); } }
.midcta p {
  max-width: 34ch; margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.2; letter-spacing: -0.018em; color: var(--ink);
}
.midcta .btn-row { justify-content: center; }
/* The footnote is a footnote — it must not inherit the display treatment. */
.midcta p.muted {
  font-family: var(--font-body); font-size: var(--fs-small);
  line-height: 1.62; letter-spacing: 0; color: var(--amber-ink);
  max-width: 46ch;
}

/* The one deep-green moment per page. */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--board-deep); color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: var(--s8) var(--s5);
  text-align: center;
}
@media (min-width: 700px) { .cta-band { padding: var(--s10) var(--s8); } }
/* A quiet 8×8 board, drawn in the ground itself. */
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, rgba(244,246,242,.035) 25%, transparent 25% 75%, rgba(244,246,242,.035) 75%),
    linear-gradient(45deg, rgba(244,246,242,.035) 25%, transparent 25% 75%, rgba(244,246,242,.035) 75%);
  background-size: 112px 112px;
  background-position: 0 0, 56px 56px;
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--on-dark); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: var(--on-dark-dim); max-width: 52ch; margin-inline: auto; margin-top: var(--s5); }
.cta-band .btn-row { justify-content: center; margin-top: var(--s7); }
.cta-band__note {
  margin-top: var(--s6); font-size: var(--fs-small);
  color: var(--on-dark-dim);
}
.cta-band a:not(.btn) { color: var(--mint); }

.inlinecta {
  margin-block: var(--s7);
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.inlinecta p { margin: 0; }
.inlinecta .btn-row { margin-top: var(--s5); }

.byline {
  padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--stone);
}
.note {
  padding: var(--s5); background: var(--sage);
  border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--stone);
}
.foot { margin-top: var(--s6); font-size: var(--fs-small); color: var(--stone); }

/* --------------------------------------------------------------------------
   13. TABLES
   -------------------------------------------------------------------------- */
/* On a phone these tables scroll sideways, so they say so: a soft shadow
   appears at whichever edge still has content beyond it. The two `local`
   layers are opaque covers that scroll away and reveal the `scroll` shadows. */
.tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  --tw-bg: var(--paper);
  background:
    linear-gradient(to right,  var(--tw-bg) 40%, transparent) 0    0 / 44px 100% no-repeat local,
    linear-gradient(to left,   var(--tw-bg) 40%, transparent) 100% 0 / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(23,35,31,.13), transparent) 0    0 / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(23,35,31,.13), transparent) 100% 0 / 15px 100% no-repeat scroll;
}
.section--board .tablewrap, .seo-block .tablewrap { --tw-bg: var(--sage); }
.data { min-width: 520px; font-size: var(--fs-small); }
.data thead th {
  text-align: left; padding: 0 var(--s5) var(--s4) 0;
  border-bottom: 1px solid var(--ink);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone); white-space: nowrap;
}
.data th.n, .data td.n { text-align: right; }
/* Only the final column loses its right padding — zeroing it on every .n cell
   ran a right-aligned figure straight into the next column's text. */
.data th:last-child, .data td:last-child { padding-right: 0; }
.data tbody td {
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data tbody tr { transition: background var(--fast); }
.data tbody tr:hover { background: var(--sage); }
.data td strong { font-weight: 700; font-size: 1.0625rem; }
.data td small {
  display: block; margin-top: 3px;
  font-size: .8125rem; color: var(--stone); font-weight: 400;
}
.data td.n {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 600; color: var(--ink);
}
.data a { color: var(--board); text-decoration: underline; text-decoration-color: var(--line); }
.data a:hover { text-decoration-color: var(--amber); }

/* Node labels inside the performance-cycle SVG. These two classes appear
   nowhere else, and inside a 400-unit viewBox the sizes are user units, not
   page pixels — a page-scale value here renders as a giant numeral. */
.n-num {
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  letter-spacing: 0; fill: var(--ink);
}
.n-lab {
  font-family: var(--font-body); font-size: 8px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; fill: var(--stone);
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 800px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding: var(--s6) 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 600; letter-spacing: -0.012em; color: var(--ink);
  transition: color var(--fast);
}
.faq summary:hover { color: var(--board); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; position: relative; top: .45em;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--stone), var(--stone)) center/13px 1.5px no-repeat,
    linear-gradient(var(--stone), var(--stone)) center/1.5px 13px no-repeat;
  transition: transform var(--mid), background-size var(--mid);
}
/* Plus turns a quarter and loses its horizontal stroke: what is left is the
   vertical stroke, rotated flat — a minus. */
.faq details[open] summary::after {
  transform: rotate(90deg);
  background:
    linear-gradient(var(--board), var(--board)) center/0 1.5px no-repeat,
    linear-gradient(var(--board), var(--board)) center/1.5px 13px no-repeat;
}
.faq__a { padding: 0 0 var(--s6); max-width: 62ch; }
.faq__a p { color: var(--stone); }
.faq details[open] .faq__a { animation: faqIn .26s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   15. IMAGE SLOTS — labelled placeholders, deliberately not stock photos
   -------------------------------------------------------------------------- */
.slot {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s5);
  background: var(--sage);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.slot::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, rgba(36,92,74,.045) 25%, transparent 25% 75%, rgba(36,92,74,.045) 75%),
    linear-gradient(45deg, rgba(36,92,74,.045) 25%, transparent 25% 75%, rgba(36,92,74,.045) 75%);
  background-size: 64px 64px; background-position: 0 0, 32px 32px;
}
.slot > * { position: relative; }
.slot__id {
  position: absolute; top: var(--s5); left: var(--s5); max-width: 55%;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--board); line-height: 1.4;
}
.slot__ratio {
  position: absolute; top: var(--s5); right: var(--s5); max-width: 40%;
  text-align: right; line-height: 1.4;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em;
  color: var(--stone); font-variant-numeric: tabular-nums;
}
.slot__note {
  font-size: var(--fs-small); line-height: 1.5; color: var(--stone);
  max-width: 34ch;
}
.slot--real { border-style: dashed; border-color: var(--amber); }
.slot--real .slot__id { color: var(--amber-ink); }

.r-1x1  { aspect-ratio: 1/1; }
.r-4x5  { aspect-ratio: 4/5; }
.r-4x3  { aspect-ratio: 4/3; }
.r-3x2  { aspect-ratio: 3/2; }
.r-16x9 { aspect-ratio: 16/9; }

/* --------------------------------------------------------------------------
   16. BOARDS
   -------------------------------------------------------------------------- */
.board-wrap { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 900px) { .board-wrap { grid-template-columns: 1fr 1fr; gap: var(--s9); } }
@media (min-width: 1180px) { .board-wrap { grid-template-columns: 1.05fr .95fr; } }

.board-figure {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s5);
}
/* Crop marks — the print reference this whole system is built on. */
.board-figure::before,
.board-figure::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-color: var(--amber); border-style: solid;
}
.board-figure::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.board-figure::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.board-figure img { border-radius: var(--r-xs); }

.board-side > p { color: var(--stone); }
.board-side > p strong { color: var(--ink); }
.board-side > p + p { margin-top: var(--s5); }

/* --------------------------------------------------------------------------
   17. THE LOOP — Learn → Practise → Play → Analyse → Improve → Reapply
   -------------------------------------------------------------------------- */
.method {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
}
.chip {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--white);
  font-size: .875rem; font-weight: 600; color: var(--ink);
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.chip:hover { border-color: var(--board); color: var(--board); }
.method__arrow { color: var(--amber); font-size: 1rem; }

/* Numbered process steps. The number is in the markup, so it is styled here
   rather than generated — generating one too would print it twice. */
.steps { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .steps--4 { grid-template-columns: repeat(2, 1fr); }
                            .steps--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps--4 { grid-template-columns: repeat(4, 1fr); }
                             .steps--5 { grid-template-columns: repeat(5, 1fr); } }
.step { padding-top: var(--s5); border-top: 1px solid var(--ink); }
/* Bright amber is a 2.3:1 mark — fine for a rule, not for a figure that
   carries the step order. These use the readable amber. */
.step > .num {
  display: block; margin-bottom: var(--s4);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  letter-spacing: 0; color: var(--amber-ink);
}
.step h3, .step h4 {
  font-size: 1.0625rem; font-family: var(--font-body);
  font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--s3);
}
.step p { font-size: var(--fs-small); color: var(--stone); }

/* The circular performance cycle diagram (inline SVG) */
.cycle { width: 100%; max-width: 420px; margin-inline: auto; }
.cycle .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.cycle .node { fill: var(--white); stroke: var(--board); stroke-width: 1; }
.cycle text { font-family: var(--font-body); font-weight: 600; fill: var(--ink); }

/* Feature list — hairline rows. Items come in three shapes across the site:
   a numbered index, a bold label with a description, or plain text. */
.featlist { border-top: 1px solid var(--line); }
.featlist li {
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  display: flex; gap: var(--s4); align-items: baseline;
  font-size: var(--fs-small);
}
.featlist li::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--amber); position: relative; top: -2px;
}
/* A numbered row already has its marker. */
.featlist li:has(> .num)::before { display: none; }
.featlist li > .num { flex: none; }
.featlist strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   18. LINK INDEXES
   -------------------------------------------------------------------------- */
.related { display: grid; gap: 0; border-top: 1px solid var(--ink); }
@media (min-width: 800px) { .related { grid-template-columns: 1fr 1fr; column-gap: var(--s8); } }
.related--list { grid-template-columns: 1fr; }
.related > a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--ink);
  transition: padding-left var(--mid), color var(--fast);
}
.related > a:hover { padding-left: var(--s3); color: var(--board); }
.related .k {
  flex: none; font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stone);
}
/* The blog index reuses .related as a container for full post cards. */
.related > .postcard { display: block; }
.related > .postcard:hover { padding-left: var(--s4); }

.toc {
  padding: var(--s6); background: var(--sage);
  border-radius: var(--r); max-width: 520px;
}
.toc h2, .toc h3, .toc h4 {
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone);
  margin-bottom: var(--s5);
}
.toc ol, .toc ul { display: grid; gap: var(--s3); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 12px; font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  transition: color var(--fast);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--amber-ink); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: .1em; position: relative; top: 3px;
}
.toc a:hover { color: var(--board); }

/* --------------------------------------------------------------------------
   19. LONG-FORM SEO BLOCK
   -------------------------------------------------------------------------- */
.seo-block { background: var(--sage); border-block: 1px solid var(--line); }
.seo-block .inner { max-width: 720px; margin-inline: auto; }
.seo-block .inner > * + * { margin-top: 1.15em; }
.seo-block h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); max-width: 22ch; }
.seo-block h3 {
  margin-top: 2em; padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
}
.seo-block p { color: var(--stone); max-width: none; }
.seo-block strong { color: var(--ink); }
.seo-block .bullets { max-width: none; }
.seo-block .bullets li { color: var(--stone); }

/* --------------------------------------------------------------------------
   20. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s5); }
.field { display: grid; gap: 7px; }
.field > label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stone);
}
.req { color: var(--amber-ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 13px 14px;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  width: 100%;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--white);
  border-color: var(--board);
  box-shadow: 0 0 0 3px rgba(36, 92, 74, .12);
}
.field textarea { min-height: 120px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: #B4402A; }
.err { font-size: .8125rem; color: #B4402A; font-weight: 600; }
.checkline { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-small); color: var(--stone); }
.checkline input { margin-top: 4px; accent-color: var(--board); flex: none; }
.form__note { font-size: .8125rem; color: var(--stone); }
.success { border-color: var(--board); border-left-width: 2px; }
.success h3 { color: var(--board); }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--board-deep); color: var(--on-dark-dim);
  padding-block: var(--s9) var(--s6);
  font-size: var(--fs-small);
}
.footer__brand {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s5);
  padding-bottom: var(--s7); border-bottom: 1px solid var(--on-dark-line);
}
.footer .logo__text { color: var(--on-dark); }
.footer .logo__text b { color: var(--mint); }
.footer .logo__mark {
  background:
    linear-gradient(45deg, transparent 49.5%, var(--amber) 49.5% 50.5%, transparent 50.5%),
    conic-gradient(var(--mint) 0 25%, rgba(244,246,242,.14) 0 50%, var(--mint) 0 75%, rgba(244,246,242,.14) 0);
}
.footer__tag {
  font-family: var(--font-display); font-size: 1.125rem;
  color: var(--on-dark-dim); letter-spacing: -0.01em;
}

.footer__grid { display: grid; gap: var(--s7); padding-block: var(--s7); }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s6); } }
.footer h4 {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--s5);
}
.footer ul { display: grid; gap: var(--s3); }
.footer a { color: var(--on-dark-dim); transition: color var(--fast); }
.footer a:hover { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--amber); }
.footer address { line-height: 1.85; }
.footer address strong { color: var(--on-dark); }
.footer .confirm { background: rgba(216,155,85,.16); color: #E8B87C; box-shadow: inset 0 -1px 0 rgba(216,155,85,.5); }

.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  align-items: center; justify-content: space-between;
  padding-top: var(--s6); border-top: 1px solid var(--on-dark-line);
  font-size: .8125rem;
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--s5); }

/* --------------------------------------------------------------------------
   22. FIXED ELEMENTS
   -------------------------------------------------------------------------- */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #1FA855; color: #fff;
  box-shadow: 0 8px 22px -6px rgba(23, 35, 31, .3);
  transition: transform var(--fast), background var(--fast);
}
.wa svg { width: 25px; height: 25px; fill: currentColor; }
.wa:hover { transform: scale(1.06); background: #17904a; }
body.has-sticky .wa { bottom: 88px; }
@media (min-width: 800px) { body.has-sticky .wa { bottom: 18px; } }

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  display: flex; gap: var(--s3);
  padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.stickybar .btn { flex: 1; }
.stickybar .btn--wa { flex: none; }
@media (min-width: 800px) { .stickybar { display: none; } }
@media (max-width: 799px) { body.has-sticky { padding-bottom: 72px; } }

/* Exit intent */
.exit {
  position: fixed; inset: 0; z-index: 120;
  display: none; place-items: center; padding: var(--s5);
}
.exit[open] { display: grid; }
.exit__scrim { position: absolute; inset: 0; background: rgba(23, 35, 31, .45); }
.exit__panel {
  position: relative; width: min(560px, 100%);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s8) var(--s6);
  text-align: center;
  box-shadow: 0 30px 70px -30px rgba(23, 35, 31, .5);
  animation: exitIn .3s var(--ease);
}
@media (min-width: 600px) { .exit__panel { padding: var(--s9) var(--s8); } }
@keyframes exitIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.exit__panel .eyebrow { justify-content: center; }
.exit__panel p { margin-inline: auto; color: var(--stone); }
.exit__close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; line-height: 1; color: var(--stone); cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.exit__close:hover { background: var(--sage); color: var(--ink); }

/* --------------------------------------------------------------------------
   23. MOTION
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header, .drawer, .wa, .stickybar, .exit, .skip, .cta-band, .midcta { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
  .section { padding-block: 24px; }
}

/* ==========================================================================
   25. HOME — art-directed sections that exist only on the front page
   ========================================================================== */

/* -- 25.1 Hero ------------------------------------------------------------

   A crest, one statement, one photograph. The photograph is a cut-out on the
   page's own paper — no card, no frame, no backdrop.

   The whole banner has to land inside one screen, so the height comes from the
   VIEWPORT HEIGHT, never from its width: a vw-based height is taller than the
   screen the moment the window is wide and short, which is most desktops. The
   photograph is then sized as a percentage of that height, so it shrinks with
   the banner instead of pushing it open.

   Two transparent margins drive the horizontal placement, both measured off
   the source PNG: 6.18% at its left, 5.73% at its right.
   -------------------------------------------------------------------------- */
.hero--home {
  position: relative;
  overflow: hidden;             /* the art bleeds past the container on purpose */
  padding-block: var(--s7) 0;   /* the board sits on the section's bottom edge */
  --hero-gold: #A8702F;         /* the display gold — 3.9:1 on paper, AA at this size */
}

/* The crest sits centred over the statement, so the block that holds them
   both is only as wide as the longest line of type. */
.hero__lede { width: fit-content; max-width: 100%; }

.hero__crest {
  display: block;
  /* An explicit width, not a percentage: the file is 2172px wide, and a
     percentage would leave that as the block's max-content contribution and
     blow the fit-content wrapper out to the full column. */
  width: 250px;
  /* Boxed to the ornament's own content, not to the file: the PNG carries 24%
     empty above the crown and 30% below the rule, and cover crops both away
     rather than leaving them as dead space under the crest. */
  aspect-ratio: 1925 / 333;
  object-fit: cover;
  object-position: 50% 50.5%;
  height: auto;
  margin: 0 auto var(--s6);
}

.hero--home .hero__statement {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.375rem);   /* 32 → 54 */
  line-height: 1.16; letter-spacing: -0.021em;
  max-width: 17ch;   /* `.hero h1` also sets one; two classes to win */
}
.hero__say, .hero__then { display: block; }
.hero__say  { color: var(--ink); }
.hero__then { color: var(--hero-gold); }

/* The four-line break is art direction, so it is written into the markup and
   only switched on where there is room for it. */
.hero__brk { display: none; }

.hero__art { position: relative; z-index: 1; }
.hero__art img { display: block; height: auto; max-width: none; }

/* -- Mobile: crest, statement, then the boy running to both screen edges --- */
@media (max-width: 899px) {
  .hero__lede { width: auto; }
  .hero__crest { width: min(250px, 62%); margin-inline: 0; }
  .hero__art {
    margin-top: var(--s7);
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero__art img { width: 118%; margin-inline-start: -9%; }
}

/* -- Desktop: statement left, photograph anchored bottom-right ------------- */
@media (min-width: 900px) {
  .hero--home { padding-block: 0; }
  .hero--home .hero__inner {
    position: relative;
    display: flex; align-items: center;
    /* Header is 74px here, so the banner plus the header clears any screen
       from roughly 560px of viewport height upward. */
    min-height: clamp(480px, calc(100vh - 5rem), 760px);
    min-height: clamp(480px, calc(100svh - 5rem), 760px);
  }
  /* fit-content, not 53%: the crest is centred on this block, so the block has
     to hug the longest line of type rather than the whole column. */
  .hero__lede { position: relative; z-index: 2; width: fit-content; max-width: 53%; }
  .hero--home .hero__statement { max-width: none; text-wrap: normal; }
  .hero__brk { display: inline; }

  .hero__art {
    position: absolute; z-index: 1;
    top: 12%; bottom: 0;
    right: var(--gutter);   /* the container's content edge, not its padding edge */
    left: auto; width: auto;
  }
  /* translateX is a share of the image's OWN width, which is what makes the
     boy finish flush with the container: 0.0573 / 0.9427 = 6.08%. */
  .hero__art img {
    height: 100%; width: auto; max-width: none;
    transform: translateX(6.08%);
  }
}

/* -- 25.2 Section heads -------------------------------------------------- */
.section--rule .promise::before {
  content: ""; display: block; width: 54px; height: 1px;
  background: var(--amber); margin: 0 auto var(--s7);
}
.section-head--split { max-width: none; display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.06fr .94fr; gap: var(--s9); align-items: end; }
}
.section-head > .section-head__aside {
  margin-top: 0; font-size: var(--fs-small); line-height: 1.62;
  color: var(--stone); max-width: 46ch;
}
.section-head--tight { margin-bottom: var(--s6); }

/* -- 25.3 The six-step loop ---------------------------------------------- */
.loop { display: grid; gap: 0; border-top: 1px solid var(--line); }
.loop__step {
  position: relative; padding: var(--s5) 0 var(--s5) 24px;
  border-bottom: 1px solid var(--line);
}
.loop__step::before {
  content: ""; position: absolute; left: 0; top: calc(50% - 4px);
  width: 8px; height: 8px; background: var(--amber);
  transition: transform var(--mid);
}
.loop__step:hover::before { transform: scale(1.5); }
@media (min-width: 760px) {
  .loop { grid-template-columns: repeat(6, 1fr); border-top: 0; }
  .loop__step { border-bottom: 0; border-top: 1px solid var(--ink); padding: var(--s6) var(--s4) 0 0; }
  .loop__step::before { top: -4px; left: 0; }
}
.loop__n {
  display: block; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; color: var(--stone); font-variant-numeric: tabular-nums;
}
.loop__name {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-size: 1.25rem;
  letter-spacing: -0.02em; color: var(--ink);
}

/* -- 25.4 Founder -------------------------------------------------------- */
.founder { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .founder { grid-template-columns: .8fr 1.2fr; gap: var(--s9); align-items: start; }
  .founder__visual { margin-top: var(--s8); }
}
.founder__quote {
  font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.5rem);
  line-height: 1.18; max-width: 26ch;
}
.founder__copy .btn-row { margin-top: var(--s7); }

/* -- 25.5 Quote cards ---------------------------------------------------- */
.quote { position: relative; padding-top: var(--s6); border-top: 2px solid var(--ink); }
.quote::before {
  content: "“"; display: block;
  font-family: var(--font-display); font-size: 3.5rem; line-height: .62;
  color: var(--amber); margin-bottom: var(--s4);
}
.quote__body { font-size: 1.0625rem; line-height: 1.6; }
.quote__note { margin-top: var(--s5); font-size: .8125rem; line-height: 1.55; color: var(--stone); }

/* -- 25.6 FAQ layout ----------------------------------------------------- */
.faq-layout { display: grid; gap: var(--s7); }
@media (min-width: 940px) {
  .faq-layout { grid-template-columns: .78fr 1.22fr; gap: var(--s9); align-items: start; }
  .faq-layout .section-head { position: sticky; top: 110px; margin-bottom: 0; }
  .faq-layout .faq { border-top: 1px solid var(--ink); }
}

/* -- 25.7 Board caption -------------------------------------------------- */
.board-figure__cap {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stone);
}