/* =========================================================================
   Autorijschool Dalia — stylesheet
   Plain CSS, no framework. Mobile first; every horizontal value uses logical
   properties so the Arabic (RTL) pages mirror without extra rules.

   Contents
     1.  Fonts
     2.  Design tokens
     3.  Base & reset
     4.  Layout primitives
     5.  Typography
     6.  Buttons
     7.  Header & navigation
     8.  Hero
     9.  Home sections
     10. Packages & rates
     11. Theory pages
     12. Practice test
     13. Forms
     14. Contact options
     15. FAQ, breadcrumbs, legal
     16. Footer
     17. Floating actions
     18. Motion & reveal
   ========================================================================= */

/* ---------- 1. Fonts ---------------------------------------------------- */
/* Self-hosted, so no request ever leaves our own domain. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-500-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-600-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/plex-arabic-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ---------- 2. Design tokens -------------------------------------------- */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Geist", ui-sans-serif, system-ui,
    sans-serif;

  /* Brand. The blue is sampled from the logo artwork. */
  --color-background: #ffffff;
  --color-surface: #f6f7f9;
  --color-foreground: #1b1c1f;
  --color-muted-foreground: #5a5e66;

  --color-primary: #063eee;
  --color-primary-hover: #0430c2;
  --color-on-primary: #ffffff;

  /* Gold conversion accent, reserved for appointment and practice-test calls. */
  --color-accent: #f5b301;
  --color-accent-hover: #ffc226;
  --color-on-accent: #1b1c1f;

  --color-border: #e4e6ea;
  --color-focus: #063eee;
  --color-danger: #b42318;
  --color-success: #15803d;

  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #1eb457;

  /* The hero's night black — the same true black the rest of the site uses. */
  --color-night: #000000;
  --color-night-blue: #4d7dff;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-2xl: 2.5rem;
  --radius-pill: 9999px;

  --container: 76rem;
  --container-narrow: 56rem;
  --gutter: 1.25rem;

  --shadow-soft: 0 1px 2px rgb(27 28 31 / 0.04), 0 8px 24px rgb(27 28 31 / 0.08);
  --shadow-float: 0 4px 12px rgb(27 28 31 / 0.16), 0 1px 3px rgb(27 28 31 / 0.1);

  /* Translucent shell of the floating navigation bar. */
  --nav-background: rgb(255 255 255 / 0.82);
  --nav-background-open: rgb(255 255 255 / 0.94);
  --nav-border: rgb(27 28 31 / 0.08);
  --nav-shadow: 0 1px 2px rgb(27 28 31 / 0.04), 0 8px 24px rgb(27 28 31 / 0.08);
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
}

/* ---------- 3. Base & reset --------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[lang="ar"] body,
body[dir="rtl"] {
  font-family: var(--font-arabic);
}

main {
  flex: 1;
  /* The homepage road is positioned against the main column. */
  position: relative;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* One consistent keyboard focus treatment, following each element's radius. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: invisible until focused, then a real button top-start. */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  inset-inline-start: 1rem;
  top: 1rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.9375rem;
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

/* Arabic pages mirror the layout, so directional glyphs mirror with it. */
[dir="rtl"] .icon-directional {
  scale: -1 1;
}

/* ---------- 3b. Hovering text that does something ------------------------ */

/*
 * A link or a text button draws a line under itself on hover, growing from
 * the side the language starts on. It replaces the colour change that used to
 * happen: the same gesture everywhere, and nothing that competes with the
 * yellow of the buttons that matter.
 *
 * `--hover-line-x` insets the line to the text of a padded element, and
 * `--hover-line-y` lifts it off the bottom edge. Shapes that already read as
 * a button — the filled and outlined ones, the chips, the cards — keep their
 * own hover instead; a line inside a pill reads as a mistake.
 */
.nav-link,
.nav-label,
.lang-switch a,
.breadcrumbs a,
.footer-link,
.footer-contact__link,
.footer-bottom__legal,
.footer-bottom__credit,
.area-group__title a,
.story__text p a {
  position: relative;
}

.nav-link::after,
.nav-label::after,
.lang-switch a::after,
.breadcrumbs a::after,
.footer-link::after,
.footer-contact__link::after,
.footer-bottom__legal::after,
.footer-bottom__credit::after,
.area-group__title a::after,
.story__text p a::after {
  content: "";
  position: absolute;
  inset-inline: var(--hover-line-x, 0);
  bottom: var(--hover-line-y, -0.125rem);
  height: 1px;
  background-color: currentColor;
  scale: 0 1;
  transform-origin: left center;
  transition: scale 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Arabic reads the other way, so the line grows the other way. */
[dir="rtl"] .nav-link::after,
[dir="rtl"] .nav-label::after,
[dir="rtl"] .lang-switch a::after,
[dir="rtl"] .breadcrumbs a::after,
[dir="rtl"] .footer-link::after,
[dir="rtl"] .footer-contact__link::after,
[dir="rtl"] .footer-bottom__legal::after,
[dir="rtl"] .footer-bottom__credit::after,
[dir="rtl"] .area-group__title a::after,
[dir="rtl"] .story__text p a::after {
  transform-origin: right center;
}

/*
 * A tap is not a hover: on a touch screen the line would stay behind after a
 * tap, so there it only marks the page you are on.
 */
@media (hover: hover) {
  .nav-link:hover::after,
  .nav-trigger:hover .nav-label::after,
  .nav-panel a:hover .nav-label::after,
  .lang-switch a:hover::after,
  .breadcrumbs a:hover::after,
  .footer-link:hover::after,
  .footer-contact__link:hover::after,
  .footer-bottom__legal:hover::after,
  .footer-bottom__credit:hover::after,
  .area-group__title a:hover::after,
  .story__text p a:hover::after {
    scale: 1 1;
  }
}

/* The page you are on keeps its line, hover or no hover. */
.nav-link[aria-current],
.nav-panel a[aria-current] {
  color: var(--color-foreground);
}

.nav-link[aria-current]::after,
.nav-panel a[aria-current] .nav-label::after,
.nav-trigger[data-current="true"] .nav-label::after {
  scale: 1 1;
}

/* The padded ones: keep the line under the words, not under the padding. */
.nav-link {
  --hover-line-x: 0.75rem;
  --hover-line-y: 0.4rem;
}

.lang-switch a {
  --hover-line-x: 0.75rem;
  --hover-line-y: 0.625rem;
}

/* ---------- 4. Layout primitives ---------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* One rhythm for every band on the site. */
.section {
  padding-block: 5rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 6rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 7rem;
  }
}

.section--muted {
  background-color: var(--color-surface);
}

.section--tight {
  padding-block: 5rem;
}

@media (min-width: 768px) {
  .section--tight {
    padding-block: 6rem;
  }
}

/* Two-column editorial split: 5/7 of twelve columns from lg up. */
.split {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }

  .split--even {
    grid-template-columns: 1fr 1fr;
  }

  .split--center {
    align-items: center;
  }
}

.stack > * + * {
  margin-block-start: 1rem;
}

.stack--lg > * + * {
  margin-block-start: 1.25rem;
}

/* ---------- 5. Typography ----------------------------------------------- */

.eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.section-header {
  display: flex;
  flex-direction: column;
}

.section-header--center {
  align-items: center;
  text-align: center;
}

.section-title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-foreground);
}

.section-header .eyebrow + .section-title {
  margin-block-start: 0.75rem;
}

