/* =============================================
   Garage Gupa — style.css (framer-1to1)
   1:1 conversie van de live Framer-site
   ============================================= */

:root {
  /* Rechtstreeks uit het logobestand gemeten (assets/images/logo-badge.png:
     43.961 van de 57.600 pixels zijn exact deze waarde). De site draaide op
     #E8B90B, dat uit de Framer-CSS kwam en niet uit het merk zelf: in het
     mobiele menu ligt de badge op een goud vlak en tekende het vierkant zich
     daardoor zichtbaar donkerder af. */
  --gold: #E3B500;
  --gold-deep: #C99E00;
  /* Net als het goud rechtstreeks uit het logobestand gemeten (7.371 px in
     logo-square.png). De site draaide op #972936, dat uit de Framer-CSS kwam en
     merkbaar donkerder is; het viel op waar het rood naast het logo staat. */
  --red: #AE1C28;
  --red-deep: #8E141E;        /* hover-trap van het merkrood, voor knoppen op goud */
  /* Aparte tint voor NORMALE tekst op een goud vlak. Het merkrood haalt daar
     3,63:1 en blijft onder de AA-drempel van 4,5:1; deze haalt 5,5:1. Geldt voor
     knoplabels en voor de rode tekststaten in de gouden balk en footer. Grote
     tekst (de hero-kop) mag wél het echte merkrood houden: daar is 3:1 de norm. */
  --red-on-gold: #8A1420;
  --ink: #000000;
  --text: #3B3B3B;
  --text-strong: #333333;
  --muted: #999999;
  --muted-strong: #5C5C5C;    /* leesbare variant van --muted: haalt AA op wit */
  --line: #E6E7E9;
  --field-border: #8A9096;   /* haalt 3:1 op wit: rand van een invoerveld is een UI-grens (WCAG 1.4.11) */
  --gold-wash: #FBF1CE;       /* lichte goudtint voor icoonvlakken */
  --bg: #FFFFFF;
  --surface: #F6F7F9;
  --font: 'Lexend', sans-serif;
  --font-heading: 'Geist', 'Inter', sans-serif;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  --max-width: 1200px;
  --nav-height: 96px;         /* logo 60 + 2x18 padding — houd gelijk aan .nav-container */
  --transition: 0.25s ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Eén typeschaal voor de hele site (grote terts, ~1.25). De Framer-versie
     zette elke maat los: koppen op 60/48/36 en body op 20 — boven de courante
     bandbreedte, waardoor alles groot aanvoelde. Deze schaal houdt dezelfde
     hiërarchie maar brengt de maten terug binnen norm.
     LET OP: spaties rond + en - zijn verplicht, anders is de clamp ongeldig. */
  --step--1: clamp(0.8rem, 0.77rem + 0.12vw, 0.85rem);     /* 12.8-13.6  meta   */
  --step-0:  clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);     /* 16-17      body   */
  --step-1:  clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);    /* 17-18      lead   */
  --step-2:  clamp(1.35rem, 1.15rem + 0.8vw, 1.875rem);    /* 21.6-30    h3     */
  --step-3:  clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);    /* 28-38      h2     */
  --step-4:  clamp(2.25rem, 1.6rem + 2.6vw, 3.375rem);     /* 36-54      h1     */
  /* Schaduwen met de tint van het merk erin: neutraal grijs oogt plat. */
  --shadow-sm: 0 1px 2px rgba(22, 20, 8, 0.05), 0 2px 8px rgba(22, 20, 8, 0.04);
  --shadow-md: 0 4px 10px rgba(22, 20, 8, 0.07), 0 12px 28px rgba(22, 20, 8, 0.08);
  --shadow-lg: 0 8px 20px rgba(22, 20, 8, 0.10), 0 24px 56px rgba(22, 20, 8, 0.12);
  --color-danger: #C0392B;
  --color-success: #1E8E3E;
}

/* ---------- Base ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  max-inline-size: none;
  text-wrap: initial; /* open-props normalize zet balance; Framer-origineel breekt natuurlijk */
}
:is(h1, h2, h3, h4):not(:last-child) { margin-bottom: 0.62em; }

/* Letterafstand in em, niet px: zo blijft de tracking kloppen op elk formaat.
   Vaste -2px is te strak op mobiel en te los op desktop. */
h1 { font-size: var(--step-4); line-height: 1.15; letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); line-height: 1.22; letter-spacing: -0.025em; }
h3 { font-size: var(--step-2); line-height: 1.35; letter-spacing: -0.02em; }

p, li { max-inline-size: none; }
/* Open Props normalize geeft ELKE <li> 8px inspringing — daardoor stonden de
   footer-links niet in lijn met hun kolomkop. Kale li-selector wint van de
   :where()-default van OP; lijsten met bullets houden hun eigen padding op de <ul>. */
li { padding-inline-start: 0; text-indent: 0; }

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

/* Een telefoonnummer mag nooit over twee regels breken: "0477" op de ene en
   "75 09 43" op de volgende leest als twee losse getallen. Als regel op het
   attribuut, zodat het ook geldt voor nummers die er later bij komen. */
a[href^="tel:"] { white-space: nowrap; }

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

.container {
  width: min(var(--max-width), 100% - 3rem);
  margin-inline: auto;
}

[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }

