/* =============================================================================
   DBD Driving School · Premium Template 01
   Brand tokens come from config.branding (written into <html style> at build
   time: --primary, --on-primary, --secondary, --font-heading, --font-body).
   Everything else derives from those with color-mix(), so a new school only
   changes config.js. Fonts are self-hosted (the CSP blocks font CDNs).
   ========================================================================== */

/* ---------- Fonts (subsets by unicode-range: a file is only downloaded when its characters are on the page) ---------- */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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: "Inter"; src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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: "Poppins"; src: url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; 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: "Poppins"; src: url("/assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; 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: "Poppins"; src: url("/assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; 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: "Poppins"; src: url("/assets/fonts/poppins-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; 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: "Plus Jakarta Sans"; src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url("/assets/fonts/noto-sans-arabic-arabic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }

/* ---------- Tokens ---------- */
:root {
  /* brand (overridden per school from config.js) */
  --primary: #2563EB;
  --on-primary: #ffffff;
  --secondary: #0B1B3F;
  --font-heading: "Poppins", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* derived brand shades */
  --primary-700: color-mix(in oklab, var(--primary) 78%, #000);
  --primary-600: color-mix(in oklab, var(--primary) 88%, #000);
  --primary-100: color-mix(in oklab, var(--primary) 16%, #fff);
  --primary-50: color-mix(in oklab, var(--primary) 7%, #fff);
  --primary-ink: color-mix(in oklab, var(--primary) 85%, var(--secondary)); /* primary as text on white */
  --primary-text: var(--primary); /* primary as large text (hero highlight); brandVars/demo darken it for light brand colours */
  --tint: color-mix(in oklab, var(--primary) 4%, #f8fafc);                 /* soft blue section background */
  --tint-2: color-mix(in oklab, var(--primary) 8%, #f8fafc);

  /* neutrals */
  --ink: var(--secondary);
  --text: #334155;
  --muted: #5B6A80;              /* 5.5:1 on white, ≥4.75:1 on the tints */
  --bg: #ffffff;
  --surface: #F1F5F9;
  --line: #E2E8F0;
  --success: #22C55E;
  --success-ink: #15803D;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --star: #F59E0B;

  /* shape + depth */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05), 0 1px 3px rgb(15 23 42 / .06);
  --shadow: 0 12px 32px -16px rgb(15 23 42 / .22);
  --shadow-lg: 0 30px 60px -28px rgb(15 23 42 / .35);
  --shadow-primary: 0 12px 24px -12px color-mix(in oklab, var(--primary) 75%, transparent);

  /* layout */
  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 88px;
  --section-y: clamp(4rem, 7vw, 5.5rem);

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s;
  --t: .35s;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
html.is-smooth { scroll-behavior: smooth; }   /* nav.js adds the class on the first in-page link click; a #section load or language switch lands instantly */
body {
  margin: 0; font: 400 1rem/1.65 var(--font-body); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--primary-ink); text-underline-offset: .2em; }
a:hover { color: var(--primary-700); }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--ink); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.035em; line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--primary-100); color: var(--ink); }
:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.todo { color: var(--muted); font-style: italic; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 200; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; background: var(--bg); color: var(--ink); padding: .75rem 1.25rem; border-radius: var(--r-sm); box-shadow: var(--shadow); }
.icon { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--primary); --btn-ink: var(--on-primary); --btn-border: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.25rem; padding: .8rem 1.6rem; border: 1.5px solid var(--btn-border); border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; white-space: nowrap;
  font: 600 .975rem/1.1 var(--font-heading); letter-spacing: -.005em; cursor: pointer;
  transition: transform var(--t) var(--ease), background-color var(--t-fast), box-shadow var(--t) var(--ease), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { color: var(--btn-ink); }
.btn .icon { transition: transform var(--t) var(--ease); }
.btn:hover .icon--arrow, .btn:focus-visible .icon--arrow { transform: translateX(4px); }
.btn--primary { box-shadow: var(--shadow-primary); }
.btn--primary:hover { --btn-bg: var(--primary-600); transform: translateY(-2px); box-shadow: 0 18px 30px -14px color-mix(in oklab, var(--primary) 85%, transparent); }
.btn--outline { --btn-bg: #fff; --btn-ink: var(--ink); --btn-border: color-mix(in oklab, var(--primary) 55%, var(--line)); }
.btn--outline:hover { --btn-bg: var(--primary-50); --btn-ink: var(--primary-ink); --btn-border: var(--primary); transform: translateY(-2px); }
.package .btn--outline { --btn-ink: var(--primary-ink); }
.btn--ring { --btn-border: rgb(255 255 255 / .9); }
.btn--night { --btn-bg: #0b1020; --btn-ink: #fff; --btn-border: rgb(255 255 255 / .85); }
.btn--night:hover { --btn-bg: #000; transform: translateY(-2px); }
.btn--sm { min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .9rem; border-radius: 10px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .65; cursor: progress; transform: none; }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font: 600 .95rem/1.2 var(--font-heading); color: var(--primary-ink); text-decoration: none; }
.link-arrow .icon { transition: transform var(--t) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Small parts ---------- */
.eyebrow { margin: 0 0 .65rem; font: 600 .75rem/1.3 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--primary-ink); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--tint); }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: .35em; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__lead { font-size: 1.05rem; color: var(--muted); margin: 0; text-wrap: pretty; }
.section-head--center .section-head__lead { text-wrap: balance; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: var(--primary-50); color: var(--primary-ink); font: 600 .78rem/1.4 var(--font-body); white-space: nowrap; }
.chip--muted { background: var(--surface); color: var(--text); }
.icon-tile { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r); flex: none; background: var(--primary-50); color: var(--primary); }
.check-dot { display: inline-grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.check-dot .icon { stroke-width: 3.2; }
.check-dot--green { width: 1.35rem; height: 1.35rem; background: var(--success); color: #fff; }
.sample-badge {
  display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; margin-inline-start: .35rem;
  font: 600 .68rem/1.5 var(--font-body); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
  background: #FEF3C7; color: #92400E; border: 1px dashed #F59E0B;
}
.check-list { list-style: none; display: grid; gap: .65rem; }
.check-list li { display: flex; gap: .65rem; align-items: flex-start; }
.check-list .icon { color: var(--success); margin-top: .2rem; }

/* ---------- Header (floating bar) ---------- */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); padding: 12px var(--gutter) 0; pointer-events: none; }
.site-header__bar {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 1.25rem;
  max-width: 70rem; height: 64px; margin-inline: auto; padding-block: 0; padding-inline: 1.25rem .65rem; border-radius: 16px;
  background: rgb(255 255 255 / .97); box-shadow: 0 10px 30px -14px rgb(15 23 42 / .22), 0 0 0 1px rgb(15 23 42 / .05);
  transition: box-shadow var(--t), background-color var(--t);
}
.site-header.is-scrolled .site-header__bar { box-shadow: 0 16px 40px -16px rgb(15 23 42 / .32), 0 0 0 1px rgb(15 23 42 / .06); }
@supports (backdrop-filter: blur(1px)) { .site-header__bar { background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); } }

.logo { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; text-decoration: none; color: var(--ink); flex: 0 1 auto; margin-right: auto; }
.logo:hover { color: var(--ink); }
.logo__text { display: inline-flex; align-items: center; gap: .55rem; }
.logo__mark { display: grid; place-items: center; color: var(--primary); }
.logo__initial {
  display: block; font: italic 800 2rem/1 var(--font-heading); letter-spacing: -.06em; color: var(--primary);
  transform: skewX(-6deg); padding-right: .08em;
  background: linear-gradient(160deg, color-mix(in oklab, var(--primary) 70%, #fff), var(--primary) 45%, var(--primary-700));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: transform var(--t) var(--ease);
}
.logo:hover .logo__initial { transform: skewX(-6deg) translateX(-2px); }
.logo__text { min-width: 0; }
.logo__name { font: 700 1.15rem/1.15 var(--font-heading); letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.logo--long .logo__name { white-space: normal; font-size: .92rem; line-height: 1.12; letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 11rem; }
.logo__img { height: 2.4rem; width: auto; max-width: 11rem; object-fit: contain; }
.logo--sm .logo__initial { font-size: 1.35rem; }
.logo--sm .logo__name { font-size: .85rem; }

.site-nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; }
.site-nav__link {
  position: relative; display: block; padding: .55rem .7rem; color: var(--text); text-decoration: none;
  font: 500 .9rem/1.2 var(--font-body); border-radius: 8px; white-space: nowrap; transition: color var(--t-fast);
}
.site-nav__link:hover { color: var(--primary-ink); }
.site-nav__link::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: 2px; border-radius: 2px;
  background: var(--primary); transform: scaleX(0); transition: transform var(--t) var(--ease);
}
.site-nav__link.is-active, .site-nav__link[aria-current] { color: var(--primary-ink); font-weight: 600; }
.site-nav__link.is-active::after, .site-nav__link[aria-current]::after { transform: scaleX(1); }
.site-nav__cta, .nav-chevron, .nav-backdrop { display: none; }
.site-header__cta { flex: none; margin-left: .5rem; }

.nav-toggle { display: none; position: relative; width: 2.75rem; height: 2.75rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { position: absolute; left: 50%; width: 1.15rem; height: 2px; margin-left: -.575rem; border-radius: 2px; background: currentColor; transition: transform var(--t) var(--ease), background-color var(--t-fast); }
.nav-toggle__bars { top: 50%; margin-top: -1px; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; left: 0; margin-left: 0; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }

@media (max-width: 1139px) {
  .js .nav-toggle { display: inline-block; }
  .js .site-nav {
    position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 61;
    max-height: calc(100dvh - var(--header-h) - 1.5rem); overflow-y: auto; overscroll-behavior: contain;
    padding: .6rem; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top center;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s; }
  .js .site-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .js .site-nav__link { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; font: 600 1.05rem/1.2 var(--font-heading); color: var(--ink); border-radius: 12px; }
  .js .site-nav__link::after { display: none; }
  .js .site-nav__link.is-active { background: var(--primary-50); color: var(--primary-ink); }
  .js .nav-chevron { display: block; color: var(--muted); }
  .js .site-nav__cta { display: flex; margin-top: .4rem; }
  .js .site-nav.is-open .site-nav__list > li { animation: nav-item .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms + 60ms); }
  .js .site-nav.is-open .lang-menu, .js .site-nav.is-open .site-nav__cta { animation: nav-item .45s var(--ease) both; animation-delay: calc(var(--n, 6) * 35ms + 60ms); }
  .js .site-nav.is-open .site-nav__cta { animation-delay: calc((var(--n, 6) + 1) * 35ms + 60ms); }
  .js .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgb(15 23 42 / .3); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility 0s linear var(--t); }
  html.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity var(--t), visibility 0s; }
  html.nav-open { overflow: hidden; scrollbar-gutter: stable; }
  .site-header__bar { gap: .75rem; padding-inline-start: 1rem; }
}
@media (max-width: 760px) { .js .site-header__cta { display: none; } }
@media (min-width: 761px) and (max-width: 1139px) { .site-header__cta { margin-left: auto; } .logo { margin-right: 0; } }
/* WCAG text spacing (1.4.12): a widened name may push the nav onto a second row instead of being clipped */
@media (min-width: 1140px) { .logo { flex: 0 0 auto; } .site-nav__list { flex-wrap: wrap; justify-content: center; } .site-header__bar { height: auto; min-height: 64px; padding-block: .35rem; gap: 1rem; } .site-nav__link { padding-inline: .6rem; } }   /* the tighter gap/padding keep a two-line school name on one header row */
html:not(.js) .site-header { position: static; height: auto; }
html:not(.js) .site-header__bar { height: auto; flex-wrap: wrap; padding-block: .75rem; }
html:not(.js) .site-nav__list { flex-wrap: wrap; }
@keyframes nav-item { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Language switcher ---------- */
.lang { position: relative; flex: none; }
.lang__btn {
  display: inline-flex; align-items: center; gap: .35rem; height: 2.5rem; padding: 0 .65rem; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 .82rem/1 var(--font-body); letter-spacing: .02em;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.lang__btn:hover, .lang.is-open .lang__btn { border-color: color-mix(in oklab, var(--primary) 45%, var(--line)); background: var(--primary-50); }
.lang__btn .icon { color: var(--primary); }
.lang__chev { color: var(--muted) !important; transition: transform var(--t) var(--ease); }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__list {
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 70; min-width: 13rem; list-style: none; padding: .4rem;
  border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: pop-in .25s var(--ease);
}
.lang__list a { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .92rem; }
.lang__list a:hover, .lang__list a:focus-visible { background: var(--primary-50); color: var(--primary-ink); }
.lang__list a:focus-visible { outline-offset: -3px; }
.lang__list a[aria-current] { font-weight: 600; }
.lang__code { display: inline-grid; place-items: center; min-width: 2rem; height: 1.5rem; border-radius: 6px; background: var(--surface); color: var(--muted); font: 700 .68rem/1 var(--font-body); letter-spacing: .04em; }
.lang__list a[aria-current] .lang__code { background: var(--primary); color: var(--on-primary); }
.lang__check { margin-inline-start: auto; color: var(--primary); }
.lang-menu { display: none; }
@media (max-width: 1139px) {
  .js .site-header__bar > .lang { display: none; }
  .js .lang-menu { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem .5rem .2rem; border-top: 1px solid var(--line); margin-top: .4rem; }
  .lang-menu a { padding: .45rem .75rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 500; }
  .lang-menu a[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
}
@media (min-width: 1140px) and (max-width: 1240px) { .site-nav__link { padding-inline: .5rem; } .site-header__bar { gap: .9rem; } }

/* ---------- Right-to-left (Arabic) ---------- */
[dir="rtl"] { --font-heading: "Noto Sans Arabic", "Poppins", system-ui, sans-serif; --font-body: "Noto Sans Arabic", "Inter", system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.3; }
[dir="rtl"] :is(.eyebrow, .hero__eyebrow, .package__badge, .sample-badge, .instructor__meta dt) { letter-spacing: 0; }
[dir="rtl"] .hero__media { transform: scaleX(-1); }           /* car + fade on the opposite side of the text */
[dir="rtl"] .sc-door-name, [dir="rtl"] .sc-roofsign text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
[dir="rtl"] .icon--arrow, [dir="rtl"] .link-arrow .icon, [dir="rtl"] .step__arrow .icon, [dir="rtl"] .nav-chevron, [dir="rtl"] .carousel__btn .icon { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .icon--arrow, [dir="rtl"] .btn:focus-visible .icon--arrow, [dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .logo__initial { transform: none; }
[dir="rtl"] .logo:hover .logo__initial { transform: translateX(2px); }
[dir="rtl"] .logo { margin-right: 0; margin-left: auto; }
[dir="rtl"] .site-header__cta { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .package__badge { left: auto; right: 1.25rem; }
[dir="rtl"] .about__badge { right: auto; left: -1rem; }
[dir="rtl"] .about__sample { left: auto; right: .85rem; }
[dir="rtl"] .step__arrow { right: auto; left: -2.15rem; }
[dir="rtl"] .modal__close { right: auto; left: 1rem; }
[dir="rtl"] .modal__head { padding-right: 0; padding-left: 2.5rem; }
[dir="rtl"] .faq__btn, [dir="rtl"] .form-done dl { text-align: right; }
[dir="rtl"] .field select { padding-right: .8rem; padding-left: 2.1rem; background-position: left .7rem center; }
[dir="rtl"] .selected-package button { margin-left: 0; margin-right: auto; }
[dir="rtl"] .pref__legend { float: right; margin-right: 0; margin-left: .25rem; }
[dir="rtl"] .site-footer__legal .logo { margin-left: .25rem; margin-right: 0; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { text-align: right; }
[dir="rtl"] .contact-list a[dir="ltr"] { unicode-bidi: isolate; }
@media (max-width: 899px) { [dir="rtl"] .about__badge { left: .75rem; } }

/* ---------- Hero ---------- */
.hero {
  --hero-bg: #f8fafc;
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--header-h) * -1); padding-top: var(--header-h);
  min-height: clamp(600px, 86svh, 760px); display: grid; align-items: center; background: var(--hero-bg);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media .scene, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 60%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 72% at 16% 40%, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .86) 42%, rgb(255 255 255 / .3) 74%, rgb(255 255 255 / 0) 100%),
    linear-gradient(180deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 20%);
}
/* lower band: lifts the road and grass under the buttons and trust row, feathered at its top edge */
.hero__media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgb(255 255 255 / .97) 0, rgb(255 255 255 / .94) calc(50% - 7rem), rgb(255 255 255 / .6) calc(50% + 1rem), rgb(255 255 255 / 0) calc(50% + 9rem));
  -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 64%); mask-image: linear-gradient(180deg, transparent 34%, #000 64%);
}
.hero--photo .hero__media::before, .hero:has(.scene--city) .hero__media::before { display: none; }
/* laptops 1140-1399: the big car would meet the copy; widen the scene past the trailing edge (tapering to zero at 1400) instead of sliding it, so no flat strip shows at the leading edge, and sit the car a little further in */
@media (min-width: 1140px) and (max-width: 1399px) {
  .hero__media .scene { right: auto; max-width: none; width: calc(100% + (1400px - 100vw) * .33); }
  .hero__media .scene--polder .sc-car-pos { transform: translate(890px, 520px) scale(1.15); }
  .hero__media .scene--city .sc-car-pos { transform: translate(890px, 535px) scale(1.15); }
}
.hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero__content { max-width: 42rem; }
.hero__eyebrow { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0 0 1.1rem; font: 600 .75rem/1.4 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--primary-ink); }
/* the separator hangs on the preceding visible item, so it never starts a wrapped line and sits on the right side in RTL */
.hero__eyebrow > span:not([hidden]):not(:nth-last-child(1 of :not([hidden])))::after { content: "·"; margin-inline-start: .5rem; display: inline-block; color: color-mix(in oklab, var(--primary) 50%, #94a3b8); }
.hero__title { margin-bottom: 1.25rem; }
.hero__line { display: block; }
.hero__title .word { display: inline-block; }
.hero__highlight { color: var(--primary-text); }
.hero__lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--text); max-width: 34rem; margin-bottom: 2rem; text-wrap: pretty; }
.hero__lead strong { display: block; color: var(--ink); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.75rem; }
.trust { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; list-style: none; color: var(--ink); font-weight: 500; font-size: .92rem; }
.trust li { display: inline-flex; align-items: center; gap: .5rem; }

.hero--photo .hero__media::after {
  background:
    linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .9) 30%, rgb(255 255 255 / .35) 50%, rgb(255 255 255 / 0) 66%),
    linear-gradient(180deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 24%);
}
.hero:has(.scene--city) .hero__media::after {
  background:
    linear-gradient(90deg, rgb(255 255 255 / .97) 0%, rgb(255 255 255 / .94) 34%, rgb(255 255 255 / .6) 52%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, rgb(255 255 255 / .5) 0%, rgb(255 255 255 / 0) 22%);
}

