/* Garage De Ooievaar (garage, voorbeeld D). Skelet N1 · H8 · R1: klassieke balk, de kentekencheck als opening, banden over de volle breedte.
   Haagse vlag (geel/groen), werkplaatsvloer met belijning, kentekenplaat, werkbon, planbord, sectionaaldeur. */
body.s-garage-d {
  --geel: #f6d10a; --geel-zacht: #fdf1a6; --groen: #1f7a3f; --groen-d: #145a2c; --diep: #0f2a1a; --vloer: #12231a; --inkt: #17221b; --grijs: #4c5a50;
  --papier: #f6f1e3; --papier2: #ece4cc; --wit: #fffdf8; --lijn: #ddd3b8;
  --a: #1f7a3f; --a2: #f6d10a; --bg2: #e9e3cf; --img-r: 0;
  --schuin: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: var(--papier); color: var(--inkt); font: 400 17px/1.6 "Barlow", system-ui, sans-serif; overflow-x: clip;
}
body.s-garage-d a { color: var(--groen-d); }
body.s-garage-d h1, body.s-garage-d h2, body.s-garage-d h3 { margin: 0; color: var(--diep); }
body.s-garage-d h1, body.s-garage-d h2 { font-family: "Archivo Black", "Barlow", sans-serif; font-weight: 400; letter-spacing: -.012em; line-height: 1.04; }
body.s-garage-d h2 { font-size: clamp(30px, 3.8vw, 50px); }
body.s-garage-d h3 { font: 800 22px/1.15 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
body.s-garage-d p { margin: 0 0 1em; }
body.s-garage-d ul, body.s-garage-d ol { margin: 0; padding: 0; list-style: none; }
body.s-garage-d figure { margin: 0; }
body.s-garage-d .gd-wrap { width: min(1220px, 100% - 48px); margin-inline: auto; }
body.s-garage-d .gd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.s-garage-d .gd-ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
body.s-garage-d .gd-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.s-garage-d .ph.gd-img { min-height: 0; }
body.s-garage-d .gd-lead { font-size: 20px; line-height: 1.55; }
body.s-garage-d .gd-klein { font-size: 14px; color: var(--grijs); }
body.s-garage-d .gd-noot { font: 500 15px/1.45 "Barlow", sans-serif; color: var(--grijs); margin: 0; padding-left: 14px; border-left: 4px solid var(--geel); }
body.s-garage-d .gd-noot-licht { color: #cfdcd2; }
body.s-garage-d .gd-link { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; border-bottom: 3px solid var(--geel); padding-bottom: 2px; color: var(--diep); }
body.s-garage-d .gd-link:hover { border-color: var(--groen); }
body.s-garage-d .gd-onder { background: linear-gradient(transparent 64%, var(--geel) 64%, var(--geel) 90%, transparent 90%); padding: 0 .08em; }

/* vakcode: als een belijnd vak op de werkplaatsvloer */
body.s-garage-d .gd-vak-code { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 7px 12px 6px; border: 2px solid currentColor; color: var(--groen);
  font: 500 13px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .14em; }
body.s-garage-d .gd-vak-code::before { content: ""; width: 10px; height: 10px; background: var(--geel); box-shadow: 0 0 0 2px var(--diep); }
body.s-garage-d .gd-kopregel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 8px 60px; align-items: end; padding-bottom: 30px; margin-bottom: 0;
  border-bottom: 3px solid var(--diep); }
body.s-garage-d .gd-kopregel .gd-vak-code { grid-column: 1 / -1; justify-self: start; }
body.s-garage-d .gd-kopregel h2 { max-width: 15em; }
body.s-garage-d .gd-kopregel p:last-child { margin: 0; color: var(--grijs); }
body.s-garage-d .gd-kopregel-kort { display: block; border: 0; padding: 0; margin-bottom: 22px; }

/* knoppen: afgeschuinde hoeken, als een gestanst label */
body.s-garage-d .gd-knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 800 18px/1 "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .06em; padding: 16px 24px; text-decoration: none; border: 0; cursor: pointer; clip-path: var(--schuin); transition: background .15s, color .15s; }
body.s-garage-d .gd-knop-geel { background: var(--geel); color: var(--diep); }
body.s-garage-d .gd-knop-geel:hover { background: #fff; }
body.s-garage-d .gd-knop-donker { background: var(--diep); color: var(--geel); }
body.s-garage-d .gd-knop-donker:hover { background: var(--groen); color: #fff; }
body.s-garage-d .gd-knop-groen { background: var(--groen); color: #fff; }
body.s-garage-d .gd-knop-groen:hover { background: var(--diep); }
body.s-garage-d .gd-knop-lijn { background: transparent; color: var(--diep); box-shadow: inset 0 0 0 3px var(--diep); clip-path: none; }
body.s-garage-d .gd-knop-lijn:hover { background: var(--diep); color: var(--geel); }
body.s-garage-d .gd-knop-groot { font-size: 21px; padding: 20px 28px; }

/* ── N1: klassieke balk, als de gevel van de garage ── */
body.s-garage-d .gd-kop { background: var(--groen-d); color: #fff; position: relative; z-index: 30; }
body.s-garage-d .gd-kop-in { display: flex; align-items: center; gap: 28px; min-height: 92px; }
body.s-garage-d .gd-kop-vlag { height: 8px; background: var(--geel); box-shadow: inset 0 -2px 0 var(--diep); }
body.s-garage-d .gd-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; align-self: stretch; }
body.s-garage-d .gd-logo-mark { width: 84px; height: 84px; flex: none; margin-bottom: -40px; border-radius: 50%; box-shadow: 0 0 0 5px var(--papier), 0 10px 20px rgba(0,0,0,.25); }
body.s-garage-d .gd-logo-txt { display: flex; flex-direction: column; }
body.s-garage-d .gd-logo-txt small { font: 800 14px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .32em; color: var(--geel); }
body.s-garage-d .gd-logo-txt b { font: 400 27px/1.05 "Archivo Black", sans-serif; letter-spacing: -.01em; }
body.s-garage-d .gd-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
body.s-garage-d .gd-menu-knop { display: none; }
body.s-garage-d .gd-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.s-garage-d .gd-nav ul { display: flex; gap: 2px; }
body.s-garage-d .gd-nav ul a { display: block; padding: 12px 14px; font: 800 19px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; text-decoration: none; position: relative; }
body.s-garage-d .gd-nav ul a:hover { color: var(--geel); }
body.s-garage-d .gd-nav ul a[aria-current] { color: var(--geel); }
body.s-garage-d .gd-nav ul a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -22px; height: 8px; background: var(--diep); }
body.s-garage-d .gd-nav-site { font: 500 12px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--geel); text-decoration: none;
  border: 1.5px solid var(--geel); padding: 8px 10px; margin: 0 8px; }
body.s-garage-d .gd-nav-site:hover, body.s-garage-d .gd-nav-site[aria-current] { background: var(--geel); color: var(--diep); }
body.s-garage-d .gd-nav-tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; margin-right: 6px; }
body.s-garage-d .gd-nav-tel .gd-ic { color: var(--geel); }

/* ── H8: de kentekencheck is de opening, op de werkplaatsvloer ── */
body.s-garage-d .gd-start, body.s-garage-d .gd-pkop { position: relative; overflow: hidden; color: #fff; background-color: var(--vloer);
  background-image: radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(0,0,0,.25) 0 1px, transparent 2px), radial-gradient(circle at 70% 30%, rgba(255,255,255,.04) 0 1px, transparent 2px);
  background-size: auto, 7px 7px, 11px 11px; }
