/* ==========================================================================
   Jansen & Snel Automotive
   Zwart-wit, hairlines, rechte hoeken. Geen schaduwen, geen gloed, geen ronding.
   ========================================================================== */

:root {
  --ink: #000;
  --paper: #fff;
  --ink-80: #262626;
  --ink-60: #565656;
  --ink-45: #7c7c7c;
  --ink-30: #a8a8a8;
  --line: #e3e3e3;
  --line-strong: #c9c9c9;
  --wash: #f5f5f5;
  --wash-2: #ededed;

  --dark-line: #2e2e2e;
  --dark-text: #a3a3a3;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --max: 1280px;
  --gutter: 24px;
  --header-h: 68px;

  --step: 8px;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 76px; }
}

/* ------------------------------------------------------------------ basis */

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

::selection { background: var(--ink); color: var(--paper); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- layout */

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

.wrap--narrow { max-width: 760px; }
.wrap--mid { max-width: 1000px; }

/* Smalle kolom links tegen de marge, in plaats van gecentreerd in de pagina.
   Op brede vensters staat een gewone .wrap niet tegen de vensterrand maar
   tegen de rand van --max, gecentreerd. Zonder onderstaande regel liep deze
   kolom daar voorbij: hij bleef tegen de vensterrand hangen, terwijl een
   koptekst erboven (gewone .wrap) verderop naar binnen stond. */
.wrap--links {
  margin-left: max(0px, calc((100% - var(--max)) / 2));
  margin-right: 0;
  max-width: calc(760px + var(--gutter) * 2);
}
.wrap--mid.wrap--links { max-width: calc(1000px + var(--gutter) * 2); }

.section { padding-block: 72px; }
.section--tight { padding-block: 48px; }
.section--loose { padding-block: 104px; }
.section--flush-top { padding-top: 0; }

@media (min-width: 900px) {
  .section { padding-block: 100px; }
  .section--tight { padding-block: 64px; }
  .section--loose { padding-block: 140px; }
}

.section--wash { background: var(--wash); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark a { color: var(--paper); }
.section--line-top { border-top: 1px solid var(--line); }

/* Homepagina: een dunne zwarte lijn tussen de onderdelen, zodat elk kopje
   zijn eigen vlak krijgt. De hero levert zijn grijze lijn daarvoor in. */
.pagina--home > section + section { border-top: 1px solid var(--ink); }
.pagina--home > .hero { border-bottom: 0; }

/* Twee uitzonderingen: geen lijn tussen de hero (met de knop "Bekijk het
   aanbod") en het aanbod erna, en geen lijn tussen het team en het
   RDW-blok erna. De rest houdt wel zijn lijn. De selector kijkt naar het
   bloktype ervoor, dus dit volgt vanzelf mee als de volgorde in de
   paginabouwer ooit verandert. */
.pagina--home > [data-block="hero"] + [data-block="car_grid"],
.pagina--home > [data-block="team"] + [data-block="text_image"] {
  border-top: 0;
}

/* Contactpagina: "Neem contact met ons op" is kort genoeg om op één regel
   te passen zodra de kolom niet op 820px afgekapt wordt. Drie klassen om
   zeker boven .hero--text .hero__grid (verderop, twee klassen) uit te komen. */
.pagina--contact .hero--text .hero__grid { max-width: none; }

.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 32px; }

/* ------------------------------------------------------------ typografie */

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 14px;
}

.section--dark .eyebrow { color: var(--ink-30); }

.h-display {
  font-size: clamp(2.25rem, 6.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 600;
  /* Voorkomt dat er op de laatste regel één los woord overblijft. */
  text-wrap: balance;
}

.h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); letter-spacing: -0.032em; text-wrap: balance; }
.h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -0.028em; text-wrap: balance; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.022em; }
.h4 { font-size: 1.0625rem; letter-spacing: -0.016em; }

.lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-60);
  letter-spacing: -0.012em;
}

.section--dark .lede { color: var(--dark-text); }