@media (max-width: 1139px) {
  .hero { min-height: 0; display: block; }
  .hero__inner { padding-block: 1.75rem 1.5rem; }
  .hero__media { position: relative; inset: auto; height: clamp(15rem, 64vw, 24rem); z-index: 0; order: 2; }
  .hero { display: flex; flex-direction: column; align-items: stretch; }
  .hero__inner { order: 1; }
  .hero__media::after, .hero--photo .hero__media::after, .hero:has(.scene--city) .hero__media::after { background: linear-gradient(180deg, var(--hero-bg) 0%, rgb(248 250 252 / 0) 28%); }
  .hero__media::before { display: none; }
}
/* phones: enlarge the scene towards its car corner (the RTL mirror is on .hero__media, so this composes with it); photo heroes untouched */
@media (max-width: 760px) {
  .hero__media { overflow: hidden; }
  .hero__media .scene { transform: scale(1.35); transform-origin: 100% 100%; }
}
@media (max-width: 520px) { .hero__actions .btn { flex: 1 1 100%; } }
/* phones: the city line gets its own row, so no separator dangles at the end of the first line */
@media (max-width: 440px) { .hero__eyebrow > span:not([hidden]):has(+ [data-city-line]:not([hidden]))::after { content: none; } .hero__eyebrow [data-city-line] { flex-basis: 100%; } }

