/* ==========================================================================
   MZ School Of Motoring
   Palette taken from the logo: brushed copper on charcoal, with the red of an
   Irish L-plate as the one loud colour on the page.
   ========================================================================== */

:root {
  /* Tells the browser this is a dark UI, so native widgets — the date and
     time picker icons, the picker popups, scrollbars — are drawn light. The
     calendar icon was otherwise dark-on-dark and all but invisible. */
  color-scheme: dark;

  --ink:        #212326;
  --ink-2:      #2b2d31;
  --ink-deep:   #141618;
  --chalk:      #ece8e1;
  --chalk-2:    #d9d3c9;
  --copper:     #c0784d;
  --copper-lt:  #e4aa7e;
  --copper-dk:  #8d5432;
  --plate:      #c8102e;
  --white:      #ffffff;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Karla', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --radius: 3px;
  --line: rgba(236, 232, 225, 0.16);
  --line-dark: rgba(33, 35, 38, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.mono { font-family: var(--mono); letter-spacing: 0.02em; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--copper);
  color: var(--ink-deep);
  padding: 0.75rem 1.25rem;
  z-index: 99;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--copper-lt);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- the L-plate */

.plate {
  display: grid;
  place-items: center;
  width: 74px;
  height: 88px;
  background: var(--white);
  color: var(--plate);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: 3.4rem;
  line-height: 1;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.plate--lg { width: 96px; height: 114px; font-size: 4.4rem; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem var(--gutter);
  background: rgba(20, 22, 24, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
  min-width: 0;
}

/* The emblem on its own, shown whole. Square box with the artwork already
   padded inside it, so nothing is cropped at any size. */
.topbar__brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex: none;
}

.topbar__brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.topbar__brand-text strong {
  font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 700;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
}
.topbar__brand-text em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 2px;
}

/* margin-left:auto pushes the links (and the CTA after them) to the right,
   leaving the brand on the left. Lost in an earlier edit to the brand block. */
.topbar__nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.topbar__nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.topbar__nav a:hover { border-bottom-color: var(--copper); color: var(--copper-lt); }

.topbar__cta { flex: none; }
.topbar__cta .cta-short { display: none; }

.topbar__manage {
  flex: none;
  margin-left: 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.topbar__manage:hover { border-bottom-color: var(--copper); color: var(--copper-lt); }

/* ------------------------------------------------------------------ shared */

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-lt);
}
.eyebrow--dark { color: var(--copper-dk); }

/* An author `display` rule beats the browser's [hidden] styling, so any
   button marked hidden would still show. Applies to every .btn, which is why
   it sits here rather than being fixed case by case. */
.btn[hidden] { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--solid { background: var(--copper); color: var(--ink-deep); }
.btn--solid:hover { background: var(--copper-lt); }

.btn--ghost { border-color: var(--copper); color: var(--copper-lt); background: none; }
.btn--ghost:hover { background: rgba(192, 120, 77, 0.12); }

.btn--dark { background: var(--ink); color: var(--chalk); }
.btn--dark:hover { background: var(--ink-2); }

.btn--wide { width: 100%; padding-block: 1rem; }

/* -------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(192, 120, 77, 0.16), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--line);
}

.hero__title {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.hero__title em {
  font-style: normal;
  color: var(--copper);
  -webkit-text-decoration: underline 4px var(--copper-dk);
  text-decoration: underline 4px var(--copper-dk);
  text-underline-offset: 8px;
}

.hero__lede {
  max-width: 46ch;
  margin: 0 0 2rem;
  font-size: 1.08rem;
  color: rgba(236, 232, 225, 0.78);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3rem; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__facts dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 232, 225, 0.5);
}
.hero__facts dd {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1.35rem;
  color: var(--copper-lt);
}

.hero__aside { display: grid; gap: 1.75rem; }

.hero__plate { display: flex; align-items: center; gap: 1.1rem; }
.hero__plate .plate { transform: rotate(4deg); flex: none; }
.hero__plate-note {
  max-width: 18ch;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(236, 232, 225, 0.5);
}

.next-slot {
  padding: 1.25rem 1.35rem;
  background: rgba(192, 120, 77, 0.08);
  border: 1px solid rgba(192, 120, 77, 0.4);
  border-radius: var(--radius);
}
.next-slot__label {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-lt);
}
.next-slot__when {
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 700;
  font-size: 1.3rem;
  line-height: 1.15;
}
.next-slot__who {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: rgba(236, 232, 225, 0.6);
}
.btn--sm { padding: 0.55rem 1rem; font-size: 0.82rem; }

/* ------------------------------------------------------------------- strip */

.strip { background: var(--copper-dk); color: #fdf4ec; }
.strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  margin: 0;
  padding: 0.9rem var(--gutter);
  list-style: none;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- bands */

.band { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
.band--light { background: var(--chalk); color: var(--ink); }
.band--dark { background: var(--ink); color: var(--chalk); }
.band--deep { background: var(--ink-deep); color: var(--chalk); }

.band__head { max-width: var(--measure); margin-bottom: 3rem; }

.band__title {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.band__lede { margin: 0; opacity: 0.82; }

/* --------------------------------------------------------- the EDT "road" */

.legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(33, 35, 38, 0.62);
}
.legend__key {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--copper-dk);
}
.legend__key--fixed { background: var(--copper-dk); }
.legend__key--free { background: transparent; }
.legend__key--free { margin-left: 1.5rem; }

.road {
  position: relative;
  max-width: 1100px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the dashed centre line */
.road::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 3.5rem;
  left: 27px;
  width: 4px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(141, 84, 50, 0.38) 0 20px,
    transparent 20px 38px
  );
}

.stop {
  position: relative;
  padding: 0 0 2.25rem 4.5rem;
}

.stop__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--copper-dk);
  background: var(--chalk);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 1.2rem;
  color: var(--copper-dk);
}
.stop--fixed .stop__num { background: var(--copper-dk); color: var(--chalk); }