/* NL-samenstellingen mogen afbreken op SMALLE schermen. Op desktop niet: daar
   is de kolom breed genoeg en levert het alleen lelijke woordafbrekingen op
   ("alle mer-ken"). */
@media (max-width: 767px) {
  .hero h1, .hero h3, .page-hero h1 { overflow-wrap: break-word; hyphens: auto; }
}

/* Inkt op goud, niet goud op goud: de balk eronder is nu zelf goud. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

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

/* ---------- Reveals (alleen desktop, IO + CSS — geen scroll-anims op mobiel) ---------- */

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .js .reveal.in-view { opacity: 1; transform: none; }
  /* Foto's vegen open in plaats van te faden: leest als een reveal, niet als
     een element dat toevallig verschijnt. */
  .js .reveal-media { clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease-out); }
  .js .reveal-media.in-view { clip-path: inset(0 0 0 0); }
  .js .reveal-media img { transform: scale(1.06); transition: transform 1.1s var(--ease-out); }
  .js .reveal-media.in-view img { transform: none; }
  /* Kaarten komen na elkaar binnen. */
  .js .waarom-cards .reveal:nth-child(2) { transition-delay: 0.08s; }
  .js .waarom-cards .reveal:nth-child(3) { transition-delay: 0.16s; }
  .js .waarom-cards .reveal:nth-child(4) { transition-delay: 0.24s; }
}

/* ---------- Navbar ---------- */

/* De navbar komt uit js/components.js. Zonder gereserveerde hoogte staat de
   header op 0px tot het script draait en schuift de hele pagina daarna omlaag
   (gemeten: 0,094 layout-shift op de homepage). Houd deze waarde gelijk aan
   logohoogte + 2x padding-block. */
/* Sticky op de <header>, nooit op de geïnjecteerde .nav: die zit binnen de
   header en scrolt na één navhoogte alsnog weg. Voor een garage telt dat: het
   telefoonnummer blijft zo altijd binnen bereik. */
/* De balk draagt het merkgoud. Omdat de badge zelf exact --gold is, lost het
   vierkant eromheen volledig op en blijft alleen de tekening met het woordmerk
   over — hetzelfde effect als in het mobiele menu. Wijkt --gold af van het
   logobestand, dan tekent die rand zich meteen weer af. */
#site-navbar {
  display: block; min-height: var(--nav-height); background: var(--gold);
  position: sticky; top: 0; z-index: 1000;
}

.nav { background: var(--gold); }

.nav-container {
  width: min(var(--max-width) + 190px, 100% - 3rem);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 18px;
  gap: 1rem;
}

/* Eigen uitsnede voor de balk (`logo-nav.png`), niet de vierkante badge. In dat
   vierkant is 46% van de hoogte ingebakken gouden marge, dus op 60px was het
   merkteken zelf maar ~32px. Krap uitgesneden uit de 500px-bron beslaat de
   tekening 86% van het bestand.
   De negatieve blokmarge laat het logo de volle bandhoogte innemen zonder die
   hoogte te sturen: 84 - 2x12 = 60, plus 2x18 padding = de 96px van --nav-height.
   Wijzig je de maat, herbereken dan die marge, anders groeit de balk mee. */
.brand-logo { width: auto; height: 84px; margin-block: -12px; display: block; }

.nav-links {
  display: none;
  list-style: none; margin: 0; padding: 0;
}

/* Op goud draagt inkt de tekst en wijnrood het accent; goud-op-goud zou de
   onderlijn onzichtbaar maken. */