.muted { color: var(--ink-60); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.8125rem; }
.mono-num { font-variant-numeric: tabular-nums; }

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.5rem; margin: 2em 0 0.6em; }
.prose h3 { font-size: 1.1875rem; margin: 1.8em 0 0.5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { color: var(--ink-60); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink-45); }
.prose li + li { margin-top: 6px; }
.prose blockquote {
  margin: 1.5em 0;
  padding-left: 20px;
  border-left: 1px solid var(--ink);
  color: var(--ink);
}

/* --------------------------------------------------------------- knoppen */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  text-align: center;
}

.btn:hover { background: var(--ink-80); border-color: var(--ink-80); }
.btn:active { background: #000; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--line:hover { border-color: var(--ink); background: transparent; }

.btn--inverse { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--inverse:hover { background: transparent; color: var(--paper); }

.btn--inverse-ghost { background: transparent; color: var(--paper); border-color: var(--dark-line); }
.btn--inverse-ghost:hover { border-color: var(--paper); }

.btn--sm { height: 40px; padding: 0 16px; font-size: 0.875rem; }
.btn--lg { height: 54px; padding: 0 32px; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.4; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: gap 0.15s ease;
}
.link-arrow:hover { gap: 12px; }
.section--dark .link-arrow { border-color: var(--paper); }

/* ---------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand__mark {
  height: 46px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  /* Het aangeleverde logo is zwart op transparant; in de zwarte balk
     draaien we het om naar wit. */
  filter: invert(1);
}

.brand__mark--raw { filter: none; }

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.brand__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand__sub {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-30);
  margin-top: 3px;
}

@media (min-width: 900px) {
  .brand__mark { height: 58px; max-width: 260px; }
  .brand__name { font-size: 1.1875rem; }
}

.nav {
  display: none;
  align-items: center;
  gap: 4px;
}

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

.nav__link {
  position: relative;
  padding: 8px 14px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #d4d4d4;
  transition: color 0.15s ease;
}

.nav__link:hover { color: var(--paper); }
.nav__link.is-active { color: var(--paper); font-weight: 500; }

.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--paper);
}

.header__actions { display: flex; align-items: center; gap: 12px; }

.header__phone {
  display: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-left: 18px;
  margin-left: 6px;
  border-left: 1px solid var(--dark-line);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1080px) { .header__phone { display: block; } }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  margin-right: -10px;
}

@media (min-width: 900px) { .burger { display: none; } }

.burger span {
  display: block;
  height: 1px;
  background: var(--paper);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--ink);
  color: var(--paper);
  padding: 8px var(--gutter) 40px;
  overflow-y: auto;
  z-index: 99;
  display: none;
}

.mobile-nav.is-open { display: block; }

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

.mobile-nav a {
  display: block;
  padding: 18px 0;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--dark-line);
}

.mobile-nav__meta { margin-top: 32px; color: var(--dark-text); font-size: 0.9375rem; }
.mobile-nav__meta a { display: inline; padding: 0; border: 0; font-size: inherit; font-weight: 400; }

body.nav-open { overflow: hidden; }

/* -------------------------------------------------------------- topstrip */

.topstrip {
  background: var(--ink);
  color: var(--ink-30);
  font-size: 12px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--dark-line);
}

.topstrip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 34px;
  overflow: hidden;
  white-space: nowrap;
}

.topstrip__item { display: flex; align-items: center; gap: 7px; }
.topstrip__item:not(:first-child) { display: none; }

@media (min-width: 720px) {
  .topstrip__inner { justify-content: space-between; }
  .topstrip__item:not(:first-child) { display: flex; }
}

/* ------------------------------------------------------------------ hero */

.hero { border-bottom: 1px solid var(--line); }

.hero__grid {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-block: 56px;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    padding-block: 88px;
  }
}

.hero__title { margin-bottom: 20px; }
.hero__text { max-width: 46ch; margin-bottom: 32px; }

.hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--wash);
  overflow: hidden;
}

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

.hero--full { position: relative; border-bottom: 0; }

.hero--full .hero__media {
  aspect-ratio: 16 / 9;
  max-height: 78vh;
}

@media (min-width: 900px) {
  .hero--full .hero__media { aspect-ratio: 21 / 9; }
}

