/* ==========================================================================
   ESH'S TRUCK DRIVING SCHOOL — components.css
   Buttons · plates · section headers · hero · The Ladder · cards · steps ·
   fleet · slider · accordion · lane rules · CTA band
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  padding: var(--space-xs) var(--space-md);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Fill sweep: a pseudo-element scales in from the left rather than the
   background colour cross-fading. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  width: .875rem;
  height: .875rem;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(.25rem); }

.btn--primary {
  background-color: var(--red);
  color: var(--surface);
  box-shadow: var(--shadow-red);
}
.btn--primary::before { background-color: var(--red-deep); }

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

/* Ghost button sitting on a dark field. */
.u-on-dark .btn--ghost,
.hero .btn--ghost,
.section--dark .btn--ghost,
.cta-band .btn--ghost {
  border-color: var(--bone-a70);
  color: var(--bone);
}
.u-on-dark .btn--ghost::before,
.hero .btn--ghost::before,
.section--dark .btn--ghost::before,
.cta-band .btn--ghost::before { background-color: var(--bone); }
.u-on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.cta-band .btn--ghost:hover { color: var(--ink); border-color: var(--bone); }

.btn--sm {
  min-height: 2.375rem;
  padding: var(--space-3xs) var(--space-sm);
  font-size: .75rem;
}
.btn--lg {
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--step-0);
}
.btn--block { width: 100%; }

/* Quiet text link with an animated rule — used for "more about us" style
   links where a full button would shout. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.u-on-dark .link-more,
.section--dark .link-more { color: var(--bone); }
.link-more__rule {
  display: block;
  width: 2.25rem;
  height: 2px;
  background-color: var(--red);
  transition: width var(--dur-mid) var(--ease-out);
}
.link-more:hover .link-more__rule { width: 3.5rem; }

/* --------------------------------------------------------------------------
   2. PLATES & SECTION HEADERS
   The load-rating plate is the site's recurring type object: a hairline box,
   a mono label, tabular values. It borrows from compliance stickers rather
   than from UI badge conventions.
   -------------------------------------------------------------------------- */
.section-head { margin-block-end: var(--space-xl); }

.section-head__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
  padding: .3125rem var(--space-2xs) .3125rem 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--red);
}
.section-head__label::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  background-color: var(--red);
  flex: none;
}

.section-head__title { max-width: 20ch; }
.section-head__title--wide { max-width: 26ch; }

.section-head__intro {
  margin-block-start: var(--space-md);
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted-strong);
}
.section--dark .section-head__intro,
.section--asphalt .section-head__intro { color: var(--muted-on-dark); }

/* ---- The load plate ------------------------------------------------------ */
.plate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--hairline) solid var(--line);
  background-color: var(--surface);
}
@media (min-width: 48em) { .plate { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plate--on-dark {
  border-color: var(--line-on-dark);
  background-color: rgba(11, 11, 12, .55);
  backdrop-filter: blur(2px);
}

.plate__cell {
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--hairline) solid var(--line);
  border-inline-start: var(--hairline) solid var(--line);
}
.plate--on-dark .plate__cell { border-color: var(--line-on-dark); }
/* Remove the doubled edges: only interior rules should show. */
.plate__cell:nth-child(-n + 2) { border-block-start: 0; }
.plate__cell:nth-child(odd) { border-inline-start: 0; }
@media (min-width: 48em) {
  .plate__cell { border-block-start: 0; }
  .plate__cell:nth-child(odd) { border-inline-start: var(--hairline) solid var(--line); }
  .plate--on-dark .plate__cell:nth-child(odd) { border-inline-start-color: var(--line-on-dark); }
  .plate__cell:first-child { border-inline-start: 0; }
}

.plate__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.plate--on-dark .plate__label { color: var(--muted-on-dark); }

.plate__value {
  display: block;
  margin-block-start: .125rem;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plate--on-dark .plate__value { color: var(--surface); }

/* --------------------------------------------------------------------------
   3. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--ink);
  color: var(--bone);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Scrim. Weighted to the left, where the headline sits, so white text over
   the image clears AA without flattening the photograph on the right. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, var(--ink) 0%, var(--ink-a90) 32%, var(--ink-a72) 58%, var(--ink-a55) 100%),
    linear-gradient(to top, var(--ink) 0%, transparent 42%);
}

/* The red motion arc from the logo, redrawn at architectural scale. It sweeps
   from behind the headline and exits the right edge. */
.hero__arc {
  position: absolute;
  inset-block-start: 12%;
  inset-inline-start: -8%;
  z-index: -1;
  width: 128%;
  height: auto;
  pointer-events: none;
  opacity: .9;
  will-change: transform;
}
.hero__arc path {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-xl);
  min-height: 100vh;
  min-height: 100dvh;
  padding-block:
    calc(var(--header-total) + var(--space-2xl))
    calc(var(--space-2xl) + var(--space-md));
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone);
}
.hero__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 3px;
  background-color: var(--red);
  flex: none;
}

