:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found]){display:none!important}

/* =====================================================================
   Carolina Exotic Car Club — unified design system
   One brand, four pillars: Club · Cars · Driving School · Foundation
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --ink:        #0a0b0c;
  --ink-2:      #111316;
  --ink-3:      #181b1f;
  --ink-4:      #21252a;
  --line:       rgba(244, 241, 234, 0.12);
  --line-soft:  rgba(244, 241, 234, 0.07);

  /* text */
  --ivory:      #f4f1ea;
  --text:       rgba(244, 241, 234, 0.96);
  --text-muted: rgba(244, 241, 234, 0.76);
  --text-faint: rgba(244, 241, 234, 0.60);

  /* pillar accents */
  --brass:      #c6a15b;   /* the club */
  --steel:      #b4bec9;   /* the cars */
  --signal:     #5aa9ea;   /* driving school */
  --ember:      #e8794a;   /* foundation */
  --accent:     var(--brass);

  /* type */
  --display: "Cormorant Garamond", "Adobe Garamond Pro", Garamond, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* metrics */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 4px;
  --header-h: 76px;

  /* form controls sit lighter than the card behind them */
  --field:       #262b32;
  --field-hover: #2c323a;
  --field-focus: #323942;
  --field-line:  rgba(244, 241, 234, 0.28);

  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

/* ---------- type scale ---------- */
.display-xl { font-family: var(--display); font-size: clamp(3rem, 8.4vw, 6.4rem); line-height: 0.98; letter-spacing: -0.02em; }
.display-l  { font-family: var(--display); font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.04; letter-spacing: -0.015em; }
.display-m  { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.1; }
.display-s  { font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.2; }
.eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem;
}
.eyebrow--muted { color: var(--text-faint); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
/* The venue line under the signup lede. A step quieter, so it reads as the
   practical detail it is rather than competing with the sentence above it. */
.lede--address { font-size: 0.95rem; color: var(--text-faint); margin-top: 0.6rem; }
/* The course-dates heading had no gap under it, so the subtitle sat hard
   against it. A little room under the heading, and "One Day Class" picked out
   in the heading colour as the first thing read. */
.dates-intro { margin-top: 1.2rem; }
.dates-intro strong { color: var(--ivory); font-weight: 600; }
.muted { color: var(--text-muted); }
.serif-italic { font-family: var(--display); font-style: italic; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--ink-2); }
.section--line { border-top: 1px solid var(--line-soft); }
.grid { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } .split--reverse > :first-child { order: 2; } }
.stack > * + * { margin-top: 1.1rem; }
.section-head { max-width: 68ch; margin-bottom: clamp(32px, 4.5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.95em 1.9em; border: 1px solid transparent; border-radius: 2px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; background: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); color: #0a0b0c; }
.btn--primary:hover { background: var(--ivory); }
.btn--ghost { border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--ivory); background: rgba(244, 241, 234, 0.06); }
.btn--solid { background: var(--ivory); color: #0a0b0c; }
.btn--solid:hover { background: var(--accent); }
.btn--sm { padding: 0.7em 1.3em; font-size: 0.7rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow svg { transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- header ---------- */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ivory); color: #000;
  padding: 10px 16px; border-radius: 3px; text-decoration: none; font-size: 0.85rem; transition: top 0.2s;
}
.skip:focus { top: 12px; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck, .site-header.is-open {
  background: rgba(10, 11, 12, 0.9); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; min-width: 0; }
.brand-mark { flex: 0 0 auto; height: 30px; width: auto; }
.brand--lockup img { width: min(300px, 70%); height: auto; }
@media (max-width: 599px) { .site-header .brand-text { display: none; } .brand-mark { height: 27px; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-name { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--ivory); }
.brand-sub { font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); }

.nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 1160px) { .nav { display: flex; } }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px; text-decoration: none;
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-muted); transition: color 0.2s; white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.nav-link:hover, .nav-item:focus-within .nav-link, .nav-link[aria-current="page"] { color: var(--ivory); }
.nav-link[aria-current="page"] { color: var(--accent); }
.nav-link .caret { width: 8px; height: 8px; opacity: 0.6; transition: transform 0.25s var(--ease); }
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 8px);
  min-width: 300px; padding: 10px; background: rgba(17, 19, 22, 0.97);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* dismissed after a selection — stays shut until the pointer leaves and returns */
.nav-item.is-closed .dropdown { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); }
.dropdown a {
  display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none;
  transition: background-color 0.18s;
}
.dropdown a:hover { background: rgba(244, 241, 234, 0.07); }
.dropdown .dd-title { font-size: 0.88rem; color: var(--ivory); }
.dropdown .dd-desc { font-size: 0.76rem; color: var(--text-faint); line-height: 1.45; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header-actions .btn { white-space: nowrap; }
.header-phone {
  display: none; text-decoration: none; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-muted);
  white-space: nowrap;
}
@media (min-width: 720px) { .header-phone { display: inline-flex; align-items: center; gap: 7px; } }
.header-phone:hover { color: var(--ivory); }
.header-actions .btn { display: none; }
@media (min-width: 640px) { .header-actions .btn { display: inline-flex; } }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; background: none; border: 1px solid var(--line);
  border-radius: 3px; cursor: pointer;
}
@media (min-width: 1160px) { .burger { display: none; } }
.burger span { display: block; height: 1.5px; background: var(--ivory); transition: transform 0.3s var(--ease), opacity 0.2s; }
.site-header.is-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.is-open .burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: rgba(10, 11, 12, 0.985); backdrop-filter: blur(18px);
  overflow-y: auto; padding: 24px var(--gutter) 60px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1160px) { .mobile-nav { display: none; } }
/* The drawer markup uses .m-title for a group label and plain anchors for the
   links. This file used to style .m-head and .m-sub instead, which matched
   nothing in the markup — so every link fell back to an inline underlined
   span and the whole menu ran together as one paragraph of text. These rules
   target what is actually on the page. */
.mobile-nav .m-group { padding: 2px 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.mobile-nav .m-group:last-of-type { border-bottom: 0; margin-bottom: 0; }
.mobile-nav .m-title {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); margin: 12px 0 2px;
}

/* One destination per row, with a tap target tall enough to hit without
   aiming. The row rule is what makes them read as a list of places rather
   than a run of links. */
.mobile-nav .m-group a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 54px; padding: 11px 0;
  font-family: var(--display); font-size: 1.34rem; line-height: 1.15;
  color: var(--ivory); text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .m-group a:last-child { border-bottom: 0; }
.mobile-nav .m-group a:hover { color: var(--accent); }
.mobile-nav .m-group a[aria-current="page"] { color: var(--accent); }
.mobile-nav .m-group a[aria-current="page"]::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* The second group leaves this site. A step quieter, and in the sans face, so
   the two groups read as different kinds of destination rather than one long
   list of equals. */
.mobile-nav .m-group + .m-group a {
  font-family: var(--sans); font-size: 1rem; min-height: 48px;
  color: var(--text-muted);
}
.mobile-nav .m-group + .m-group a:hover { color: var(--accent); }

.mobile-nav .m-actions { display: grid; gap: 10px; margin-top: 28px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(94vh, 900px); display: flex; align-items: flex-end; padding-top: var(--header-h); overflow: hidden; }
.hero--short { min-height: min(66vh, 620px); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(10, 11, 12, 0.72) 38%, rgba(10, 11, 12, 0.3) 68%, rgba(10, 11, 12, 0.65) 100%),
    linear-gradient(to right, rgba(10, 11, 12, 0.85) 0%, rgba(10, 11, 12, 0.15) 60%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(48px, 8vw, 104px); }
