/* ==========================================================================
   BRISCO Gorseinon 10K — main stylesheet
   Ported 1:1 from the approved HTML prototype (Gorseinon 10K.dc.html).
   Values (clamp ranges, colours, spacing, timings) are taken verbatim from
   the prototype's inline styles. Do not "tidy" them without a design sign-off.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --red:   #ED1C24;
  --ink:   #050505;
  --cream: #E8E3D9;
  --grey:  #B8B4AB;
  --white: #FFFFFF;
  --field: #F7F5F0;

  --hd:   'Archivo Narrow', 'Arial Narrow', sans-serif;
  --disp: 'Big Shoulders Display', 'Archivo Narrow', sans-serif;
  --body: Karla, sans-serif;
  --hand: 'Permanent Marker', cursive;

  --gutter: clamp(18px, 4vw, 56px);
  --shell:  1400px;

  /* Fixed-header offset: 12px padding top + 17px bottom + logo */
  --header-h: calc(29px + clamp(66px, 8.1vw, 87px));

  /* How far the header's torn edge hangs below the bar. Sections that sit
     under the header use this to keep content clear of the tear. */
  --tear-h: clamp(24px, 2.6vw, 38px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--ink); }

img { max-width: 100%; }

::selection { background: var(--red); color: #fff; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

button { font: inherit; }

.screen-reader-text {
  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:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  width: auto; height: auto; clip: auto;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; font-family: var(--disp); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

.shell { max-width: var(--shell); margin: 0 auto; }

/* --------------------------------------------------------------------------
   3. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--hd);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
}

.label {
  font-family: var(--hd);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

.marker {
  font-family: var(--hand);
  color: var(--red);
}

/* --------------------------------------------------------------------------
   4. Buttons / links
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn--red {
  background: var(--red);
  color: #fff;
  font-size: clamp(17px, 1.8vw, 21px);
  padding: 18px 34px;
}
.btn--red:hover { background: #fff; color: var(--ink); }

.btn--ghost-cream {
  border: 2px solid var(--cream);
  color: var(--cream);
  font-size: clamp(17px, 1.8vw, 21px);
  padding: 16px 30px;
}
.btn--ghost-cream:hover { background: var(--cream); color: var(--ink); }

.btn--ghost-white {
  border: 2px solid #fff;
  color: #fff;
  font-size: clamp(17px, 1.8vw, 21px);
  padding: 18px 28px;
  justify-content: space-between;
  gap: 16px;
}
.btn--ghost-white:hover { background: #fff; color: var(--red); }

.btn--ink {
  background: var(--ink);
  color: #fff;
  font-size: clamp(18px, 1.9vw, 22px);
  padding: 20px 28px;
  justify-content: space-between;
  gap: 16px;
}
.btn--ink:hover { background: var(--cream); color: var(--ink); }

.link-rule {
  align-self: flex-start;
  font-family: var(--hd);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 5px;
  transition: color .18s ease, border-color .18s ease;
}
.link-rule:hover { color: var(--ink); border-bottom-color: var(--ink); }

.link-rule--cream {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
}
.link-rule--cream:hover { color: var(--red); border-bottom-color: var(--red); }

/* --------------------------------------------------------------------------
   5. Site header (fixed, shrinks on scroll)
   -------------------------------------------------------------------------- */
.header-spacer { height: var(--header-h); }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--cream);
}

/* The header's own torn bottom edge. It hangs below the bar and over whatever
   is beneath, so at the top of the page it reads as one continuous sheet with
   the hero, and on scroll the nav keeps its torn edge as it floats. */
/* This tile is cropped so row 0 is where the tear begins — no solid cream
   above it. That way the gap between the logo and the torn edge is exactly
   the header's bottom padding (17px), with 1px of overlap so the header's
   own cream fills the tear's highest pinholes. */
.site-header__tear {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  transform: translateY(calc(100% - 1px));
  height: var(--tear-h);
  background-image: url(../img/tear-paper-cream-edge.png);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 1600px 100%;
  pointer-events: none;
}

/* Sit below the WordPress admin bar for logged-in users. */
.admin-bar .site-header { top: 32px; }
.admin-bar { --admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar { --admin-bar-h: 46px; }
}

.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  /* 17px below the logo before the torn edge starts. */
  padding: 12px var(--gutter) 17px;
  transition: padding .22s ease;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}
.site-header.is-scrolled .site-header__inner { padding: 6px var(--gutter) 17px; }

.site-header__brand { display: flex; align-items: center; flex: 0 0 auto; }
.site-header__brand img {
  height: clamp(66px, 8.1vw, 87px);
  width: auto;
  display: block;
  transition: height .22s ease;
}
.site-header.is-scrolled .site-header__brand img { height: clamp(50px, 6vw, 64px); }

.site-header__brand .placeholder-frame {
  height: clamp(66px, 8.1vw, 87px);
  width: clamp(66px, 8.1vw, 87px);
  transition: height .22s ease, width .22s ease;
}
.site-header.is-scrolled .site-header__brand .placeholder-frame {
  height: clamp(50px, 6vw, 64px);
  width: clamp(50px, 6vw, 64px);
}