.section-subtitle {
  margin-block-start: 1rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.section-header--center .section-subtitle {
  margin-inline: auto;
}

.heading-lg {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.heading-md {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.heading-sm {
  font-size: 1.25rem;
  font-weight: 600;
}

.prose p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.prose p + p {
  margin-block-start: 1rem;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.text-muted {
  color: var(--color-muted-foreground);
}

/* Checkmark list, used on the training and trial pages. */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.check-list--muted li {
  color: var(--color-muted-foreground);
}

.check-list .icon {
  margin-block-start: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* ---------- 6. Buttons -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.btn .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn--lg {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

.btn--secondary {
  border-color: var(--color-border);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

.btn--secondary:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 32%, transparent);
}

/*
 * A round button with nothing but an icon in it: the quick routes that sit
 * beside a full button, in the hero and in the closing call to action. Always
 * carries an aria-label, since there is no text to read out.
 */
.round-action {
  display: inline-flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  color: #fff;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.round-action:hover {
  border-color: rgb(255 255 255 / 0.55);
  background-color: rgb(255 255 255 / 0.12);
}

.round-action .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.round-action--whatsapp {
  border-color: transparent;
  background-color: var(--color-whatsapp);
}

.round-action--whatsapp:hover {
  border-color: transparent;
  background-color: var(--color-whatsapp-hover);
}

/* On the inverted blue band. */
.btn--on-accent {
  background-color: var(--color-background);
  color: var(--color-primary);
}

.btn--on-accent:hover {
  background-color: var(--color-surface);
}

.btn--ghost-light {
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}

.btn--ghost-light:hover {
  border-color: rgb(255 255 255 / 0.6);
  background-color: rgb(255 255 255 / 0.06);
}

.btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: #fff;
}

.btn--whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
}

/*
 * Gold conversion button: a tinted shadow and a small hover lift, so it reads
 * as clearly more inviting than the secondary buttons beside it.
 */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow:
    0 1px 2px rgb(27 28 31 / 0.1),
    0 6px 16px rgb(245 179 1 / 0.32);
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    scale 200ms ease;
}

.btn--accent:hover {
  background-color: var(--color-accent-hover);
  scale: 1.03;
  box-shadow:
    0 2px 4px rgb(27 28 31 / 0.1),
    0 10px 24px rgb(245 179 1 / 0.42);
}

.btn--accent:active {
  scale: 0.98;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-row--stack {
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 640px) {
  .btn-row--stack {
    flex-direction: row;
    align-items: center;
  }
}

/* ---------- 7. Header & navigation -------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
}

.site-header .container {
  padding-block-start: 0.75rem;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .site-header .container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 768px) {
  .site-header .container {
    padding-block-start: 1.25rem;
  }
}

.nav-bar {
  position: relative;
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1rem 0.75rem;
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-pill);
  background-color: var(--nav-background);
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition:
    background-color 300ms ease,
    border-color 300ms ease;
}

@media (min-width: 768px) {
  .nav-bar {
    height: 4.75rem;
    padding-inline: 1.5rem 1rem;
  }
}

.nav-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  border-radius: var(--radius-pill);
}

.nav-logo img {
  height: 2rem;
  width: auto;
}

@media (min-width: 768px) {
  .nav-logo img {
    height: 2.25rem;
  }
}

.nav-desktop {
  display: none;
  height: 100%;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }
}

/*
 * The menu sits away from the mark rather than against it: the free space in
 * the bar is split either side of the list, which carries it in towards the
 * middle. What follows it — the language chip, the appointment button and
 * WhatsApp — keeps to the right-hand end.
 */
.nav-list {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 0.125rem;
  margin-inline: auto;
}

.nav-item {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
}

.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

/*
 * Nothing behind the words: the bar stays as dark as it is, and the line
 * under the text is the whole of the hover.
 */
.nav-link:hover,
.nav-trigger:hover,
.nav-panel a:hover {
  background-color: transparent;
}

.nav-chevron {
  width: 0.875rem;
  height: 0.875rem;
  transition: rotate 200ms ease;
}

[aria-expanded="true"] > .nav-chevron,
.nav-chevron[data-open="true"] {
  rotate: 180deg;
}

/* Desktop submenu: a disclosure of ordinary links. */
.nav-panel {
  position: absolute;
  top: calc(100% + 0.625rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 10;
  min-width: 14rem;
  padding: 0.5rem;
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-lg);
  background-color: var(--nav-background-open);
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[dir="rtl"] .nav-panel {
  translate: 50% 0;
}

.nav-panel a {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-foreground);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

/* Compact NL | العربية switch. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}

.lang-switch a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.lang-switch a:hover {
  color: var(--color-foreground);
}

.lang-switch a[aria-current="true"] {
  background-color: var(--color-background);
  color: var(--color-foreground);
  box-shadow: 0 1px 2px rgb(27 28 31 / 0.08);
}

/* Round WhatsApp button in the bar. */
.nav-whatsapp {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-whatsapp);
  color: #fff;
  transition: background-color 200ms ease;
}

.nav-whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
}

.nav-whatsapp .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-mobile {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 1024px) {
  .nav-mobile {
    display: none;
  }
}

.nav-toggle {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-inline-end: -0.25rem;
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  transition: background-color 200ms ease;
}

.nav-toggle:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}

.nav-toggle .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* The bars become a cross while the panel is open. */
.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* Mobile panel: the links are in the HTML from the start, only hidden. */
.nav-mobile-panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.625rem);
  padding: 0.625rem;
  border: 1px solid var(--nav-border);
  border-radius: 1.75rem;
  background-color: var(--nav-background-open);
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 1024px) {
  .nav-mobile-panel {
    display: none;
  }
}

.nav-mobile-panel a,
.nav-mobile-panel .nav-group-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  text-align: start;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-foreground);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.nav-mobile-panel a:hover,
.nav-mobile-panel .nav-group-trigger:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}

.nav-submenu {
  padding-inline-start: 0.75rem;
}

.nav-submenu a {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
}

.nav-mobile-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
}

.nav-mobile-lang span {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.nav-mobile-panel .btn {
  margin-block-start: 0.25rem;
}

/*
 * On dark pages the bar is dark from the first paint and stays dark — it reads
 * the same colour tokens as the page around it (see "Dark pages" at the end of
 * this file), so nothing here needs restyling per element.
 */

/* ---------- 8. Hero ----------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-night);
}

/*
 * Two arrangements of the same parts.
 *
 * On phones the footage fills the whole hero and the copy sits over it: the
 * title in the dark sky above the car, the selling points on the road below
 * it, so neither ever covers the car. The clip is portrait, so `cover` on a
 * phone crops only a sliver off the right; the car is anchored left and stays
 * almost whole.
 *
 * From desktop up the copy takes the left and the footage the right. The
 * panel is taller than the hero and cropped top and bottom — that is how a
 * portrait clip gets a car this size in a landscape hero — and its width is
 * chosen so the car's nose, 11% into the frame, clears the copy.
 */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100svh;
  align-items: stretch;
  padding-block: 6.5rem 6.75rem;
}

@media (min-width: 1024px) {
  .hero__inner {
    align-items: center;
    padding-block: 8rem 6rem;
  }
}

/*
 * The car is on the right in both languages. Arabic reads right-to-left, so
 * its copy would land on the right too; the row is reversed for it so the
 * copy takes the left while the text inside keeps its own alignment.
 */
[dir="rtl"] .hero__inner {
  flex-direction: row-reverse;
}

/*
 * Phones: the footage covers the hero by height, anchored left so the car
 * stays whole, and is pushed up a little so the selling points at the bottom
 * clear the wheels.
 */
.hero__media {
  position: absolute;
  inset: -8% 0 auto 0;
  height: 108%;
}

/*
 * Tablets: covering by width would blow the car up to the full hero height
 * and leave no room for the copy above and below. The frame is fitted whole
 * into the upper 86% instead — the page is black, so the bars beside it are
 * invisible — which keeps the car in the middle band with room for the
 * selling points under the wheels.
 */
@media (min-width: 640px) {
  .hero__media {
    inset: 0 0 auto 0;
    height: 86%;
  }
}

@media (min-width: 1024px) {
  .hero__media {
    inset: 0 0 0 auto;
    height: auto;
    width: min(53%, 101svh);
  }
}

.hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;

  /*
   * Blends the frame into the black page. The sky at the top and the road at
   * the bottom are dark but not black, so both fade out; the car sits in the
   * middle band, well clear of either fade.
   */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
}

@media (min-width: 640px) {
  .hero__media video {
    object-fit: contain;
    object-position: center top;
  }
}

@media (min-width: 1024px) {
  .hero__media video {
    object-fit: cover;
    object-position: center;
    /* The panel's left edge would show as a seam against the black; the
       fade ends before the car's nose at 11%. */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 10%, #000 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 10%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* Darkens the sky and the road on phones so the copy over them reads. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.78) 0%,
    rgb(0 0 0 / 0.35) 26%,
    transparent 38%,
    transparent 62%,
    rgb(0 0 0 / 0.55) 78%,
    rgb(0 0 0 / 0.9) 100%
  );
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hero__scrim {
    display: none;
  }
}


/*
 * On phones the copy is split around the car: title at the top, selling
 * points at the bottom, with the footage's middle band left open between
 * them. From desktop up it is one block beside the footage.
 */
