/* The drivingschool look: everything here is scoped to .site[data-look="drivingschool"]. Appended after base.css (bun run --filter @platform/sections css).
   The page is the road: the hero and the lespakketten are the two lanes of
   one asphalt road (dashed centre line between them), the reviews hang as
   onderborden on a post in the verge, the towns are komborden, the contact
   starts at the haaientanden, the footer is the name painted on the road.
   Markings are road white (Dutch markings are white); the blue is the sign
   blue of the L, the komborden and the wegwijzers; red only for the exams. */

.site[data-look="drivingschool"] {
  --wrap: 80rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-h2: clamp(2.3rem, 1.35rem + 3.4vw, 4.6rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  --road-ink: #1a1c1f;
  --steel: #8a9097;
  --verge: #557a35;
  --verge-dark: #46672b;
  --concrete: #e7e6e0;
  --paint: var(--on-asphalt);
  --asphalt-lift: #2d3035;
  /* Asphalt: the aggregate as three offset speckle grids, only on asphalt bands (gradients, no image files: the export ships only fonts). */
  --asphalt-tex: radial-gradient(rgb(255 255 255 / 0.035) 0.6px, transparent 1.1px), radial-gradient(rgb(0 0 0 / 0.16) 0.7px, transparent 1.2px), radial-gradient(rgb(255 255 255 / 0.03) 0.8px, transparent 1.3px);
  --asphalt-size: 5px 5px, 7px 7px, 11px 11px;
  --asphalt-pos: 0 0, 3px 4px, 6px 2px;
  /* Haaientanden: give-way triangles, pointing at the one who gives way. */
  --teeth: conic-gradient(from -33deg at 50% 100%, var(--paint) 0 66deg, transparent 66deg);
  --dash: 3rem;
  --gap-dash: 6rem;
  line-height: 1.6;
}
.site[data-look="drivingschool"] main > .s + .s { border-top: 0; }
.site[data-look="drivingschool"] :is(h1, h2) { letter-spacing: -0.025em; line-height: 0.98; }
.site[data-look="drivingschool"] h2 { font-size: var(--fs-h2); margin-bottom: 0.45em; max-width: 18ch; }
.site[data-look="drivingschool"] .lead { max-width: 36rem; }

/* Asphalt bands re-point the text tokens at the road palette. */
.site[data-look="drivingschool"] :is(.ds-lane, .ds-header, .ds-contact, .ds-roadname) {
  --bg: var(--asphalt); --text: var(--on-asphalt); --muted: var(--asphalt-muted); --border: color-mix(in srgb, var(--on-asphalt) 28%, transparent);
  background-color: var(--asphalt); color: var(--on-asphalt);
}
.site[data-look="drivingschool"] :is(.ds-lane, .ds-contact, .ds-roadname, .site-footer) { background-image: var(--asphalt-tex); background-size: var(--asphalt-size); background-position: var(--asphalt-pos); }
.site[data-look="drivingschool"] :is(.ds-lane, .ds-header, .ds-contact, .ds-roadname) :focus-visible { outline-color: var(--lane); }

/* --- The blue L (also in the header) --------------------------------------- */
.site[data-look="drivingschool"] .ds-l {
  display: inline-grid; place-items: center; flex: none;
  background: var(--kombord); color: var(--on-kombord);
  font-family: var(--font-heading); font-weight: 800; line-height: 1;
  border-radius: 0.12em; box-shadow: inset 0 0 0 0.06em var(--kombord), inset 0 0 0 0.11em var(--on-kombord);
}

/* --- Header: a strip of asphalt -------------------------------------------- */
.site[data-look="drivingschool"] .ds-header { border-bottom: 0; }
.site[data-look="drivingschool"] .ds-header .brand { gap: 0.6rem; font-weight: 800; letter-spacing: -0.01em; font-size: 1.3rem; }
.site[data-look="drivingschool"] .ds-l-mini { width: 1.9rem; height: 1.9rem; font-size: 1.3rem; padding-top: 0.12em; }
.site[data-look="drivingschool"] .ds-header nav a { color: var(--on-asphalt); }
.site[data-look="drivingschool"] .ds-header .btn { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.01em; }

/* --- Buttons ------------------------------------------------------------------ */
.site[data-look="drivingschool"] .btn { border-radius: 4px; font-family: var(--font-heading); font-weight: 800; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.site[data-look="drivingschool"] .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 3px 0 var(--road-ink); }
.site[data-look="drivingschool"] .ds-lane .btn:hover, .site[data-look="drivingschool"] .ds-header .btn:hover { box-shadow: 0 3px 0 var(--paint); }

/* --- Hero: the road ahead and our lane ------------------------------------------ */
.site[data-look="drivingschool"] .ds-hero {
  padding: 0; display: grid; grid-template-rows: minmax(clamp(12rem, 42vh, 30rem), 1fr) auto;
  min-height: calc(100svh - 4.5rem); background: var(--asphalt); overflow: clip;
}
.site[data-look="drivingschool"] .ds-hero:not(.has-photo) { grid-template-rows: clamp(9rem, 22vh, 13rem) auto; min-height: 0; }
.site[data-look="drivingschool"] .ds-hero-photo { position: relative; min-height: 0; }
.site[data-look="drivingschool"] .ds-hero-photo .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 62%; }
.site[data-look="drivingschool"] .ds-lane-hero {
  position: relative; grid-row: 2;
  /* The solid edge line just inside the asphalt edge. */
  background-image: linear-gradient(var(--paint), var(--paint)), var(--asphalt-tex);
  background-size: 100% clamp(5px, 0.45vw, 8px), var(--asphalt-size); background-position: 0 clamp(0.6rem, 1.1vw, 1rem), var(--asphalt-pos); background-repeat: no-repeat, repeat, repeat, repeat;
  padding-block: 0 clamp(3rem, 5.5vw, 4.75rem);
}
.site[data-look="drivingschool"] .ds-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(2.2rem, 4vw, 3.2rem); }
.site[data-look="drivingschool"] .ds-hero h1, .site[data-look="drivingschool"] .ds-hero h2 {
  font-size: clamp(2.65rem, 1rem + 5vw, 6.4rem); line-height: 0.93; letter-spacing: -0.035em; max-width: 17ch; margin: 0 0 0.25em; color: var(--paint);
}
.site[data-look="drivingschool"] .ds-hero .lead { color: var(--asphalt-muted); font-size: var(--fs-lead); max-width: 34rem; }
.site[data-look="drivingschool"] .ds-hero .actions { margin-top: clamp(1.3rem, 2.4vw, 1.9rem); }
.site[data-look="drivingschool"] .ds-hero .btn { min-height: 3.5rem; padding: 0.8rem 1.7rem; font-size: 1.2rem; }
.site[data-look="drivingschool"] .ds-hero .cta-alt { color: var(--paint); font-size: 1.1rem; }
.site[data-look="drivingschool"] .ds-arrow { display: none; }
@media (min-width: 64rem) {
  /* The headline across the lane, the lead and the button beside its foot. */
  .site[data-look="drivingschool"] .ds-hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr); grid-template-rows: 1fr auto auto; }
  .site[data-look="drivingschool"] .ds-hero-inner > :is(h1, h2) { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; align-self: end; }
  .site[data-look="drivingschool"] .ds-hero-inner > .lead { grid-column: 2; grid-row: 2; align-self: end; margin: 1.5rem 0 0; }
  .site[data-look="drivingschool"] .ds-hero-inner > .actions { grid-column: 2; grid-row: 3; align-self: end; }
  /* A lane arrow painted ahead in the lane, pointing the way the road runs. */
  .site[data-look="drivingschool"] .ds-arrow { display: block; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; width: clamp(10rem, 17vw, 16rem); height: auto; fill: var(--paint); opacity: 0.85; }
}
/* The dashed centre line between our lane and the other (the services). */
.site[data-look="drivingschool"] .ds-centreline {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(6px, 0.5vw, 9px); z-index: 2;
  background: linear-gradient(90deg, var(--paint) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--gap-dash))) 0 0 / calc(var(--dash) + var(--gap-dash)) 100% repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="drivingschool"] .ds-centreline { animation: ds-drive 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.2s both; }
  @keyframes ds-drive { from { background-position: calc(-6 * (var(--dash) + var(--gap-dash))) 0; } to { background-position: 0 0; } }
}