.nav-link {
  position: relative;
  color: var(--ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.7;
  letter-spacing: 0.015em;
  padding: 0.5rem 0.25rem;
  transition: color var(--transition);
}
.nav-link::after {
  content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.15rem;
  height: 2px; border-radius: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav-link.active { color: var(--red-on-gold); }
.nav-link.active::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) {
  .nav-link:hover { color: var(--red-on-gold); }
  .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* De belknop was goud; op een gouden band verdwijnt hij. Wijnrood met licht
   goud label houdt hem het zwaarste element in de balk. */
.nav-call {
  display: none;
  align-items: center; gap: 0.6rem;
  background: var(--red); color: var(--gold-wash);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.7;
  padding: 0.65rem 1.5rem; border-radius: var(--radius-sm);
}
.nav-call svg { flex: none; }
.nav-call { transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
@media (hover: hover) {
  .nav-call:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(126, 34, 44, 0.32); }
}
.nav-call:active { transform: translateY(0); }

.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 48px; height: 48px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Het paneel is een goud vlak dat van rechts binnenschuift en zacht uitloopt.
   Het paneel draagt exact het geel van de badge zelf, dus op dit vlak lost het
   vierkant op en blijft de tekening met het woordmerk over. Daarom staat het
   logo hier groot en zonder plaat of rand eromheen. Wijk je af van --gold, dan
   tekent de rand van de badge zich meteen weer af.
   100dvh (niet svh): svh bevriest op de kleinste viewporthoogte, waardoor er
   onderaan een gat valt zodra de adresbalk van de browser inklapt. */
.mobile-menu {
  --menu-merk: clamp(104px, 32vw, 136px);
  position: fixed; inset: 0; z-index: 100;
  height: 100dvh; min-height: 100svh;
  background: var(--gold);
  display: flex; flex-direction: column;
  padding: calc(var(--menu-merk) + 2.25rem) 1.5rem 2rem;
  visibility: hidden;
  transform: translateX(100%);
  /* Dichtgaan is korter en loopt naar binnen weg: wie sluit, is al weg. */
  transition: transform 0.34s ease-in, visibility 0.34s;
}
/* Bij openen mag visibility NIET mee in de transitie: het is een discrete
   eigenschap en klapt dan pas halverwege om, waardoor het paneel de eerste
   ~200ms geen focus kan aannemen. Bij sluiten blijft hij wel in de transitie
   staan (regel hierboven), zodat het paneel zichtbaar blijft tijdens het
   dichtschuiven in plaats van meteen te verdwijnen.
   De uitloop-curve doet het werk: een constante snelheid voelt mechanisch. */
.mobile-menu.open {
  visibility: visible;
  transform: none;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}
body.menu-open { overflow: hidden; }

/* Het logo begint op dezelfde hoek als in de balk eronder en groeit van daaruit
   naar beneden, zodat het openen niet als een sprong leest. */
.mobile-menu-merk {
  position: absolute; top: 18px; left: 1.5rem;
  width: var(--menu-merk); height: var(--menu-merk);
}
.mobile-menu-merk img { width: 100%; height: 100%; display: block; }

.mobile-close {
  position: absolute; top: 24px; right: 1.5rem;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.mobile-close span {
  position: absolute; left: 10px; right: 10px; top: calc(50% - 1px);
  height: 2px; background: var(--ink); border-radius: 2px;
}
.mobile-close span:first-child { transform: rotate(45deg); }
.mobile-close span:last-child { transform: rotate(-45deg); }

.mobile-menu-merk, .mobile-close {
  opacity: 0; transition: opacity 0.2s linear;
}
.mobile-menu.open .mobile-menu-merk,
.mobile-menu.open .mobile-close { opacity: 1; transition-delay: 0.1s; }

.mobile-menu-inner {
  position: relative;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}

/* De lijst neemt de vrije ruimte en gaat erin staan: met drie links viel
   anders alle leegte in een blok onder de laatste. */
.mobile-nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; min-height: 0;
}
.mobile-nav-links li + li { border-top: 1px solid rgba(0, 0, 0, 0.16); }

/* Hogere rijen: met drie links op een vol scherm klitten ze anders in het
   midden samen terwijl er boven en onder ruimte over is. De scheidingslijnen
   blijven zo ook op gelijke afstand, wat met space-between niet lukt. */
.mobile-nav-link {
  display: flex; align-items: center;
  min-height: clamp(72px, 13vh, 112px);
  color: var(--ink); font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.75rem, 8.5vw, 2.4rem); letter-spacing: -0.015em;
}
.mobile-nav-link.active { color: var(--red); }

.mobile-menu-foot { margin-top: auto; padding-top: 2rem; }

.mobile-call {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 56px; padding-inline: 1.25rem;
  /* Vol goud op dit wijnrood haalt 4,23:1 en blijft onder de AA-drempel van
     4,5:1 voor normale tekst. De lichte goudtint haalt hem ruim. */
  background: var(--red); color: var(--gold-wash);
  font-family: var(--font); font-weight: 600; font-size: 1.0625rem;
  border-radius: var(--radius-sm);
}
.mobile-call svg { flex: none; }
.mobile-menu-adres {
  margin: 1.1rem 0 0; text-align: center;
  color: rgba(0, 0, 0, 0.66); font-size: var(--step--1); line-height: 1.6;
}

/* De rijen schuiven mee vanaf rechts, net achter het paneel aan. Bij sluiten
   valt de vertraging weg zodat ze samen met het paneel weggaan. */
.mobile-nav-links li, .mobile-menu-foot {
  opacity: 0; transform: translateX(26px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open .mobile-nav-links li,
.mobile-menu.open .mobile-menu-foot {
  opacity: 1; transform: none;
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.open .mobile-nav-links li {
  transition-delay: calc(0.16s + var(--i) * 0.06s);
}
.mobile-menu.open .mobile-menu-foot { transition-delay: 0.34s; }

@media (min-width: 900px) {
  .nav-links { display: flex; gap: 3rem; }
  .nav-call { display: inline-flex; }
  .hamburger, .mobile-menu { display: none; }
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  background: var(--ink);
  display: flex; align-items: center;
  min-height: 600px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg picture { display: block; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Verloop naar links, waar de tekst staat: rechts blijft het wagenpark zichtbaar.
   De rechterhelft van de foto is leeg wegdek; op een lichte dekking werd juist
   dat de helderste zone van de band en trok het de aandacht weg van het bord en
   de wagens. Het bereik is daarom smaller: links iets lichter zodat het gele
   uithangbord kleur houdt, rechts donkerder zodat het wegdek terugvalt. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.66) 55%, rgba(0, 0, 0, 0.80) 100%);
}
/* Op smalle schermen loopt de tekst over de VOLLE breedte, dus een zijwaarts
   verloop laat de rechterkant te licht (gemeten 3,42). Daar een vlakke dekking. */
@media (max-width: 767px) {
  .hero-bg::after { background: rgba(0, 0, 0, 0.68); }
}

.hero .container { position: relative; z-index: 1; }
/* Links uitgelijnd op ELKE breedte. Met text-align:center op smalle schermen
   liepen kop en subkop gecentreerd, maar de knoppenrij en de feitenrij zijn
   flex-containers en trekken zich van text-align niets aan: die bleven links
   staan. Dat gaf een hero met twee uitlijningen boven elkaar. */
.hero-content { max-width: 1010px; padding-block: 3.5rem; }
.hero h1 { color: #fff; }
.hero h1 .hl {
  display: inline-block;
  background: var(--gold); color: var(--red);
  padding: 0 14px 4px; border-radius: var(--radius-sm);
}
.hero h3 { color: #fff; margin-bottom: 0; max-width: 34ch; }
/* Leesmaat begrensd: op 1010px liep deze alinea tot 92 tekens per regel, ver
   boven de comfortabele 60-75. Dat laat 20px-tekst als een muur ogen. */
.hero-intro { color: rgba(255, 255, 255, 0.92); font-size: var(--step-1); font-weight: 500; line-height: 1.7; margin-top: 1.25rem; max-width: 58ch; }

/* De hero had geen enkele actie: lezen en dan nergens heen. Bellen is voor een
   garage de eerste stap, de wagens de tweede. */
.hero-acties { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 50px; padding: 0.8rem 1.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--step-0); font-weight: 600; letter-spacing: 0.01em;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.knop svg { flex: none; }
.knop--primair { background: var(--gold); color: var(--red-on-gold); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
/* Zonder eigen vulling staat de tekst rechtstreeks op de foto: gemeten 2,5:1.
   Een halfdekkende donkere vulling houdt het secundair én leesbaar. */
.knop--ghost {
  border: 1px solid rgba(255, 255, 255, 0.55); color: #fff;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (hover: hover) {
  .knop--primair:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34); }
  .knop--ghost:hover { background: rgba(0, 0, 0, 0.68); border-color: #fff; transform: translateY(-2px); }
}
.knop:active { transform: translateY(0); }

/* Drie feiten die elders op de pagina al staan, hier meteen zichtbaar. */
.hero-feiten {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
}
.hero-feiten li {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9); font-size: var(--step--1);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-feiten li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}

@media (min-width: 768px) {
  .hero-content { text-align: left; }
}

/* ---------- Herstellingen-sectie ---------- */

.section { padding-block: clamp(3rem, 6vw, 5.5rem); }

.herstel-grid { display: grid; gap: 3rem; align-items: center; }
/* Wrapper draagt de ronding, zodat de clip-path-reveal en de hover-zoom binnen
   de afgeronde hoeken blijven. */
.herstel-media { border-radius: var(--radius-lg); overflow: hidden; }
.herstel-media picture { display: block; }
.herstel-media img { display: block; width: 100%; }
@media (hover: hover) {
  .herstel-media img { transition: transform 0.7s var(--ease-out); }
  .herstel-media:hover img { transform: scale(1.04); }
}
.herstel-copy p { font-size: var(--step-0); font-weight: 500; line-height: 1.7; color: var(--text-strong); }
.herstel-copy p + p { margin-top: 1.25rem; }

.checklist { list-style: none; margin: 2.25rem 0 0; padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: var(--step-0); font-weight: 500; line-height: 1.7; color: var(--text);
}
.checklist li + li { margin-top: 1rem; }
.checklist .ico-check { flex: none; margin-top: 0.35rem; }

/* Vinkje als SVG in plaats van een 24px-PNG: dat laatste stond zichtbaar zacht
   naast de scherpe iconen in de balk en het formulier. Twee kleuren via CSS
   zodat de tokens de bron blijven; presentatie-attributen slikken geen var(). */
.ico-check { display: block; }
.ico-check circle { fill: var(--gold); }
.ico-check path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 900px) {
  .herstel-grid { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
}

/* ---------- Waarom kiezen ---------- */

.waarom { background: var(--surface); }
.waarom-head { max-width: 640px; }
.waarom-head p { font-size: var(--step-0); font-weight: 500; line-height: 1.7; color: var(--text-strong); }

/* Kop en intro naast elkaar vanaf de breedte waar de sectie zelf al in twee
   kolommen staat. Onder elkaar in een kolom van 640px bleef rechts van de intro
   ruim een halve paginabreedte leeg, precies op de overgang tussen twee
   secties. Dit is ook het enige punt waar de pagina van breedteregister
   wisselt: eronder loopt alles weer in de vaste container. */
@media (min-width: 900px) {
  .waarom-head {
    max-width: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
    align-items: end;
  }
  /* In een halve kolom brak de kop op "Garage / Gupa?" — de merknaam hoort
     bijeen. Balance verdeelt de regels en houdt het paar heel. */
  .waarom-head h2 { margin-bottom: 0; text-wrap: balance; }
  .waarom-head p { padding-bottom: 0.2rem; }
}

.waarom-grid { display: grid; gap: 3rem; margin-top: 3rem; }

.waarom-cards { display: flex; flex-direction: column; gap: 1.5rem; max-width: 430px; }
/* Icoon staat links NAAST de tekst, niet erboven. Absoluut positioneren houdt
   de markup ongemoeid en werkt op elke breedte. */
.card {
  background: #fff; border-radius: var(--radius-lg);
  position: relative;
  padding: 2rem 2rem 2rem calc(2rem + 52px + 1.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
.card-icon {
  position: absolute; left: 2rem; top: 2rem;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
/* Alle vier de kaarten dragen dezelfde icoontaal. De laatste had een
   uitgesneden fotominiatuur en las daardoor als een fout in de rij. */
.card-icon svg {
  display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.card h3 { font-family: var(--font); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.5; color: var(--ink); margin-bottom: 0.5rem; }
.card p { font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--text); }
.card-link { display: flex; justify-content: flex-end; align-items: center; gap: 0.4rem; color: var(--text); font-size: 1rem; margin-top: 0.5rem; transition: color var(--transition); }
@media (hover: hover) {
  .card-link:hover { color: var(--red); }
}
@media (pointer: coarse) {
  .card-link { min-height: 44px; }
}

.waarom-media { position: relative; }
/* <picture> is van zichzelf inline; zonder display:block komt de breedteregel
   niet aan en groeit de foto tot de volle kolom. */
.waarom-media picture { display: block; }
.waarom-media img { border-radius: var(--radius); display: block; width: 100%; }
/* Bovenste foto links in de kolom, onderste breder en rechts eroverheen. */
.waarom-img-1 { width: min(480px, 70%); margin-left: 1.75rem; }
.waarom-img-1 { border-radius: var(--radius); overflow: hidden; }
.waarom-img-2 {
  width: min(572px, 84%);
  background: #fff; padding: 12px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-top: -3.5rem; margin-left: auto; position: relative;
}
.waarom-img-2 picture { display: block; border-radius: var(--radius); overflow: hidden; }
.waarom-img-2 img { border-radius: 0; width: 100%; }

/* Onder 900px staan de twee foto's onder elkaar op volle breedte, zoals in het
   origineel; de versprongen opstelling is een desktop-compositie. */
@media (max-width: 899px) {
  .waarom-cards { max-width: none; }
  .waarom-img-1 { width: 100%; margin-left: 0; }
  .waarom-img-2 { width: 100%; margin-top: 1.5rem; padding: 0; box-shadow: none; background: none; }
}

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

/* ---------- CTA + afspraakformulier ---------- */

.cta {
  position: relative; background: var(--ink);
  background-size: cover; background-position: center;
  overflow: hidden;
}
/* Overlay links zwaarder dan rechts: daar staat de tekst. Een vlakke 0,62 liet
   de vinkregel op het lichtste stuk foto op 2,29 uitkomen (nodig: 4,5). */
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0.58) 70%, rgba(0, 0, 0, 0.48) 100%);
}
/* Kleinere bron op smalle schermen: de 1920-variant is daar ~3x te zwaar. */
.cta--straat { background-image: url("../assets/images/cta-straat-v2-1024.webp"); }
@media (min-width: 900px) {
  .cta--straat { background-image: url("../assets/images/cta-straat-v2-1920.webp"); }
}
.cta .container { position: relative; z-index: 1; }

.cta-grid { display: grid; gap: 3.5rem; align-items: center; padding-block: clamp(3rem, 6vw, 5.25rem); }
.cta-copy h2 { color: #fff; margin-bottom: 1.5rem; }
.cta-copy p { color: rgba(255, 255, 255, 0.92); font-size: var(--step-0); font-weight: 500; line-height: 1.7; max-width: 46ch; }

/* De losse tussenzin was een opsomming zonder opsomming: als punt met vinkje
   leest hij als een voordeel in plaats van als een zwevende regel. */
.cta-punten { list-style: none; margin: 1.25rem 0; padding: 0; }
.cta-punten li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  color: #fff; font-size: var(--step-0); font-weight: 500; line-height: 1.7;
}
.cta-punten .ico-check { flex: none; margin-top: 0.3rem; }

/* Bij een garage is bellen de eerste actie, niet de tweede. Het nummer is
   daarom het element zelf, geen klein pilletje. */
.cta-bel {
  margin-top: 2rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.cta-nummer {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--gold);
  transition: color var(--transition), transform var(--transition);
}
.cta-nummer svg { flex: none; }
@media (hover: hover) {
  .cta-nummer:hover { color: #fff; transform: translateX(2px); }
}
.cta-uren { display: block; margin-top: 0.5rem; font-size: var(--step--1); color: rgba(255, 255, 255, 0.75); }

/* Wit-op-0,7 over een donkere foto rendert als een vaal grijs vlak. Een echte
   witte kaart met schaduw leest als een formulier dat op de pagina ligt. */
.form-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3vw, 2.625rem) clamp(1.5rem, 3vw, 2.625rem) 2.5rem;
}
.form-card h2 {
  font-size: clamp(1.375rem, 0.6vw + 1.2rem, 1.625rem); letter-spacing: -0.02em;
  text-align: center; margin-bottom: 1.75rem;
}
.form-field + .form-field { margin-top: 1rem; }
/* Velden krijgen een eigen vulling én een zichtbare rand: wit-op-wit met een
   transparante rand maakte ze onvindbaar (gemeten contrast 1,00 met de kaart). */
.form-card input, .form-card textarea {
  width: 100%; display: block;
  background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: var(--step-0); color: var(--ink);
  padding: 0.82rem 1.06rem; min-height: 48px;
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.form-card ::placeholder { color: var(--muted-strong); opacity: 1; }
.form-card textarea { min-height: 128px; resize: vertical; }
/* Zachte merkring in plaats van een harde outline: leest rustiger en houdt de
   veldvorm intact. */
.form-card input:focus-visible, .form-card textarea:focus-visible {
  outline: none; border-color: var(--gold-deep);
  box-shadow: 0 0 0 4px rgba(232, 185, 11, 0.28);
}
.form-error input, .form-error textarea { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22); border-color: var(--color-danger); }

.form-submit {
  width: 100%; margin-top: 1.25rem;
  background: var(--gold); color: var(--red-on-gold);
  font-family: var(--font); font-weight: 600; font-size: 0.9375rem;
  min-height: 48px;
  border: 0; border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; cursor: pointer;
  transition: background var(--transition);
}
.form-submit { transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
@media (hover: hover) {
  .form-submit:hover { background: var(--gold-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232, 185, 11, 0.3); }
}
.form-submit:active { transform: translateY(0); box-shadow: none; }
.form-submit:disabled { opacity: 0.7; cursor: default; transform: none; box-shadow: none; }

#form-status { margin-top: 1rem; font-size: 0.9rem; }
.form-notice {
  display: flex; gap: 0.6rem; align-items: flex-start;
  background: #fff; border-radius: var(--radius-sm); padding: 0.85rem 1rem;
  color: var(--text-strong);
}
.recaptcha-note { font-size: 0.8rem; color: var(--text); margin: 0.9rem auto 0; text-align: center; line-height: 1.5; max-width: 48ch; }
.recaptcha-note a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden !important; }

.checkmark-svg { width: 56px; height: 56px; display: block; margin-inline: auto; }
.checkmark-circle { stroke: var(--color-success); stroke-width: 2; fill: none;
  stroke-dasharray: 166; stroke-dashoffset: 166;
  animation: cp-check-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark-check { stroke: var(--color-success); stroke-width: 3; fill: none; stroke-linecap: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: cp-check-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards; }
@keyframes cp-check-stroke { to { stroke-dashoffset: 0; } }

@media (min-width: 900px) {
  .cta-grid { grid-template-columns: 1fr 425px; gap: 5rem; }
}

/* ---------- Pagina-hero (elke binnenpagina dezelfde band) ----------
   Eén hoogte voor autos, contact en privacy: die stonden op 530px, op
   padding-gestuurd en op 8,5rem padding, dus drie verschillende banden. */

/* Titel verankerd aan de BOVENkant, niet gecentreerd. Bij centreren bepaalt de
   lengte van de subtitel waar de titel uitkomt: 1 regel op contact, 2 op autos,
   dus stond de kop op elke pagina ergens anders. Nu ligt hij overal gelijk en
   groeit alleen de ruimte eronder mee. */
.page-hero, .privacy-hero {
  position: relative; background: var(--ink);
  display: flex; align-items: flex-start;
  min-height: 400px; overflow: hidden;
}
/* Op mobiel is 400px te veel: de inhoud vraagt 155 tot 254px, dus er bleef
   180 tot 245px leegte onder de tekst staan. De banden blijven onderling gelijk
   (260px dekt de langste van de drie) en groeien mee als een subtitel langer
   wordt. De titels blijven op één lijn staan omdat dat door de padding-top
   geregeld wordt, niet door deze hoogte. */
@media (max-width: 767px) {
  .page-hero, .privacy-hero { min-height: 260px; }
}
.page-hero .hero-bg::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.33) 0%, rgba(0, 0, 0, 0.9) 100%);
}
.page-hero .container, .privacy-hero .container {
  position: relative; z-index: 1;
  padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem);
}
.page-hero h1 { color: #fff; }
.page-hero .sub { color: #fff; font-size: var(--step-1); font-weight: 500; line-height: 1.7; max-width: 540px; }

/* ---------- AutoScout24-embed ---------- */

/* De grijstint is die van de voorraadmodule zelf: laadt hij traag of niet, dan
   leest de sectie als een rustig paneel in plaats van een wit gat. */
.aanbod-embed { background: var(--surface); }
.aanbod-embed iframe {
  display: block; width: 100%; border: 0;
  height: min(900px, 130vh);
}
/* Vangnet: de externe voorraadmodule kan leeg of onbereikbaar zijn. */
.aanbod-fallback { padding-block: 2.5rem 3.5rem; text-align: center; }
.aanbod-fallback p { font-size: var(--step-0); color: var(--text); }
.aanbod-links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
.aanbod-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.6rem 1.4rem; border-radius: var(--radius-sm);
  border: 1px solid var(--gold-deep); color: var(--red-on-gold); font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) {
  .aanbod-links a:hover { background: var(--gold); }
}

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 3rem; align-items: start; }