.hero__content {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

/* Narrower on small desktops, where the container leaves the copy wide and
   the car's nose would otherwise reach into it. */
@media (min-width: 1024px) {
  .hero__content {
    display: block;
    max-width: 30rem;
  }
}

@media (min-width: 1280px) {
  .hero__content {
    max-width: 36rem;
  }
}

/*
 * Arabic is right-aligned, so its lines hug the block's right edge — the
 * edge nearest the car. A narrower block moves those lines to the left,
 * where the copy on a Dutch page begins as well.
 */
@media (min-width: 1024px) {
  [dir="rtl"] .hero__content {
    max-width: 27rem;
  }
}

@media (min-width: 1280px) {
  [dir="rtl"] .hero__content {
    max-width: 31rem;
  }
}

/* Keeps the title above the car on phones: the car starts a third of the way
   down the hero, and the copy must have finished by then. */
.hero__copy {
  max-width: 34rem;
}

/* Sentence case at a tight leading: the size makes the statement, not the
   capitals, and the one word that matters is picked out in blue. */
.hero__title {
  font-size: clamp(2rem, 4.3vw, 3.375rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fff;
}

.hero__title span {
  color: var(--color-night-blue);
}

/* Even groot en even licht als de punten in .hero__usps hieronder, inclusief
   dezelfde sprong op 640px — de twee blokken horen als één geheel te lezen. */
.hero__subtitle {
  margin-block-start: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.9);
}

@media (min-width: 640px) {
  .hero__subtitle {
    font-size: 1rem;
  }
}

.hero__usps {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  /* Below desktop the list sits at the foot of the hero, under the car, with
     the buttons (where shown) directly beneath it. */
  margin-block-start: auto;
}

@media (min-width: 1024px) {
  .hero__usps {
    margin-block-start: 1.75rem;
  }
}

.hero__usps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.9);
}

@media (min-width: 640px) {
  .hero__usps li {
    font-size: 1rem;
  }
}

/* The mark beside each point. A touch larger than a plain tick would be, so
   the drawn icons — licence, award, calendar, clipboard — stay legible. */
.hero__tick {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: #2f5bff;
  color: #fff;
}

.hero__tick .icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Hidden on phones: the floating buttons already own the bottom of the screen. */
.hero__actions {
  display: none;
  margin-block-start: 2.25rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .hero__actions {
    display: flex;
  }
}

/* Page hero: the opening band of every page other than the homepage. */
.page-hero {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding-block: 8rem 4rem;
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: 10rem 5rem;
  }
}

.page-hero .eyebrow {
  margin-block-start: 2rem;
}

.page-hero h1 {
  margin-block-start: 0.75rem;
  max-width: 56rem;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-hero__intro {
  margin-block-start: 1.5rem;
  max-width: 42rem;
}

/* ---------- 9. Home sections -------------------------------------------- */

/*
 * Why DALIA: four cards that stack. Each card sticks just below the
 * navigation bar and the next one slides over it — `position: sticky` inside
 * a grid, so the stack needs no script. The tones alternate light and dark
 * (ice, ink, sky, royal) so the card sliding in always stands off the one
 * beneath. `--deck-cover` runs 0 → 1 as a card is covered; script writes it
 * and the card shrinks and dims a little on it, nothing more.
 */
.deck {
  --deck-top: 5.5rem;
  /* Height a stuck card may take: the screen below the navigation bar. */
  --deck-room: calc(100vh - var(--deck-top) - 1.5rem);
  display: grid;
  gap: 1.25rem;
  margin-block-start: 3rem;
}

@supports (height: 1svh) {
  .deck {
    --deck-room: calc(100svh - var(--deck-top) - 1.5rem);
  }
}

@media (min-width: 768px) {
  .deck {
    --deck-top: 6.5rem;
    gap: 1.75rem;
    margin-block-start: 3.5rem;
  }
}

.deck-card {
  --deck-cover: 0;
  position: sticky;
  /* Script lowers the stop — above the screen if need be — for a card too
     tall for the room, so its bottom is still reached before it is covered. */
  top: var(--deck-stick, var(--deck-top));
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Script sets `--deck-height` to the tallest card, so all four match. */
  min-height: var(--deck-height, min(36rem, var(--deck-room)));
  padding: clamp(1.75rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid var(--deck-border, transparent);
  border-radius: clamp(1.75rem, 4vw, 2.75rem);
  background-color: var(--deck-bg);
  color: var(--deck-fg);
  box-shadow:
    0 2px 6px rgb(0 0 0 / 0.25),
    0 24px 48px rgb(0 0 0 / 0.45);
  transform-origin: 50% 0;
  scale: calc(1 - 0.05 * var(--deck-cover));
}

/* Dims as the next card covers it. */
.deck-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background-color: #000;
  opacity: calc(var(--deck-cover) * 0.45);
  pointer-events: none;
}

.deck-card--ice {
  --deck-bg: #eef2ff;
  --deck-fg: #0b1020;
  --deck-muted: rgb(11 16 32 / 0.72);
  --deck-kicker: #063eee;
  --deck-mark: #063eee;
  --deck-number: rgb(6 62 238 / 0.09);
  --deck-chip: rgb(6 62 238 / 0.08);
  --deck-chip-border: rgb(6 62 238 / 0.2);
}

.deck-card--ink {
  --deck-bg: #14161b;
  --deck-fg: #f7f8f8;
  --deck-muted: rgb(255 255 255 / 0.7);
  --deck-kicker: #7d9cff;
  --deck-mark: #7d9cff;
  --deck-number: rgb(255 255 255 / 0.05);
  --deck-chip: rgb(255 255 255 / 0.06);
  --deck-chip-border: rgb(255 255 255 / 0.14);
  --deck-border: rgb(255 255 255 / 0.12);
}

.deck-card--sky {
  --deck-bg: #7d9cff;
  --deck-fg: #0b1020;
  --deck-muted: rgb(11 16 32 / 0.76);
  --deck-kicker: #0b1020;
  --deck-mark: #0b1020;
  --deck-number: rgb(255 255 255 / 0.18);
  --deck-chip: rgb(11 16 32 / 0.08);
  --deck-chip-border: rgb(11 16 32 / 0.2);
}

.deck-card--royal {
  --deck-bg: #063eee;
  --deck-fg: #ffffff;
  --deck-muted: rgb(255 255 255 / 0.82);
  --deck-kicker: rgb(255 255 255 / 0.85);
  --deck-mark: var(--color-accent);
  --deck-number: rgb(255 255 255 / 0.1);
  --deck-chip: rgb(255 255 255 / 0.12);
  --deck-chip-border: rgb(255 255 255 / 0.26);
}

/* The card's number, oversized and faint, bleeding off the top corner. */
.deck-card__number {
  position: absolute;
  inset-block-start: -0.14em;
  inset-inline-end: -0.02em;
  font-size: clamp(7rem, 22vw, 17rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--deck-number);
  pointer-events: none;
  user-select: none;
}

.deck-card__content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

/* Keeps the copy clear of the mark in the corner once that mark is shown. */
@media (min-width: 768px) {
  .deck-card__content {
    max-width: min(40rem, 100% - 6.5rem);
  }
}

/* A short piece of lane marking above the title. */
.deck-card__mark {
  display: block;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    to right,
    var(--deck-mark) 0 0.875rem,
    transparent 0.875rem 1.5rem
  );
}

/* The gradient runs left to right whatever the writing direction, so the
   pattern is mirrored rather than left starting a gap in from the edge. */
[dir="rtl"] .deck-card__mark {
  scale: -1 1;
}

.deck-card__kicker {
  margin-block-start: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deck-kicker);
}

.deck-card__title {
  margin-block-start: 0.75rem;
  font-size: clamp(1.875rem, 4.4vw, 3.75rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.deck-card__body {
  margin-block-start: 1.25rem;
  max-width: 36rem;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--deck-muted);
}

.deck-card__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.5rem;
  padding: 0;
  list-style: none;
}

.deck-card__points li {
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--deck-chip-border);
  border-radius: var(--radius-pill);
  background-color: var(--deck-chip);
  font-size: 0.875rem;
  font-weight: 500;
}

.deck-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* A shallow screen — a laptop — gets a tighter card, so a whole one fits. */
@media (min-width: 768px) and (max-height: 860px) {
  .deck-card {
    padding-block: clamp(1.75rem, 4vh, 3rem);
  }

  .deck-card__title {
    font-size: clamp(1.75rem, 3.4vw, 3rem);
  }

  .deck-card__body {
    font-size: 1rem;
  }

  .deck-card__actions {
    margin-block-start: 1.5rem;
  }
}

