/* ==========================================================================
   Football Reach - design system v2 "The Measured Game"
   --------------------------------------------------------------------------
   Editorial sports-journal meets modern athletic brand. The product is honest
   measurement, so the visual language is measurement: ruler ticks, pitch
   line-work, oversized numerals, hairline rules, film grain on dark surfaces.

   Type: Bricolage Grotesque (display) / Instrument Sans (body) /
         Spline Sans Mono (numeric + eyebrows). Loaded from Google Fonts in
         the layouts.

   Every class name is a stable contract with the PHP templates - the v1
   selectors all survive here with new clothes.
   ========================================================================== */

:root {
  /* Palette - emerald dominant, lime as a scalpel. */
  --pitch: #0a7a3f;
  --pitch-dark: #075c30;
  --pitch-deep: #06331d;
  --pitch-ink: #052616;
  --pitch-100: #e9f4ec;
  --pitch-200: #cfe7d8;
  --lime: #a3e635;
  --lime-deep: #3f6a08;     /* lime for text on light backgrounds (5.7:1 on band bg) */

  --ink: #101609;
  --ink-2: #46503f;
  --ink-3: #6a7360;         /* 4.5:1 on paper - WCAG AA for small muted text */
  --paper: #f6f7f2;
  --paper-2: #edefe6;
  --surface: #fdfdfb;
  --border: #dfe3d6;
  --border-2: #e9ece1;
  --hairline: rgba(7, 92, 48, 0.16);

  --amber: #b45309;
  --amber-bg: #fbf0dc;
  --red: #b93226;
  --red-bg: #fbe7e4;
  --blue: #1f6feb;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(5, 38, 22, 0.05);
  --shadow: 0 10px 30px -12px rgba(5, 38, 22, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(5, 38, 22, 0.3);

  --wrap: 1140px;
  --wrap-narrow: 780px;

  --font-display: 'Bricolage Grotesque', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font: 'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Reusable textures (CSP-safe data URIs). */
  --grain: 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --ticks: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px);
}

/* -- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; }
::selection { background: var(--lime); color: var(--pitch-ink); }
:focus-visible { outline: 2px solid var(--pitch); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* -- Layout ------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--wrap-narrow); }
.section { padding: 88px 0; }
.section-sm { padding: 52px 0; }
/* Interior pages open straight into content - no dead air under the nav. */
main > .section:first-child { padding-top: 44px; }
main > .section:first-child .section-head { margin-bottom: 36px; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.stack > * + * { margin-top: 14px; }
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  main > .section:first-child { padding-top: 28px; }
  .wrap { padding: 0 20px; }
}

/* -- Typography ---------------------------------------------------------------
   Editorial scale: huge tight display, measured body. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
.display {
  font-size: clamp(2.9rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.034em;
}
h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.012em; }
.lead { font-size: 1.16rem; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.t-body { font-size: 1rem; line-height: 1.68; }

/* Eyebrow: mono kicker with a tick ruler - the measurement motif. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pitch);
}
.eyebrow::before {
  content: ''; width: 34px; height: 9px; color: var(--pitch);
  background: var(--ticks);
  opacity: 0.85;
}
.center .eyebrow::before, .eyebrow.center::before { display: none; }
.center .eyebrow::after, .eyebrow.center::after {
  content: ''; position: absolute;
}
.section-head { max-width: 660px; margin: 0 auto 48px; }
.section-head h2 { margin-top: 10px; }
.section-head .lead { margin-top: 14px; }
.center.section-head { text-align: center; }

/* -- Brand --------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-img { width: 30px; height: 30px; display: block; flex-shrink: 0; transition: transform 0.5s var(--ease); }
.brand:hover .brand-img { transform: rotate(-8deg) scale(1.05); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--ink); }
.brand-to { color: var(--pitch); }

/* -- Nav ------------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-links { display: flex; align-items: center; align-self: stretch; gap: 30px; font-weight: 600; font-size: 0.95rem; }
/* Top-level items only (direct children + the dropdown toggle). A bare
   `.nav-links a` also matched the links inside the dropdown panel and, being
   more specific, overrode their padding/weight - keep it scoped. */
.nav-links > a:not(.btn), .nav-dropdown-toggle { position: relative; padding: 4px 0; color: var(--ink-2); transition: color 0.2s var(--ease); }
.nav-links > a:not(.btn)::after, .nav-dropdown-toggle::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--pitch); transition: right 0.3s var(--ease);
}
.nav-links > a:not(.btn):hover, .nav-links > a.is-active,
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.is-active, .nav-dropdown-toggle[aria-expanded="true"] { color: var(--ink); }
.nav-links > a:not(.btn):hover::after, .nav-links > a.is-active::after,
.nav-dropdown-toggle:hover::after, .nav-dropdown-toggle.is-active::after, .nav-dropdown-toggle[aria-expanded="true"]::after { right: 0; }
/* Mobile: single-row bar (brand + CTA + burger); links live in the drop panel.
   The primary CTA never hides - only the secondary links fold away. */
.nav-mobile { display: none; align-items: center; gap: 6px; }
.nav-burger {
  position: relative; width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 10px;
}
.nav-burger span {
  display: block; width: 21px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform 0.35s var(--ease-expo), opacity 0.25s var(--ease);
}
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: -1;
  background: linear-gradient(170deg, var(--pitch-deep), var(--pitch-ink));
  border-bottom: 1px solid rgba(163, 230, 53, 0.3);
  box-shadow: 0 30px 60px -22px rgba(5, 38, 22, 0.55);
  padding: 10px 0 24px;
  opacity: 0; transform: translateY(-16px); visibility: hidden; pointer-events: none;
  transition: transform 0.45s var(--ease-expo), opacity 0.3s var(--ease), visibility 0s 0.45s;
}
.nav-menu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.1; mix-blend-mode: overlay;
}
.nav.menu-open .nav-menu {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: transform 0.45s var(--ease-expo), opacity 0.3s var(--ease), visibility 0s;
}
.nav-menu .wrap { counter-reset: nm; position: relative; }
.nav-menu a:not(.btn) {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; letter-spacing: -0.02em;
  color: #eef7f0; padding: 15px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.nav-menu a:not(.btn)::before {
  counter-increment: nm; content: counter(nm, decimal-leading-zero);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.16em;
  color: var(--lime); opacity: 0.85;
}
.nav-menu a:not(.btn):active { color: var(--lime); }
.nav-menu-cta {
  margin-top: 18px; width: 100%;
  background: var(--lime); color: var(--pitch-ink);
  box-shadow: 0 14px 34px -12px rgba(163, 230, 53, 0.5);
}
/* Staggered link entrance once the panel opens. */
.nav-menu a { opacity: 0; transform: translateX(-16px); transition: opacity 0.35s var(--ease-expo), transform 0.35s var(--ease-expo); }
.nav.menu-open .nav-menu a { opacity: 1; transform: none; }
.nav.menu-open .nav-menu a:nth-child(1) { transition-delay: 0.08s; }
.nav.menu-open .nav-menu a:nth-child(2) { transition-delay: 0.15s; }
.nav.menu-open .nav-menu a:nth-child(3) { transition-delay: 0.22s; }
.nav.menu-open .nav-menu a:nth-child(4) { transition-delay: 0.3s; }
.nav.menu-open .nav-menu a:nth-child(5) { transition-delay: 0.37s; }
.nav.menu-open .nav-menu a:nth-child(6) { transition-delay: 0.44s; }
/* Current section (NN/g: show where you are). */
.nav-menu a.is-active:not(.btn) { color: var(--lime); }

/* The header stays pinned; it only condenses (glass + shadow) once scrolling. */
.nav { transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }

/* Floating back-to-top: appears after real downward travel (injected by JS). */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pitch-dark); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 34px -12px rgba(5, 38, 22, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-expo),
              visibility 0s 0.4s, background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.to-top.show {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-expo),
              visibility 0s, background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.to-top:hover { background: var(--lime); color: var(--pitch-ink); transform: translateY(-3px); }
.to-top:active { transform: translateY(-1px); }
.to-top svg { transition: transform 0.25s var(--ease); }
.to-top:hover svg { transform: translateY(-2px); }
@media (max-width: 640px) { .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; } }

/* Nav labels never wrap. Measured unwrapped, the full bar (brand + 4 links +
   CTA) needs ~802px at a 30px gap and ~770px at 22px, so tighten the gap below
   900px and fold the links into the burger panel at 820px and under (the old
   640px cut left 641-800px tablets with 2-3 line labels). */