.hero-copy { max-width: 780px; }
.hero-copy .lede { margin-top: 1.4rem; }
.hero-copy .btn-row { margin-top: 2.2rem; }
.hero-meta {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 28px;
  border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: clamp(32px, 5vw, 56px);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
.hero-meta strong { color: var(--text); font-weight: 500; }

/* ---------- pillar cards ---------- */
.pillars { display: grid; gap: 2px; background: var(--line-soft); grid-template-columns: 1fr; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px;
  padding: 28px; text-decoration: none; overflow: hidden; background: var(--ink-2); isolation: isolate;
}
.pillar img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  opacity: 0.5; transition: transform 0.9s var(--ease), opacity 0.5s;
}
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 9, 10, 0.95) 12%, rgba(8, 9, 10, 0.5) 55%, rgba(8, 9, 10, 0.25) 100%);
}
.pillar:hover img { transform: scale(1.06); opacity: 0.68; }
.pillar-index { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--pillar, var(--brass)); margin-bottom: auto; }
.pillar h3 { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; margin-bottom: 10px; color: var(--ivory); }
.pillar p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 18px; }
.pillar .link-arrow { color: var(--pillar, var(--brass)); }
.pillar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pillar, var(--brass));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); z-index: 1;
}
.pillar:hover::before { transform: scaleX(1); }

/* ---------- stats ---------- */
.stats { display: grid; gap: 1px; background: var(--line-soft); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--ink); padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 32px); }
.stat-num { font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 3.3rem); line-height: 1; color: var(--ivory); }
.stat-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-top: 10px; }

/* ---------- cards ---------- */
.card {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); transition: border-color 0.3s, transform 0.3s var(--ease), background-color 0.3s;
}
.card--link { text-decoration: none; display: block; }
.card--link:hover { border-color: var(--line); transform: translateY(-3px); background: var(--ink-3); }
.card h3 { font-family: var(--display); font-size: 1.45rem; margin-bottom: 0.5rem; color: var(--ivory); }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--accent);
}
.card-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; margin-bottom: 20px; background: var(--ink-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.card--link:hover .card-media img { transform: scale(1.05); }

/* feature list */
.feature-list { display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 0.95rem; color: var(--text-muted); }
.feature-list li::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 0.62em; border-radius: 50%;
  background: var(--accent); opacity: 0.85;
}
.feature-list--cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 32px; }

/* ---------- pricing ---------- */
.price-card {
  position: relative; background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(26px, 3.2vw, 40px); display: flex; flex-direction: column;
}
.price-card--feature { border-color: rgba(198, 161, 91, 0.45); background: linear-gradient(180deg, rgba(198, 161, 91, 0.07), transparent 45%), var(--ink-2); }
.price-tag { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.price-tag .amount { font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 3.2rem); line-height: 1; color: var(--ivory); }
.price-tag .per { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.price-note { font-size: 0.8rem; color: var(--text-faint); border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 20px; }
.price-card .feature-list { margin: 22px 0 26px; }
.price-card .btn { margin-top: auto; width: 100%; }
.badge {
  display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}

/* ---------- schedule ---------- */
.session {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; justify-content: space-between;
  padding: 22px 24px; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color 0.3s, background-color 0.3s;
}
.session:hover { border-color: var(--line); background: var(--ink-3); }
.session-date { font-family: var(--display); font-size: 1.6rem; color: var(--ivory); line-height: 1.1; }
.session-meta { font-size: 0.82rem; color: var(--text-faint); }
.session-right { display: flex; align-items: center; gap: 20px; margin-left: auto; }

/* The last thing in that row is either a Register button or a "Class full"
   marker, and the two are not the same width — the marker runs about 9px
   wider. Because the row is right-aligned, a full class pushed its $95 badge
   left of every other card's, so the badges down the list did not line up.
   A shared minimum width on whichever element lands there puts the badge
   column back on one axis. The marker is a span, so it needs a display that
   honours min-width. */
.session-right > :last-child {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 7rem;
}

/* On a phone each class card is one horizontal row: date and time on the
   left, price and button on the right. Nothing here changes the desktop card.
   The date and time scale with the screen so they stay as large as the row
   allows; the button is kept compact so they get that room. */
@media (max-width: 720px) {
  .session { flex-wrap: nowrap; gap: 12px; padding: 18px 16px; }
  .session > :first-child { flex: 1 1 auto; min-width: 0; }
  .session-date { font-size: clamp(1rem, 5.1vw, 1.4rem); }
  .session-meta { font-size: clamp(0.78rem, 3.4vw, 0.9rem); line-height: 1.35; margin-top: 2px; }
  .session-right { flex: none; gap: 8px; }
  .session-right .badge { padding: 4px 8px; font-size: 0.58rem; letter-spacing: 0.1em; }
  .session-right > :last-child { min-width: 5.3rem; min-height: 38px; }
  .session-right .btn { padding: 0.62em 0.5em; font-size: 0.6rem; letter-spacing: 0.1em; }
  .session-right .session-full { font-size: 0.54rem; padding: 6px 4px; letter-spacing: 0.05em; }
}
/* Below 375px (most Android phones sit at 360) win room back from the gutters
   and card padding of this one list rather than shrinking the type. */
@media (max-width: 374px) {
  #dates .wrap { padding-inline: 12px; }
  .session { padding: 16px 12px; gap: 10px; }
  .session-right { gap: 6px; }
}

/* A class with no places left. Dimmed rather than hidden, so the date still
   reads as one that exists and simply cannot be booked. */
.session.is-full { opacity: 0.62; }
.session.is-full .session-date { color: var(--text-muted); }
.session-full { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); border: 1px solid var(--ember); border-radius: 3px; padding: 7px 11px; white-space: nowrap; }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--line-soft); }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.35rem); color: var(--ivory);
}
.acc-btn:hover { color: var(--accent); }
.acc-icon { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease);
}
.acc-icon::after { transform: rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p, .acc-panel ul { color: var(--text-muted); font-size: 0.97rem; }
.acc-panel > div > :first-child { margin-top: 0; }
.acc-panel > div > :last-child { margin-bottom: 26px; }

/* ---------- video ---------- */
.videoblock {
  position: relative; overflow: hidden; border-radius: 4px; background: var(--ink-3);
  aspect-ratio: 16 / 9; border: 1px solid var(--line-soft);
}
.videoblock video { width: 100%; height: 100%; object-fit: cover; display: block; }
.videoblock::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 9, 10, 0.8), transparent);
}
.vb-label {
  position: absolute; left: clamp(16px, 2.4vw, 26px); bottom: clamp(14px, 2vw, 22px); z-index: 1;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.vb-label span { display: block; margin-top: 5px; font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(244, 241, 234, 0.82); text-transform: none; }

/* ---------- gallery ---------- */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gallery figure { margin: 0; overflow: hidden; border-radius: 3px; background: var(--ink-3); aspect-ratio: 4 / 3; }
.gallery figure:nth-child(4n + 1) { aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.4s; filter: saturate(0.9); }
.gallery figure:hover img { transform: scale(1.05); filter: saturate(1.1); }

/* ---------- testimonials ---------- */
.img-missing { background: linear-gradient(135deg, #1c2025, #101215); min-height: 100%; }
.quotes { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.quotes::-webkit-scrollbar { height: 3px; }
.quotes::-webkit-scrollbar-thumb { background: var(--line); }
.quote {
  scroll-snap-align: start; flex: 0 0 min(420px, 84vw);
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column;
}
.quote blockquote { margin: 0 0 20px; font-family: var(--display); font-size: 1.28rem; line-height: 1.45; color: var(--ivory); }
.quote cite { font-style: normal; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: auto; }

/* ---------- foundation band ---------- */
.band { position: relative; overflow: hidden; }
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.band-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,12,0.95) 20%, rgba(10,11,12,0.55)); }
.band > .wrap { position: relative; z-index: 1; }

/* ---------- locations ---------- */
.loc {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
}
.loc h3 { font-family: var(--display); font-size: 1.5rem; color: var(--ivory); margin-bottom: 4px; }
.loc .loc-role { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.loc dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; font-size: 0.93rem; }
.loc dt { color: var(--text-faint); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.loc dd { margin: 0; color: var(--text-muted); }
.loc a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.loc a:hover { border-bottom-color: var(--accent); color: var(--ivory); }

/* ---------- forms ---------- */
.form-card {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: clamp(24px, 3.4vw, 44px);
}
.form-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > label, .fieldset-legend {
  font-size: 0.71rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; background: var(--field); color: var(--ivory);
  border: 1px solid var(--field-line); border-radius: 3px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  font-size: 0.97rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9c5bd' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 38px; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--field-hover); border-color: rgba(244,241,234,0.42); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--field-focus);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 241, 234, 0.55); }
.field .hint { font-size: 0.78rem; color: var(--text-faint); }
.field.has-error input, .field.has-error select, .field.has-error textarea, .fieldset.has-error .check-grid { border-color: #ef7f68; box-shadow: 0 0 0 3px rgba(224, 101, 79, 0.16); }
.field-error, .form-status {
  font-size: 0.8rem; color: #f08b76; display: none;
}
.field.has-error .field-error, .fieldset.has-error .field-error { display: block; }

.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; }
.check-grid { display: grid; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 4px 0; border: 1px solid transparent; border-radius: 3px; }
.check {
  display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--text-muted); cursor: pointer;
  padding: 4px 0;
}
.check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.check:hover { color: var(--ivory); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; cursor: pointer; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; }
.form-foot .fine { font-size: 0.78rem; color: var(--text-faint); max-width: 44ch; }
.form-status { display: none; margin-top: 20px; padding: 16px 18px; border-radius: 4px; font-size: 0.92rem; line-height: 1.55; }
.form-status.is-visible { display: block; }
.form-status.is-success { background: rgba(120, 190, 140, 0.1); border: 1px solid rgba(120, 190, 140, 0.35); color: #a9dfba; }
.form-status.is-error { background: rgba(224, 101, 79, 0.1); border: 1px solid rgba(224, 101, 79, 0.35); color: #f0a08b; }
.is-submitting .btn--primary { opacity: 0.6; pointer-events: none; }

/* ---------- misc ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--text-muted);
}
.sponsor-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sponsor {
  padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 3px; background: var(--ink-2);
  font-size: 0.88rem; color: var(--text-muted); text-align: center;
}
.note {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; color: var(--text-muted); font-size: 0.95rem;
}
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.media-frame { position: relative; border-radius: 4px; overflow: hidden; background: var(--ink-3); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 10; }
.caption { font-size: 0.78rem; color: var(--text-faint); margin-top: 10px; }

/* pillar theming helper */
[data-pillar="club"] { --accent: var(--brass); }
[data-pillar="cars"] { --accent: var(--steel); }
[data-pillar="school"] { --accent: var(--signal); }
[data-pillar="foundation"] { --accent: var(--ember); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media print { .reveal { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--line-soft); padding-block: clamp(48px, 6vw, 84px) 32px; }
.footer-top { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr 2fr; } }
.footer-cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.footer-col h4 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.footer-col a { display: block; padding: 5px 0; text-decoration: none; color: var(--text-muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--ivory); }
.newsletter { margin-top: 26px; }
.newsletter form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.newsletter input { flex: 1 1 200px; padding: 12px 14px; background: var(--field); border: 1px solid var(--field-line); border-radius: 3px; color: var(--ivory); }
.newsletter input::placeholder { color: rgba(244, 241, 234, 0.55); }
.newsletter input:hover { background: var(--field-hover); }
.newsletter input:focus { outline: none; border-color: var(--brass); background: var(--field-focus); box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18); }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 3px; color: var(--text-muted); transition: color 0.2s, border-color 0.2s;
}
.socials a:hover { color: var(--ivory); border-color: var(--ivory); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-soft); margin-top: clamp(36px, 5vw, 60px); padding-top: 24px;
  font-size: 0.78rem; color: var(--text-faint);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--ivory); }