.contact-details h2 { font-size: clamp(1.5rem, 0.8vw + 1.3rem, 1.75rem); }

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 1rem; }
.contact-list li + li { margin-top: 1.5rem; }
.contact-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-wash); color: var(--red-on-gold);
}
.contact-tekst { display: flex; flex-direction: column; gap: 0.15rem; }
.contact-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted-strong);
}
.contact-waarde { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
a.contact-waarde {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; text-decoration-thickness: 2px;
  transition: text-decoration-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  a.contact-waarde:hover { color: var(--red); text-decoration-color: var(--gold); }
}
@media (pointer: coarse) {
  .contact-list li { align-items: center; min-height: 44px; }
}

.uren-kop {
  font-family: var(--font); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-strong);
  margin: 2.75rem 0 0.9rem;
}
.uren-lijst { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.uren-lijst li {
  position: relative;
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0); color: var(--text);
}
.uren-lijst li:last-child { border-bottom: 0; }
.uren-lijst .gesloten { color: var(--muted-strong); }
/* Vandaag krijgt gewicht, geen kleurvlak: rustiger en leest sneller. De stip
   staat absoluut zodat de rij in dezelfde lijn blijft als de andere dagen. */
.uren-lijst li.vandaag { color: var(--ink); font-weight: 600; }
.uren-lijst li.vandaag::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--gold);
}