.nav-links > a, .nav-dropdown-toggle, .nav-links .btn { white-space: nowrap; }
@media (max-width: 899px) {
  .nav-links { gap: 22px; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-mobile { display: inline-flex; }
  .nav-menu { display: block; }
}
@media (max-width: 640px) {
  .nav-inner { height: 64px; }
}

/* -- Buttons ---------------------------------------------------------------------
   Squared-off pill: confident, athletic, not bubble-soft. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  text-align: center;
  padding: 13px 26px; border-radius: 10px;
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--pitch-dark); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 24px -10px rgba(7, 92, 48, 0.55); }
.btn-primary:hover { background: var(--pitch-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 14px 30px -10px rgba(7, 92, 48, 0.6); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #232b1c; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pitch); color: var(--pitch-dark); }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; border-radius: 12px; }
.btn-sm { padding: 9px 16px; font-size: 0.88rem; border-radius: 8px; }
.btn-block { display: flex; width: 100%; }

/* -- Hero -------------------------------------------------------------------------
   Photographic, grained, with a load-in stagger and the score ruler. */
.hero {
  position: relative; color: #eef7f0; overflow: hidden;
  background:
    linear-gradient(100deg, rgba(5, 38, 22, 0.92) 0%, rgba(6, 51, 29, 0.72) 46%, rgba(6, 51, 29, 0.45) 100%),
    url('/assets/img/hero.jpg') center 30% / cover no-repeat,
    linear-gradient(160deg, #0b6b39 0%, var(--pitch-deep) 70%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain);
  opacity: 0.14; mix-blend-mode: overlay;
}
.hero::after {
  /* Halfway-line + centre-circle pitch marking, cropped off the right edge. */
  content: ''; position: absolute; top: 50%; right: -170px; width: 520px; height: 520px;
  transform: translateY(-50%);
  border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: 50%;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; padding: 108px 0 96px; max-width: 720px; }
@media (max-width: 640px) { .hero-inner { padding: 64px 0 60px; } }
.hero .eyebrow { color: var(--lime); }
.hero .eyebrow::before { color: var(--lime); }
.hero h1 { color: #fff; margin-top: 16px; max-width: 15ch; }
.hero .lead { color: #cfe5d6; max-width: 52ch; margin-top: 22px; font-size: 1.2rem; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.hero-cta .btn-primary { background: var(--lime); color: var(--pitch-ink); box-shadow: 0 14px 34px -12px rgba(163, 230, 53, 0.5); }
.hero-cta .btn-primary:hover { background: #b8f24e; transform: translateY(-2px); }
.hero-cta .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.32); }
.hero-cta .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7); color: #fff; }
.hero-trust { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: #a6d3b6; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust span::before { content: ''; width: 6px; height: 6px; background: var(--lime); }
.hero-provider { margin-top: 16px; font-size: 0.92rem; color: #a6d3b6; }
.hero-provider a { color: var(--lime); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-provider a:hover { text-decoration: underline; }

/* The 0-100 ruler: the product in one ornament. */
.hero-ruler {
  margin-top: 44px; max-width: 460px; position: relative;
  height: 34px; color: rgba(255,255,255,0.5);
}
.hero-ruler::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: var(--ticks);
  opacity: 0.65;
}
.hero-ruler::after {
  content: ''; position: absolute; left: 0; top: -3px; width: 3px; height: 18px;
  background: var(--lime);
  animation: ruler-sweep 3.2s var(--ease) 0.9s both;
}
@keyframes ruler-sweep { from { left: 0; } to { left: 72%; } }
.hero-ruler span {
  position: absolute; top: 16px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
}
.hero-ruler span:nth-child(1) { left: 0; transform: none; }
.hero-ruler span:nth-child(2) { left: 25%; }
.hero-ruler span:nth-child(3) { left: 50%; }
.hero-ruler span:nth-child(4) { left: 75%; }
.hero-ruler span:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* Load-in stagger. */
.fx { opacity: 0; transform: translateY(18px); animation: fx-in 0.9s var(--ease) forwards; }
.fx-1 { animation-delay: 0.05s; } .fx-2 { animation-delay: 0.16s; }
.fx-3 { animation-delay: 0.27s; } .fx-4 { animation-delay: 0.38s; }
.fx-5 { animation-delay: 0.5s; }
@keyframes fx-in { to { opacity: 1; transform: none; } }

/* -- Cards ------------------------------------------------------------------------ */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card::before {
  /* Corner-arc pitch marking. */
  content: ''; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px;
  border-right: 1.5px solid var(--hairline);
  border-radius: 0 0 100% 0;
  border-bottom: 1.5px solid var(--hairline);
  pointer-events: none;
}
.card:hover { transform: translateY(-3px); border-color: var(--pitch-200); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-2); font-size: 0.99rem; }

.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.step-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.step-num {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--pitch-dark); background: var(--pitch-100); border-radius: 10px;
}
.step-head .step-num { margin-bottom: 0; }
.step-icon { color: var(--pitch); opacity: 0.9; }

/* -- Imagery ------------------------------------------------------------------------ */
.page-hero-img {
  width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}
.img-card {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
@media (max-width: 560px) { .page-hero-img { aspect-ratio: 2 / 1; } }
/* Archie's intro video in the page-hero slot (assess page, decision 030): same frame as
   .page-hero-img; 16:9 cut in the column, square cut on phones (one shown at a time). */
.page-hero-video {
  position: relative; margin: 0 0 30px; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  background: var(--pitch-deep);
}
.page-hero-video video { display: block; width: 100%; height: auto; }
.page-hero-video .phv-wide { aspect-ratio: 16 / 9; }
.page-hero-video .phv-square { display: none; aspect-ratio: 1 / 1; }
@media (max-width: 560px) {
  .page-hero-video .phv-wide { display: none; }
  .page-hero-video .phv-square { display: block; }
}
/* Watch button: over the empty bottom-right of the 16:9 poster (under the headline, clear of
   Archie's ring - bottom-centre clipped it). The square poster has no free band (Archie, then
   the headline to the bottom edge - it covered "football take you?"), so on phones the button
   sits as a bar under the video, inside the frame. */
.phv-play {
  position: absolute; right: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 22px; border: 0; border-radius: var(--radius-full);
  background: var(--lime); color: var(--pitch-ink); cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  box-shadow: 0 14px 34px -12px rgba(163, 230, 53, 0.5);
}
.phv-play[hidden] { display: none; }
.phv-play:hover { background: #b8f24e; }
.phv-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) {
  .phv-play { position: static; display: flex; justify-content: center; width: calc(100% - 24px); margin: 12px; box-sizing: border-box; }
}
/* Archie's summary video in the article hero slot (decision 041, media note 3) + its transcript */
.article-hero-video { margin: 6px 0 12px; }
.article-video-transcript { margin: 0 0 30px; font-size: .92rem; color: var(--ink-2); }
.article-video-transcript summary { cursor: pointer; font-weight: 600; color: var(--pitch-dark); }
.article-video-transcript p { margin: 10px 0 0; line-height: 1.65; }

/* -- Pricing -------------------------------------------------------------------------- */
.price-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; max-width: 840px; margin: 0 auto; align-items: start; }
@media (max-width: 680px) { .price-wrap { grid-template-columns: 1fr; } }
.price-card { padding: 34px 32px; }
.price-card.featured {
  background: linear-gradient(165deg, var(--pitch-deep), var(--pitch-ink));
  border-color: transparent; color: #e9f5ec;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.price-card.featured::before { display: none; }
.price-card.featured::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.12; mix-blend-mode: overlay;
}
.price-card.featured h3, .price-card.featured .price { color: #fff; }
.price-card.featured .feature-list li { color: #c9e2d1; }
.price-card.featured .feature-list li::before { color: var(--lime); }
.price-card.featured .muted { color: #96bfa4; }
.price-card.featured:hover { transform: translateY(-4px); }
.price-card.featured .btn-primary { background: var(--lime); color: var(--pitch-ink); box-shadow: 0 14px 34px -12px rgba(163, 230, 53, 0.45); }
.price-card.featured .btn-primary:hover { background: #b8f24e; }
.price-badge {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pitch-ink); background: var(--lime); padding: 6px 11px; border-radius: 6px;
}
.price { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 6px; }
.price small { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-3); }
.price-card.featured .price small { color: #8fbf9f; }
.feature-list { margin-top: 18px; }
.feature-list li { display: flex; gap: 11px; padding: 8px 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.feature-list li::before {
  content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: calc((1.5em - 16px) / 2);
  background-color: var(--pitch); -webkit-mask: var(--i-arrow-right) center / contain no-repeat; mask: var(--i-arrow-right) center / contain no-repeat;
}

/* -- Score dial ------------------------------------------------------------------------ */
.dial-wrap { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.dial { position: relative; width: 178px; height: 178px; flex-shrink: 0; }
.dial::before {
  /* Tick ring behind the dial - gauge language. */
  content: ''; position: absolute; inset: -13px; border-radius: 50%;
  background: repeating-conic-gradient(from -90deg, var(--hairline) 0deg 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.dial svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.dial .track { stroke: var(--paper-2); }
.dial .value { stroke: var(--pitch); stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease); }
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dial-score { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.dial-outof { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 4px; }

.band-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 8px;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--pitch-100); color: var(--pitch-dark);
}
.band-elite, .band-strong { background: var(--pitch-dark); color: #d9f99d; }
.band-promising { background: #e5f0d3; color: var(--lime-deep); }
.band-developing { background: var(--amber-bg); color: var(--amber); }
.band-early, .band-foundational { background: var(--paper-2); color: var(--ink-2); }

/* -- Corner bars -------------------------------------------------------------------------- */
.bars { margin-top: 10px; }
.bar-row { margin: 16px 0; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.bar-label { font-weight: 600; font-size: 0.95rem; }
.bar-val { font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; color: var(--pitch-dark); }
.bar-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--paper) calc(25% - 1px) 25%),
    var(--paper-2);
}
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--pitch-dark), var(--pitch)); border-radius: 999px; }

/* -- Result -------------------------------------------------------------------------------- */
.result-hero {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px 38px; box-shadow: var(--shadow);
}
.callout {
  background: var(--pitch-100); border: 1px solid var(--pitch-200); border-left: 3px solid var(--pitch);
  border-radius: var(--radius-sm); padding: 17px 20px; color: var(--pitch-ink); font-size: 0.96rem;
}
.callout-amber { background: var(--amber-bg); border-color: #eed9ac; border-left-color: var(--amber); color: #6b4206; }
.disclaimer { font-size: 0.85rem; line-height: 1.6; color: var(--ink-3); border-left: 2px solid var(--border); padding-left: 16px; }

.locked { position: relative; }
.locked-inner { filter: blur(7px) saturate(0.8); opacity: 0.5; pointer-events: none; user-select: none; max-height: 260px; overflow: hidden; }
.lock-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 26px;
  background: linear-gradient(180deg, rgba(246,247,242,0.2), rgba(246,247,242,0.92) 60%);
  border-radius: var(--radius-lg);
}
.lock-badge {
  width: 48px; height: 48px; border-radius: 12px; background: var(--pitch-100);
  display: flex; align-items: center; justify-content: center; color: var(--pitch);
}

/* -- Unlock (the sell) ------------------------------------------------------------------------ */
.unlock {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--pitch-deep) 0%, var(--pitch-ink) 90%);
  color: #e9f5ec; border-radius: var(--radius-xl); padding: 40px 38px;
  box-shadow: var(--shadow-lg);
}
.unlock::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.12; mix-blend-mode: overlay;
}
.unlock::after {
  content: ''; position: absolute; top: -140px; right: -140px; width: 380px; height: 380px;
  border: 1.5px solid rgba(163, 230, 53, 0.18); border-radius: 50%; pointer-events: none;
}
.unlock h2 { color: #fff; }
.unlock .price { color: #fff; }
.unlock .price small { color: #8fbf9f; }
.unlock .feature-list li { color: #cbe4d3; }
.unlock .feature-list li::before { color: var(--lime); }
.unlock .btn-primary { background: var(--lime); color: var(--pitch-ink); box-shadow: 0 14px 34px -12px rgba(163, 230, 53, 0.45); }
.unlock .btn-primary:hover { background: #b8f24e; transform: translateY(-2px); }
.unlock-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: #96bfa4; margin-top: 12px; }
.unlock .eyebrow, .unlock .eyebrow::before { color: var(--lime); }

/* -- Forms --------------------------------------------------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 36px 34px; box-shadow: var(--shadow);
}
@media (max-width: 560px) { .form-card { padding: 26px 20px; } }
.fieldset { padding: 26px 0; border-top: 1px solid var(--border-2); }
.fieldset:first-of-type { border-top: 0; padding-top: 4px; }
.fieldset-legend {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--pitch); margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 10px;
}
.fieldset-legend::after { content: ''; width: 26px; height: 8px; color: var(--pitch); background: var(--ticks); opacity: 0.7; }
.fieldset-sub { color: var(--ink-3); font-size: 0.92rem; margin-bottom: 18px; }
.field { margin-bottom: 20px; }
.field > label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.97rem; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 0.85rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
/* Two-column rows: a longer label can wrap to two lines while its neighbour
   stays one line. Grid makes both cells equal height; pin each control to the
   bottom of its cell so the inputs line up regardless of label height. */
.form-row .field { display: flex; flex-direction: column; }
.form-row .field > input, .form-row .field > select, .form-row .field > textarea { margin-top: auto; }

input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: 11px 14px; font-size: 1rem; line-height: 1.3; font-family: inherit; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 10px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--pitch); background: #fff;
  box-shadow: 0 0 0 4px rgba(10, 122, 63, 0.12);
}
select {
  appearance: none;
  /* Lucide chevron-down, same geometry as the icon set (was a filled triangle). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}
/* Normalize search inputs so they render identically to text inputs and
   selects (the native OS search box has a slightly different inner metric and
   a clear button, which made the directory "Name" field look subtly off). */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.field.has-error input, .field.has-error select { border-color: var(--red); }
.err { color: var(--red); font-size: 0.85rem; margin-top: 6px; font-weight: 500; }
.form-error {
  background: var(--red-bg); border: 1px solid #f0c5bf; border-left: 3px solid var(--red);
  color: #7c221a; padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-weight: 500;
}

/* Segmented radio pills. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills input { position: absolute; opacity: 0; width: 0; height: 0; }
.pills label {
  display: inline-flex; padding: 10px 16px; border-radius: 9px;
  font-size: 0.92rem; font-weight: 600; color: var(--ink-2);
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--border);
  cursor: pointer; transition: all 0.18s var(--ease);
}
.pills label:hover { box-shadow: inset 0 0 0 1.5px var(--pitch-200); color: var(--ink); }
.pills input:checked + label { background: var(--pitch-dark); box-shadow: inset 0 0 0 1.5px var(--pitch-dark); color: #fff; }
.pills input:focus-visible + label { box-shadow: inset 0 0 0 1.5px var(--pitch), 0 0 0 4px rgba(10,122,63,0.15); }

/* Range slider - the gauge. Fill tracks the thumb via --p (set in main.js),
   the value chip heats up with the rating, and a live descriptor names it. */
.range-row { display: flex; align-items: center; gap: 18px; }
.range-row input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1; height: 10px; border-radius: 999px;
  --p: 44.4%;
  background:
    linear-gradient(90deg, var(--pitch-dark), var(--pitch) 60%, #4da653) 0 0 / var(--p) 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(11.1% - 1.5px), var(--paper) calc(11.1% - 1.5px) 11.1%),
    var(--paper-2);
  border: 0; padding: 0; box-shadow: inset 0 1px 2px rgba(5, 38, 22, 0.08);
  cursor: pointer;
}
.range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 10px;
  background: var(--pitch-dark);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(5, 38, 22, 0.35), 0 0 0 0 rgba(163, 230, 53, 0);
  cursor: grab;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s var(--ease);
}
.range-row input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.range-row input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2); cursor: grabbing;
  background: var(--pitch);
  box-shadow: 0 3px 14px rgba(5, 38, 22, 0.4), 0 0 0 7px rgba(163, 230, 53, 0.28);
}
.range-row input[type="range"]:focus-visible { outline: none; }
.range-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 2px 10px rgba(5, 38, 22, 0.35), 0 0 0 5px rgba(10, 122, 63, 0.3);
}
.range-row input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 8px; background: var(--pitch-dark);
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(5,38,22,0.35); cursor: grab;
  transition: transform 0.18s var(--ease);
}
.range-row input[type="range"]:active::-moz-range-thumb { transform: scale(1.2); }
.range-row input[type="range"]::-moz-range-progress {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pitch-dark), var(--pitch));
}
.range-val {
  width: 50px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  background: var(--paper-2); color: var(--ink-2); border-radius: 10px;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease);
}
.range-val[data-band="mid"]  { background: var(--pitch-100); color: var(--pitch-dark); }
.range-val[data-band="high"] { background: var(--pitch-dark); color: #fff; }
.range-val[data-band="max"]  { background: var(--pitch-ink); color: var(--lime); }
.range-val.pulse { animation: chip-pulse 0.28s var(--ease); }
@keyframes chip-pulse { 40% { transform: scale(1.18); } }
.range-desc {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.25s var(--ease);
}
.range-desc::before { content: ''; width: 18px; height: 8px; background: var(--ticks); opacity: 0.6; }
.range-desc[data-band="high"], .range-desc[data-band="max"] { color: var(--pitch-dark); }

/* -- Plan ----------------------------------------------------------------------------------------- */
.plan-section { padding: 34px 0; border-top: 1px solid var(--border-2); }
.plan-section:first-child { border-top: 0; }
.plan-h { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.plan-h .tag {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pitch-dark); background: var(--pitch-100); padding: 6px 11px; border-radius: 6px; flex-shrink: 0;
}
.priority {
  position: relative; border-left: 3px solid var(--pitch);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 24px; margin: 16px 0;
  border-top: 1px solid var(--border-2); border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
}
.action-list li { display: flex; gap: 11px; padding: 7px 0; color: var(--ink-2); line-height: 1.55; }
.action-list li::before {
  content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: calc((1.55em - 16px) / 2);
  background-color: var(--pitch); -webkit-mask: var(--i-arrow-right) center / contain no-repeat; mask: var(--i-arrow-right) center / contain no-repeat;
}

.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border-2); }
.table th {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  border-bottom: 1.5px solid var(--border);
}
.table td:nth-child(2) { font-family: var(--font-mono); font-weight: 600; color: var(--pitch-dark); white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

.timeline { position: relative; margin-left: 8px; }
.timeline-item { position: relative; padding: 0 0 22px 28px; border-left: 1.5px solid var(--border); }
.timeline-item:last-child { border-left-color: transparent; }
.timeline-item::before {
  content: ''; position: absolute; left: -7.5px; top: 4px; width: 14px; height: 14px;
  border-radius: 4px; background: var(--pitch); border: 3px solid var(--paper);
}
.timeline-item .win { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--pitch-dark); }