/* --- The dakbord ---------------------------------------------------------------- */
.site[data-look="drivingschool"] .ds-dakbord { margin: 0; display: grid; justify-items: stretch; width: fit-content; max-width: 100%; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.35)); }
.site[data-look="drivingschool"] .ds-dakbord-hero { position: absolute; left: 0; bottom: calc(100% - clamp(0.6rem, 1.1vw, 1rem)); max-width: min(100%, 46rem); z-index: 3; }
.site[data-look="drivingschool"] .ds-dak-panel {
  --slope: clamp(1rem, 2.4vw, 2.2rem);
  display: flex; align-items: center; gap: clamp(0.7rem, 1.4vw, 1.1rem);
  background: var(--sign); color: var(--on-sign);
  padding: clamp(0.6rem, 1.1vw, 0.95rem) calc(var(--slope) + clamp(0.6rem, 1.2vw, 1rem)) clamp(0.55rem, 1vw, 0.85rem);
  clip-path: polygon(var(--slope) 0, calc(100% - var(--slope)) 0, 100% 100%, 0 100%);
  border-top: clamp(4px, 0.5vw, 7px) solid var(--primary);
}
.site[data-look="drivingschool"] .ds-dakbord .ds-l { width: 1.25em; height: 1.25em; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); padding-top: 0.1em; }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-name {
  margin: 0; padding: 0; background: none; clip-path: none; border: 0; text-align: left; color: var(--on-sign);
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95;
  font-size: clamp(1.45rem, 0.85rem + 2.3vw, 3.1rem); overflow-wrap: anywhere; hyphens: auto; text-wrap: balance;
}
.site[data-look="drivingschool"] .ds-dakbord.fit-m .dakbord-name { font-size: clamp(1.3rem, 0.8rem + 1.9vw, 2.6rem); }
.site[data-look="drivingschool"] .ds-dakbord.fit-l .dakbord-name { font-size: clamp(1.1rem, 0.75rem + 1.4vw, 2.05rem); }
.site[data-look="drivingschool"] .ds-dakbord.fit-xl .dakbord-name { font-size: clamp(1rem, 0.7rem + 1.05vw, 1.65rem); }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-band {
  margin: 0; padding: 0.3rem 1rem 0.35rem; text-align: center; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-figures); font-weight: 800; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.45rem); letter-spacing: 0.06em; line-height: 1.2;
}
.site[data-look="drivingschool"] .ds-dakbord .dakbord-band a { color: inherit; text-decoration: none; }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-band a:hover { text-decoration: underline; }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-feet { height: clamp(6px, 0.7vw, 10px); background: linear-gradient(90deg, transparent 10%, #0d0e10 10% 22%, transparent 22% 78%, #0d0e10 78% 90%, transparent 90%); }

/* --- Services: the other lane --------------------------------------------------- */
.site[data-look="drivingschool"] .ds-services { padding: 0; }
.site[data-look="drivingschool"] .ds-lane-services {
  padding-block: clamp(4rem, 8vw, 7rem) clamp(4.5rem, 9vw, 8rem);
  background-image: linear-gradient(var(--paint), var(--paint)), var(--asphalt-tex);
  background-size: 100% clamp(5px, 0.45vw, 8px), var(--asphalt-size); background-position: 0 calc(100% - clamp(0.6rem, 1.1vw, 1rem)), var(--asphalt-pos); background-repeat: no-repeat, repeat, repeat, repeat;
}
.site[data-look="drivingschool"] .ds-head h2, .site[data-look="drivingschool"] .ds-head h1 { color: var(--paint); }
.site[data-look="drivingschool"] .ds-head .lead { color: var(--asphalt-muted); }

/* The route to the exam: a strip of road, each step a blue wegwijzer on a
   post beside it, its number in a yellow route shield (as N-roads have). */
.site[data-look="drivingschool"] .ds-route { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.site[data-look="drivingschool"] .ds-route figcaption { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--asphalt-muted); margin-bottom: 1.1rem; }
.site[data-look="drivingschool"] .ds-route ol { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site[data-look="drivingschool"] .ds-stop { position: relative; display: grid; }
.site[data-look="drivingschool"] .ds-stop-sign {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.6rem; width: fit-content; max-width: 100%;
  background: var(--kombord); color: var(--on-kombord); border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--kombord), inset 0 0 0 5px var(--on-kombord);
  padding: 0.6rem 1.05rem 0.55rem 0.7rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.1rem, 0.7rem + 0.75vw, 1.65rem); line-height: 1.1; overflow-wrap: anywhere;
  transition: transform 0.18s ease;
}
.site[data-look="drivingschool"] .ds-stop:hover .ds-stop-sign { transform: translateY(-3px); }
.site[data-look="drivingschool"] .ds-stop-no {
  flex: none; display: grid; place-items: center; min-width: 1.9em; padding: 0.12em 0.3em 0; border-radius: 3px;
  background: var(--lane); color: var(--on-sign); box-shadow: inset 0 0 0 2px var(--on-sign);
  font-family: var(--font-figures); font-size: 0.8em; line-height: 1.35;
}
@media (min-width: 56rem) {
  /* The road runs across; the signs stand on both verges, by turns, each
     on its post, so a long name has the room of two stops. */
  .site[data-look="drivingschool"] .ds-route ol { --zone: 5.4rem; --road: 3.1rem; grid-template-columns: repeat(var(--stops), minmax(0, 1fr)); }
  .site[data-look="drivingschool"] .ds-route ol::before {
    content: ''; position: absolute; left: 0; right: 0; top: var(--zone); height: var(--road); background: var(--asphalt-lift);
    border-block: 3px solid color-mix(in srgb, var(--paint) 70%, transparent);
  }
  .site[data-look="drivingschool"] .ds-route ol::after {
    content: ''; position: absolute; left: 0; right: 0; top: calc(var(--zone) + var(--road) / 2 - 1.5px); height: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--paint) 80%, transparent) 0 1.4rem, transparent 1.4rem 3.2rem) 0 0 / 3.2rem 100% repeat-x;
  }
  .site[data-look="drivingschool"] .ds-stop { display: flex; flex-direction: column; align-items: flex-start; height: calc(2 * var(--zone) + var(--road)); }
  .site[data-look="drivingschool"] .ds-stop-sign { max-width: 190%; white-space: nowrap; }
  .site[data-look="drivingschool"] .ds-stop::after { content: ''; flex: 1 0 0.6rem; width: 5px; margin-left: 1.3rem; background: var(--steel); }
  .site[data-look="drivingschool"] .ds-stop:nth-child(odd) { padding-bottom: calc(var(--zone) + var(--road)); }
  .site[data-look="drivingschool"] .ds-stop:nth-child(even) { flex-direction: column-reverse; padding-top: calc(var(--zone) + var(--road)); }
  /* The last stop keeps its sign inside the road's end. */
  .site[data-look="drivingschool"] .ds-stop:last-child:not(:first-child) { align-items: flex-end; }
  .site[data-look="drivingschool"] .ds-stop:last-child:not(:first-child)::after { margin-left: 0; margin-right: 1.3rem; }
}
@media (max-width: 55.99rem) {
  .site[data-look="drivingschool"] .ds-route ol { gap: 1rem; padding-left: 3.1rem; }
  .site[data-look="drivingschool"] .ds-route ol::before { content: ''; position: absolute; left: 0; top: -0.8rem; bottom: -0.8rem; width: 3.1rem; background: var(--asphalt-lift); border-inline: 3px solid color-mix(in srgb, var(--paint) 70%, transparent); }
  .site[data-look="drivingschool"] .ds-route ol::after { content: ''; position: absolute; left: calc(1.55rem - 1.5px); top: -0.8rem; bottom: -0.8rem; width: 3px; background: linear-gradient(color-mix(in srgb, var(--paint) 80%, transparent) 0 1.2rem, transparent 1.2rem 2.6rem) 0 0 / 100% 2.6rem repeat-y; }
  .site[data-look="drivingschool"] .ds-stop { grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; }
  .site[data-look="drivingschool"] .ds-stop::before { content: ''; height: 5px; background: var(--steel); }
}