.hero__title {
  font-size: var(--step-5);
  max-width: 17ch;
}
.hero__title span { display: block; }

.hero__sub {
  margin-block-start: var(--space-md);
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--bone);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.hero__cue {
  position: absolute;
  /* Physical properties, not logical ones: this element sets
     writing-mode: vertical-rl, which rotates its own inline/block axes and
     would send inset-inline-end to the bottom edge instead of the right. */
  bottom: var(--space-md);
  right: var(--gutter);
  z-index: var(--z-base);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-rl;
}
@media (min-width: 64em) { .hero__cue { display: flex; } }
.hero__cue svg { width: .75rem; height: 1.25rem; }

/* --------------------------------------------------------------------------
   4. THE LADDER — signature element
   The seven services are drawn as stations along one road rather than as a
   grid of equal tiles, because they are not equal: they are a progression.
   · Each station's vehicle diagram shares a single 190×44 viewBox, so the
     vehicles are drawn to a common scale and visibly grow as you read down.
   · HR → MC is an express lane bracketed alongside the road, because that
     product bypasses HC.
   · Bus Driver Authority is a spur, because an authority is an endorsement
     rather than a rung on the ladder.
   -------------------------------------------------------------------------- */
.ladder {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  row-gap: var(--space-sm);
}
@media (min-width: 30em) { .ladder { grid-template-columns: 1.75rem minmax(0, 1fr); } }

.station {
  grid-column: 2;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: stretch;
}
@media (min-width: 30em) { .station { grid-template-columns: 3.5rem minmax(0, 1fr); } }

/* ---- Rail: the code plate with the lane line running behind it ----------- */
.station__rail {
  position: relative;
  display: flex;
  justify-content: center;
  /* flex-start, not the default stretch: the code is a compact stamp with the
     lane line running past it, not a full-height bar down the side. */
  align-items: flex-start;
  padding-block-start: var(--space-sm);
}
.station__rail::before {
  content: "";
  position: absolute;
  inset-block: 0 calc(var(--space-sm) * -1);
  inset-inline-start: 50%;
  width: 2px;
  margin-inline-start: -1px;
  background-image: linear-gradient(to bottom, var(--line) 50%, transparent 50%);
  background-size: 2px 14px;
  transform-origin: top center;
}
.station--last .station__rail::before { inset-block-end: 50%; }
.station--spur .station__rail::before { background-image: none; }