.week-list li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-2); line-height: 1.55; }
.week-list li:last-child { border-bottom: 0; }
.week-list .day { font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; width: 104px; flex-shrink: 0; color: var(--pitch-dark); padding-top: 2px; }
.pre {
  white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.6;
  background: var(--pitch-ink); color: #cde7d5; padding: 20px 22px; border-radius: var(--radius);
}

/* -- Methodology weights ----------------------------------------------------------------------------- */
.weight-row { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.weight-row .wl { width: 260px; flex-shrink: 0; font-weight: 600; font-size: 0.94rem; }
.weight-bar { flex: 1; height: 18px; background: var(--paper-2); border-radius: 6px; overflow: hidden; }
.weight-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--pitch-dark), var(--pitch)); border-radius: 6px; }
.weight-pct { width: 48px; text-align: right; font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem; color: var(--pitch-dark); }
@media (max-width: 560px) { .weight-row .wl { width: 128px; font-size: 0.84rem; } }

/* -- Footer -------------------------------------------------------------------------------------------- */
.footer {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, var(--pitch-deep), var(--pitch-ink));
  color: #bfdcca; padding: 64px 0 32px; margin-top: 72px;
}
.footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.1; mix-blend-mode: overlay;
}
.footer::after {
  /* Centre-circle watermark. */
  content: ''; position: absolute; top: -190px; right: 6%; width: 460px; height: 460px;
  border: 1.5px solid rgba(255, 255, 255, 0.07); border-radius: 50%; pointer-events: none;
}
.footer .brand-name { color: #fff; }
.footer .brand-to { color: var(--lime); }
.footer-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.footer-brand { max-width: 330px; }
.footer-brand .muted { color: #8db99c; margin-top: 12px; font-size: 0.95rem; }
.footer-links { display: flex; flex-direction: column; gap: 11px; font-weight: 600; font-size: 0.95rem; }
.footer-links a { color: #cbe4d3; transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--lime); }
.footer-legal {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-legal .muted { color: #7dab8d; font-size: 0.8rem; max-width: 660px; line-height: 1.6; }

/* -- Prose ---------------------------------------------------------------------------------------------- */
.prose { max-width: var(--wrap-narrow); }
.prose h1 { margin-top: 12px; }
.prose h2 { margin: 42px 0 14px; padding-top: 26px; border-top: 1px solid var(--border-2); }
.prose h3 { margin: 26px 0 8px; }
.prose p { margin-bottom: 15px; color: var(--ink-2); }
.prose .lead { color: var(--ink-2); font-size: 1.14rem; }
.prose ul { margin: 0 0 18px 0; }
.prose ul li { position: relative; padding: 5px 0 5px 24px; color: var(--ink-2); }
.prose ul li::before { content: ''; position: absolute; left: 5px; top: 14px; width: 7px; height: 7px; border-radius: 2px; background: var(--pitch); }
.prose a { color: var(--pitch-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pitch-200); }
.prose a:hover { text-decoration-color: var(--pitch); }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--paper-2); padding: 2px 6px; border-radius: 5px; }
/* Buttons inside prose must keep button styling, not inherit the prose link color/underline. */
.prose a.btn { text-decoration: none; font-weight: 700; }
.prose a.btn-primary, .prose a.btn-dark { color: #fff; }
.prose a.btn-ghost { color: var(--ink); }

/* -- Admin ----------------------------------------------------------------------------------------------- */
.admin-bare { max-width: 430px; margin: 9vh auto; padding: 0 20px; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-side {
  width: 236px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--pitch-deep), var(--pitch-ink));
  color: #bfdcca; padding: 22px 16px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.admin-side .brand-name { color: #fff; }
.admin-side .brand-to { color: var(--lime); }
.admin-side-label {
  font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.18em; color: #7dab8d; margin: 10px 8px 8px;
}
.admin-nav { display: flex; flex-direction: column; gap: 3px; }
.admin-nav a { padding: 10px 12px; border-radius: 9px; font-weight: 600; font-size: 0.93rem; color: #c4dfce; transition: all 0.18s var(--ease); }
.admin-nav a:hover { background: rgba(255,255,255,0.07); color: #fff; }
.admin-nav a.is-active { background: var(--lime); color: var(--pitch-ink); }
.admin-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.admin-side-foot a { color: #8db99c; font-size: 0.88rem; font-weight: 600; }
.admin-side-foot a:hover { color: #fff; }
.admin-main { flex: 1; padding: 34px 38px; max-width: 980px; }
@media (max-width: 720px) {
  .admin-shell { flex-direction: column; }
  .admin-side { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-side-foot { margin: 0 0 0 auto; flex-direction: row; border: 0; padding: 0; }
  .admin-main { padding: 22px 20px; }
}
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.admin-head h1 { font-size: 1.9rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
@media (max-width: 780px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.stat .num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.stat .lbl { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-top: 4px; }
.stat .sub { font-size: 0.82rem; color: var(--pitch-dark); font-weight: 600; margin-top: 5px; }

.wz {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 5px 11px; border-radius: 6px;
}
.wz::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.wz.verified { background: var(--pitch-100); color: var(--pitch-dark); }
.wz.in_progress { background: var(--amber-bg); color: var(--amber); }
.wz.error { background: var(--red-bg); color: var(--red); }
.wz.not_started { background: var(--paper-2); color: var(--ink-3); }

.wz-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 10px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wz-list a:hover { border-color: var(--pitch-200); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.wz-list .wz-t { font-weight: 700; }
.wz-list .wz-d { font-size: 0.86rem; color: var(--ink-3); }

.copybox { display: flex; gap: 8px; align-items: stretch; margin: 8px 0; }
.copybox code {
  flex: 1; background: var(--pitch-ink); color: #cde7d5; border-radius: 9px; padding: 11px 13px;
  font-family: var(--font-mono); font-size: 0.82rem; white-space: pre-wrap; word-break: break-all;
}
.copy-btn {
  flex-shrink: 0; background: var(--ink); color: #fff; border-radius: 9px; padding: 0 16px;
  font-weight: 600; font-size: 0.85rem; transition: background 0.2s var(--ease);
}
.copy-btn:hover { background: #232b1c; }
.copy-btn.copied { background: var(--pitch); }

.env-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-2); font-size: 0.9rem; }
.env-row:last-child { border-bottom: 0; }
.env-row code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); }
.deep-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.trouble { border-left: 2px solid var(--border); padding: 4px 0 4px 16px; margin: 12px 0; }
.trouble h4 { font-size: 0.96rem; margin-bottom: 3px; }
.trouble p { font-size: 0.88rem; color: var(--ink-2); }
.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; width: 200px; padding: 9px 12px 9px 0; color: var(--ink-3); font-weight: 600; font-size: 0.85rem; vertical-align: top; }
.kv td { padding: 9px 0; border-bottom: 1px solid var(--border-2); }
.kv tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   v3 layer "Broadcast Cut" - cinematic hero, scroll-reveal storytelling,
   editorial numbering, ticker, stat band, pull-quote imagery, premium
   pricing ring, FAQ accordions, footer watermark. Later rules deliberately
   override the v2 blocks above; every effect respects reduced motion.
   ========================================================================== */

/* -- Scroll reveal (JS adds .rv to targets, .in when they enter view) ------- */
html.js .rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.85s var(--ease-expo), transform 0.85s var(--ease-expo);
  transition-delay: var(--rd, 0s);
}
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1 !important; transform: none !important; }
}

/* -- Nav: condensing glass bar + reading progress ---------------------------- */
.nav { transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 12px 34px -22px rgba(5, 38, 22, 0.4);
}
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--pitch), var(--lime));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* -- Ticker: broadcast strip under the hero ---------------------------------- */
.ticker {
  position: relative; overflow: hidden; background: var(--pitch-ink); color: #cfe5d6;
  border-top: 1px solid rgba(163, 230, 53, 0.28);
  border-bottom: 1px solid rgba(163, 230, 53, 0.28);
}
.ticker-track {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 13px 0;
  animation: tick-scroll 32s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; padding: 0 30px;
}
.ticker-track span::before {
  content: ''; width: 7px; height: 7px; background: var(--lime);
  transform: rotate(45deg); margin-right: 30px; flex-shrink: 0;
}
@keyframes tick-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* -- Hero: cinematic height, ambient glow, floating proof card, scroll cue --- */
.hero { display: flex; align-items: center; min-height: clamp(560px, 84vh, 830px); }
.hero-inner { width: 100%; }
.hero-glow {
  position: absolute; top: -180px; right: -100px; width: 660px; height: 660px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(163, 230, 53, 0.2), transparent 72%);
  filter: blur(28px);
  animation: glow-breathe 7s ease-in-out infinite alternate;
}
@keyframes glow-breathe { from { opacity: 0.55; } to { opacity: 1; } }

.hero-card {
  position: absolute; right: 6.5%; top: 50%; z-index: 1; width: 252px;
  padding: 22px 22px 18px; border-radius: 18px;
  background: rgba(5, 38, 22, 0.52);
  border: 1px solid rgba(163, 230, 53, 0.3);
  backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 34px 90px -24px rgba(0, 0, 0, 0.55);
  transform: translateY(-50%) rotate(2.4deg);
  animation: hc-in 0.9s var(--ease) 0.5s both, card-float 6.5s ease-in-out 1.6s infinite alternate;
}
@keyframes hc-in {
  from { opacity: 0; transform: translateY(calc(-50% + 12px)) rotate(2.4deg); }
  to   { opacity: 1; transform: translateY(calc(-50% - 9px)) rotate(2.4deg); }
}
@keyframes card-float {
  from { transform: translateY(calc(-50% - 9px)) rotate(2.4deg); }
  to   { transform: translateY(calc(-50% + 9px)) rotate(2.4deg); }
}
@media (prefers-reduced-motion: reduce) { .hero-card, .hero-glow { animation: none; } }
.hc-dial {
  position: relative; width: 122px; height: 122px; margin: 2px auto 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hc-dial::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--lime) 78%, rgba(255, 255, 255, 0.13) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
.hc-num { font-family: var(--font-display); font-size: 2.7rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.hc-outof { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; color: #9fcfae; margin-top: 3px; }
.hc-band {
  text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pitch-ink); background: var(--lime); border-radius: 6px; padding: 6px 8px; margin-bottom: 14px;
}
.hc-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.hc-bar span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; color: #9fcfae; width: 30px; flex-shrink: 0; }
.hc-bar i { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); position: relative; overflow: hidden; }
.hc-bar i::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 60%);
  background: linear-gradient(90deg, var(--pitch), var(--lime)); border-radius: 99px;
}
.hc-tag { margin-top: 13px; text-align: center; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: #7dab8d; }
/* 150%-scaled laptops sit around 1045 CSS px - keep the card visible there,
   just slimmer and tighter to the edge so it clears the headline. */
@media (max-width: 1240px) { .hero-card { width: 220px; right: 3%; padding: 18px 18px 15px; } }
@media (max-width: 1000px) { .hero-card { display: none; } }

.hero-scroll {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 9px; color: #9fcfae;
}
.hero-scroll span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; }
.hero-scroll::after {
  content: ''; width: 1.5px; height: 32px; transform-origin: top;
  background: linear-gradient(180deg, var(--lime), transparent);
  animation: cue-drop 2s var(--ease) infinite;
}
@keyframes cue-drop {
  0% { transform: scaleY(0); opacity: 1; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (max-width: 640px) { .hero-scroll { display: none; } }

/* -- Editorial section numbering on eyebrows --------------------------------- */
.eyebrow[data-idx]::after {
  content: '/ ' attr(data-idx);
  position: static; width: auto; height: auto;
  opacity: 0.5; letter-spacing: 0.1em;
}

/* -- Ghost numerals behind the how-it-works steps ----------------------------- */
.step-ghost {
  position: absolute; right: 14px; bottom: 2px; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 800; font-size: 5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--pitch-200);
}

/* -- Stat band: the numbers, said out loud ------------------------------------ */
.stat-band {
  position: relative; overflow: hidden; padding: 66px 0;
  background: linear-gradient(160deg, var(--pitch-deep), var(--pitch-ink));
  color: #e9f5ec;
}
.stat-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.11; mix-blend-mode: overlay;
}
.stat-band-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.stat-big { border-left: 1.5px solid rgba(163, 230, 53, 0.35); padding-left: 22px; }
.sb-num {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.7rem, 5vw, 4rem); letter-spacing: -0.04em; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.sb-num sup { font-size: 0.45em; color: var(--lime); font-weight: 700; }
.sb-lbl {
  display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9fcfae; line-height: 1.8;
}
@media (max-width: 880px) { .stat-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; } }