/* The outline button is built for the page; on the dark card it lifts. */
.deck .deck-card--ink .btn--secondary {
  border-color: rgb(255 255 255 / 0.18);
  background-color: rgb(255 255 255 / 0.08);
  color: #fff;
}

.deck .deck-card--ink .btn--secondary:hover {
  border-color: rgb(255 255 255 / 0.6);
  background-color: rgb(255 255 255 / 0.14);
  color: #fff;
}

/* The card's subject as a mark in the far corner; there is no room on a phone. */
.deck-card__icon {
  position: absolute;
  z-index: 1;
  inset-block-end: clamp(1.5rem, 4vw, 3rem);
  inset-inline-end: clamp(1.5rem, 4vw, 3rem);
  display: none;
  width: clamp(3.75rem, 7vw, 5.5rem);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--deck-chip-border);
  border-radius: var(--radius-pill);
  background-color: var(--deck-chip);
  color: var(--deck-fg);
}

.deck-card__icon .icon {
  width: 42%;
  height: 42%;
}

@media (min-width: 768px) {
  .deck-card__icon {
    display: flex;
  }
}

/* Two training routes, side by side. */
.card-grid-2 {
  display: grid;
  gap: 1.5rem;
  margin-block-start: 3.5rem;
}

@media (min-width: 1024px) {
  .card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.training-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-background);
}

@media (min-width: 640px) {
  .training-card {
    padding: 2.25rem;
  }
}

.training-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.training-card > p {
  margin-block-start: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.training-card .check-list {
  flex: 1;
  margin-block-start: 1.75rem;
  padding-block-start: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.training-card .btn {
  margin-block-start: 2rem;
  width: 100%;
}

@media (min-width: 640px) {
  .training-card .btn {
    width: fit-content;
  }
}

/*
 * What you learn on a licence: the points as numbered cards. The number sits
 * large and faint behind the text rather than beside it, so a row of cards
 * reads as one block and the eye lands on the words first.
 */
.learn-grid {
  display: grid;
  gap: 1rem;
  margin-block-start: 3rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .learn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .learn-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.learn-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 7.5rem;
  overflow: hidden;
  padding: 1.5rem 1.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card, var(--color-surface));
  transition: border-color 200ms ease;
}

.learn-card:hover {
  border-color: rgb(255 255 255 / 0.35);
}

.learn-card__mark {
  position: absolute;
  inset-block-start: -0.35em;
  inset-inline-end: -0.05em;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--color-primary) 16%, transparent);
  pointer-events: none;
  user-select: none;
}

.learn-card__text {
  position: relative;
  z-index: 1;
  max-width: 14rem;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-foreground);
}

/*
 * The four steps, as stops along a road: the numbers sit on a dashed lane
 * marking that runs the width of the list, with the text on a card beneath.
 * The line turns with the layout — across on a wide screen, down on a narrow
 * one — and fades out at both ends rather than stopping dead. A little car
 * drives along it as the list scrolls into view; `js/site.js` moves it.
 */
.steps {
  --steps-gap: 1.25rem;
  --steps-mark: 3rem;
  position: relative;
  /* Above the road, which drives along this section's lane marking: the car
     and its line pass behind the numbered stops rather than over them. */
  z-index: 2;
  margin-block-start: 3.5rem;
}

.steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 2px;
  inset-block: calc(var(--steps-mark) / 2);
  inset-inline-start: calc(var(--steps-mark) / 2 - 1px);
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.24) 0 10px,
    transparent 10px 20px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}

.steps__list {
  display: grid;
  gap: 1.5rem var(--steps-gap);
}

@media (min-width: 640px) {
  .steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps::before {
    display: none;
  }
}

@media (min-width: 1024px) {
  .steps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps::before {
    display: block;
    width: auto;
    height: 2px;
    inset-block: auto;
    inset-inline: 0;
    top: calc(var(--steps-mark) / 2 - 1px);
    background-image: repeating-linear-gradient(
      to right,
      rgb(255 255 255 / 0.24) 0 10px,
      transparent 10px 20px
    );
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
}

/* The item is a grid so its content stretches to the row: equal cards. */
.step {
  position: relative;
  z-index: 1;
  display: grid;
}

.step__inner {
  display: grid;
  height: 100%;
  grid-template-columns: var(--steps-mark) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .step__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* Sits on the lane marking and hides it where it passes. */
.step__number {
  display: flex;
  height: var(--steps-mark);
  width: var(--steps-mark);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-on-primary);
}

.step__card {
  height: 100%;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card, var(--color-background));
}

@media (min-width: 1024px) {
  .step__card {
    padding: 1.5rem;
  }
}

.step__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}

.step__body {
  margin-block-start: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

/*
 * The lesson area: one group per district or municipality, each with its own
 * places as chips. A heading every dozen names keeps a list this long
 * readable — you look up your own corner rather than reading the whole thing.
 */
.area-group + .area-group {
  margin-block-start: 2rem;
}

.area-group__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.area-group .place-list {
  margin-block-start: 0.875rem;
}

/* The places the school teaches in, as a row of chips. */
.place-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-block-start: 2.5rem;
  padding: 0;
  list-style: none;
}

.place-list li {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card, var(--color-surface));
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-foreground);
}

/* A place with a page of its own: the whole chip is the link. */
.place-list li:has(a) {
  padding: 0;
}

.place-list a {
  display: block;
  padding: 0.4375rem 0.875rem;
  border-radius: inherit;
  color: var(--color-foreground);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.place-list a:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 9%, transparent);
}

/* The three routes under the last band, left-aligned with the text. */
.story__text .contact-icons {
  margin-block-start: 1.75rem;
}

/* Handige rijtips: the parallel-parking video. */
.tips-video {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.tips-video__frame {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-foreground);
  box-shadow: 0 12px 40px rgb(27 28 31 / 0.14);
}

/* The footage is square (352x352), so the player keeps a 1:1 frame. */
.tips-video video {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
}

.tips-video__caption {
  margin-block-start: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

/* Dark conversion card, used on the theory pages and after a practice test. */
.dark-band {
  border-radius: var(--radius-2xl);
  background-color: var(--color-foreground);
  color: var(--color-background);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .dark-band {
    padding-inline: 3rem;
  }
}

@media (min-width: 768px) {
  .dark-band {
    padding-block: 4rem;
  }
}

.dark-band h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.dark-band p {
  margin-inline: auto;
  margin-block-start: 1.25rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.75);
}

.dark-band__note {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.6);
}

.dark-band__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-block-start: 2.25rem;
}

/* ---------- 10. Packages & rates ---------------------------------------- */

.package-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .package-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .package-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.package {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
}

@media (min-width: 640px) {
  .package {
    padding: 1.75rem;
  }
}

.package--featured {
  border-color: var(--color-accent);
  box-shadow: 0 1px 2px rgb(27 28 31 / 0.05), 0 8px 24px rgb(245 179 1 / 0.12);
}

.package__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.package__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
}