.station__code {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: var(--space-3xs);
  background-color: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .06em;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.station--spur .station__code {
  background-color: transparent;
  color: var(--ink);
  border: var(--hairline) dashed var(--line);
  font-size: var(--step--1);
}

/* ---- Body ---------------------------------------------------------------- */
.station__body {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  background-color: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
@media (min-width: 40em) {
  .station__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    align-items: center;
    column-gap: var(--space-md);
    padding: var(--space-md);
  }
}

/* Red edge reveals along the leading edge on hover. */
.station__body::before {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -1px;
  width: 3px;
  background-color: var(--red);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.station__body:hover,
.station__body:focus-visible {
  transform: translateX(3px);
  border-color: var(--muted);
  box-shadow: var(--shadow-md);
}
.station__body:hover::before,
.station__body:focus-visible::before { transform: scaleY(1); }

.station__name {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
}
.station__name svg {
  width: .875rem;
  height: .875rem;
  color: var(--red);
  transition: transform var(--dur-fast) var(--ease-out);
}
.station__body:hover .station__name svg { transform: translateX(.25rem); }

.station__desc {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

/* The schematic. Drawn like a load-plate diagram, not an illustration. */
.station__diagram {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  margin-block-start: var(--space-2xs);
  color: var(--ink);
  transition: transform var(--dur-mid) var(--ease-out);
}
@media (min-width: 40em) {
  .station__diagram {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }
}
.station__body:hover .station__diagram { transform: translateX(4px); }

.station__diagram .dgm-body {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.station__diagram .dgm-wheel { fill: currentColor; }
.station__diagram .dgm-ground {
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 10 8;
}

/* ---- Express lane -------------------------------------------------------- */
.ladder__express {
  grid-column: 1;
  grid-row: 3 / 6;      /* HR → HC → MC */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-sm);
}
.ladder__express::before {
  content: "";
  position: absolute;
  inset-block: var(--space-sm);
  inset-inline-start: 50%;
  width: 2px;
  margin-inline-start: -1px;
  background-color: var(--red);
}
.ladder__express-label {
  position: relative;
  z-index: var(--z-base);
  padding-block: var(--space-2xs);
  background-color: var(--bone);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ---- Express-lane callout ------------------------------------------------
   The bracket alongside the ladder is a graphic; this is the part that
   explains it and links through. */
.express-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-md);
  align-items: center;
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  background-color: var(--surface);
  border: var(--hairline) solid var(--line);
  border-inline-start: 3px solid var(--red);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.express-note:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }

.express-note__tag {
  grid-column: 1 / -1;
  color: var(--red);
  font-weight: 700;
}
.express-note__text {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted-strong);
  max-width: 62ch;
}
.express-note__text strong { color: var(--ink); }
.express-note__arrow {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--red);
  transition: transform var(--dur-fast) var(--ease-out);
}
.express-note:hover .express-note__arrow { transform: translateX(.25rem); }

/* --------------------------------------------------------------------------
   5. CARDS & FEATURE LISTS
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 40em) { .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40em) { .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.feature {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.feature::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  height: 3px;
  background-color: var(--red);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature:hover::after { transform: scaleX(1); }

.feature__icon {
  width: 2rem;
  height: 2rem;
  margin-block-end: var(--space-2xs);
  color: var(--red);
}
.feature__icon svg { width: 100%; height: 100%; }

.feature__title {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
}
.feature__text {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}

/* Ticked differentiator list. */
.ticks { display: grid; gap: var(--space-xs); margin: 0; }
.ticks__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: start;
  font-size: var(--step-0);
}
.ticks__item svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: .15rem;
  color: var(--red);
  flex: none;
}

/* --------------------------------------------------------------------------
   6. SPLIT BAND (intro / about)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 64em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
  .split--media-first > .split__media { order: -1; }
}

.split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.split__media img {
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.split__media:hover img { transform: scale(1.04); }

/* A red plate clipped to the image corner — the arc motif, squared off. */
.split__stamp {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--red);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. STEPS — genuinely sequential, so ordered markers are earned
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-md);
  counter-reset: step;
  margin: 0;
}
@media (min-width: 40em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.steps__item {
  position: relative;
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--line);
  counter-increment: step;
}
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* The connector between steps: a lane marking. */
.steps__item::after {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline: 0;
  height: 2px;
  background-color: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.steps.is-visible .steps__item::after { transform: scaleX(1); }
.steps.is-visible .steps__item:nth-child(2)::after { transition-delay: 120ms; }
.steps.is-visible .steps__item:nth-child(3)::after { transition-delay: 240ms; }
.steps.is-visible .steps__item:nth-child(4)::after { transition-delay: 360ms; }

.steps__title {
  margin-block-end: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
}
.steps__text {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}
.section--dark .steps__text,
.section--asphalt .steps__text { color: var(--muted-on-dark); }
.section--dark .steps__item,
.section--asphalt .steps__item { border-block-start-color: var(--line-on-dark); }

/* --------------------------------------------------------------------------
   8. FLEET BAND
   -------------------------------------------------------------------------- */
.fleet {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 40em) { .fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fleet__item {
  display: grid;
  gap: var(--space-xs);
}
.fleet__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--asphalt);
}
.fleet__frame img {
  width: 100%;
  height: auto;
  /* Pinned so sub-pixel rounding in the three intrinsic heights cannot leave
     the captions sitting on different baselines. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.fleet__item:hover .fleet__frame img { transform: scale(1.05); }

.fleet__caption {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--muted);
}
.section--dark .fleet__caption,
.section--asphalt .fleet__caption { color: var(--muted-on-dark); }
.fleet__tag {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--red);
  flex: none;
}

/* --------------------------------------------------------------------------
   9. LANE RULE — the section divider, drawn from road markings
   -------------------------------------------------------------------------- */
.lane-rule {
  position: relative;
  height: 2px;
  overflow: hidden;
  background-color: transparent;
}
.lane-rule::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--line) 50%, transparent 50%);
  background-size: 48px 2px;
  background-repeat: repeat-x;
}
.lane-rule::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3.5rem;
  background-color: var(--red);
}
.lane-rule--on-dark::before { background-image: linear-gradient(to right, var(--line-on-dark) 50%, transparent 50%); }

