/* ==========================================================================
   Water Tankie — global stylesheet
   Design language: Plus Jakarta Sans + yellow (#3ddc97) + dark (#141414)
   ========================================================================== */

/* ---- Reset & tokens ---- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Toiletzonderafvoer.nl huisstijl — frisse groen-teal (hygiëne, waterbesparend)
     op De-Lo-navy. De tokens heten nog 'yellow' (historisch, uit het Watertankie-
     ontwerp) maar dragen de groene accentkleur, zodat de hele site in één keer
     meekleurt. */
  --yellow: #0b8f6a;        /* primair groen-teal accent (knoppen, iconen) */
  --yellow-600: #087a5a;    /* hover / donkerder accent */
  --hl: #3ddc97;            /* highlight-marker (mint) */
  --ink: #142238;           /* diep navy voor tekst */
  --dark: #232b52;          /* donkere secties (De-Lo navy) */
  --dark-2: #1a2040;        /* footer */
  --bg: #eef6f2;            /* lichte mint-grijstint */
  --card: #ffffff;
  --line: #dbe5e1;
  --muted: #5b6a70;
  --muted-light: rgba(255, 255, 255, 0.62);
  --green: #10b981;         /* mintgroen — 'inbegrepen'-accent */
  --blue: #2c3153;          /* De-Lo navy — 'standaard'-badge */
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --shadow: 0 18px 50px rgba(15, 20, 30, 0.08);
  --shadow-sm: 0 6px 20px rgba(15, 20, 30, 0.06);
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Zelf gehost — variabel latin-subset, dekt gewicht 400 t/m 800 in één bestand.
   Scheelt twee externe verbindingen (fonts.googleapis.com + fonts.gstatic.com)
   en een render-blokkerende stylesheet van derden. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---- Typography helpers ---- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 18px;
}
.section-eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--yellow);
}
.on-dark .section-eyebrow { color: rgba(255,255,255,.65); }

.section-title {
  font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  margin-bottom: 8px;
}

.hl { position: relative; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-yellow {
  background: var(--hl);
  color: var(--ink);
  padding: 0 .18em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 19px 34px;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-yellow { background: var(--yellow); color: #fff; }
.btn-yellow:hover { background: var(--yellow-600); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1da851; }
.btn-whatsapp svg { width: 19px; height: 19px; flex: none; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .92rem;
  transition: gap .15s ease;
}
.arrow-link:hover { gap: 12px; }
.arrow-link svg { width: 15px; height: 15px; }

/* ==========================================================================
   Top bar + header
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 40px;
  overflow: hidden;
}
.topbar-usps { display: flex; gap: 22px; }
.topbar-usps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-usps svg { width: 14px; height: 14px; color: var(--yellow); flex: none; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-right span { white-space: nowrap; }
.topbar-right a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-right a:hover { color: #fff; }
.topbar .quote-link { color: var(--yellow); font-weight: 600; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 78px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}
.logo .logo-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--yellow);
}
.logo .logo-mark svg { width: 22px; height: 22px; }
.logo b { color: var(--ink); }
.logo span { color: var(--yellow-600); }

.main-nav { margin-left: 4px; }
.main-nav > ul { display: flex; gap: 2px; }
.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 13px;
  font-weight: 500;
  font-size: .96rem;
  white-space: nowrap;
  border-radius: 8px;
  transition: background .15s ease;
}
.main-nav > ul > li > a:hover { background: #f2f2f2; }
.main-nav .caret { width: 11px; height: 11px; opacity: .5; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-search {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e9f2ee;
}
.header-search svg { width: 17px; height: 17px; }
.header-phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem;
  white-space: nowrap;
}
.header-phone svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.header-actions .btn { padding: 14px 22px; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: var(--ink);
  border: 0; cursor: pointer;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
}
.nav-toggle span { width: 20px; height: 2px; background: #fff; transition: .2s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, #141a38 0%, #24305e 100%);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(61,220,151,.14), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23ffffff' stroke-opacity='.03' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-water {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(11,17,25,.94) 0%, rgba(11,17,25,.72) 45%, rgba(11,17,25,.35) 100%),
    radial-gradient(140% 120% at 90% 60%, #1f6f5e 0%, #1b2a52 45%, #12172e 80%);
}
.hero .container { position: relative; z-index: 2; }
.hero-inner {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 0 130px;
  max-width: 760px;
}
.hero .rating {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; margin-bottom: 26px;
  color: rgba(255,255,255,.85);
}
.hero .stars { color: var(--yellow); letter-spacing: 2px; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  margin-bottom: 22px;
}
.hero .lead {
  font-size: 1.18rem;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Hero met achtergrondvideo (homepage) ----
   Laagvolgorde: media (0) → scrim (1) → glow/raster (2) → tekst (3).
   .hero-water blijft ongemoeid; die wordt nog door 404 en bedankt gebruikt. */
.hero--video { isolation: isolate; }
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #141a38;
}
.hero-media img,
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
/* De video schuift met een fade over de poster heen zodra hij écht speelt,
   zodat je geen zwart frame of sprong ziet. */
.hero-video { opacity: 0; transition: opacity .9s ease; }
.hero-video.is-playing { opacity: 1; }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* donker links waar de tekst staat, naar rechts opent het beeld */
    linear-gradient(96deg,
      rgba(14,20,40,.93) 0%,
      rgba(14,20,40,.85) 30%,
      rgba(18,26,52,.62) 60%,
      rgba(22,30,60,.44) 100%),
    /* vignet boven/onder: header en USP-balk blijven afsteken */
    linear-gradient(180deg,
      rgba(14,20,40,.55) 0%,
      rgba(14,20,40,0) 34%,
      rgba(14,20,40,.12) 62%,
      rgba(20,28,58,.72) 100%),
    /* merkblauw over het beeld zodat het groen niet wegvalt van de huisstijl */
    linear-gradient(0deg, rgba(28,36,71,.22), rgba(28,36,71,.22));
}
.hero--video::before { z-index: 2; }
.hero--video .container { z-index: 3; }
/* Onzichtbaar op rustige vlakken, maar houdt de tekst leesbaar waar een lichte
   tank of lucht achter de letters langs schuift. */
.hero--video h1,
.hero--video .lead,
.hero--video .hero-trust { text-shadow: 0 1px 18px rgba(10,14,30,.5); }

@media (max-width: 767px) {
  /* Portret-still: tekst loopt over de volle breedte, dus verticaal verlopen. */
  .hero-media img { object-position: 50% 38%; }
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(14,20,40,.78) 0%,
        rgba(14,20,40,.52) 28%,
        rgba(14,20,40,.58) 60%,
        rgba(20,28,58,.88) 100%),
      linear-gradient(0deg, rgba(28,36,71,.12), rgba(28,36,71,.12));
  }
}