/* -- Image band with an overlaid editorial pull quote -------------------------- */
.img-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
}
.img-band img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.img-band::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(205deg, transparent 42%, rgba(5, 38, 22, 0.9) 88%);
}
.img-band-quote { position: absolute; left: 36px; right: 36px; bottom: 28px; z-index: 1; color: #fff; max-width: 620px; }
.img-band-quote p {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1.3rem, 2.7vw, 1.95rem); line-height: 1.18; text-wrap: balance;
}
.img-band-quote p::before { content: '\201C'; color: var(--lime); margin-right: 2px; }
.ibq-by {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 13px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime);
}
.ibq-by::before { content: ''; width: 26px; height: 1.5px; background: var(--lime); }
@media (max-width: 560px) {
  .img-band img { aspect-ratio: 4 / 3; }
  .img-band-quote { left: 18px; right: 18px; bottom: 18px; }
}

/* -- The Climb: progress story slider ------------------------------------------ */
.slider { position: relative; }
.slider-track {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px; margin: 0 -4px;
}
.slider-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: center;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow);
}
.slide-media { position: relative; min-height: 340px; }
.slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, transparent 55%, rgba(5, 38, 22, 0.55) 100%);
}
.slide-score {
  position: absolute; left: 18px; bottom: 18px; z-index: 1;
  display: inline-flex; align-items: baseline; gap: 8px;
  background: rgba(5, 38, 22, 0.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(163, 230, 53, 0.35); border-radius: 10px;
  padding: 9px 14px; color: #fff;
}
.slide-score b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.03em; }
.slide-score span { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #9fcfae; }
.slide-score .up { color: var(--lime); font-size: 0.8rem; }
.slide-body { padding: 34px 34px 28px; display: flex; flex-direction: column; }
.slide-phase {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--pitch);
}
.slide-phase::before { content: ''; width: 22px; height: 8px; background: var(--ticks); color: var(--pitch); opacity: 0.7; }
.slide-body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.slide-body p { color: var(--ink-2); font-size: 0.99rem; }
.slide-meter { margin-top: auto; padding-top: 24px; }
.slide-meter .sm-top {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.slide-meter .sm-top b { color: var(--pitch-dark); }
.slide-meter .sm-track {
  height: 8px; border-radius: 99px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--paper) calc(25% - 1px) 25%),
    var(--paper-2);
}
.slide-meter .sm-track i {
  display: block; height: 100%; width: var(--w, 50%); border-radius: 99px;
  background: linear-gradient(90deg, var(--pitch-dark), var(--pitch) 70%, var(--lime));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-expo) 0.25s;
}
.slide.in .slide-meter .sm-track i { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .slide-meter .sm-track i { transform: scaleX(1) !important; } }
.slide-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.slider-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.slider-btn {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border);
  color: var(--ink); transition: box-shadow 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.slider-btn:hover { box-shadow: inset 0 0 0 1.5px var(--pitch); color: var(--pitch-dark); transform: translateY(-1px); }
.slider-btn[disabled] { opacity: 0.35; pointer-events: none; }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
  width: 26px; height: 6px; border-radius: 99px; background: var(--border);
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}
.slider-dots button.active { background: var(--pitch); width: 40px; }
.slider-dots button:hover:not(.active) { background: var(--pitch-200); }
.slider-note {
  text-align: center; margin-top: 16px;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 820px) {
  .slide { grid-template-columns: minmax(0, 1fr); }
  .slide-media { min-height: 0; aspect-ratio: 16 / 10; }
  .slide-body { padding: 24px 22px 22px; }
  .slide-meter { padding-top: 18px; }
}

/* -- Pricing: rotating lime ring on the featured card --------------------------- */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.price-card.featured::before {
  content: ''; display: block; position: absolute; inset: -1.5px; z-index: 0;
  width: auto; height: auto;
  border-radius: inherit; padding: 1.5px; pointer-events: none;
  border-right: 0; border-bottom: 0;
  background: conic-gradient(from var(--ang), transparent 0 232deg, rgba(163, 230, 53, 0.95) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: ring-spin 5.5s linear infinite;
}
@keyframes ring-spin { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .price-card.featured::before { animation: none; } }

/* -- FAQ accordions --------------------------------------------------------------- */
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-item[open] { border-color: var(--pitch-200); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; padding: 19px 24px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.07rem;
  letter-spacing: -0.012em; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--pitch-dark); }
.faq-item summary::after {
  content: ''; flex-shrink: 0; width: 20px; height: 20px;
  background-color: var(--pitch); -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > p { padding: 0 44px 20px 24px; color: var(--ink-2); font-size: 0.98rem; }

/* -- Closing CTA panel -------------------------------------------------------------- */
.cta-panel {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(165deg, var(--pitch-deep), var(--pitch-ink));
  color: #e9f5ec; border-radius: var(--radius-xl);
  padding: 66px 34px 60px; margin-top: 48px; box-shadow: var(--shadow-lg);
}
.cta-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.12; mix-blend-mode: overlay;
}
.cta-panel::after {
  content: ''; position: absolute; bottom: -180px; left: -120px; width: 420px; height: 420px;
  border: 1.5px solid rgba(163, 230, 53, 0.2); border-radius: 50%; pointer-events: none;
}
.cta-panel .eyebrow, .cta-panel .eyebrow::before { color: var(--lime); }
.cta-panel h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.75rem); margin-top: 12px; }
.cta-panel > p { color: #a6d3b6; margin: 12px auto 28px; max-width: 46ch; }
.cta-panel .btn-primary { background: var(--lime); color: var(--pitch-ink); box-shadow: 0 16px 40px -12px rgba(163, 230, 53, 0.5); }
.cta-panel .btn-primary:hover { background: #b8f24e; transform: translateY(-2px); }

/* Celebration figure: rises out of the panel's right side on desktop. */
.cta-figure { display: none; }
@media (min-width: 920px) {
  .cta-panel { text-align: left; padding-left: 60px; padding-right: 340px; }
  .cta-panel > p { margin: 12px 0 26px; }
  .cta-figure {
    display: block; position: absolute; right: 16px; bottom: 0; z-index: 0;
    height: calc(100% - 8px); width: auto;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.5));
  }
  .cta-panel .eyebrow, .cta-panel h2, .cta-panel > p, .cta-panel .btn { position: relative; z-index: 1; }
}

/* -- Footer watermark ----------------------------------------------------------------- */
.footer-wm {
  position: relative; z-index: 0; margin: 44px 0 -26px; pointer-events: none; user-select: none;
  text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; line-height: 0.8; letter-spacing: -0.03em;
  font-size: clamp(3.2rem, 11vw, 8.4rem);
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  transform: translateY(18%);
}

/* -- Primary buttons: shine sweep ------------------------------------------------------ */
.btn-primary { overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -75%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-18deg); transition: left 0.65s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { left: 135%; }