/* --------------------------------------------------------------------------
   10. TESTIMONIAL SLIDER
   -------------------------------------------------------------------------- */
.slider { position: relative; min-width: 0; }

.slider__viewport {
  overflow: hidden;
  min-width: 0;
  /* Keyboard users tab into the viewport itself, so it needs a focus ring. */
  border-radius: var(--radius-md);
}

.slider__track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline-end: var(--space-md);
}
@media (min-width: 48em) { .slider__slide { flex-basis: 50%; } }
@media (min-width: 64em) { .slider__slide { flex-basis: 33.3333%; } }

/* Reviews are set as logbook entries: mono metadata, quote in the body face,
   a hairline rule. Deliberately not a card with a giant quotation mark. */
.logbook {
  display: grid;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-md);
  background-color: var(--asphalt);
  border: var(--hairline) solid var(--line-on-dark);
  border-block-start: 2px solid var(--red);
  border-radius: var(--radius-md);
}
.logbook__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.logbook__class {
  padding: .125rem .375rem;
  background-color: var(--red);
  color: var(--surface);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.logbook__stars { display: flex; gap: .125rem; color: var(--red); }
.logbook__stars svg { width: .875rem; height: .875rem; fill: currentColor; }
.logbook__quote {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--bone);
}
.logbook__name {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: var(--hairline) solid var(--line-on-dark);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--surface);
}

/* Wraps because at 320px one slide shows per page, which means six dots at a
   44px tap target each — wider than the viewport once the arrows are added. */
.slider__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  margin-block-start: var(--space-md);
}

.slider__arrows { display: flex; gap: var(--space-2xs); }
.slider__arrow {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--hairline) solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  color: var(--bone);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.slider__arrow:hover:not(:disabled) {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--surface);
}
.slider__arrow:disabled { opacity: .35; cursor: default; }
.slider__arrow svg { width: 1rem; height: 1rem; }

.slider__dots { display: flex; flex-wrap: wrap; gap: var(--space-3xs); min-width: 0; }
.slider__dot {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.slider__dot::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  background-color: var(--line-on-dark);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.slider__dot[aria-selected="true"]::before { background-color: var(--red); }
.slider__dot:hover::before { background-color: var(--muted-on-dark); }

.slider__status {
  margin-block-start: var(--space-sm);
  color: var(--muted-on-dark);
  font-size: .6875rem;
}

/* A visible marker on placeholder content. It is meant to be conspicuous:
   it should be impossible to publish sample reviews without noticing it. */
.placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--hairline) dashed var(--red);
  border-radius: var(--radius-sm);
  color: var(--bone);
  font-size: .6875rem;
}
.placeholder-note::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  background-color: var(--red);
}

/* --------------------------------------------------------------------------
   11. ACCORDION
   Height animates with grid-template-rows 0fr → 1fr, so no max-height guess
   is involved and long answers never clip.
   -------------------------------------------------------------------------- */