/* ---- Search / category yellow band ---- */
.search-band {
  background: linear-gradient(120deg, #0b8f6a 0%, #0a7a5b 100%);
  padding: 30px 0 34px;
}
.search-band h2 {
  font-size: 1.15rem;
  margin-bottom: 18px;
  color: #fff;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff;
  color: var(--ink);
  padding: 14px 18px;
  font-weight: 600;
  font-size: .95rem;
  min-width: 190px;
  justify-content: space-between;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.chip svg { width: 15px; height: 15px; opacity: .6; }
.chip.chip-dark { background: var(--ink); color: #fff; }
.chip.chip-dark svg { opacity: .8; }

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section { padding: 84px 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.section-head .arrow-link { flex: none; }

/* ---- Product cards ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #eef5f1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-media svg.tank-illus { width: 62%; height: 62%; }
.product-media img.tank-photo {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 18px;
  mix-blend-mode: multiply;   /* laat witte studio-achtergrond blenden met de tint */
}
/* klikbare afbeelding -> productpagina */
.product-media a.media-link { display: block; width: 100%; height: 100%; }
.product-media a.media-link img { transition: transform .28s ease; }
.product-card:hover .product-media a.media-link img { transform: scale(1.04); }
.product-body h3 a { transition: color .15s ease; }
.product-body h3 a:hover { color: var(--yellow-600); }
.product-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.product-badge.badge-eco { background: var(--green); }
.product-badge.badge-blue { background: var(--blue); }
.product-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.product-body .desc {
  font-size: .88rem; color: var(--muted);
  margin-bottom: 18px; flex: 1;
}
.price-block { margin-bottom: 18px; }
.price-label { font-size: .78rem; color: var(--muted); }
.price-rows { display: flex; flex-direction: column; gap: 2px; }
.price-rows .row { display: flex; justify-content: space-between; font-size: .86rem; }
.price-rows .row b { font-weight: 700; }
.price-single { font-size: 1.05rem; }
.price-single .from { font-size: .76rem; color: var(--muted); display: block; }
.price-single b { font-size: 1.35rem; }
.product-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.product-links .arrow-link { white-space: nowrap; }
.product-links .muted { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.product-links .muted a { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   Dark "Meer dan verhuur" section
   ========================================================================== */
.dark-section { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.dark-section .accent-block {
  position: absolute; top: 0; left: 0;
  width: 120px; height: 120px; background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.dark-section .accent-block.br {
  top: auto; left: auto; right: 0; bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center;
}
.split-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(61,220,151,.12), transparent 60%),
    radial-gradient(120% 120% at 30% 20%, #1f6f5e, #12172e);
  display: grid; place-items: center;
}
.play-btn {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .2s ease;
}
.play-btn:hover { transform: scale(1.07); }
.play-btn svg { width: 26px; height: 26px; margin-left: 4px; }
.split-body h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 22px; }
.split-body p { color: rgba(255,255,255,.72); margin-bottom: 16px; font-size: .98rem; }
.split-body p a, .split-body p b { color: #fff; }
.split-body p a { text-decoration: underline; }
.usp-list { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 30px; }
.usp-list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.usp-list .tick {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--yellow); color: var(--ink);
  display: grid; place-items: center;
}
.usp-list .tick svg { width: 13px; height: 13px; }

/* ==========================================================================
   Sectors carousel
   ========================================================================== */
.sector-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.sector-track::-webkit-scrollbar { display: none; }
.sector-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.sector-media {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;            /* geen automatische minimumhoogte als flex-item */
  background: linear-gradient(135deg, #cfe6dc, #a9cfc0);
  display: grid; place-items: center;
  overflow: hidden;
}
.sector-media svg { width: 54px; height: 54px; color: rgba(16,22,29,.35); }
/* absoluut i.p.v. in de flow: de intrinsieke hoogte van de foto (500px) mag de
   16/10-verhouding van de kaart niet oprekken — zoals bij .product-media. */
.sector-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sector-body { padding: 22px 22px 26px; }
.sector-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.sector-body p { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.section-nav { display: flex; gap: 10px; }
.section-nav button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  cursor: pointer; display: grid; place-items: center;
  transition: .15s;
}
.section-nav button:hover { border-color: var(--ink); }
.section-nav svg { width: 16px; height: 16px; }

/* ==========================================================================
   Projects (dark)
   ========================================================================== */
.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.project-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
  display: flex; align-items: flex-end;
  padding: 30px;
  color: #fff;
  background: linear-gradient(180deg, rgba(11,17,25,.2), rgba(11,17,25,.9)),
             radial-gradient(120% 120% at 70% 20%, #1f6f5e, #12172e);
}
.project-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(11,17,25,.2), rgba(11,17,25,.9)),
             radial-gradient(120% 120% at 30% 20%, #1f6f5e, #12172e);
}
.project-tags { position: absolute; top: 22px; left: 22px; display: flex; gap: 8px; }
.project-tags span { background: var(--yellow); color: var(--ink); font-size: .72rem; font-weight: 600; padding: 6px 11px; }
.project-card h3 { font-size: 1.4rem; max-width: 420px; }

/* ==========================================================================
   Social section
   ========================================================================== */
.social-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.social-icons { display: flex; gap: 12px; }
.social-icons a {
  width: 42px; height: 42px; border-radius: 50%;
  background: #ececec; display: grid; place-items: center;
  transition: .15s;
}
.social-icons a:hover { background: var(--yellow); }
.social-icons svg { width: 17px; height: 17px; }
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.social-tile {
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden; position: relative;
  background: linear-gradient(135deg, #1f6f5e, #12172e);
  display: grid; place-items: center;
  color: rgba(255,255,255,.9);
}
.social-tile:nth-child(2){ background: linear-gradient(135deg,#1f6f5e,#0a3a33);}
.social-tile:nth-child(3){ background: linear-gradient(135deg,#2b3a5a,#12172e);}
.social-tile:nth-child(4){ background: var(--yellow); color: var(--ink);}
.social-tile svg { width: 46px; height: 46px; opacity: .6; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(120deg, #0f9d75 0%, #0b6f55 55%, #1c2447 100%);
  padding: 78px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 90% 0%, rgba(255,255,255,.14), transparent 55%);
  pointer-events: none;
}
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-inner .section-eyebrow { color: rgba(255,255,255,.7); }
.cta-inner h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); color: #fff; }
.cta-inner .hl { text-decoration-color: rgba(255,255,255,.85) !important; }
.cta-inner p { margin-top: 12px; color: rgba(255,255,255,.85); font-size: 1.05rem; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- CTA-variant met vrijstaande collega-foto + schuin kader (Rentwereld-stijl) ---- */
.cta-band.has-photo { padding-bottom: 0; padding-top: 52px; }
.cta-band.has-photo .cta-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 40px; flex-wrap: nowrap; }
.cta-band.has-photo .cta-text { padding-bottom: 56px; }
.cta-band.has-photo .cta-text .cta-actions { margin-top: 28px; }
.cta-visual { position: relative; align-self: end; min-height: 300px; display: flex; align-items: flex-end; justify-content: center; }
.cta-visual .cta-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; color: #121833; }
.cta-visual .cta-person {
  position: relative; z-index: 2;
  max-height: 440px; width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom;
  align-self: flex-end;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .30));
}

@media (max-width: 900px) {
  .cta-band.has-photo { padding-top: 44px; }
  .cta-band.has-photo .cta-inner { grid-template-columns: 1fr; align-items: center; }
  .cta-band.has-photo .cta-text { padding-bottom: 20px; }
  .cta-visual { min-height: 0; }
  .cta-visual .cta-person { max-height: 320px; }
}

/* ---- 'Hulp nodig?'-blok — blauwe band + witte platte kaarten ---- */
.help-band { position: relative; overflow: hidden; padding: 48px 0; background: linear-gradient(120deg, #0f9d75 0%, #0b6f55 55%, #1c2447 100%); }
.help-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 120% at 88% 0%, rgba(255, 255, 255, .12), transparent 55%); }
.help-head { position: relative; margin-bottom: 26px; max-width: 760px; }
.help-head h2 { color: #fff; font-size: clamp(1.45rem, 2.5vw, 1.95rem); }
.help-head p { color: rgba(255, 255, 255, .85); margin-top: 6px; font-size: .98rem; }
.help-inner { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 48px; }
.help-person { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; flex: none; }
.help-photo {
  width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.help-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.help-person figcaption { text-align: center; line-height: 1.3; }
.help-person figcaption b { display: block; color: #fff; font-size: .98rem; }
.help-person figcaption span { font-size: .84rem; color: rgba(255, 255, 255, .72); }
.help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.help-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 12px;
  padding: 15px 18px; text-decoration: none; color: var(--ink);
  box-shadow: 0 6px 16px rgba(20, 28, 58, .16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.help-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 28, 58, .22); }
.help-ic { flex: none; color: var(--ink); display: grid; place-items: center; }
.help-ic svg { width: 24px; height: 24px; }
.help-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.help-txt b { font-size: .97rem; font-weight: 700; }
.help-txt > span { font-size: .84rem; color: var(--muted); }
.help-arrow { margin-left: auto; color: #b3c6bd; flex: none; display: grid; place-items: center; }
.help-arrow svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .help-inner { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .help-head { text-align: center; margin-left: auto; margin-right: auto; }
  .help-cards { grid-template-columns: 1fr; width: 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--dark-2); color: rgba(255,255,255,.7); padding: 70px 0 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand .logo { color: #fff; margin-bottom: 20px; }
.footer-brand .logo b { color: #fff; }
.footer-brand p { font-size: .9rem; margin-bottom: 18px; max-width: 320px; }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 10px; font-size: .9rem; }
.footer-contact svg { width: 15px; height: 15px; color: var(--yellow); flex: none; margin-top: 4px; }
.footer-col h3 { color: #fff; font-size: .95rem; margin-bottom: 18px; letter-spacing: 0; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul a { font-size: .88rem; transition: color .15s; }
.footer-col ul a:hover { color: var(--yellow); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 24px 0 88px; font-size: .84rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.footer-social a:hover { background: var(--yellow); color: var(--ink); }
.footer-social svg { width: 15px; height: 15px; }

/* ==========================================================================
   Huren page — layout with filter sidebar
   ========================================================================== */
.page-hero {
  background: var(--dark);
  color: #fff;
  padding: 64px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 100% at 85% 0%, rgba(61,220,151,.10), transparent 55%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 22px; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 18px; max-width: 720px; }
.page-hero p { color: rgba(255,255,255,.75); max-width: 640px; font-size: 1.05rem; }

.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 28px 44px; justify-content: space-between; padding-block: 20px; }
.trust-strip li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .92rem; }
.trust-strip svg { width: 20px; height: 20px; color: var(--yellow-600); flex: none; }

.catalog { padding: 56px 0 84px; }
.catalog-layout { display: grid; grid-template-columns: 268px 1fr; gap: 34px; align-items: start; }
.filter-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; position: sticky; top: 96px;
}
.filter-panel .filter-titel { font-size: 1.05rem; font-weight: 700; margin: 0; }
.filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.filter-reset { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--yellow-600); padding: 0; }
.filter-reset:hover { text-decoration: underline; }
.filter-reset[hidden] { display: none; }
.catalog-empty { padding: 40px 4px; color: var(--muted); font-size: .98rem; }
.catalog-empty a { color: var(--yellow-600); font-weight: 600; text-decoration: underline; }
.catalog-empty[hidden] { display: none; }
.filter-group { border-top: 1px solid var(--line); padding: 16px 0; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group .filter-kop { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; }
.filter-option { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .9rem; cursor: pointer; }
.filter-option input { width: 17px; height: 17px; accent-color: var(--yellow-600); }
.filter-option .count { margin-left: auto; color: var(--muted); font-size: .8rem; }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cat-tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: .9rem; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cat-tabs a:hover { border-color: var(--ink); }
.cat-tabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.catalog-main .catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 14px;
}
.catalog-toolbar .result-count { font-weight: 600; font-size: 1rem; letter-spacing: 0; line-height: 1.4; }
.catalog-toolbar select { padding: 11px 16px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; background: #fff; font-size: .9rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 44px; }
.pagination a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; font-weight: 600; border-radius: 8px;
  transition: .15s;
}
.pagination a:hover { border-color: var(--ink); }
.pagination a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- FAQ ---- */
.faq { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  padding: 22px 44px 22px 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--yellow-600); transition: transform .2s;
}
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 0 22px; color: var(--muted); font-size: .96rem; }

/* ---- feature callouts ---- */
.feature-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px;
}
.feature-card .ficon {
  width: 54px; height: 54px; background: var(--yellow); color: var(--ink);
  display: grid; place-items: center; margin-bottom: 20px;
}
.feature-card .ficon svg { width: 26px; height: 26px; }
.feature-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.feature-card p { color: var(--muted); font-size: .95rem; }

/* ---- steps ---- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; position: relative;
}
.step .num {
  font-size: 2.4rem; font-weight: 800; color: var(--yellow);
  line-height: 1; margin-bottom: 14px; letter-spacing: -.04em;
}
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .9rem; }

/* ---- why list ---- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.why-grid li { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; }
.why-grid .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; }
.why-grid .tick svg { width: 13px; height: 13px; }

/* ---- assortiment intro columns ---- */
.assort-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.assort-col h3 { font-size: 1.15rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.assort-col h3 svg { width: 20px; height: 20px; color: var(--yellow-600); }
.assort-col p { color: var(--muted); font-size: .92rem; }

.bg-white { background: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  /* Hier stond de telefoon verborgen, met als reden dat hij "al in de topbar"
     zou staan. Dat is niet zo — de topbar bevat alleen de USP's, en onder
     980px verdwijnt hij helemaal. Mobiel had daardoor nergens een belknop,
     terwijl de offerteknop daar óók wegvalt (zie 620px verderop): dan blijft
     er geen enkele directe actie in de header over.
     Vanaf hier wordt het dus een compacte icoonknop naast het hamburgermenu.
     Het nummer zelf verdwijnt visueel maar blijft in het aria-label staan, dus
     de link houdt een naam voor schermlezers. */
  .header-phone {
    width: 44px; height: 44px; flex: none;
    justify-content: center;
    gap: 0;
    background: var(--yellow);
    color: #fff;
  }
  .header-phone svg { width: 19px; height: 19px; color: #fff; }
  .header-phone-label { display: none; }
}
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media { aspect-ratio: 16/9; }
}
@media (max-width: 980px) {
  .topbar { display: none; }
  /* .header-phone blijft staan: dit is vanaf hier de enige directe actie in
     de header naast het menu. */
  .main-nav, .header-search { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.open {
    display: block; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 24px;
  }
  .main-nav.open ul { flex-direction: column; gap: 0; }
  /* display:flex + volle breedte: anders is elke menuregel maar zo breed als
     zijn tekst en lopen de scheidingslijnen ongelijk. */
  .main-nav.open > ul > li > a { display: flex; width: 100%; padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  /* Offerteknop onderaan het menu: de header-CTA verdwijnt op mobiel, dus
     hier blijft een tikbare route naar de offerte-pop-up bestaan. */
  .main-nav.open .nav-cta { display: block; padding-top: 16px; }
  .main-nav.open > ul > li.nav-cta > a,
  .main-nav.open > ul > li.nav-cta > button { display: inline-flex; width: 100%; justify-content: center; padding: 15px 22px; border-bottom: 0; border-radius: 0; font-weight: 600; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .projects-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .feature-cols { grid-template-columns: 1fr; }
  .steps-grid, .assort-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .product-grid, .catalog-grid { grid-template-columns: 1fr; }
  /* Footer: drie linkkolommen naast elkaar in twee kolommen i.p.v. 24 links
     onder elkaar (dat was 4,5 schermhoogte footer). Merkblok over de volle breedte. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col ul li { margin-bottom: 8px; }
  .footer-col ul a { font-size: .84rem; }
  .social-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 60px 0; }
  .hero-inner { min-height: 460px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   WaterTanking — content components (DeLo copy-deck)
   ========================================================================== */

/* logo wordmark */
.logo .logo-word { letter-spacing: -.02em; }
.logo-sub { font-size: .62rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

/* hero trust line (vervangt de review-score) */
.hero-trust {
  display: inline-flex; flex-wrap: wrap; gap: 10px 18px;
  font-size: .92rem; color: rgba(255,255,255,.82); margin-bottom: 26px;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-trust svg { width: 15px; height: 15px; color: var(--hl); }

/* USP-balk (4 blokken onder de hero) */
.usp-strip-wrap { background: #fff; border-bottom: 1px solid var(--line); }
.usp-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp-block { display: flex; gap: 16px; padding: 30px 26px; border-left: 1px solid var(--line); }
.usp-block:first-child { border-left: 0; }
.usp-block .ico { width: 46px; height: 46px; flex: none; border-radius: 11px; background: #e3f4ee; color: var(--yellow-600); display: grid; place-items: center; }
.usp-block .ico svg { width: 23px; height: 23px; }
.usp-block .usp-kop { font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 5px; }
.usp-block p { font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* product-grid 3 koloms variant + rijkere kaarten */
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cat-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: .86rem; color: var(--muted); }
.cat-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.product-badge.badge-schoon { background: #0b8f6a; }
.product-badge.badge-vuil   { background: #4a5b66; }
.product-badge.badge-trailer{ background: #1f6f5e; }
.product-badge.badge-new    { background: var(--hl); color: var(--ink); }
.product-badge.badge-right  { left: auto; right: 12px; }
.product-media.media-vuil   { background: linear-gradient(135deg, #dfe6ea, #c3ccd2); }

.product-bullets { margin: 2px 0 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.product-bullets li { display: flex; gap: 10px; font-size: .87rem; color: #41505a; line-height: 1.45; }
.product-bullets li svg { width: 15px; height: 15px; color: var(--yellow-600); flex: none; margin-top: 3px; }
.spec-line { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.spec-line .ph { display: inline-block; border: 1px dashed #b3c4bd; color: #7a8985; border-radius: 5px; padding: 1px 8px; font-size: .76rem; }
.spec-line .amount { color: var(--ink); font-weight: 800; font-size: 1rem; }
.card-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.card-ctas .btn { flex: 1 1 96px; }
.btn-sm { padding: 12px 16px; font-size: .9rem; }

/* toepassingen — statisch 4-koloms grid */
.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* klikbare sector-kaarten (link naar sector-landingspagina) */
a.sector-card { color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
a.sector-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sector-card .sector-body { display: flex; flex-direction: column; flex: 1; }
.sector-media svg { color: var(--yellow-600); opacity: .92; }
.sector-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--yellow-600); }
.sector-link svg { width: 15px; height: 15px; transition: transform .15s ease; }
a.sector-card:hover .sector-link svg { transform: translateX(4px); }
.sector-media img { transition: transform .28s ease; }
a.sector-card:hover .sector-media img { transform: scale(1.04); }

/* SEO-leesblok */
.reading-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; }
.reading-prose p { margin-bottom: 16px; color: #33434d; }
.reading-prose p strong { color: var(--ink); }
.why-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 32px; position: sticky; top: 100px; }
.why-box h3 { font-size: 1.2rem; margin-bottom: 20px; }
.why-box ul li { display: flex; gap: 13px; margin-bottom: 15px; font-size: .92rem; color: rgba(255,255,255,.86); line-height: 1.5; }
.why-box ul li:last-child { margin-bottom: 0; }
.why-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.why-box .tick svg { width: 12px; height: 12px; }
.why-box b { color: #fff; }

/* brand-panel in de 'Over Watertankie' media */
.brand-panel { text-align: center; color: #fff; padding: 40px; }
.brand-panel .bp-mark { width: 84px; height: 84px; margin: 0 auto 20px; background: var(--yellow); display: grid; place-items: center; }
.brand-panel .bp-mark svg { width: 46px; height: 46px; color: #fff; }
.brand-panel .bp-big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.brand-panel .bp-sub { color: rgba(255,255,255,.72); margin-top: 6px; }

/* video-reel (verticale YouTube Short) in de 'Over Watertankie' media */
.split-media.video-stage {
  aspect-ratio: auto;
  background: none;          /* blauwe stage-achtergrond weg */
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.video-reel {
  position: relative;
  width: 100%;
  max-width: 288px;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  border: 4px solid rgba(255,255,255,.1);
}
.video-reel iframe,
.video-reel .video-el { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; cursor: pointer; padding: 0;
  background: rgba(4, 12, 20, .14);
  display: grid; place-items: center;
  transition: background .15s ease;
}
.video-play:hover { background: rgba(4, 12, 20, .28); }
.video-play .pbtn {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--yellow); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transition: transform .15s ease;
}
.video-play:hover .pbtn { transform: scale(1.09); }
.video-play .pbtn svg { width: 30px; height: 30px; margin-left: 3px; }
.video-reel.playing .video-play { display: none; }
.video-caption {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font-weight: 600; font-size: .95rem;
}
.video-caption .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 4px rgba(61,220,151,.25); }

/* offerteformulier */
.offer-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.offer-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; }
.field label .req { color: #c0392b; }
.field input, .field textarea, .field select {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .95rem; background: #fff; color: var(--ink);
}
.field input, .field select { height: 48px; }
.field textarea { resize: vertical; min-height: 90px; }
/* iOS Safari zoomt automatisch in zodra een veld kleiner is dan 16px, en ná die
   zoom kan de bezoeker de pagina zijwaarts slepen. Op touchformaten dus minimaal 16px. */
@media (max-width: 1024px) {
  .field input, .field textarea, .field select,
  .catalog-toolbar select { font-size: 16px; }
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(11,143,106,.18); }
.offer-form .btn { width: 100%; margin-top: 6px; }
.offer-form .btn[disabled] { opacity: .65; cursor: progress; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 12px; text-align: center; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fdecec; border: 1px solid #f3c2c2; color: #9b1c1c; font-size: .88rem; line-height: 1.5; }
.form-error[hidden] { display: none; }
.turnstile-slot { margin-top: 16px; }
.trust-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 30px; }
.trust-box h3 { font-size: 1.35rem; margin-bottom: 22px; }
.trust-box ul li { display: flex; gap: 12px; align-items: center; margin-bottom: 15px; font-weight: 500; }
.trust-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; }
.trust-box .tick svg { width: 12px; height: 12px; }
.trust-box .contact-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.trust-box .contact-block li { display: flex; gap: 11px; margin-bottom: 11px; font-size: .9rem; font-weight: 400; color: rgba(255,255,255,.82); }
.trust-box .contact-block svg { width: 15px; height: 15px; color: var(--hl); flex: none; margin-top: 3px; }

/* placeholder-hint (aan te leveren door DeLo) */
.ph-inline { display: inline-block; border: 1px dashed #b3c4bd; color: #7a8985; border-radius: 5px; padding: 0 7px; font-size: .82rem; }

@media (max-width: 1080px) {
  .reading-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-box { position: static; }
  .offer-grid { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-strip { grid-template-columns: repeat(2, 1fr); }
  .usp-block:nth-child(3) { border-left: 0; }
  .usp-block { border-top: 1px solid var(--line); }
  .usp-block:nth-child(1), .usp-block:nth-child(2) { border-top: 0; }
}
@media (max-width: 900px) {
  .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .usp-strip { grid-template-columns: 1fr; }
  .usp-block { border-left: 0; }
  .usp-block:nth-child(2) { border-top: 1px solid var(--line); }
  .sector-grid { grid-template-columns: 1fr; }
  .product-grid.cols-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contactpagina — contactkaarten + kaart
   ========================================================================== */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 34px; }
.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.contact-card .ci-ico {
  width: 54px; height: 54px; margin: 0 auto 16px;
  background: #e3f4ee; color: var(--yellow-600);
  display: grid; place-items: center; border-radius: 12px;
}
.contact-card .ci-ico svg { width: 26px; height: 26px; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.contact-card p { color: var(--muted); font-size: .95rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.map-embed iframe { width: 100%; height: 380px; border: 0; }

/* ==========================================================================
   Blog — overzicht + kaarten
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-media { position: relative; aspect-ratio: 16 / 10; background: #eef5f1; overflow: hidden; }
.blog-media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; mix-blend-mode: multiply; }
.blog-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--ink); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
}
.blog-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.blog-body h2, .blog-body h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.25; }
.blog-body p { font-size: .9rem; color: var(--muted); margin-bottom: 18px; flex: 1; }
.blog-card .arrow-link { color: var(--ink); }
.blog-card .muted-link { color: var(--muted); font-weight: 600; font-size: .9rem; }
.blog-card.is-soon { opacity: .92; }
.blog-card.is-soon .blog-tag { background: var(--yellow-600); }

/* ==========================================================================
   Blog-artikel
   ========================================================================== */
.article { padding: 56px 0 80px; }
.article-head { max-width: 760px; margin: 0 auto 34px; }
.article-head .breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 20px; }
.article-head .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.article-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body .lead-p { font-size: 1.2rem; color: var(--ink); margin-bottom: 28px; line-height: 1.55; }
.article-body h2 { font-size: 1.5rem; margin: 34px 0 12px; }
.article-body p { color: #33434d; margin-bottom: 16px; line-height: 1.7; }
.article-body strong { color: var(--ink); }
.article-list { margin: 6px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.article-list li { position: relative; padding-left: 26px; color: #33434d; line-height: 1.6; }
.article-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 3px; background: var(--yellow);
}
.callout {
  background: #e3f4ee; border-left: 4px solid var(--yellow);
  border-radius: 10px; padding: 22px 24px; margin: 26px 0; color: #234;
  line-height: 1.6;
}
.article-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-top: 40px; padding: 30px 32px;
  background: var(--dark); color: #fff; border-radius: var(--radius);
}
.article-cta > div { flex: 1 1 320px; min-width: 0; }
.article-cta .btn { flex: none; }
.article-cta h3 { font-size: 1.3rem; margin-bottom: 6px; }
.article-cta p { color: rgba(255,255,255,.75); }

@media (max-width: 1080px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-cta { flex-direction: column; align-items: flex-start; }
  .article-cta > div { flex: 0 0 auto; }
}

/* ==========================================================================
   Mobiele polish
   ========================================================================== */
@media (max-width: 980px) {
  .site-header .container { gap: 12px; }
  /* header-CTA behouden op tablet, maar compacter. min-height houdt hem op
     dezelfde 44px als de belknop en het hamburgermenu ernaast — zonder dat
     zakt hij naar 41px en staan de drie net niet gelijk. */
  .header-actions .btn { padding: 13px 18px; font-size: .92rem; min-height: 44px; }
}
@media (max-width: 620px) {
  .container { padding-inline: 18px; }
  /* sectiekop: titel + arrow-link onder elkaar i.p.v. geperst naast elkaar */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* highlight mag afbreken op smalle schermen (voorkomt afkappen) */
  .hl { white-space: normal; }
  /* Redundante header-CTA verbergen op mobiel; pagina's zonder hamburgermenu
     (bedankt.html) houden hun knop via .keep-on-mobile.
     Bewust GEEN :has(): dat ontbreekt in Firefox <121 en oudere Safari/Chrome,
     waardoor de knop daar bleef staan en de header vanaf 360px horizontaal overliep. */
  .header-actions .btn:not(.keep-on-mobile) { display: none; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.5rem); line-height: 1.18; }
  .hero .lead { font-size: 1.02rem; line-height: 1.7; }
  .hero-kh { margin-top: 28px; padding-top: 22px; }
  .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .section-title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .hero-ctas { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .cta-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .btn { padding: 16px 22px; }
  .map-embed iframe { height: 300px; }
  .article-body .lead-p { font-size: 1.08rem; }
  .split-media.video-stage { padding: 0; }
  .video-reel { max-width: 250px; }
}
@media (max-width: 400px) {
  .logo { font-size: 1.15rem; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .hero-inner { padding: 70px 0 90px; }
  /* de enige header-knop die mobiel blijft staan, moet ook op 320px passen */
  .header-actions .btn.keep-on-mobile { padding: 11px 14px; font-size: .85rem; }
}

/* ==========================================================================
   Productpagina (PDP) — Rentwereld-indeling in Watertankie-huisstijl
   ========================================================================== */
.pdp { padding: 40px 0 30px; }
.pdp .breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 26px; }
.pdp .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.pdp-top { display: grid; grid-template-columns: 1.02fr 1fr; gap: 50px; align-items: start; }

/* ---- galerij (linkerkolom) ---- */
.pdp-gallery { position: sticky; top: 96px; }
.pdp-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  overflow: hidden;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: contain; padding: 34px; mix-blend-mode: multiply; }
.pdp-stage .product-badge { z-index: 2; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.pdp-thumb {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; padding: 0;
  display: grid; place-items: center; position: relative;
  transition: border-color .15s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.pdp-stage.is-photo img,
.pdp-thumb.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.pdp-thumb:hover { border-color: #b3cdc2; }
.pdp-thumb.active { border-color: var(--yellow-600); box-shadow: 0 0 0 2px rgba(11,143,106,.18); }
.pdp-thumb.is-empty {
  cursor: default; color: #93a4a0; font-size: .7rem; font-weight: 600; text-align: center;
  background: repeating-linear-gradient(135deg, #f3f8f6, #f3f8f6 8px, #eef4f1 8px, #eef4f1 16px);
}
.pdp-gallery-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.pdp-gallery-links a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links a:hover { color: var(--yellow-600); }
.pdp-gallery-links svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }

/* ---- samenvatting (rechterkolom) ---- */
.pdp-summary h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 14px; }
.pdp-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .82rem; color: var(--yellow-600); margin-bottom: 16px; }
.pdp-eyebrow .tag { color: #fff; padding: 6px 11px; font-size: .72rem; border-radius: 5px; }
.pdp-eyebrow .tag.t-schoon { background: #0b8f6a; }
.pdp-eyebrow .tag.t-vuil { background: #4a5b66; }
.pdp-eyebrow .tag.t-trailer { background: #1f6f5e; }
.pdp-eyebrow .tag.t-osmose { background: #1f6f5e; }
.pdp-trust { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 22px; line-height: 1.6; }
.pdp-trust .stars { color: var(--yellow); letter-spacing: 1px; }
.pdp-trust b { color: var(--ink); font-weight: 700; }
.pdp-lead { font-size: 1.05rem; color: #33434d; margin-bottom: 22px; }

.pdp-key { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.pdp-key li { display: flex; gap: 12px; font-size: .96rem; color: #33434d; line-height: 1.5; }
.pdp-key .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.pdp-key .tick svg { width: 13px; height: 13px; }
.pdp-key b { color: var(--ink); }

.pdp-buy {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  padding: 26px 26px 28px; margin-bottom: 22px;
}
.pdp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pdp-price .from { font-size: .82rem; color: var(--muted); }
.pdp-price .amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pdp-price .unit { font-size: .95rem; color: var(--muted); font-weight: 600; }
.pdp-price-note { font-size: .82rem; color: var(--muted); margin-bottom: 20px; }
.pdp-buy-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-buy-row .btn { flex: 1 1 170px; }
.pdp-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.pdp-qty button { width: 44px; height: 52px; border: 0; background: #f3f8f6; font-size: 1.2rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.pdp-qty button:hover { background: #e6f1ec; }
.pdp-qty input { width: 46px; height: 52px; border: 0; text-align: center; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); -moz-appearance: textfield; }
.pdp-qty input::-webkit-outer-spin-button, .pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-term { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-term svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
/* white-space normal: de knoptekst moet op smalle telefoons kunnen afbreken */
.pdp-whatsapp { width: 100%; margin-top: 12px; white-space: normal; line-height: 1.3; }
.pdp-whatsapp-note { font-size: .82rem; color: var(--muted); margin-top: 9px; text-align: center; }

.pdp-mini-usps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.pdp-mini-usps li { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 500; color: var(--ink); }
.pdp-mini-usps svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }

/* ---- omschrijving + specificaties ---- */
.pdp-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; align-items: start; }
.pdp-prose h2 { font-size: 1.5rem; margin-bottom: 14px; }
.pdp-prose p { color: #33434d; margin-bottom: 15px; line-height: 1.7; }
.pdp-prose strong { color: var(--ink); }

.spec-table {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; position: sticky; top: 96px;
}
.spec-table h3 { font-size: 1.1rem; padding: 20px 24px; background: var(--dark); color: #fff; }
.spec-table dl { margin: 0; }
.spec-table .spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 24px; border-top: 1px solid var(--line); font-size: .92rem; }
.spec-table .spec-row dt { color: var(--muted); flex: none; }
.spec-table .spec-row dd { font-weight: 600; color: var(--ink); text-align: right; }

/* ---- standaard geleverd ---- */
.included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.included-grid li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; color: #33434d; line-height: 1.5; }
.included-grid .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.included-grid .tick svg { width: 13px; height: 13px; }
.included-grid b { color: var(--ink); }

/* ---- accessoires / opties ---- */
.acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.acc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease;
}
.acc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.acc-card .acc-ico { width: 50px; height: 50px; border-radius: 12px; background: #e3f4ee; color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 16px; }
.acc-card .acc-ico svg { width: 25px; height: 25px; }
.acc-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.acc-card p { font-size: .88rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 1080px) {
  .pdp-top { grid-template-columns: 1fr; gap: 34px; }
  .pdp-gallery { position: static; }
  .pdp-detail-grid { grid-template-columns: 1fr; gap: 34px; }
  .spec-table { position: static; }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .included-grid { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: 1fr; }
  .pdp-mini-usps { grid-template-columns: 1fr; }
  .pdp-buy-row .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Offerte-modal (pop-up) — herbruikbaar over productpagina's
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 20, 40, .62);
  display: none; align-items: flex-start; justify-content: center;
  padding: 44px 20px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  position: relative; width: 100%; max-width: 620px; margin: auto;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  padding: 34px;
  animation: modalIn .22s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #eef4f1; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease;
}
.modal-close:hover { background: #dfeae5; }
.modal-head { margin-bottom: 20px; padding-right: 44px; }
.modal-head .section-eyebrow { margin-bottom: 8px; }
.modal-head h2 { font-size: 1.5rem; margin-bottom: 8px; }
.modal-head p { color: var(--muted); font-size: .95rem; }
.modal-product {
  display: flex; align-items: center; gap: 12px;
  background: #eef6f2; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 20px; font-weight: 600; font-size: .95rem; color: var(--ink);
}
.modal-product .product-badge { position: static; border-radius: 5px; }
.modal .offer-form { border: 0; padding: 0; box-shadow: none; }

@media (max-width: 620px) {
  .modal-overlay { padding: 16px; }
  .modal { padding: 24px 22px; }
}

/* ==========================================================================
   Over ons — intro + fotomozaïek, waarden, beloften, stats, team
   ========================================================================== */
.about-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.about-intro h2 { font-size: clamp(2rem, 4vw, 3rem); }
.about-intro .intro-copy p { color: #33434d; margin-bottom: 14px; line-height: 1.7; }
.about-intro .intro-copy p:last-child { margin-bottom: 0; font-weight: 600; color: var(--ink); }

/* Over ons — rustige feature-foto + stat (vervangt het mozaïek) */
.about-feature { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 32px; margin-top: 44px; align-items: center; }
.about-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-feature-side { display: flex; flex-direction: column; gap: 22px; }
.about-feature-side .stat-tile { border-radius: var(--radius); }
.about-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.about-note h2 { font-size: 1.2rem; margin-bottom: 10px; }
.about-note p { color: #33434d; line-height: 1.65; }
.about-note p b { color: var(--ink); }
@media (max-width: 900px) {
  .about-feature { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; }
}

.about-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 16px; margin-top: 44px; }
.about-mosaic > * { border-radius: var(--radius); overflow: hidden; position: relative; }
.about-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-mosaic .contain { background: #eef5f1; }
.about-mosaic .contain img { object-fit: contain; padding: 16px; mix-blend-mode: multiply; }
.mos-tall { grid-row: span 2; }
.mos-big { grid-column: span 2; grid-row: span 2; }
.stat-tile {
  background: linear-gradient(150deg, #0f9d75, #0b6f55);
  color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center;
}
.stat-tile .big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat-tile .lbl { margin-top: 8px; font-weight: 600; opacity: .95; }

/* Daarom Watertankie — waardenkolommen */
.values-head { text-align: center; margin-bottom: 40px; }
.values-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.value-col { border-top: 2px solid var(--yellow); padding-top: 18px; }
.value-col h3 { font-size: 1.12rem; margin-bottom: 10px; }
.value-col p { color: var(--muted); font-size: .92rem; line-height: 1.55; }

/* Stats-rij */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 40px; border-top: 1px solid var(--line); }
.stat-item .num { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--yellow); letter-spacing: -.03em; line-height: 1; }
.stat-item .lbl { margin-top: 8px; color: var(--muted); font-weight: 500; }

/* Ons team */
.team-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.team-layout .team-block { max-width: none; }
.team-photo { margin: 0; }
.team-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .team-layout { grid-template-columns: 1fr; gap: 30px; }
}
.team-block { max-width: 720px; }
.team-block p { color: #33434d; margin-bottom: 16px; line-height: 1.7; }

@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 24px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .about-mosaic { grid-template-columns: repeat(2, 1fr); }
  .mos-big { grid-column: span 2; }
}
@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
  /* minmax(0,1fr) i.p.v. 1fr: anders kan de kolom niet kleiner worden dan zijn
     min-content ("30.000 L") en duwt hij de rij buiten het scherm. */
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item .num { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .about-mosaic { grid-auto-rows: 130px; }
}

/* ==========================================================================
   Zwevende WhatsApp-knop — rechtsonder op elke pagina (opgebouwd in main.js)
   ========================================================================== */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; /* onder de offerte-modal (200) */
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: 15px 22px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(20, 28, 58, .3);
  transition: transform .15s ease, background .15s ease;
}
.wa-float:hover { transform: translateY(-2px); background: #1da851; }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* ==========================================================================
   Toiletzonderafvoer.nl — extra conversiecomponenten
   Toegevoegd bovenop het Watertankie-ontwerp. Alles hergebruikt de bestaande
   tokens (--yellow = groen accent, --dark = navy) zodat de look gelijk blijft.
   ========================================================================== */

/* ---- logo: ".nl" klein achter het woordmerk ---- */
.logo .logo-tld { font-style: normal; font-weight: 600; font-size: .68em; color: var(--muted); margin-left: 1px; letter-spacing: 0; }
.footer-brand .logo .logo-tld { color: rgba(255,255,255,.55); }

/* ---- badges per categorie (kaarten, PDP-galerij, modal) ---- */
.product-badge.badge-vacuum    { background: #0b8f6a; }
.product-badge.badge-standaard { background: #2c3153; }
.product-badge.badge-luxe      { background: #b43165; }
.product-badge.badge-miva      { background: #4a5b66; }
.product-badge.badge-keuze     { background: #3ddc97; color: var(--ink); }
.pdp-eyebrow .tag.t-vacuum    { background: #0b8f6a; }
.pdp-eyebrow .tag.t-standaard { background: #2c3153; }
.pdp-eyebrow .tag.t-luxe      { background: #b43165; }
.pdp-eyebrow .tag.t-miva      { background: #4a5b66; }

/* capaciteitsregel op productkaarten (gasten · toiletten · urinoirs) */
.cap-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); margin: -8px 0 14px; }
.cap-line span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cap-line svg { width: 15px; height: 15px; color: var(--yellow-600); flex: none; }

/* ---- keuzehulp: "Hoeveel gasten?" → aanbevolen wagen ---- */
.keuzehulp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.keuzehulp .kh-kop { font-size: 1.15rem; line-height: 1.2; margin-bottom: 6px; }
.keuzehulp > p { color: var(--muted); font-size: .92rem; margin-bottom: 16px; }
.kh-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kh-row + .kh-row { margin-top: 10px; }
.kh-label { width: 100%; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 -2px; }
.kh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: .92rem; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.kh-btn:hover, .kh-btn.active { border-color: var(--yellow-600); color: var(--yellow-600); background: #e3f4ee; transform: translateY(-1px); }
.kh-btn svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
/* variant in de donkere hero */
.hero-kh { margin-top: 30px; }
.hero-kh p { font-size: .86rem; color: rgba(255,255,255,.72); margin-bottom: 10px; font-weight: 600; }
.hero-kh .kh-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.hero-kh .kh-btn svg { color: var(--hl); }
.hero-kh .kh-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-kh .kh-btn:hover svg { color: var(--yellow-600); }

/* ---- vergelijkingstabel (alle wagens naast elkaar) ---- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; min-width: 900px; font-size: .9rem; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--dark); color: #fff; font-weight: 700; font-size: .85rem; white-space: nowrap; position: sticky; top: 0; }
.compare thead th a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.compare thead th a:hover { text-decoration-color: #fff; }
.compare thead th small { display: block; font-weight: 500; color: rgba(255,255,255,.65); font-size: .74rem; margin-top: 2px; }
.compare tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; background: #f7faf8; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .ok { color: var(--yellow-600); font-weight: 700; }
.compare .no { color: #9b1c1c; font-weight: 700; }
.compare .hi { background: #e3f4ee; }
/* gemarkeerde kolom in de kop: donkere kop blijft leesbaar, groen accent i.p.v. mint */
.compare thead th.hi { background: var(--yellow-600); color: #fff; }
.compare thead th.hi a { color: #fff; }
.compare thead th.hi small { color: rgba(255,255,255,.8); }
.compare tfoot td { padding: 14px 16px; border-top: 1px solid var(--line); }
.compare tfoot .btn { padding: 11px 14px; font-size: .85rem; width: 100%; }
.compare-hint { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin-top: 10px; }
.compare-hint svg { width: 15px; height: 15px; }

/* ---- plus- en minpunten (Coolblue-patroon), eerlijk per product ---- */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 30px; }
.proscons > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.proscons h3 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.proscons h3 .pc-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1rem; line-height: 1; font-weight: 800; }
.proscons .pros h3 .pc-ico { background: var(--yellow); }
.proscons .cons h3 .pc-ico { background: #b45309; }
.proscons li { display: flex; gap: 10px; font-size: .92rem; color: #33434d; margin-bottom: 9px; line-height: 1.5; }
.proscons li:last-child { margin-bottom: 0; }
.proscons li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.proscons .pros li svg { color: var(--yellow-600); }
.proscons .cons li svg { color: #b45309; }

/* ---- "Wat regel je zelf op locatie?" — stroom / water / afvoer / ruimte ---- */
.checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.check-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.check-card .ci { width: 46px; height: 46px; border-radius: 11px; background: #e3f4ee; color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 14px; }
.check-card .ci svg { width: 23px; height: 23px; }
.check-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.check-card p { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.check-card p b { color: var(--ink); }

/* optionele/apart berekende posten: grijze tick i.p.v. groene */
.included-grid.is-optional .tick { background: var(--line); color: var(--muted); }
/* specificatieblad-knop in de galerijlinks: als link opgemaakt */
.pdp-gallery-links button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links button:hover { color: var(--yellow-600); }
.pdp-gallery-links button svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
/* header-CTA als <button> (opent de modal) — zelfde maat als de link-variant */
.header-actions button.btn { min-height: 44px; }

/* ---- "Standaard inbegrepen"-strip (schoonmaak, toiletpapier, levering) ---- */
.included-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.included-strip li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; font-size: .92rem; }
.included-strip .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; }
.included-strip .tick svg { width: 13px; height: 13px; }
.on-dark .included-strip li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }

/* ---- reviewbadge (alleen tonen met een écht, verifieerbaar cijfer) ---- */
.review-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.review-badge .stars { color: #f5b301; letter-spacing: 1px; font-size: .95rem; }
.review-badge .g { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 1px solid var(--line); font-weight: 800; font-size: .8rem; color: #4285f4; }
.review-badge span.muted { color: var(--muted); font-weight: 500; }
.hero .review-badge { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; margin-bottom: 22px; }
.hero .review-badge span.muted { color: rgba(255,255,255,.7); }

/* ---- sticky CTA-balk op productpagina's (mobiel/tablet) ---- */
.pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; /* onder de modal (200), boven de WhatsApp-knop (90 → verschuift) */
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(20, 28, 58, .12);
}
.pdp-sticky.is-visible { display: flex; }
.pdp-sticky .sticky-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pdp-sticky .sticky-price b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pdp-sticky .sticky-price span { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.pdp-sticky .btn { flex: 1; padding: 14px 12px; font-size: .92rem; }
.pdp-sticky .btn-ghost { flex: 0 0 auto; padding: 14px 16px; }
@media (min-width: 1081px) { .pdp-sticky { display: none !important; } }
body.has-sticky-cta .wa-float { bottom: 86px; }

/* ---- "Direct huren?"-blok in de header-hero van categorieën (Boels-patroon) ---- */
.direct-box { display: inline-flex; align-items: center; gap: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 14px 18px; margin-top: 22px; color: #fff; }
.direct-box svg { width: 22px; height: 22px; color: var(--hl); flex: none; }
.direct-box b { display: block; font-size: .95rem; }
.direct-box span { font-size: .84rem; color: rgba(255,255,255,.72); }
.direct-box a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }

/* ---- uitlegpagina: hoe werkt een vacuümtoilet (stappen met iconen) ---- */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.how-card .hn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: #fff; font-weight: 800; margin-bottom: 14px; }
.how-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.how-card p { font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .checklist { grid-template-columns: repeat(2, 1fr); }
  .included-strip { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .proscons { grid-template-columns: 1fr; }
  .checklist, .included-strip { grid-template-columns: 1fr; }
  .keuzehulp { padding: 20px 18px; }
  .kh-btn { padding: 11px 14px; font-size: .88rem; }
  .compare { min-width: 760px; font-size: .84rem; }
  .compare th, .compare td { padding: 11px 12px; }
}

/* ---- hero-typografie ----
   De kop stond op clamp(…, 6vw, 5rem) met line-height 1.08 uit de globale
   h1-regel. Bij een kop van meer dan drie woorden levert dat een muur van
   vijf krappe regels op. Kleiner én ruimer laat de kop ademen zonder dat hij
   zijn gewicht verliest; de lead krijgt dezelfde behandeling. ---- */
.hero h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.7rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
.hero .lead {
  font-size: 1.1rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 54ch;
  margin-bottom: 32px;
}
.hero-trust { margin-bottom: 30px; row-gap: 12px; }
/* De keuzehulp is een eigen stap, geen vervolg op de knoppen. Een dunne lijn
   scheelt de bezoeker het gevoel dat alles op één hoop staat. */
.hero-kh {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-kh p { margin-bottom: 12px; }
.hero-kh .kh-row { gap: 10px; }

/* Dezelfde rust op de smallere hero van categorie-, sector- en uitlegpagina's. */
.page-hero h1 {
  font-size: clamp(1.95rem, 4.2vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.page-hero p { line-height: 1.7; max-width: 58ch; }

/* ---- split-hero (homepage): tekst links, scherpe foto in kader rechts.
   De bronfoto's zijn max 1000px breed; een full-bleed hero zou ze oprekken.
   Het kader houdt de foto op native resolutie en laat de donkere hero staan. ---- */
.hero--split .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; position: relative; z-index: 2; }
.hero--split .hero-inner { max-width: none; padding: 72px 0 84px; min-height: 0; }
.hero-photo {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 5 / 4; box-shadow: 0 30px 70px rgba(0,0,0,.45); border: 4px solid rgba(255,255,255,.08);
  background: #1b2a52;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo .hero-tag {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: .85rem;
  padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-sm);
}
.hero-photo .hero-tag svg { width: 16px; height: 16px; color: var(--yellow-600); }
@media (max-width: 980px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { aspect-ratio: 3 / 2; }
  .hero--split .hero-inner { padding: 56px 0 24px; }
  .hero-photo { max-width: 620px; margin-bottom: 56px; }
}
@media (max-width: 620px) {
  .hero--split .hero-inner { padding: 44px 0 20px; }
  .hero-photo { margin-bottom: 44px; border-width: 3px; }
}

/* ---- split-media met foto (dark-section 'Over De-Lo' / over ons) ---- */
.split-media.has-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #12172e; }
.split-media.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- product-thumbs: 5 kolommen op de PDP (hero + 4 galerij) ---- */
@media (max-width: 620px) { .pdp-thumbs { grid-template-columns: repeat(5, 1fr) !important; gap: 8px; } }

/* ==========================================================================
   Uitlijning & polish — audit 2026-09-04
   ========================================================================== */

/* Rijke productkaarten (homepage): beschrijving groeide mee met de bullets,
   waardoor de witruimte tússen beide per kaart verschilde. Nu staat de
   inhoud bovenaan en vangt de bulletlijst de restruimte op, zodat prijs en
   knoppen in elke rij op dezelfde hoogte staan. */
.product-card.is-rich .desc { flex: none; }

/* Vergelijkingstabel: eerste kolom blijft staan bij horizontaal schuiven,
   zodat je op mobiel altijd ziet welke rij je leest. */
.compare th:first-child,
.compare td:first-child { position: sticky; left: 0; z-index: 1; }
.compare thead th:first-child { z-index: 2; }
.compare tfoot td:first-child { background: #fff; }

/* Negen wagens naast elkaar (/huren): iets compacter zodat de tabel binnen
   de container past op desktop; daarvoor viel de laatste kolom buiten beeld
   en moest je ook op een groot scherm schuiven. */
.compare.is-wide { font-size: .86rem; }
.compare.is-wide th, .compare.is-wide td { padding: 12px 10px; }
.compare.is-wide tbody th { white-space: normal; }
.compare.is-wide tfoot td { padding: 12px 10px; }
.compare.is-wide tfoot .btn { padding: 10px 8px; font-size: .82rem; }
@media (max-width: 620px) {
  .compare.is-wide { min-width: 760px; }
}

/* Sticky CTA-balk (PDP, mobiel/tablet) dekte de onderste footerregel af. */
body.has-sticky-cta .site-footer { padding-bottom: 72px; }

/* Aantal-kiezer op de PDP even hoog als de knoppen eronder (mobiel 48px). */
@media (max-width: 620px) {
  .pdp-qty button, .pdp-qty input { height: 46px; }
}

/* Bedankt-pagina: hero vult het scherm, anders bleef er een lege strook
   onder de hero omdat de pagina geen footer heeft. */
.hero--fill .hero-inner { min-height: calc(100vh - 79px); min-height: calc(100svh - 79px); }

/* ---- team (over ons): portretten in kaarten, laatste rij gecentreerd.
   Flex i.p.v. grid zodat een onvolledige laatste rij (13 mensen) in het
   midden staat in plaats van links te hangen. ---- */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.team-card {
  flex: 0 0 calc((100% - 4 * 22px) / 5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #141a38; } /* height:auto: anders wint het height-attribuut van aspect-ratio */
.team-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.team-body b { font-size: 1rem; color: var(--ink); }
.team-body span { font-size: .85rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 1080px) { .team-card { flex-basis: calc((100% - 3 * 22px) / 4); } }
@media (max-width: 800px)  { .team-card { flex-basis: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 560px)  {
  .team-grid { gap: 14px; }
  .team-card { flex-basis: calc((100% - 14px) / 2); }
  .team-body { padding: 12px 12px 14px; }
}

/* ---- Google-reviews van De-Lo op productpagina's: badge boven de vouw +
   donkere band met score en drie citaten onder het productblok ---- */
.pdp-review-badge { margin-bottom: 14px; transition: border-color .15s ease; }
.pdp-review-badge:hover { border-color: var(--ink); }
.pdp-review-badge b { font-size: .95rem; }
.reviews-band { background: var(--dark); color: #fff; padding: 56px 0; }
.reviews-layout { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.reviews-score .section-eyebrow { margin-bottom: 12px; }
.reviews-num { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.reviews-num b { font-size: 3.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.reviews-num .stars { color: #f5b301; font-size: 1.35rem; letter-spacing: 2px; }
.reviews-score p { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.6; margin-bottom: 16px; }
.reviews-score p b { color: #fff; }
.reviews-score .arrow-link { color: var(--hl); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.review-card .stars { color: #f5b301; letter-spacing: 1px; font-size: .95rem; }
.review-card p { font-size: .95rem; line-height: 1.6; color: #33434d; flex: 1; }
.review-card footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .84rem; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.review-card footer b { color: var(--ink); }
@media (max-width: 1080px) { .reviews-layout { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 800px) { .reviews-grid { grid-template-columns: 1fr; } .reviews-band { padding: 48px 0; } }

/* ==========================================================================
   Vergelijkingstabellen op mobiel — audit 2026-09-05
   Tot vier wagens (.is-stack): geen zijwaarts scrollen meer. Elke rij wordt
   een blokje: het kenmerk als kopregel, daaronder per wagen "naam · waarde"
   (de naam komt uit data-p). Negen wagens (.is-wide): blijft schuiven, maar
   compacter, zodat je op een telefoon twee wagens naast het kenmerk ziet in
   plaats van één.
   ========================================================================== */
.ch-scroll { display: inline-flex; align-items: center; gap: 8px; }
.compare.is-stack { min-width: 0; }

@media (max-width: 620px) {
  /* --- gestapeld --- */
  .is-stack-wrap, .compare-wrap:has(.is-stack) { overflow: visible; }
  .compare.is-stack { font-size: .88rem; display: block; }
  .compare.is-stack thead { display: none; }
  .compare.is-stack tbody, .compare.is-stack tfoot, .compare.is-stack tr { display: block; }
  .compare.is-stack tbody th {
    display: block; position: static; white-space: normal;
    padding: 9px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); background: #f7faf8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .compare.is-stack tbody tr:first-child th { border-top: 0; }
  .compare.is-stack td {
    display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start;
    padding: 9px 14px; border-bottom: 0; position: static;
  }
  .compare.is-stack td + td { border-top: 1px solid #eef3f0; }
  .compare.is-stack td::before { content: attr(data-p); font-weight: 600; color: var(--ink); font-size: .84rem; line-height: 1.45; }
  .compare.is-stack td.hi { background: #e3f4ee; }
  .compare.is-stack tbody tr:last-child td { border-bottom: 0; }
  .compare.is-stack tfoot tr { border-top: 1px solid var(--line); }
  .compare.is-stack tfoot td:first-child { display: none; }
  .compare.is-stack tfoot td { grid-template-columns: 96px max-content max-content; gap: 8px 10px; align-items: center; padding: 10px 14px; }
  .compare.is-stack tfoot td > * { width: auto; }
  .compare.is-stack tfoot .btn { padding: 10px 14px; font-size: .84rem; }
  .compare-hint { display: block; line-height: 1.5; }
  .compare-hint .ch-scroll { display: none; }
  .compare-wrap:has(.is-wide) + .compare-hint .ch-scroll { display: inline-flex; vertical-align: middle; margin-right: 4px; }

  /* --- negen wagens: compact schuiven, kenmerkkolom blijft staan --- */
  .compare.is-wide { min-width: 0; font-size: .8rem; }
  .compare.is-wide th, .compare.is-wide td { padding: 10px 10px; min-width: 120px; }
  .compare.is-wide thead th { white-space: normal; }
  .compare.is-wide thead th small { white-space: normal; }
  .compare.is-wide tbody th { white-space: normal; min-width: 104px; max-width: 112px; font-size: .78rem; box-shadow: 1px 0 0 var(--line); }
  .compare.is-wide thead th:first-child { box-shadow: 1px 0 0 rgba(255,255,255,.15); }
  .compare.is-wide tfoot td { padding: 10px 8px; }
  .compare.is-wide tfoot .btn { padding: 9px 8px; font-size: .8rem; }

}
/* Decoratieve hoekdriehoeken van donkere secties: zodra de container-rand op
   24px staat (≤ 1080) viel de 120px-driehoek over de eerste letters van de
   kop en over de hoek van de foto; op mobiel nog kleiner. */
@media (max-width: 1080px) { .dark-section .accent-block { width: 72px; height: 72px; } }
@media (max-width: 620px) { .dark-section .accent-block { width: 56px; height: 56px; } }

/* Vier kaarten naast elkaar (uitlegpagina) — via class i.p.v. style-attribuut,
   zodat de mobiele kolomregels van .catalog-grid gewoon meelopen. */
.catalog-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .catalog-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .catalog-grid.cols-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mobiele polish — audit 2026-09-05/06
   ========================================================================== */
.nowrap { white-space: nowrap; }
/* Koppen evenwichtig afbreken (geen los woord op de laatste regel). Browsers
   zonder ondersteuning negeren dit gewoon. */
h1, h2, .section-title { text-wrap: balance; }

/* Filterpaneel: de kop is een knop; boven 1080px inert (geen chevron, altijd open). */
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink); cursor: default; }
.filter-toggle svg { display: none; width: 16px; height: 16px; color: var(--yellow-600); transition: transform .2s ease; }
@media (max-width: 1080px) {
  .filter-toggle { cursor: pointer; min-height: 44px; }
  .filter-toggle svg { display: block; transform: rotate(90deg); }
  .filter-panel.is-open .filter-toggle svg { transform: rotate(-90deg); }
  .filter-panel { padding: 8px 22px; }
  .filter-panel.is-open { padding: 8px 22px 24px; }
  .filter-head { margin-bottom: 0; }
  .filter-panel.is-open .filter-head { margin-bottom: 12px; }
  .filter-body { display: none; }
  .filter-panel.is-open .filter-body { display: block; }
}

@media (max-width: 620px) {
  /* Catalogus: zelfde sectieafstand als de rest (was 84px onder, 60px elders). */
  .catalog { padding-bottom: 60px; }
  /* Specificatietabel: label boven de waarde i.p.v. rechts uitgelijnd wrappen. */
  .spec-table .spec-row { flex-direction: column; gap: 3px; padding: 12px 18px; }
  .spec-table .spec-row dd { text-align: left; }
  .spec-table h3 { padding: 16px 18px; }
  /* Galerijlinks: tikdoel van minimaal 40px zonder de vormgeving te veranderen. */
  .pdp-gallery-links a, .pdp-gallery-links button { min-height: 40px; }
  /* Productfoto's zijn 3:2; het 4:3-vak liet op mobiel 60px mint boven en onder over. */
  .product-media { aspect-ratio: 3 / 2; }
}

/* Menu-CTA alleen in het uitgeklapte mobiele menu; op desktop staat de knop in de header. */
.main-nav .nav-cta { display: none; }

/* Skip-link: alleen zichtbaar bij toetsenbordfocus; springt naar <main id="inhoud">. */
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600; border-radius: 8px; }
.skip-link:focus { left: 12px; }

/* ==========================================================================
   Homepage-hero zonder foto (2026-09-06): tekst links, keuzehulp als paneel
   rechts. De hero is daardoor zo hoog als de tekst, niet als de foto.
   ========================================================================== */
/* Tekstkolom breed genoeg voor de twee knoppen naast elkaar; het paneel
   houdt twee kolommen chips. Onder 980px valt het paneel onder de tekst. */
.hero--split .hero-grid { grid-template-columns: 1.25fr .75fr; gap: 48px; }
.hero--split .hero-inner { padding: 64px 0 72px; }
.hero-side {
  position: relative; z-index: 2;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: 26px 28px 28px;
  backdrop-filter: blur(2px);
}
.hero-side .hero-kh { margin-top: 0; padding-top: 0; border-top: 0; }
.hero-side .hero-kh-kop { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.hero-side .kh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-side .kh-btn { width: 100%; justify-content: flex-start; padding: 12px 14px; border-radius: 10px; }
.hero-side .kh-btn:hover { transform: none; }
.hero-side .kh-btn:nth-child(5), .hero-side .kh-btn:nth-child(6) { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero--split .hero-inner { padding: 56px 0 8px; }
  .hero-side { margin-bottom: 56px; }
}
@media (max-width: 620px) {
  .hero--split .hero-inner { padding: 44px 0 4px; }
  .hero-side { padding: 20px 18px 22px; margin-bottom: 44px; }
  .hero-side .kh-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-side .kh-btn { padding: 11px 12px; font-size: .88rem; }
}