.hero--full .hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
  color: var(--paper);
  padding-block: 48px;
}

.hero--full .hero__overlay .lede { color: rgba(255, 255, 255, 0.82); }

.hero--text { text-align: left; border-bottom: 1px solid var(--line); }
.hero--text .hero__grid { display: block; max-width: 820px; }

/* Tekstkoppen op de losse pagina's (Aanbod, Verkocht, Over ons, Contact,
   Accessoires, privacy): minder lucht boven en onder de kop, en een kleinere
   afstand tot de inhoud eronder. De homepage heeft zijn eigen compacte hero
   en blijft daarom buiten schot. Gekleurde banden (wash, dark) houden hun
   eigen opvulling, anders zit de tekst erin scheef. */
.hero--text:not(.hero--home) .hero__grid { padding-block: 36px; }
.hero--text:not(.hero--home) + .section:not(.section--wash):not(.section--dark):not(.section--flush-top) { padding-top: 40px; }

@media (min-width: 900px) {
  .hero--text:not(.hero--home) .hero__grid { padding-block: 48px; }
  .hero--text:not(.hero--home) + .section:not(.section--wash):not(.section--dark):not(.section--flush-top) { padding-top: 48px; }
}

/* --------------------------------------------------------------- kaarten */

/* Een echte witruimte tussen de kaarten, geen aaneengesloten rooster: elke
   kaart krijgt zijn eigen rand en staat los van de buren. */
.grid { display: grid; gap: 20px; }

.grid--cars { grid-template-columns: 1fr; }

@media (min-width: 620px) { .grid--cars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--cars { grid-template-columns: repeat(3, 1fr); } }

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

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

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  position: relative;
  transition: background-color 0.15s ease;
}

.card:hover { background: #fafafa; }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--wash);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.card:hover .card__media img { transform: scale(1.03); }

.card__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-30);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

@media (min-width: 900px) { .card__body { padding: 22px 24px 24px; } }

.card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.card__variant {
  font-size: 0.875rem;
  color: var(--ink-45);
  margin-top: 3px;
  display: block;
}

.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.8125rem;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

.card__specs span { display: inline-flex; align-items: center; }
.card__specs span + span::before {
  content: '';
  width: 3px;
  height: 3px;
  background: var(--ink-30);
  margin-right: 10px;
}

