/* ============================================================================
   SpeedyService ads-lander
   Skelet: pro-landers Feitsma/VS24/Draagkracht, hero naar Excellent-model.
   Huisstijl speedyservice.nl: geel #FDE910 + zwart + wit, Poppins, knoppen r10.
   Geel kan geen witte tekst dragen: op geel is tekst ALTIJD zwart, geel als
   tekstkleur alleen op zwart. Vandaar geen "brand-fill met wit" zoals bij de
   andere merken, maar een geel/zwart duosysteem.
   ========================================================================== */

/* ---------------- Poppins, zelf gehost ----------------
   Was een render-blocking <link> naar fonts.googleapis.com (796ms op mobiel in
   Lighthouse) plus twee extra hosts. De woff2's komen 1:1 van Google, alleen de
   devanagari-subset is weggelaten. font-display:swap zoals de oude aanroep. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin.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}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.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}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.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}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin.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}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --geel:#FDE910;        /* merkgeel: vlakken, markers, accenten op zwart */
  --geel-hover:#F2DD00;  /* hover van gele knoppen/vlakken */
  --geel-soft:#FFFBD6;   /* zachte tint: aangevinkte chips, pins */
  --ink:#000000;         /* merk-zwart: tekst, donkere secties, knoppen */
  --ink-2:#141414;       /* kaarten op zwart */
  --paper:#FFFFFF;
  --paper-2:#F9FAFD;     /* bijna-wit sectievlak (uit de Elementor-kit) */
  --line:#E6E8EC;
  --muted:#4A5157;       /* alinea-tekst op wit, AA */
  --wa:#188841;          /* WhatsApp-groen, donker genoeg voor wit (4,53:1) */
  --wa-deep:#147237;
  --gold:#B87A00;        /* sterren op wit (3,6:1); op zwart gebruiken we --geel */
  --radius:18px;
  --radius-sm:12px;
  --btn-r:10px;          /* Speedy-knoppen zijn 10px, geen pills */
  --logo-h:60px;         /* logohoogte in de topbar; de hero-titel rekent hiermee mee */
  --logo-h-stuck:46px;   /* iets kleiner zodra de topbar dichtklapt */
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow:0 18px 50px -22px rgba(0,0,0,.35);
  --shadow-lg:0 40px 90px -40px rgba(0,0,0,.55);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(15.5px,.4vw + 14.5px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
picture{display:contents} /* zodat <picture> geen grid/flex-child-laag toevoegt */
/* Dubbele ring: geel binnen, zwart buiten, zichtbaar op wit, geel en zwart. */
:focus-visible{outline:3px solid var(--geel);outline-offset:2px;box-shadow:0 0 0 6px rgba(0,0,0,.85);border-radius:4px}
.wrap{
  width:min(100% - 2.4rem,var(--maxw));margin-inline:auto;
  padding-left:max(0px,env(safe-area-inset-left));
  padding-right:max(0px,env(safe-area-inset-right));
}

/* Eyebrow: het meest herkenbare Speedy-detail, uppercase met brede spatiering. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink);
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--geel);flex:none}
.op-donker .eyebrow{color:var(--geel)}
.op-donker .eyebrow::before{background:var(--geel)}

/* ---------------- Knoppen: het geel/zwart duosysteem ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:var(--btn-r);border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.96rem;line-height:1;
  transition:transform .25s var(--ease),background .2s,box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ink{background:var(--ink);color:var(--geel);font-weight:800}
.btn--ink:hover{background:#1c1c1c}
.btn--geel{background:var(--geel);color:var(--ink);font-weight:800;box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
.btn--geel:hover{background:var(--geel-hover)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-deep)}
.btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.btn--ghost:hover{border-color:#fff}

/* ---------------- Topbar ---------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;isolation:isolate;
  padding:max(.9rem,env(safe-area-inset-top)) 0 .9rem;
  transition:background .25s ease,box-shadow .25s ease,padding .25s ease;
}
/* Scrim onder de transparante topbar: houdt wit logo en telefoonnummer leesbaar
   op de lichte delen van de herofoto. Loopt 36px door onder de balk, zodat de fade
   pas gebeurt voorbij de onderkant van het logo. Bij een logo van 60px zat de
   tagline anders in het uitgefadede deel en zakte wit daar naar 1,74:1. */
.topbar::before{
  content:"";position:absolute;inset:0 0 -36px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.58) 50%,rgba(0,0,0,.3) 74%,transparent 100%);
  transition:opacity .25s ease;
}
.topbar.is-stuck::before{opacity:0}
.topbar__in{display:flex;align-items:center;gap:1rem}
/* Het logo is een inline SVG (sprite-symbool i-logo), geen raster met invert-filter.
   Het gele pad heeft een vaste fill, het tekstpad staat op currentColor: daarom is
   `color` hieronder genoeg om van de donkere hero naar de witte stuck-topbar te gaan,
   en blijft het geel in beide standen staan. */
.topbar__logo svg{height:var(--logo-h);width:auto;--lg-geel:var(--geel);--lg-tekst:#fff;transition:height .25s ease}
.topbar__spacer{flex:1}
.topbar__tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#fff;font-size:.98rem}
.topbar__tel svg{width:17px;height:17px}
.topbar .btn{padding:.7rem 1.15rem;font-size:.9rem}
.topbar.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  box-shadow:var(--shadow-sm);
  padding:max(.55rem,env(safe-area-inset-top)) 0 .55rem;
}
/* Stuck-topbar is bijna wit: dan het hele logo zwart. Geel op wit haalt geen contrast
   en oogde vaal, en de huisregel is dat geel als tekstkleur alleen op zwart mag. */