/* ---------- Service strip ---------- */
.service-strip { position: relative; z-index: 2; background: #fff; box-shadow: 0 -12px 32px -24px rgb(15 23 42 / .35); border-bottom: 1px solid var(--line); }
.service-strip__list { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); list-style: none; }
.service-strip__item { position: relative; }
.service-strip__item + .service-strip__item::before { content: ""; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.service-strip__btn {
  width: 100%; height: 100%; display: grid; justify-items: center; gap: .15rem; padding: 1.6rem .75rem 1.5rem; border: 0; background: none;
  text-align: center; color: inherit; border-radius: var(--r); transition: background-color var(--t-fast);
}
.service-strip__btn:hover { background: var(--tint); }
.service-strip__icon { display: grid; place-items: center; color: var(--primary); margin-bottom: .45rem; transition: transform var(--t) var(--ease); }
.service-strip__btn:hover .service-strip__icon, .service-strip__btn:focus-visible .service-strip__icon { transform: translateY(-3px) scale(1.08); }
.service-strip__title { font: 600 .95rem/1.3 var(--font-heading); color: var(--ink); hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }
.service-strip__tagline { font-size: .85rem; color: var(--muted); }
@media (min-width: 1024px) {
  .service-strip__list { display: flex; flex-wrap: wrap; justify-content: center; }   /* a partial last row (7-8 lessons) sits centred, like tablets */
  .service-strip__item { flex: 0 0 calc(100% / var(--cols, 5)); min-width: 0; }   /* min-width: 0, or a long single-word title forces an orphan row */
  .service-strip__list[data-cols="4"] .service-strip__item:nth-child(4n + 1 of :not([hidden]))::before { display: none; }
}
@media (max-width: 1023px) and (min-width: 641px) {
  .service-strip__list { display: flex; flex-wrap: wrap; justify-content: center; }
  .service-strip__item { flex: 0 0 33.333%; min-width: 0; }
  .service-strip__item:nth-child(3n + 1 of :not([hidden]))::before { display: none; }
}
@media (max-width: 640px) {
  .service-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: .5rem; }
  .service-strip__item::before { display: none; }
  .service-strip__item:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; }
  .service-strip__btn { padding: 1.1rem .5rem; }
}