.site-header__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.5vw, 26px);
}
.site-header__nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 26px);
}
.site-header__nav a {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  padding: 7px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.site-header__nav a:hover { border-bottom-color: var(--red); }
.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a,
.site-header__nav .current-menu-ancestor > a { border-bottom-color: var(--red); }

.site-header__cta {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 17px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px clamp(16px, 2.2vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .18s ease;
}
.site-header__cta:hover { background: var(--ink); color: #fff; }

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid rgba(5, 5, 5, 0.25);
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
}


@media (max-width: 1099px) {
  .site-header__nav { display: none; }
  .site-header__burger { display: inline-flex; }
}

/* Drawer + overlay */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 5, 5, 0.55);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--ink);
  color: var(--cream);
  z-index: 95;
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  padding: 24px 26px 30px;
  overflow-y: auto;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.nav-drawer__wordmark {
  font-family: var(--hand);
  font-size: 20px;
  color: var(--red);
}
.nav-drawer__close {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(232, 227, 217, 0.3);
  color: var(--cream);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-drawer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav-drawer nav a {
  display: block;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--cream);
  padding: 13px 0;
  border-bottom: 1px solid rgba(232, 227, 217, 0.14);
}
.nav-drawer nav a:hover { color: var(--red); }
.nav-drawer__cta {
  margin-top: 26px;
  background: var(--red);
  color: #fff;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px;
  text-align: center;
}
.nav-drawer__cta:hover { color: #fff; background: var(--ink); }
.nav-drawer__meta {
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
}
.nav-drawer__meta a { color: var(--grey); border-bottom: 1px solid rgba(184, 180, 171, 0.4); }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Torn-paper edges + placeholder frames
   -------------------------------------------------------------------------- */
.tear {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
/* Hero: cream tears down from the header at the top, ink tears up into the
   next section at the bottom. */
.tear--hero-top    { top: 0;    height: clamp(34px, 4vw, 56px);  z-index: 3; }
.tear--hero-bottom { bottom: 0; height: clamp(46px, 5vw, 72px); z-index: 3; }

/* Real torn-paper edges (scanned artwork, alpha-matted from the stock EPS).
   Tiled rather than stretched, so the fibres stay the same size at any width;
   the tile is mirror-doubled, so repeat-x has no visible seam. */
.tear-paper {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: repeat-x;
  background-size: 1600px 100%;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}
.tear-paper--top {
  top: 0;
  height: clamp(38px, 4.4vw, 66px);
  background-image: url(../img/tear-paper-cream.png);
  background-position: left top;
}
.tear-paper--bottom {
  bottom: 0;
  height: clamp(44px, 5vw, 74px);
  background-image: url(../img/tear-paper-ink.png);
  background-position: left bottom;
}
/* Cream tearing upward — where a dark section gives way to the cream page. */
.tear-paper--cream-up {
  bottom: 0;
  height: clamp(38px, 4.4vw, 62px);
  background-image: url(../img/tear-paper-cream-up.png);
  background-position: left bottom;
}
/* Small strips inside cards. These lie over a photograph, so they use the
   fringe-only tiles: the full tile is ~62% solid cream, which at 30px hid a
   further 19px of the picture — enough to take the top off someone's head.
   A tighter horizontal tile keeps the fibres legible at this size. */
.tear-paper--card-top,
.tear-paper--card-bottom {
  height: 16px;
  background-size: 700px 100%;
  z-index: 2;
}
.tear-paper--card-top {
  top: 0;
  background-image: url(../img/tear-paper-cream-edge.png);
  background-position: left top;
}
.tear-paper--card-bottom {
  bottom: 0;
  background-image: url(../img/tear-paper-cream-up-edge.png);
  background-position: left bottom;
}

/* Small strips used inside cards */
.tear--top    { top: 0;    height: 26px; z-index: 2; }
.tear--bottom { bottom: 0; height: 26px; z-index: 2; transform: scaleY(-1); }

.placeholder-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--grey);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(5, 5, 5, 0.055) 0 10px,
      rgba(5, 5, 5, 0) 10px 20px);
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.22);
  color: rgba(5, 5, 5, 0.62);
  font-family: var(--hd);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px;
  line-height: 1.4;
}
.placeholder-frame--fill { position: absolute; inset: 0; }
.placeholder-frame--dark {
  background: #14110f;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(232, 227, 217, 0.06) 0 10px,
      rgba(232, 227, 217, 0) 10px 20px);
  box-shadow: inset 0 0 0 1px rgba(232, 227, 217, 0.2);
  color: rgba(232, 227, 217, 0.6);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  min-height: clamp(540px, 58vw, 760px);
  display: flex;
  align-items: center;
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 34%;
  display: block;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(97deg,
    rgba(5,5,5,0.95) 0%,
    rgba(5,5,5,0.90) 30%,
    rgba(5,5,5,0.76) 46%,
    rgba(5,5,5,0.40) 64%,
    rgba(5,5,5,0.14) 82%,
    rgba(5,5,5,0.08) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(84px, 9vw, 132px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.hero__copy {
  flex: 1 1 520px;
  min-width: min(300px, 100%);
  max-width: min(660px, 100%);
}
.hero__kicker {
  margin: 0 0 clamp(12px, 1.8vw, 20px);
  font-family: var(--hand);
  font-size: clamp(20px, 2.8vw, 32px);
  color: var(--red);
  transform: rotate(-2deg);
  transform-origin: left;
}
.hero__title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(46px, 6.2vw, 124px);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}
.hero__title em { font-style: normal; color: var(--red); }
.hero__rule {
  height: 3px;
  background: var(--red);
  width: min(260px, 56%);
  margin: clamp(20px, 2.6vw, 32px) 0;
}
.hero__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--cream);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3.2vw, 38px);
}

.date-badge {
  flex: 0 0 auto;
  margin-left: auto;
  width:  clamp(118px, 15vw, 170px);
  height: clamp(118px, 15vw, 170px);
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-9deg);
  box-shadow: 0 0 0 5px rgba(232, 227, 217, 0.9);
}
.date-badge__day {
  font-family: var(--hd);
  font-weight: 600;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.92;
}
.date-badge__num {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 62px);
  line-height: 0.85;
  margin: 2px 0;
}
.date-badge__month {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Ticker
   -------------------------------------------------------------------------- */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.ticker__track {
  display: flex;
  width: 200%;
  animation: tickerScroll 34s linear infinite;
}
.ticker__word {
  flex: 0 0 auto;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 22px;
  color: var(--cream);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
}

/* --------------------------------------------------------------------------
   9. Facts strip
   -------------------------------------------------------------------------- */
.facts {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(46px, 6vw, 90px) var(--gutter);
}
.facts__grid {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.fact { border-top: 3px solid var(--red); padding-top: 20px; }
.fact svg { display: block; margin: 0 0 14px; }
.fact__label { margin: 0 0 10px; }
.fact__value {
  margin: 0;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.02;
  text-transform: uppercase;
}
.fact__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   10. Section furniture
   -------------------------------------------------------------------------- */
.section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(52px, 7vw, 110px) var(--gutter);
}
.section--tight-top { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(34px, 4.4vw, 60px);
}
.section-head h2 {
  margin: 0;
  flex: 1 1 340px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.9;
  text-transform: uppercase;
}
.section-head p {
  margin: 0;
  flex: 1 1 300px;
  max-width: 42ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  text-wrap: pretty;
}
.accent { color: var(--red); }

/* --------------------------------------------------------------------------
   11. Race cards
   -------------------------------------------------------------------------- */
.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(26px, 3.4vw, 52px);
}
.race-card { display: flex; flex-direction: column; }
.race-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--grey);
}
.race-card__media img.race-card__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.race-card__num {
  position: absolute;
  top: 6px; left: 0;
  background: var(--red);
  color: #fff;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0.1em;
  padding: 9px 18px;
  z-index: 2;
  pointer-events: none;
}
.race-card__num--ink { background: var(--ink); color: var(--cream); }
.race-card h3 {
  margin: 24px 0 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 0.95;
  text-transform: uppercase;
}
.race-card__rule { height: 2px; background: var(--red); width: 70px; margin: 16px 0 18px; }
.race-card p {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  text-wrap: pretty;
}
.race-card .link-rule { margin-top: 22px; }