.topbar.is-stuck .topbar__logo svg{height:var(--logo-h-stuck);--lg-geel:var(--ink);--lg-tekst:var(--ink)}
.topbar.is-stuck .topbar__tel{color:var(--ink)}

/* ---------------- Hero: Excellent-model, diagonale vlakken ----------------
   Links de foto, rechts een zwart vlak met snelheidslijnen. Beide 55% breed,
   de clip-paths overlappen 10% en vormen zo een diagonale naad zonder SVG. */
.hero{position:relative;margin-top:0;isolation:isolate;background:var(--ink)}
.hero__left{
  width:55%;height:640px;
  background:#20242B url("../img/hero-laden.webp") center 32%/cover no-repeat;
  clip-path:polygon(0 0,100% 0,90% 100%,0 100%);
}
.hero__right{
  position:absolute;right:0;top:0;width:55%;height:640px;
  background:
    repeating-linear-gradient(115deg,rgba(253,233,16,.07) 0 2px,transparent 2px 84px),
    linear-gradient(180deg,#0B0B0B 0%,#000 100%);
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
}
/* Gele naad op de diagonaal. Het element is precies zo breed als de zichtbare
   strook (6,215% = 11,3% van het oude 55%-vlak) en de clip is met factor 8,8496
   meegeschaald, dus de weergave is identiek. Dat is nodig omdat axe/Lighthouse
   geen clip-path kent: met een box van 55% breed las de contrastcheck GEEL als
   achtergrond van de witte USP-tekst (1,61:1) terwijl daar in werkelijkheid
   zwart staat (~19:1). */
.hero__seam{
  position:absolute;left:45%;right:auto;top:0;width:6.215%;height:640px;pointer-events:none;
  background:var(--geel);
  clip-path:polygon(88.496% 0,100% 0,11.504% 100%,0 100%);
}
/* H1 als drie schuine gele blokken op het fotovlak (logo-cursief vertaald naar CSS). */
.hero__title{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hero__title span{
  position:absolute;display:inline-block;transform:skewX(-7deg);
  background:var(--geel);color:var(--ink);
  font-weight:800;line-height:1.06;letter-spacing:-.01em;
  padding:.28em .55em .3em;box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
}
.hero__title span i{display:inline-block;transform:skewX(3deg);font-style:normal} /* tekst iets terug, leest rustiger */
.hero__r1{top:116px;left:4%;font-size:clamp(1.5rem,2.6vw,2.4rem)}
.hero__r2{top:196px;left:8%;font-size:clamp(1.9rem,3.4vw,3.1rem)}
.hero__r3{top:296px;left:3%;font-size:clamp(1rem,1.5vw,1.35rem);background:var(--ink);color:#fff;font-weight:600}
/* USP-rij + crew-cutout zijn één blok dat rechts uitlijnt op de offertebalk
   (Feitsma-patroon): de rechterrand van .of-wrap staat op max(sectiepadding,
   (100% - 1280px)/2), dus met dezelfde formule schuiven foto en formulier
   samen op en drijft de crew niet meer weg bij een breder venster.
   bottom:30px = de negatieve marge van .of-wrap, zo staat de crew precies op
   de bovenrand van de balk. Flex-kolom, dus de USP-rij volgt de crew-hoogte
   automatisch (was een handmatig bottom-getal per breakpoint). */
.hero__pack{
  position:absolute;z-index:2;bottom:30px;
  right:max(clamp(16px,4vw,40px),calc((100% - 1280px) / 2));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
/* Rechts uitgelijnd, zodat crew, USP-rij en offertebalk op dezelfde lijn eindigen. */
/* 48,5vw is geen smaakkeuze: de rij heeft 600px max-content nodig, en bij 44vw zakte
   de ruimte daaronder vanaf 1364px. Hij wrapte dan naar twee regels terwijl de crew
   pas op 1240px krimpt, dus groeide de flexkolom omhoog de topbar in (gemeten: 4
   elementparen kruisten tussen 1241 en 1319px). 48,5vw houdt 600px beschikbaar tot
   precies 1240px, waar de crew het overneemt. Onder 1240 gaat de cap terug naar 44vw,
   want daar komt de rij anders te dicht bij de diagonale naad. */
.hero__usps{
  width:600px;max-width:48.5vw;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 22px;
}
.hero__usps span{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:1.05rem;color:#fff;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.hero__usps .vink{
  width:22px;height:22px;border-radius:50%;background:var(--geel);color:var(--ink);
  display:inline-grid;place-items:center;flex:none;
}
.hero__usps .vink svg{width:12px;height:12px}
/* Vaste px-hoogte: als flex-kind in de auto-hoge .hero__pack heeft een
   procenthoogte geen basis meer om tegen te rekenen. De hero is 640px hoog,
   dus min(476px,76%) leverde toch altijd 476px op. */
.hero__crew{
  height:476px;width:auto;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
}

/* ---------------- Offerte-balk over de hero ----------------
   flow-root is verplicht: anders collapst de negatieve marge van .of-wrap
   naar buiten en klapt de hele sectie omhoog in plaats van alleen de kaart. */
.offerte-overlay{position:relative;z-index:5;padding:0 clamp(16px,4vw,40px) 60px;background:var(--paper-2);display:flow-root}
/* Ankersprongen landen anders onder de fixed topbar. */
#prijs{scroll-margin-top:96px}
#offerte{scroll-margin-top:88px}
.of-wrap{position:relative;max-width:1280px;margin:-30px auto 0}
.of-box{
  position:relative;z-index:2;background:var(--geel);color:var(--ink);
  border-radius:28px;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,52px);
  box-shadow:0 24px 60px -10px rgba(0,0,0,.3);
}
.of-trust{position:absolute;top:20px;right:24px;display:flex;align-items:center;gap:8px;z-index:5;flex-wrap:wrap;justify-content:flex-end}
.of-trust-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;background:#fff;border-radius:10px;
  font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px -4px rgba(0,0,0,.22);
}
.of-trust-badge img{height:20px;width:auto}
.of-trust-badge .sterren{color:var(--gold);letter-spacing:.06em;font-size:11px}
/* De balk is een los instrument: eigen, zwaarder typografisch register. */
.of-title{font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(24px,2.4vw,34px);margin:0 0 6px}
.of-sub{font-size:14.5px;color:rgba(0,0,0,.72);margin:0 0 22px;font-weight:600}
.of-pill{
  display:grid;grid-template-columns:.8fr 1px .8fr 1px 1fr 1px 1.2fr auto;align-items:stretch;gap:0;
  background:#fff;border-radius:999px;overflow:hidden;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.of-field{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;min-width:0;cursor:text}
.of-field span{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1;margin:0 0 4px;text-transform:uppercase;opacity:.78}
.of-field input,.of-field select{
  border:none;outline:none;background:none;font-family:inherit;font-size:16px;color:var(--ink);
  width:100%;padding:0;line-height:1.4;-webkit-appearance:none;appearance:none;
}
.of-field select{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center;padding-right:16px}
.of-field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.15)}
.of-divider{background:rgba(0,0,0,.12);width:1px;align-self:center;height:38px}
.of-cta{
  display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--geel);border:none;border-radius:999px;
  padding:14px 24px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.5);white-space:nowrap;
  transition:transform .2s var(--ease),background .2s;
}
.of-cta:hover{transform:translateY(-1px);background:#1c1c1c}
.of-cta svg{width:16px;height:16px}
.of-avail{display:flex;align-items:center;gap:.5rem;margin-top:14px;font-size:12.5px;font-weight:600;color:rgba(0,0,0,.72)}
.of-avail::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wa);flex:none}