/* The lespakketten: every row a lane, dashed lines between them. */
.site[data-look="drivingschool"] .ds-lessons { margin-top: clamp(3rem, 6vw, 4.5rem); color: var(--paint); font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="drivingschool"] .ds-lessons thead th {
  background: none; color: var(--asphalt-muted); font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0 0.9rem 0.8rem; border-bottom: clamp(4px, 0.4vw, 6px) solid var(--paint);
}
.site[data-look="drivingschool"] .ds-lessons thead th:first-child { padding-left: 0; }
.site[data-look="drivingschool"] .ds-lessons tr { border-bottom: 0; }
.site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--paint) 72%, transparent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + 2rem)) 0 100% / calc(var(--dash) + 2rem) 3px repeat-x;
  transition: background-color 0.2s ease;
}
.site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider):last-child { background: none; }
.site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider):hover { background-color: var(--asphalt-lift); }
.site[data-look="drivingschool"] .ds-lessons tbody th { padding: clamp(1.2rem, 2vw, 1.7rem) 0.9rem clamp(1.2rem, 2vw, 1.7rem) 0; vertical-align: middle; }
.site[data-look="drivingschool"] .ds-lessons .lesson-name { max-width: none; color: var(--paint); font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.95rem); line-height: 1.08; letter-spacing: -0.015em; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="drivingschool"] .ds-lessons .service-note { color: var(--asphalt-muted); font-size: 1.0625rem; margin-top: 0.35rem; max-width: 34rem; }
.site[data-look="drivingschool"] .ds-lessons td {
  padding: 1.2rem 0.9rem; vertical-align: middle; font-family: var(--font-figures); font-weight: 800; color: var(--paint);
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1;
}
.site[data-look="drivingschool"] .ds-lessons td.price { font-weight: 800; padding-right: 0; }
.site[data-look="drivingschool"] .ds-lessons td.is-empty { color: color-mix(in srgb, var(--asphalt-muted) 60%, transparent); font-weight: 400; }
.site[data-look="drivingschool"] .ds-lessons .price-from, .site[data-look="drivingschool"] .ds-lessons .price-unit { font-size: 0.45em; letter-spacing: 0; font-weight: 800; color: var(--asphalt-muted); }
/* The exams: haaientanden across the road, then the red tab. */
.site[data-look="drivingschool"] .ds-lessons .lessons-divider th { padding: clamp(2.2rem, 4vw, 3rem) 0 0.6rem !important; border: 0; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.site[data-look="drivingschool"] .ds-teeth { --th: clamp(1.3rem, 2vw, 1.8rem); display: block; height: var(--th); background: var(--teeth) 0 0 / calc(var(--th) * 1.67) var(--th) space no-repeat; }
.site[data-look="drivingschool"] .ds-exam-tab {
  display: inline-block; margin-top: 1.3rem; padding: 0.4rem 0.8rem 0.35rem; background: var(--exam); color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.site[data-look="drivingschool"] .ds-ask { margin-top: clamp(2rem, 4vw, 3rem); color: var(--asphalt-muted); font-size: 1.1rem; }
.site[data-look="drivingschool"] .ds-ask a { color: var(--paint); font-family: var(--font-figures); font-weight: 800; white-space: nowrap; }
@media (max-width: 40rem) {
  /* Phones: each lespakket a lane of its own, the figures labelled. */
  .site[data-look="drivingschool"] .ds-lessons thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider) { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 1.1rem; padding-block: 1.15rem 1.25rem; }
  .site[data-look="drivingschool"] .ds-lessons tbody th { grid-column: 1 / -1; padding: 0 0 0.6rem; }
  .site[data-look="drivingschool"] .ds-lessons td { padding: 0; font-size: 1.45rem; }
  .site[data-look="drivingschool"] .ds-lessons td.is-empty { display: none; }
  .site[data-look="drivingschool"] .ds-lessons td.price { grid-column: -2; justify-self: end; font-size: 1.75rem; }
  .site[data-look="drivingschool"] .ds-lessons.has-lessons td.lesson-num:nth-child(2)::after { content: var(--u-lessons); font-size: 0.6em; letter-spacing: 0; color: var(--asphalt-muted); }
  .site[data-look="drivingschool"] .ds-lessons.has-lessons.has-minutes td.lesson-num:nth-child(3)::after,
  .site[data-look="drivingschool"] .ds-lessons.has-minutes:not(.has-lessons) td.lesson-num:nth-child(2)::after { content: var(--u-minutes); font-size: 0.6em; letter-spacing: 0; color: var(--asphalt-muted); }
  .site[data-look="drivingschool"] .ds-lessons .lessons-divider { display: block; }
  .site[data-look="drivingschool"] .ds-lessons .lessons-divider th { display: block; }
}

/* --- About: the lesauto from the inside ----------------------------------------- */
.site[data-look="drivingschool"] .ds-about { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.site[data-look="drivingschool"] .ds-about-photo { position: relative; aspect-ratio: 4 / 3; background: var(--road-ink); }
.site[data-look="drivingschool"] .ds-about-photo .about-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
.site[data-look="drivingschool"] .ds-about-text { padding: clamp(3rem, 7vw, 7rem) var(--gap); max-width: 44rem; align-self: center; }
.site[data-look="drivingschool"] .ds-about-text > p:first-of-type { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem); line-height: 1.4; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.01em; }
.site[data-look="drivingschool"] .ds-since { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-figures); font-weight: 800; font-size: clamp(3.4rem, 2rem + 5vw, 7rem); line-height: 0.8; letter-spacing: -0.04em; }
.site[data-look="drivingschool"] .ds-since span { font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text { margin-inline: auto; width: min(100% - 2 * var(--gap), var(--wrap)); max-width: none; padding-inline: 0; }
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .ds-about.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(34rem, 82vh, 50rem); }
  .site[data-look="drivingschool"] .ds-about-photo { aspect-ratio: auto; min-height: 100%; }
  .site[data-look="drivingschool"] .ds-about-image_right .ds-about-photo { order: 2; }
  .site[data-look="drivingschool"] .ds-about.has-photo .ds-about-text { padding-inline: clamp(2.5rem, 6vw, 7rem); }
}