.stop__card {
  padding: 1.4rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--chalk-2);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
}
.stop__card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.stop__card p { margin: 0; font-size: 0.95rem; color: rgba(33, 35, 38, 0.78); }

/* ------------------------------------------------------------ price cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
}

.cards__status { grid-column: 1 / -1; opacity: 0.6; font-family: var(--mono); font-size: 0.85rem; }
.cards__status--dark { color: rgba(33, 35, 38, 0.6); }

.price-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.price-card--feature { border-color: var(--copper); background: rgba(192, 120, 77, 0.09); }

.price-card__tag {
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.2rem 0.6rem;
  background: var(--copper);
  color: var(--ink-deep);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}
.price-card__name {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 700;
  font-size: 1.15rem;
}
.price-card__cost {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 116, 'wght' 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--copper-lt);
}
.price-card__cost span {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variation-settings: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 232, 225, 0.5);
}
.price-card__summary { margin: 0 0 1.25rem; font-size: 0.92rem; opacity: 0.75; }
.price-card .btn { margin-top: auto; }

/* ------------------------------------------------------------- instructors */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
}

.person {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--chalk-2);
  border-radius: var(--radius);
}
.person__name {
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 700;
  font-size: 1.15rem;
}
.person__adi {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-dk);
}
.person dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; }
.person dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(33, 35, 38, 0.5); }
.person dd { margin: 0; }

/* ----------------------------------------------------------------- booking */

.booking { max-width: 760px; }

.booking__step {
  margin: 0 0 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  transition: opacity 0.2s ease;
}
.booking__step:disabled { opacity: 0.42; }

.booking__step legend {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 0.6rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.step-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--copper);
  color: var(--ink-deep);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1rem; }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 232, 225, 0.62);
}
.field .opt { text-transform: none; letter-spacing: 0; opacity: 0.55; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--ink-deep);
  color: var(--chalk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 1rem;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper); }

/* color-scheme: dark already makes the browser draw this icon light, so do
   NOT invert it here — the two cancel out and it goes black again. Only the
   hit area and hover feedback are adjusted. */
.field input[type='date']::-webkit-calendar-picker-indicator,
.field input[type='time']::-webkit-calendar-picker-indicator {
  opacity: 0.8;
  cursor: pointer;
  padding: 2px;
}
.field input[type='date']::-webkit-calendar-picker-indicator:hover,
.field input[type='time']::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: var(--plate); }

.field__hint { margin: 0.35rem 0 0; font-size: 0.8rem; opacity: 0.55; }
.field__error { margin: 0.35rem 0 0; font-size: 0.82rem; color: #ff8a8a; }

/* slot chips */
.slots { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.slots__empty, .slots__none {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.6;
}
.slots__group { width: 100%; margin-bottom: 1.25rem; }
.slots__who {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-lt);
}
.slots__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.slot {
  padding: 0.55rem 0.9rem;
  background: transparent;
  color: var(--chalk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.slot:hover { border-color: var(--copper); color: var(--copper-lt); }
.slot[aria-pressed='true'] {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--ink-deep);
}

.booking__summary {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--copper);
  background: rgba(192, 120, 77, 0.08);
  font-size: 0.92rem;
}

.booking__error {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--plate);
  border-radius: var(--radius);
  color: #ffb3b3;
  font-size: 0.9rem;
}