/* ---------------- Sectie-basis ---------------- */
.sectie{padding:clamp(3.2rem,7vw,5.5rem) 0}
.sectie--tint{background:var(--paper-2)}
.sectie__kop{max-width:62ch}
.sectie__kop h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;margin-top:.7rem}
.sectie__kop h2 em{font-style:normal;background:linear-gradient(180deg,transparent 58%,var(--geel) 58%);padding-inline:.06em}
.sectie__kop p{margin-top:.8rem;color:var(--muted)}

/* ---------------- Reasons: foto + 5 punten, gespiegelde variant ---------------- */
/* overflow-x:clip om dezelfde reden als bij .story, zie de toelichting daar. */
.reasons{padding:clamp(3.2rem,7vw,5.5rem) 0;overflow-x:clip}
.reasons__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.reasons__media{position:relative;isolation:isolate}
.reasons__media::before{
  content:"";position:absolute;inset:0;background:var(--geel);
  border-radius:calc(var(--radius) + 14px);transform:rotate(-5deg) translate(-16px,16px);z-index:-1;
}
/* Geen aspect-ratio: de foto neemt de hoogte van de puntenkolom over, zodat het
   blok als een geheel leest. min-height is enkel een vloer voor korte kolommen. */
.reasons__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:100%;min-height:clamp(340px,38vw,520px);box-shadow:var(--shadow);transform:rotate(1deg)}
.reasons__photo img{width:100%;height:100%;object-fit:cover}
.reasons__badge{
  position:absolute;right:-10px;bottom:-20px;background:var(--ink);color:#fff;border-radius:14px;
  padding:.8rem 1.05rem;box-shadow:var(--shadow);line-height:1.25;font-size:.92rem;
}
.reasons__badge b{display:block;font-size:1.05rem;color:var(--geel)}
.reasons__list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem}
.reasons__list li{display:flex;gap:.9rem;align-items:baseline;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.reasons__num{font-weight:800;font-size:1rem;color:var(--ink);background:var(--geel);padding:.1em .38em;transform:skewX(-7deg);flex:none}
.reasons__list b{font-weight:700}
.reasons__list p{color:var(--muted);font-size:.95rem;margin-top:.15rem}
.reasons__stats{display:flex;gap:clamp(1.2rem,3vw,2.6rem);margin-top:1.5rem}
.reasons__stat b{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800}
.reasons__stat span{display:block;font-size:.8rem;color:var(--muted)}
.reasons__cta{margin-top:1.6rem;display:flex;gap:.8rem;flex-wrap:wrap}
.reasons--alt .reasons__media{order:2}
.reasons--alt .reasons__media::before{background:var(--ink);transform:rotate(5deg) translate(16px,16px)}
.reasons--alt .reasons__photo{transform:rotate(-1deg)}
.reasons--alt .reasons__badge{right:auto;left:-10px;background:var(--geel);color:var(--ink)}
.reasons--alt .reasons__badge b{color:var(--ink)}

/* ---------------- Dozen + calculator: twee kaarten die aan elkaar plakken ---------------- */
.dozen{padding:clamp(3.2rem,7vw,5.5rem) 0 0;background:var(--paper-2)}
.dozen__card{
  position:relative;background:var(--geel);color:var(--ink);border-radius:28px 28px 0 0;
  padding:clamp(1.8rem,3.4vw,3rem) clamp(1.6rem,3vw,2.6rem) clamp(1.8rem,3.4vw,2.6rem);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3vw,3rem);overflow:hidden;
}
.dozen__body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700}
.dozen__body p{margin-top:.8rem;color:rgba(0,0,0,.75);max-width:56ch}
.dozen__foto{position:relative;min-height:240px}
.dozen__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px}
.dozen__badge{
  position:absolute;left:16px;bottom:16px;background:var(--ink);color:var(--geel);
  border-radius:12px;padding:.55rem .85rem;font-weight:700;font-size:.9rem;box-shadow:var(--shadow-sm);
}
.calc{padding:0 0 clamp(2.6rem,5vw,4.2rem);background:var(--paper-2)}
.calc__card{
  background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--shadow);
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.6rem,3vw,2.6rem);
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.2rem,2.6vw,2.4rem);
  align-items:start;column-gap:clamp(1.4rem,3vw,3rem);
}
.calc__intro{grid-column:1}
.calc__intro h3{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700}
.calc__intro p{margin-top:.35rem;color:var(--muted);font-size:.92rem;max-width:56ch}
.calc__velden{grid-column:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.calc__veld{display:flex;flex-direction:column;gap:.25rem;position:relative}
.calc__veld>span{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.calc__veld input,.calc__veld select{
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .7rem;width:100%;
  background:var(--paper-2);-webkit-appearance:none;appearance:none;
}
.calc__veld input::-webkit-outer-spin-button,.calc__veld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__veld i{position:absolute;right:.7rem;bottom:.72rem;font-style:normal;font-size:.82rem;color:var(--muted);pointer-events:none}
.calc__veld--sel select{padding-right:2rem}
.calc__veld--sel::after{
  content:"";position:absolute;right:.95rem;bottom:1.05rem;width:7px;height:7px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none;
}
.calc__extras{grid-column:1;border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.calc__extras legend{float:left;width:100%;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.calc__extras label{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:.42rem .8rem;font-size:.88rem;font-weight:600;
  transition:border-color .2s ease,background .2s ease;
}
.calc__extras label:has(input:checked){border-color:var(--ink);background:var(--geel-soft);color:var(--ink)}
.calc__extras input{accent-color:var(--ink);width:15px;height:15px;margin:0}
.calc__uit{
  grid-column:2;grid-row:1 / span 3;align-self:stretch;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;
  background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(1.1rem,2vw,1.6rem);min-width:15.5rem;
}
.calc__uitkomst{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.calc__label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.calc__getal{font-weight:800;font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--geel)}
.calc__bereik{font-size:.9rem;color:rgba(255,255,255,.75)}
.calc__detail{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:.35rem;max-width:24ch}
.calc__uit .btn{margin-top:.9rem;width:100%}
.calc__wa{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px;
}
.calc__wa:hover{color:#fff}
.calc__wa svg{width:15px;height:15px;flex:none}

/* ---------------- Waarom: zwart vlak, foto + 6 usp-kaartjes ---------------- */
.waarom{background:var(--ink);color:#fff;padding:clamp(3.2rem,7vw,5.5rem) 0}
.waarom__grid{display:grid;grid-template-columns:1.32fr .8fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:stretch}
.waarom__media{position:relative;height:100%}
/* object-position naar rechts: bij center viel de rechterhelft van het team weg */
.waarom__media img{width:100%;height:100%;min-height:clamp(380px,42vw,580px);object-fit:cover;object-position:88% center;border-radius:22px}
.waarom__tag{
  position:absolute;left:18px;bottom:18px;background:var(--geel);color:var(--ink);
  border-radius:999px;padding:.5rem .95rem;font-weight:700;font-size:.88rem;
}
.waarom__body h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:700;margin-top:.7rem}
.waarom__body h2 em{font-style:normal;color:var(--geel)}
.waarom__list{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;margin-top:1.6rem}
.wmini h3{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:700;color:#fff}
.wmini h3 img{width:30px;height:30px;flex:none}
.wmini p{margin-top:.3rem;font-size:.88rem;color:rgba(255,255,255,.66)}
.waarom__cta{margin-top:1.8rem}
.waarom__cta-note{display:block;margin-top:.7rem;font-size:.86rem;color:rgba(255,255,255,.66)}

/* ---------------- Reviews ---------------- */
.rev{position:relative;background:var(--paper);padding:clamp(3.2rem,7vw,5.5rem) 0;overflow:hidden}
.rev__orb{position:absolute;right:-140px;top:-140px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(253,233,16,.35) 0%,transparent 65%);pointer-events:none}
.rev__top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:stretch;position:relative}
.rev__title{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;margin-top:.7rem}
.rev__title em{font-style:normal;background:linear-gradient(180deg,transparent 58%,var(--geel) 58%);padding-inline:.06em}
.rev__lead{margin-top:.8rem;color:var(--muted);max-width:52ch}
.rev__src{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.rev__badge{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:9px 13px;font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);
}
.rev__badge img{height:22px;width:auto}
.rev__badge .sterren{color:var(--gold);font-size:12px;letter-spacing:.06em}
.rev__score{
  position:relative;border-radius:24px;overflow:hidden;min-height:320px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:var(--ink) url("../img/interieur-bank.webp") center/cover no-repeat;isolation:isolate;
}
.rev__score::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.82));z-index:-1}
.rev__score-label{font-size:.8rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--geel)}
.rev__num{font-weight:800;font-size:clamp(4rem,10vw,6.6rem);line-height:1;color:#fff}
.rev__score .sterren{color:var(--geel);font-size:1.25rem;letter-spacing:.14em;margin-top:.3rem}
.rev__count{margin-top:.45rem;font-size:.95rem;color:rgba(255,255,255,.85)}
.rev__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.8rem,4vw,2.6rem)}
.rcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.2rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.rcard .sterren{color:var(--gold);font-size:.85rem;letter-spacing:.1em}
.rcard blockquote{margin:.6rem 0 0;font-size:.95rem;line-height:1.55}
.rcard figcaption{margin-top:auto;padding-top:.8rem;display:flex;justify-content:space-between;gap:.6rem;font-size:.82rem;color:var(--muted)}
.rcard figcaption b{color:var(--ink);font-weight:700}
.rcard__src{display:inline-flex;align-items:center;gap:.35rem}
.rcard__src .dot{width:7px;height:7px;border-radius:50%;background:var(--wa)}
.rev__cta{display:flex;justify-content:center;margin-top:clamp(1.6rem,3vw,2.2rem)}