/* --------------------------------------------------------------------------
   12. Then / Now story
   -------------------------------------------------------------------------- */
.story__layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 4vw, 64px);
  align-items: flex-start;
}
.story__copy { flex: 1 1 400px; min-width: min(340px, 100%); }
.story__copy h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(40px, 5.8vw, 80px);
  line-height: 0.88;
  text-transform: uppercase;
}
.story__copy p {
  margin: 26px 0 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  text-wrap: pretty;
}
.story__quote {
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0 0 0 clamp(20px, 3vw, 34px);
  border-left: 3px solid var(--red);
}
.story__quote p {
  margin: 0;
  max-width: none;
  font-family: var(--hd);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
}
.story__quote footer {
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--hd);
  font-weight: 700;
  color: var(--ink);
  opacity: 0.65;
}

.polaroids {
  flex: 1 1 420px;
  min-width: min(340px, 100%);
  display: flex;
  flex-direction: column;
}
.polaroid {
  width: 64%;
  background: #fff;
  padding: 12px 12px 46px;
  box-shadow: 0 16px 34px -24px rgba(5, 5, 5, 0.55);
}
.polaroid__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--grey);
}
.polaroid__frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid__caption {
  margin: 12px 0 0;
  font-family: var(--hand);
  font-size: 16px;
  text-align: center;
}
.polaroid--then { align-self: flex-start; transform: rotate(-4deg); }
.polaroid--now {
  align-self: flex-end;
  margin-top: clamp(-40px, -4vw, -16px);
  transform: rotate(3.5deg);
  position: relative;
  z-index: 2;
}
.story__stamp {
  align-self: flex-start;
  margin-top: clamp(-46px, -5vw, -20px);
  margin-left: clamp(0px, 2vw, 26px);
  width:  clamp(140px, 17vw, 182px);
  height: clamp(140px, 17vw, 182px);
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-11deg);
  background: var(--cream);
  position: relative;
  z-index: 3;
}
.story__stamp span:first-child,
.story__stamp span:last-child {
  font-family: var(--hd);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.story__stamp .story__stamp-mid {
  font-family: var(--hand);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.1;
  margin: 8px 0;
}

/* --------------------------------------------------------------------------
   13. Charity panel
   -------------------------------------------------------------------------- */
.charity {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(50px, 7vw, 104px) var(--gutter);
}
.charity__layout {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.charity__copy { flex: 1 1 400px; min-width: min(340px, 100%); }
.charity__copy h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 0.9;
  text-transform: uppercase;
}
.charity__copy > p {
  margin: 26px 0 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--cream);
  text-wrap: pretty;
}
.charity__split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(30px, 4vw, 44px) 0 0;
}
.charity__split > div { flex: 1 1 200px; border-top: 3px solid var(--red); padding-top: 18px; }
.charity__pct {
  margin: 0;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(50px, 6vw, 78px);
  line-height: 0.85;
  color: var(--red);
}
.charity__split p + p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--cream); max-width: none; }
.charity__partner {
  margin-top: clamp(30px, 4vw, 44px);
  padding: clamp(22px, 2.8vw, 32px);
  background: var(--cream);
  border-top: 5px solid var(--red);
  color: var(--ink);
}
.charity__partner h3 {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.charity__partner p {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.charity__partner a {
  color: var(--red);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}
.charity__partner a:hover { color: var(--ink); }
.charity__story {
  margin-top: clamp(30px, 4vw, 44px);
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 3px solid var(--red);
  max-width: 62ch;
}
.charity__story h3 {
  margin: 0;
  font-family: var(--hd);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--cream);
  text-wrap: balance;
}
.charity__story p {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cream);
  text-wrap: pretty;
}
.charity__copy .link-rule--cream { margin-top: clamp(30px, 4vw, 42px); }
.charity__visual {
  flex: 0 1 470px;
  min-width: min(300px, 100%);
  position: relative;
  padding: 0 0 clamp(48px, 5vw, 62px) clamp(18px, 2.4vw, 34px);
}
.charity__stamp {
  position: absolute;
  z-index: 3;
  top: clamp(-22px, -1.6vw, -10px);
  right: clamp(8px, 1.2vw, 18px);
  width: clamp(120px, 12vw, 154px);
  aspect-ratio: 1;
  border: 4px double var(--red);
  border-radius: 50%;
  background: var(--cream);
  color: var(--red);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(8deg);
}
.charity__stamp::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--red);
  border-radius: inherit;
  opacity: 0.72;
}
.charity__stamp span {
  position: relative;
  z-index: 1;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1;
  letter-spacing: 0.16em;
}
.charity__stamp .charity__stamp-focus {
  margin: 6px 0;
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 0.95;
  letter-spacing: 0;
}
.charity__photo {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: #161616;
}
.charity__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.charity__photo .placeholder-frame { position: absolute; inset: 0; }
.charity__logo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(210px, 58%, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-top: 5px solid var(--red);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
}
.charity__logo img { width: 100%; max-width: 230px; height: auto; display: block; }
.charity__logo .placeholder-frame { width: 100%; max-width: 230px; aspect-ratio: 3 / 2; }