/* --- Gallery: in the car, a dark band, the photos edge to edge ------------------ */
.site[data-look="drivingschool"] .s-gallery { --text: var(--on-asphalt); --muted: var(--asphalt-muted); background: var(--road-ink); color: var(--on-asphalt); padding-bottom: 0; }
.site[data-look="drivingschool"] .s-gallery .gallery-items { width: 100vw; margin-left: calc(50% - 50vw); gap: 6px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.site[data-look="drivingschool"] .s-gallery .gallery-items li { background: #000000; overflow: hidden; }
.site[data-look="drivingschool"] .s-gallery .gallery-items img { transition: transform 0.4s ease; }
.site[data-look="drivingschool"] .s-gallery .gallery-items li:hover img { transform: scale(1.03); }
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .gallery-grid .gallery-items li:first-child:nth-last-child(3) img { aspect-ratio: auto; height: 100%; min-height: clamp(26rem, 60vh, 40rem); }
}

/* --- Reviews: onderborden on one post, beside the polder road -------------------- */
.site[data-look="drivingschool"] .ds-reviews { background: var(--concrete); padding-bottom: calc(var(--section-pad) + 2.6rem); overflow: clip; }
.site[data-look="drivingschool"] .ds-reviews-inner { display: grid; gap: 0 clamp(2rem, 6vw, 6rem); }
.site[data-look="drivingschool"] .ds-post { position: relative; display: grid; justify-items: center; padding-top: 1rem; }
/* The pole runs down into the verge. */
.site[data-look="drivingschool"] .ds-post::before {
  content: ''; position: absolute; top: 0; bottom: calc(-1 * var(--section-pad) - 2.6rem); left: 50%; width: 12px; margin-left: -6px;
  background: linear-gradient(90deg, #6f757c, #b7bcc2 45%, #7c8289);
}
.site[data-look="drivingschool"] .ds-plates { position: relative; display: grid; grid-template-columns: minmax(0, 46rem); gap: 1.4rem; margin: 0; width: 100%; justify-content: center; }
.site[data-look="drivingschool"] .ds-plates figure {
  margin: 0; border: 0; padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.3rem);
  background: #ffffff; color: var(--road-ink); border-radius: 12px;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 8px var(--road-ink), 0 2px 0 rgb(0 0 0 / 0.18);
}
.site[data-look="drivingschool"] .ds-plates blockquote { margin: 0 0 0.9rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.35rem, 1.05rem + 1vw, 2.05rem); line-height: 1.16; letter-spacing: -0.015em; }
.site[data-look="drivingschool"] .ds-plates blockquote p::before { content: '„'; }
.site[data-look="drivingschool"] .ds-plates blockquote p::after { content: '”'; }
.site[data-look="drivingschool"] .ds-plates figcaption { color: #4f545a; font-size: 1rem; font-weight: 700; }
.site[data-look="drivingschool"] .ds-reviews-road { display: none; }
.site[data-look="drivingschool"] .ds-verge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.6rem;
  background: repeating-linear-gradient(100deg, var(--verge) 0 7px, var(--verge-dark) 7px 9px);
  border-top: 5px solid #c9c8c0;
}
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .ds-reviews-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .site[data-look="drivingschool"] .ds-reviews-inner > :is(h1, h2) { grid-column: 1 / -1; }
  .site[data-look="drivingschool"] .ds-reviews-road { display: block; grid-column: 2; grid-row: 2; position: relative; margin-bottom: calc(-1 * var(--section-pad) - 2.6rem); margin-right: calc(-1 * max(var(--gap), (100vw - var(--wrap)) / 2)); }
  .site[data-look="drivingschool"] .ds-reviews-road img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
}