/* ---------- Modal (native <dialog>) ---------- */
.modal { width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--r-xl); background: #fff; color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain; }
.modal::backdrop { background: rgb(11 27 63 / .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .45s var(--ease); }
.modal[open]::backdrop { animation: fade-in .3s ease; }
.modal.is-closing { animation: modal-out .22s ease-in forwards; }
.modal.is-closing::backdrop { animation: fade-out .22s ease-in forwards; }
.modal__inner { padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.1rem; }
.modal__head { display: flex; align-items: center; gap: 1rem; padding-right: 2.5rem; }
.modal__title { margin: .35rem 0 0; font-size: clamp(1.45rem, 3vw, 1.8rem); }
.modal__intro { margin: 0; font-weight: 600; color: var(--ink); }
.modal__close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); transition: background-color var(--t-fast), transform var(--t) var(--ease); }
.modal__close:hover { background: var(--line); transform: rotate(90deg); }
.modal__actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about__p { font-size: 1.02rem; max-width: 34rem; }
.about__points { list-style: none; display: grid; gap: .75rem; margin-top: 1.5rem; }
.about__points li { display: flex; align-items: center; gap: .75rem; color: var(--ink); font-weight: 500; }
.about__visual { position: relative; }
.about__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface); }
.about__frame .scene, .about__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.about__visual:hover .about__frame .scene, .about__visual:hover .about__frame img { transform: scale(1.03); }
.about__badge {
  position: absolute; right: -1rem; bottom: -1.25rem; display: flex; gap: .75rem; align-items: center; max-width: 16rem;
  padding: .85rem; padding-inline-end: 1.1rem; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-lg);
}
.about__badge-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: #DCFCE7; color: var(--success-ink); flex: none; }
.about__badge-value { display: block; font: 700 1.3rem/1.1 var(--font-heading); color: var(--ink); }
.about__badge-label { display: block; font: 600 .85rem/1.35 var(--font-body); color: var(--ink); }
.about__sample { position: absolute; top: .85rem; left: .85rem; }
@media (max-width: 899px) {
  .about { grid-template-columns: 1fr; }
  .about__visual { max-width: 36rem; width: 100%; }
  .about__badge { right: .75rem; bottom: .75rem; }
}