.card__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.card__price {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.card__price-note { font-size: 0.75rem; color: var(--ink-45); font-weight: 400; letter-spacing: 0; }

.card__price-old {
  font-size: 0.875rem;
  color: var(--ink-45);
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 400;
}

.card__cta { font-size: 0.875rem; color: var(--ink-45); }
.card:hover .card__cta { color: var(--ink); }

.card__link { position: absolute; inset: 0; z-index: 1; }

.card--sold .card__media img { filter: grayscale(1); opacity: 0.62; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
}

.badge--line { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.badge--wash { background: var(--wash-2); color: var(--ink-60); }

.card__badges {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 1px;
  z-index: 2;
}

/* ------------------------------------------------------------- kop blokken */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.section-head__text { max-width: 62ch; }
.section-head__text .lede { margin-top: 14px; }

@media (min-width: 900px) { .section-head { margin-bottom: 48px; } }

/* ------------------------------------------------------------------ USPs */

.usps { display: grid; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.usps > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

@media (min-width: 720px) { .usps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .usps--3 { grid-template-columns: repeat(3, 1fr); } .usps--4 { grid-template-columns: repeat(4, 1fr); } }

.usp { background: var(--paper); padding: 28px 24px; }
.section--wash .usp { background: var(--wash); }
.usp__num { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-30); margin-bottom: 14px; }
.usp__title { font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; margin-bottom: 8px; }
.usp__text { font-size: 0.9375rem; color: var(--ink-60); }

/* ---------------------------------------------------------------- cijfers */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stats > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

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

.stat { background: var(--paper); padding: 28px 24px; }
.section--wash .stat { background: var(--wash); }
.section--dark .stats { background: var(--dark-line); border-color: var(--dark-line); }
.section--dark .stat { background: var(--ink); }

.stat__value {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__label { font-size: 0.875rem; color: var(--ink-60); margin-top: 10px; }
.section--dark .stat__label { color: var(--dark-text); }

/* ------------------------------------------------------ tekst + afbeelding */

.split { display: grid; gap: 36px; align-items: center; }

@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .split--flip .split__media { order: -1; }
}

.split__media { aspect-ratio: 4 / 3; background: var(--wash); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Voor logo's en keurmerken: heel laten in plaats van bijsnijden. */
.split__media--passend {
  aspect-ratio: auto;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.split__media--passend img {
  width: auto;
  height: auto;
  max-width: min(100%, 340px);
  max-height: 260px;
  object-fit: contain;
}

/* Het merklogo naast een tekst: groot en heel, op het zwarte vlak waar het
   voor getekend is. */
.split__media--merk {
  aspect-ratio: 16 / 11;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 7%, 64px);
}
.split__media--merk img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
/* Net als in de koptekst: het aangeleverde logo is zwart op transparant en
   wordt op het zwarte vlak omgedraaid naar wit. Een gewone foto niet. */
.split__media--merk img.is-merklogo { filter: invert(1); }

/* --------------------------------------------------------------- galerij */

.gallery { display: grid; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
.gallery > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

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

.gallery figure { margin: 0; aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ team */

.team-grid { display: grid; gap: 40px; }

@media (min-width: 760px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; } }

/* Liggend: de foto's zijn opnames van het team bij de auto's, dus de
   omgeving hoort erbij. Portret zou de persoon half wegsnijden. */
.member__photo { aspect-ratio: 3 / 2; background: var(--wash); overflow: hidden; margin-bottom: 20px; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.024em; }
.member__role { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-top: 6px; }
.member__bio { color: var(--ink-60); margin-top: 14px; font-size: 0.9375rem; }
.member__links { display: flex; gap: 16px; margin-top: 14px; font-size: 0.875rem; }
.member__links a { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.member__links a:hover { border-color: var(--ink); }

/* ----------------------------------------------------------------- reviews */

.reviews { display: grid; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.reviews > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

@media (min-width: 760px) { .reviews--k2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reviews--k3 { grid-template-columns: repeat(3, 1fr); } }

.review { background: var(--paper); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.section--wash .review { background: var(--wash); }
.review__stars { display: flex; gap: 3px; }
.review__stars svg { width: 13px; height: 13px; }
.review__body { font-size: 0.9375rem; color: var(--ink-80); flex: 1; }
.review__meta { font-size: 0.8125rem; color: var(--ink-45); border-top: 1px solid var(--line); padding-top: 14px; }
.review__author { color: var(--ink); font-weight: 500; }

/* Samenvatting van de Google-beoordeling naast de reviewkop. */
.google-score {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line-strong);
  padding: 12px 18px;
  transition: border-color 0.15s ease;
}
.google-score:hover { border-color: var(--ink); }

.google-score__cijfer {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.google-score__tekst { display: flex; flex-direction: column; gap: 4px; }
.google-score__bron { font-size: 0.8125rem; color: var(--ink-45); }

/* --------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.faq__icon { flex: none; width: 14px; height: 14px; margin-top: 5px; position: relative; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--ink); transition: transform 0.2s ease; }
.faq__icon::before { left: 0; right: 0; top: 6.5px; height: 1px; }
.faq__icon::after { top: 0; bottom: 0; left: 6.5px; width: 1px; }
.faq__q[aria-expanded='true'] .faq__icon::after { transform: scaleY(0); }

.faq__a { display: none; padding: 0 0 24px; max-width: 72ch; color: var(--ink-60); font-size: 0.9375rem; }
.faq__a.is-open { display: block; }

/* ----------------------------------------------------------------- filters */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
  margin-bottom: 32px;
}

.toolbar__count { font-size: 0.875rem; color: var(--ink-60); font-variant-numeric: tabular-nums; }

/* Balk boven de filters. Op mobiel klapt het filterblok hieronder in, zodat
   bezoekers meteen bij de auto's komen. De actieve filters blijven wel staan. */
.filterbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  border-block: 1px solid var(--line);
  margin-bottom: 20px;
}

.filterbalk__knop { height: 44px; }
.filterbalk__telling { font-size: 0.875rem; color: var(--ink-60); font-variant-numeric: tabular-nums; }

.filterbalk__aantal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Vanaf tablet staan de filters gewoon open en is de knop overbodig. */
@media (min-width: 900px) {
  .filterbalk__knop { display: none; }
  .filterbalk { border-top: 0; padding-top: 0; }
}

.filters { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; }

@media (min-width: 760px) { .filters { grid-template-columns: repeat(4, 1fr); align-items: end; } }
@media (min-width: 1100px) { .filters { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Mobiel: dicht tenzij opengeklapt. */
@media (max-width: 899px) {
  .filters.filters--enhanced { display: none; margin-bottom: 24px; }
  .filters.filters--enhanced.is-open { display: grid; }
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.input, .select, .textarea {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  border-radius: 0;
  appearance: none;
  transition: border-color 0.15s ease;
}

.textarea { height: auto; min-height: 132px; padding: 13px 14px; line-height: 1.55; resize: vertical; }

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-45); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.input::placeholder, .textarea::placeholder { color: var(--ink-30); }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}

.checkline { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--ink-60); }
.checkline input { margin-top: 3px; accent-color: #000; width: 15px; height: 15px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  font-size: 0.8125rem;
  background: var(--paper);
  cursor: pointer;
}

.chip:hover { border-color: var(--ink); }
.chip--actief { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip--actief:hover { background: var(--ink-80); border-color: var(--ink-80); }

/* ----------------------------------------------------------- autodetailpagina */

.crumbs { font-size: 0.8125rem; color: var(--ink-45); padding-block: 18px; border-bottom: 1px solid var(--line); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin-inline: 8px; color: var(--ink-30); }

.detail { display: grid; gap: 40px; padding-block: 40px; }

@media (min-width: 1000px) {
  .detail { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 56px; padding-block: 56px; align-items: start; }
}

.viewer__main { position: relative; aspect-ratio: 3 / 2; background: var(--wash); overflow: hidden; }
.viewer__main img { width: 100%; height: 100%; object-fit: contain; }

.viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.viewer__nav:hover { background: var(--ink); color: var(--paper); }
.viewer__nav--prev { left: 0; }
.viewer__nav--next { right: 0; }

.viewer__counter {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}

.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); margin-top: 1px; }

@media (min-width: 700px) { .thumbs { grid-template-columns: repeat(8, 1fr); } }

.thumb { aspect-ratio: 4 / 3; background: var(--wash); overflow: hidden; border: 0; padding: 0; cursor: pointer; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity 0.15s ease; }
.thumb:hover img, .thumb.is-active img { opacity: 1; }
.thumb.is-active::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--ink); }

.buybox { border: 1px solid var(--line); position: sticky; top: calc(var(--header-h) + 24px); }
.buybox__head { padding: 24px; border-bottom: 1px solid var(--line); }
.buybox__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.026em; line-height: 1.2; }
.buybox__variant { font-size: 0.9375rem; color: var(--ink-45); margin-top: 6px; }

.buybox__price { padding: 22px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.buybox__price strong { font-size: 2rem; font-weight: 600; letter-spacing: -0.036em; font-variant-numeric: tabular-nums; line-height: 1; }
.buybox__price small { font-size: 0.8125rem; color: var(--ink-45); }

.buybox__actions { padding: 20px 24px; display: grid; gap: 10px; }
.buybox__meta { padding: 18px 24px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-45); }

.speclist { border-top: 1px solid var(--line); }
.speclist__row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.speclist__row dt { color: var(--ink-45); }
.speclist__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Toelichting achter een waarde, bijvoorbeeld de meetmethode. */
.speclist__note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-45);
  margin-top: 2px;
}