/* Vraag en antwoord staan altijd open. Een accordeon verbergt net de zin die
   iemand zoekt vlak voor hij belt. Opgezet als lijst zodat er vragen bij kunnen
   zonder de opmaak te herzien; de scheidingslijn zit tussen de items, niet
   eronder, zodat een lijst van één vraag geen losse rand krijgt. */
.faq-lijst { margin: 0; padding: 0; max-width: 48ch; }
.faq-item + .faq-item {
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.faq-vraag {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--step-0); color: var(--ink);
  margin-bottom: 0.45rem;
}
.faq-antwoord {
  margin: 0;
  font-size: var(--step-0); color: var(--text); line-height: 1.65;
}
.faq-antwoord a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
@media (hover: hover) {
  .faq-antwoord a:hover { color: var(--red); text-decoration-color: var(--red); }
}

.map-container {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.map-container iframe { width: 100%; height: clamp(320px, 42vw, 460px); display: block; border: 0; }

.tekstlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 2rem; min-height: 44px;
  font-size: var(--step-0); font-weight: 600; color: var(--red);
}
.tekstlink .pijl, .card-link .pijl { transition: transform var(--transition); }
@media (hover: hover) {
  .tekstlink:hover .pijl, .card-link:hover .pijl { transform: translateX(4px); }
}