body.s-garage-d .gd-vloer { position: absolute; inset: 0; pointer-events: none; }
body.s-garage-d .gd-vloer-lijn { position: absolute; top: 0; bottom: 0; width: 12px; background: var(--geel); opacity: .85; }
body.s-garage-d .gd-vloer-l { left: 3.5%; } body.s-garage-d .gd-vloer-r { right: 3.5%; }
body.s-garage-d .gd-vloer-tekst { position: absolute; left: 0; right: 0; bottom: -0.18em; text-align: center; white-space: nowrap; font: 800 clamp(60px, 11vw, 170px)/1 "Barlow Condensed", sans-serif;
  letter-spacing: .06em; color: var(--geel); opacity: .07; }
body.s-garage-d .gd-start { padding: 96px 0 120px; }
body.s-garage-d .gd-start-in { position: relative; max-width: 1000px; text-align: center; }
body.s-garage-d .gd-start-boven { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; font: 500 13px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .14em; color: #b9cdbf; margin-bottom: 26px; }
body.s-garage-d .gd-start-boven span + span::before { content: "·"; margin-right: 22px; color: var(--geel); }
body.s-garage-d .gd-start h1 { color: #fff; font-size: clamp(36px, 5.4vw, 70px); line-height: 1.02; max-width: 15em; margin: 0 auto 44px; }
body.s-garage-d .gd-start .gd-onder { background: linear-gradient(transparent 64%, var(--groen) 64%, var(--groen) 90%, transparent 90%); }
body.s-garage-d .gd-check { display: grid; gap: 30px; justify-items: center; }
body.s-garage-d .gd-plaat { display: inline-flex; align-items: stretch; background: var(--geel); border: 2px solid var(--diep); border-radius: 6px; overflow: hidden; color: var(--diep); }
body.s-garage-d .gd-plaat-nl { background: #1e3f9a; color: #fff; font: 700 13px/1 "Barlow", sans-serif; width: 28px; display: grid; place-items: end center; padding-bottom: 7px; flex: none; position: relative; }
body.s-garage-d .gd-plaat-nl::before { content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle, transparent 4px, #f6d10a 4.5px 5.4px, transparent 6px); }
body.s-garage-d .gd-plaat-input { display: flex; min-height: 56px; }
body.s-garage-d .gd-plaat input { border: 0; background: transparent; font: 500 22px/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--diep);
  width: 100%; min-width: 0; padding: 0 12px; outline: none; }
body.s-garage-d .gd-plaat input::placeholder { color: #8a7a20; }
body.s-garage-d .gd-plaat-input:focus-within { box-shadow: 0 0 0 3px var(--groen); }
body.s-garage-d .gd-plaat-reus { width: min(820px, 100%); min-height: 150px; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 4px var(--geel), inset 0 0 0 7px var(--diep), 0 26px 50px rgba(0,0,0,.45); }
body.s-garage-d .gd-plaat-reus .gd-plaat-nl { width: 78px; font-size: 30px; padding-bottom: 24px; margin: 7px 0 7px 7px; border-radius: 8px 0 0 8px; }
body.s-garage-d .gd-plaat-reus .gd-plaat-nl::before { width: 40px; height: 40px; margin-left: -20px; top: 22px; background: radial-gradient(circle, transparent 12px, #f6d10a 12.5px 15px, transparent 15.5px); }
body.s-garage-d .gd-plaat-reus input { font-size: clamp(40px, 8vw, 100px); letter-spacing: .08em; text-align: center; padding: 0 20px; }
body.s-garage-d .gd-plaat-reus:focus-within { box-shadow: inset 0 0 0 4px var(--geel), inset 0 0 0 7px var(--diep), 0 0 0 6px var(--groen), 0 26px 50px rgba(0,0,0,.45); }
body.s-garage-d .gd-klussen { border: 0; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; min-width: 0; }
body.s-garage-d .gd-klussen legend { width: 100%; text-align: center; font: 800 16px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--geel); padding: 0; margin-bottom: 14px; }
body.s-garage-d .gd-klus { position: relative; cursor: pointer; }
body.s-garage-d .gd-klus input { position: absolute; opacity: 0; }
body.s-garage-d .gd-klus span { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 18px 8px 16px; border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04); transition: background .15s, border-color .15s; }
body.s-garage-d .gd-klus:hover span { border-color: var(--geel); }
body.s-garage-d .gd-klus-ic { width: 28px; height: 28px; color: var(--geel); margin-bottom: 4px; }
body.s-garage-d .gd-klus b { font: 800 18px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
body.s-garage-d .gd-klus em { font: 400 18px/1.1 "Archivo Black", sans-serif; font-style: normal; color: var(--geel); }
body.s-garage-d .gd-klus small { font: 500 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: #a9bfb0; }
body.s-garage-d .gd-klus input:checked + span { background: var(--geel); border-color: var(--geel); color: var(--diep); }
body.s-garage-d .gd-klus input:checked + span .gd-klus-ic, body.s-garage-d .gd-klus input:checked + span em, body.s-garage-d .gd-klus input:checked + span small { color: var(--diep); }
body.s-garage-d .gd-klus input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
body.s-garage-d .gd-check-onder { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; }
body.s-garage-d .gd-leen-toggle { position: relative; cursor: pointer; display: flex; }
body.s-garage-d .gd-leen-toggle input { position: absolute; opacity: 0; }
body.s-garage-d .gd-leen-toggle span { display: flex; align-items: center; gap: 12px; padding: 0 18px; border: 2px solid rgba(255,255,255,.25); font-weight: 600; min-height: 60px; }
body.s-garage-d .gd-leen-toggle span::before { content: ""; width: 42px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1);
  transition: background .15s; flex: none; background-image: radial-gradient(circle at 12px 12px, #fff 8px, transparent 8.5px); }
body.s-garage-d .gd-leen-toggle input:checked + span::before { background-color: var(--groen); background-image: radial-gradient(circle at 30px 12px, #fff 8px, transparent 8.5px); }
body.s-garage-d .gd-leen-toggle input:focus-visible + span { outline: 3px solid #fff; }
body.s-garage-d .gd-leen-toggle small { font: 500 12px "DM Mono", monospace; color: var(--geel); text-transform: uppercase; }
body.s-garage-d .gd-check-onder select { font: 600 17px "Barlow", sans-serif; background: var(--vloer); color: #fff; border: 2px solid rgba(255,255,255,.25); padding: 0 14px; min-height: 60px; }
body.s-garage-d .gd-form-noot { font-size: 13px; color: var(--grijs); margin: 10px 0 0; }
body.s-garage-d .gd-start .gd-form-noot { color: #a9bfb0; margin: 0; }
body.s-garage-d .gd-start-beloftes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 30px; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); font-weight: 600; color: #e4ede6; }
body.s-garage-d .gd-start-beloftes li { display: flex; gap: 8px; align-items: center; }
body.s-garage-d .gd-start-beloftes .gd-ic { color: var(--geel); }

/* kleinere kentekenvelden (prijzenpagina) */
body.s-garage-d .gd-kenteken { background: #fff; color: var(--inkt); border: 2px solid var(--diep); padding: 18px; max-width: 620px; margin-top: 24px; }
body.s-garage-d .gd-kenteken-label { display: block; font: 800 16px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; color: var(--diep); }
body.s-garage-d .gd-kenteken-rij { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(120px, .8fr) auto; gap: 10px; }
body.s-garage-d .gd-kenteken select { font: 600 17px "Barlow", sans-serif; border: 2px solid var(--lijn); padding: 0 12px; background: var(--papier); color: var(--inkt); min-height: 56px; min-width: 0; }

/* ── R1: banden over de volle breedte ── */
body.s-garage-d .gd-band-sec { padding: 120px 0; }
body.s-garage-d .gd-band-papier { background: var(--papier); }
body.s-garage-d .gd-band-wit { background: var(--wit); }
body.s-garage-d .gd-band-geel { background: var(--geel); }
body.s-garage-d .gd-band-geel .gd-vak-code { color: var(--diep); }
body.s-garage-d .gd-band-geel .gd-vak-code::before { background: #fff; }
body.s-garage-d .gd-band-donker { background: var(--diep); color: #dbe6de; }
body.s-garage-d .gd-band-donker h2, body.s-garage-d .gd-band-donker h3 { color: #fff; }
body.s-garage-d .gd-band-donker .gd-vak-code { color: var(--geel); }
body.s-garage-d .gd-band-donker .gd-kopregel { border-color: var(--geel); }
body.s-garage-d .gd-band-donker .gd-kopregel p:last-child { color: #b9cdbf; }
body.s-garage-d .gd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* fotoband: foto over de volle breedte, sectionaaldeur half open */
body.s-garage-d .gd-fotoband { position: relative; min-height: 640px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--diep); }
body.s-garage-d .gd-fotoband-hoog { min-height: min(88vh, 860px); }
body.s-garage-d .gd-fotoband-laag { min-height: 460px; }
body.s-garage-d .gd-fotoband-beeld { position: absolute; inset: 0; }
body.s-garage-d .gd-fotoband-beeld .ph { height: 100%; }
body.s-garage-d .gd-fotoband-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,25,16,.82) 100%); pointer-events: none; }
body.s-garage-d .gd-deur { position: absolute; left: 0; right: 0; top: 0; height: 13%; z-index: 2; background: repeating-linear-gradient(180deg, #2b3a31 0 18px, #18241c 18px 21px);
  box-shadow: 0 10px 24px rgba(0,0,0,.4); }
body.s-garage-d .gd-deur::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 80px; height: 8px; margin-left: -40px; background: var(--geel); border-radius: 4px; }
body.s-garage-d .gd-fotoband-in { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding: 80px 0 64px; }
body.s-garage-d .gd-fotoband-tekst { max-width: 640px; }
body.s-garage-d .gd-fotoband-tekst h2 { color: #fff; font-size: clamp(36px, 5.2vw, 72px); margin-bottom: 18px; }
body.s-garage-d .gd-fotoband-tekst p { font-size: 20px; color: #e8efe9; margin: 0; }
body.s-garage-d .gd-fotoband-zin { font: 400 clamp(30px, 4.4vw, 58px)/1.05 "Archivo Black", sans-serif; color: #fff; margin: 0; }
body.s-garage-d .gd-fotoband-zin span { display: block; margin-top: 12px; font: 500 18px/1.4 "Barlow", sans-serif; color: #dfe9e2; }
body.s-garage-d .gd-fotoband-rechts { justify-content: flex-end; align-items: center; padding: 90px 0; }
body.s-garage-d .gd-fotoband:has(.gd-fotoband-rechts) { align-items: center; }
body.s-garage-d .gd-fotoband:has(.gd-fotoband-rechts) .gd-fotoband-beeld::after { background: linear-gradient(90deg, transparent 35%, rgba(10,25,16,.55) 100%); }
body.s-garage-d .gd-paneel { background: var(--groen-d); color: #e3ede6; padding: 46px 44px; max-width: 520px; border-top: 8px solid var(--geel); }
body.s-garage-d .gd-paneel h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; }
body.s-garage-d .gd-paneel .gd-vak-code { color: var(--geel); }
body.s-garage-d .gd-paneel .gd-knop { margin-top: 8px; }

/* planbord */
body.s-garage-d .gd-planbord { flex: none; width: 330px; background: var(--diep); color: #e6efe8; padding: 18px 20px 12px; box-shadow: 0 20px 40px rgba(0,0,0,.4); border-top: 6px solid var(--geel); }
body.s-garage-d .gd-planbord-kop { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font: 800 14px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--geel); }
body.s-garage-d .gd-planbord-kop i { width: 9px; height: 9px; border-radius: 50%; background: #5bd27f; box-shadow: 0 0 0 4px rgba(91,210,127,.2); }
body.s-garage-d .gd-planbord li { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid #2c4a37; font-size: 14px; }
body.s-garage-d .gd-planbord span { font: 500 12px "DM Mono", monospace; color: #9fb7a6; }
body.s-garage-d .gd-planbord b { font-weight: 600; color: #fff; }
body.s-garage-d .gd-planbord em { font: 500 12px "DM Mono", monospace; font-style: normal; color: var(--geel); white-space: nowrap; }

/* bruggen: diensten als rijen */
body.s-garage-d .gd-bruggen li { border-bottom: 2px solid var(--diep); }
body.s-garage-d .gd-bruggen a { display: grid; grid-template-columns: 130px minmax(0, 300px) minmax(0, 1fr) 170px 44px; gap: 28px; align-items: center; padding: 34px 0; text-decoration: none; color: var(--inkt);
  position: relative; transition: padding .2s; }
body.s-garage-d .gd-bruggen a::before { content: ""; position: absolute; inset: 0 -24px; background: var(--geel); opacity: 0; transition: opacity .2s; z-index: 0; }
body.s-garage-d .gd-bruggen a > * { position: relative; z-index: 1; }
body.s-garage-d .gd-bruggen a:hover::before { opacity: 1; }
body.s-garage-d .gd-brug { font: 500 13px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; padding: 9px 10px; border: 2px solid var(--diep); justify-self: start; }
body.s-garage-d .gd-brug-titel { font: 400 clamp(26px, 3vw, 40px)/1 "Archivo Black", sans-serif; color: var(--diep); }
body.s-garage-d .gd-brug-kort { color: var(--grijs); font-size: 17px; }
body.s-garage-d .gd-brug-prijs { font: 400 24px/1 "Archivo Black", sans-serif; color: var(--groen-d); text-align: right; }
body.s-garage-d .gd-brug-prijs small { display: block; font: 500 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--grijs); margin-bottom: 6px; }
body.s-garage-d .gd-brug-pijl { width: 36px; height: 36px; padding: 8px; background: var(--diep); color: var(--geel); }

/* stappen als route */
body.s-garage-d .gd-route-stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 64px; position: relative; }
body.s-garage-d .gd-route-stappen::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; border-top: 4px dashed var(--geel); opacity: .7; }
body.s-garage-d .gd-route-stappen li { position: relative; }
body.s-garage-d .gd-stap-nr { position: relative; display: inline-grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; background: var(--geel); color: var(--diep);
  font: 500 26px/1 "DM Mono", monospace; border-radius: 6px; box-shadow: inset 0 0 0 3px var(--geel), inset 0 0 0 5px var(--diep); margin-bottom: 24px; }
body.s-garage-d .gd-route-stappen h3 { margin-bottom: 8px; }
body.s-garage-d .gd-route-stappen p { margin: 0; color: #c9d8cd; }

/* familie: foto tot de rand van het scherm */
body.s-garage-d .gd-familie { display: grid; grid-template-columns: 1fr 1fr; padding: 0; align-items: stretch; }
body.s-garage-d .gd-familie-foto { position: relative; min-height: 680px; }
body.s-garage-d .gd-familie-foto .gd-img, body.s-garage-d .gd-familie-foto .ph { position: absolute; inset: 0; height: 100%; }
body.s-garage-d .gd-familie-foto figcaption { position: absolute; left: 24px; bottom: 20px; font: 500 13px "DM Mono", monospace; color: #fff; background: rgba(15,42,26,.8); padding: 6px 10px; }
body.s-garage-d .gd-familie-tekst { padding: 110px max(24px, calc((100vw - 1220px) / 2)) 110px 80px; align-self: center; }
body.s-garage-d .gd-familie-tekst h2 { margin-bottom: 20px; }
body.s-garage-d .gd-cijfers { display: flex; gap: 14px; margin: 26px 0 30px; flex-wrap: wrap; }
body.s-garage-d .gd-cijfers li { flex: 1 1 120px; border-top: 4px solid var(--groen); padding-top: 12px; }
body.s-garage-d .gd-cijfers b { display: block; font: 400 34px/1 "Archivo Black", sans-serif; color: var(--diep); }
body.s-garage-d .gd-cijfers span { font-size: 15px; color: var(--grijs); }

/* belband: geel met vloertape */
body.s-garage-d .gd-belband { background: var(--geel); padding: 84px 0; position: relative; }
body.s-garage-d .gd-belband::before, body.s-garage-d .gd-belband::after { content: ""; position: absolute; left: 0; right: 0; height: 16px; background: repeating-linear-gradient(-45deg, var(--diep) 0 16px, var(--geel) 16px 32px); }
body.s-garage-d .gd-belband::before { top: 0; } body.s-garage-d .gd-belband::after { bottom: 0; }
body.s-garage-d .gd-belband-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
body.s-garage-d .gd-belband h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 10px; }
body.s-garage-d .gd-belband p { margin: 0; font-size: 19px; }
body.s-garage-d .gd-belband-acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* paginakop op de vloer */
body.s-garage-d .gd-pkop { padding: 64px 0 90px; }
body.s-garage-d .gd-pkop .gd-wrap { position: relative; }
body.s-garage-d .gd-pkop h1 { color: #fff; font-size: clamp(40px, 5.6vw, 76px); max-width: 14em; margin-bottom: 20px; line-height: 1; }
body.s-garage-d .gd-pkop .gd-lead { max-width: 38em; color: #dbe6de; }
body.s-garage-d .gd-pkop .gd-vak-code { color: var(--geel); }
body.s-garage-d .gd-crumb { font: 500 13px "DM Mono", monospace; color: #a9bfb0; margin-bottom: 34px; text-transform: uppercase; letter-spacing: .08em; }
body.s-garage-d .gd-crumb a { color: #fff; }
body.s-garage-d .gd-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
body.s-garage-d .gd-chips a { display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border: 2px solid rgba(255,255,255,.35); color: #fff;
  text-decoration: none; font: 800 17px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
body.s-garage-d .gd-chips a .gd-ic { color: var(--geel); }
body.s-garage-d .gd-chips a:hover { background: var(--geel); color: var(--diep); border-color: var(--geel); }
body.s-garage-d .gd-chips a:hover .gd-ic { color: var(--diep); }

/* werkbon */
body.s-garage-d .gd-werkbon { background: #fffdf6; color: var(--inkt); padding: 28px 30px 30px; position: relative; transform: rotate(1.2deg); box-shadow: 0 18px 40px rgba(20,40,25,.18);
  border-top: 6px solid var(--groen); --tand: radial-gradient(circle at 8px 0, transparent 7px, #fffdf6 7.5px); }
body.s-garage-d .gd-werkbon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: var(--tand); background-size: 16px 12px; }
body.s-garage-d .gd-werkbon-kop { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 2px solid var(--diep); margin-bottom: 14px; }
body.s-garage-d .gd-werkbon-logo { width: 46px; height: 46px; }
body.s-garage-d .gd-werkbon-kop b { display: block; font: 400 22px/1 "Archivo Black", sans-serif; letter-spacing: .08em; color: var(--diep); }
body.s-garage-d .gd-werkbon-kop div span { font: 500 13px "DM Mono", monospace; color: var(--grijs); }
body.s-garage-d .gd-werkbon-nr { margin-left: auto; font: 500 13px "DM Mono", monospace; color: #b0331f; border: 1.5px solid #b0331f; padding: 4px 8px; transform: rotate(-4deg); }
body.s-garage-d .gd-werkbon-regels li { display: flex; align-items: baseline; gap: 8px; font: 400 16px/1.3 "DM Mono", monospace; padding: 9px 0; }
body.s-garage-d .gd-werkbon-regels i { flex: 1; border-bottom: 2px dotted #b8ad8e; transform: translateY(-4px); min-width: 16px; }
body.s-garage-d .gd-werkbon-regels b { font-weight: 500; color: var(--groen-d); white-space: nowrap; }
body.s-garage-d .gd-werkbon-voet { margin: 14px 0 0; padding-top: 14px; border-top: 2px solid var(--diep); font: 500 13px "DM Mono", monospace; color: var(--grijs); }

/* dienstblokken */
body.s-garage-d .gd-dblok { padding: 120px 0; scroll-margin-top: 20px; background: var(--papier); }
body.s-garage-d .gd-dblok-donker { background: var(--groen-d); color: #dfeae2; }
body.s-garage-d .gd-dblok-donker h2 { color: #fff; }
body.s-garage-d .gd-dblok-donker .gd-dblok-nr { color: var(--geel); }
body.s-garage-d .gd-dblok-donker .gd-vinklijst .gd-ic { color: var(--geel); }
body.s-garage-d .gd-dblok-donker .gd-dblok-prijs { border-color: var(--geel); }
body.s-garage-d .gd-dblok-donker .gd-dblok-prijs span { color: #b9cdbf; }
body.s-garage-d .gd-dblok-donker .gd-dblok-prijs b { color: var(--geel); }
body.s-garage-d .gd-dblok-donker .gd-knop-groen { background: var(--geel); color: var(--diep); }
body.s-garage-d .gd-dblok-donker .gd-belletje { background: var(--diep); border-color: var(--geel); }
body.s-garage-d .gd-dblok-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
body.s-garage-d .gd-dblok-nr { font: 500 15px "DM Mono", monospace; color: var(--groen); margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
body.s-garage-d .gd-dblok-nr span { font: 800 15px "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .14em; background: var(--geel); color: var(--diep); padding: 5px 10px; border-radius: 4px; }
body.s-garage-d .gd-dblok h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 18px; }
body.s-garage-d .gd-vinklijst { margin: 22px 0 28px; display: grid; gap: 10px; }
body.s-garage-d .gd-vinklijst li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
body.s-garage-d .gd-vinklijst .gd-ic { color: var(--groen); margin-top: 3px; }
body.s-garage-d .gd-dblok-prijs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 22px; border-top: 2px solid var(--diep); }
body.s-garage-d .gd-dblok-prijs span { font: 800 15px "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); }
body.s-garage-d .gd-dblok-prijs b { font: 400 34px/1 "Archivo Black", sans-serif; color: var(--groen-d); margin-right: auto; }
body.s-garage-d .gd-dblok-extra { display: grid; gap: 22px; }
body.s-garage-d .gd-dblok-foto { aspect-ratio: 16 / 10; }
body.s-garage-d .gd-dblok-foto .gd-img, body.s-garage-d .gd-dblok-foto .ph { border-radius: 4px; height: 100%; }
body.s-garage-d .gd-keurlijst, body.s-garage-d .gd-vgl, body.s-garage-d .gd-seizoen, body.s-garage-d .gd-belletje { background: #fff; border: 2px solid var(--diep); border-radius: 0; padding: 26px; }
body.s-garage-d .gd-keurlijst h3, body.s-garage-d .gd-vgl h3, body.s-garage-d .gd-seizoen h3 { margin-bottom: 16px; }
body.s-garage-d .gd-keurlijst ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 18px; }
body.s-garage-d .gd-keurlijst li { display: flex; gap: 8px; font-size: 16px; }
body.s-garage-d .gd-keurlijst .gd-ic { color: var(--groen); margin-top: 3px; }
body.s-garage-d .gd-vgl table { width: 100%; border-collapse: collapse; font-size: 15px; }
body.s-garage-d .gd-vgl th, body.s-garage-d .gd-vgl td { padding: 10px 6px; border-bottom: 1px solid var(--lijn); text-align: left; }
body.s-garage-d .gd-vgl thead th { font: 800 16px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--diep); }
body.s-garage-d .gd-vgl thead small { display: block; font: 500 12px "DM Mono", monospace; text-transform: none; letter-spacing: 0; color: var(--groen-d); margin-top: 4px; }
body.s-garage-d .gd-vgl tbody th { font-weight: 500; }
body.s-garage-d .gd-vgl td { text-align: center; width: 76px; }
body.s-garage-d .gd-ja, body.s-garage-d .gd-nee { display: inline-block; font: 800 13px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 5px 8px; border-radius: 4px; }
body.s-garage-d .gd-ja { background: var(--groen); color: #fff; }
body.s-garage-d .gd-nee { background: var(--papier2); color: var(--grijs); }
body.s-garage-d .gd-vgl .gd-klein { margin: 14px 0 0; }
body.s-garage-d .gd-belletje { background: var(--diep); color: #e6efe8; border-color: var(--diep); }
body.s-garage-d .gd-belletje-kop { font: 800 16px "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--geel); display: flex; gap: 8px; align-items: center; }
body.s-garage-d .gd-bel { max-width: 88%; padding: 12px 16px; border-radius: 14px; margin: 0 0 12px; font-size: 16px; }
body.s-garage-d .gd-bel b { display: block; font: 800 13px "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
body.s-garage-d .gd-bel-wij { background: #fff; color: var(--inkt); border-bottom-left-radius: 2px; }
body.s-garage-d .gd-bel-wij b { color: var(--groen); }
body.s-garage-d .gd-bel-jij { background: var(--geel); color: var(--diep); margin-left: auto; border-bottom-right-radius: 2px; width: max-content; }
body.s-garage-d .gd-seizoen ul { display: grid; gap: 0; }
body.s-garage-d .gd-seizoen li { display: grid; grid-template-columns: 110px 1fr; gap: 2px 16px; padding: 12px 0; border-bottom: 1px dashed var(--lijn); }
body.s-garage-d .gd-seizoen li:last-child { border: 0; }
body.s-garage-d .gd-seizoen-tijd { grid-row: span 2; font: 500 14px "DM Mono", monospace; color: var(--diep); background: var(--geel); border-radius: 4px; padding: 6px 8px; align-self: start; text-align: center; }
body.s-garage-d .gd-seizoen small { color: var(--grijs); font-size: 15px; }
body.s-garage-d .gd-klassiek { display: grid; gap: 14px; }
body.s-garage-d .gd-klassiek li { background: #fffdf6; border: 2px solid var(--diep); border-radius: 0; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
body.s-garage-d .gd-klassiek b { font: 800 22px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--diep); }
body.s-garage-d .gd-klassiek span { grid-column: 1; color: var(--grijs); font-size: 16px; }
body.s-garage-d .gd-klassiek em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 400 20px "Archivo Black", sans-serif; font-style: normal; color: var(--groen-d); white-space: nowrap; }

/* prijzen */
body.s-garage-d .gd-prijzen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; }
body.s-garage-d .gd-prijsblok { background: #fffdf6; border: 2px solid var(--diep); border-radius: 0; padding: 26px 28px 20px; border-top: 6px solid var(--groen); scroll-margin-top: 20px; }
body.s-garage-d .gd-prijsblok header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--diep); margin-bottom: 6px; }
body.s-garage-d .gd-prijsblok h2 { font-size: 28px; }
body.s-garage-d .gd-prijsblok header p { margin: 0; font: 500 13px "DM Mono", monospace; color: var(--grijs); }
body.s-garage-d .gd-prijsblok-gratis { background: var(--geel); border-top-color: var(--diep); }
body.s-garage-d .gd-prijsblok-gratis header p { color: var(--diep); }
body.s-garage-d .gd-prijsblok-gratis .gd-werkbon-regels i { border-color: var(--diep); }
body.s-garage-d .gd-prijsblok-gratis .gd-werkbon-regels b { color: var(--diep); }
body.s-garage-d .gd-prijzen-noot { margin-top: 30px; }
body.s-garage-d .gd-beloftes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.s-garage-d .gd-beloftes li { border-top: 4px solid var(--geel); background: #fff; padding: 20px; border-radius: 0; }
body.s-garage-d .gd-beloftes h3 { margin-bottom: 8px; font-size: 21px; }
body.s-garage-d .gd-beloftes p { margin: 0; color: var(--grijs); font-size: 16px; }
body.s-garage-d .gd-split .gd-kenteken { margin-top: 24px; }

/* over ons */
body.s-garage-d .gd-tijdlijn { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
body.s-garage-d .gd-tijdlijn { margin-top: 56px; }
body.s-garage-d .gd-tijdlijn::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; border-top: 4px dashed rgba(246,209,10,.6); }
body.s-garage-d .gd-tijdlijn li { position: relative; padding: 0 18px 0 0; }
body.s-garage-d .gd-tijdlijn b { display: inline-block; position: relative; font: 400 20px/1 "Archivo Black", sans-serif; background: var(--geel); color: var(--diep); padding: 14px 12px; border-radius: 6px; margin-bottom: 16px; }
body.s-garage-d .gd-tijdlijn p { font-size: 16px; color: #c9d8cd; margin: 0; }
body.s-garage-d .gd-team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
body.s-garage-d .gd-team li { background: #fff; border: 2px solid var(--diep); border-radius: 0; padding: 24px 20px; position: relative; overflow: hidden; }
body.s-garage-d .gd-team li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 70px; background: var(--groen); }
body.s-garage-d .gd-naamlap { position: relative; display: inline-block; background: #fff; color: #b0331f; border: 3px solid #b0331f; border-radius: 50%; padding: 12px 22px;
  font: 600 28px/1 "Caveat", cursive; margin: 6px 0 18px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(0,0,0,.08); transform: rotate(-4deg); }
body.s-garage-d .gd-team h3 { font-size: 24px; }
body.s-garage-d .gd-rol { font: 500 13px "DM Mono", monospace; color: var(--groen); margin: 4px 0 10px; }
body.s-garage-d .gd-team p:last-child { font-size: 15px; color: var(--grijs); margin: 0; }
body.s-garage-d .gd-emaille { background: var(--groen); color: #fff; border-radius: 18px; padding: 30px 32px; border: 6px solid #fff; box-shadow: 0 0 0 3px var(--diep), 0 18px 34px rgba(0,0,0,.18); }
body.s-garage-d .gd-emaille-kop { font: 400 26px/1 "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--geel); text-align: center; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 2px solid rgba(255,255,255,.35); }
body.s-garage-d .gd-emaille ol { counter-reset: regel; }
body.s-garage-d .gd-emaille li { counter-increment: regel; display: grid; grid-template-columns: 34px 1fr; gap: 10px; font: 800 20px/1.2 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; padding: 9px 0; }
body.s-garage-d .gd-emaille li::before { content: counter(regel); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--geel); color: var(--diep); font: 400 15px/1 "Archivo Black", sans-serif; }
body.s-garage-d .gd-belofte-regel { margin: 40px 0 0; font: 400 clamp(20px, 2.2vw, 28px)/1.2 "Archivo Black", sans-serif; color: var(--diep); }
body.s-garage-d .gd-werkwijze { display: grid; grid-template-columns: 1.6fr 1fr; gap: 54px; align-items: start; scroll-margin-top: 20px; }
body.s-garage-d #werkwijze { scroll-margin-top: 20px; }
body.s-garage-d .gd-werkwijze h2 { margin-bottom: 34px; }
body.s-garage-d .gd-stappen-rij { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
body.s-garage-d .gd-stappen-rij li::after { display: none; }

/* contact */
body.s-garage-d .gd-contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start; }
body.s-garage-d .gd-afspraak { background: #fff; border: 2px solid var(--diep); border-radius: 0; padding: 34px; border-top: 8px solid var(--geel); display: grid; gap: 22px; }
body.s-garage-d .gd-afspraak-kop h2 { font-size: 32px; margin-bottom: 4px; }
body.s-garage-d .gd-afspraak-kop p { margin: 0; color: var(--grijs); }
body.s-garage-d .gd-veld { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
body.s-garage-d .gd-veld > label, body.s-garage-d .gd-veld legend { font: 800 16px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--diep); padding: 0; margin-bottom: 8px; }
body.s-garage-d .gd-veld small { text-transform: none; letter-spacing: 0; font: 400 14px "Barlow", sans-serif; color: var(--grijs); }
body.s-garage-d .gd-veld input:not([type]), body.s-garage-d .gd-veld input[type=tel], body.s-garage-d .gd-veld input[type=email], body.s-garage-d .gd-veld textarea { font: 400 17px "Barlow", sans-serif; border: 2px solid var(--lijn);
  border-radius: 6px; padding: 13px 14px; background: var(--papier); color: var(--inkt); width: 100%; }
body.s-garage-d .gd-veld input:focus, body.s-garage-d .gd-veld textarea:focus { outline: none; border-color: var(--groen); background: #fff; }
body.s-garage-d .gd-plaat-groot { width: 100%; max-width: 360px; min-height: 64px; }
body.s-garage-d .gd-plaat-groot input { font-size: 30px; }
body.s-garage-d .gd-velden2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.s-garage-d .gd-vakken, body.s-garage-d .gd-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
body.s-garage-d .gd-vak, body.s-garage-d .gd-keus { position: relative; cursor: pointer; }
body.s-garage-d .gd-vak input, body.s-garage-d .gd-keus input { position: absolute; opacity: 0; }
body.s-garage-d .gd-vak span, body.s-garage-d .gd-keus span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--lijn); border-radius: 6px; font-weight: 600; background: var(--papier); }
body.s-garage-d .gd-keus span { min-width: 58px; justify-content: center; }
body.s-garage-d .gd-vak input:checked + span, body.s-garage-d .gd-keus input:checked + span { background: var(--geel); border-color: var(--diep); }
body.s-garage-d .gd-vak input:focus-visible + span, body.s-garage-d .gd-keus input:focus-visible + span { outline: 3px solid var(--groen); outline-offset: 2px; }
body.s-garage-d .gd-vak-breed span { width: 100%; }
body.s-garage-d .gd-vak-breed span::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--diep); border-radius: 4px; background: #fff; flex: none; }
body.s-garage-d .gd-vak-breed input:checked + span::before { background: var(--groen); box-shadow: inset 0 0 0 3px #fff; }
body.s-garage-d .gd-afspraak .gd-knop { justify-self: start; }
body.s-garage-d .gd-afspraak .gd-form-noot { margin: -8px 0 0; }
body.s-garage-d .gd-contactkaart { display: grid; gap: 20px; }
body.s-garage-d .gd-contact-blok { background: var(--papier2); border-radius: 0; padding: 26px; }
body.s-garage-d .gd-contact-blok h2 { font-size: 26px; margin-bottom: 8px; }
body.s-garage-d .gd-contact-blok h3 { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
body.s-garage-d .gd-contact-tel { display: block; font: 400 34px/1.1 "Archivo Black", sans-serif; color: var(--groen-d); text-decoration: none; margin-bottom: 12px; }
body.s-garage-d .gd-contact-regel { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; }
body.s-garage-d .gd-contact-regel .gd-ic { color: var(--groen); }
body.s-garage-d .gd-tijden { margin: 0 0 14px; }
body.s-garage-d .gd-tijden div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--lijn); }
body.s-garage-d .gd-tijden dt { font-weight: 500; }
body.s-garage-d .gd-tijden dd { margin: 0; font: 500 15px "DM Mono", monospace; white-space: nowrap; }
body.s-garage-d .gd-route { background: var(--groen-d); color: #e6efe8; border-radius: 0; padding: 26px; }
body.s-garage-d .gd-route p { margin: 16px 0 0; }
body.s-garage-d .gd-straatbord { display: inline-flex; flex-direction: column; background: #f4f4f0; color: #1e3f9a; border: 4px solid #1e3f9a; border-radius: 4px; padding: 6px 18px; box-shadow: 0 0 0 3px #f4f4f0; }
body.s-garage-d .gd-straatbord span { font: 800 26px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
body.s-garage-d .gd-straatbord small { font: 600 13px "Barlow", sans-serif; text-align: center; }
body.s-garage-d .gd-vragen { display: grid; grid-template-columns: 1fr 1.6fr; gap: 54px; align-items: start; }
body.s-garage-d .gd-vragen h2 { margin-bottom: 18px; }
body.s-garage-d .gd-faq details { background: #fff; border: 2px solid var(--diep); border-radius: 0; margin-bottom: 10px; }
body.s-garage-d .gd-faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; font: 800 20px/1.2 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em; position: relative; color: var(--diep); }
body.s-garage-d .gd-faq summary::-webkit-details-marker { display: none; }
body.s-garage-d .gd-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--geel);
  display: grid; place-items: center; font: 400 20px/1 "Archivo Black", sans-serif; }
body.s-garage-d .gd-faq details[open] summary::after { content: "–"; background: var(--groen); color: #fff; }
body.s-garage-d .gd-faq details p { padding: 0 20px 18px; margin: 0; }


/* kaarten houden donkere tekst, ook op een groene band */
body.s-garage-d .gd-keurlijst, body.s-garage-d .gd-vgl, body.s-garage-d .gd-seizoen { color: var(--inkt); }
body.s-garage-d .gd-keurlijst h3, body.s-garage-d .gd-vgl h3, body.s-garage-d .gd-seizoen h3, body.s-garage-d .gd-seizoen b { color: var(--diep); }
/* werkwijze op over ons */
body.s-garage-d .gd-stappen { display: grid; gap: 34px 30px; }
body.s-garage-d .gd-stappen li p { margin: 6px 0 0; }
body.s-garage-d .gd-stappen h3 { color: var(--diep); }

/* ── voet: de deur gaat dicht ── */
body.s-garage-d .gd-voet { background: var(--diep); color: #cfdcd2; font-size: 16px; }
body.s-garage-d .gd-voet-deur { height: 96px; background: repeating-linear-gradient(180deg, #24342a 0 22px, #15221a 22px 24px); position: relative; border-bottom: 8px solid var(--geel); }
body.s-garage-d .gd-voet-deur::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 90px; height: 10px; margin-left: -45px; background: var(--geel); border-radius: 5px; }
body.s-garage-d .gd-voet a { color: #fff; }
body.s-garage-d .gd-voet-top { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; padding: 70px 0 50px; border-bottom: 1px solid #2c4a37; }
body.s-garage-d .gd-voet-logo { width: 110px; height: 110px; grid-row: span 2; }
body.s-garage-d .gd-voet-naam { font: 400 clamp(44px, 7vw, 96px)/.95 "Archivo Black", sans-serif; color: #fff; margin: 0; letter-spacing: -.02em; }
body.s-garage-d .gd-voet-slogan { font: 800 22px/1.2 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--geel); margin: 10px 0 0; }
body.s-garage-d .gd-voet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 50px 0; }
body.s-garage-d .gd-voet-kop { font: 500 12px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .16em; color: var(--geel); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--geel); }
body.s-garage-d .gd-voet-adres { line-height: 1.9; margin: 0; }
body.s-garage-d .gd-voet-lijst li { margin-bottom: 8px; }
body.s-garage-d .gd-voet-lijst a { text-decoration: none; }
body.s-garage-d .gd-voet-lijst a:hover { color: var(--geel); }
body.s-garage-d .gd-tijden-voet div { border-color: #2c4a37; }
body.s-garage-d .gd-voet-onder { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 30px; border-top: 1px solid #2c4a37; font-size: 14px; }
body.s-garage-d .gd-voet-onder p { margin: 0; }
body.s-garage-d .gd-voet-onder a { color: var(--geel); }

/* ── tablet ── */
@media (max-width: 1140px) {
  body.s-garage-d .gd-nav-tel span { display: none; }
  body.s-garage-d .gd-nav ul a { padding: 12px 10px; }
  body.s-garage-d .gd-nav-site { margin: 0 4px; }
  body.s-garage-d .gd-klussen { grid-template-columns: repeat(3, 1fr); }
  body.s-garage-d .gd-bruggen a { grid-template-columns: 110px minmax(0, 220px) minmax(0, 1fr) 140px 40px; gap: 20px; }
  body.s-garage-d .gd-team { grid-template-columns: repeat(3, 1fr); }
  body.s-garage-d .gd-tijdlijn { grid-template-columns: repeat(3, 1fr); gap: 30px 0; }
  body.s-garage-d .gd-tijdlijn::before { display: none; }
}
@media (max-width: 960px) {
  body.s-garage-d .gd-menu-knop { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; cursor: pointer; padding: 12px 16px;
    font: 800 17px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--diep); background: var(--geel); clip-path: var(--schuin); }
  body.s-garage-d .gd-burger, body.s-garage-d .gd-burger::before, body.s-garage-d .gd-burger::after { display: block; width: 20px; height: 3px; background: var(--diep); position: relative; transition: transform .2s; }
  body.s-garage-d .gd-burger::before, body.s-garage-d .gd-burger::after { content: ""; position: absolute; left: 0; }
  body.s-garage-d .gd-burger::before { top: -6px; } body.s-garage-d .gd-burger::after { top: 6px; }
  body.s-garage-d .gd-menu-toggle:checked ~ .gd-menu-knop .gd-burger { background: transparent; }
  body.s-garage-d .gd-menu-toggle:checked ~ .gd-menu-knop .gd-burger::before { transform: translateY(6px) rotate(45deg); }
  body.s-garage-d .gd-menu-toggle:checked ~ .gd-menu-knop .gd-burger::after { transform: translateY(-6px) rotate(-45deg); }
  body.s-garage-d .gd-menu-toggle:focus-visible ~ .gd-menu-knop { outline: 3px solid #fff; outline-offset: 2px; }
  body.s-garage-d .gd-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--groen-d); border-top: 8px solid var(--geel); padding: 50px 24px 28px;
    flex-direction: column; align-items: stretch; gap: 8px; box-shadow: 0 30px 40px rgba(0,0,0,.3); }
  body.s-garage-d .gd-menu-toggle:checked ~ .gd-nav { display: flex; }
  body.s-garage-d .gd-nav ul { flex-direction: column; }
  body.s-garage-d .gd-nav ul a { font-size: 30px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  body.s-garage-d .gd-nav ul a[aria-current]::after { left: auto; right: 0; top: 50%; bottom: auto; width: 26px; height: 10px; margin-top: -5px; background: var(--geel); }
  body.s-garage-d .gd-nav-site { align-self: flex-start; margin: 14px 0 4px; }
  body.s-garage-d .gd-nav-tel span { display: inline; }
  body.s-garage-d .gd-nav-tel { font-size: 20px; padding: 10px 0; }
  body.s-garage-d .gd-nav-cta { margin-top: 6px; }
  body.s-garage-d .gd-split, body.s-garage-d .gd-dblok-grid, body.s-garage-d .gd-contact, body.s-garage-d .gd-vragen, body.s-garage-d .gd-werkwijze { grid-template-columns: 1fr; gap: 48px; }
  body.s-garage-d .gd-kopregel { grid-template-columns: 1fr; }
  body.s-garage-d .gd-fotoband-in { flex-direction: column; align-items: flex-start; }
  body.s-garage-d .gd-bruggen a { grid-template-columns: 96px 1fr auto; grid-template-areas: "brug titel prijs" "brug kort kort"; gap: 8px 20px; padding: 26px 0; }
  body.s-garage-d .gd-brug { grid-area: brug; align-self: start; }
  body.s-garage-d .gd-brug-titel { grid-area: titel; }
  body.s-garage-d .gd-brug-kort { grid-area: kort; }
  body.s-garage-d .gd-brug-prijs { grid-area: prijs; }
  body.s-garage-d .gd-brug-pijl { display: none; }
  body.s-garage-d .gd-route-stappen { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  body.s-garage-d .gd-route-stappen::before { display: none; }
  body.s-garage-d .gd-familie { grid-template-columns: 1fr; }
  body.s-garage-d .gd-familie-foto { min-height: 420px; }
  body.s-garage-d .gd-familie-tekst { padding: 72px 24px 96px; max-width: 720px; }
  body.s-garage-d .gd-prijzen { grid-template-columns: 1fr; }
  body.s-garage-d .gd-belband-in { grid-template-columns: 1fr; }
  body.s-garage-d .gd-voet-grid { grid-template-columns: 1fr 1fr; }
}
/* ── mobiel ── */
@media (max-width: 640px) {
  body.s-garage-d { font-size: 16px; }
  body.s-garage-d .gd-wrap { width: calc(100% - 32px); }
  body.s-garage-d .gd-kop-in { min-height: 74px; gap: 12px; }
  body.s-garage-d .gd-logo-mark { width: 60px; height: 60px; margin-bottom: -26px; box-shadow: 0 0 0 4px var(--papier), 0 8px 16px rgba(0,0,0,.25); }
  body.s-garage-d .gd-logo-txt small { font-size: 11px; letter-spacing: .26em; }
  body.s-garage-d .gd-logo-txt b { font-size: 20px; }
  body.s-garage-d .gd-menu-woord { display: none; }
  body.s-garage-d .gd-band-sec, body.s-garage-d .gd-dblok { padding: 72px 0; }
  body.s-garage-d .gd-start { padding: 64px 0 80px; }
  body.s-garage-d .gd-vloer-lijn { width: 6px; }
  body.s-garage-d .gd-vloer-l { left: 6px; } body.s-garage-d .gd-vloer-r { right: 6px; }
  body.s-garage-d .gd-start-boven { gap: 6px 12px; font-size: 11px; }
  body.s-garage-d .gd-start-boven span + span::before { margin-right: 12px; }
  body.s-garage-d .gd-start h1 { font-size: 34px; margin-bottom: 30px; }
  body.s-garage-d .gd-plaat-reus { min-height: 92px; border-radius: 10px; }
  body.s-garage-d .gd-plaat-reus .gd-plaat-nl { width: 44px; font-size: 18px; padding-bottom: 12px; }
  body.s-garage-d .gd-plaat-reus .gd-plaat-nl::before { width: 24px; height: 24px; margin-left: -12px; top: 12px; background: radial-gradient(circle, transparent 7px, #f6d10a 7.5px 9px, transparent 9.5px); }
  body.s-garage-d .gd-plaat-reus input { font-size: 38px; padding: 0 8px; letter-spacing: .04em; }
  body.s-garage-d .gd-klussen { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  body.s-garage-d .gd-klus span { padding: 14px 6px 12px; }
  body.s-garage-d .gd-check-onder { flex-direction: column; width: 100%; }
  body.s-garage-d .gd-check-onder > * { width: 100%; }
  body.s-garage-d .gd-check-onder .gd-knop { font-size: 19px; }
  body.s-garage-d .gd-start-beloftes { flex-direction: column; align-items: center; gap: 8px; }
  body.s-garage-d .gd-fotoband { min-height: 520px; }
  body.s-garage-d .gd-fotoband-hoog { min-height: 0; display: block; padding-top: 360px; }
  body.s-garage-d .gd-fotoband-hoog .gd-fotoband-beeld { bottom: auto; height: 520px; }
  body.s-garage-d .gd-fotoband-in { padding: 40px 0 48px; }
  body.s-garage-d .gd-fotoband-tekst h2 { font-size: 36px; }
  body.s-garage-d .gd-fotoband-tekst p { font-size: 17px; }
  body.s-garage-d .gd-planbord { width: 100%; }
  body.s-garage-d .gd-fotoband-rechts { padding: 240px 0 0; width: 100%; }
  body.s-garage-d .gd-fotoband:has(.gd-fotoband-rechts) { align-items: flex-end; }
  body.s-garage-d .gd-paneel { padding: 30px 22px; margin: 0 -16px; max-width: none; }
  body.s-garage-d .gd-kenteken { padding: 14px; }
  body.s-garage-d .gd-kenteken-rij { grid-template-columns: 1fr; }
  body.s-garage-d .gd-route-stappen { grid-template-columns: 1fr; gap: 30px; }
  body.s-garage-d .gd-bruggen a { grid-template-columns: 1fr auto; grid-template-areas: "brug prijs" "titel titel" "kort kort"; }
  body.s-garage-d .gd-bruggen a::before { inset: 0 -16px; }
  body.s-garage-d .gd-brug-prijs { font-size: 20px; }
  body.s-garage-d .gd-familie-foto { min-height: 360px; }
  body.s-garage-d .gd-familie-tekst { padding: 56px 16px 72px; }
  body.s-garage-d .gd-werkbon { padding: 22px 18px 24px; transform: none; }
  body.s-garage-d .gd-werkbon-regels li { font-size: 14px; }
  body.s-garage-d .gd-werkbon-nr { display: none; }
  body.s-garage-d .gd-prijsblok { padding: 20px 16px 14px; }
  body.s-garage-d .gd-prijsblok .gd-werkbon-regels li { font-size: 14px; }
  body.s-garage-d .gd-beloftes, body.s-garage-d .gd-team, body.s-garage-d .gd-velden2, body.s-garage-d .gd-keurlijst ul, body.s-garage-d .gd-stappen-rij { grid-template-columns: 1fr; }
  body.s-garage-d .gd-tijdlijn { grid-template-columns: 1fr; gap: 0; padding-left: 26px; border-left: 4px dashed rgba(246,209,10,.6); }
  body.s-garage-d .gd-tijdlijn li { padding: 0 0 22px; }
  body.s-garage-d .gd-tijdlijn b { margin-bottom: 8px; padding: 10px; font-size: 17px; }
  body.s-garage-d .gd-keurlijst, body.s-garage-d .gd-vgl, body.s-garage-d .gd-seizoen, body.s-garage-d .gd-belletje { padding: 18px; }
  body.s-garage-d .gd-vgl td { width: 56px; }
  body.s-garage-d .gd-seizoen li { grid-template-columns: 1fr; }
  body.s-garage-d .gd-seizoen-tijd { grid-row: auto; justify-self: start; }
  body.s-garage-d .gd-dblok-prijs .gd-knop { width: 100%; }
  body.s-garage-d .gd-afspraak { padding: 22px 16px; }
  body.s-garage-d .gd-afspraak .gd-knop { justify-self: stretch; }
  body.s-garage-d .gd-emaille { padding: 22px 20px; }
  body.s-garage-d .gd-belband-acts .gd-knop { width: 100%; }
  body.s-garage-d .gd-pkop { padding: 44px 0 64px; }
  body.s-garage-d .gd-voet-top { grid-template-columns: 1fr; padding: 50px 0 36px; }
  body.s-garage-d .gd-voet-logo { width: 80px; height: 80px; margin-bottom: 16px; }
  body.s-garage-d .gd-voet-grid { grid-template-columns: 1fr; gap: 32px; }
  body.s-garage-d .gd-klassiek li { grid-template-columns: 1fr; }
  body.s-garage-d .gd-klassiek em { grid-column: 1; grid-row: auto; }
  body.s-garage-d .gd-contact-tel { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { body.s-garage-d * { transition: none !important; } }