.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.spec-grid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

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

.spec { background: var(--paper); padding: 18px 20px; }
.spec__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 7px; }
.spec__value { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.018em; font-variant-numeric: tabular-nums; }

.optionlist { columns: 1; column-gap: 40px; }

@media (min-width: 640px) { .optionlist { columns: 2; } }
@media (min-width: 1000px) { .optionlist { columns: 3; } }

.optionlist li {
  break-inside: avoid;
  list-style: none;
  padding: 8px 0 8px 20px;
  position: relative;
  font-size: 0.9375rem;
  color: var(--ink-60);
  border-bottom: 1px solid var(--line);
}

.optionlist { padding: 0; margin: 0; }

.optionlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 1px;
  background: var(--ink);
}

/* Korte opsomming bovenaan de autopagina. Geen kolommen, zodat de regels
   netjes uitlijnen ook als een punt over twee regels loopt. */
.highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px 32px;
}

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

.highlights li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--ink-80);
}

.highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--ink);
}

.detail-section { padding-block: 44px; border-top: 1px solid var(--line); }
.detail-section__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.024em; margin-bottom: 22px; }

/* ------------------------------------------------------------- formulieren */

.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }

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

.form__note { font-size: 0.8125rem; color: var(--ink-45); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 16px 18px; border: 1px solid var(--ink); font-size: 0.9375rem; }
.notice--ok { background: var(--ink); color: var(--paper); }
.notice--error { border-color: var(--ink); background: var(--wash); }