.accordion { border-block-start: var(--hairline) solid var(--line); }

.accordion__item { border-block-end: var(--hairline) solid var(--line); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap);
  padding-block: var(--space-sm);
  text-align: left;
  cursor: pointer;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--red); }

.accordion__icon {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background-color: var(--red);
  transition: transform var(--dur-mid) var(--ease-out);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-mid) var(--ease-out);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body {
  padding-block-end: var(--space-md);
  max-width: var(--measure);
  color: var(--muted-strong);
}

/* --------------------------------------------------------------------------
   12. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  color: var(--bone);
}

/* Hazard chevrons, in brand red — reflective tape, squared off. */
.cta-band__tape {
  height: .75rem;
  background-image: repeating-linear-gradient(
    115deg,
    var(--red) 0 1.25rem,
    var(--ink) 1.25rem 2.5rem
  );
}

.cta-band__inner {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  text-align: center;
  justify-items: center;
}

.cta-band__title { max-width: 18ch; }

.cta-band__lede {
  margin-block-start: var(--space-sm);
  margin-inline: auto;
  max-width: 48ch;
}

.cta-band__hours {
  color: var(--muted-on-dark);
  letter-spacing: var(--tracking-mono);
}

/* The section label is left-aligned everywhere except the centred CTA band. */
.section-head__label--center { justify-content: center; }

.cta-band__numbers {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: 40rem;
}
@media (min-width: 40em) { .cta-band__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.phone-card {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-md);
  background-color: var(--asphalt);
  border: var(--hairline) solid var(--line-on-dark);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.phone-card:hover { border-color: var(--red); transform: translateY(-2px); }
.phone-card__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.phone-card__number {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--surface);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13. PAGE HERO — inner pages
   Deliberately typographic rather than another photo band: the home hero owns
   the photography, and repeating it on fourteen pages would flatten it.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  color: var(--bone);
}
.page-hero__arc {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-start: -10%;
  width: 130%;
  height: auto;
  pointer-events: none;
  opacity: .8;
}
.page-hero__arc path {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
}
.page-hero__inner {
  position: relative;
  padding-block: calc(var(--space-2xl) + var(--space-md)) var(--space-2xl);
}
.page-hero__title { max-width: 18ch; }
.page-hero__lede {
  margin-block-start: var(--space-md);
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted-on-dark);
}

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb { margin-block-end: var(--space-md); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.breadcrumb__list li { display: flex; align-items: center; gap: var(--space-2xs); }
.breadcrumb__list li + li::before { content: "/"; color: var(--red); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--bone); }
.breadcrumb [aria-current="page"] { color: var(--bone); }

/* --------------------------------------------------------------------------
   14. PROSE — legal pages and long-form copy
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-md); }
.prose h2 {
  margin-block-start: var(--space-xl);
  font-size: var(--step-2);
}
.prose h3 {
  margin-block-start: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 700;
}
.prose ul { padding-inline-start: var(--space-md); }
.prose li + li { margin-block-start: var(--space-2xs); }
.prose__updated {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   15. COMPARISON TABLE → stacked cards under 768px
   No horizontally scrolling table on a phone.
   -------------------------------------------------------------------------- */
.compare { width: 100%; }
.compare caption {
  margin-block-end: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
}
.compare th,
.compare td {
  padding: var(--space-sm);
  text-align: left;
  vertical-align: top;
  font-size: var(--step--1);
  line-height: 1.55;
}
.compare thead th {
  background-color: var(--ink);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.compare tbody tr { border-block-end: var(--hairline) solid var(--line); }
.compare tbody th {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}

/* Below 768px each row becomes its own card and the column headings are
   re-attached to each cell through data-label. */
@media (max-width: 47.99em) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tbody tr {
    display: block;
    margin-block-end: var(--space-md);
    border: var(--hairline) solid var(--line);
    border-inline-start: 3px solid var(--red);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    overflow: hidden;
  }
  .compare tbody th {
    display: block;
    padding-block-end: 0;
    font-size: var(--step-1);
  }
  .compare tbody td { display: block; padding-block: var(--space-2xs); }
  .compare tbody td::before {
    content: attr(data-label);
    display: block;
    margin-block-end: .15rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--muted);
  }
  .compare tbody td:last-child { padding-block-end: var(--space-sm); }
}