/* --- Werkgebied: komborden -------------------------------------------------------- */
.site[data-look="drivingschool"] .ds-komborden {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0 clamp(0.8rem, 2vw, 1.75rem); margin-top: var(--space);
}
@media (min-width: 40rem) { .site[data-look="drivingschool"] .ds-komborden { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.site[data-look="drivingschool"] .ds-komborden li {
  position: relative; display: grid; place-items: center; min-height: clamp(5rem, 9vw, 8rem); padding: 1rem 1.1rem 0.95rem; margin-bottom: clamp(2.8rem, 4.5vw, 4rem); text-align: center;
  background: var(--kombord); color: var(--on-kombord); border-radius: 10px;
  box-shadow: inset 0 0 0 5px var(--kombord), inset 0 0 0 8px var(--on-kombord);
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.75rem); line-height: 1.02; letter-spacing: -0.015em;
  overflow-wrap: anywhere; hyphens: auto; transition: transform 0.18s ease;
}
/* Two posts under each sign. */
.site[data-look="drivingschool"] .ds-komborden li::after {
  content: ''; position: absolute; top: 100%; left: 22%; right: 22%; height: clamp(2.8rem, 4.5vw, 4rem);
  background: linear-gradient(90deg, var(--steel) 0 7px, transparent 7px calc(100% - 7px), var(--steel) calc(100% - 7px));
}
.site[data-look="drivingschool"] .ds-komborden li:hover { transform: translateY(-4px); }
.site[data-look="drivingschool"] .ds-area { padding-bottom: 0; }
/* The verge and the kerb the posts stand in. */
.site[data-look="drivingschool"] .ds-area::after { content: ''; display: block; height: 1.2rem; background: repeating-linear-gradient(100deg, var(--verge) 0 7px, var(--verge-dark) 7px 9px); border-bottom: 6px solid #c9c8c0; }
.site[data-look="drivingschool"] .ds-area .area-body { font-size: var(--fs-lead); max-width: 36rem; }

/* --- Contact: from the haaientanden on ------------------------------------------- */
/* Haaientanden and the stop line: here you stop and get in touch. */
.site[data-look="drivingschool"] .ds-contact { padding-top: clamp(3rem, 6vw, 5rem); }
.site[data-look="drivingschool"] .ds-contact-teeth { --th: clamp(2rem, 3.4vw, 3rem); display: block; height: var(--th); background: var(--teeth) 0 0 / calc(var(--th) * 1.67) var(--th) space no-repeat; }
.site[data-look="drivingschool"] .ds-contact .s-contact { padding-top: clamp(1rem, 3vw, 2.5rem); }
.site[data-look="drivingschool"] .ds-contact .s-contact :is(h1, h2) { color: var(--paint); }
.site[data-look="drivingschool"] .ds-contact .contact-list { border-top: clamp(4px, 0.4vw, 6px) solid var(--paint); }
.site[data-look="drivingschool"] .ds-contact .contact-list li { border-bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--paint) 60%, transparent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + 2rem)) 0 100% / calc(var(--dash) + 2rem) 3px repeat-x; }
.site[data-look="drivingschool"] .ds-contact .contact-link { padding-block: 1.1rem 1.2rem; }
.site[data-look="drivingschool"] .ds-contact .contact-label { color: var(--asphalt-muted); font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site[data-look="drivingschool"] .ds-contact .contact-value { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); color: var(--paint); }
.site[data-look="drivingschool"] .ds-contact .contact-list li:first-child .contact-value { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5rem); letter-spacing: -0.03em; }
.site[data-look="drivingschool"] .ds-contact .contact-also { color: var(--paint); }