.badge .icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.badge--accent {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.package__lessons {
  margin-block-start: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.package__note {
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}

.package__price {
  margin-block-start: 0.5rem;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.package__includes {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-block-start: 1.25rem;
}

.package__includes li {
  display: flex;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.package__includes .icon {
  margin-block-start: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.package .btn {
  margin-block-start: 1.5rem;
}

.rates {
  margin-block-start: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
}

@media (min-width: 640px) {
  .rates {
    padding: 2rem;
  }
}

.rates h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.rates__grid {
  display: grid;
  gap: 1.25rem 2rem;
  margin-block-start: 1.5rem;
}

@media (min-width: 640px) {
  .rates__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rate {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.rate__icon {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
}

.rate__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.rate dt {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.rate dd {
  margin-block-start: 0.125rem;
  margin-inline-start: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

/*
 * The BE cards. They open with a mark in the corner rather than with a label
 * row, quote the amount without VAT under the price, and the two single rates
 * carry a sentence where the one-day trainings carry a list. `flex: 1` on that
 * sentence does what the list does: push the button to the foot of the card,
 * so all four buttons line up across the row.
 *
 * `flex-end` on the cross axis of a column, so the mark follows the reading
 * direction and lands on the other corner on the Arabic pages.
 */
.package__icon {
  align-self: flex-end;
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
}

.package__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.package__vat {
  margin-block-start: 0.375rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.package__body {
  flex: 1;
  margin-block-start: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}

/*
 * The B / BE switch above the rates.
 *
 * Without JavaScript the strip stays hidden and both panels are shown under
 * their own heading; `js/site.js` reveals the strip, marks the root ready and
 * takes the headings out.
 */
.pricing-switcher__tabs {
  /* `fit-content` keeps the track around the two buttons; the auto margins
     then centre it under the section heading. */
  display: flex;
  width: fit-content;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin-block-end: 2rem;
  margin-inline: auto;
}

.pricing-tab {
  min-height: 2.5rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.pricing-tab:hover {
  color: var(--color-foreground);
}

.pricing-tab[aria-selected="true"] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.pricing-panel + .pricing-panel {
  margin-block-start: 3rem;
}

.pricing-panel__title {
  margin-block-end: 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

/* The way on to the full page for whichever licence is on show. */
.pricing-panel__more {
  margin-block-start: 2.5rem;
  text-align: center;
}

/* Once the strip is up, the tab labels say what these headings said. */
[data-pricing-ready] .pricing-panel + .pricing-panel {
  margin-block-start: 0;
}

[data-pricing-ready] .pricing-panel__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The panel takes focus as a region; the ring belongs on the card row. */
.pricing-panel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 6px;
  border-radius: var(--radius-lg);
}

/*
 * The road: a car that zigzags down the homepage as the visitor scrolls,
 * drawing its route behind it. Where the route runs is decided by the script
 * from the layout; this only paints it.
 *
 * Line and car share the site's blue. The car is seen from above: a body
 * with a hairline of page colour around it so it stays a solid object on a
 * grey card, glass cut out in the page colour, wheels in the lighter accent
 * so they show against black, and two headlights that say which way is
 * forward.
 */
.road {
  position: absolute;
  inset-inline: 0;
  width: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.road__line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road__body {
  fill: var(--color-primary);
  stroke: var(--color-background);
  stroke-width: 1.5;
}

.road__wheel {
  fill: var(--color-primary);
}

.road__glass {
  fill: var(--color-background);
}

.road__light {
  fill: #fff;
  opacity: 0.9;
}

/* Panel used for "what you learn" / "who is this for" blocks. */
.panel {
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

@media (min-width: 640px) {
  .panel {
    padding: 2.25rem;
  }
}

.panel--plain {
  background-color: var(--color-background);
}

.panel h2,
.panel h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.panel > p {
  margin-block-start: 1rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.panel .check-list {
  margin-block-start: 1.5rem;
}

/* ---------- 11. Theory pages -------------------------------------------- */

.topic-grid {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 3rem;
}

@media (min-width: 768px) {
  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.topic {
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

@media (min-width: 640px) {
  .topic {
    padding: 2rem;
  }
}

/* Cards sit on the opposite surface of their band, so they keep an edge. */
.section--muted .topic {
  background-color: var(--color-background);
}

.topic__icon {
  display: inline-flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
}

.topic__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.topic h3 {
  margin-block-start: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.topic p {
  margin-block-start: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.highlight {
  margin-block-start: 1.5rem;
  padding: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: var(--radius-xl);
  background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

@media (min-width: 640px) {
  .highlight {
    padding: 2.25rem;
  }
}

.highlight h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.highlight ul {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
}

@media (min-width: 768px) {
  .highlight ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.highlight li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.highlight .icon {
  margin-block-start: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.center-action {
  display: flex;
  justify-content: center;
  margin-block-start: 2.5rem;
}

/* ---------- 12. Practice test ------------------------------------------- */

.quiz {
  scroll-margin-top: 7rem;
}

.quiz__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-block-end: 2.5rem;
  max-width: 48rem;
  margin-inline: auto;
}

.pill-note {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

.quiz__disclaimer {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.quiz__panel {
  max-width: 48rem;
  margin-inline: auto;
}

.quiz__progress-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.quiz__counter {
  font-size: 0.875rem;
  font-weight: 600;
}

.quiz__answered {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.progress {
  margin-block-start: 0.75rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transition: width 300ms ease;
}

.question-card {
  margin-block-start: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-background);
}

@media (min-width: 640px) {
  .question-card {
    padding: 2.25rem;
  }
}

.question-card h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}

@media (min-width: 640px) {
  .question-card h2 {
    font-size: 1.5rem;
  }
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 1.75rem;
}

.answer {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
  text-align: start;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

@media (min-width: 640px) {
  .answer {
    padding: 1.25rem;
  }
}

.answer:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 28%, transparent);
  background-color: var(--color-surface);
}

.answer[aria-checked="true"] {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.answer__letter {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}

.answer[aria-checked="true"] .answer__letter {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.answer__text {
  padding-block-start: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.quiz__notice {
  margin-block-start: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-danger) 5%, transparent);
  font-size: 0.875rem;
  color: var(--color-danger);
}

.quiz__nav {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 0.75rem;
  margin-block-start: 1.75rem;
}

@media (min-width: 640px) {
  .quiz__nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn--secondary:disabled:hover {
  border-color: var(--color-border);
  color: var(--color-foreground);
}

/* Result */
.result-card {
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-background);
  text-align: center;
}

@media (min-width: 640px) {
  .result-card {
    padding: 3rem;
  }
}

.result-card__score {
  margin-block-start: 1rem;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.result-card__score span {
  color: var(--color-muted-foreground);
}

.result-card__line {
  margin-block-start: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.result-card__percent {
  margin-block-start: 0.25rem;
  color: var(--color-muted-foreground);
}

.result-card .pill-note {
  margin-block-start: 1.5rem;
}

.result-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 2.25rem;
}

@media (min-width: 640px) {
  .result-card__actions {
    flex-direction: row;
    align-items: center;
  }
}

.review {
  margin-block-start: 3.5rem;
}

.review > h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.review > p {
  margin-block-start: 0.5rem;
  color: var(--color-muted-foreground);
}

.review__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block-start: 2rem;
}

.review__item {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-background);
}

@media (min-width: 640px) {
  .review__item {
    padding: 2rem;
  }
}

.review__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.review__counter {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}

.verdict {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
}

.verdict .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.verdict--correct {
  background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: #166534;
}

.verdict--wrong {
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.review__item h3 {
  margin-block-start: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
}

.review__facts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
  font-size: 0.9375rem;
}

.fact {
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.fact dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.fact dd {
  margin-block-start: 0.25rem;
  margin-inline-start: 0;
}

.fact--correct {
  border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
  background-color: color-mix(in srgb, var(--color-success) 6%, transparent);
}

.fact--wrong {
  border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
  background-color: color-mix(in srgb, var(--color-danger) 5%, transparent);
}

.fact--neutral {
  background-color: var(--color-surface);
}

.fact--neutral dd {
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

/* ---------- 13. Forms --------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.field {
  display: flex;
  flex-direction: column;
}

.field > label {
  font-size: 0.875rem;
  font-weight: 500;
}

.field > label span {
  font-weight: 400;
  color: var(--color-muted-foreground);
}

.control {
  width: 100%;
  margin-block-start: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  font-size: 1rem;
  transition: border-color 200ms ease;
}

.control:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 20%, transparent);
}

.control:focus {
  border-color: var(--color-primary);
}

.control::placeholder {
  color: color-mix(in srgb, var(--color-muted-foreground) 70%, transparent);
}

.control[aria-invalid="true"] {
  border-color: var(--color-danger);
}

textarea.control {
  resize: vertical;
}

.field__error {
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-danger);
}

/* The note and the button share the last row, the button hard against the end. */
.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.form__note {
  max-width: 28rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.form__note a {
  color: var(--color-foreground);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form__note a:hover {
  text-decoration-thickness: 2px;
}

.form__foot .btn {
  flex-shrink: 0;
}

.form__alert {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.form__alert--error {
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.form__alert strong {
  display: block;
  font-weight: 600;
}

.form__alert--error strong {
  color: var(--color-danger);
}

.form__alert p {
  margin-block-start: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.form__summary {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-danger);
}

.form-success {
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.form-success h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.form-success p {
  margin-block-start: 0.75rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.form-shell {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

@media (min-width: 640px) {
  .form-shell {
    padding: 2.25rem;
  }
}

/*
 * The honeypot. Out of sight and out of the tab order, but really there in
 * the page: a robot that fills in every field it finds fills this one too.
 * Not `display: none` — that is the first thing a robot learns to skip.
 */
.form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Turnstile is invisible here; the element only gives the widget a home. */
.form__turnstile:empty {
  display: none;
}

/* ---------- 14. Contact options ----------------------------------------- */

.contact-options {
  display: grid;
  gap: 1rem;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
  transition: border-color 200ms ease;
}

.contact-option:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 28%, transparent);
}

.contact-option--whatsapp:hover {
  border-color: var(--color-whatsapp);
}

.contact-option__icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
}

.contact-option--whatsapp .contact-option__icon {
  background-color: color-mix(in srgb, var(--color-whatsapp) 12%, transparent);
  color: var(--color-whatsapp);
}

.contact-option__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-option__body {
  min-width: 0;
}

.contact-option__label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.contact-option__value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  word-break: break-word;
  transition: color 200ms ease;
}

.contact-option:hover .contact-option__value {
  color: var(--color-foreground);
}

.contact-option--whatsapp:hover .contact-option__value {
  color: var(--color-foreground);
}


/* ---------- 14b. Photo band (contact, over ons) -------------------------- */

/*
 * A page that is one band: a photograph, dimmed right down, with the copy on
 * one side and a panel — the form, the story — on the other. The picture fades
 * out at the bottom so the band has no edge of its own and sinks into what
 * follows it.
 */
.photo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-background);
  padding-block: 8.5rem 5rem;
}

@media (min-width: 768px) {
  .photo-hero {
    padding-block: 11rem 7rem;
  }
}

.photo-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

.photo-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Deep enough that a form sits comfortably on top of a photograph. */
.photo-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.74);
}

.photo-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .photo-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

.photo-hero__title {
  max-width: 16ch;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}

.photo-hero__body {
  margin-block-start: 1.5rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.78);
}

.photo-hero__routes {
  margin-block-start: 3rem;
}

.photo-hero__routes-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

/*
 * The three routes, as buttons with nothing but their symbol in them. Each one
 * carries a label for a screen reader, since there is no text to read; the
 * number and the address themselves are in the footer of every page.
 */
.contact-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
  padding: 0;
  list-style: none;
}

.contact-icon {
  display: flex;
  height: 3.25rem;
  width: 3.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.06);
  color: #fff;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.contact-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-icon:hover {
  border-color: rgb(255 255 255 / 0.42);
  background-color: rgb(255 255 255 / 0.14);
}

/* WhatsApp is known by its green, so it keeps it. */
.contact-icon--whatsapp {
  border-color: color-mix(in srgb, var(--color-whatsapp) 45%, transparent);
  background-color: color-mix(in srgb, var(--color-whatsapp) 14%, transparent);
  color: var(--color-whatsapp);
}

.contact-icon--whatsapp:hover {
  border-color: var(--color-whatsapp);
  background-color: color-mix(in srgb, var(--color-whatsapp) 24%, transparent);
}

/* The form, on a panel of its own so it reads over the picture. */
.photo-hero__panel {
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-xl);
  background-color: rgb(10 11 14 / 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.photo-hero__panel-title {
  margin-block-end: 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.photo-hero__panel .field > label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
}

/* The page behind the panel is black, so a field needs its own lift. */
.photo-hero__panel .control {
  border-color: rgb(255 255 255 / 0.14);
  background-color: rgb(255 255 255 / 0.04);
  color: #fff;
}

.photo-hero__panel .control:hover {
  border-color: rgb(255 255 255 / 0.28);
}

.photo-hero__panel .control:focus {
  border-color: var(--color-night-blue);
}

.photo-hero__panel .form__note {
  color: rgb(255 255 255 / 0.62);
}

.photo-hero__panel .form__note a {
  color: rgb(255 255 255 / 0.9);
}

/* ---------- 14c. Story page (over ons) ----------------------------------- */

/*
 * A page read from top to bottom: a centred opening over a photograph, then
 * one band per chapter with its number and heading on the left and the text on
 * the right, and a centred statement to close on. Nothing moves sideways, so
 * the reading line stays put the whole way down.
 */
.story-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-background);
  padding-block: 9rem 5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .story-hero {
    padding-block: 12rem 7rem;
  }
}

.story-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* A long, even ramp: the picture is gone well before the band ends, so
     there is no edge where it stops — only black turning into black. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 92%);
}

.story-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * The veil over the photograph. Light enough that the car and the trailer are
 * plainly visible; the copy on top keeps its own shadow so it stays readable
 * over the bright parts of the picture rather than needing a darker veil.
 */
.story-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.42);
}

.story-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-hero__title {
  margin-block-start: 1.5rem;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.55);
  max-width: 18ch;
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fff;
}

.story-hero__lede {
  margin-block-start: 1.5rem;
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.6);
}

.story-hero__lede + .story-hero__lede {
  margin-block-start: 1rem;
}

/* The small label above a heading, set as a block rather than as a word. */
.chip {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  background-color: rgb(255 255 255 / 0.08);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82);
}

.story {
  border-top: 1px solid var(--color-border);
  padding-block: 4.5rem;
}

/* The first chapter follows the photograph, and a rule there would be the one
   edge the fade exists to avoid. */
.story-hero + .story {
  border-top: 0;
}

@media (min-width: 768px) {
  .story {
    padding-block: 5.5rem;
  }
}

.story__inner {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .story__inner {
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.story__title {
  margin-block-start: 1.25rem;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-foreground);
}

.story__text {
  max-width: 40rem;
}

.story__text p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-muted-foreground);
}

.story__text p + p {
  margin-block-start: 1.25rem;
}

/* A question and its answer inside a story band, on the location pages. */
.story__qa + .story__qa {
  margin-block-start: 1.75rem;
}

.story__question {
  margin-block-end: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-foreground);
}

/*
 * The places that have a page of their own, listed as cards rather than as
 * chips: these are the few links on the page that are worth finding, so they
 * are the ones that look like a destination.
 */
.link-cards {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .link-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.875rem);
  background-color: var(--color-card, var(--color-surface));
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.link-card:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 32%, transparent);
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
  transform: translateY(-2px);
}

.link-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.link-card__note {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

/* ---------- 14d. Learning pages (signs, priority) ------------------------ */

/* The learning pages open on the page's own black rather than a photograph. */
.story-hero--plain {
  padding-block: 8.5rem 3.5rem;
}

@media (min-width: 768px) {
  .story-hero--plain {
    padding-block: 10.5rem 4.5rem;
  }
}

.story-hero--plain .story-hero__title,
.story-hero--plain .story-hero__lede {
  color: var(--color-foreground);
  text-shadow: none;
}

.story-hero--plain .story-hero__lede {
  color: var(--color-muted-foreground);
}

/*
 * A band that follows the photograph opens right under it: the picture has
 * already faded into the page by then, so the section's own top padding would
 * only add to a gap that is there twice over.
 */
.story-hero + .section {
  padding-block-start: 1rem;
}

@media (min-width: 768px) {
  .story-hero + .section {
    padding-block-start: 1.5rem;
  }
}

.story__note {
  margin-block-start: 1rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.story__footnote {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

/*
 * The signs themselves. Every drawing gets the same square of white behind it,
 * whatever its shape — a triangle, a disc and a rectangle then line up on one
 * baseline, and a sign with a white face still reads on the dark page.
 */
.sign-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  padding: 0;
  list-style: none;
}

.sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card, var(--color-surface));
}

.sign__art {
  display: flex;
  height: 5.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: rgb(255 255 255 / 0.9);
  padding: 0.625rem;
}

.sign__art img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*
 * The code and the plus that opens the meaning. The whole row is the button,
 * so a tap anywhere along it works; the plus turns into a cross when open,
 * the same as the questions further down the site.
 */
.sign__toggle {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.875rem;
  text-align: start;
}

.sign__code {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.sign__icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-muted-foreground);
  transition: rotate 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sign__icon::before,
.sign__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 0.75rem;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  translate: -50% -50%;
}

.sign__icon::after {
  rotate: 90deg;
}

.sign:not([data-sign-closed]) .sign__icon {
  rotate: 45deg;
}

.sign__detail {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
  /* Clips the gap above the text as well, so a shut sign takes no room. */
  overflow: hidden;
  transition: grid-template-rows 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Added by the script; without it every meaning stands open. */
.sign[data-sign-closed] .sign__detail {
  grid-template-rows: 0fr;
}

/*
 * The gap above the text is a margin, not padding: padding counts towards the
 * height of the row and would leave a sliver behind when the row collapses.
 * The margin falls outside it and is clipped by the container above.
 */
.sign__text {
  overflow: hidden;
  min-height: 0;
  margin-block-start: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}

/* A priority situation: the drawing beside the rule it illustrates. */
.situation {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .situation {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
}

.situation__art {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: #0b0c0f;
}

.situation__figure {
  display: block;
  width: 100%;
  height: auto;
}

.situation__body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-muted-foreground);
}

/* What the colours in the drawings mean. */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin-block-start: 2rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend__swatch {
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
}

.legend__swatch--you {
  background-color: #2f5bff;
}

.legend__swatch--other {
  background-color: #c9ccd4;
}

.legend__swatch--order {
  border-radius: var(--radius-pill);
  background-color: #0b0c0f;
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-foreground);
}

/* The picture that belongs with a question. */
.question-card__art {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background-color: rgb(255 255 255 / 0.9);
}

.question-card__art img,
.question-card__art svg {
  width: 100%;
  max-width: 17rem;
  height: auto;
}

.question-card__art--diagram {
  background-color: #0b0c0f;
  border: 1px solid var(--color-border);
}

/* ---------- 15. FAQ, breadcrumbs, legal --------------------------------- */

/*
 * The question list beside a short introduction. Answers open and close by
 * animating the row track from 0fr to 1fr, which needs no measured heights;
 * the inner wrapper clips what does not fit yet. The <details> element keeps
 * its native behaviour when the script is absent, and every answer ships
 * open, so the list is readable either way.
 */
.faq-section__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .faq-section__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
  }
}

.faq-section__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faq-section__title {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-foreground);
}

.faq-section__lede {
  margin-block-start: 1.25rem;
  max-width: 22rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

.faq-section__intro .btn {
  margin-block-start: 2rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card, var(--color-background));
  transition: border-color 250ms ease;
}

.faq-item:not([data-faq-closed]) {
  border-color: rgb(255 255 255 / 0.2);
}

.faq-item__question {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  text-align: start;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-foreground);
  transition: color 200ms ease;
}