/* confirmation */
.confirm {
  max-width: 640px;
  padding: 2.5rem;
  border: 1px solid var(--copper);
  border-radius: var(--radius);
  background: rgba(192, 120, 77, 0.07);
}
.confirm__plate { margin-bottom: 1.5rem; }
.confirm__plate .plate { transform: rotate(-3deg); }
.confirm__title {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 114, 'wght' 800;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.confirm__ref { margin: 0 0 1.5rem; }
.confirm__ref strong { color: var(--copper-lt); font-size: 1.2rem; }
.confirm__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.confirm__grid dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 232, 225, 0.5);
}
.confirm__grid dd { margin: 0; }
.confirm__note { font-size: 0.9rem; opacity: 0.72; }

/* ------------------------------------------------------------------ lookup */

.lookup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  align-items: end;
  max-width: 760px;
}
.lookup .field { margin-bottom: 0; }
.lookup .field label { color: rgba(33, 35, 38, 0.6); }
.lookup .field input {
  background: var(--white);
  color: var(--ink);
  border-color: var(--chalk-2);
}
.lookup .btn { height: 46px; }

.lookup__result {
  max-width: 760px;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--chalk-2);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.lookup__result dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.25rem; margin: 0 0 1rem; }
.lookup__result dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(33, 35, 38, 0.5);
}
.lookup__result dd { margin: 0; }
.lookup__result .btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

/* ------------------------------------------------------------------ footer */

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.5rem;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
  background: var(--ink-deep);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.footer__brand img { width: 190px; height: auto; }
.footer__col h4 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 700;
  font-size: 0.95rem;
}
.footer__col p { margin: 0 0 0.5rem; opacity: 0.7; }
.footer__col a { text-decoration: none; border-bottom: 1px solid var(--copper-dk); }
.footer__col a:hover { color: var(--copper-lt); }
.footer__legal {
  grid-column: 1 / -1;
  margin: 1rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  opacity: 0.45;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero__aside { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: center; }
  .hero__plate-note { max-width: 24ch; }
  .topbar__nav { display: none; }
  .topbar__manage { display: none; }
  /* The nav normally carries margin-left:auto; hidden here, so the CTA
     takes over pushing itself and the burger to the right. */
  .topbar__cta { margin-left: auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }

  /* Phones get the largest brand: the header is most of what fits on screen.
     Room comes from the shorter "Book" label and tighter gaps, not from
     truncating the name. */
  .topbar { gap: 0.45rem; padding: 0.65rem 0.7rem; }
  .topbar__brand { flex: 0 1 auto; min-width: 0; gap: 0.5rem; }
  .topbar__brand img { width: 54px; height: 54px; }
  .topbar__brand-text { min-width: 0; }
  .topbar__brand-text strong {
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__brand-text em { display: block; font-size: 0.55rem; }

  .topbar__cta .cta-long { display: none; }
  .topbar__cta .cta-short { display: inline; }
  .topbar__cta { margin-left: auto; padding: 0.6rem 0.85rem; font-size: 0.8rem; }
  .stop { padding-left: 3.4rem; }
  .stop__num { width: 44px; height: 44px; font-size: 1rem; }
  .road::before { left: 21px; }
  .booking__step { padding: 1.25rem; }
  .confirm { padding: 1.5rem; }
}

@media (max-width: 400px) {
  /* Only trims; the 560px block above owns the sizes. */
  .topbar { gap: 0.35rem; padding-inline: 0.55rem; }
  .topbar__brand img { width: 48px; height: 48px; }
  .topbar__brand-text strong { font-size: 0.94rem; }
  .topbar__cta { padding: 0.55rem 0.7rem; font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover { transform: none; }
}

/* ------------------------------------------- multiple slots in one booking */

.picked-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-lt);
  font-variation-settings: normal;
}

.summary__head { margin: 0 0 0.5rem; }

.summary__list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: none;
}
.summary__list li { margin-bottom: 0.45rem; }
.summary__list li:last-child { margin-bottom: 0; }

.summary__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: rgba(236, 232, 225, 0.55);
}
p.summary__sub { margin: 0.6rem 0 0; }

/* A chosen time needs to read as chosen at a glance when several are picked. */
.slot[aria-pressed='true']::before {
  content: '\2713\00a0';
  font-weight: 700;
}

/* ------------------------------------------------------- quick contact bar */
/* Circular floating buttons, stacked in the bottom-right corner on every
   screen size. Icon-only, so the accessible name comes from aria-label in the
   markup and the text label is exposed only to assistive tech. */