/* -- Assess: sticky progress + numbered fieldsets --------------------------------------- */
.assess-progress {
  position: sticky; top: 80px; z-index: 30;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 18px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.ap-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ap-label, .ap-count {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.ap-count { color: var(--pitch-dark); }
.ap-track { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.ap-fill {
  display: block; height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--pitch-dark), var(--pitch) 65%, var(--lime));
  transition: width 0.5s var(--ease-expo);
}
@media (max-width: 640px) { .assess-progress { position: static; } }

.form-card { counter-reset: fs; }
.form-card .fieldset-legend::before {
  counter-increment: fs; content: counter(fs, decimal-leading-zero);
  font-family: var(--font-mono); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.06em;
  color: var(--pitch-ink); background: var(--lime); border-radius: 5px; padding: 2px 7px;
}

/* -- Bars grow into place when revealed -------------------------------------------------- */
html.js .weight-bar span, html.js .bar-fill {
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-expo) 0.15s;
}
html.js .weight-row.in .weight-bar span, html.js .bar-row.in .bar-fill { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .weight-bar span, html.js .bar-fill { transform: scaleX(1) !important; }
}

/* -- Print (Save the plan as PDF) ---------------------------------------------------------------------------- */
@media print {
  .nav, .footer, .to-top, .no-print { display: none !important; }
  body { background: #fff; }
  .plan-section { break-inside: avoid; }
  .card, .priority { box-shadow: none; border-color: #ccc; }
}

/* Cookie consent banner (ad pixels). Hidden until consent.js shows it. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 18px; border-radius: 14px;
  background: #052616; color: #eafaf0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
/* The `display:flex` above beats the UA stylesheet's [hidden]{display:none}, so
   without this the banner stays on screen after Accept/Decline. Must outrank the
   .consent rule, hence the attribute selector. */
.consent[hidden] { display: none; }
.consent__text { flex: 1 1 320px; margin: 0; font-size: .92rem; line-height: 1.5; }
.consent__text a { color: #7fe0a6; text-decoration: underline; }
.consent__actions { display: flex; gap: 10px; margin-left: auto; }
/* Decline and Accept are deliberately IDENTICAL (colour, size, weight): the ICO
   expects refusing to be as prominent as accepting, and the Children's code rules
   out colour nudges (e.g. a green "yes"). Never restyle one of them on its own. */
.consent__btn {
  min-width: 7.5em; min-height: 44px; cursor: pointer; border: 1px solid #cfeeda; border-radius: 9px;
  padding: 10px 18px; font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2;
  background: #eafaf0; color: #052616;
}
.consent__btn:hover { background: #fff; }
.consent a:focus-visible, .consent button:focus-visible { outline-color: var(--lime); }
@media (max-width: 520px) {
  /* Column layout makes flex-basis a HEIGHT: the desktop `1 1 320px` forced a
     320px-tall text box (150px of text) and a banner covering half the phone.
     Size the text to its content; the buttons sit side by side at equal width
     and stack (flex-wrap, em-based basis) when enlarged text needs the room. */
  /* Block (not column flex): a wrapping flex row inside a column flexbox is
     sized as if every button wrapped, which doubled the button height. */
  .consent { display: block; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); padding: 14px 16px; }
  .consent__text { margin-bottom: 12px; }
  .consent__actions { margin: 0; gap: 12px; flex-wrap: wrap; }
  .consent__btn { flex: 1 1 7em; min-width: 0; min-height: 48px; }
}
/* Too tall to float (small phone + enlarged text): consent.js drops it into the
   page flow; it is first in <body>, so it becomes a top-of-page banner. */
.consent.consent--inline { position: static; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
/* Never stack overlays: a user-opened mobile menu wins over the banner (it
   returns on close), and back-to-top stays away until the banner is gone (it sat
   on top of the Accept button on phones). */
body:has(.nav.menu-open) .consent { visibility: hidden; }
@media (max-width: 900px) { .consent:not([hidden]) ~ .to-top { display: none; } }
.footer-cookie-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.footer-cookie-btn:hover { color: #cbe4d3; }

/* ==========================================================================
   Football services directory
   ========================================================================== */
.dir-hero { background: linear-gradient(160deg, var(--pitch-ink), var(--pitch-dark)); color: #eaf5ee; padding: 54px 0 44px; position: relative; }
.dir-hero .eyebrow { color: var(--lime); }
.dir-hero-title { color: #fff; font-family: var(--font-display); font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.05; margin: 8px 0 14px; max-width: 18ch; }
.dir-hero-lead { color: #cfe7d8; max-width: 60ch; }
.dir-hero-lead strong { color: #fff; }
.dir-search { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; background: rgba(255,255,255,.08); padding: 8px; border-radius: var(--radius-lg); max-width: 720px; }
.dir-search input[type=search] { flex: 1 1 220px; border: 0; border-radius: var(--radius); padding: 13px 16px; font-size: 1rem; background: #fff; color: var(--ink); }
.dir-search select { border: 0; border-radius: var(--radius); padding: 13px 14px; background: #fff; color: var(--ink); font-size: .95rem; }
.dir-search .btn { flex: 0 0 auto; }

.section-alt { background: var(--paper-2); }

/* Category grid */
.dir-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.dir-cat { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; text-decoration: none; color: var(--ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s; }
.dir-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--pitch-200); }
.dir-cat-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--pitch-100); color: var(--pitch); margin-bottom: 8px; transition: background-color .15s var(--ease), color .15s var(--ease); }
.dir-cat:hover .dir-cat-ico { background: var(--pitch); color: #fff; }
.dir-cat-name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; }
.dir-cat-count { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pitch); }
.dir-cat-tag { font-size: .86rem; color: var(--ink-3); margin-top: 2px; }

/* Listing grid + cards */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.dir-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.dir-card--featured { border-color: var(--pitch-200); box-shadow: var(--shadow-sm); background: linear-gradient(180deg, #fff, var(--pitch-100)); }
.dir-ribbon { position: absolute; top: 12px; right: -6px; background: var(--pitch); color: #fff; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px 0 0 4px; }
.dir-ribbon--inline { position: static; display: inline-block; right: auto; top: auto; }
.dir-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dir-card-cat { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.dir-verified { color: var(--pitch); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.dir-card-title { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; margin: 2px 0 0; }
.dir-card-title a { color: var(--ink); text-decoration: none; }
.dir-card-title a:hover { color: var(--pitch-dark); }
.dir-card-loc { font-size: .84rem; color: var(--ink-3); margin: 0; }
.dir-card-blurb { font-size: .9rem; color: var(--ink-2); margin: 0; flex: 1; }
.dir-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 4px 0 0; }
.dir-chips li { background: var(--pitch-100); color: var(--pitch-dark); font-size: .74rem; padding: 3px 9px; border-radius: var(--radius-full); }
.dir-chips--lg li { font-size: .85rem; padding: 5px 12px; }
.dir-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.dir-price { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); }
.dir-noreviews { font-size: .78rem; color: var(--ink-3); }
.dir-card-cta { margin-top: 6px; text-align: center; }

/* Stars */
.dir-stars { display: inline-flex; align-items: center; gap: 6px; }
.dir-stars-count { font-size: .78rem; color: var(--ink-3); }

/* Region grid */
.dir-region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dir-region { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 15px; text-decoration: none; color: var(--ink); }
.dir-region:hover { border-color: var(--pitch-200); background: var(--pitch-100); }
.dir-region-count { font-family: var(--font-mono); font-size: .8rem; color: var(--pitch); background: var(--pitch-100); border-radius: var(--radius-full); padding: 1px 9px; }

/* CTA */
.dir-list-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 26px 28px; }
.dir-list-cta h2 { margin: 6px 0 8px; }
.dir-list-cta .btn { flex: 0 0 auto; }

/* FAQ */
.dir-faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.dir-faq summary { font-family: var(--font-display); font-weight: 600; cursor: pointer; font-size: 1.02rem; }
.dir-faq p { color: var(--ink-2); margin: 10px 0 0; }

/* Breadcrumb */
.dir-breadcrumb { padding: 16px 0 0; }
.dir-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 auto; max-width: var(--wrap); width: 92%; font-size: .82rem; color: var(--ink-3); }
.dir-breadcrumb a { color: var(--pitch-dark); text-decoration: none; }
.dir-breadcrumb a:hover { text-decoration: underline; }
.dir-crumb-sep { margin-left: 6px; color: var(--ink-3); }

/* Category / area heads + facets */
.dir-cat-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.dir-cat-ico--lg { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 0; }
.dir-intro { max-width: 68ch; }
.dir-facet { display: flex; gap: 10px; align-items: baseline; margin: 12px 0; flex-wrap: wrap; }
.dir-facet-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.dir-facet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-facet-chips a { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 5px 13px; font-size: .84rem; text-decoration: none; color: var(--ink); }
.dir-facet-chips a:hover { border-color: var(--pitch-200); background: var(--pitch-100); }
.dir-facet-chips a span { color: var(--pitch); font-family: var(--font-mono); font-size: .74rem; }
.dir-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.dir-filter-bar input[type=search] { flex: 1 1 240px; border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; font-size: .95rem; }
.dir-filter-bar select { border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; background: var(--surface); }
.dir-filter-bar--wide input[type=search] { flex-basis: 320px; }
.dir-result-count { color: var(--ink-3); font-size: .9rem; margin: 6px 0 16px; }
.dir-empty { background: var(--paper-2); border-radius: var(--radius-lg); padding: 32px; text-align: center; color: var(--ink-2); }

/* Pagination */
.dir-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.dir-page-count { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-3); }
.btn.is-disabled { opacity: .4; pointer-events: none; }

/* Listing profile */
.dir-listing-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.dir-listing-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dir-cat-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--pitch-100); color: var(--pitch-dark); border-radius: var(--radius-full); padding: 4px 12px; font-size: .82rem; text-decoration: none; font-weight: 600; }
.dir-listing-head h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 4px 0 6px; }
.dir-listing-loc { color: var(--ink-3); margin: 0 0 6px; }
.dir-prose { color: var(--ink-2); line-height: 1.7; margin: 18px 0; }
.dir-h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 26px 0 12px; }
.dir-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; background: var(--paper-2); border-radius: var(--radius-lg); padding: 16px 18px; margin: 18px 0; }
.dir-facts dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dir-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.dir-accreds { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dir-accreds li { position: relative; padding-left: 26px; color: var(--ink-2); line-height: 1.55; }
.dir-accreds li > .ic-li { position: absolute; left: 0; top: .2em; margin: 0; }
/* Category-specific profiles (decision 050) */
.dir-h3 { font-size: 1rem; margin: 18px 0 8px; }
.dir-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 6px 0 14px; }
.dir-table th, .dir-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-2); }
.dir-table th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 560px) { .dir-table { display: block; overflow-x: auto; } }
.dir-related { margin-top: 34px; }