@media (min-width: 640px) {
  .faq-item__question {
    padding: 1.25rem 1.5rem;
    font-size: 1.0625rem;
  }
}

/* A plus built from two bars; a quarter turn makes it a cross. */
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  transition: rotate 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 1rem;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  translate: -50% -50%;
}

.faq-item__icon::after {
  rotate: 90deg;
}

.faq-item:not([data-faq-closed]) .faq-item__icon {
  rotate: 45deg;
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Added by the script; without it every answer stands open. */
.faq-item[data-faq-closed] .faq-item__answer {
  grid-template-rows: 0fr;
}

.faq-item__answer-inner {
  overflow: hidden;
}

.faq-item__answer-inner p {
  padding: 0 1.25rem 1.25rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

@media (min-width: 640px) {
  .faq-item__answer-inner p {
    padding-inline: 1.5rem;
    padding-block-end: 1.5rem;
  }
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs a {
  transition: color 200ms ease;
}

.breadcrumbs a:hover {
  color: var(--color-foreground);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-foreground);
}

.legal {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

.legal article > div {
  margin-block-start: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.legal p {
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

/* ---------- 15b. Closing call to action ---------------------------------- */

/*
 * The photo band above the footer. The picture is masked to nothing at the top
 * and the bottom, so the band has no edge of its own: it simply emerges from
 * the black of the section above and sinks back into the footer. The veil over
 * it is masked along with it, which keeps the fade a single, even ramp.
 */
.closing-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-background);
  padding-block: 6rem;
  text-align: center;
}

@media (min-width: 768px) {
  .closing-cta {
    padding-block: 8.5rem;
  }
}

.closing-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 72%, transparent 100%);
}

.closing-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dims the picture so the copy over it reads. */
.closing-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.62);
}