/* ---------------- Werkwijze: 4 stappen, zwart/geel afwisselend ---------------- */
.werkwijze{background:var(--paper-2);padding:clamp(3.2rem,7vw,5.5rem) 0}
.werkwijze__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.step{position:relative;border-radius:20px;padding:1.5rem 1.3rem 1.3rem;display:flex;flex-direction:column;min-height:230px;overflow:hidden}
.step--ink{background:var(--ink);color:#fff}
.step--geel{background:var(--geel);color:var(--ink)}
.step__no{position:absolute;right:14px;top:8px;font-weight:800;font-size:2.4rem;opacity:.16;line-height:1}
.step__ic{width:44px;height:44px;margin-bottom:.8rem}
.step--ink .step__ic{color:var(--geel)}
.step--geel .step__ic{color:var(--ink)}
.step h3{font-size:1.05rem;font-weight:700;padding-right:1.6rem}
.step p{margin-top:.4rem;font-size:.88rem}
.step--ink p{color:rgba(255,255,255,.7)}
.step--geel p{color:rgba(0,0,0,.72)}
.step__tag{margin-top:auto;padding-top:.9rem;font-size:.8rem;font-weight:700}
.step--ink .step__tag{color:var(--geel)}

/* ---------------- Story: twee fotoblokken ---------------- */
/* overflow-x:clip vanwege de gedraaide gele ::before-vlakken achter de foto's: die
   staan op rotate + translate en steken daarmee buiten de wrap, wat de pagina
   horizontaal liet scrollen (28px rond 900px in .reasons, 3px op 390 in .story).
   Gemeten op 1200/1000/900/500/390: met clip overal 0.
   Alleen de X-as, zodat het gele vlak boven en onder wel blijft uitsteken; dat is
   het hele effect. Op Safari onder 16 wordt clip genegeerd en blijft het zoals het
   nu al is, dus geen achteruitgang.
   LET OP bij zoeken naar zulke overflow: een scan op getBoundingClientRect().right
   wijst je de verkeerde kant op (die negeert clipping) en querySelectorAll('*') mist
   pseudo-elementen volledig. Isoleer door via een <style> regels te injecteren en
   scrollWidth - clientWidth te meten. */
.story{padding:clamp(3.2rem,7vw,5.5rem) 0;display:grid;gap:clamp(2.6rem,6vw,4.4rem);overflow-x:clip}
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.story__media{position:relative;isolation:isolate}
.story__media::before{
  content:"";position:absolute;inset:0;background:var(--geel);
  border-radius:calc(var(--radius) + 14px);transform:rotate(-4deg) translate(-14px,14px);z-index:-1;
}
.story__row:nth-child(even) .story__media{order:2}
.story__row:nth-child(even) .story__media::before{background:var(--ink);transform:rotate(4deg) translate(14px,14px)}
.story__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:100%;min-height:clamp(300px,32vw,440px);box-shadow:var(--shadow);transform:rotate(1deg)}
.story__row:nth-child(even) .story__photo{transform:rotate(-1deg)}
.story__photo img{width:100%;height:100%;object-fit:cover}
.story__badge{
  position:absolute;right:-10px;bottom:-18px;background:#fff;border-radius:12px;padding:.6rem .85rem;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;
}
.story__badge img{height:26px;width:auto}
.story__body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;max-width:18ch;margin-top:.7rem}
.story__body p{margin-top:.8rem;color:var(--muted);max-width:46ch}
.story__cta{margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------------- FAQ ---------------- */
.faq{background:var(--paper-2);padding:clamp(3.2rem,7vw,5.5rem) 0}
.faq__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3rem);margin-top:clamp(1.4rem,3vw,2rem);align-items:stretch}
.faq__list{display:grid;gap:.7rem}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s ease}
.faq__item[open]{border-color:var(--ink)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.15rem;font-weight:700;font-size:.98rem;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;background:var(--geel);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;transition:transform .2s var(--ease);
}
.faq__item[open] summary::after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq__item p{padding:0 1.15rem 1.1rem;color:var(--muted);font-size:.94rem}
/* Geen max-height: die liet het gat terugkomen zodra de vragenkolom groeide,
   bijvoorbeeld met een open accordeon. De foto volgt nu de kolomhoogte. */