/* Reviews */
.dir-review-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 16px; }
.dir-review-list li { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.dir-review-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dir-review-title { font-weight: 600; margin: 6px 0 2px; }
.dir-review-form-wrap summary { display: inline-block; }
.dir-review-form { margin-top: 14px; }

/* Sidebar cards */
.dir-listing-side { display: grid; gap: 16px; align-content: start; }
.dir-contact-card, .dir-enquire-card, .dir-claim-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.dir-side-h { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 14px; }
.dir-contact-row { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 0; font-size: .92rem; }
.dir-contact-row span { color: var(--ink-3); }
.dir-socials { display: flex; gap: 12px; margin: 12px 0 0; flex-wrap: wrap; }
.dir-locked { font-size: .9rem; }
.dir-map-link { display: inline-block; margin-top: 12px; font-size: .88rem; color: var(--pitch-dark); text-decoration: none; }
.dir-claim-card { background: var(--pitch-100); border-color: var(--pitch-200); }
.dir-enquire-form .field, .dir-review-form .field { margin-bottom: 12px; }

/* Flash */
.dir-flash { border-radius: var(--radius); padding: 12px 14px; font-size: .9rem; margin-bottom: 14px; }
.dir-flash--ok { background: var(--pitch-100); color: var(--pitch-dark); border: 1px solid var(--pitch-200); }
.dir-flash--err { background: var(--red-bg); color: var(--red); border: 1px solid #f3c9c3; }

/* Plans (claim form) */
.dir-interval-toggle { display: inline-flex; gap: 4px; background: var(--paper-2); border-radius: var(--radius-full); padding: 4px; margin: 0 auto 20px; }
.dir-interval-toggle label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--radius-full); cursor: pointer; font-size: .9rem; font-weight: 600; }
.dir-interval-toggle label.is-on { background: var(--surface); box-shadow: var(--shadow-sm); }
.dir-interval-toggle input { position: absolute; opacity: 0; width: 0; }
.dir-save { font-size: .7rem; color: var(--pitch); background: var(--pitch-100); border-radius: var(--radius-full); padding: 1px 7px; }
.dir-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 22px; }
.dir-plan { display: block; border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 18px; cursor: pointer; position: relative; }
.dir-plan.is-selected { border-color: var(--pitch); box-shadow: var(--shadow); }
.dir-plan input { position: absolute; top: 16px; right: 16px; }
.dir-plan-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.dir-plan-price { display: block; margin: 6px 0; }
.dir-plan-mo { font-size: 1.5rem; font-weight: 700; color: var(--pitch-dark); }
.dir-plan-mo small { font-size: .8rem; font-weight: 500; color: var(--ink-3); }
.dir-plan-yr { display: block; font-size: .8rem; }
.dir-plan-blurb { color: var(--ink-2); font-size: .9rem; }
.dir-plan-feats { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.dir-plan-feats li { position: relative; padding-left: 22px; font-size: .88rem; color: var(--ink-2); }
.dir-plan-feats li > .ic-li { position: absolute; left: 0; top: .2em; margin: 0; }
.dir-confirm-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.dir-confirm-price strong { font-size: 1.6rem; color: var(--pitch-dark); }

@media (max-width: 860px) {
  .dir-listing-grid { grid-template-columns: 1fr; }
  .dir-listing-side { position: static; }
}

/* Admin directory stats row */
.dir-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 6px; }
.dir-admin-stats .card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.dir-admin-stats .card strong { font-size: 1.6rem; font-family: var(--font-display); color: var(--pitch-dark); }
.dir-admin-stats a.card:hover { border-color: var(--pitch-200); }

/* Directory: autocomplete + list page */
.dir-hero--compact { padding: 40px 0 30px; }
.dir-ac { position: relative; }
.dir-search-ac { flex: 1 1 220px; }
.dir-search-ac .dir-ac-input { width: 100%; }
.dir-ac-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; max-height: 340px; overflow-y: auto; }
.dir-ac-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border-2); padding: 10px 14px; cursor: pointer; font: inherit; }
.dir-ac-item:last-child { border-bottom: 0; }
.dir-ac-item:hover, .dir-ac-item.is-active { background: var(--pitch-100); }
.dir-ac-main { display: block; font-weight: 600; color: var(--ink); }
.dir-ac-sub { display: block; font-size: .8rem; color: var(--ink-3); }
.dir-list-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.dir-list-block .dir-ac-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; }
.dir-or { display: flex; align-items: center; text-align: center; gap: 14px; color: var(--ink-3); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin: 22px 0; }
.dir-or::before, .dir-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ==========================================================================
   Directory: maps, near-me, unified form controls
   ========================================================================== */

/* Maps */
.dir-map-panel { margin: 4px 0 22px; }
.dir-map { height: 380px; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; position: relative; z-index: 0; background: var(--paper-2); }
.dir-map--single { height: 210px; margin-top: 14px; }
.dir-map-note { font-size: .82rem; color: var(--ink-3); margin: 8px 2px 0; }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--font); }
.leaflet-popup-content a { color: var(--pitch-dark); font-weight: 700; text-decoration: none; }
.leaflet-popup-content a:hover { text-decoration: underline; }
.dir-map-pop-cat { color: var(--ink-3); font-size: .8rem; }
.leaflet-container { font: inherit; }

/* Near-me controls */
.dir-hero-near { margin-top: 14px; }
.dir-near-link { background: none; border: 0; color: #cfe7d8; cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.dir-near-link:hover { color: #fff; }
.dir-card-dist { display: inline-block; margin-left: 8px; background: var(--pitch-100); color: var(--pitch-dark); font-family: var(--font-mono); font-size: .66rem; padding: 1px 8px; border-radius: var(--radius-full); vertical-align: middle; }

/* -- Unified form controls ------------------------------------------------- */
/* One consistent look for every text input, select and textarea across the
   directory and the shared form cards: same border, radius, padding + a pitch
   focus ring. */
.dir-filter-bar input[type=search], .dir-filter-bar input[type=text], .dir-filter-bar select,
.dir-list-block .dir-ac-input,
.field input, .field select, .field textarea,
.form-card input:not([type=checkbox]):not([type=radio]), .form-card select, .form-card textarea,
.dir-enquire-form input, .dir-enquire-form textarea,
.dir-review-form input, .dir-review-form select, .dir-review-form textarea {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3;            /* neat input height - do NOT inherit the 1.65 body leading */
  color: var(--ink);
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
/* Selects: keep the value on one tidy line with room for the chevron. */
.dir-filter-bar select, .field select, .form-card select, .dir-review-form select, .dir-search select {
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.dir-filter-bar input[type=search]:focus, .dir-filter-bar input[type=text]:focus, .dir-filter-bar select:focus,
.dir-list-block .dir-ac-input:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.dir-enquire-form input:focus, .dir-enquire-form textarea:focus,
.dir-review-form input:focus, .dir-review-form select:focus, .dir-review-form textarea:focus,
.dir-search input[type=search]:focus, .dir-search select:focus {
  border-color: var(--pitch);
  box-shadow: 0 0 0 3px rgba(10, 122, 63, .16);
  outline: none;
}
/* Block-level (stacked) inputs fill their field */
.field input, .field select, .field textarea,
.form-card input:not([type=checkbox]):not([type=radio]), .form-card select, .form-card textarea,
.dir-list-block .dir-ac-input,
.dir-enquire-form input, .dir-enquire-form textarea,
.dir-review-form input, .dir-review-form select, .dir-review-form textarea { width: 100%; }

/* Consistent custom chevron for every select */
.dir-filter-bar select, .field select, .form-card select, .dir-review-form select, .dir-search select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 36px;
}
/* Hero search keeps its white fill on the dark hero but matches the shape */
.dir-search input[type=search], .dir-search select { border: 1.5px solid transparent; }

/* ==========================================================================
   Directory: home teaser, cross-promo, listing content polish
   ========================================================================== */

/* Homepage directory teaser */
.dir-home-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: center; }
.dir-home h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 6px 0 10px; }
.dir-home-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.dir-home-cats a { background: var(--pitch-100); color: var(--pitch-dark); border-radius: var(--radius-full); padding: 6px 14px; font-size: .86rem; text-decoration: none; font-weight: 600; transition: background .15s; }
.dir-home-cats a:hover { background: var(--pitch-200); }
.dir-home-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.dir-home-art { display: flex; align-items: center; justify-content: center; }
.dir-home-art span { color: var(--pitch); width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, var(--pitch-100), var(--pitch-200)); border-radius: 50%; box-shadow: var(--shadow); }

/* Cross-promo band (directory -> free assessment) */
.dir-crosspromo { background: linear-gradient(150deg, var(--pitch-dark), var(--pitch-ink)); color: #eaf5ee; }
.dir-crosspromo-in { max-width: var(--wrap); width: 92%; margin: 0 auto; padding: 40px 0; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.dir-crosspromo h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 6px 0 8px; }
.dir-crosspromo p { color: #cfe7d8; max-width: 60ch; margin: 0; }
.dir-crosspromo .btn { flex: 0 0 auto; }

/* Listing prose + FAQ readability */
.dir-prose p { margin: 0 0 12px; }
.dir-prose p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .dir-home-grid { grid-template-columns: 1fr; }
  .dir-home-art { display: none; }
  .dir-crosspromo-in { padding: 30px 0; }
}

/* External (Google) rating trust signal */
.dir-grating { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.dir-gstar { color: #f5b301; fill: currentColor; }
.dir-gsrc { color: var(--ink-3); font-weight: 400; font-size: .76rem; }
.dir-grating--lg { font-size: .98rem; margin: 4px 0 0; }
.dir-grating--lg .dir-gsrc { font-size: .85rem; }

/* ==========================================================================
   Directory look & feel polish
   ========================================================================== */
.dir-card { transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.dir-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pitch), var(--lime)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; opacity: 0; transition: opacity .16s; pointer-events: none; }
.dir-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--pitch-200); }
.dir-card:hover::after, .dir-card--featured::after { opacity: 1; }

/* Listing hero band */
.dir-listing-head { background: linear-gradient(160deg, var(--pitch-100), var(--surface) 72%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 6px; }

/* Owner claim strip on unclaimed listings */
.dir-owner-strip { background: var(--pitch-ink); color: #eaf5ee; }
.dir-owner-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; font-size: .92rem; }
.dir-owner-strip strong { color: #fff; }
.dir-owner-strip .btn { flex: 0 0 auto; }

/* ==========================================================================
   Directory: vetted badge, report form, provider dashboard
   ========================================================================== */
.dir-vetted { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--pitch-100); color: var(--pitch-dark); border: 1px solid var(--pitch-200);
  font-size: .78rem; font-weight: 600; text-decoration: none; line-height: 1; }
.dir-vetted:hover { background: var(--pitch-200); }
.dir-vetted__i { font-size: .9em; }

/* Report / correction form on a listing */
.dir-report { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 18px; }
.dir-report summary { cursor: pointer; color: var(--ink-3); font-size: .88rem; list-style: none; }
.dir-report summary::-webkit-details-marker { display: none; }
.dir-report summary .ic { margin-right: 2px; }
.dir-report[open] summary { color: var(--ink-2); margin-bottom: 12px; }
.dir-report form { display: grid; gap: 10px; max-width: 480px; }
.dir-report .field-row { display: grid; gap: 10px; }
@media (min-width: 560px) { .dir-report .field-row { grid-template-columns: 1fr 1fr; } }

/* Provider dashboard */
.dir-prov { display: grid; gap: 20px; }
.dir-prov-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 20px 22px; }
.dir-prov-card h2 { margin: 0 0 4px; font-size: 1.15rem; }
.dir-prov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dir-prov-leads { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.dir-prov-leads li { padding: 10px 12px; background: var(--paper-2); border-radius: var(--radius); font-size: .9rem; }
.dir-prov-share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.dir-prov-share input { flex: 1 1 240px; font-family: var(--font-mono, monospace); font-size: .82rem; }
.dir-prov-empty { color: var(--ink-3); font-size: .9rem; }

/* ==========================================================================
   Directory iterations: a11y utilities, trust-led cards, filters, sticky CTA
   ========================================================================== */

/* Visually-hidden (screen-reader only) utility + skip link (WCAG 2.4.1) */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 200; background: var(--pitch-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top .12s var(--ease); }
.skip-link:focus { top: 0; }
/* Keep a visible focus ring everywhere (WCAG 2.4.7) - never strip it. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--lime-deep); outline-offset: 2px; border-radius: 4px;
}

/* Card: optional photo (fixed aspect ratio, no CLS) */
.dir-card-photo { display: block; margin: -18px -18px 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.dir-card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Card: badge cluster */
.dir-card-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dir-badge { font-size: .7rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.dir-badge--vetted { background: var(--pitch-100); color: var(--pitch-dark); border: 1px solid var(--pitch-200); }
.dir-badge--verified { background: rgba(10,122,63,.10); color: var(--pitch-dark); }
.dir-badge--claimed { background: var(--paper-2); color: var(--ink-3); }

/* Card: trust row (rating + count + distance together) */
.dir-card-trust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; min-height: 20px; }
.dir-card-trust .dir-card-dist { margin-left: 0; background: none; color: var(--ink-3); font-family: inherit; font-size: .8rem; padding: 0; }
.dir-card-trust .dir-card-loc { font-size: .8rem; }
.dir-noreviews { font-size: .78rem; color: var(--ink-3); }
.dir-card-accred { font-size: .74rem; color: var(--pitch-dark); font-weight: 600; }
.dir-price--muted { color: var(--ink-3); font-style: italic; }

/* Filter bar (accessible, grouped) */
.dir-filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.dir-field-inline { flex: 1 1 160px; min-width: 0; }
.dir-field-inline > span.vh { position: absolute; }
/* Make the control fill its cell. Without this a text/search input falls back
   to its intrinsic ~232px default width and overflows the flex cell, colliding
   with the next field (the "Name" search box bug). */
.dir-field-inline > input, .dir-field-inline > select { width: 100%; }
.dir-filter-toggles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.dir-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--ink-2); cursor: pointer; min-height: 24px; }
.dir-toggle input { width: 18px; height: 18px; accent-color: var(--pitch); }
.dir-clear { font-size: .85rem; color: var(--pitch-dark); text-decoration: underline; }
.dir-result-count { margin: 16px 0 12px; color: var(--ink-2); }