/* This site's footer is marked up with .foot-grid, .foot-col and .foot-base,
   but the rules above were written for the car club's .footer-* names, so
   none of them applied: the columns collapsed and every footer link ran
   together on one line. These rules style the markup that is actually there.
   Brand column across the top on a phone, two columns of links under it,
   three on a tablet, all six side by side on a wide screen. */
.foot-grid {
  display: grid; gap: 34px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.foot-col:first-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .foot-grid { grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); }
  .foot-col:first-child { grid-column: auto; }
}
.foot-col h4 {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px;
}
.foot-col a {
  display: block; padding: 5px 0; text-decoration: none;
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.4;
}
.foot-col a:hover { color: var(--ivory); }
.foot-col .muted { font-size: 0.9rem; line-height: 1.6; }
/* On a phone the contact column takes the full width, so the email address
   and phone number sit on one line each. */
@media (max-width: 719px) { .foot-col:last-child { grid-column: 1 / -1; } }
.foot-base {
  border-top: 1px solid var(--line-soft); margin-top: clamp(36px, 5vw, 60px); padding-top: 24px;
  font-size: 0.78rem; line-height: 1.7; color: var(--text-faint);
}
.foot-base a { color: inherit; text-decoration: none; }
.foot-base a:hover { color: var(--ivory); }


/* fallback slot for any photo that could not be captured */
.ph {
  display: block; width: 100%; height: 100%; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(244,241,234,0.03) 0 1px, transparent 1px 10px),
    linear-gradient(158deg, #1d2228 0%, #101317 55%, #0b0d10 100%);
}
.ph::after {
  content: attr(data-label); position: absolute; left: 16px; right: 16px; bottom: 14px;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,241,234,0.28); line-height: 1.5;
}
.hero-media .ph, .band-media .ph, .pillar .ph { position: absolute; inset: 0; }
.pillar .ph { z-index: -2; opacity: 0.55; }
.card-media .ph, .gallery .ph, .media-frame .ph { position: absolute; inset: 0; }
.card-media, .gallery figure, .media-frame { position: relative; }
.route[hidden] { display: none !important; }



/* =====================================================================
   Brand marks — the rotating hero banner and the per-page lockups
   ===================================================================== */