.quickbar {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* Sits above the iPhone home indicator rather than under it. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.quickbar__btn {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.quickbar__btn--wa { background: #25d366; color: #ffffff; }
.quickbar__btn--call { background: var(--copper); color: var(--ink-deep); }

.quickbar__btn:hover {
  transform: scale(1.07);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.quickbar__btn:active { transform: scale(0.97); filter: brightness(0.93); }
.quickbar__btn:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; }

/* Visible to screen readers only: the buttons are deliberately icon-only. */
.quickbar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .quickbar { right: 0.9rem; bottom: 0.9rem; gap: 0.6rem; }
  .quickbar__btn { width: 52px; height: 52px; }
}

/* Keep the buttons clear of the last line of the footer. The stack is two
   58px circles plus the gap and the bottom offset, so it needs roughly 145px
   of clearance — 6rem was not enough and the copyright line sat underneath. */
.footer { padding-bottom: 10rem; }

@media (max-width: 560px) {
  /* Smaller circles on phones, so slightly less room is needed. */
  .footer { padding-bottom: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .quickbar__btn { transition: none; }
  .quickbar__btn:hover, .quickbar__btn:active { transform: none; }
}

/* ------------------------------------------------------------- mobile menu */

.topbar__burger { display: none; }

.mobile-nav { display: none; }

@media (max-width: 860px) {
  .topbar__burger {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .topbar__burger:hover { border-color: var(--copper); }

  .topbar__burger-bars { display: grid; gap: 4px; width: 18px; }
  .topbar__burger-bars span {
    display: block;
    height: 2px;
    background: var(--chalk);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }

  /* Open state: the bars fold into a cross. */
  .topbar__burger[aria-expanded='true'] .topbar__burger-bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .topbar__burger[aria-expanded='true'] .topbar__burger-bars span:nth-child(2) { opacity: 0; }
  .topbar__burger[aria-expanded='true'] .topbar__burger-bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-nav {
    display: block;
    position: sticky;
    /* Sits directly under the sticky header rather than scrolling away. */
    top: 59px;
    z-index: 39;
    background: rgba(20, 22, 24, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav[hidden] { display: none; }

  .mobile-nav a {
    display: block;
    padding: 0.95rem var(--gutter);
    text-decoration: none;
    border-bottom: 1px solid rgba(236, 232, 225, 0.07);
    font-size: 1rem;
  }
  .mobile-nav a:last-child { border-bottom: 0; }
  .mobile-nav__cta {
    color: var(--copper-lt);
    font-family: var(--display);
    font-variation-settings: 'wdth' 106, 'wght' 600;
  }
  .mobile-nav a:active { background: rgba(192, 120, 77, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__burger-bars span { transition: none; }
}

/* ------------------------------------------------------------- hero car */

/* Framed so the picture reads as a deliberate element rather than a cut-out
   floating on the background. Works for a photo or a transparent PNG. */
.hero__frame {
  position: relative;
  max-width: 420px;
  margin: 0 0 0.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(192, 120, 77, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(192, 120, 77, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.22));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.hero__car {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  transition: opacity 1s ease;
}

/* The second picture is layered over the first, which keeps the frame at a
   fixed height so nothing jumps when they swap. object-fit means the two can
   have different proportions without distorting. */
.hero__car--layer {
  position: absolute;
  inset: 0.75rem;
  width: calc(100% - 1.5rem);
  height: calc(100% - 1.5rem);
  object-fit: contain;
}

.hero__car { opacity: 0; }
.hero__car.is-on { opacity: 1; }

/* If only one picture loaded there is nothing to fade between, so show it. */
.hero__frame--single .hero__car { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__car { transition: none; }
}

@media (max-width: 860px) {
  .hero__frame {
    /* The aside becomes a two-up grid on narrow screens; the frame spans it. */
    grid-column: 1 / -1;
    max-width: 340px;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .hero__frame { max-width: 290px; padding: 0.55rem; }
  .hero__car--layer { inset: 0.55rem; width: calc(100% - 1.1rem); height: calc(100% - 1.1rem); }
}

/* ------------------------------------------------------------ strip (mobile) */
/* Wrapped as pairs on a phone, which put "Manual" alongside "RSA-approved
   ADIs" and read as one claim. One item per line keeps each point distinct. */

@media (max-width: 620px) {
  .strip__list {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding-block: 1rem;
  }
}

/* Moving on to the details is now a deliberate tap, so the button lives in
   the summary rather than the page scrolling on its own. */
#to-details { margin-top: 0.9rem; }

/* Says how long the chosen lesson runs, so an hourly-looking grid of start
   times is not mistaken for hour-long lessons. */
.slots__length {
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(192, 120, 77, 0.1);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: rgba(236, 232, 225, 0.85);
}

/* Shown instead of the cancel button once the cutoff has passed. */
.lookup__late {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: rgba(200, 16, 46, 0.1);
  border-left: 3px solid var(--plate);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--ink);
}
.lookup__late a { color: inherit; font-weight: 700; }