/* Applied-filter chips */
.dir-active-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.dir-active-filters .dir-af-label { font-size: .82rem; color: var(--ink-3); }
.dir-af-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--pitch-100); color: var(--pitch-dark); border: 1px solid var(--pitch-200); font-size: .8rem; padding: 4px 10px; border-radius: var(--radius-full); text-decoration: none; min-height: 24px; }
.dir-af-chip .ic.dir-af-x { color: var(--ink-3); margin-left: 1px; }
.dir-af-chip:hover { background: var(--pitch-200); }

/* Better empty state (recovery, not a dead end) */
.dir-empty { text-align: center; padding: 40px 20px; background: var(--paper-2); border-radius: var(--radius-lg); }
.dir-empty h2 { font-size: 1.15rem; margin: 0 0 8px; }
.dir-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* Enquiry access: mobile bottom bar (desktop sidebar scrolls naturally - a
   sticky sidebar taller than the viewport scroll-janks, so we don't stick it). */
.dir-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface);
  border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(5,38,22,.08); }
.dir-mobile-cta .btn { flex: 1; }
@media (max-width: 920px) {
  .dir-mobile-cta { display: flex; }
  main { padding-bottom: 72px; }
}

/* AEO cost / how-to-choose content block */
.dir-guide { margin-top: 8px; }
.dir-guide h2 { font-size: 1.3rem; }
.dir-guide-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .92rem; }
.dir-guide-table th, .dir-guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.dir-guide-table th { color: var(--ink-3); font-weight: 600; width: 40%; }

/* Freshness / listed-since line */
.dir-freshness { font-size: .8rem; color: var(--ink-3); margin: 10px 0 0; }

/* Sibling category cross-links */
.dir-siblings { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dir-siblings a { font-size: .82rem; background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; border-radius: var(--radius-full); text-decoration: none; color: var(--ink-2); min-height: 24px; display: inline-flex; align-items: center; gap: 6px; }
.dir-siblings a:hover { border-color: var(--pitch-200); color: var(--pitch-dark); }

/* Reserve map height so tiles loading never shift layout (CLS) */
.dir-map { min-height: 220px; background: var(--paper-2); border-radius: var(--radius); }
.dir-map--single { min-height: 200px; }

@media (prefers-reduced-motion: reduce) {
  .dir-card, .dir-card::after, .skip-link { transition: none; }
}

/* ==========================================================================
   Directory lead-gen: "get quotes" engine + provider analytics
   ========================================================================== */

/* Quotes CTA band (hub) */
.dir-quotes-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(160deg, var(--pitch-100), var(--surface) 75%); border: 1px solid var(--pitch-200);
  border-radius: var(--radius-lg); padding: 24px 26px; }
.dir-quotes-band h2 { margin: 4px 0 6px; }
.dir-quotes-band p { margin: 0; max-width: 46ch; }
.dir-quotes-band .btn { flex: 0 0 auto; }

/* Inline "get quotes" prompt on category pages */
.dir-quotes-inline { margin: 0 0 14px; font-size: .9rem; color: var(--ink-2); }
.dir-quotes-inline a { color: var(--pitch-dark); font-weight: 600; }

/* Quotes form */
.dir-quotes-steps { list-style: none; display: flex; gap: 12px; flex-wrap: wrap; padding: 0; margin: 0 0 22px; justify-content: center; }
.dir-quotes-steps li { background: var(--paper-2); border-radius: var(--radius-full); padding: 8px 16px; font-size: .88rem; color: var(--ink-2); }
.dir-quotes-steps strong { color: var(--pitch-dark); }
.dir-quotes-form .dir-quotes-rule { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.btn-block { display: block; width: 100%; text-align: center; }

/* Provider dashboard analytics strip + sparkline */
.dir-prov-stats { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: 14px 0 4px; }
.dir-prov-stat { flex: 1 1 120px; min-width: 100px; background: var(--paper-2); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.dir-prov-stat-n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--pitch-dark); line-height: 1; }
.dir-prov-stat-l { font-size: .76rem; color: var(--ink-3); }
.dir-prov-stat--muted .dir-prov-stat-n { color: var(--ink-3); }
.dir-prov-spark { flex: 1 1 140px; min-width: 120px; display: flex; align-items: flex-end; padding: 12px 14px; background: var(--paper-2); border-radius: var(--radius); }
.dir-prov-spark svg { width: 100%; height: 100%; max-height: 40px; }
.dir-prov-stats-note { font-size: .76rem; color: var(--ink-3); margin: 4px 0 0; }

@media (max-width: 560px) {
  .dir-quotes-band { text-align: center; justify-content: center; }
}

/* ==========================================================================
   Get-quotes visibility + football-party service tagging
   ========================================================================== */

/* Prominent get-quotes CTA band on category pages */
.dir-quotes-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(160deg, var(--pitch-100), var(--surface) 78%); border: 1px solid var(--pitch-200);
  border-radius: var(--radius-lg); padding: 14px 18px; margin: 0 0 18px; }
.dir-quotes-cta span { color: var(--ink-2); font-size: .92rem; }
.dir-quotes-cta strong { color: var(--ink); }
.dir-quotes-cta .btn { flex: 0 0 auto; }
.dir-quotes-cta .dir-quotes-cta-i { display: inline-flex; vertical-align: middle; color: var(--pitch); margin-right: 4px; }

/* Get-quotes card in the listing sidebar */
.dir-quotes-side { background: var(--pitch-100); border: 1px solid var(--pitch-200); border-radius: var(--radius-lg); padding: 18px 20px; }
.dir-quotes-side p { margin: 0 0 12px; font-size: .9rem; color: var(--ink-2); }
.dir-quotes-side strong { color: var(--pitch-dark); }

/* Quick-add service chips (provider dashboard) */
.dir-service-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.dir-service-chips-l { font-size: .8rem; color: var(--ink-3); margin-right: 2px; }
.dir-service-chip { font-size: .78rem; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2); cursor: pointer; min-height: 24px; transition: border-color .15s, color .15s; }
.dir-service-chip:hover { border-color: var(--pitch-200); color: var(--pitch-dark); background: var(--pitch-100); }

/* Quotes band incorporated into the search landing state */
.dir-search-hint { margin: 6px 0 18px; }
.dir-quotes-band--search { margin-top: 4px; }

/* ==========================================================================
   Articles hub + nav dropdown
   ========================================================================== */

/* Nav "Articles" panel - WAI-ARIA APG disclosure navigation: a button with
   aria-expanded opens it (main.js adds .is-js and drives click, hover intent,
   Escape). Without JS it falls back to CSS hover/focus-within. The panel hangs
   off .nav-inner (right-aligned to the content edge); the dropdown wrapper spans
   the full bar height and a bridge covers the float gap, so the pointer never
   crosses dead space on the way down (WCAG 1.4.13 hoverable). */
.nav-inner { position: relative; }
.nav-dropdown { display: flex; align-items: center; align-self: stretch; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; font: inherit; }
.nav-caret { margin-top: 1px; transition: transform .25s var(--ease); }
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 28px; z-index: 60;
  width: min(860px, calc(100% - 56px)); /* container-relative: 100vw counts the scrollbar */
  display: grid; grid-template-columns: 236px 1fr;
  /* NN/g: a shadow alone is too subtle an edge - pair it with a real border. */
  background: var(--surface); border: 1px solid rgba(7, 92, 48, 0.2); border-radius: var(--radius-lg);
  box-shadow: 0 28px 60px -22px rgba(5, 38, 22, 0.38), 0 2px 8px rgba(5, 38, 22, 0.06);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .28s var(--ease-expo), visibility 0s .28s;
}
.nav-dropdown-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:not(.is-js):hover .nav-dropdown-menu,
.nav-dropdown:not(.is-js):focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--ease), transform .28s var(--ease-expo), visibility 0s;
}
.nav-dropdown-intro {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px;
  background: linear-gradient(170deg, var(--pitch-deep), var(--pitch-ink));
  border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
}
/* Same film grain as the mobile menu panel, so both menus read as one family. */
.nav-dropdown-intro::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: var(--grain); opacity: 0.1; mix-blend-mode: overlay;
}
/* The site ring (--lime-deep) is too dark to see on the pitch-green column. */
.nav-dropdown-intro a:focus-visible { outline-color: var(--lime); }
.nav-dropdown-eyebrow { font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.nav-dropdown-heading { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.nav-dropdown-text { margin: 0; font-size: .86rem; font-weight: 400; line-height: 1.5; color: #c4dfce; }
.nav-dropdown-all {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--lime); color: var(--pitch-ink); font-size: .88rem; font-weight: 700;
  transition: background-color .15s var(--ease);
}
.nav-dropdown-all:hover { background: #b8ef5c; }
.nav-dropdown-list { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; }
.nav-dropdown-link {
  display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 12px 14px;
  border-radius: var(--radius); color: var(--ink); font-weight: 400;
  transition: background-color .15s var(--ease);
}
.nav-dropdown-link:hover { background: var(--pitch-100); }
.nav-dropdown-link:focus-visible { border-radius: var(--radius); }
/* "You are here" must differ from hover (NN/g): tint + a pitch rule on the left. */
.nav-dropdown-link[aria-current="page"] { background: var(--pitch-100); box-shadow: inset 3px 0 0 var(--pitch); }
.nav-dropdown-link:hover .nav-dropdown-title, .nav-dropdown-link[aria-current="page"] .nav-dropdown-title { color: var(--pitch-dark); }
.nav-dropdown-cat { order: -1; font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pitch); }
.nav-dropdown-mins { color: var(--ink-3); font-weight: 500; letter-spacing: .06em; }
.nav-dropdown-title { font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--ink); transition: color .15s var(--ease); }
.nav-dropdown-sub { display: block; margin-top: 3px; font-size: .84rem; font-weight: 400; line-height: 1.35; color: var(--ink-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Article cards + grid */
.article-cat { display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pitch); font-weight: 600; }
.article-meta { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 8px; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 28px; }
.article-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--pitch-200); }
.article-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.article-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.article-card-body h3 { font-size: 1.05rem; line-height: 1.25; margin: 2px 0 0; }
.article-card-body .muted { font-size: .9rem; flex: 1; }