.faq__photo{border-radius:20px;overflow:hidden;height:100%;min-height:clamp(340px,38vw,520px);background:var(--geel)}
.faq__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}

/* ---------------- Leadblock: het echte formulier ---------------- */
.leadblock{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--paper)}
.leadblock__card{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);
}
.leadblock__media{position:relative;min-height:420px}
.leadblock__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.leadblock__panel{
  position:relative;color:#fff;padding:clamp(1.8rem,3.4vw,3rem);
  background:linear-gradient(140deg,#1a1a1a 0%,#000 55%,#000 100%);isolation:isolate;
}
.leadblock__panel::before{
  content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(253,233,16,.22) 0%,transparent 65%);z-index:-1;pointer-events:none;
}
.leadblock__panel h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;margin-top:.7rem}
.lead-p{margin-top:.7rem;color:rgba(255,255,255,.75);font-size:.96rem;max-width:52ch}
.lead-badge{
  display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);border-radius:999px;
  padding:8px 14px;margin-top:1.1rem;font-size:.85rem;font-weight:700;
}
.lead-badge img{height:18px;width:auto}
.lead-badge .sterren{color:var(--gold);font-size:.8rem;letter-spacing:.06em}

.lf{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.lf__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start}
.lf__field{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.lf__field>span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.lf__field input:not([type=checkbox]),.lf__field select{
  border:0;border-radius:var(--radius-sm);background:#fff;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:600;padding:.72rem .85rem;width:100%;
  -webkit-appearance:none;appearance:none;
}
.lf__field input:not([type=checkbox])::placeholder{color:#767676;font-weight:400}
.lf__field--sel{position:relative}
.lf__field--sel::after{
  content:"";position:absolute;right:.9rem;bottom:1rem;width:8px;height:8px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none;
}
.lf__optie{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:rgba(255,255,255,.85);cursor:pointer;margin-top:.4rem}
.lf__optie input{accent-color:var(--geel);width:15px;height:15px;margin:0}
.lf .btn{width:100%;padding:1rem 1.5rem;font-size:1.02rem}
.lf__privacy{font-size:.78rem;color:rgba(255,255,255,.55)}
.lf__done{padding:1.5rem 1.3rem;background:#0f2c16;border:1px solid #1d5a2c;border-radius:16px;color:#d9f2df;line-height:1.55}
.lf__done a{color:#fff;font-weight:700}

/* Dozenschatting-uitklapper in het formulier (Feitsma-patroon, zwart paneel) */
.lfcalc{margin-top:.2rem;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(255,255,255,.08);overflow:hidden}
.lfcalc__knop{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.7rem .9rem;font-size:.88rem;font-weight:700;color:#fff;
}
.lfcalc__knop::-webkit-details-marker{display:none}
.lfcalc__knop:hover{background:rgba(255,255,255,.06)}
.lfcalc__chev{width:8px;height:8px;flex:none;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.lfcalc[open] .lfcalc__chev{transform:rotate(225deg) translate(-2px,-2px)}
.lfcalc__paneel{padding:0 .9rem .9rem;display:grid;gap:.8rem}
.lfcalc__velden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.lfcalc__velden .lf__field>span{font-size:.72rem}
.lfcalc__velden input,.lfcalc__velden select{padding:.6rem .7rem;font-size:16px}
.lfcalc__velden .lf__field--sel::after{bottom:.85rem;right:.75rem}
.lfcalc__extras{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lfcalc__extras legend{float:left;width:100%;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:.4rem}
.lfcalc__extras label{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:.32rem .7rem;font-size:.82rem;font-weight:600;color:#fff;
  transition:background .2s ease,border-color .2s ease;
}
.lfcalc__extras label:has(input:checked){background:var(--geel);color:var(--ink);border-color:var(--geel)}
.lfcalc__extras input{accent-color:var(--ink);width:14px;height:14px;margin:0}
.lfcalc__uit{font-size:.85rem;line-height:1.5;color:#fff;background:rgba(255,255,255,.1);border-radius:10px;padding:.6rem .75rem}
.lfcalc__uit strong{font-weight:800;color:var(--geel)}
.lfcalc__acties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.lfcalc__ok{
  font-family:inherit;font-weight:800;font-size:.86rem;cursor:pointer;border:0;border-radius:999px;
  padding:.6rem 1.1rem;background:var(--geel);color:var(--ink);transition:transform .2s var(--ease),background .2s ease;
}
.lfcalc__ok:hover{transform:translateY(-1px);background:var(--geel-hover)}
.lfcalc__wis{font-family:inherit;font-weight:600;font-size:.82rem;cursor:pointer;border:0;background:none;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px;padding:.4rem}
.lfcalc__wis:hover{color:#fff}
.lfcalc.is-toegevoegd{border-color:var(--geel);background:rgba(253,233,16,.12)}
.lfcalc.is-toegevoegd .lfcalc__titel::before{content:"\2713";margin-right:.45rem;font-weight:800;color:var(--geel)}
.lfcalc.is-toegevoegd .lfcalc__ok{background:rgba(255,255,255,.22);color:#fff;cursor:default}
.lfcalc.is-toegevoegd .lfcalc__ok:hover{transform:none;background:rgba(255,255,255,.22)}

/* ---------------- Footer ---------------- */
.foot{
  position:relative;color:#fff;padding:clamp(3rem,6vw,4.5rem) 0 1.6rem;isolation:isolate;
  background:var(--ink) url("../img/team-rug.webp") center 30%/cover no-repeat;
}
.foot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.92));z-index:-1}
.foot::after{
  content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(253,233,16,.16) 0%,transparent 65%);z-index:-1;pointer-events:none;
}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr 1.35fr;gap:clamp(1.6rem,4vw,3rem)}
.foot__logo{height:52px;width:auto;--lg-geel:var(--geel);--lg-tekst:#fff} /* alleen het logo, niet de badges */
.foot__badge img{filter:none}
.foot__brand p{margin-top:.9rem;color:rgba(255,255,255,.7);font-size:.92rem;max-width:34ch}
.foot__badges{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.foot__badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:10px;padding:7px 11px;color:var(--ink);font-size:12px;font-weight:600}
.foot__badge img{height:20px;width:auto}
.foot__badge .sterren{color:var(--gold);font-size:11px;letter-spacing:.06em}
.foot__col h3{font-size:.8rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--geel)}
.foot__col nav{display:grid;gap:.55rem;margin-top:1rem}
.foot__col nav a{color:rgba(255,255,255,.8);font-size:.94rem;transition:color .2s,transform .2s var(--ease)}
.foot__col nav a:hover{color:#fff;transform:translateX(3px)}
.foot__contact .btn{margin-bottom:1.1rem}
.foot__contact ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot__contact li{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.8);font-size:.94rem}
.foot__contact li svg{width:16px;height:16px;flex:none;color:var(--geel)}
.foot__contact a:hover{color:#fff}
.foot__bottom{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:rgba(255,255,255,.55);
}
.foot__legal{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot__legal a:hover{color:#fff}

/* ---------------- Mobiele sticky CTA-balk ---------------- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;
  padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 22px -8px rgba(0,0,0,.3);
}
.mcta a{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;
  border-radius:var(--btn-r);font-weight:700;font-size:.92rem;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.mcta a:active{filter:brightness(.92);transform:scale(.98)}
.mcta a svg{width:17px;height:17px}
.mcta__call{background:var(--ink);color:var(--geel)}
.mcta__wa{background:var(--wa);color:#fff}
.mcta__quote{background:var(--geel);color:var(--ink);font-weight:800}

/* ---------------- Zwevende WhatsApp-knop (oranjelift-model) ----------------
   Pulsering is een ::after-ring achter de knop, niet de knop zelf: een pulserende
   knop laat het tapdoel bewegen. z-index onder de mcta (60), boven de topbar (50).
   --wa (#188841) in plaats van #25D366: wit op merkgroen zakt door WCAG. */
.wafloat{
  position:fixed;right:24px;bottom:24px;z-index:55;
  width:64px;height:64px;border-radius:50%;background:var(--wa);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform .2s var(--ease),background .2s ease,box-shadow .2s ease;
}
.wafloat:hover{transform:scale(1.08);background:var(--wa-deep);box-shadow:0 14px 32px -8px rgba(0,0,0,.5)}
.wafloat:active{transform:scale(.95)}
.wafloat svg{width:34px;height:34px}
.wafloat::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:var(--wa);pointer-events:none;
  animation:wafloat-puls 2s ease-out infinite;
}
@keyframes wafloat-puls{
  from{transform:scale(1);opacity:.45}
  to{transform:scale(1.5);opacity:0}
}
.wafloat__tip{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  background:#fff;color:var(--ink);border-radius:10px;padding:8px 13px;
  font-size:.82rem;font-weight:600;white-space:nowrap;
  box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.wafloat__tip::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:#fff;
}
.wafloat:hover .wafloat__tip,.wafloat:focus-visible .wafloat__tip{opacity:1}

/* ---------------- Scroll-reveal ----------------
   Scoped op html.js (gezet door een inline script in de head): zonder JS
   blijft alles gewoon zichtbaar in plaats van op opacity:0 te hangen. */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-zichtbaar{opacity:1;transform:none}

/* ---------------- Breakpoints ---------------- */
@media (max-width:1240px){
  .hero__crew{height:420px}
  .hero__usps{max-width:44vw} /* zie de noot bij .hero__usps: nu mag hij wel wrappen */
}
@media (max-width:1100px){
  .hero__crew{height:355px}
  .hero__usps{gap:14px}
  .hero__usps span{font-size:.95rem}
}
@media (max-width:980px){
  .waarom__grid{grid-template-columns:1fr}
  /* Gestapeld is er geen kolom om hoogte van over te nemen: terug naar de
     eigen hoogte van de foto, anders klapt height:100% dicht. */
  .waarom__media{height:auto}
  .rev__grid{grid-template-columns:1fr 1fr}
}
/* Badges eerder naar statisch: absoluut overlapten ze de titel tussen 881 en 1090px. */
@media (max-width:1100px){
  .of-trust{position:static;justify-content:flex-start;flex-wrap:wrap;margin-bottom:14px}
}
@media (max-width:880px){
  .reasons__grid{grid-template-columns:1fr}
  .reasons__media{max-width:24rem;margin-inline:auto}
  .reasons__photo{height:auto;min-height:0;aspect-ratio:4/5}
  .dozen__card{grid-template-columns:1fr}
  .dozen__foto{min-height:300px}
  .waarom__list{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .rev__top{grid-template-columns:1fr}
  .story__row{grid-template-columns:1fr}
  .story__row:nth-child(even) .story__media{order:0}
  .story__photo{height:auto;min-height:0;aspect-ratio:4/3}
  .werkwijze__grid{grid-template-columns:1fr 1fr}
  .faq__grid{grid-template-columns:1fr}
  .faq__photo{display:none}
  .foot__top{grid-template-columns:1fr 1fr}
  .calc__card{grid-template-columns:1fr}
  .calc__uit{grid-column:1;grid-row:auto;min-width:0}
  .calc__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .leadblock__card{grid-template-columns:1fr}
  .leadblock__media{min-height:0;aspect-ratio:16/10}
}
/* Hero klapt om naar mobiel: fotostrip boven, zwart blok met usps + crew eronder. */
@media (max-width:768px){
  /* Kleiner logo op mobiel: op 60px zou de topbar 89px hoog worden en dat eet de
     fotostrip van 250px op. De hero-titel schuift automatisch mee. */
  :root{--logo-h:46px;--logo-h-stuck:40px}
  .hero{display:flex;flex-direction:column;background:none}
  .hero__left{order:1;width:100%;height:250px;clip-path:none;background-image:url("../img/hero-laden-900.webp")}
  .hero__right,.hero__seam{display:none}
  .hero__title span{position:static;display:table;margin:0}
  /* Titel onder de topbar: .9rem padding boven en onder plus de logohoogte. Stond
     hardgecodeerd op 73px (de som bij een logo van 44px) en dreef dus weg zodra het
     logo groeide; nu rekent hij mee met --logo-h. */
  .hero__title{position:absolute;left:16px;top:calc(16px + 1.8rem + var(--logo-h) + env(safe-area-inset-top));width:auto;height:auto;display:grid;gap:8px;justify-items:start}
  .hero__r1{font-size:1.35rem}
  .hero__r2{font-size:1.7rem;margin-left:10px}
  .hero__r3{font-size:.95rem}
  .hero__pack{
    position:static;right:auto;bottom:auto;
    order:2;display:flex;flex-direction:column;align-items:center;gap:14px;
    background:
      linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 55%,#000 100%),
      repeating-linear-gradient(115deg,rgba(253,233,16,.07) 0 2px,transparent 2px 84px),
      #0B0B0B;
    padding:22px 14px 34px;border-top:4px solid var(--geel);
  }
  .hero__usps{width:auto;max-width:none;flex-direction:column;gap:10px;align-items:flex-start}
  .hero__crew{height:auto;max-height:300px;max-width:86%;margin:0 auto}
  .of-wrap{margin-top:-40px}
}
/* De pill klapt al op 900px om: tussen 760 en 900 waren de velden anders te krap
   voor de placeholders en het native datumveld. */
@media (max-width:900px){
  .of-pill{grid-template-columns:1fr;border-radius:18px;padding:8px;gap:6px}
  .of-divider{display:none}
  .of-field{padding:10px 16px;border-bottom:1px solid rgba(0,0,0,.08)}
  .of-field:last-of-type{border-bottom:0}
  .of-cta{justify-content:center;border-radius:14px;padding:14px 20px}
}
@media (max-width:760px){
  .offerte-overlay{padding-bottom:48px}
}
@media (max-width:620px){
  .topbar__tel{display:none}
  /* Label visueel weg maar wel in de accessibility-tree (naam blijft op de knop). */
  .topbar .btn .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .topbar .btn{padding:.85rem 1rem}
  .mcta{display:flex}
  body:has(.mcta){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* Weg zodra de sticky balk verschijnt: die heeft zijn eigen WhatsApp-knop en
     de zwevende knop zou er bovenop vallen. */
  .wafloat{display:none}
  .lfcalc__velden{grid-template-columns:1fr 1fr}
  /* Tapdoelen richting 44-48px. */
  .calc__extras label,.lfcalc__extras label{padding:.6rem .9rem}
  .lfcalc__ok{padding:.8rem 1.2rem}
  .lfcalc__wis{padding:.7rem .6rem}
  .lf__optie{padding:.6rem 0}
  .calc__wa{padding:.5rem 0}
}
@media (max-width:560px){
  .rev__grid{grid-template-columns:1fr}
  .waarom__list{grid-template-columns:1fr}
  .werkwijze__grid{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column}
  .reasons__stats{flex-wrap:wrap}
}
@media (max-width:460px){
  .lf__row{grid-template-columns:1fr}
  /* smalle telefoon: 380px hoog sneed het team af, bij 300px past de hele rij */
  .waarom__media img{min-height:300px}
}
@media (max-width:420px){
  .calc__velden{grid-template-columns:1fr}
}

/* ---------------- Toegankelijkheid en print ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1;transform:none}
}
@media print{
  .topbar,.mcta{display:none}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------------- Subpagina's (verhuisservice/verhuizers/kosten) ---------------- */
.subhero{background:var(--ink);color:#fff;padding:clamp(3rem,6vw,4.6rem) clamp(16px,4vw,40px) calc(clamp(2rem,4vw,3rem) + 34px)}
.subhero__in{max-width:1280px;margin:0 auto}
.subhero__kruimel{font-size:.85rem;color:rgba(255,255,255,.55);margin:0 0 .9rem}
.subhero__kruimel a{color:rgba(255,255,255,.78);text-decoration:none}
.subhero__kruimel a:hover{color:#fff;text-decoration:underline}
.subhero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:800;line-height:1.1;margin:0;max-width:24ch}
.subhero h1 em{font-style:normal;background:var(--geel);color:var(--ink);padding:0 .14em}
.subhero p{margin:.9rem 0 0;color:rgba(255,255,255,.82);max-width:60ch;font-size:clamp(1rem,1.4vw,1.13rem)}
.subhero__usps{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:1.2rem;font-weight:600;font-size:.95rem}
.subhero__usps span{display:inline-flex;align-items:center;gap:.45rem}
.subhero__usps .vink{width:22px;height:22px;border-radius:50%;background:var(--geel);color:var(--ink);display:inline-grid;place-items:center;flex:none}
.subhero__usps .vink svg{width:12px;height:12px}
.prijzen{padding:clamp(2.6rem,6vw,4rem) clamp(16px,4vw,40px);background:var(--paper)}
.prijzen .wrap{max-width:1100px}
.prijstab-scroll{overflow-x:auto;margin-top:1.4rem}
.prijstab{width:100%;border-collapse:collapse;min-width:640px;font-size:.97rem}
.prijstab th{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;text-align:left;padding:.7rem .8rem;border-bottom:3px solid var(--geel);white-space:nowrap}
.prijstab td{padding:.85rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.prijstab td b{color:var(--ink)}
.prijstab tr td:last-child{white-space:nowrap;font-weight:800;color:var(--ink)}
.prijstab-uitleg{margin-top:1.2rem;color:var(--muted);max-width:78ch}

/* ---------------- Juridische pagina's (privacybeleid, cookiebeleid, disclaimer, toegankelijkheid) ---------------- */
.juridisch{padding:clamp(2.6rem,5vw,4rem) clamp(16px,4vw,40px)}
.juridisch .wrap{max-width:860px;margin:0 auto}
.juridisch h2{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;margin:2.2rem 0 .7rem}
.juridisch .wrap > h2:first-child{margin-top:0}
.juridisch p,.juridisch li{color:var(--muted);line-height:1.65}
.juridisch p{margin:0 0 1rem}
.juridisch ul{margin:0 0 1rem;padding-left:1.2rem}
.juridisch li{margin:.35rem 0}
.juridisch a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.juridisch a:hover{background:var(--geel-soft)}
.jversie{font-size:.85rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}
.jcta{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);margin-top:2.2rem}
.jcta h2{margin:0 0 .5rem;color:#fff}
.jcta p{color:rgba(255,255,255,.78)}
.jcta__knoppen{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}