/* ---------- Packages ---------- */
.section--packages { background: var(--tint); border-block: 1px solid color-mix(in oklab, var(--primary) 6%, var(--line)); }
.packages { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); max-width: 64rem; margin-inline: auto; list-style: none; align-items: stretch; }
.package {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.6rem 1.6rem 1.5rem; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.package:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.package--featured { border: 2px solid var(--primary); box-shadow: var(--shadow-primary), var(--shadow); }
@media (min-width: 900px) { .package--featured { margin-block: -.75rem; padding-top: calc(2.35rem - 1px); padding-bottom: calc(2.25rem - 1px); } }
@media (min-width: 900px) and (max-width: 1099px) { .package { padding-inline: 1.25rem; } .package .btn { padding-inline: 1rem; } }
.package__badge {
  position: absolute; top: -.75rem; left: 1.25rem; padding: .32rem .7rem; border-radius: 7px;
  background: var(--primary); color: var(--on-primary); font: 700 .68rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--shadow-primary);
}
.package__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.package__name { font-size: 1.1rem; margin: 0 0 .3rem; }
.package__price { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.1rem)/1 var(--font-heading); color: var(--ink); letter-spacing: -.03em; }
.package__price small { font: 500 .85rem/1 var(--font-body); color: var(--muted); letter-spacing: 0; }
.package__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--primary-50); color: var(--primary); flex: none; transition: transform var(--t) var(--ease); }
.package:hover .package__icon { transform: rotate(-8deg) scale(1.06); }
.package__desc { margin: 0; color: var(--muted); font-size: .92rem; }
.package__list { list-style: none; display: grid; gap: .55rem; flex: 1; align-content: start; font-size: .93rem; color: var(--text); }
.package__list li { display: flex; gap: .6rem; align-items: flex-start; }
.package__list .check-dot { margin-top: .2rem; }
.package__list li.is-excluded { color: var(--muted); }
.package__list li.is-excluded .check-dot { background: #CBD5E1; }
.package .btn { margin-top: .25rem; }
.package.is-selected { outline: 3px solid color-mix(in oklab, var(--primary) 50%, #fff); outline-offset: 4px; }
.packages__note { display: flex; justify-content: center; align-items: center; gap: .45rem; text-align: center; color: var(--muted); font-size: .85rem; margin: 2rem 0 0; }
@media (max-width: 899px) { .packages { grid-template-columns: 1fr; max-width: 28rem; gap: 1.75rem; } }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 2.75rem; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.step__icon {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 14px; flex: none;
  background: var(--primary-50); border: 1.5px solid color-mix(in oklab, var(--primary) 14%, var(--line)); color: var(--primary);
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t) var(--ease);
}
.step:hover .step__icon { background: var(--primary); border-color: var(--primary); color: var(--on-primary); transform: translateY(-3px); }
.step__num { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: .3rem; border-radius: 999px; background: var(--primary); color: var(--on-primary); font: 700 .76rem/1 var(--font-heading); margin-bottom: .35rem; }
.step__title { font-size: 1rem; margin: 0 0 .25rem; }
.step__text { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.step__arrow { position: absolute; right: -2.15rem; top: 1.1rem; color: color-mix(in oklab, var(--primary) 35%, #94A3B8); }
@media (max-width: 999px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .step__arrow { display: none; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- Reviews + FAQ ---------- */
.section--split { background: var(--tint); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.reviews, .faq-panel { min-width: 0; }
.is-split .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.is-split .faq-panel { padding: 0; background: none; border-radius: 0; }
.reviews__head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.reviews__head h2 { margin-bottom: .3em; }
.rating { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; font-weight: 600; color: var(--ink); font-size: .92rem; }
.stars { display: inline-flex; gap: .1rem; color: var(--star); }
.stars .icon { fill: currentColor; }
.stars .is-off { fill: none; opacity: .45; }
.carousel__controls { display: flex; gap: .5rem; flex: none; }
.carousel__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); transition: background-color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); }
.carousel__btn:hover:not([aria-disabled="true"]) { border-color: var(--primary); color: var(--primary-ink); }
.carousel__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1rem) / 3); gap: 1rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: .25rem .25rem 1rem; margin: 0 -.25rem; scroll-padding-inline: .25rem; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.review {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review__text { margin: 0; flex: 1; font-size: .92rem; line-height: 1.55; color: var(--text); }
.review__text p { margin: 0; }
.review__text q { quotes: "\201C" "\201D"; }
.review__text q:lang(pl) { quotes: "\201E" "\201D"; }
.review__text q:lang(ar) { quotes: "\00AB" "\00BB"; }
.review__foot { display: flex; align-items: center; gap: .65rem; }
.review__avatar {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; color: #fff; font: 600 .82rem/1 var(--font-heading);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 60%, #fff), var(--primary-700));
}
.review:nth-child(even) .review__avatar { background: linear-gradient(135deg, color-mix(in oklab, var(--secondary) 55%, var(--primary)), var(--secondary)); }
.review__name { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); line-height: 1.3; }
.review__place { display: block; font-size: .8rem; color: var(--muted); }
.reviews__google { margin-top: .5rem; }
.faq-panel { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--tint-2); }
.faq-panel h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.faq-panel__sample { margin: -.5rem 0 1rem; }
.faq-panel__sample .sample-badge { margin-inline-start: 0; }
.faq { list-style: none; display: grid; gap: .6rem; }
.faq__item { border-radius: 12px; background: #fff; border: 1px solid var(--line); transition: box-shadow var(--t), border-color var(--t); }
.faq__item.is-open { box-shadow: var(--shadow); border-color: transparent; }
.faq__q { margin: 0; font-size: inherit; }
.faq__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; padding: .8rem 1rem; border: 0; background: none; border-radius: 12px; font: 600 .9rem/1.4 var(--font-heading); color: var(--ink); text-wrap: pretty; transition: color var(--t-fast); }
.faq__btn:hover { color: var(--primary-ink); }
.faq__sign { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; transition: background-color var(--t), transform var(--t) var(--ease); }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: .75rem; height: 2px; margin: -1px 0 0 -.375rem; border-radius: 2px; background: var(--ink); transition: transform var(--t) var(--ease), background-color var(--t); }
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign { background: var(--primary); transform: rotate(180deg); }
.faq__item.is-open .faq__sign::before, .faq__item.is-open .faq__sign::after { background: var(--on-primary); }
.faq__item.is-open .faq__sign::after { transform: rotate(0deg); }
.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t) var(--ease); }
.js .faq__item:not(.is-open) .faq__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t) var(--ease), visibility 0s linear var(--t); }
.faq__panel-inner { overflow: hidden; }
.faq__answer { padding: 0 1rem 1rem; margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 1099px) { .is-split .split { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .carousel__track { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (max-width: 560px) { .carousel__track { grid-auto-columns: 86%; } .reviews__head { flex-wrap: wrap; align-items: start; row-gap: .75rem; } .reviews__head > div:first-child { flex: 1 1 100%; } .carousel__controls { margin-inline-start: auto; } }

/* ---------- CTA band ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 5rem); color: rgb(255 255 255 / .9); text-align: center; background: #1e1b3a; }
.cta .scene, .cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 16 32 / .35), rgb(11 16 32 / .5)); }
.cta h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: .4rem; text-shadow: 0 2px 20px rgb(0 0 0 / .25); }
.cta p { font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 40rem; margin: 0 auto 1.75rem; text-wrap: balance; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); color: var(--text); font-size: .9rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.9fr); gap: 2.5rem; padding-block: 3.25rem 2.75rem; }
.site-footer h2 { font: 700 .95rem/1.3 var(--font-heading); letter-spacing: -.01em; color: var(--ink); margin-bottom: 1rem; }
.site-footer__brand p { margin: .85rem 0 1.1rem; color: var(--muted); max-width: 17rem; font-size: .88rem; }
.socials { display: flex; gap: .5rem; list-style: none; }
.socials a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--tint-2); color: var(--ink); transition: background-color var(--t-fast), color var(--t-fast), transform var(--t) var(--ease); }
.socials a:hover { background: var(--primary); color: var(--on-primary); transform: translateY(-2px); }
.contact-list { list-style: none; display: grid; gap: .7rem; }
.contact-list li { display: flex; align-items: center; gap: .6rem; }
.contact-list .icon { color: var(--primary); }
.contact-list .is-wa .icon { color: #16A34A; }
.contact-list a { color: var(--ink); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.contact-list a[href]:hover { color: var(--primary-ink); text-decoration: underline; }
.site-footer__area { display: grid; gap: .5rem; align-content: start; }
.site-footer__area .area-map { max-width: 17rem; margin-top: .5rem; }
.area-line { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; color: var(--ink); }
.area-line .icon { color: var(--primary); margin-top: .15rem; }
.area-map { width: 100%; height: auto; display: block; }
.area-map__bg { fill: var(--tint-2); }
.area-map__road { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.area-map__bubble { fill: color-mix(in oklab, var(--primary) 22%, #fff); fill-opacity: .85; stroke: color-mix(in oklab, var(--primary) 45%, #fff); stroke-width: 1.2; }
.area-map__bubble.is-main { fill: color-mix(in oklab, var(--primary) 32%, #fff); }
.area-map__label { font: 600 12px var(--font-body); fill: var(--ink); paint-order: stroke; stroke: rgb(255 255 255 / .7); stroke-width: 3px; }
.site-footer__bar { background: var(--tint); border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: 1rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 0; }
.site-footer__legal .logo { margin-right: .25rem; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; }
.site-footer__nav a { color: var(--text); text-decoration: none; }
.site-footer__nav a:hover { color: var(--primary-ink); text-decoration: underline; }
@media (max-width: 1199px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } .site-footer__form { grid-column: 1 / -1; } .site-footer__legal { flex: 1 1 100%; } }
@media (max-width: 760px) { .socials a { width: 2.75rem; height: 2.75rem; } .site-footer__nav { gap: 0 1rem; } .site-footer__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; } }
@media (max-width: 640px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Enquiry form ---------- */
.site-footer__form { scroll-margin-top: calc(var(--header-h) + 1rem); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.field { display: grid; gap: .25rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid #7D8CA3; border-radius: 9px;
  background: #fff; color: var(--ink); font-size: .9rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { color: #64748B; }
.field select { appearance: none; padding-right: 2.1rem; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center; }
.field select:invalid, .field select:has(option[value=""]:checked) { color: #64748B; }
.field select option { color: var(--ink); }
@media (max-width: 760px), (pointer: coarse) { .field input, .field select, .field textarea { font-size: 1rem; } }
.field textarea { min-height: 4.75rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #64748B; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent); }
.field [aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.field__error { color: var(--error); font-size: .76rem; margin: 0; font-weight: 500; }
.optional { font-weight: 400; color: var(--muted); }
.pref { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.pref__legend { float: left; font-size: .82rem; font-weight: 600; color: var(--ink); padding: 0; margin-right: .25rem; }
.pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0; }
.pill span { display: inline-flex; align-items: center; min-height: 2rem; padding: .25rem .8rem; border-radius: 999px; border: 1px solid #7D8CA3; background: #fff; font-size: .82rem; font-weight: 500; transition: all var(--t-fast); }
.pill input:checked + span { border-color: var(--primary); background: var(--primary-50); color: var(--primary-ink); font-weight: 600; }
.pill input:focus-visible + span { outline: 3px solid var(--primary-ink); outline-offset: 2px; }
.selected-package { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 10px; background: var(--primary-50); border: 1px solid var(--primary-100); color: var(--ink); font-size: .88rem; animation: pop-in .4s var(--ease); }
.selected-package .icon { color: var(--primary); }
.selected-package button { margin-left: auto; border: 0; background: none; color: var(--primary-ink); font-weight: 600; font-size: .82rem; text-decoration: underline; text-underline-offset: .2em; padding: .2rem; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.form__foot { grid-column: 1 / -1; display: grid; gap: .6rem; }
.form__foot .btn { width: 100%; min-height: 3rem; }
.privacy-note { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .78rem; color: var(--muted); }
.privacy-note .icon { color: var(--success-ink); }
.spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.form-alert { grid-column: 1 / -1; display: grid; gap: .6rem; padding: .85rem 1rem; border-radius: 10px; font-size: .88rem; }
.form-alert--error { background: var(--error-bg); color: #991B1B; border: 1px solid #FECACA; }
.form-alert__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.form-done { display: grid; justify-items: center; text-align: center; gap: .75rem; padding: 1.25rem; border-radius: var(--r); background: var(--tint); border: 1px solid var(--line); animation: pop-in .5s var(--ease); }
.form-done__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #DCFCE7; color: var(--success-ink); }
.form-done--demo .form-done__icon { background: #FEF3C7; color: #B45309; }
.form-done h3 { font-size: 1.15rem; margin: 0; }
.form-done p { margin: 0; color: var(--muted); max-width: 28rem; font-size: .9rem; }
.form-done dl { width: 100%; max-width: 26rem; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .85rem; margin: .25rem 0; padding: .85rem 1rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.form-done dt { color: var(--muted); }
.form-done dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 420px) { .form { grid-template-columns: 1fr; } }

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-bottom: 6rem; }   /* focused elements land above the bar (2.4.11) */
  .action-bar {
    position: fixed; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 55;
    display: flex; gap: .5rem; padding: .45rem; border-radius: 16px; background: rgb(255 255 255 / .94);
    box-shadow: var(--shadow-lg); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transform: translateY(calc(100% + 2rem)); transition: transform var(--t) var(--ease), visibility 0s linear var(--t); visibility: hidden;
  }
  .action-bar.is-visible { transform: none; visibility: visible; transition: transform var(--t) var(--ease), visibility 0s; }
  .action-bar .btn { flex: 1 1 0; min-width: 0; min-height: 2.9rem; padding-inline: .85rem; white-space: normal; text-align: center; }
  .action-bar__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 12px; background: var(--surface); color: var(--ink); flex: none; }
  .action-bar__icon--wa { background: #DCFCE7; color: #15803D; }
}
@media (max-width: 380px) { .action-bar .btn .icon--arrow { display: none; } }
/* landscape phones: slimmer header with the CTA, no bottom bar */
@media (orientation: landscape) and (max-height: 480px) {
  :root { --header-h: 68px; }
  html { scroll-padding-bottom: 0; }
  .site-header { padding-top: 6px; }
  .site-header__bar { height: 56px; min-height: 56px; }
  .action-bar { display: none !important; }
  .js .site-header__cta { display: inline-flex; }
}

/* ---------- Toast (demo data note) ---------- */
.site-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 120; max-width: min(32rem, calc(100vw - 2rem)); padding: .8rem 1.1rem; border-radius: 12px;
  background: #0b1020; color: #fff; font: 500 .88rem/1.45 var(--font-body); box-shadow: 0 20px 40px -12px rgb(0 0 0 / .45);
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s var(--ease);
}
.site-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .site-toast { bottom: 5.5rem; } }

/* ---------- Text pages ---------- */
.page { padding-block: clamp(3rem, 8vw, 5rem); }
.page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page .lead { font-size: 1.15rem; color: var(--muted); max-width: 40rem; }
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-bottom: 1em; }
.notice { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-radius: 12px; background: #FEF3C7; color: #78350F; border: 1px dashed #F59E0B; margin-bottom: 2rem; }

/* ---------- Scroll reveal ---------- */
/* a keyframe entrance (not a transition) so the component's own hover transitions keep working afterwards */
.js [data-reveal]:not(.is-visible) { opacity: 0; }
.js [data-reveal].is-visible { animation: reveal-in .8s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal="scale"].is-visible { animation-name: reveal-scale; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(.97); } }

/* Hero entrance (one time, on load); the lead, buttons and trust row follow the last headline word (Hero.astro sets --e) */
.js .hero .word { opacity: 0; transform: translateY(.45em); animation: word-in .6s var(--ease) forwards; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
.js .hero [data-enter] { opacity: 0; transform: translateY(16px); animation: enter .6s var(--ease) forwards; animation-delay: calc(var(--e, 0) * 1ms); }
.js .hero__media .scene, .js .hero__media img { animation: settle 1.6s var(--ease) both; }
.js .hero__media .sc-car-pos > .sc-car { animation: drive-in 1.2s var(--ease) .2s both; }
@keyframes word-in { to { opacity: 1; transform: none; } }
@keyframes enter { to { opacity: 1; transform: none; } }
@keyframes settle { from { scale: 1.06; } }
@keyframes drive-in { from { transform: translateX(-180px); opacity: 0; } 30% { opacity: 1; } }
/* the bundle landed after the 6 s fallback (main.js re-adds .js with .js-late): enhanced layout, but no entrances replayed on content the visitor has already seen */
html.js-late .hero .word, html.js-late .hero [data-enter] { animation: none; opacity: 1; transform: none; }
html.js-late .hero__media .scene, html.js-late .hero__media img, html.js-late .hero__media .sc-car-pos > .sc-car, html.js-late [data-reveal].is-visible { animation: none; }
html.js-late [data-reveal]:not(.is-visible) { opacity: 1; }

/* ---------- Instructors ---------- */
.team { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); list-style: none; }
.instructor {
  display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.instructor:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.instructor__photo {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--primary) 85%, #fff), var(--primary) 45%, color-mix(in oklab, var(--primary) 45%, var(--secondary)));
}
.instructor__photo::before {
  content: ""; position: absolute; inset: 0; opacity: .25;
  background-image: radial-gradient(rgb(255 255 255 / .9) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); mask-image: linear-gradient(135deg, #000, transparent 70%);
}
.instructor__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.instructor:hover .instructor__photo img { transform: scale(1.04); }
.instructor__initials { position: relative; font: 700 clamp(3rem, 6vw, 4rem)/1 var(--font-heading); color: #fff; letter-spacing: -.03em; text-shadow: 0 8px 24px rgb(0 0 0 / .15); }
.instructor__body { padding: 1.5rem 1.6rem 1.75rem; display: grid; gap: .85rem; align-content: start; flex: 1; }
.instructor__name { margin: 0; font-size: 1.3rem; }
.instructor__role { margin: -.5rem 0 0; color: var(--primary-ink); font-weight: 600; font-size: .925rem; }
.instructor__intro { margin: 0; color: var(--muted); }
.instructor__meta { display: grid; gap: .6rem; font-size: .9rem; }
.instructor__meta dt { font-weight: 600; color: var(--ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; }
.instructor__meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.instructor__sample { position: absolute; top: 1rem; inset-inline-start: 1rem; }
/* single instructor: personal, side-by-side */
.team[data-count="1"] { grid-template-columns: 1fr; }
.team[data-count="1"] .instructor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.team[data-count="1"] .instructor__photo { aspect-ratio: auto; min-height: 22rem; }
.team[data-count="1"] .instructor__body { padding: clamp(1.75rem, 4vw, 3rem); align-content: center; }
.team[data-count="1"] .instructor__name { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.team[data-count="1"] .instructor__intro { font-size: 1.15rem; color: var(--text); }
@media (max-width: 760px) { .instructor__photo { aspect-ratio: 16 / 9; } .team[data-count="1"] .instructor { grid-template-columns: 1fr; } .team[data-count="1"] .instructor__photo { min-height: 0; aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .team[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 26rem)); justify-content: center; } }
/* four instructors: 2 + 2, then one row, never 3 + 1 */
@media (min-width: 900px) and (max-width: 1139px) { .team[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .team[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

/* ---------- Scenes (illustrations follow the brand tokens) ---------- */
.sc-sky-top { stop-color: color-mix(in oklab, var(--primary) 26%, #f8fafc); }
.sc-sky-mid { stop-color: color-mix(in oklab, var(--primary) 7%, #fdfaf3); }
.sc-sky-low { stop-color: #fbf7ef; }
.sc-sun-core { stop-color: #fff8e6; stop-opacity: 1; }
.sc-sun-glow { stop-color: #fff1cc; stop-opacity: .55; }
.sc-sun-fade { stop-color: #ffffff; stop-opacity: 0; }
.sc-clouds { fill: #fff; opacity: .78; }
.sc-far { fill: color-mix(in oklab, var(--primary) 12%, #b7cfc0); stroke: color-mix(in oklab, var(--primary) 12%, #b7cfc0); }
.sc-mill { fill: color-mix(in oklab, var(--secondary) 55%, #8aa0a8); stroke: color-mix(in oklab, var(--secondary) 55%, #8aa0a8); }
.sc-mill path, .sc-far path, .sc-mill rect, .sc-far rect, .sc-mill circle { stroke-width: 0; }
.sc-sail { stroke-width: 3 !important; fill: none; }
.sc-blade { stroke-width: 1.5 !important; fill-opacity: .2; }
.sc-bars { fill: none; stroke-width: 1.2 !important; }
.sc-mill-door { fill: rgb(0 0 0 / .25); }
.sc-well { fill: #1e293b; }
.sc-field-far { fill: #d3e7c8; }
.sc-ditch { fill: none; stroke: color-mix(in oklab, var(--primary) 28%, #e0f2fe); stroke-width: 2; opacity: .85; }
.sc-farm-wall { fill: #ebdfcd; }
.sc-farm-roof { fill: #a65a43; }
.sc-farm-win { fill: #fff; }
.sc-poplar { fill: #94c28d; }
.sc-field-mid { fill: #b8daa8; }
.sc-dike { fill: #a2cf92; }
.sc-road { fill: #475467; }
.sc-road-edge { fill: none; stroke: #e2e8f0; stroke-width: 3; }
.sc-road-dash { fill: none; stroke: #f8fafc; stroke-width: 4; stroke-dasharray: 42 36; }
.sc-dash-fill { fill: #f8fafc; }
.sc-field-near { fill: #89c47f; }
.sc-water-top { stop-color: color-mix(in oklab, var(--primary) 22%, #dbeafe); }
.sc-water-low { stop-color: #c3ddef; }
.sc-water-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.sc-tuft { fill: none; stroke: #61a35c; stroke-width: 2; stroke-linecap: round; }
.sc-tuft--dark { stroke: #4e8c4c; }
.sc-car-body { fill: #f8fafc; }
.sc-car-stripe { fill: var(--primary); }
.sc-door-name { font-family: var(--font-heading); font-weight: 700; font-style: italic; fill: var(--primary); letter-spacing: -.02em; }
.sc-mirror-car { fill: #e2e8f0; }
.sc-car-shade { fill: #cbd5e1; }

.sc-glass { fill: color-mix(in oklab, var(--secondary) 82%, var(--primary)); }
.sc-glass-shine { fill: #fff; opacity: .2; }
.sc-line { fill: none; stroke: rgb(15 23 42 / .18); stroke-width: 2; }
.sc-handle { fill: rgb(15 23 42 / .25); }
.sc-headlight { fill: #fef9c3; }
.sc-taillight { fill: #ef4444; }
.sc-car-highlight { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: 2; }
.sc-roofsign rect { fill: #334155; }
.sc-roofsign .sc-roofsign-box { fill: var(--primary); stroke: #fff; stroke-width: 2; }
.sc-roofsign text { font: 800 24px var(--font-heading); fill: #fff; }
.sc-tyre { fill: #111827; }
.sc-rim { fill: #e5e7eb; }
.sc-rim-inner { fill: #9ca3af; }
.sc-shadow { fill: #0f172a; opacity: .22; }
.sc-h1 { fill: #eadbc6; } .sc-h2 { fill: #cfa283; } .sc-h3 { fill: #9e5d49; } .sc-h4 { fill: #ddd4c5; }
.sc-h5 { fill: color-mix(in oklab, var(--secondary) 55%, #7f8d9b); }
.sc-win { fill: #f8fafc; opacity: .92; }
.sc-door { fill: color-mix(in oklab, var(--secondary) 85%, #000); }
.sc-kade { fill: #bca58e; }
.sc-tree { fill: #80b37a; }
.sc-trunk { fill: #6b5444; }
.sc-bike { fill: none; stroke: #1f2937; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-interior { fill: color-mix(in oklab, var(--secondary) 92%, #000); }
.sc-interior-edge { fill: none; stroke: rgb(255 255 255 / .08); stroke-width: 3; }
.sc-mirror-frame { fill: #1f2937; }
.sc-mirror-glass { fill: color-mix(in oklab, var(--primary) 25%, #cbd5e1); }
.sc-dash { fill: color-mix(in oklab, var(--secondary) 80%, #1e293b); }
.sc-ambient { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; }
.sc-gauge path { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 6; stroke-linecap: round; }
.sc-gauge .sc-gauge-needle { stroke: var(--primary); }
.sc-steer { fill: none; stroke: #0b0f1a; stroke-width: 36; }
.sc-steer-shine { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 2; }
.sc-steer-spoke { fill: none; stroke: #0b0f1a; stroke-width: 30; stroke-linecap: round; }
.sc-hub { fill: #111827; }
.sc-hub-logo { fill: var(--primary); }
.sc-screen rect { fill: #0b1220; stroke: rgb(255 255 255 / .1); stroke-width: 2; }
.sc-screen-route { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; }
.sc-screen-dot { fill: var(--success); }

.sc-far--dark { fill: color-mix(in oklab, var(--primary) 10%, #9fb8ad); stroke: color-mix(in oklab, var(--primary) 10%, #9fb8ad); }
.sc-ss-top { stop-color: color-mix(in oklab, var(--secondary) 75%, #3b2a6b); }
.sc-ss-mid { stop-color: #b45a7a; }
.sc-ss-low { stop-color: #f08a4b; }
.sc-ss-horizon { stop-color: #ffc477; }
.sc-ss-sun { stop-color: #fff3d1; stop-opacity: 1; }
.sc-ss-sun-glow { stop-color: #ffcf8a; stop-opacity: .65; }
.sc-ss-sun-fade { stop-color: #ff9a5a; stop-opacity: 0; }
.sc-ss-disc { fill: #fff1c9; }
.sc-ss-clouds { fill: #ffd9bd; opacity: .08; }
.sc-ss-far, .sc-ss-far path, .sc-ss-far rect, .sc-ss-far circle { fill: #3a2235; stroke: #3a2235; }
.sc-ss-far path, .sc-ss-far rect, .sc-ss-far circle { stroke-width: 0; }
.sc-ss-far .sc-sail { stroke-width: 3 !important; fill: none; }
.sc-ss-far .sc-blade { fill-opacity: .25; stroke-width: 1.5 !important; }
.sc-ss-far .sc-bars { fill: none; stroke-width: 1.2 !important; }
.sc-ss-land { fill: #24162a; }
.sc-ss-road { fill: #2f2238; }
.sc-ss-edge { fill: none; stroke: rgb(255 196 119 / .55); stroke-width: 2; }
.sc-ss-dash { fill: rgb(255 214 160 / .8); }
.sc-ss-near { fill: #1c1120; }

/* ---------- Reduced motion: everything visible, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  html.is-smooth { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal]:not(.is-visible) { opacity: 1; }
  .js [data-reveal].is-visible { animation: none; }   /* the .01ms keyframe would still paint its from-frame for a frame */
  /* no from-keyframe is ever applied: the scene lays out at scale 1 and the copy is visible from the first frame */
  .js .hero__media .scene, .js .hero__media img, .js .hero__media .sc-car-pos > .sc-car { animation: none; }
  .js .hero .word, .js .hero [data-enter] { animation: none; opacity: 1; transform: none; }
  .carousel__track { scroll-behavior: auto; }
}

@media print {
  .site-header, .action-bar, .nav-backdrop, .hero__media, .cta .scene, .demo-dock { display: none !important; }
}