/* Featured article (top of the list) */
.article-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; margin-top: 28px; transition: box-shadow .16s var(--ease), border-color .16s; }
.article-feature:hover { box-shadow: var(--shadow); border-color: var(--pitch-200); }
.article-feature-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.article-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-feature-body { padding: 28px 30px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.article-feature-body h2 { font-size: 1.5rem; line-height: 1.15; margin: 4px 0; }
@media (max-width: 720px) { .article-feature { grid-template-columns: 1fr; } }

/* Article page */
.article-page { padding-top: 30px; }
.article-head h1 { margin: 8px 0 10px; }
.article-hero { margin: 8px 0 26px; border-radius: var(--radius-lg); overflow: hidden; }
.article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.article-body { font-size: 1.05rem; }
.article-body p { margin: 0 0 16px; }
.article-body ul { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body h2 { margin-top: 30px; }
.article-body a:not(.btn) { color: var(--pitch-dark); text-decoration: underline; text-underline-offset: 2px; }
/* Buttons must always keep their own readable label - never inherit prose link
   colour/underline (fixes the dark-on-dark "Get your free score" button). */
.article-body a.btn, .dir-prose a.btn { text-decoration: none; }
/* Scoped to the prose it was written for. As a global `.btn.btn-primary` it had the same
   specificity as the lime variants declared earlier (.hero-cta / .cta-panel / .unlock
   .btn-primary) and, coming later, turned their dark labels white on lime (1.5:1). */
.article-body a.btn-primary, .dir-prose a.btn-primary { color: #fff; }
.article-inline-cta .btn-primary, .article-cta .btn-primary { background: var(--pitch); color: #fff; }
.article-inline-cta .btn-primary:hover, .article-cta .btn-primary:hover { background: var(--pitch-dark); }
.article-inline-cta { margin: 30px 0 8px; padding: 22px 24px; background: var(--pitch-100); border: 1px solid var(--pitch-200); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.article-inline-cta p { margin: 0; flex: 1 1 300px; font-size: .98rem; }
.article-inline-cta .btn { flex: 0 0 auto; }

/* Shared CTA band (articles list foot) */
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.article-cta h2 { margin: 4px 0 6px; }
.article-cta p { margin: 0; max-width: 46ch; }

/* Article layout polish + inline images */
.article-page { padding-top: 26px; }
.article-body { max-width: 46rem; margin-left: auto; margin-right: auto; }
.article-body h2 { margin-top: 36px; font-size: 1.4rem; }
.article-body h2.dir-h2 { scroll-margin-top: 90px; }
.article-body p { line-height: 1.75; }
.article-body ul li { line-height: 1.65; }
.article-inline-img { margin: 28px 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.article-inline-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.article-inline-img figcaption { font-size: .82rem; color: var(--ink-3); padding: 9px 14px; background: var(--surface); }
.article-hero { margin: 6px 0 30px; box-shadow: var(--shadow-sm); }

/* Article share row + cross-links */
.article-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.article-share-l { font-size: .82rem; color: var(--ink-3); }
.article-share-btn { font: inherit; font-size: .82rem; padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); text-decoration: none; cursor: pointer; min-height: 24px; display: inline-flex; align-items: center; transition: border-color .15s, color .15s, background .15s; }
.article-share-btn:hover { border-color: var(--pitch-200); color: var(--pitch-dark); background: var(--pitch-100); }
.article-dir-link { margin: 22px 0 0; font-size: .95rem; color: var(--ink-2); }
.article-dir-link a { color: var(--pitch-dark); font-weight: 600; }
/* Related-reading line on directory category pages */
.dir-related-read { margin: 8px 0 0; font-size: .9rem; color: var(--ink-2); }
.dir-related-read a { color: var(--pitch-dark); font-weight: 600; }

/* ==========================================================================
   Icons - one modern line set site-wide (src/icons.php). Never emoji.
   ========================================================================== */
.ic { display: inline-block; flex: 0 0 auto; vertical-align: -0.16em; }
.dir-cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--pitch-100); color: var(--pitch); }
.dir-cat-pill .ic, .dir-af-chip .ic, .dir-vetted .ic { color: var(--pitch); }
.dir-badge { display: inline-flex; align-items: center; gap: 4px; }
.dir-verified { display: inline-flex; align-items: center; gap: 4px; }
/* Short single-purpose rows can flex; lines that mix text + links (location,
   freshness, related reading) stay in normal text flow so they wrap as prose
   instead of splitting into flex columns on narrow screens. */
.dir-card-loc, .dir-card-accred, .dir-map-link { display: inline-flex; align-items: center; gap: 6px; }
.dir-card-loc .ic, .dir-listing-loc .ic, .dir-freshness .ic, .dir-related-read .ic { color: var(--pitch); }
/* Icon tiles/badges must never be squashed by a flex row. */
.dir-cat-ico, .dir-cat-icon, .lock-badge { flex: 0 0 auto; }
.dir-toggle span { display: inline-flex; align-items: center; gap: 6px; }
.dir-toggle span .ic { color: var(--pitch); }
.dir-near-link { display: inline-flex; align-items: center; gap: 6px; }
.ic-li { color: var(--pitch); margin-right: 6px; vertical-align: -0.2em; }
.ic-h1 { color: var(--pitch); vertical-align: -0.12em; margin-right: 4px; }
/* The set's 2px stroke is drawn on a 24 grid, so it scales with size; at the
   88px home illustration that is ~7px and reads chunky. Keep big icons light. */
.dir-home-art .ic { stroke-width: 1.25; }

/* Icons drawn in CSS (pseudo-elements, form controls) use the same Lucide
   geometry via masks - tinted by background-color, never a font glyph. */
:root {
  --i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* Filled Lucide star, left-aligned in its tile so the 2px gap trails it. */
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}

/* Star rating bar (rating_stars() in src/icons.php): five set stars, --fill px of
   gold over a neutral track. Decorative - the number is always printed beside it. */
.stars {
  display: inline-block; flex: 0 0 auto; vertical-align: -0.12em;
  width: calc(var(--s) * 5 + 8px); height: var(--s);
  background: linear-gradient(90deg, #f5b301 var(--fill), #d7dccb var(--fill));
  -webkit-mask: var(--i-star) 0 0 / calc(var(--s) + 2px) var(--s) repeat-x;
  mask: var(--i-star) 0 0 / calc(var(--s) + 2px) var(--s) repeat-x;
}

/* Disclosure rows: the set's chevron instead of the native triangle marker. */
/* Chevron is absolutely placed (not flex) so mixed summary content such as
   "<strong>Enquiries</strong> (3)" keeps flowing as one line of text. */
.dir-faq summary, .dir-prov-section > summary { list-style: none; cursor: pointer; position: relative; padding-right: 30px; }
.dir-faq summary::-webkit-details-marker, .dir-prov-section > summary::-webkit-details-marker { display: none; }
.dir-faq summary::after, .dir-prov-section > summary::after {
  content: ''; position: absolute; right: 2px; top: 50%; margin-top: -9px; width: 18px; height: 18px; background-color: var(--ink-3);
  -webkit-mask: var(--i-chevron-down) center / contain no-repeat; mask: var(--i-chevron-down) center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.dir-faq details[open] > summary::after, .dir-prov-section[open] > summary::after { transform: rotate(180deg); }

/* Maps: brand pin + set-style zoom controls. Scoped under .dir-map because
   leaflet.css is injected after main.css and would win equal-specificity ties. */
.dir-pin { color: var(--pitch); background: none; border: 0; filter: drop-shadow(0 2px 3px rgba(5, 38, 22, 0.35)); }
.dir-pin svg { display: block; }
.dir-map .leaflet-bar a { display: flex; align-items: center; justify-content: center; color: var(--ink); }
.dir-map .leaflet-bar a:hover { color: var(--pitch-dark); background-color: var(--pitch-100); }
.dir-map .leaflet-popup-content a { color: var(--pitch-dark); font-weight: 700; text-decoration: none; }
.dir-map .leaflet-popup-content a:hover { text-decoration: underline; }
.dir-map .leaflet-control-attribution a { color: var(--pitch-dark); }

/* Training kit links to our own shop (decision 085) */
.kit-links { font-size: 0.9rem; margin: 12px 0 0; }
.kit-links a { color: var(--pitch-dark); font-weight: 600; }

/* Footer: scrolling preview of the training kit from our own shop (decision 085).
   The track holds the list twice and moves by exactly half its width, so the loop is seamless
   (spacing is padding on each card, never gap, which would break the half). Pauses on hover,
   keyboard focus or the Pause control; no motion for prefers-reduced-motion. */
.footer-kit { width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; }
.footer-kit-title { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8db99c; }
.kit-scroller {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.kit-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: kit-scroll 70s linear infinite; }
.kit-scroller:hover .kit-track, .kit-scroller:focus-within .kit-track, #kit-pause:checked ~ .kit-scroller .kit-track { animation-play-state: paused; }
@keyframes kit-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kit-card { padding-right: 14px; }
.kit-card a { display: block; width: 96px; color: #cbe4d3; font-size: 0.78rem; font-weight: 600; line-height: 1.3; transition: color 0.2s var(--ease); }
.kit-card a:hover, .kit-card a:focus-visible { color: var(--lime); }
.kit-card img { display: block; width: 96px; height: 96px; margin-bottom: 7px; border-radius: 12px; background: #fff; object-fit: cover; }
.footer-kit-note { margin: 0; color: #8db99c; font-size: 0.8rem; line-height: 1.5; }
.footer-kit-note a { color: #cbe4d3; font-weight: 600; text-decoration: underline; }
.footer-kit-note a:hover { color: var(--lime); }
.footer-kit-pause { margin-left: 6px; color: #8db99c; text-decoration: underline; cursor: pointer; }
#kit-pause:checked ~ .footer-kit-note .footer-kit-pause { color: var(--lime); }
#kit-pause:focus-visible ~ .footer-kit-note .footer-kit-pause { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .kit-track { animation: none; }
  .kit-scroller { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .kit-dup, .footer-kit-pause { display: none; }
}

/* Kit hover cards (decision 085): thumbnail, name, one-line description and the shop, above
   the item name on hover or keyboard focus. Hidden with visibility (out of the reading order;
   aria-describedby still gives the description). A transparent bridge keeps the card open
   while the pointer moves onto it. Escape adds .kit-tips-off (main.js). Not on touch-only. */
.kit-hover { position: relative; }
.kit-tip {
  position: absolute; z-index: 60; left: -10px; bottom: calc(100% + 12px);
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start;
  width: 300px; padding: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(7, 92, 48, 0.14);
  box-shadow: 0 1px 2px rgba(6, 51, 29, 0.08), 0 22px 48px -14px rgba(6, 51, 29, 0.38);
  color: var(--ink-2); font-size: 0.82rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px) scale(0.98); transform-origin: 30px 100%;
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
}
.kit-tip::before {
  content: ''; position: absolute; left: 24px; bottom: -7px; width: 13px; height: 13px;
  background: inherit; border-right: 1px solid rgba(7, 92, 48, 0.14); border-bottom: 1px solid rgba(7, 92, 48, 0.14);
  transform: rotate(45deg); border-bottom-right-radius: 3px;
}
.kit-tip::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.kit-hover:hover .kit-tip, .kit-hover:focus-within .kit-tip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.18s var(--ease) 0.06s, transform 0.22s var(--ease) 0.06s, visibility 0s linear 0s;
}
.kit-tips-off .kit-tip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.kit-tip img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(16, 22, 9, 0.06); }
.kit-tip-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kit-tip-body strong { color: var(--pitch-ink); font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.kit-tip-text { color: var(--ink-2); }
.kit-tip-shop { margin-top: 5px; color: var(--pitch); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; }
@media (hover: none) { .kit-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .kit-tip, .kit-hover:hover .kit-tip, .kit-hover:focus-within .kit-tip { transition: none; transform: none; } }