/* ==========================================================================
   New Method Aman - stylesheet
   Plain CSS, no build step. Edit freely.

   All colours and sizes are defined once as variables at the top, so you
   can retheme the whole site by changing the values in :root below.
   Dark mode is the second block, :root[data-theme="dark"]: it redefines the
   same colour names, so every colour needs a value in both blocks.
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------- */
  --ground:      #FBFAF7;   /* page background, warm off-white          */
  --surface:     #FFFFFF;   /* cards                                    */
  --surface-alt: #F3F1EC;   /* alternating section bands                */
  --ink:         #15191E;   /* headings                                 */
  --ink-2:       #414A54;   /* body text                                */
  --muted:       #6E7883;   /* captions, meta                           */
  --rule:        #E5E2DC;   /* hairlines, borders                       */

  --primary:      #17395C;  /* deep steel blue - trust                  */
  --primary-dark: #0F2942;
  --primary-tint: #E8EEF4;
  --accent:       #E39A2B;  /* amber - calls to action                  */
  --accent-dark:  #C07F17;  /* button hover background                  */
  --accent-ink:   #C07F17;  /* amber text: eyebrows, FAQ +              */
  --brand:        #17395C;  /* filled brand shapes with white text      */

  --ph-bg:        #DDE4EB;  /* placeholder image blocks                 */
  --ph-stripe:    rgba(23, 57, 92, .14);
  --ph-label-bg:  rgba(255, 255, 255, .92);
  --success-bg:   #E9F3EC;  --success-rule: #BFDCC8;  --success-ink: #1E5B38;
  --error-bg:     #FBEAE7;  --error-rule:   #E4B5AC;  --error-ink:   #8C3423;
  --banner-bg:    #F6E4C4;  --banner-rule:  #E4CB9E;  --banner-ink:  #6A4A12;
  --footer:       #0C1F31;

  color-scheme: light;      /* native controls + Turnstile follow this   */

  /* --- type --------------------------------------------------------- */
  --f-head: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* --- spacing & shape ---------------------------------------------- */
  --wrap: 1140px;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(21, 25, 30, .06), 0 4px 12px -6px rgba(21, 25, 30, .10);
  --shadow-md: 0 2px 6px rgba(21, 25, 30, .07), 0 18px 40px -20px rgba(21, 25, 30, .28);
}

/* --- dark mode ------------------------------------------------------ */
/* Set by assets/theme.js from the visitor's choice, or from their device
   setting if they haven't chosen. Text/background pairs meet WCAG AA
   contrast (4.5:1) - re-check if you change these. */
:root[data-theme="dark"] {
  --ground:      #10151B;
  --surface:     #171E26;
  --surface-alt: #0C1116;
  --ink:         #EDF1F5;
  --ink-2:       #C2CAD3;
  --muted:       #8E99A5;
  --rule:        #263140;

  --primary:      #8EB8E5;  /* lighter blue so links read on dark       */
  --primary-dark: #0C2236;
  --primary-tint: #1A2A3B;
  --accent-ink:   #EDB45E;
  --brand:        #1F4A75;

  --ph-bg:        #18222D;
  --ph-stripe:    rgba(142, 184, 229, .09);
  --ph-label-bg:  rgba(16, 21, 27, .92);
  --success-bg:   #10251A;  --success-rule: #23503A;  --success-ink: #8ED3A6;
  --error-bg:     #2A1411;  --error-rule:   #5E2B22;  --error-ink:   #F3A898;
  --banner-bg:    #2B2110;  --banner-rule:  #4A391B;  --banner-ink:  #F0D39B;
  --footer:       #0A1622;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -6px rgba(0, 0, 0, .45);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

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

/* Without this, a class that sets display (like .btn) beats the hidden
   attribute, and things meant to be hidden - e.g. the phone links while no
   number is set - show up anyway. */
[hidden] { display: none !important; }

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

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; }
h2 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0; }

a { color: var(--primary); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- layout helpers ------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: 76px 0; }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--rule); }
.section--tight { padding: 52px 0; }