.brand-mark {
  height: var(--mark-h, 56px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---- rotating banner (homepage hero) ----
   Laid out as a single band so it costs the hero as little height as
   possible; the hero already runs to 94vh before this is added. */
.brand-rail {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--line-soft);
}
.brand-rail__label {
  flex: none;
  max-width: 128px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.brand-rail__stage {
  position: relative;
  flex: 1 1 auto;
  height: 78px;
  min-width: 0;
}
.brand-rail__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  animation: brandCycle 20s var(--ease) infinite;
}
.brand-rail__item:nth-child(1) { animation-delay: 0s;  }
.brand-rail__item:nth-child(2) { animation-delay: 5s;  }
.brand-rail__item:nth-child(3) { animation-delay: 10s; }
.brand-rail__item:nth-child(4) { animation-delay: 15s; }

@keyframes brandCycle {
  0%        { opacity: 0; transform: translateY(8px); }
  4%, 26%   { opacity: 1; transform: none; }
  30%, 100% { opacity: 0; transform: translateY(-8px); }
}

.brand-rail:hover .brand-rail__item,
.brand-rail:focus-within .brand-rail__item { animation-play-state: paused; }

/* Hero needs to give the band its height back from somewhere. */
.hero--branded .hero-inner { padding-bottom: clamp(26px, 3.2vw, 44px); }
.hero--branded .hero-meta  { margin-top: clamp(20px, 3vw, 30px); }

/* No animation: show all four at once rather than freezing on one. */
@media (prefers-reduced-motion: reduce) {
  .brand-rail { flex-wrap: wrap; }
  .brand-rail__stage {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(22px, 3.5vw, 44px);
  }
  .brand-rail__item {
    position: static;
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  .brand-rail { display: block; }
  .brand-rail__label { max-width: none; margin-bottom: 12px; }
  .brand-rail__stage { height: 62px; }
  .brand-rail__item { justify-content: center; }
  .brand-mark { height: calc(var(--mark-h, 56px) * 0.78); }
}

/* Short laptop screens: claw back enough height that the band still lands
   above the fold, without touching the headline size. */
@media (min-width: 721px) and (max-height: 880px) {
  .hero--branded { min-height: min(96vh, 900px); }
  .hero--branded .hero-inner { padding-top: clamp(32px, 4vw, 52px); padding-bottom: 22px; }
  .hero--branded .hero-meta { margin-top: 18px; padding-top: 14px; }
  .hero--branded .brand-rail { margin-top: 16px; padding-top: 14px; }
  .hero--branded .brand-rail__stage { height: 62px; }
  .hero--branded .brand-mark { height: calc(var(--mark-h, 56px) * 0.8); }
}

@media (min-width: 721px) and (max-height: 770px) {
  .hero--branded .hero-inner { padding-top: 26px; padding-bottom: 16px; }
  .hero--branded .hero-meta { margin-top: 12px; padding-top: 12px; }
  .hero--branded .brand-rail { margin-top: 12px; padding-top: 12px; }
  .hero--branded .brand-rail__stage { height: 54px; }
}

/* ---- static lockup at the top of a pillar page ---- */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  margin-bottom: clamp(16px, 2.2vw, 24px);
  flex-wrap: wrap;
}
.brand-lockup__rule {
  width: 1px;
  height: 44px;
  background: var(--line);
  flex: none;
}
@media (max-width: 720px) {
  .brand-lockup__rule { display: none; }
}


/* =====================================================================
   Responsive corrections
   Found by measuring 8 pages at 10 viewport sizes.
   ===================================================================== */

/* ---- The header did not fit its own container at ANY desktop width.
   Brand (415px) + nav (606px) + actions (294px) + gaps came to 1363px
   inside a 1128px wrap, so the "Become a Member" button broke out to the
   right and was clipped by the viewport below about 1560px — at 1280px
   only 8px of a 167px button was visible. Trim the three blocks until
   they fit, and only show the full-fat header once there is room. ---- */
/* The compact header applies at EVERY width where the desktop nav shows.
   Previously it stopped at 1599px and the nav carried min-width: 0, which let
   it shrink below its own content and overlap the phone number and the CTA
   instead of clipping. Never let the nav shrink; drop the optional pieces
   instead, and only bring them back when there is provably room. */
@media (min-width: 1160px) {
  .site-header .header-phone { display: none; }
  .site-header .brand-sub { display: none; }
  .site-header .brand-name { font-size: 0.95rem; }
  .site-header .nav-link { padding: 9px 9px; font-size: 0.7rem; letter-spacing: 0.1em; }
  .site-header .nav { gap: 2px; }
  .site-header .header-inner { gap: 16px; }
}
@media (min-width: 1160px) and (max-width: 1719px) {
  /* Tighter gutters just for the header bar. The content column below keeps
     its normal padding; this is only buying room for the nav. */
  .site-header .wrap { padding-inline: 28px; }
}
@media (min-width: 1160px) and (max-width: 1379px) {
  .site-header .brand-mark { height: 26px; }
}
/* Wide enough to bring the phone number and strapline back — but only by
   letting the header span wider than the 1240px content column, otherwise
   the gap stays at a risky 16px no matter how wide the screen gets. */
@media (min-width: 1720px) {
  .site-header .wrap { max-width: 1560px; padding-inline: 40px; }
  .site-header .header-phone { display: flex; }
  .site-header .brand-sub { display: block; }
  .site-header .brand-name { font-size: 1rem; }
  .site-header .nav-link { padding: 10px 12px; font-size: 0.73rem; }
}

/* ---- Small phones (the site overflowed by up to 49px at 320px).
   The header CTA cannot fit beside the logo and the menu button, so it
   moves into the drawer, where .m-cta picks it up. ---- */
@media (max-width: 599px) {
  .site-header .header-actions .btn { display: none; }
}
@media (max-width: 400px) {
  .wrap { padding-inline: 16px; }
  .site-header .brand-mark { height: 24px; }
}

.m-cta {
  display: none;
  width: 100%;
  justify-content: center;
  margin-bottom: 22px;
}
@media (max-width: 599px) {
  .m-cta { display: inline-flex; }
}

/* ---- Text that measured below 11px, which is under the readable floor
   on a phone. ---- */
.vb-label span,
.vb-label > * { font-size: 0.72rem; }
@media (max-width: 720px) {
  .eyebrow { font-size: 0.75rem; }
  .vb-label span,
  .vb-label > * { font-size: 0.75rem; }
  .field-hint,
  .form-hint { font-size: 0.78rem; }
}

/* ---- Checkbox and radio rows measured 33px tall; 44px is the usual
   minimum for a reliable thumb tap. ---- */
@media (max-width: 900px) {
  .check,
  label.check,
  .checkbox-row,
  fieldset label {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ---- The header phone number was still showing at tablet widths, where
   it pushed the actions block off-screen (823px of content at 768px). ---- */
@media (max-width: 1159px) {
  .site-header .header-phone { display: none; }
}

/* ---- Long button labels would not wrap, so a single .btn on the Cars page
   measured 349px and forced the whole document wider than a small phone.
   Mobile browsers then stretch the fixed header to match, which is why the
   header looked like the culprit. ---- */
.btn {
  max-width: 100%;
}
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    text-align: center;
    hyphens: auto;
  }
}

/* ---- Contact page: the definition lists put term and value side by side,
   and the value overran the viewport on small phones. ---- */
@media (max-width: 480px) {
  .loc dl,
  .loc dd,
  .loc dt {
    display: block;
    width: auto;
    max-width: 100%;
  }
  .loc dd {
    margin-left: 0;
    word-break: break-word;
  }
}

/* Long email addresses and URLs should never push the page sideways. */
a[href^="mailto:"],
a[href^="tel:"] { word-break: break-word; }


/* ---- Safety net. Every content element measures within the viewport at
   320px, yet the layout viewport still reported 16px of slack. clip (not
   hidden) stops sideways scroll without breaking position: sticky or the
   horizontally scrollable quote rail. ---- */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}


/* =====================================================================
   Hero brand rail: all four marks shown together in a row, rather than
   cycling one at a time. Overrides the rotating-banner rules above.
   ===================================================================== */
.brand-rail__stage,
.hero--branded .brand-rail__stage {
  position: static;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}
.brand-rail__item {
  position: static;
  opacity: 1;
  animation: none;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* Below the width where all four fit on one line, three-plus-one leaves
   an orphan, so force a tidy 2x2 instead. */
@media (max-width: 979px) {
  .brand-rail__stage,
  .hero--branded .brand-rail__stage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
    align-items: center;
    justify-items: start;
  }
  .brand-rail__item { justify-content: flex-start; width: 100%; }
  .brand-rail__item .brand-mark { max-width: 100%; }
}