/* --- Footer: the name painted on the road ----------------------------------------- */
.site[data-look="drivingschool"] .ds-roadname { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 6.5rem) 0; }
.site[data-look="drivingschool"] .ds-roadname .ds-edge { position: absolute; left: 0; right: 0; top: clamp(1.2rem, 2.5vw, 2rem); height: clamp(6px, 0.5vw, 9px); background: linear-gradient(90deg, var(--paint) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--gap-dash))) 0 0 / calc(var(--dash) + var(--gap-dash)) 100% repeat-x; }
.site[data-look="drivingschool"] .ds-roadname p {
  margin-block: 0; color: color-mix(in srgb, var(--paint) 92%, transparent); white-space: nowrap;
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.8;
  /* One line, as wide as the road allows: the size follows the name's length. */
  /* 0.74em per letter: this uppercase 800 weight measures about 0.71em (a 32-letter name clipped at 0.66). */
  --size: min(11rem, calc((min(100vw, var(--wrap)) - 2 * var(--gap)) / (var(--chars) * 0.74)));
  font-size: var(--size);
  /* Road lettering is drawn long, to be read at speed and at an angle. */
  transform: scaleY(1.8); transform-origin: 50% 0; margin-bottom: calc(var(--size) * 0.8 * 0.8 + clamp(1.5rem, 3vw, 2.5rem));
}
.site[data-look="drivingschool"] .site-footer { font-size: 1.0625rem; }