.route-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.35rem; min-height: 32px;
  font-size: var(--step-0); font-weight: 600; color: var(--red);
}
.route-link .pijl { transition: transform var(--transition); }
@media (hover: hover) {
  .route-link:hover .pijl { transform: translateX(4px); }
}

/* Op de contactpagina staat het formulier NAAST de gegevens, op een lichte
   sectie. Daar werkt een grijs paneel met witte velden beter dan wit-op-wit. */
.form-card--paneel {
  background: var(--surface); box-shadow: none; border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.form-card--paneel h2 { margin-bottom: 0.4rem; text-align: left; }
.form-card--paneel input, .form-card--paneel textarea { background: #fff; border-color: var(--field-border); }
.form-intro { color: var(--text); margin-bottom: 1.5rem; }

/* Kaart als volle band die de pagina afsluit. */
.contact-kaart .map-container { border-radius: 0; box-shadow: none; margin: 0; }
.contact-kaart iframe { height: clamp(300px, 34vw, 420px); }

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- Privacy ---------- */

.privacy-hero { background: var(--ink); text-align: center; }
.privacy-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.82) 100%);
}
.privacy-hero h1 { color: #fff; }
.privacy-hero p { color: #fff; font-size: var(--step-1); font-weight: 500; line-height: 1.7; max-width: 68ch; margin-inline: auto; }

.privacy-body { max-width: 1100px; margin-inline: auto; }
.privacy-body h2 { font-family: var(--font-heading); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
/* De genummerde koppen stonden op body-grootte, alleen vet: de pagina las als
   een ononderbroken lap tekst. Nu een duidelijke trap. */
.privacy-body h3 {
  font-family: var(--font); font-size: 1.1875rem; font-weight: 600;
  letter-spacing: 0; line-height: 1.4; color: var(--ink);
  margin-top: 2.5rem; margin-bottom: 0.6rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.privacy-body h3:first-of-type { margin-top: 1rem; }
.privacy-body p, .privacy-body li { font-size: var(--step-0); font-weight: 400; line-height: 1.7; color: var(--text); max-width: 72ch; }
.privacy-body ul { margin: 0.5rem 0 0; padding-left: 1.4rem; }
.privacy-body a { color: var(--red); text-decoration: underline; }

/* ---------- Footer ---------- */

/* Goud vlak. Alle tekst moet hier donker: --muted-strong (#5C5C5C) haalt op goud
   maar 3,6:1 en zakt onder de AA-drempel, dus de kolomkoppen gaan naar --text
   (5,8:1) en de links naar inkt. */
.footer { background: var(--gold); padding-top: clamp(3rem, 6vw, 5rem); }
.footer .footer-heading { color: var(--text); }
.footer .footer-links a,
.footer .footer-cookie-knop,
.footer .footer-contact address,
.footer .footer-contact p,
.footer .footer-description { color: var(--ink); }
.footer .footer-uren { color: var(--text); }
@media (hover: hover) {
  .footer .footer-links a:hover,
  .footer .footer-cookie-knop:hover,
  .footer .footer-contact a:hover { color: var(--red-on-gold); }
}
.footer-grid { display: grid; gap: 2.5rem; }

/* Dezelfde krappe uitsnede als in de balk, en zonder ronding: het vlak eronder
   is goud, dus de badge lost op en alleen de tekening blijft over. */
.footer-logo img { width: auto; height: 112px; display: block; }
.footer-description { margin-top: 1.25rem; font-size: 0.9375rem; font-weight: 400; line-height: 1.7; color: var(--text); max-width: 34ch; }

/* Het merkicoon draagt zijn eigen vorm en kleur, dus geen knop-chrome eromheen.
   Het tikvlak is wel 44px; de negatieve marge houdt de zichtbare rand van het
   32px-icoon in lijn met de tekst erboven. */
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 1.25rem 0 0 -6px;
  border-radius: 50%;
  transition: transform var(--transition), opacity var(--transition);
}
.footer-social svg { display: block; }
@media (hover: hover) {
  .footer-social:hover { transform: translateY(-2px); opacity: 0.88; }
}

/* Kolomkoppen als klein kapitaal-label: rustiger dan een tweede kopregel en
   het laat de links het werk doen. */
.footer-heading {
  font-family: var(--font); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-strong); margin-bottom: 1.1rem;
}
/* Tweede blok binnen dezelfde kolom: het beleid staat onder het aanbod in
   plaats van in een vijfde kolom, die op deze breedte te smal zou worden. */
.footer-heading--tweede { margin-top: 2rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: 0.7rem; }
/* Verticale padding houdt het tikdoel op 24px+ (WCAG 2.5.8) nu de tekst
   kleiner is; de li-marge is navenant kleiner zodat het ritme gelijk blijft. */
.footer-links a,
.footer-cookie-knop {
  display: inline-block; font-size: 0.9375rem; color: var(--text);
  padding-block: 0.28rem;
  transition: color var(--transition), transform var(--transition);
}
/* De cookieknop moet een <button> zijn (hij opent een dialoog, hij navigeert
   niet), maar staat visueel gelijk aan de links ernaast. */
.footer-cookie-knop {
  background: none; border: 0; padding-inline: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) {
  .footer-links a:hover,
  .footer-cookie-knop:hover { color: var(--red); transform: translateX(3px); }
}

.footer-contact address,
.footer-contact p { font-size: 0.9375rem; line-height: 1.7; color: var(--text); font-style: normal; }
.footer-contact p { margin-top: 0.35rem; }
.footer-contact a { display: inline-block; padding-block: 0.28rem; transition: color var(--transition); }
.footer-uren { color: var(--muted-strong); margin-top: 0.9rem; }
@media (hover: hover) {
  .footer-contact a:hover { color: var(--red); }
}

/* Zwarte strook onder het gouden vlak. Geen scheidingslijn: de kleurwissel doet
   dat werk al, een lijn erbij zou dubbel zijn. De tekst en het Cloudpage-merk
   staan hier in wit; het merk gebruikt de kant-en-klare witte variant, want een
   CSS-filter zou ook het gekleurde wolkje wegpletten. */
.footer-bottom { background: var(--ink); margin-top: 3rem; }
.footer-bottom-inner {
  width: min(var(--max-width), 100% - 3rem); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding-block: 1.6rem;
}
.footer-copyright { font-size: 0.9375rem; color: #fff; }
.footer-agency a { display: block; }
/* Officiele witte variant, krap uitgesneden op exact dezelfde beeldrand als de
   grijze die hier eerder stond. LET OP bij het aanpassen van de maat: de
   huisstandaard 120x33 gold voor het ongesneden bestand, en daar zat 10% lege
   marge in — het zichtbare merk was dus 108x22. Een krap bestand op 33px zetten
   maakt het merk anderhalve keer zo groot. Deze 109x22 komt optisch exact
   overeen met wat er vroeger stond. */
.footer-agency img { width: 109px; height: 22px; display: block; opacity: 1; }

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3.5rem; }
}
/* Kolommen blijven links uitgelijnd bij het stapelen; alleen de onderbalk
   centreert, met het Cloudpage-merk als allerlaatste op een eigen regel. */
@media (max-width: 640px) {
  .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-onderaan { justify-content: center; }
  .footer-agency { order: 10; margin-top: 0.35rem; }
}

/* ---------- Back to top ---------- */

/* Wijnrood in plaats van goud: boven de gouden footer verdween de knop. */
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--red); color: var(--gold-wash);
  border: 0; cursor: pointer; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .back-to-top:hover { background: var(--red-deep); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Verhoogd contrast ----------
   De kaarten en het formulier leunen op kleurvlakken zonder rand; bij
   forced-contrast valt dat onderscheid weg. Randen geven de vlakken terug. */

@media (prefers-contrast: more) {
  .card { border: 1px solid var(--text); }
  .form-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--ink); }
  .form-card input, .form-card textarea { border: 1px solid var(--text); }
  .nav-call, .form-submit { border: 2px solid var(--red-on-gold); }
  /* De strook heeft normaal geen rand (de kleurwissel scheidt), maar bij
     forced-contrast vallen achtergrondkleuren weg en is een lijn wel nodig.
     Lijn in wit: de strook is donker, een donkere lijn zou verdwijnen. */
  .footer-bottom { border-top: 1px solid #fff; }
  .hero-bg::after, .page-hero .hero-bg::after, .contact-hero .hero-bg::after {
    background: rgba(0, 0, 0, 0.78);
  }
}