/* --------------------------------------------------------------------------
   14. Explore grid
   -------------------------------------------------------------------------- */
.explore h2 {
  margin: 0 0 clamp(30px, 4vw, 52px);
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 0.9;
  text-transform: uppercase;
}
.explore__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: rgba(5, 5, 5, 0.16);
  border: 1px solid rgba(5, 5, 5, 0.16);
}
.explore__card {
  background: var(--cream);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  min-height: 190px;
  transition: background .18s ease, color .18s ease;
}
.explore__card:hover { background: var(--ink); color: var(--cream); }
.explore__kicker {
  font-family: var(--hd);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}
.explore__title {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}
.explore__text { font-size: 15px; line-height: 1.6; margin-top: auto; }

/* --------------------------------------------------------------------------
   15. Enter-now band
   -------------------------------------------------------------------------- */
.enter-band {
  background: var(--red);
  color: #fff;
  padding: clamp(50px, 7vw, 104px) var(--gutter);
}
.enter-band__layout {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 4vw, 64px);
  align-items: flex-end;
}
.enter-band__copy { flex: 1 1 420px; min-width: min(340px, 100%); }
.enter-band__kicker {
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-family: var(--hand);
  font-size: clamp(20px, 2.8vw, 30px);
  color: #fff;
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.enter-band__copy h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 112px);
  line-height: 0.86;
  text-transform: uppercase;
}
.enter-band__copy p {
  margin: 24px 0 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  text-wrap: pretty;
}
.enter-band__actions {
  flex: 1 1 320px;
  min-width: min(280px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.enter-band a { color: #fff; }

/* --------------------------------------------------------------------------
   16. Partners
   -------------------------------------------------------------------------- */
.partners .section-head h2 {
  flex: 1 1 320px;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 0.92;
}
.partners .section-head p { flex: 1 1 300px; max-width: 44ch; font-size: clamp(15px, 1.35vw, 17px); }
.partners .section-head a { border-bottom: 1px solid var(--red); }
.partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(5, 5, 5, 0.14);
  border: 1px solid rgba(5, 5, 5, 0.14);
}
.partners__cell {
  background: var(--cream);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.4vw, 30px);
}
.partners__cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
.partners__cell .placeholder-frame { width: 100%; height: 100%; }

@media (max-width: 600px) {
  .partners__grid > .partners__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 1;
  }
}

/* --------------------------------------------------------------------------
   17. Sub-page header (shared pattern for the seven subpages)
   -------------------------------------------------------------------------- */
.subhead {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: clamp(44px, 6vw, 88px) var(--gutter) clamp(72px, 8vw, 116px);
}
/* These photographs are framed tight — in most of them the runners' heads sit
   4–8% from the top edge, so there is no headroom to give away. Two things
   were eating it: the header's torn edge hangs ~38px over the top of this
   section, and `object-position: … 40%` trimmed another ~10px off the top.
   So the photo now starts where the tear ends and is anchored to its own top
   row; any cover crop comes off the bottom (road) instead. */
.subhead__media {
  position: absolute;
  top: var(--tear-h);
  left: 0; right: 0;
  width: 100%;
  height: calc(100% - var(--tear-h));
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}
.subhead__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(97deg,
      rgba(5,5,5,0.90) 0%,
      rgba(5,5,5,0.82) 30%,
      rgba(5,5,5,0.62) 50%,
      rgba(5,5,5,0.30) 72%,
      rgba(5,5,5,0.12) 100%),
    linear-gradient(rgba(5,5,5,0.52), rgba(5,5,5,0.52));
}
.subhead__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
}
.subhead__crumbs {
  margin: 0 0 18px;
  font-family: var(--hd);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}
.subhead__crumbs a { color: var(--grey); }
.subhead__crumbs a:hover { color: var(--red); }
.subhead h1 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(52px, 9vw, 124px);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--cream);
  text-wrap: balance;
}
.subhead h1 em { font-style: normal; color: var(--red); }
.subhead__lede {
  margin: 26px 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  color: var(--cream);
  text-wrap: pretty;
}
.subhead .tear--subhead-top {
  top: 0;
  height: clamp(28px, 3.2vw, 46px);
  z-index: 3;
}
.subhead .tear--subhead {
  bottom: 0;
  height: clamp(34px, 3.6vw, 54px);
  z-index: 3;
  transform: scaleY(-1);
}
.subhead .placeholder-frame--fill { z-index: 0; }

/* --------------------------------------------------------------------------
   17b. Shared subpage blocks
   -------------------------------------------------------------------------- */

/* Key-fact row that sits directly under a sub-header */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  padding-bottom: clamp(38px, 5vw, 64px);
  border-bottom: 1px solid rgba(5, 5, 5, 0.16);
}
.stat {
  border-top: 3px solid var(--red);
  padding-top: 18px;
}
.stat__label {
  margin: 0 0 8px;
  font-family: var(--hd);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}
.stat__value {
  margin: 0;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.02;
  text-transform: uppercase;
}

/* Two-column prose + aside */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 76px);
  padding-top: clamp(38px, 5vw, 64px);
}
.split--flush { padding-top: 0; }
.split__main { flex: 1 1 420px; min-width: min(340px, 100%); }
.split__aside { flex: 1 1 380px; min-width: min(320px, 100%); }
.split__aside--narrow { flex: 1 1 360px; min-width: min(320px, 100%); }

.block-title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.94;
  text-transform: uppercase;
}
.block-title--lg {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.92;
}
.block-rule { height: 3px; background: var(--red); width: 90px; margin: 20px 0 24px; }

.copy-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 60ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
}
.copy-stack p { margin: 0; text-wrap: pretty; }
.copy-stack strong { font-weight: 700; }

/* Taped-photo aside (route map, certificates) */
.snapshot {
  background: #fff;
  padding: 14px 14px 20px;
  box-shadow: 0 18px 40px -28px rgba(5, 5, 5, 0.5);
  transform: rotate(1.2deg);
}
.snapshot img { width: 100%; height: auto; display: block; }
.snapshot .placeholder-frame { width: 100%; aspect-ratio: 4 / 3; }
.snapshot__caption {
  margin: 14px 0 0;
  font-family: var(--hand);
  font-size: 18px;
  color: var(--ink);
  text-align: center;
}