/* --- Phones: the quick bar on asphalt ---------------------------------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="drivingschool"] .quickbar { --on-deep: var(--on-asphalt); background: var(--asphalt); border-top: 4px solid var(--paint); }
  .site[data-look="drivingschool"] .quick { font-family: var(--font-heading); font-weight: 800; }
  /* The road takes what the words leave, so the button clears the quick bar. */
  .site[data-look="drivingschool"] .ds-hero { min-height: calc(100svh - 3.75rem - 3.6rem - var(--vb-bar, 0px)); grid-template-rows: minmax(clamp(10rem, calc(30svh - var(--vb-bar, 0px)), 22rem), 1fr) auto; }
}

/* --- Motion: signs come up as you drive past -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="drivingschool"] :is(.ds-stop, .ds-komborden li, .ds-plates li) {
      animation: ds-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    /* translate, not transform: the hover lift stays free. */
    @keyframes ds-rise { from { translate: 0 1.25rem; } to { translate: 0 0; } }
  }
}

/* --- FAQ: each question behind a blue sign that turns when it opens ---------------- */
.site[data-look="drivingschool"] .s-faq .wrap { display: grid; gap: 0 clamp(2rem, 6vw, 6rem); }
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .s-faq .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .site[data-look="drivingschool"] .s-faq .faq-items { margin-top: 0.4rem; }
}
.site[data-look="drivingschool"] .faq-items { max-width: 48rem; }
.site[data-look="drivingschool"] .faq-items details { border-bottom: 0; background: linear-gradient(90deg, var(--text) 0 1.6rem, transparent 1.6rem 2.8rem) 0 100% / 2.8rem 2px repeat-x; }
.site[data-look="drivingschool"] .faq-items details:first-child { border-top: 5px solid var(--text); }
.site[data-look="drivingschool"] .faq-items summary { min-height: 4.4rem; padding-block: 0.9rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.2; letter-spacing: -0.01em; }
/* The round blue sign with a white arrow (verplichte rijrichting). */
.site[data-look="drivingschool"] .faq-items summary::after {
  content: ''; width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  /* The white arrow: a shaft and a head, drawn. */
  background:
    conic-gradient(from 240deg at 100% 50%, #ffffff 0 60deg, transparent 0) 76% 50% / 30% 44% no-repeat,
    linear-gradient(#ffffff, #ffffff) 30% 50% / 36% 14% no-repeat,
    var(--kombord);
  box-shadow: inset 0 0 0 2px var(--kombord), inset 0 0 0 4px #ffffff; transition: transform 0.2s ease;
}
.site[data-look="drivingschool"] .faq-items details[open] summary::after { content: ''; transform: rotate(90deg); }
.site[data-look="drivingschool"] .faq-items summary:hover::after { transform: translateX(3px); }
.site[data-look="drivingschool"] .faq-items details[open] summary:hover::after { transform: rotate(90deg); }
.site[data-look="drivingschool"] .faq-items details p { color: var(--text); font-size: 1.0625rem; max-width: 40rem; margin-bottom: 1.5rem; }
.site[data-look="drivingschool"] .faq-items dt { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; }
.site[data-look="drivingschool"] .faq-items dd { color: var(--text); }

/* A table with names only (no counts, no prices) needs no column heads. */
.site[data-look="drivingschool"] .ds-lessons.is-plain thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site[data-look="drivingschool"] .ds-lessons.is-plain tbody:first-of-type { border-top: clamp(4px, 0.4vw, 6px) solid var(--paint); }

/* No hero photo: the polder drawn flat, sky over a strip of meadow. */
.site[data-look="drivingschool"] .ds-hero:not(.has-photo)::before {
  content: ''; grid-row: 1; grid-column: 1;
  background: linear-gradient(to bottom, #dce7ec 0, #eef2ef 72%, #7d9a52 72%, #6b8a43 88%, #5a7a37 100%);
}

/* --- Booking: each bookable lesson a blue wegwijzer --------------------------------- */
.site[data-look="drivingschool"] .s-booking .booking-services { border-top: 0; display: grid; gap: 0.75rem; margin-top: var(--space); }
.site[data-look="drivingschool"] .s-booking .booking-services li { border-bottom: 0; }
.site[data-look="drivingschool"] .s-booking .booking-services a {
  background: var(--kombord); color: var(--on-kombord); border-radius: 8px; padding: 1rem 1.3rem 1rem 1.4rem; min-height: 4.5rem;
  box-shadow: inset 0 0 0 4px var(--kombord), inset 0 0 0 6px var(--on-kombord); transition: transform 0.18s ease;
}
.site[data-look="drivingschool"] .s-booking .booking-services a:hover { transform: translateX(6px); }
.site[data-look="drivingschool"] .s-booking .booking-services a:hover .booking-name { text-decoration: none; }
.site[data-look="drivingschool"] .s-booking .booking-services a { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 30rem) {
  .site[data-look="drivingschool"] .s-booking .booking-services a { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="drivingschool"] .s-booking .booking-go { grid-column: 1; grid-row: auto; margin-top: 0.4rem; }
}
.site[data-look="drivingschool"] .s-booking .booking-name { overflow-wrap: anywhere; hyphens: auto;  font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.15; }
.site[data-look="drivingschool"] .s-booking .booking-meta { color: var(--on-kombord); opacity: 0.9; font-size: 1rem; }
.site[data-look="drivingschool"] .s-booking .booking-go { color: var(--on-kombord); text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; }
.site[data-look="drivingschool"] .s-booking .booking-services a:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* --- Request form: the proefles form on a white card with a strip of road on top ---- */
.site[data-look="drivingschool"] .s-request { background: var(--concrete); }
.site[data-look="drivingschool"] .s-request .lead { color: var(--text); }
.site[data-look="drivingschool"] :is(.request-form, .contact-form) {
  --text: var(--road-ink); --bg: #ffffff; --muted: #4f545a;
  background: #ffffff; color: var(--road-ink); border-top: 0; padding: 0 clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.08);
}
.site[data-look="drivingschool"] :is(.request-form, .contact-form)::before {
  content: ''; display: block; height: 1.6rem; margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2.25rem)) 1.5rem;
  background: linear-gradient(90deg, var(--paint) 0 1.6rem, transparent 1.6rem 3.4rem) 0 50% / 3.4rem 3px repeat-x, var(--asphalt);
}
.site[data-look="drivingschool"] :is(.request-form, .contact-form) :is(label, legend) { font-family: var(--font-heading); font-weight: 800; }
.site[data-look="drivingschool"] form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 2px solid var(--road-ink); border-radius: 3px; background: #ffffff; color: var(--road-ink); }
.site[data-look="drivingschool"] form :is(input, textarea, select):focus-visible { outline: 3px solid var(--kombord); outline-offset: 1px; border-color: var(--kombord); }
.site[data-look="drivingschool"] :is(.request-form, .contact-form) .btn { font-size: 1.15rem; min-height: 3.4rem; }

/* --- Hours: an onderbord (white plate, black rim), like the times under a sign ---- */
.site[data-look="drivingschool"] .s-hours .hours-card {
  background: #ffffff; color: var(--road-ink); border-radius: 12px; padding: 1.2rem 1.6rem 1.3rem;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 8px var(--road-ink);
}
.site[data-look="drivingschool"] .s-hours .hours-table :is(th, td) { border-bottom: 0; padding-block: 0.35rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; }
.site[data-look="drivingschool"] .s-hours .hours-table .is-closed :is(th, td) { color: #5c6168; font-weight: 400; }
.site[data-look="drivingschool"] .s-hours .hours-table th::after { background: var(--kombord); color: var(--on-kombord); }
.site[data-look="drivingschool"] .s-hours .hours-table th::before { background: var(--kombord); }

/* --- Trust strip: the customer's own claims, painted along the kerb ---------------- */
.site[data-look="drivingschool"] .s-trust { background: var(--concrete); border-block: 0; padding-block: 1.3rem; }
.site[data-look="drivingschool"] .trust-list { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; }
.site[data-look="drivingschool"] .trust-list li:not(:last-child)::after { content: ''; display: inline-block; width: 1.6rem; height: 4px; margin: 0 1rem 0.3rem; background: currentColor; vertical-align: middle; }

/* --- CTA band: a large wegwijzer ---------------------------------------------------- */
.site[data-look="drivingschool"] .s-cta .cta-inner {
  background: var(--kombord); color: var(--on-kombord); border-radius: 12px; padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: inset 0 0 0 6px var(--kombord), inset 0 0 0 9px var(--on-kombord); align-items: center;
}
.site[data-look="drivingschool"] .s-cta .cta-inner :is(h1, h2) { color: var(--on-kombord); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); }
.site[data-look="drivingschool"] .s-cta .cta-inner p { color: var(--on-kombord); }
.site[data-look="drivingschool"] .s-cta .cta-inner .btn { background: #ffffff; color: var(--road-ink); border-color: #ffffff; }

/* --- Subpages: the full-bleed bands start right under the header. ---------------- */
.site[data-look="drivingschool"] main > :is(.ds-services, .ds-about):first-child { padding-top: 0; }
@media (min-width: 52rem) {
  /* About without a photo: the heading on the left, the story beside it. */
  .site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text > :is(h1, h2) { grid-row: 1 / span 4; }
  .site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text > :not(h1, h2) { grid-column: 2; }
}