/* --------------------------------------------------------------------------
   16. FILTERS — one control used by the gallery, the reviews grid and the
   courses hub
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-end: var(--space-lg);
}
.filters__btn {
  min-height: var(--tap);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.filters__btn:hover { border-color: var(--ink); color: var(--ink); }
.filters__btn[aria-pressed="true"] {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--surface);
}
.section--dark .filters__btn,
.section--asphalt .filters__btn {
  background-color: transparent;
  border-color: var(--line-on-dark);
  color: var(--muted-on-dark);
}
.section--dark .filters__btn:hover,
.section--asphalt .filters__btn:hover { border-color: var(--bone); color: var(--bone); }
.section--dark .filters__btn[aria-pressed="true"],
.section--asphalt .filters__btn[aria-pressed="true"] {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--surface);
}

/* Filtered-out items fade and collapse rather than vanishing instantly. */
.is-filtered-out { display: none; }

.filters__count {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.section--dark .filters__count { color: var(--muted-on-dark); }

/* --------------------------------------------------------------------------
   17. GALLERY + LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-sm);
}

.gallery__item { margin: 0; }

.gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  background-color: var(--asphalt);
  cursor: zoom-in;
}
.gallery__btn img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery__btn:hover img { transform: scale(1.05); }

.gallery__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-sm);
  background: linear-gradient(to top, var(--ink-a90), transparent);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-align: left;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--ink-a90);
  backdrop-filter: blur(4px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--dur-mid) var(--ease-out),
    visibility 0s linear var(--dur-mid);
}
.lightbox.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--bone);
}
.lightbox__count {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.lightbox__figure {
  display: grid;
  place-items: center;
  min-height: 0;
  margin: 0;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.lightbox__caption {
  padding-block: var(--space-2xs);
  color: var(--bone);
  font-size: var(--step--1);
  text-align: center;
}
.lightbox__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.lightbox__btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--hairline) solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  color: var(--bone);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover { background-color: var(--red); border-color: var(--red); }
.lightbox__btn svg { width: 1.125rem; height: 1.125rem; }

/* --------------------------------------------------------------------------
   18. REVIEWS GRID
   -------------------------------------------------------------------------- */
.review-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* --------------------------------------------------------------------------
   19. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 40em) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--space-3xs); min-width: 0; }

.field__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-strong);
}
.field__label .req { color: var(--red); }

.field__control {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--ink);
  /* 16px minimum: anything smaller makes iOS zoom the whole page on focus. */
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field__control:hover { border-color: var(--muted); }
.field__control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-a14);
  outline: none;
}
textarea.field__control { min-height: 8rem; resize: vertical; }
/* The native appearance is kept deliberately. Setting appearance:none strips
   the dropdown indicator, and a <select> styled to look exactly like a text
   input gives no clue that it opens. */
select.field__control { cursor: pointer; min-width: 0; }

.field__hint {
  font-size: var(--step--1);
  color: var(--muted);
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red-deep);
}
.field.has-error .field__error { display: flex; }
.field.has-error .field__control { border-color: var(--red-deep); }

/* Honeypot. Hidden with the clip pattern rather than display:none, which some
   bots detect and skip — a bot that fills this in gets treated as spam.
   Clipped in place instead of parked at left:-9999px, which reads as an
   overflowing element to layout tooling even though it never scrolls. */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__status {
  padding: var(--space-sm) var(--space-md);
  border: var(--hairline) solid var(--line);
  border-inline-start: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  font-size: var(--step--1);
}
.form__status:empty { display: none; }
.form__status--error { border-inline-start-color: var(--red); }
.form__status--ok { border-inline-start-color: var(--ink); }

.btn.is-loading { pointer-events: none; opacity: .8; }
.btn__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 640ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   20. HOURS TABLE, NOTICES, COURSE BLOCKS
   -------------------------------------------------------------------------- */