/* Dark band used for route / detail sections */
.band-dark {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(46px, 6vw, 92px) var(--gutter);
}
.band-dark__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
}
.band-dark p { text-wrap: pretty; }
.band-dark .lede {
  margin: 26px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
}

/* Numbered route legs */
.legs { list-style: none; margin: 0; padding: 0; }
.legs li {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid rgba(232, 227, 217, 0.2);
}
.legs__n {
  font-family: var(--hd);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--red);
  min-width: 34px;
}
.legs__name {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  text-transform: uppercase;
  line-height: 1.05;
}

/* Three-up checklist cards */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.checklist { border-top: 3px solid var(--ink); padding-top: 22px; }
.checklist h3 {
  margin: 0 0 16px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  text-transform: uppercase;
  line-height: 1.06;
}
.checklist ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  background: var(--red);
  margin-top: 7px;
}

.subhead__kicker {
  margin: 0 0 12px;
  font-family: var(--hand);
  font-size: clamp(20px, 2.8vw, 30px);
  color: var(--red);
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.subhead h1.subhead__title--tight { font-size: clamp(48px, 8.4vw, 116px); }

/* Volunteer — torn photo card, role grid, CTA block */
.torn-photo {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 10px 0;
}
.torn-photo > img:not(.tear) { width: 100%; height: auto; display: block; }
.torn-photo .placeholder-frame { width: 100%; aspect-ratio: 3 / 2; }

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: rgba(5, 5, 5, 0.16);
  border: 1px solid rgba(5, 5, 5, 0.16);
  margin-top: clamp(24px, 3vw, 34px);
}
.role {
  background: var(--cream);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.role svg { display: block; }
.role span {
  font-family: var(--hd);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}

.cta-block {
  border-top: 3px solid var(--red);
  padding-top: 22px;
  margin-top: 8px;
}
.cta-block h2 {
  margin: 0 0 12px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  text-transform: uppercase;
  line-height: 1;
}
.cta-block p { margin: 0; }
.cta-block a { border-bottom: 1px solid var(--red); }

/* Race T&Cs — sub-header scope list and the clause document */
.subhead--terms .subhead__lede {
  max-width: 62ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
}
.subhead__bullets {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 62ch;
}
.subhead__bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  color: var(--grey);
}
.subhead__bullets li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  background: var(--red);
  margin-top: 8px;
}
.subhead__note {
  margin: 24px 0 0;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  color: var(--grey);
}
.subhead__note a { color: #fff; border-bottom: 1px solid var(--red); }

.terms {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 86px) var(--gutter);
}
.terms__block { margin-bottom: clamp(34px, 4vw, 52px); }
.terms__block h2 {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.02;
  text-transform: uppercase;
  border-top: 3px solid var(--red);
  padding-top: 18px;
}
.clauses {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}
.clause { display: flex; gap: clamp(14px, 2vw, 22px); align-items: flex-start; }
.clause__n {
  flex: 0 0 auto;
  min-width: 34px;
  font-family: var(--hd);
  font-weight: 700;
  font-size: 20px;
  color: var(--red);
  padding-top: 2px;
}
.clause__body { flex: 1 1 auto; }
.clause__body > p {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.75;
  text-wrap: pretty;
}
.subclauses {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.subclauses li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-left: clamp(0px, 1.4vw, 14px);
}
.subclause__l {
  flex: 0 0 auto;
  min-width: 20px;
  font-family: var(--hd);
  font-weight: 700;
  font-size: 17px;
  opacity: 0.6;
}
.subclause__t { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.7; text-wrap: pretty; }
.terms__footnote {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(5, 5, 5, 0.16);
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.7;
}

/* Contact — cards in the sub-header, and the quick-link list */
.subhead__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(28px, 3.6vw, 44px);
}
.contact-card {
  flex: 1 1 240px;
  border-top: 3px solid var(--red);
  padding-top: 18px;
}
.contact-card__label {
  margin: 0 0 10px;
  font-family: var(--hd);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}
.contact-card__value {
  margin: 0;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  text-transform: uppercase;
}
.contact-card__value a { color: var(--cream); }
.contact-card__value a:hover { color: var(--red); }
.contact-card__note { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--cream); }

.quick-links { display: flex; flex-direction: column; margin-top: 22px; }
.quick-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(5, 5, 5, 0.16);
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .18s ease;
}
.quick-links a:hover { color: var(--red); }

.find-us { flex: 1 1 380px; min-width: min(320px, 100%); }
.find-us p { margin: 0; max-width: 44ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.75; }
.find-us p + p { margin-top: 20px; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.7; opacity: 0.75; }
.contact-cols { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 60px); }
.contact-cols__aside { flex: 1 1 320px; min-width: min(280px, 100%); }
.contact-cols h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 0.96;
  text-transform: uppercase;
}