.stack   { display: flex; flex-direction: column; gap: 18px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.stack-l { display: flex; flex-direction: column; gap: 34px; }

.measure { max-width: 62ch; }
.center  { text-align: center; margin-inline: auto; }
.narrow  { max-width: 780px; margin-inline: auto; width: 100%; }

/* One-off tweaks. These would once have been style="" on the tag, but the
   security policy (site/_headers) blocks inline styles, so they live here. */
.btn-row--center { justify-content: center; }
.hero__grid--top { align-items: start; }
.form-head       { margin-bottom: 22px; }
.btn--block      { width: 100%; }
.h-tight         { margin-bottom: 6px; }

.grid   { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --- small type devices --------------------------------------------- */
.eyebrow {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.lede { font-size: 19.5px; color: var(--ink-2); }
.meta { font-size: 14.5px; color: var(--muted); }

/* --- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #21160A; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--primary); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--primary); background: var(--primary-tint); }

.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--on-dark:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- top utility bar ------------------------------------------------ */
.topbar {
  background: var(--primary-dark);
  color: rgba(255,255,255,.82);
  font-size: 14px;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }
.topbar .group { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }

/* --- header / nav --------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__mark {
  width: 38px; height: 38px; flex: none;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 16px;
  display: grid;
  place-items: center;
  letter-spacing: -.03em;
}
.brand__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.brand__sub {
  display: block;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 7px;
}
.nav a:hover { background: var(--surface-alt); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--primary); background: var(--primary-tint); }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn { padding: 12px 20px; font-size: 15px; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

/* Dark mode switch. Hidden in the HTML and revealed by script.js, so
   visitors without JavaScript never see a button that does nothing. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-alt); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --- hero ----------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 460px at 82% -8%, #1E4A78 0%, transparent 62%),
    linear-gradient(160deg, var(--primary-dark) 0%, #143352 58%, #10293F 100%);
  color: #fff;
  padding: 78px 0 86px;
  overflow: hidden;
}
.hero h1 { color: #fff; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 52px;
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hero .lede { color: rgba(255,255,255,.85); max-width: 46ch; }
.hero .eyebrow { color: var(--accent); }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  margin-top: 4px;
}
.badge {
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  padding: 6px 13px;
}

/* --- stats strip ---------------------------------------------------- */
.stats { background: var(--surface); border-bottom: 1px solid var(--rule); }
.stats .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.stat {
  padding: 30px 22px;
  border-right: 1px solid var(--rule);
  text-align: center;
}
.stat:last-child { border-right: 0; }
.stat__n {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 34px;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.03em;
}
.stat__l {
  font-size: 14px;
  color: var(--muted);
  margin-top: 7px;
  display: block;
}

/* --- cards ---------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.card__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 18px;
}

/* price cards */
.price-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.price-card--featured {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
.price-card__tag {
  position: absolute;
  top: -12px; left: 24px;
  background: var(--accent);
  color: #21160A;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
}
.price-card__price {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 38px;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1;
}
.price-card__price span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.price-card ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.price-card li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--primary-tint);
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 8px 2px;
  background-repeat: no-repeat;
  background-position: center;
}
.price-card .btn { margin-top: auto; }

/* --- numbered steps ------------------------------------------------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 60px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
}

/* --- placeholder blocks --------------------------------------------- */
/* Stand-ins for real photography. Deliberately styled so they read as
   "designed placeholder", not "broken image". Replace with <img> later. */
.ph {
  position: relative;
  border-radius: var(--radius);
  background-color: var(--ph-bg);
  background-image:
    linear-gradient(135deg, var(--ph-stripe) 25%, transparent 25%,
                    transparent 50%, var(--ph-stripe) 50%, var(--ph-stripe) 75%,
                    transparent 75%, transparent);
  background-size: 22px 22px;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  min-height: 240px;
  overflow: hidden;
}
.ph--tall  { min-height: 380px; }
.ph--wide  { min-height: 300px; }
.ph--short { min-height: 170px; }
.ph__label {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--ph-label-bg);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 7px 15px;
  text-align: center;
  max-width: 84%;
}
.hero .ph { background-color: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.hero .ph__label { background: rgba(255,255,255,.94); color: var(--brand); }

/* Real photos, swapped in for the placeholders above:
     <img class="photo" src="assets/photos/car.jpg" alt="What the photo shows">
   Every photo is shown at the same 4:3 shape, trimmed to fit, so the
   layout stays tidy whatever shape the original is. */
.photo {
  width: 100%;
  height: auto;          /* the tag's height="" would otherwise beat aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface-alt);   /* shown for the moment before it loads */
}
.hero .photo { border-color: rgba(255,255,255,.2); box-shadow: var(--shadow-md); }

/* --- testimonial ---------------------------------------------------- */
.quote {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.quote p { font-size: 19px; color: var(--ink); font-style: italic; }
.quote footer { font-size: 15px; color: var(--muted); font-style: normal; }

/* --- page header (inner pages) -------------------------------------- */
.page-head {
  background: var(--primary-dark);
  color: #fff;
  padding: 62px 0 66px;
}
.page-head h1 { color: #fff; }
.page-head .lede { color: rgba(255,255,255,.82); }
.crumb { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.crumb a { color: rgba(255,255,255,.85); }

/* --- tables --------------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--rule); }
thead th {
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-alt);
}
tbody tr:last-child > * { border-bottom: 0; }
td.price { font-family: var(--f-head); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Prices table: City, then three G2/G pairs under grouped headings, then
   the BDE course. Each group is centred and gets a divider on its left. */
.price-table { min-width: 760px; }
.price-table td,
.price-table thead th:not([rowspan]),
.price-table thead th[rowspan]:not(:first-child) { text-align: center; }
.price-table thead th[rowspan] { vertical-align: bottom; }
.price-table thead th[rowspan]:not(:first-child),
.price-table thead th[colspan],
.price-table thead tr + tr th:nth-child(odd),
.price-table tbody td:nth-of-type(odd) { border-left: 1px solid var(--rule); }

/* --- FAQ ------------------------------------------------------------ */
details.faq {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0 22px;
}
details.faq + details.faq { margin-top: 10px; }
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before {
  content: "+";
  color: var(--accent-ink);
  font-size: 20px;
  flex: none;
  width: 18px;
}
details.faq[open] summary::before { content: "\2013"; }
details.faq > p { padding-bottom: 20px; max-width: 68ch; }

/* --- forms ---------------------------------------------------------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}
.field input, .field select, .field textarea {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-note { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* honeypot - hidden from people, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success {
  display: none;
  background: var(--success-bg);
  border: 1px solid var(--success-rule);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.form-success h3 { color: var(--success-ink); margin-bottom: 8px; }
.form-success p + p { margin-top: 8px; }
.form-success.is-visible { display: block; }

/* --- info list (contact sidebar) ------------------------------------ */
.info-list { display: flex; flex-direction: column; gap: 0; }
.info-list > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.info-list > div:last-child { border-bottom: 0; }
.info-list dt {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-list dd { margin: 0; font-size: 16.5px; color: var(--ink); }

/* --- CTA band ------------------------------------------------------- */
.cta-band {
  background: linear-gradient(140deg, var(--brand) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 62px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 54ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 8px; }

/* --- footer --------------------------------------------------------- */
.site-footer {
  background: var(--footer);
  color: rgba(255,255,255,.68);
  padding: 54px 0 30px;
  font-size: 15px;
}
.site-footer h4 {
  color: #fff;
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer p + p { margin-top: 12px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 13.5px;
  color: rgba(255,255,255,.5);
}

/* --- prototype banner ----------------------------------------------- */
.proto-banner {
  background: var(--banner-bg);
  color: var(--banner-ink);
  border-bottom: 1px solid var(--banner-rule);
  font-size: 13.5px;
  text-align: center;
  padding: 8px 24px;
  font-family: var(--f-head);
  font-weight: 600;
}

/* --- responsive ----------------------------------------------------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 780px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 16.5px; }
  .nav-toggle { display: block; }
  .site-header .wrap { position: relative; }
  .header-cta .btn--primary { display: none; }
  .section { padding: 54px 0; }
  .field-row { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar .wrap { justify-content: center; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  /* Room for the name beside the dark mode and Menu buttons on one line. */
  .site-header .wrap { gap: 12px; }
  .header-cta { gap: 8px; }
  .brand { gap: 9px; }
  .brand__name { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- form error message --------------------------------------------- */
.form-error {
  background: var(--error-bg);
  border: 1px solid var(--error-rule);
  border-radius: 8px;
  color: var(--error-ink);
  font-size: 15px;
  padding: 12px 15px;
  margin: 0 0 16px;
}

/* Turnstile widget sits between the honeypot and the submit button. */
.cf-turnstile { margin: 4px 0 18px; }

/* --- city picker (Lessons, Road Test) ------------------------------- */
.city-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.city-picker button {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.city-picker button:hover { border-color: var(--primary); color: var(--ink); }
.city-picker button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* --- city cards (home) ---------------------------------------------- */
.city-card {
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.city-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.city-card__prices { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.city-card__prices div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}
.city-card__prices dt { font-size: 15px; color: var(--muted); }
.city-card__prices dd {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.city-card__link {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
}