.hours { border: var(--hairline) solid var(--line); background-color: var(--surface); }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.hours__row + .hours__row { border-block-start: var(--hairline) solid var(--line); }
.hours__day { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hours__time { font-weight: 700; }

.notice {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  padding: var(--space-lg);
  border: var(--hairline) solid var(--line);
  border-inline-start: 3px solid var(--red);
  border-radius: var(--radius-md);
  background-color: var(--surface);
}

.course-block { scroll-margin-top: calc(var(--header-total) + var(--space-lg)); }
.course-block + .course-block {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-2xl);
  border-block-start: var(--hairline) solid var(--line);
}
.course-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}
.course-block__code {
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  min-height: 2.5rem;
  padding: var(--space-3xs) var(--space-2xs);
  background-color: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .06em;
}
.course-block__body { display: grid; gap: var(--space-md); }
@media (min-width: 64em) {
  .course-block__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-xl); }
}
.course-block__list { display: grid; gap: var(--space-2xs); margin: 0; }
.course-block__list li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.55;
}
.course-block__list li::before {
  content: "";
  width: .5rem;
  height: 2px;
  margin-block-start: .65em;
  background-color: var(--red);
}

/* --------------------------------------------------------------------------
   21. SURFACE VARIANTS
   Components originally built for one surface, given the opposite one.
   -------------------------------------------------------------------------- */
.accordion--dark { border-block-start-color: var(--line-on-dark); }
.accordion--dark .accordion__item { border-block-end-color: var(--line-on-dark); }
.accordion--dark .accordion__trigger { color: var(--bone); }
.accordion--dark .accordion__trigger:hover { color: var(--red); }
.accordion--dark .accordion__body { color: var(--muted-on-dark); }

.logbook--light {
  background-color: var(--surface);
  border-color: var(--line);
}
.logbook--light .logbook__meta { color: var(--muted); }
.logbook--light .logbook__quote { color: var(--ink); }
.logbook--light .logbook__name {
  color: var(--ink);
  border-block-start-color: var(--line);
}

.placeholder-note--light { color: var(--muted-strong); }

.phone-card--light {
  background-color: var(--bone);
  border-color: var(--line);
}
.phone-card--light .phone-card__label { color: var(--muted); }
.phone-card--light .phone-card__number { color: var(--ink); }

/* An SVG symbol sprite. Kept in the layout at zero size rather than
   display:none, which stops <use> resolving in some browsers. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.logbook__stars svg { width: .875rem; height: .875rem; fill: currentColor; }

.notice__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--red);
}

/* A whole feature card that is itself a link. */
.feature--link {
  text-decoration: none;
  color: inherit;
}
.feature--link .feature__title { transition: color var(--dur-fast) var(--ease-out); }
.feature--link:hover .feature__title { color: var(--red); }

/* Steps stacked in a single column, for narrow content wells. */
@media (min-width: 40em) {
  .steps--stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .steps--stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.error-code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--red);
}
.error-code::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  background-color: var(--red);
}

/* --------------------------------------------------------------------------
   22. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-cards {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 48em) { .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.contact-card {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-lg);
  background-color: var(--surface);
  border: var(--hairline) solid var(--line);
  border-block-start: 3px solid var(--red);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.contact-card__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-block-end: var(--space-2xs);
  color: var(--red);
}
.contact-card__icon svg { width: 100%; height: 100%; }

.contact-card__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.contact-card__value {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.contact-card__note {
  font-size: var(--step--1);
  color: var(--muted);
}

/* minmax(0, 1fr), not a bare auto track: a <select> reports a min-content
   width based on its longest <option>, and "Bus Driver Authority (BDA)" at
   16px is wider than a 320px viewport. Without the explicit minimum the whole
   column inflates to fit it. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}
@media (min-width: 64em) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}

/* The aside sits beside the form, so its headings step down a level — at the
   full section-head size they compete with the form's own heading. */
.contact-aside .section-head__title { font-size: var(--step-2); }
.contact-aside {
  padding: var(--space-lg);
  background-color: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
}

.service-area {
  padding: var(--space-md);
  background-color: var(--bone);
  border: var(--hairline) dashed var(--line);
  border-radius: var(--radius-sm);
}
.service-area__label { color: var(--muted); }
.service-area__value {
  margin-block: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
.service-area__note {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}