/* Sponsors — full-width write-up rows */
.sponsor-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(5, 5, 5, 0.16);
  border: 1px solid rgba(5, 5, 5, 0.16);
}
.sponsor-row {
  background: var(--cream);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.4vw, 54px);
  padding: clamp(26px, 3.4vw, 48px);
  align-items: center;
}
.sponsor-row__logo {
  flex: 0 1 220px;
  min-width: min(180px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sponsor-row__logo img {
  max-width: 100%;
  max-height: 120px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
.sponsor-row__logo .placeholder-frame { width: 100%; aspect-ratio: 3 / 2; }
.sponsor-row__body { flex: 1 1 380px; min-width: min(300px, 100%); }
.sponsor-row__body h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  text-transform: uppercase;
}
.sponsor-row__body p {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  text-wrap: pretty;
}
.sponsor-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: 20px;
  font-family: var(--hd);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sponsor-row__links a {
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease;
}
.sponsor-row__links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.subhead__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
.subhead__cols p {
  margin: 0;
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.75;
  color: var(--cream);
  text-wrap: pretty;
}
.subhead__cols p:first-child { flex: 1 1 380px; max-width: 56ch; }
.subhead__cols p:last-child  { flex: 1 1 320px; max-width: 48ch; }
.subhead__cols a { color: #fff; border-bottom: 1px solid var(--red); }
.subhead--bright .subhead__crumbs,
.subhead--bright .subhead__crumbs a { color: var(--cream); }
.subhead--bright .subhead__scrim {
  background:
    linear-gradient(97deg,
      rgba(5,5,5,0.90) 0%,
      rgba(5,5,5,0.82) 30%,
      rgba(5,5,5,0.62) 50%,
      rgba(5,5,5,0.30) 72%,
      rgba(5,5,5,0.12) 100%),
    linear-gradient(rgba(5,5,5,0.64), rgba(5,5,5,0.64));
}

/* Elite — qualifying standard cards */
.standards { flex: 1 1 340px; min-width: min(300px, 100%); display: flex; flex-direction: column; gap: 16px; }
.standards .eyebrow { margin: 0; }
.standard {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.standard__who {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.standard__time {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 0.9;
  color: var(--red);
}
.callout-dashed {
  border: 1px dashed rgba(5, 5, 5, 0.35);
  padding: clamp(20px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.callout-dashed__title {
  margin: 0;
  font-family: var(--hd);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.callout-dashed p { margin: 0; font-size: 15px; line-height: 1.65; }

/* Corporate — price block and inclusions */
.price-card {
  background: var(--red);
  color: #fff;
  padding: clamp(26px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-card__label {
  font-family: var(--hd);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}
.price-card__figure {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.86;
}
.price-card__unit {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tick-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tick-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid rgba(5, 5, 5, 0.16);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}
.tick-list__icon {
  color: var(--red);
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}
.tick-list__icon svg {
  display: block;
}

/* --------------------------------------------------------------------------
   18. Enquiry / Contact Form 7
   -------------------------------------------------------------------------- */
.enquiry {
  background: var(--cream);
  border-top: 1px solid rgba(5, 5, 5, 0.14);
  padding: clamp(44px, 6vw, 88px) var(--gutter);
  font-family: var(--body);
  color: var(--ink);
}
.enquiry__layout {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 4.4vw, 70px);
}
.enquiry__copy { flex: 1 1 340px; min-width: min(320px, 100%); }
.enquiry__copy h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.enquiry__rule { height: 3px; background: var(--red); width: 90px; margin: 20px 0 22px; }
.enquiry__copy p { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; text-wrap: pretty; }
.enquiry__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 26px;
  font-size: 16px;
}
.enquiry__contacts a { border-bottom: 1px solid var(--red); align-self: flex-start; }
.enquiry__form {
  flex: 1 1 420px;
  min-width: min(320px, 100%);
  background: #fff;
  padding: clamp(22px, 3vw, 38px);
  box-shadow: 0 18px 40px -30px rgba(5, 5, 5, 0.5);
}

/* CF7 markup, styled to match the prototype form exactly */
.enquiry__form .g10k-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}
.enquiry__form label,
.enquiry__form .g10k-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* Space every stacked block in the form, whichever order they appear in.
   (Previously only a field following a .g10k-row was spaced, so two fields in
   a row — e.g. the Contact form's topic select and Message — collided.) */
.enquiry__form .g10k-row + .g10k-row,
.enquiry__form .g10k-row + .g10k-field,
.enquiry__form .g10k-field + .g10k-row,
.enquiry__form .g10k-field + .g10k-field { margin-top: 16px; }

/* Fields sitting side by side in a row are spaced by the grid gap. Without
   this they inherit the stacked margin above and bottom-align instead of
   lining their labels up. */
.enquiry__form .g10k-row > .g10k-field { margin-top: 0; align-self: start; }
.enquiry__form .g10k-label {
  font-family: var(--hd);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.enquiry__form input[type="text"],
.enquiry__form input[type="email"],
.enquiry__form input[type="tel"],
.enquiry__form input[type="url"],
.enquiry__form input[type="date"],
.enquiry__form input[type="number"],
.enquiry__form select,
.enquiry__form textarea {
  font-family: var(--body);
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(5, 5, 5, 0.25);
  background: var(--field);
  color: var(--ink);
  outline: none;
  width: 100%;
  border-radius: 0;
  transition: border-color .16s ease;
}
.enquiry__form textarea { resize: vertical; min-height: 132px; }
.enquiry__form input:focus,
.enquiry__form select:focus,
.enquiry__form textarea:focus { border-color: var(--red); }
.enquiry__form .wpcf7-form-control-wrap { display: block; }
.enquiry__form input[type="submit"],
.enquiry__form .wpcf7-submit {
  margin-top: 22px;
  width: 100%;
  background: var(--red);
  color: #fff;
  border: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px;
  cursor: pointer;
  border-radius: 0;
  transition: background .18s ease;
}
.enquiry__form input[type="submit"]:hover,
.enquiry__form .wpcf7-submit:hover { background: var(--ink); }
.enquiry__note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: rgba(5, 5, 5, 0.6); }
/* --- Checkboxes, radios and acceptance -----------------------------------
   Contact Form 7 emits bare <input> + <span> inside an inline .wpcf7-list-item
   and adds its own left margin, which left the control floating away from its
   text. Force a proper two-column row and lay groups out on a grid. The extra
   .wpcf7-form in the selector is only there to out-specify CF7's stylesheet. */
.enquiry__form .wpcf7-form .wpcf7-checkbox,
.enquiry__form .wpcf7-form .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 20px;
  margin-top: 2px;
}
.enquiry__form .wpcf7-form .wpcf7-acceptance { display: block; }

.enquiry__form .wpcf7-form .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}
.enquiry__form .wpcf7-form .wpcf7-list-item input[type="checkbox"],
.enquiry__form .wpcf7-form .wpcf7-list-item input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--red);
  cursor: pointer;
}
.enquiry__form .wpcf7-form .wpcf7-list-item-label {
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

/* Consent row: stop the column-flex field turning it into a stack. */
.enquiry__form .g10k-consent { display: block; margin-top: 18px; }
.enquiry__form .g10k-consent .wpcf7-list-item-label { font-size: 14px; line-height: 1.55; }

/* Selects need the same box as the text inputs, plus our own chevron. */
.enquiry__form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23050505' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  line-height: 1.3;
  height: 48px;
}
.enquiry__form input[type="date"] { height: 48px; }

.enquiry__form .wpcf7-not-valid-tip { color: var(--red); font-size: 13px; margin-top: 4px; }
.enquiry__form .wpcf7-response-output {
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(5, 5, 5, 0.25) !important;
  font-size: 14px;
  line-height: 1.6;
}
.enquiry__form form.sent .wpcf7-response-output { border-color: var(--ink) !important; background: var(--field); }
.enquiry__form form.invalid .wpcf7-response-output,
.enquiry__form form.failed .wpcf7-response-output { border-color: var(--red) !important; color: var(--red); }
.enquiry__form .wpcf7-spinner { display: block; margin: 10px auto 0; }
.enquiry__form .wpcf7-list-item { margin: 0 16px 0 0; }
.enquiry__form .g10k-consent { margin-top: 16px; font-size: 14px; line-height: 1.55; }
.enquiry__form .g10k-consent .g10k-label { letter-spacing: 0; text-transform: none; font-family: var(--body); font-weight: 400; font-size: 14px; }

/* --------------------------------------------------------------------------
   18b. Newsletter band (optional — off unless enabled in the Customizer)
   -------------------------------------------------------------------------- */
.newsletter {
  background: var(--red);
  color: #fff;
  padding: clamp(38px, 5vw, 68px) var(--gutter);
}
.newsletter__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
}
.newsletter__copy { flex: 1 1 340px; min-width: min(280px, 100%); }
.newsletter__copy .eyebrow { color: #fff; opacity: 0.8; }
.newsletter__copy h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 0.92;
  text-transform: uppercase;
}
.newsletter__form {
  flex: 1 1 420px;
  min-width: min(300px, 100%);
  background: #fff;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: none;
}
.newsletter__form .g10k-consent .g10k-label { font-size: 13px; }
.newsletter__form input[type="submit"],
.newsletter__form .wpcf7-submit { margin-top: 16px; font-size: 18px; }

/* --------------------------------------------------------------------------
   19. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(46px, 6vw, 86px) var(--gutter) 0;
  font-family: var(--body);
}
.site-footer__top {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 70px);
}
.site-footer__brand { flex: 1 1 300px; min-width: min(280px, 100%); }
.site-footer__brand img { height: 84px; width: auto; display: block; }
.site-footer__brand .placeholder-frame { height: 84px; width: 84px; }
.site-footer__date {
  margin: 22px 0 0;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--red);
}
.site-footer__address { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--grey); }
.site-footer__col { flex: 1 1 200px; min-width: min(200px, 100%); }
.site-footer__col--wide { flex: 1 1 220px; min-width: min(220px, 100%); }
.site-footer__col > p:first-child { margin: 0 0 18px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer__col nav a,
.site-footer__col ul a {
  font-family: var(--hd);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}
.site-footer__col nav a:hover,
.site-footer__col ul a:hover { color: var(--red); }
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
}
.site-footer__contact a { color: var(--cream); }
.site-footer__contact a:hover { color: var(--red); }
.site-footer__social { display: flex; gap: 12px; margin-top: 22px; }
.site-footer__social a {
  width: 42px; height: 42px;
  border: 1px solid rgba(232, 227, 217, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.site-footer__social a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.site-footer__bottom {
  max-width: var(--shell);
  margin: 0 auto;
  border-top: 1px solid rgba(232, 227, 217, 0.18);
  padding: 24px 0 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.site-footer__bottom p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--grey); }
.site-footer__poweredby { display: flex; align-items: center; gap: 12px; }
.site-footer__poweredby:hover { opacity: 0.75; }
.site-footer__poweredby span {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--hd);
  font-weight: 700;
  color: var(--grey);
}
.site-footer__poweredby img { height: 30px; width: auto; display: block; }

/* --------------------------------------------------------------------------
   20. Editor / fallback content (single.php, page.php, 404)
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 0.95; margin: 44px 0 16px;
}
.prose h3 {
  font-family: var(--hd); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.04em; margin: 34px 0 12px;
}
.prose p, .prose li { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.75; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose a { border-bottom: 1px solid var(--red); }
.prose blockquote {
  margin: 30px 0; padding-left: 24px; border-left: 3px solid var(--red);
  font-family: var(--hd); font-weight: 600; font-size: clamp(19px, 2vw, 24px); line-height: 1.3;
}
.prose img { height: auto; }

/* --------------------------------------------------------------------------
   21. Roads & Residents
   -------------------------------------------------------------------------- */
.rr-date-badge {
  display: inline-flex;
  margin-top: clamp(24px, 3vw, 36px);
  padding: 12px 18px;
  background: var(--red);
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rr-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(34px, 6vw, 90px);
}
.rr-intro__copy { flex: 1 1 520px; min-width: min(320px, 100%); }
.rr-intro__number {
  flex: 0 1 390px;
  min-width: min(300px, 100%);
  padding: clamp(28px, 4vw, 54px);
  background: var(--red);
  color: #fff;
  transform: rotate(1.2deg);
  box-shadow: 0 20px 50px -34px rgba(5, 5, 5, .7);
}
.rr-intro__number span,
.rr-intro__number strong,
.rr-intro__number small { display: block; }
.rr-intro__number span {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(84px, 11vw, 150px);
  line-height: .76;
  letter-spacing: -.035em;
}
.rr-intro__number strong {
  margin-top: 24px;
  font-family: var(--hd);
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1;
  text-transform: uppercase;
}
.rr-intro__number small {
  margin-top: 10px;
  font-family: var(--hd);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .82;
}

.rr-glance {
  background: #fff;
  padding: clamp(52px, 7vw, 100px) var(--gutter);
}
.rr-glance__inner { max-width: var(--shell); margin: 0 auto; }
.rr-glance__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(5, 5, 5, .16);
  background: rgba(5, 5, 5, .16);
}
.rr-glance-card {
  min-height: 210px;
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.rr-glance-card svg { flex: 0 0 auto; }
.rr-glance-card strong {
  max-width: 13ch;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(22px, 2.25vw, 31px);
  line-height: 1.02;
  text-transform: uppercase;
}

.rr-timeline {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(52px, 7vw, 100px) var(--gutter);
}
.rr-timeline__inner { max-width: var(--shell); margin: 0 auto; }
.rr-timeline ol {
  list-style: none;
  margin: clamp(34px, 5vw, 66px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.rr-timeline li {
  position: relative;
  min-height: 154px;
  padding: 30px clamp(16px, 2vw, 26px) 0 0;
  border-top: 3px solid rgba(232, 227, 217, .28);
}
.rr-timeline li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--red);
}
.rr-timeline li time,
.rr-timeline li strong {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}
.rr-timeline li span {
  display: block;
  max-width: 18ch;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--grey);
}

.rr-closures .section-head { align-items: flex-start; }
.rr-time-band + .rr-time-band { margin-top: clamp(34px, 5vw, 64px); }
.rr-time-band__head {
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(260px, 1.5fr) minmax(180px, .8fr);
  gap: 24px;
  align-items: end;
  background: var(--red);
  color: #fff;
}
.rr-time-band--later .rr-time-band__head { background: var(--ink); color: var(--cream); }
.rr-time-band__head p,
.rr-time-band__head span {
  font-family: var(--hd);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.rr-time-band__head span { text-align: right; }
.rr-time-band__head h3 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(38px, 5.2vw, 70px);
  line-height: .86;
  text-transform: uppercase;
}
.rr-road-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(5, 5, 5, .16);
  border-top: 0;
}
.rr-road { border-bottom: 1px solid rgba(5, 5, 5, .16); }
.rr-road:nth-child(odd) { border-right: 1px solid rgba(5, 5, 5, .16); }
.rr-road summary {
  list-style: none;
  min-height: 62px;
  padding: 17px clamp(18px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.2;
  text-transform: uppercase;
  transition: color .18s ease, background .18s ease;
}
.rr-road summary::-webkit-details-marker { display: none; }
.rr-road summary:hover,
.rr-road summary:focus-visible { background: #fff; color: var(--red); }
.rr-road summary:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.rr-road summary span {
  flex: 0 0 auto;
  color: var(--red);
  font-family: var(--body);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  transition: transform .18s ease;
}
.rr-road[open] summary span { transform: rotate(45deg); }
.rr-road p {
  margin: 0;
  padding: 0 clamp(18px, 2.4vw, 28px) 22px;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
}
.rr-emergency {
  margin-top: clamp(28px, 4vw, 46px);
  padding: clamp(22px, 3vw, 32px);
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.rr-emergency svg { flex: 0 0 auto; margin-top: 2px; }
.rr-emergency strong,
.rr-emergency span { display: block; }
.rr-emergency strong {
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.1;
  text-transform: uppercase;
}
.rr-emergency span { margin-top: 7px; font-size: 15px; line-height: 1.55; }

.rr-plan .band-dark__inner { align-items: center; }
.rr-plan .btn { margin-top: 28px; }
.rr-plan__callout {
  flex: 1 1 360px;
  min-width: min(300px, 100%);
  border: 1px solid rgba(232, 227, 217, .34);
  border-left: 5px solid var(--red);
  padding: clamp(26px, 3.4vw, 42px);
}
.rr-plan__callout span,
.rr-plan__callout strong { display: block; }
.rr-plan__callout span {
  color: var(--red);
  font-family: var(--hd);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.rr-plan__callout strong {
  margin-top: 14px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(27px, 3vw, 41px);
  line-height: 1.02;
  text-transform: uppercase;
}

.rr-village {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(38px, 6vw, 88px);
}
.rr-village__media {
  position: relative;
  flex: 1 1 520px;
  min-width: min(320px, 100%);
  padding: 10px 0;
  background: #fff;
}
.rr-village__media > img { display: block; width: 100%; height: auto; }
.rr-village__copy { flex: 1 1 400px; min-width: min(300px, 100%); }

.rr-thanks {
  background: var(--red);
  color: #fff;
  padding: clamp(56px, 8vw, 118px) var(--gutter);
}
.rr-thanks__inner { max-width: var(--shell); margin: 0 auto; }
.rr-thanks .eyebrow { color: #fff; opacity: .82; }
.rr-thanks h2 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(58px, 10vw, 138px);
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: -.025em;
}
.rr-thanks h2 span { color: var(--ink); }
.rr-thanks__copy {
  max-width: 980px;
  margin-top: clamp(38px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.7;
}

.rr-contact {
  background: var(--cream);
  padding: clamp(50px, 7vw, 94px) var(--gutter);
}
.rr-contact__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(30px, 5vw, 76px);
}
.rr-contact__inner > div:first-child { flex: 1 1 440px; }
.rr-contact h2 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: .9;
  text-transform: uppercase;
}
.rr-contact p:last-child { margin-top: 18px; max-width: 52ch; font-size: 17px; line-height: 1.65; }
.rr-contact__links {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
}
.rr-contact__links a {
  padding: 17px 0;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--hd);
  font-weight: 700;
  font-size: clamp(21px, 2.5vw, 34px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.rr-contact__links a:hover { color: var(--red); }

@media (max-width: 920px) {
  .rr-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-timeline ol { grid-template-columns: 1fr; }
  .rr-timeline li { min-height: 0; padding: 18px 0 18px 34px; border-top: 0; border-left: 3px solid rgba(232, 227, 217, .28); }
  .rr-timeline li::before { top: 26px; left: -8px; }
  .rr-timeline li span { max-width: none; }
}

@media (max-width: 680px) {
  .rr-glance__grid,
  .rr-road-grid,
  .rr-thanks__copy { grid-template-columns: 1fr; }
  .rr-glance-card { min-height: 170px; }
  .rr-time-band__head { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .rr-time-band__head span { text-align: left; }
  .rr-road:nth-child(odd) { border-right: 0; }
  .rr-road summary { min-height: 58px; }
  .rr-village__media { order: 2; }
  .rr-village__copy { order: 1; }
  .rr-thanks h2 { line-height: .86; }
}