.contact-grid { display: grid; gap: 48px; }

@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; } }

.contact-list { border-top: 1px solid var(--line); }
.contact-list__row { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.contact-list__row dt { color: var(--ink-45); }
.contact-list__row dd { margin: 0; text-align: right; }
.contact-list__row a:hover { border-bottom: 1px solid var(--ink); }

/* ------------------------------------------------------------------ footer */

.footer { background: var(--ink); color: var(--dark-text); padding-block: 56px 28px; margin-top: 0; }

.footer__grid { display: grid; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--dark-line); }

@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.footer__brand .brand { margin-bottom: 18px; }
.footer__about { font-size: 0.9375rem; max-width: 42ch; }

.footer__title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); margin-bottom: 18px; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: 0.9375rem; }
.footer__list a:hover { color: var(--paper); }

.footer__bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a:hover { color: var(--paper); }

.social { display: flex; gap: 1px; }

.social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dark-line);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.social a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.social svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- whatsapp */

.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wa-fab:hover { background: var(--paper); color: var(--ink); }
.wa-fab svg { width: 24px; height: 24px; }

@media (min-width: 900px) { .wa-fab { right: 28px; bottom: 28px; } }

/* ------------------------------------------------------------- paginering */

.pager { display: flex; align-items: center; justify-content: center; gap: 1px; margin-top: 48px; }

.pager a, .pager span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.pager a:hover { border-color: var(--ink); }
.pager .is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager .is-disabled { color: var(--ink-30); }

/* ------------------------------------------------------------------ leeg */

.empty { border: 1px solid var(--line); padding: 64px 24px; text-align: center; }
.empty__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.022em; margin-bottom: 10px; }
.empty__text { color: var(--ink-60); max-width: 44ch; margin: 0 auto 22px; }

/* ----------------------------------------------------------------- utils */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media print {
  .header, .footer, .wa-fab, .toolbar, .buybox__actions { display: none !important; }
  body { font-size: 12px; }
}

/* Compacte homepage: actuele voorraad komt eerder in beeld. */
.hero--home .hero__grid { padding-block: 28px; gap: 24px; }
.hero--home .h-display { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.08; }
.hero--home .hero__text, .hero--home .lede { font-size: 1rem; margin-block: 16px 20px; }
.hero--home .hero__media { aspect-ratio: 16 / 9; }
.hero--home + .section { padding-top: 32px; }
.filters .field { min-width: 0; }
.filters .input, .filters .select { width: 100%; min-width: 0; }
@media (min-width: 900px) {
  .hero--home .hero__grid { padding-block: 36px; gap: 36px; }
  .hero--home .hero__media { aspect-ratio: 4 / 3; max-height: 320px; }
}
@media (max-width: 480px) {
  .hero--home .hero__media { max-height: 180px; }
  .filters { grid-template-columns: minmax(0, 1fr); }
}