.closing-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-cta__title {
  max-width: 20ch;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}

.closing-cta__body {
  margin-block-start: 1.25rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.82);
}

/*
 * The main button with the two quick routes beside it. The round buttons are
 * sized to the tall button's own height, so the row sits on one line.
 */
.closing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 2.25rem;
}

.closing-cta__actions .round-action {
  height: 3.25rem;
  width: 3.25rem;
}

/* ---------- 16. Footer -------------------------------------------------- */

/*
 * Four columns on a wide screen: the brand, two columns of links and the
 * contact details, closed off by a centred line of small print. The markup is
 * in tools/templates/footer.html.
 */
.site-footer {
  background-color: var(--color-surface);
  padding-block-start: 4.5rem;
}

/* The closing band fades into the footer; a rule between them would cut it. */
main:not(:has(.closing-cta)) + .site-footer {
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .site-footer {
    padding-block-start: 6rem;
  }
}

.footer-grid {
  display: grid;
  gap: 3.5rem 2.5rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 4rem 3rem;
  }
}

/* The brand block: name, the line from the hero, and the mark on a tile. */
.footer-brand__name {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}

/* The one word picked out, in the blue the hero gives it. */
.footer-brand__accent {
  color: var(--color-night-blue);
}

.footer-brand__tagline {
  margin-block-start: 1.5rem;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-foreground);
}

/* The mark stands on the page itself — no tile, no border behind it. */
.footer-brand__mark {
  display: block;
  width: min(100%, 7rem);
  margin-block-start: 2rem;
}

@media (min-width: 640px) {
  .footer-brand__mark {
    width: min(100%, 9.5rem);
    margin-block-start: 2.25rem;
  }
}

.footer-brand__mark img {
  width: 100%;
  height: auto;
}

/* The small grey label over each column. */
/* A second heading in the same column needs air above it. */
.footer-col__title--next {
  margin-block-start: 2rem;
}

.footer-col__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  margin-block-start: 1.5rem;
}

.footer-link {
  font-size: 1rem;
  color: var(--color-foreground);
  transition: color 200ms ease;
}

.footer-link:hover {
  color: var(--color-foreground);
}

/* A contact detail, and the space that sets the next label apart from it. */
.footer-contact {
  margin-block-start: 0.875rem;
}

.footer-contact + .footer-col__title {
  display: block;
  margin-block-start: 2.25rem;
}