/* ---- Driving school: payment step shown after a spot is reserved ---- */
.pay-step {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.pay-step__amount {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent, #c6a15b);
}
.pay-step__detail {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.pay-step__btn { margin-bottom: 10px; }
.pay-step__later {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}


/* ---- Hero video. The poster image is the video's own first frame, so it
   paints instantly for a fast LCP and the video fades in over it without a
   visible jump. ---- */
.hero-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media video.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.hero-media video.hero-video[src] { opacity: 1; }

/* Anyone who asks for less motion keeps the still image. */
@media (prefers-reduced-motion: reduce) {
  .hero-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media video.hero-video { display: none; }
}

/* ---- The CECC line ---- */
.hero-tagline {
  margin: 0 0 18px;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--brass, #c6a15b);
}
@media (max-width: 720px) {
  .hero-tagline { margin-bottom: 14px; }
}


/* =====================================================================
   Ride of Your Life brand colour
   Buttons and accents use the cyan from the logos rather than the car
   club's brass. Sampled from the Academy mark (#01c8ff). Button text
   stays near-black: the cyan is light, so dark text gives 9:1 contrast
   where white would give about 2:1 and fail readability.
   ===================================================================== */
:root {
  --royl: #01c8ff;
  --royl-deep: #00a8d8;
  --accent: var(--royl);
}
[data-pillar="foundation"],
[data-pillar="school"],
[data-pillar="club"],
[data-pillar="cars"] {
  --accent: var(--royl);
}
.btn--primary {
  background: var(--royl);
  color: #05171d;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--royl-deep);
  color: #05171d;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--royl);
  color: var(--royl);
}


/* ---- Hero: the three marks sit where the location line used to, above the
   headline. The location line moves below the intro paragraph. ---- */
.hero-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.hero-logos .brand-rail__item { display: inline-flex; align-items: center; }
.hero-copy .eyebrow { margin-top: clamp(14px, 2vw, 20px); }

@media (max-width: 640px) {
  .hero-logos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 14px 22px;
  }
  .hero-logos .brand-mark { height: calc(var(--mark-h, 56px) * .8); }
}


/* ---- Card grids. The design system defines .card but never a container to
   lay them out in, so card sets were stacking full-width. ---- */
.cards {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cards .card > h3 { margin-top: 0; }
.cards .card > p:last-child { margin-bottom: 0; }


/* ---- Three equal calls to action ---- */
.btn-row--three { flex-wrap: wrap; gap: 12px; }
.btn-row--three .btn { flex: 0 1 auto; }
@media (max-width: 560px) {
  .btn-row--three { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .btn-row--three .btn { width: 100%; justify-content: center; }
}


/* ---- Donate page ----
   The one-step form needs the spacing the stepped forms get from .wiz__panel,
   and a real divider: a bare <hr> renders as a browser default rule, which on
   this dark card reads as a bright white line. */
.form-solo > .field,
.form-solo > .form-grid { margin-bottom: clamp(18px, 2.2vw, 24px); }
.form-solo .hint { display: block; margin-top: 7px; }
.form-solo__rule {
  height: 1px;
  border: 0;
  margin: clamp(26px, 3.4vw, 36px) 0 clamp(22px, 2.8vw, 28px);
  background: var(--line, rgba(244, 241, 234, .12));
}
.form-solo .wiz__q { margin-bottom: 16px; }

/* amount picker */
.amounts { display: flex; flex-wrap: wrap; gap: 10px; }
.amt {
  flex: 1 1 auto;
  min-width: 92px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text, #f4f1ea);
  background: transparent;
  border: 1px solid var(--line-soft, rgba(244, 241, 234, .14));
  border-radius: 3px;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.amt:hover { border-color: var(--accent, #01c8ff); color: var(--accent, #01c8ff); }
.amt.is-on {
  background: var(--accent, #01c8ff);
  border-color: var(--accent, #01c8ff);
  color: #05171d;                     /* same dark ink as .btn--primary */
}
.amt:focus-visible { outline: 2px solid var(--accent, #01c8ff); outline-offset: 2px; }
.amount-custom { margin-top: 16px; }
.money { position: relative; }
.money__sign {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint, rgba(244, 241, 234, .6));
  pointer-events: none;
}
.money input { padding-left: 28px; }
#donate-status .pay-step__btn { margin-top: 12px; }
@media (max-width: 420px) {
  .amounts { display: grid; grid-template-columns: 1fr 1fr; }
  .amt { min-width: 0; }
}


/* one-time vs monthly */
.freq {
  display: inline-flex;
  width: fit-content;          /* .field children stretch by default */
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line-soft, rgba(244, 241, 234, .14));
  border-radius: 100px;
  margin-bottom: 18px;
}
.freq__opt {
  padding: 9px 20px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted, rgba(244, 241, 234, .76));
  background: transparent;
  border: 0;
  border-radius: 100px;
  transition: background 160ms ease, color 160ms ease;
}
.freq__opt:hover { color: var(--accent, #01c8ff); }
.freq__opt.is-on { background: var(--accent, #01c8ff); color: #05171d; }
.freq__opt:focus-visible { outline: 2px solid var(--accent, #01c8ff); outline-offset: 2px; }
.freq-note { max-width: 56ch; }
@media (max-width: 420px) {
  .freq { display: flex; width: 100%; }
  .freq__opt { flex: 1; padding: 11px 10px; }
}


/* A date chosen from the list above flashes once in the form, so the jump
   does not look like it did nothing. */
@keyframes field-filled {
  0%   { box-shadow: 0 0 0 0 rgba(1, 200, 255, .55); }
  100% { box-shadow: 0 0 0 10px rgba(1, 200, 255, 0); }
}
.field.is-filled select,
.field.is-filled input {
  border-color: var(--accent, #01c8ff);
  animation: field-filled 1.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .field.is-filled select,
  .field.is-filled input { animation: none; }
}

/* ---- Driving school registration -------------------------------------
   The form is the point of the page, so it is given a panel of its own
   rather than sitting flat in the section. Enough contrast to read as a
   thing you act on, not so much that it fights the page. */
#dds-form {
  background: var(--ink-3, rgba(244, 241, 234, 0.035));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(20px, 3.2vw, 36px);
  box-shadow: var(--shadow-lg);
}
/* "(optional)" beside a label — quieter than the field name it follows. */
.opt { font-weight: 400; font-size: 0.82em; color: var(--text-faint); letter-spacing: 0; }
@media (max-width: 560px) {
  #dds-form { padding: 18px 14px; }
}

/* The "see more" button sits under the class list, centred and clearly
   secondary to the Register buttons above it. */
.more-classes { display: flex; justify-content: center; margin-top: 18px; }
.more-classes[hidden] { display: none; }

/* Payment page heading. Headings are reset to margin: 0 across the site, which
   is right where a paragraph under one is a subtitle. Here it is a separate
   thought — the heading asks for the payment, the line below reassures them
   their seat is held — so the two need air between them. */
.pay-head .display-m + .muted { margin-top: 0.85rem; }
/* A section head normally opens a long section and earns up to 60px beneath
   it. This one opens a short page where the next line is part of the same
   thought, so that much air reads as a missing paragraph. */
.pay-head { margin-bottom: clamp(14px, 2vw, 20px); }

/* Payment page: what the course is, above the payment itself. Set as running
   text rather than another card — it is there to reassure someone who has
   stepped away from the registration, not to be scanned. */
.pay-about { max-width: 60ch; margin-bottom: clamp(26px, 4vw, 38px); }
.pay-about p { margin: 0 0 0.9rem; }
.pay-about p:last-child { margin-bottom: 0; font-size: 0.92rem; }

/* What they are paying for, when the link already knows. Bordered because it
   is a statement of fact about money, and should read as a receipt rather
   than as more of the page's prose. */
.pay-summary {
  border: 1px solid var(--line, #2b3338);
  border-radius: 6px;
  padding: clamp(16px, 3vw, 22px);
  margin-bottom: clamp(22px, 3.5vw, 30px);
  background: var(--ink-2, rgba(255, 255, 255, 0.02));
}
.pay-summary dl {
  margin: 0;
  display: grid;
  gap: 14px 28px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pay-summary dt {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 4px;
}
.pay-summary dd {
  margin: 0; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.pay-summary #sum-total { font-weight: 600; }
.pay-summary .fine { margin: 16px 0 0; }
.pay-summary[hidden] { display: none; }

/* The name line and the Edit control share the foot of the summary. They wrap
   onto separate lines before either gets squeezed — an email address is long
   and must not be clipped to keep a button on the same row. */
.pay-summary__foot {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: center; justify-content: space-between;
  margin-top: 18px;
}
.pay-summary__foot .fine { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Edit is a quiet control: it changes nothing on its own, it only reveals the
   fields that were filled in from the registration. Styled as an outline
   rather than a second primary button, so it never competes with Pay. */
.pay-edit {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); background: none;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 13px; cursor: pointer;
}
.pay-edit svg { width: 13px; height: 13px; flex: none; }
.pay-edit:hover { color: var(--accent); border-color: var(--accent); }
.pay-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .pay-edit { transition: color 140ms ease, border-color 140ms ease; }
}


/* =====================================================================
   Blog — index listing and long-form article prose
   ===================================================================== */

/* These three classes were already referenced by the privacy and academy
   pages but had never been defined, so those headings fell back to the
   browser's own sizes at weight 400 — noticeably smaller than the design
   intends. Defining them here styles the blog and repairs those two pages
   in the same stroke. */
.h1 { font-family: var(--display); font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.08; letter-spacing: -0.015em; }
.h2 { font-family: var(--display); font-size: clamp(1.55rem, 2.8vw, 2.2rem);  line-height: 1.16; }
.h3 { font-family: var(--display); font-size: clamp(1.22rem, 1.9vw, 1.55rem); line-height: 1.26; }

/* ---------- the index ---------- */
.post-list {
  display: grid; gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
}
.post-card {
  display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 32px);
  text-decoration: none; color: inherit;
}
.post-card:hover { border-color: var(--line); background: var(--ink-3); }
.post-card .h3 { margin-bottom: 0.7rem; }
.post-card p { color: var(--text-muted); font-size: 0.95rem; }
.post-card__kicker {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem;
}
.post-card__more {
  margin: auto 0 0; padding-top: 1.1rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .post-card { transition: border-color .3s, transform .3s var(--ease), background-color .3s; }
  .post-card:hover { transform: translateY(-3px); }
}

/* ---------- article head ---------- */
.post-head { padding-block: clamp(44px, 7vw, 92px) clamp(10px, 2vw, 22px); }
.post-head .h1 { margin-bottom: 1.2rem; }
.post-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline;
  font-size: 0.8rem; color: var(--text-faint);
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
}

/* The short answer that opens each article. It is there for the reader who
   wants the conclusion and nothing else, and it is the block most likely to
   be lifted into a search result, so it has to stand alone. */
.answer {
  border-left: 2px solid var(--accent);
  background: var(--ink-2);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 2rem 0 0;
}
.answer p:last-child { margin-bottom: 0; }
.answer strong { color: var(--ivory); }

/* ---------- article body ---------- */
.prose { font-size: 1.02rem; line-height: 1.75; max-width: 68ch; }
/* One flow rule for the whole column. It is written on the child rather than
   on each element because it has to out-rank the element selectors in the
   reset (p, ul, h*) — a `.prose p` carrying its own margin would win on
   specificity and collapse the gap between paragraphs. */
.prose > * { margin-top: 1.15em; margin-bottom: 0; }
.prose > :first-child { margin-top: 0; }
.prose p { color: var(--text-muted); }
.prose .h2 { margin-top: 2.6em; color: var(--ivory); }
.prose .h3 { margin-top: 2em; color: var(--ivory); }
.prose .h2 + *, .prose .h3 + * { margin-top: 0.85em; }
.prose strong { color: var(--ivory); font-weight: 600; }

.prose a {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--accent); }

.prose ul, .prose ol { margin-left: 0; padding-left: 1.3em; color: var(--text-muted); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.55em; padding-left: 0.25em; }
.prose li::marker { color: var(--accent); }

.prose blockquote {
  margin: 2em 0; padding-left: 1.3em;
  border-left: 2px solid var(--line);
  font-family: var(--display); font-size: 1.22rem; line-height: 1.45;
  color: var(--ivory);
}
.prose blockquote p { color: inherit; }

/* A fact worth pulling out of the run of text — a statistic, a rule, a
   caveat the reader should not skim past. */
.callout {
  background: var(--ink-3); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(18px, 2.2vw, 24px);
  font-size: 0.95rem;
}
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout__label {
  display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem;
}

/* ---------- tables ---------- */
.prose .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%; min-width: 440px; border-collapse: collapse;
  font-size: 0.92rem; text-align: left;
}
.prose caption {
  caption-side: bottom; padding-top: 0.9rem;
  font-size: 0.8rem; color: var(--text-faint); text-align: left;
}
.prose th, .prose td {
  padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.prose thead th {
  color: var(--ivory); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom-color: var(--line);
}
.prose tbody th { color: var(--ivory); font-weight: 600; }

/* ---------- sources ---------- */
.sources { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); }
.sources h2 {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 1rem;
}
.sources ol { list-style: decimal; padding-left: 1.3em; font-size: 0.86rem; color: var(--text-faint); }
.sources li { margin-bottom: 0.6em; }
.sources a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.sources a:hover { color: var(--accent); }

/* ---------- the call to action that closes each article ---------- */
.post-cta {
  margin-top: 3rem; padding: clamp(26px, 3.4vw, 40px);
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.post-cta .h3 { margin-bottom: 0.8rem; }
.post-cta p { color: var(--text-muted); max-width: 54ch; }
.post-cta .btn-row { margin-top: 1.4rem; }

/* ---------- read next ---------- */
.post-next { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line-soft); }
.post-next__label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.1rem;
}
.post-next ul { display: grid; gap: 0.7rem; }
.post-next a {
  color: var(--text-muted); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px;
}
.post-next a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- breadcrumb ---------- */
.crumbs { font-size: 0.78rem; color: var(--text-faint); margin-bottom: 1.4rem; }
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { padding: 0 0.45rem; opacity: 0.5; }

/* On a phone the comparison tables scroll sideways inside their own box. That
   is invisible unless you say so, and a reader who does not scroll simply
   never sees the third column. */
.table-hint { display: none; font-size: 0.78rem; color: var(--text-faint); margin-top: 0.7rem; }
@media (max-width: 640px) { .table-hint { display: block; } }


/* =====================================================================
   Driving audit — /driving-school/audit/
   Eight questions for parents who are not ready to book yet. The idea the
   page is built on is the drive itself: a road line runs through it — the
   route on the intro, the progress strip over each question, the trip log on
   the results. That line is the one bold thing; everything else stays quiet.
   Name and email are asked for only after the last question.
   ===================================================================== */

/* The content area is light; the header and footer stay dark like every other
   page. Tokens are redefined inside this wrapper only, so the shared
   components (fields, buttons, form messages) follow without restyling. The
   site's bright cyan reads at 1.8:1 on white, so the action colour here is a
   deeper blue (5.4:1). Every text colour clears 4.5:1 on its background. */
.page.page--light {
  --ink:        #eef1f3;   /* concrete */
  --ink-2:      #ffffff;   /* the answer sheet */
  --ink-3:      #e8f1f6;   /* a chosen answer */
  --ink-4:      #dde3e7;
  --line:       rgba(29, 33, 38, 0.20);
  --line-soft:  rgba(29, 33, 38, 0.10);
  --ivory:      #1d2126;   /* asphalt — headings */
  --text:       rgba(29, 33, 38, 0.94);
  --text-muted: rgba(29, 33, 38, 0.74);
  --text-faint: rgba(29, 33, 38, 0.64);
  --accent:     #0b6e9c;   /* signal blue */
  --field:       #ffffff;
  --field-hover: #fbfcfd;
  --field-focus: #ffffff;
  --field-line:  rgba(29, 33, 38, 0.30);
  --asphalt:     #1d2126;
  --lane:        #f2c230;  /* centre-line yellow: drawn, never used for text */
  --ok:          #2a7049;
  --miss:        #a24f19;
  background: var(--ink);
  color: var(--text);
  color-scheme: light;
}
.page--light .btn--primary { background: var(--accent); color: #ffffff; }
.page--light .btn--primary:hover { background: var(--asphalt); color: #ffffff; }
.page--light .btn--primary[disabled] { opacity: .4; cursor: not-allowed; }
.page--light .btn:focus-visible,
.page--light .audit-opt:focus-visible,
.page--light .audit-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.page--light .field > label { text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 500; color: var(--ivory); }
.page--light .field input::placeholder,
.page--light .field textarea::placeholder { color: rgba(29, 33, 38, 0.5); }
.page--light .field input:hover { border-color: rgba(29, 33, 38, 0.45); }
.page--light .field.has-error input { border-color: #b83b26; box-shadow: 0 0 0 3px rgba(184, 59, 38, 0.12); }
.page--light .field-error { color: #b83b26; }
.page--light .form-status.is-success { background: rgba(42, 112, 73, 0.08); border-color: rgba(42, 112, 73, 0.35); color: var(--ok); }
.page--light .form-status.is-error { background: rgba(184, 59, 38, 0.07); border-color: rgba(184, 59, 38, 0.35); color: #9c321f; }

.audit { min-height: 72vh; }
.audit-screen[hidden] { display: none; }
.audit-col { max-width: 720px; margin-inline: auto; }

/* ---------- type ---------- */
.audit-title {
  font-family: var(--display); font-weight: 400; color: var(--ivory);
  font-size: clamp(2.7rem, 7vw, 4.6rem); line-height: 1.0; letter-spacing: -0.012em;
  max-width: 16ch;
}
.audit-lede { font-size: clamp(1.04rem, 1.5vw, 1.16rem); line-height: 1.62; color: var(--text-muted); max-width: 46ch; margin: 1.4rem 0 0; }
.audit-lede--small { font-size: 0.98rem; margin-top: 0.9rem; }
.audit-meta { font-size: 0.9rem; color: var(--text-faint); margin: 0; }
.audit-start { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 2.2rem; }
.audit-btn { padding-inline: 2.1em; }

/* ---------- the road ---------- */
/* A strip of asphalt with a dashed centre line. The part already driven is
   painted solid. Used three ways: the route, progress, and the trip log. */
.audit-road {
  position: relative; height: 12px; border-radius: 2px; background: var(--asphalt); overflow: hidden;
}
.audit-road::before {        /* the dashed line still ahead */
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 14px, transparent 14px 26px);
  opacity: .55;
}
.audit-road__done {          /* the solid line already driven */
  position: absolute; left: 0; top: 5px; height: 2px; width: 0; background: var(--lane);
  box-shadow: 0 0 0 1px rgba(242, 194, 48, .15);
}
@media (prefers-reduced-motion: no-preference) {
  .audit-road__done { transition: width .45s var(--ease); }
}

/* ---------- intro ---------- */
.audit-intro { display: grid; gap: clamp(40px, 6vw, 88px); align-items: start; }
@media (min-width: 900px) {
  .audit-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.audit-route {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px);
}
.audit-route h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.45rem; color: var(--ivory);
  margin: 0 0 1.2rem;
}
.audit-route ol { position: relative; margin: 0; padding: 0 0 0 44px; list-style: none; counter-reset: stop; }
.audit-route ol::before {    /* the road the stops sit on */
  content: ""; position: absolute; left: 6px; top: 2px; bottom: 2px; width: 16px; border-radius: 2px;
  background:
    repeating-linear-gradient(180deg, var(--lane) 0 9px, transparent 9px 17px) center / 2px 100% no-repeat,
    var(--asphalt);
}
.audit-route li {
  position: relative; counter-increment: stop;
  padding: 8px 0; font-size: 0.97rem; color: var(--text); line-height: 1.4;
}
.audit-route li::before {
  content: counter(stop); position: absolute; left: -42px; top: 6px;
  width: 24px; height: 24px; border-radius: 50%; background: #ffffff; color: var(--asphalt);
  border: 2px solid var(--asphalt); box-sizing: border-box;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 600;
}

/* ---------- a question ---------- */
.audit-step {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: .9rem 0 1.4rem; font-size: 0.92rem; color: var(--text-faint);
}
.audit-step strong { color: var(--ivory); font-weight: 600; }
.audit-q {
  font-family: var(--display); font-weight: 500; color: var(--ivory);
  font-size: clamp(1.7rem, 4.6vw, 2.45rem); line-height: 1.16; letter-spacing: -0.005em;
  margin: 0 0 1.6rem; outline: none;
}
/* The answers sit on one sheet, divided by rules, rather than four cards. */
.audit-sheet {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.audit-opt {
  position: relative; display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left;
  min-height: 60px; padding: 18px 22px 18px 20px; background: none; border: 0;
  border-top: 1px solid var(--line-soft);
  font: inherit; font-size: 1.02rem; line-height: 1.45; color: var(--text); cursor: pointer;
}
.audit-opt:first-child { border-top: 0; }
.audit-opt:hover { background: #f6f8f9; }
.audit-opt b {
  flex: none; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 600; color: var(--text-faint);
}
.audit-opt[aria-pressed="true"] { background: var(--ink-3); }
.audit-opt[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent);
}
.audit-opt[aria-pressed="true"] b { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.audit-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1.8rem; }
.audit-back {
  background: none; border: 0; padding: 12px 4px; cursor: pointer;
  font: inherit; font-size: 0.95rem; color: var(--text-muted);
}
.audit-back:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.audit-back[disabled] { visibility: hidden; }

/* ---------- the email step ---------- */
.audit-gate h2 {
  font-family: var(--display); font-weight: 400; color: var(--ivory);
  font-size: clamp(2.1rem, 5.4vw, 3.2rem); line-height: 1.06; margin: 2.2rem 0 0;
}
.audit-gate form { margin-top: 2rem; }
.audit-gate .form-status { margin-top: 1rem; }
.audit-gate .fine { margin-top: 1.2rem; color: var(--text-faint); }
.audit-gate .fine a { color: var(--accent); }

/* ---------- results ---------- */
.audit-hello { font-size: 1rem; color: var(--text-muted); margin: 0 0 .4rem; }
.audit-score { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.audit-score strong {
  font-family: var(--display); font-weight: 400; color: var(--ivory);
  font-size: clamp(4.6rem, 15vw, 7rem); line-height: .9;
}
.audit-score span { font-size: 1.05rem; color: var(--text-muted); }
.audit-verdict {
  font-family: var(--display); font-weight: 500; color: var(--ivory);
  font-size: clamp(1.75rem, 4.4vw, 2.4rem); line-height: 1.12; margin: 1.1rem 0 0;
}
.audit-note { font-size: 0.92rem; color: var(--miss); margin: .8rem 0 0; }

/* The trip log: the same road, cut into the eight questions. */
.audit-log {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  list-style: none; margin: 2.2rem 0 0; padding: 0;
}
.audit-log li { display: grid; gap: 8px; text-align: center; font-size: 0.8rem; color: var(--text-faint); }
.audit-log li::before {
  content: ""; height: 10px; border-radius: 2px; background: var(--asphalt);
  box-shadow: inset 0 -3px 0 var(--seg, var(--asphalt));
}
.audit-log li.ok   { --seg: var(--ok); }
.audit-log li.miss { --seg: var(--miss); }
.audit-log li.ok::before   { background: var(--ok); }
.audit-log li.miss::before { background: var(--miss); }
.audit-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 1rem 0 0; font-size: 0.88rem; color: var(--text-muted); }
.audit-legend span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px;
}
.audit-legend .ok::before { background: var(--ok); }
.audit-legend .miss::before { background: var(--miss); }
@media (prefers-reduced-motion: no-preference) {
  .audit-log.is-drawn li::before { animation: audit-seg .38s var(--ease) both; animation-delay: calc(var(--n) * 70ms); }
}
@keyframes audit-seg { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

.audit-group {
  font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ivory);
  margin: 2.8rem 0 .9rem;
}
.audit-review {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
}
.audit-item { position: relative; padding: 22px 24px 22px 26px; border-top: 1px solid var(--line-soft); }
.audit-item:first-child { border-top: 0; }
.audit-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.audit-item.miss::before { background: var(--miss); }
.audit-item.ok::before { background: var(--ok); }
.audit-item h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ivory); margin: 0 0 .45rem; }
.audit-item p { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--text-muted); }
.audit-item p + p { margin-top: .55rem; font-size: 0.88rem; color: var(--text-faint); }

/* The answers they got right fold away, so the way to book sits straight
   after the ones worth talking through. */
.audit-right { margin-top: 1.4rem; }
.audit-right summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.98rem; font-weight: 500; color: var(--accent); padding: 8px 0;
}
.audit-right summary::-webkit-details-marker { display: none; }
.audit-right summary::before {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s var(--ease);
}
.audit-right[open] summary::before { transform: rotate(45deg); }
.audit-right summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.audit-right .audit-review { margin-top: .8rem; }

/* The close: dark, like the rest of the site, with the road painted along
   its top edge. */
.audit-cta {
  position: relative; margin-top: 3rem; overflow: hidden;
  background: var(--asphalt); color: rgba(244, 241, 234, .82); border-radius: var(--radius);
  padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 44px);
}
.audit-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 18px, transparent 18px 32px);
}
.audit-cta h3 {
  font-family: var(--display); font-weight: 500; color: #f4f1ea;
  font-size: clamp(1.6rem, 3.8vw, 2.1rem); line-height: 1.15; margin: 0 0 .9rem;
}
.audit-cta p { margin: 0; max-width: 52ch; line-height: 1.6; }
.audit-cta .audit-cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 1.6rem; }
.page--light .audit-cta .btn--primary { background: var(--royl); color: #0a0b0c; }
.page--light .audit-cta .btn--primary:hover { background: #f4f1ea; color: #0a0b0c; }
.audit-cta a.audit-cta__link { color: #f4f1ea; font-size: .95rem; text-underline-offset: 3px; }
.audit-cta .btn:focus-visible, .audit-cta a:focus-visible { outline: 2px solid var(--royl); outline-offset: 3px; }

@media (max-width: 560px) {
  .audit-opt { padding: 16px 16px 16px 16px; gap: 14px; font-size: 1rem; }
  .audit-item { padding: 20px 18px 20px 20px; }
  .audit-log li { font-size: 0.72rem; }
  .audit-nav .btn { padding-inline: 1.8em; }
}

/* ---------- Register now: the bar, and the pop-up it opens ----------
   The bar rides along under the header through every screen of the audit,
   so booking is one tap away at any question. */
.audit-bar {
  position: sticky; top: var(--header-h); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px 18px;
  margin: 0 0 clamp(30px, 4.5vw, 52px); padding: 9px 9px 9px 18px;
  background: #ffffff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(29, 33, 38, 0.07);
}
.audit-bar p { margin: 0; font-size: 0.95rem; line-height: 1.35; color: var(--text-muted); }
.audit-bar strong { color: var(--ivory); font-weight: 600; }
.audit-bar .btn { flex: none; }
@media (max-width: 520px) {
  .audit-bar { padding: 8px 8px 8px 14px; }
  .audit-bar span { display: none; }      /* just "Ready to book?" beside the button */
}

.page--light .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231d2126' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

/* The pop-up. A centred sheet on a wide screen; on a phone it takes the
   whole screen, which is what a long form needs there. Its heading stays put
   while the form scrolls under it, so the close button is always in reach. */
.reg-dialog {
  width: min(700px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0;
  border-radius: 6px; background: transparent; color: var(--text); overflow: visible;
}
.reg-dialog::backdrop { background: rgba(13, 15, 18, 0.62); }
.reg-dialog__panel {
  display: flex; flex-direction: column; max-height: calc(100dvh - 48px);
  background: var(--ink-2); border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.reg-dialog__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 24px 22px 18px 28px; border-bottom: 1px solid var(--line-soft); background: var(--ink-2);
}
.reg-dialog__head h2 {
  font-family: var(--display); font-weight: 500; color: var(--ivory);
  font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1.1; margin: 0; outline: none;
}
.reg-dialog__head p { margin: .55rem 0 0; font-size: 0.93rem; line-height: 1.5; color: var(--text-muted); max-width: 52ch; }
.reg-dialog__close {
  flex: none; width: 44px; height: 44px; margin: -6px -4px 0 0; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 50%; color: var(--ivory); cursor: pointer;
}
.reg-dialog__close:hover { background: var(--ink-3); }
.reg-dialog__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reg-dialog__body { overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 30px; }
.reg-dialog__body form { margin: 0; }
html.has-dialog { overflow: hidden; }
/* On the driving school page the form gets a panel of its own. Inside the
   pop-up the pop-up is the panel, so the form sits flat in it. */
.reg-dialog #dds-form { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
@media (max-width: 600px) {
  .reg-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .reg-dialog__panel { height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; }
  .reg-dialog__head { padding: calc(14px + env(safe-area-inset-top)) 12px 14px 20px; }
  .reg-dialog__body { padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .reg-dialog[open] .reg-dialog__panel { animation: reg-in .22s var(--ease) both; }
  .reg-dialog[open]::backdrop { animation: reg-fade .22s ease both; }
}
@keyframes reg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes reg-fade { from { opacity: 0; } to { opacity: 1; } }

/* The header is transparent until the page scrolls, which suits the dark photo
   heroes elsewhere. Over a light content area that leaves its links and menu
   icon nearly invisible, so a page that starts light keeps it solid from the
   top. */
.site-header.site-header--solid {
  background: rgba(10, 11, 12, 0.97);
  border-bottom-color: rgba(244, 241, 234, 0.07);
}

/* The header is fixed over the top of the page. Pages that open with a photo
   hero already pad that hero by the header's height; a page that opens with an
   ordinary section did not, so its first lines sat underneath the header —
   hidden outright once the header turned solid. That was the audit, the pay
   page, the blog, privacy and 404. Clear the header, then keep the usual
   breathing room. */
.page > .section:first-child {
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 64px));
}