.footer-contact__link {
  font-size: 1rem;
  color: var(--color-foreground);
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

.footer-contact__link:hover {
  color: var(--color-foreground);
}

/* The closing line of small print, centred under everything. */
.footer-bottom {
  margin-block-start: 4.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.footer-bottom__line {
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.footer-bottom__line + .footer-bottom__line {
  margin-block-start: 0.5rem;
}

/* The three legal pages, on one wrapping row above the rest. */
.footer-bottom__legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-block-end: 1.25rem;
}

.footer-bottom__legal {
  color: var(--color-muted-foreground);
  transition: color 200ms ease;
}

.footer-bottom__legal:hover {
  color: var(--color-foreground);
}

.footer-bottom__credit {
  color: var(--color-muted-foreground);
  transition: color 200ms ease;
}

.footer-bottom__credit:hover {
  color: var(--color-foreground);
}
/* ---------- 17. Floating actions ---------------------------------------- */

.whatsapp-fab {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-whatsapp);
  color: #fff;
  box-shadow: var(--shadow-float);
  transition:
    scale 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.whatsapp-fab .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.whatsapp-fab:hover {
  background-color: var(--color-whatsapp-hover);
  scale: 1.05;
  box-shadow:
    0 8px 20px rgb(27 28 31 / 0.22),
    0 2px 6px rgb(27 28 31 / 0.12);
}

.whatsapp-fab:active {
  scale: 0.97;
}

@media (min-width: 768px) {
  .whatsapp-fab {
    inset-inline-end: 1.75rem;
    bottom: 1.75rem;
    height: 4rem;
    width: 4rem;
  }

  .whatsapp-fab .icon {
    width: 2rem;
    height: 2rem;
  }
}

/*
 * Floating call and trial-lesson buttons on phones. They share the bottom row
 * with the WhatsApp button, whose width plus a gap is left free at the end.
 */
.mobile-actions {
  position: fixed;
  inset-inline-start: 1rem;
  inset-inline-end: 5.125rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
}

@media (min-width: 768px) {
  .mobile-actions {
    display: none;
  }
}

.mobile-actions > * {
  flex: 1;
  height: 3.5rem;
  padding-inline: 1rem;
}

.mobile-actions .btn--secondary {
  /* A clear white edge: on the black page the call button otherwise reads
     as a dark blob next to the yellow one. */
  border-color: rgb(255 255 255 / 0.9);
  background-color: var(--nav-background-open);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float);
}

/* Keeps the floating buttons from covering the footer's last line. */
.mobile-actions-spacer {
  height: 4.75rem;
}

@media (min-width: 768px) {
  .mobile-actions-spacer {
    display: none;
  }
}

/* ---------- 17b. Moving between pages ------------------------------------ */

/*
 * A page change is one movement rather than a blink: the page you leave fades
 * out, the one you arrive at fades in and settles upward. The browser does
 * the work through a cross-document view transition; one that does not know
 * the feature navigates the way it always did, so nothing is lost.
 */
@view-transition {
  navigation: auto;
}

/*
 * The bar and the floating buttons are the same on both pages, so they are
 * captured on their own and stay put while the page underneath them changes.
 */
.site-header {
  view-transition-name: site-header;
}

.whatsapp-fab {
  view-transition-name: whatsapp-fab;
}

.mobile-actions {
  view-transition-name: mobile-actions;
}

/* The page you leave fades out over the one you arrive at. */
::view-transition-old(root) {
  animation: page-leave 200ms ease-in both;
}

/*
 * The page you arrive at brings its own entrance — the rule below this one —
 * so the snapshot must not fade it in a second time.
 */
::view-transition-new(root) {
  animation: none;
}

@keyframes page-leave {
  to {
    opacity: 0;
  }
}

/*
 * Arriving: the content fades in and settles. This is an ordinary CSS
 * animation on the page itself, so every browser runs it — also the ones
 * that know nothing of view transitions, and also the first page a visitor
 * opens. `backwards` rather than `both`: the moment it is done the element
 * is left exactly as the stylesheet has it, with no transform hanging around
 * for the sticky cards further down the page to trip over.
 */
@media (prefers-reduced-motion: no-preference) {
  main {
    animation: page-enter 340ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* ---------- 18. Motion & reveal ----------------------------------------- */

/*
 * Section reveal. Elements are only hidden once script has decided they are
 * still below the fold, so anything already on screen — and every visitor
 * without working JavaScript — simply keeps the content visible.
 */
[data-reveal] {
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-reveal="pending"] {
  opacity: 0;
  translate: 0 18px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Including the page-to-page transition: it cuts straight over. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  [data-reveal] {
    transition: none;
  }

  /* A sign opens and shuts at once rather than unfolding. */
  .sign__detail {
    transition: none;
  }

  [data-reveal="pending"] {
    opacity: 1;
    translate: none;
  }

  .nav-chevron,
  .whatsapp-fab,
  .btn--accent,
  .faq-item__answer,
  .faq-item__icon {
    transition: none;
  }

  .whatsapp-fab:hover,
  .whatsapp-fab:active,
  .btn--accent:hover,
  .btn--accent:active {
    scale: 1;
  }
}

/* =========================================================================
   19. Dark pages
   -------------------------------------------------------------------------
   The whole site runs on a black ground. Rather than restyling every
   component, `page-dark` on the <body> — which tools/templates/partials.js
   puts on every page — re-scopes the colour tokens the stylesheet already
   reads, so the navigation, the sections, the cards and the footer all
   follow. Only the handful of components that hard-code a light-mode colour
   (a blue fill meant for white text, a frame painted with the text colour)
   need a rule of their own.

   Two levels, and the difference between them matters. The page itself is a
   true #000 — that includes the full-width bands, which are page rather than
   block. What sits *on* the page (a card, a panel, the form) takes a dark
   grey, so a block is told apart from its ground by its fill and not only by
   its border.

   Contrast is kept well above WCAG AA: body copy lands around 8:1 and the
   accent blue around 7:1 against the page black.
   ========================================================================= */

.page-dark {
  /* Native UI the stylesheet cannot reach — the select popup, the scrollbar,
     the autofill highlight — follows the page instead of staying light. */
  color-scheme: dark;

  /* The page is a true black; blocks are lifted off it with a dark grey. In
     light mode `surface` is the step away from the page, and it keeps that
     job here — it is simply a step up instead of a step down. */
  --color-background: #000000;
  --color-card: #14161b;
  --color-surface: var(--color-card);
  --color-foreground: #f7f8f8;
  --color-muted-foreground: rgb(255 255 255 / 0.68);
  --color-border: rgb(255 255 255 / 0.12);

  /* The brand blue is too dark to read on black, so the accent lightens.
     Anything that carries white text — or has to read as a solid object,
     like the car on the road — takes the stronger blue instead. */
  --color-primary: #7d9cff;
  --color-primary-hover: #9db3ff;
  --color-primary-strong: #2f5bff;
  --color-primary-strong-hover: #4a71ff;
  --color-focus: #7d9cff;

  /* The floating navigation bar and the floating buttons. */
  --nav-background: rgb(0 0 0 / 0.72);
  --nav-background-open: rgb(0 0 0 / 0.97);
  --nav-border: rgb(255 255 255 / 0.1);
  --nav-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.4);
}

/* The mark is blue-on-black artwork; on a dark ground it becomes all white. */
.page-dark .nav-logo img,
.page-dark .footer-brand img {
  filter: brightness(0) invert(1);
}

/*
 * Full-width bands are page, not block: an alternating section, the header
 * strip on an inner page and the footer all stay on the true black, so the
 * grey is reserved for things that actually sit on top of something.
 */
.page-dark .section--muted,
.page-dark .page-hero,
.page-dark .site-footer {
  background-color: var(--color-background);
}

/*
 * Blocks that take the page colour in light mode — where the page is white
 * and the block needs no fill of its own. Here the page is black, so they
 * are lifted onto the card grey instead.
 */
.page-dark .package,
.page-dark .rates,
.page-dark .training-card,
.page-dark .faq,
.page-dark .panel--plain,
.page-dark .question-card,
.page-dark .answer,
.page-dark .result-card,
.page-dark .review__item,
.page-dark .contact-option,
/* Inside a muted section this one drops to the page colour to stand out from
   the band. The band is black here, so it lifts instead. */
.page-dark .section--muted .topic {
  background-color: var(--color-card);
}

/* Sits inside a card, so it needs to lift off the grey rather than the page. */
.page-dark .answer__letter {
  background-color: rgb(255 255 255 / 0.09);
}

.page-dark .answer:hover {
  background-color: rgb(255 255 255 / 0.07);
}

/* Solid blue that carries white text — the lightened accent cannot. */
.page-dark .btn--primary,
.page-dark .step__number,
.page-dark .hero__tick,
.page-dark .pricing-tab[aria-selected="true"] {
  background-color: var(--color-primary-strong);
  color: #fff;
}

.page-dark .btn--primary:hover {
  background-color: var(--color-primary-strong-hover);
}

/* The road is the same blue as those buttons, at full strength. */
.page-dark .road__line {
  stroke: var(--color-primary-strong);
}

.page-dark .road__body {
  fill: var(--color-primary-strong);
}

/*
 * Two components are built by inverting the palette, which on a light page
 * makes them dark. Here that would flip them to white, so they are painted
 * dark instead. The light text inside them is hard-coded white, which the
 * dark ground restores.
 */
.page-dark .tips-video__frame {
  background-color: #000;
}

.page-dark .dark-band {
  background-color: var(--color-card);
  color: var(--color-foreground);
}

/* The active language chip needs its own lift on a dark bar. */
.page-dark .lang-switch {
  background-color: rgb(255 255 255 / 0.06);
}

.page-dark .lang-switch a[aria-current="true"] {
  background-color: rgb(255 255 255 / 0.14);
  color: #fff;
  box-shadow: none;
}

/* Hover tints are built from the foreground, which is now light. */
/*
 * The hamburger and the rows of the mobile menu carry no line, so those do
 * still light up; the bar itself does not.
 */
.page-dark .nav-toggle:hover,
.page-dark .nav-mobile-panel a:hover,
.page-dark .nav-mobile-panel .nav-group-trigger:hover {
  background-color: rgb(255 255 255 / 0.08);
}

.page-dark .btn--secondary:hover {
  border-color: rgb(255 255 255 / 0.5);
}

/*
 * The choose-a-package button. It takes the page colour, which here is a true
 * black, and on a card that reads as a hole punched in it. A light tint lifts
 * it off the card; kept to the card so the outline buttons that sit directly
 * on the page stay as they are.
 */
.page-dark .package .btn--secondary {
  background-color: rgb(255 255 255 / 0.08);
}

.page-dark .package .btn--secondary:hover {
  background-color: rgb(255 255 255 / 0.14);
}

.page-dark .control:hover {
  border-color: rgb(255 255 255 / 0.3);
}