/* Feitsma Verhuizingen - advertentie-landingspagina
   Huisstijl overgenomen van feitsma.nl: rood #FD2C2C + antraciet #262626.
   --red-deep en --red-fill zijn donkerder varianten die WCAG AA halen,
   voor kleine tekst in rood en voor vlakken met witte tekst erop.
   Type: Lora (koppen) + Lato (body), dezelfde combinatie als feitsma.nl. */

:root{
  --red:#FD2C2C;
  --red-deep:#C81E1E;
  --red-fill:#D91C22;
  --red-soft:#FDECEC;
  --red-light:#FF7A7A;  /* rood dat leesbaar blijft op de antracieten vlakken */
  --ink:#262626;
  --ink-2:#3A3A3A;
  --paper:#F7F7F7;
  --paper-2:#EFEFEF;
  --line:#E3E3E3;
  --white:#fff;
  --muted:#5F5F5F;
  /* Witte tekst op WhatsApp-groen #25D366 haalt maar 1,98:1 en zakt door de WCAG-eis.
     Zelfde tint (142 graden), helderheid omlaag tot 4,53:1. Leest nog steeds als
     WhatsApp-groen, maar de tekst erop is nu wel leesbaar. */
  --wa:#188841;
  --wa-deep:#147237;
  --gold:#F5A623;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 2px 10px rgba(20,20,20,.06);
  --shadow:0 18px 50px -22px rgba(20,20,20,.35);
  --shadow-lg:0 40px 90px -40px rgba(20,20,20,.55);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-ms-touch-action:manipulation}
body{
  margin:0;
  font-family:"Lato",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.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Lora",Georgia,serif;font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-deep);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);border-radius:2px}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--red-fill);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.4rem;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.96rem;line-height:1;
  background:var(--bg);color:var(--fg);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--bg) 75%,#000);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--red-fill)}
.btn--primary:hover{background:var(--red-deep)}
.btn--wa{--bg:var(--wa)}
.btn--wa:hover{background:var(--wa-deep)}
.btn--ghost{
  background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.08)}
.btn--ink{--bg:#262626}
.btn--lg{padding:1.02rem 1.7rem;font-size:1.02rem}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(100% - 2.4rem,var(--maxw))}
.topbar__logo{position:relative;display:flex;align-items:center;gap:.7rem}
/* Twee logovarianten over elkaar: wit woordmerk boven de video, donker zodra de balk vastplakt.
   Zo blijft de rode sjouwer in beide standen rood. */
.topbar__logo img{height:56px;width:auto;transition:opacity .35s var(--ease),height .35s var(--ease)}
.topbar__logo img+img{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.topbar.is-stuck .topbar__logo img{opacity:0}
.topbar.is-stuck .topbar__logo img+img{opacity:1}
.topbar__actions{display:flex;align-items:center;gap:.7rem}
.topbar__tel{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#fff;
  padding:.5rem .4rem;font-size:.95rem;transition:color .35s var(--ease)
}
.topbar__tel svg{width:17px;height:17px}
.topbar.is-stuck{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);box-shadow:var(--shadow-sm);padding:.55rem 0}
.topbar.is-stuck .topbar__logo img,
.topbar.is-stuck .topbar__logo img+img{height:48px}
.topbar.is-stuck .topbar__tel{color:var(--ink)}
.topbar.is-stuck .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.topbar.is-stuck .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:rgba(20,20,20,.04)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;overflow:hidden;isolation:isolate;
  background:#1a1a1a url("../video/feitsma-hero-poster.webp") center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero__veil{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 70% 18%,rgba(20,20,20,0) 30%,rgba(20,20,20,.55) 100%),
    linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.12) 26%,rgba(20,20,20,.22) 58%,rgba(12,12,12,.92) 100%);
}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* Rechterrand van de figuur ligt vast op de rechterrand van de contentkolom (--maxw),
   niet op een percentage van het venster. Excellent gebruikt left:72,5%, maar dat is
   viewport-relatief en dan wandelt de foto zichtbaar mee bij resizen of zoomen.
   Hoogte in px met een procentuele bovengrens die pas ingrijpt op erg lage vensters,
   zodat ook het formaat niet meebeweegt.
   De onderrand duikt bewust achter de offertebalk: .of-wrap schuift
   clamp(56px,7.5vw,104px) omhoog over de hero heen, en 26px daaronder valt de snede weg. */
.hero__person{position:absolute;z-index:0;left:auto;transform:none;
  right:max(0px,calc((100% - var(--maxw)) / 2));
  bottom:calc(clamp(56px,7.5vw,104px) - 26px);height:min(476px,74%);width:auto;
  pointer-events:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.30))}
/* Witte tegenhanger van .reasons__mark. Op de donkere video mag hij zwakker staan dan de
   rode in de lichte sectie, anders vecht hij met de kop. */
.hero__mark{position:absolute;z-index:-1;pointer-events:none;
  top:clamp(5rem,9vw,8rem);right:clamp(.5rem,2.5vw,2.5rem);
  width:min(360px,28vw);height:auto;opacity:.135}
@media(max-width:860px){.hero__mark{width:min(230px,34vw);opacity:.105}}
@media(max-width:620px){.hero__mark{display:none}}
/* Onder 1240px past de kop van 48rem niet meer naast een figuur op 72,5%: "sinds 1927"
   liep dwars door de jonge man heen. Figuur naar de rechterrand en kleiner. */
@media(max-width:1240px){
  .hero__person{right:1.2rem;height:min(340px,60%)}
}
/* Onder 1080px overloopt de titel zijn eigen container, dus naast elkaar botsen ze.
   Daarom klapt de hero hier om, het patroon van SpeedyService en Mejan: tekst boven,
   figuur eronder in de flow, kleiner, en de offertebalk trekt er weer overheen zodat
   de snede onder de heup achter de balk wegvalt. De figuur blijft dus staan op mobiel.
   De picture-wrapper is het flex-kind, niet de img, vandaar de order op .hero__pic. */
@media(max-width:1080px){
  /* align-items MOET mee terug naar stretch: de desktopregel zet hem op end, en in een
     kolom-flexbox is dat de horizontale as, dus dan schrompelt de figuur naar rechts. */
  .hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
    min-height:min(84vh,760px)}
  .hero .wrap{order:1}
  .hero__pic{order:2;display:block}
  .hero__content{padding-block:6.5rem 1.2rem}
  /* 300px is de mobiele maat van SpeedyService en Excellent; boven ~880px venster mag
     hij meegroeien, anders staat hij verloren in een hero die dan nog 1000px breed is. */
  .hero__person{position:static;right:auto;bottom:auto;display:block;
    height:auto;max-height:clamp(300px,34vw,360px);max-width:86%;margin:0 auto}
}
.hero__content{position:relative;z-index:1;padding-block:6rem clamp(9rem,7rem + 18vh,18rem);max-width:48rem;color:#fff}
/* Groter en met schaduw dan elders: hij staat op bewegend videobeeld dat
   plaatselijk licht is, daar valt de standaardmaat van .eyebrow tegen weg. */
.hero .eyebrow{color:var(--red-light);font-size:.98rem;font-weight:900;letter-spacing:.11em;
  text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero .eyebrow::before{background:var(--red-light);width:32px;height:3px}
@media(max-width:560px){.hero .eyebrow{font-size:.88rem}}
.hero__title{font-size:clamp(2.5rem,6.2vw,4.5rem);text-shadow:0 4px 30px rgba(0,0,0,.35)}
/* nowrap houdt "sinds 1927" bij elkaar: anders breekt de regel middenin de
   markering en staat het jaartal los onder het woord. */
.hero__title em{font-style:normal;white-space:nowrap;color:#fff;background:linear-gradient(180deg,transparent 62%,rgba(253,44,44,.95) 62%);padding-inline:.06em}
.hero__sub{margin-top:1.1rem;font-size:clamp(1.05rem,1.4vw,1.28rem);max-width:34rem;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hero__actions{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.8rem}
.hero__trust{margin-top:1.7rem;display:inline-flex;align-items:center;gap:.8rem;color:#fff}
.hero__trust .stars{--on:#FFC247}
.hero__trust strong{font-weight:800}
.hero__trust span{color:rgba(255,255,255,.82);font-size:.92rem}

/* generic stars */
.stars{display:inline-flex;gap:2px}
.stars svg{width:18px;height:18px;color:var(--gold,#F5A623)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
/* Groepen komen element voor element binnen in plaats van als een blok. De
   beginstand staat in CSS, niet in JS, anders flitsen ze eerst zichtbaar voorbij
   voordat het script ze verbergt. */
[data-reveal-groep] > *{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal-groep] > *.in{opacity:1;transform:none}
.hero [data-reveal]{transition-duration:.85s}

/* ---------- Offerte-balk ---------- */
.offerte-overlay{position:relative;margin-top:0;z-index:6;padding:0 clamp(16px,4vw,40px) 60px;background:var(--paper-2);display:flow-root}
.of-wrap{position:relative;max-width:1280px;margin:clamp(-104px,-7.5vw,-56px) auto 0}
.of-box{position:relative;z-index:2;background:var(--red-fill);color:#fff;border-radius:28px;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,52px);box-shadow:0 24px 60px -10px rgba(190,26,34,.42)}
.of-trust{position:absolute;top:20px;right:24px;z-index:5}

/* ---------- Keurmerken ----------
   Google, Trustoo, Erkende Verhuizers en Kiwa zijn merken van derden: hun
   kleuren mogen niet hertint worden. Daarom staan ze altijd op een witte chip,
   los van het rood en antraciet van Feitsma. Per logo een eigen hoogte, want
   ze verschillen sterk in verhouding en moeten optisch even zwaar wegen. */
.keurmerken{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Alle chips exact even groot. De logo's verschillen sterk in verhouding
   (Trustoo is 4,5:1 breed, Kiwa juist staand), dus schalen ze met object-fit
   binnen dezelfde doos. De max-height per logo is de optische correctie:
   zonder dat oogt een breed liggend logo veel kleiner dan een staand. */
.keurmerk{width:98px;height:60px;padding:9px;flex:none;
  display:grid;place-items:center;background:#fff;border-radius:10px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease}
a.keurmerk:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(0,0,0,.25)}
.keurmerk img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.keurmerk--google img{max-height:23px}
.keurmerk--trustoo img{max-height:21px}
.keurmerk--erkend img{max-height:38px}
.keurmerk--kiwa img{max-height:44px}
/* Chips met reviewcijfer: logo boven, cijfer eronder; Klantenvertellen heeft een
   vierkant beeldmerk en krijgt het cijfer ernaast. */
.keurmerk--score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.keurmerk__cijfer{font-weight:900;font-size:1.02rem;line-height:1;color:var(--ink)}
.keurmerk--score.keurmerk--google img{max-height:19px}
.keurmerk--score.keurmerk--trustoo img{max-height:15px}
.keurmerk--kv{display:flex;align-items:center;justify-content:center;gap:7px}
.keurmerk--kv img{max-height:34px}
@media(max-width:560px){
  .keurmerken{gap:6px}
  .keurmerk{width:78px;height:48px;padding:6px;border-radius:8px}
  .keurmerk--google img{max-height:17px}
  .keurmerk--trustoo img{max-height:16px}
  .keurmerk--erkend img{max-height:29px}
  .keurmerk--kiwa img{max-height:34px}
  .keurmerk--score.keurmerk--google img{max-height:14px}
  .keurmerk--score.keurmerk--trustoo img{max-height:11px}
  .keurmerk--kv img{max-height:26px}
  .keurmerk__cijfer{font-size:.88rem}
}
.of-title{font-family:"Lora",Georgia,serif;font-weight:900;letter-spacing:-.02em;line-height:1.05;font-size:clamp(24px,2.4vw,34px);margin:0 0 6px;color:#fff}
.of-sub{font-family:"Lato",sans-serif;font-size:14px;color:#fff;margin:0 0 22px}
.of-form{margin:0}
.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(20,20,20,.18)}
.of-field{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;min-width:0;cursor:text}
.of-field span{font-family:"Lato",sans-serif;font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.02em;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:"Lato",sans-serif;font-size:16px;color:var(--ink);width:100%;padding:0;line-height:1.4;-webkit-appearance:none;appearance:none}
.of-field input::placeholder{color:#9b9b9b}
.of-field select{cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 0 center;padding-right:18px}
.of-field input[type="date"]{font-family:"Lato",sans-serif;color:var(--ink)}
.of-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.15);cursor:pointer;opacity:.7}
.of-divider{background:rgba(20,20,20,.12);width:1px;align-self:center;height:38px}
.of-cta{display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;border:none;border-radius:999px;padding:14px 24px;font-family:"Lato",sans-serif;font-weight:700;font-size:15px;letter-spacing:.005em;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 6px 16px -4px rgba(20,114,55,.55);white-space:nowrap}
.of-cta:hover{background:var(--wa-deep);transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(31,168,85,.7)}
.of-cta svg{width:16px;height:16px}
@media(max-width:880px){.of-trust{position:static;justify-content:flex-start;flex-wrap:wrap;margin-bottom:14px}}
@media(max-width:760px){
  .offerte-overlay{padding-bottom:48px}
  .of-wrap{margin-top:-48px}
  .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(20,20,20,.08)}
  .of-cta{justify-content:center;border-radius:14px;padding:14px 20px}
}

/* ---------- Reviews - trust statement + review marquee ---------- */
.rev{position:relative;background:var(--paper);padding-block:clamp(3rem,6vw,5rem);overflow:hidden}
.rev__orb{position:absolute;z-index:0;right:-12%;top:-12%;width:min(620px,60vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(253,44,44,.16),transparent 62%);pointer-events:none}
.rev__mark{position:absolute;z-index:0;pointer-events:none;right:2%;top:34%;transform:translateY(-50%);
  width:min(300px,26vw);aspect-ratio:1;opacity:.14;
  background:url("../img/mark-feitsma-red.svg") center/contain no-repeat}
.rev__top{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.rev__intro .eyebrow{margin-bottom:.8rem}
.rev__title{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.rev__title em{font-style:normal;color:var(--red)}
.rev__lead{margin-top:1rem;color:var(--muted);max-width:44ch}
.rev__src{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem}
.rev__score{position:relative;color:#fff;border-radius:24px;padding:clamp(1.8rem,3vw,2.8rem);text-align:center;overflow:hidden;box-shadow:var(--shadow);background:#262626 url("../img/score-bg.webp") center/cover no-repeat}
.rev__score::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,54,94,.38) 0%,rgba(13,50,86,.70) 52%,rgba(9,38,66,.88) 100%)}
.rev__scoreglow{position:absolute;inset:0;background:none;pointer-events:none}
.rev__num{position:relative;font-family:"Lora",Georgia,serif;font-weight:700;line-height:.88;font-size:clamp(4.4rem,12vw,7.5rem);letter-spacing:-.03em}
.rev__stars{position:relative;color:var(--red);font-size:1.55rem;letter-spacing:.14em;margin-top:.25rem}
.rev__count{position:relative;margin-top:.7rem;color:rgba(255,255,255,.8);font-size:1.04rem}
.rev__count strong{color:#fff;font-weight:800}
.rev__grid{position:relative;z-index:1;margin-top:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.75rem;margin:0}
.rcard__stars{color:var(--red);font-size:.95rem;letter-spacing:.12em}
.rcard blockquote{margin:0;font-size:1.04rem;line-height:1.5;color:var(--ink)}
.rcard figcaption{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.86rem;color:var(--muted)}
.rcard figcaption b{color:var(--ink);font-weight:700}
.rcard__src{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.rcard__src .dot{width:8px;height:8px;border-radius:50%;background:#1F7A3D}
.rev__cta{position:relative;z-index:1;margin-top:clamp(2rem,4vw,3rem);display:flex;justify-content:center}
@media (max-width:860px){.rev__top{grid-template-columns:1fr}.rev__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rev__grid{grid-template-columns:1fr}}

/* ---------- Story - fotoblokken met tekst ---------- */
.story{padding-block:clamp(2.6rem,6vw,4.5rem);background:var(--paper)}
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4.5vw,3.8rem);align-items:center}
.story__row + .story__row{margin-top:clamp(2.6rem,5vw,4.5rem)}
.story__row:nth-child(even) .story__media{order:2}
.story__media{position:relative;isolation:isolate}
.story__media::before{content:"";position:absolute;inset:0;background:var(--red);
  border-radius:calc(var(--radius) + 12px);transform:rotate(-4deg) translate(-14px,14px);z-index:-1}
.story__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);transform:rotate(1deg)}
.story__photo img{width:100%;height:100%;object-fit:cover}
.story__body .eyebrow{margin-bottom:.8rem}
.story__body h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:18ch}
.story__body p{margin-top:1.1rem;color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:46ch}
.story__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:860px){
  .story__row{grid-template-columns:1fr;gap:1.6rem}
  .story__row:nth-child(even) .story__media{order:0}
  .story__media{max-width:32rem}
}

/* ---------- USP / unieke features ---------- */
.usp{background:var(--ink);color:#fff;padding-block:clamp(3.4rem,7vw,6rem);position:relative;overflow:hidden}
.usp::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 0%,rgba(200,30,30,.22),transparent 60%)}
.usp__head{position:relative;text-align:center;max-width:40rem;margin:0 auto 2.6rem}
.usp__head .eyebrow{color:#F27A7A}
.usp__head .eyebrow::before{background:#F27A7A}
.usp__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-top:.7rem}
.usp__head p{margin-top:.8rem;color:rgba(255,255,255,.74)}
.usp__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);padding:1.6rem;
  transition:transform .3s var(--ease),background .3s,border-color .3s;
}
.feature:hover{transform:translateY(-4px);background:rgba(255,255,255,.07);border-color:rgba(249,128,128,.45)}
.feature__ic{
  width:62px;height:62px;border-radius:14px;background:#fff;
  display:grid;place-items:center;box-shadow:0 10px 26px -14px rgba(0,0,0,.6);margin-bottom:1.1rem;
}
.feature__ic img{width:40px;height:40px}
.feature h3{font-size:1.18rem}
.feature p{margin-top:.45rem;color:rgba(255,255,255,.72);font-size:.96rem}

/* ---------- Erkende Verhuizer, 10 zekerheden ----------
   Zelfde kaartidioom als .dozen: rode kaart met merkteken als watermerk.
   Het EV-logo is oranje met donkerblauw en mag niet hertint worden, dus het
   staat op dezelfde witte chip als de andere keurmerken. */
.erkend{padding-block:clamp(2.6rem,5vw,4.2rem);background:var(--paper-2)}
.erkend__card{position:relative;isolation:isolate;overflow:hidden;
  background:var(--red-fill);color:#fff;border-radius:28px;box-shadow:var(--shadow);
  padding:clamp(1.8rem,3.6vw,3rem)}
.erkend__card::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-4%;top:50%;transform:translateY(-50%);width:min(420px,34%);aspect-ratio:1;opacity:.07;
  background:url("../img/mark-feitsma-white.svg") center/contain no-repeat}
.erkend__head{position:relative;z-index:1;display:flex;align-items:stretch;
  gap:clamp(1.1rem,2.4vw,2rem);flex-wrap:wrap}
/* Chip loopt op stretch even hoog door als het tekstblok ernaast. Hoogte dus
   auto, en breed genoeg dat het liggende logo daarin niet wegvalt. */
.erkend__logo{flex:none;width:clamp(180px,19vw,250px);height:auto;padding:20px}
.erkend__logo img{max-height:none}
.erkend__intro{flex:1 1 26ch;min-width:0}
.erkend__intro .eyebrow{color:#fff;margin-bottom:.7rem}
.erkend__intro .eyebrow::before{background:rgba(255,255,255,.75)}
.erkend__intro h2{font-size:clamp(1.5rem,2.8vw,2.2rem);max-width:22ch}
.erkend__intro p{margin-top:.8rem;color:rgba(255,255,255,.92);max-width:64ch}
/* Twee kolommen van vijf. columns i.p.v. grid, dan lopen de items netjes
   door zonder dat een lange omschrijving een hele rij hoger maakt. */
.erkend__list{position:relative;z-index:1;list-style:none;margin:clamp(1.4rem,2.6vw,2.2rem) 0 0;padding:0;
  columns:2;column-gap:clamp(1.6rem,3vw,3rem)}
.erkend__list li{break-inside:avoid;display:flex;gap:.9rem;align-items:flex-start;
  padding:.72rem 0;border-top:1px solid rgba(255,255,255,.22)}
/* De duimpjes van Erkende Verhuizers in plaats van cijfers, in hun oranje. */
.erkend__no{min-width:1.8rem;flex:none;margin-top:.1rem}
.erkend__no svg{width:21px;height:21px;color:var(--gold)}
.erkend__list b{display:block;font-weight:800;font-size:.98rem;margin-bottom:.1rem}
.erkend__list li span:last-child{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.88)}
.erkend__cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.8rem;
  margin-top:clamp(1.4rem,2.6vw,2.1rem)}
@media (max-width:760px){
  .erkend__list{columns:1}
  .erkend__card::before{width:min(240px,52%);right:-10%;opacity:.06}
}
/* Na de basisregels, anders zet de flex-shorthand van .erkend__intro de basis
   hieronder gewoon weer terug op 26ch. */
@media (max-width:560px){
  /* Intro wrapt hier naar een eigen regel, dan valt er niets meer mee te
     stretchen en heeft de chip weer een eigen hoogte nodig. */
  .erkend__logo{width:150px;height:92px;padding:12px}
  .erkend__intro{flex-basis:100%}
}

/* ---------- Gratis verhuisdozen ----------
   Rode kaart met tekst links en de foto rechts vol in de kolom. De foto bloedt
   tot aan de kaartrand, vandaar overflow:hidden op de kaart zelf. */
/* padding-bottom is 0: de calculator sluit er direct op aan en levert de
   onderruimte van het geheel. */
.dozen{padding:clamp(2.6rem,5vw,4.2rem) 0 0;background:var(--paper)}
.dozen__card{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1.18fr .82fr;
  background:var(--red-fill);color:#fff;border-radius:28px 28px 0 0;box-shadow:var(--shadow)}
/* Merkteken als watermerk, net als in de reasons-sectie. */
.dozen__card::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:36%;top:50%;transform:translateY(-50%);width:min(300px,24%);aspect-ratio:1;opacity:.07;
  background:url("../img/mark-feitsma-white.svg") center/contain no-repeat}
.dozen__body{position:relative;z-index:1;padding:clamp(1.6rem,2.8vw,2.4rem) clamp(1.6rem,3vw,2.6rem)}
.dozen__body .eyebrow{color:#fff;margin-bottom:.6rem}
.dozen__body .eyebrow::before{background:rgba(255,255,255,.75)}
.dozen__body h2{font-size:clamp(1.45rem,2.5vw,1.95rem);max-width:20ch}
.dozen__body p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:54ch;font-size:.95rem}
.dozen__sign{font-style:italic;font-weight:700;color:#fff !important}
.dozen__media{position:relative;min-height:100%}
.dozen__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
@media (max-width:860px){
  .dozen__card{grid-template-columns:1fr}
  .dozen__card::before{right:6%;top:auto;bottom:34%;transform:none;width:min(200px,38%)}
  .dozen__media{min-height:260px;order:-1}
  .dozen__media img{position:static;height:260px}
}

/* ---------- Verhuisdozen-calculator ----------
   Zit met margin-top:0 en vierkante bovenhoeken tegen .dozen__card aan, samen
   vormen ze een blok. Alleen de buitenhoeken zijn rond. */
.calc{padding:0 0 clamp(2.6rem,5vw,4.2rem);background:var(--paper)}
.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)}
.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:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.calc__veld input,.calc__veld select{
  font-family:inherit;font-size:1rem;font-weight:700;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem;width:100%;
  background:var(--paper);-webkit-appearance:none;appearance:none}
.calc__veld input:focus,.calc__veld select:focus{outline:2px solid var(--red);outline-offset:1px}
.calc__veld i{position:absolute;right:.7rem;bottom:.72rem;font-style:normal;font-size:.82rem;color:var(--muted);pointer-events:none}
.calc__veld--sel{position:relative}
.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:800;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:700;
  transition:border-color .2s ease,background .2s ease}
.calc__extras label:has(input:checked){border-color:var(--red);background:var(--red-soft);color:var(--red-deep)}
.calc__extras input{accent-color:var(--red-fill);width:15px;height:15px;margin:0}
/* Uitkomstpaneel rechts, over alle rijen heen. */
.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:18px;padding:clamp(1.1rem,2vw,1.6rem);min-width:15rem}
.calc__label{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.calc__getal{font-family:"Lora",Georgia,serif;font-weight:700;font-size:clamp(2.2rem,4vw,3rem);line-height:1}
.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:22ch}
.calc__uit .btn{margin-top:.9rem;width:100%}
/* Tweede route naast de offerteknop, bewust een link en geen tweede knop:
   in dit smalle paneel gaan twee knoppen boven elkaar overheersen. */
.calc__wa{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;
  font-size:.82rem;font-weight:700;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}
@media (max-width:860px){
  .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:420px){.calc__velden{grid-template-columns:1fr}}

/* ---------- Waarom - split (grote aerial + oranje uitgeknipte iconen) ---------- */
.waarom{background:#262626;color:#fff;padding-block:clamp(3rem,6vw,5rem)}
.waarom__grid{display:grid;grid-template-columns:1.32fr .8fr;gap:clamp(1.4rem,3vw,3rem);align-items:stretch}
.waarom__photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);min-height:clamp(380px,42vw,580px)}
.waarom__photo img{width:100%;height:100%;object-fit:cover;object-position:22% center;display:block}
.waarom__head .eyebrow{color:#F98080}
.waarom__head .eyebrow::before{background:#F98080}
.waarom__head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:.6rem}
.waarom__list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.4rem}
/* Bel-knop hier als ghost: .btn--ink is #262626 en dat is precies de
   achtergrond van deze sectie, dus die zou onzichtbaar worden. */
.waarom__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
/* Beide knoppen even groot, ook wanneer ze onder elkaar wrappen. */
.waarom__cta .btn{flex:1 1 0;min-width:max-content}
.wmini{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem;transition:transform .3s var(--ease),background .3s,border-color .3s}
.wmini:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(249,128,128,.4)}
.wmini h3{font-family:"Lora",Georgia,serif;font-size:1.05rem;margin:0 0 .25rem;display:flex;align-items:center;gap:.55rem}
.wmini h3 img{width:30px;height:30px;flex:none}
.wmini p{color:rgba(255,255,255,.7);font-size:.9rem;margin:0}
@media(max-width:880px){.waarom__grid{grid-template-columns:1fr}}
@media(max-width:560px){.waarom__list{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
/* Lichtere band tussen story en lead-blok, zodat de FAQ optisch losstaat van het
   formulier eronder. Werkt op native <details>, dus zonder JavaScript. */
.faq{padding-block:clamp(3rem,6vw,5rem);background:var(--paper-2)}
.faq__head{max-width:42rem;margin:0 0 clamp(1.5rem,3vw,2.2rem)}
.faq__head .eyebrow{margin-bottom:.7rem}
.faq__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.faq__list{display:grid;gap:.7rem}
.faq__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq__item:hover{box-shadow:var(--shadow)}
.faq__item[open]{border-color:var(--red)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,1.8vw,1.25rem) clamp(1.1rem,2.2vw,1.55rem);
  cursor:pointer;list-style:none;
  font-family:"Lora",Georgia,serif;font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.3;
  transition:color .2s var(--ease);
}
/* Safari toont anders nog een eigen driehoekje naast onze plus. */
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--red-deep)}
.faq__item summary:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:var(--radius)}
/* Plus die een min wordt: het verticale streepje klapt weg bij open. */
.faq__sign{
  position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--red-soft);transition:background .25s var(--ease);
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--red-deep);border-radius:2px;
}
.faq__sign::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.faq__sign::after{width:2px;height:13px;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.faq__item[open] .faq__sign{background:var(--red-fill)}
.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after{background:#fff}
.faq__item[open] .faq__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__answer{
  padding:0 clamp(1.1rem,2.2vw,1.55rem) clamp(1.1rem,2vw,1.35rem);
  max-width:52rem;color:var(--muted);
}
.faq__answer p+p{margin-top:.7rem}
.faq__answer a{color:var(--red-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
  .faq__item summary{font-size:1rem;gap:.7rem}
  .faq__sign{width:24px;height:24px}
}

/* ---------- Lead-blok: foto + offerteformulier (liggend) ---------- */
.leadblock{padding-block:clamp(3rem,6vw,5rem)}
.leadblock__card{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#262626}
.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,#E52626 0%,#C81E1E 60%,#A81818 100%)}
.leadblock__panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 95% 0%,rgba(255,255,255,.16),transparent 55%)}
.leadblock__panel>*{position:relative}
.leadblock__panel .eyebrow{color:#fff}
.leadblock__panel .eyebrow::before{background:rgba(255,255,255,.75)}
.leadblock__panel h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:.55rem}
.leadblock__panel .lead-p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:46ch}
.lead-google{display:inline-flex;align-items:center;gap:8px;margin-top:1.1rem;background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-family:"Lato",sans-serif;font-size:13px;font-weight:600;box-shadow:0 6px 16px -6px rgba(0,0,0,.3)}
.lead-google__logo{height:14px;width:auto;flex-shrink:0}
.lead-google__stars{color:#FBBC05;letter-spacing:.05em;font-size:12px;line-height:1}
.lead-google strong{font-weight:800}
.lead-google__cnt{color:var(--muted);font-weight:600}
.lf{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
/* align-items:start, anders rekken de kolommen mee met de hoogste. Het datumveld
   werd hoger door het vinkje eronder, waardoor de pijl van "Type woning" (die aan
   de onderkant hangt) los onder het invulveld kwam te zweven. */
.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:800;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:12px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:1rem;font-weight:600;padding:.72rem .85rem;width:100%;-webkit-appearance:none;appearance:none}
.lf__field input:not([type=checkbox])::placeholder{color:#9b9b9b;font-weight:500}
.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__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.45rem}
.leadblock .btn--ink{--bg:#262626}
@media(max-width:820px){
  .leadblock__card{grid-template-columns:1fr}
  .leadblock__media{min-height:0;aspect-ratio:16/10}
}
@media(max-width:460px){
  .lf__row{grid-template-columns:1fr}
}

/* ---------- Footer (archieffilm + donkere overlay) ----------
   De poster is de vaste ondergrond: staat er meteen, en blijft staan als de
   video niet laadt, op mobiel, of bij reduced-motion. De donkere laag zit in
   .foot__veil in plaats van in de achtergrond van .foot zelf, want die zou
   onder de video vallen in plaats van erover. */
.foot{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  padding-block:clamp(3rem,6vw,5rem) 0;
  background:#1a1a1a url("../video/feitsma-footer-poster.webp") center 40%/cover no-repeat}
.foot__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;z-index:-3;opacity:0;transition:opacity .9s ease}
.foot__video.is-playing{opacity:1}
.foot__veil{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,30,30,.86) 0%,rgba(18,18,18,.93) 100%)}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 12% 0%,rgba(253,44,44,.24),transparent 58%)}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr 1.35fr;gap:clamp(1.6rem,3.4vw,3rem)}
.foot__logo{width:clamp(180px,16vw,224px);height:auto}
.foot__tag{margin-top:1.1rem;color:rgba(255,255,255,.78);font-size:.97rem;line-height:1.6;max-width:42ch}
.foot__trust{margin-top:1.4rem}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.foot__col h3{font-family:"Lora",Georgia,serif;font-weight:700;font-size:1.06rem;margin-bottom:.9rem;color:#fff}
.foot__col a{color:rgba(255,255,255,.76);font-size:.96rem;display:inline-flex;align-items:center;gap:.55rem;
  transition:color .2s var(--ease),transform .2s var(--ease)}
.foot__col a:not(.foot__cta):hover{color:var(--red);transform:translateX(3px)}
.foot__col a svg{width:16px;height:16px;flex:none;color:var(--red)}
.foot__cta{margin-bottom:.5rem;background:var(--red);color:#fff;border-radius:999px;padding:.72rem 1.15rem;font-weight:700;
  box-shadow:0 14px 30px -14px rgba(253,44,44,.9);transition:background .2s,transform .2s var(--ease)}
.foot__cta svg{color:#fff}
.foot__cta:hover{background:var(--red-deep);transform:translateY(-2px)}
.foot__area{color:rgba(255,255,255,.58);font-size:.9rem;margin-top:.2rem}
.foot__bottom{margin-top:clamp(2rem,4vw,3.2rem);border-top:1px solid rgba(255,255,255,.14);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.foot__bottom small{color:rgba(255,255,255,.6)}
.foot__legal{display:flex;gap:1.3rem}
.foot__legal a{color:rgba(255,255,255,.6);font-size:.88rem;transition:color .2s var(--ease)}
.foot__legal a:hover{color:var(--red)}
@media (max-width:860px){
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .foot__top{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .scorebar{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .usp__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .topbar__tel{display:none}
  /* Alleen de WhatsApp-knop wordt icoon-only; "Offerte" blijft leesbaar. */
  .topbar .btn--wa span.lbl{display:none}
  .topbar .btn{padding:.7rem .85rem}
  /* Het logo is een brede lockup: op smalle schermen terugbrengen, anders
     duwt het de app- en offerteknop van het scherm af. */
  .topbar__logo img,
  .topbar__logo img+img,
  .topbar.is-stuck .topbar__logo img,
  .topbar.is-stuck .topbar__logo img+img{height:38px}
  /* Liggende video in een staande hero wordt anders een uitvergrote sliver. */
  .hero{min-height:min(76vh,600px)}
  /* De 5,5rem eronder stamt uit de tijd dat de figuur op mobiel verborgen was en de
     tekst zelf ruimte moest houden boven de offertebalk. Nu staat de figuur eronder,
     dus die ruimte is dood gewicht: eruit halen tilt figuur en balk samen ~10% van de
     herohoogte omhoog. Boven blijft 6rem staan, dat is de vrije ruimte onder de topbar. */
  .hero__content{padding-block:6rem .8rem}
  .usp__grid{grid-template-columns:1fr}
  .cta__card{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-groep] > *{opacity:1;transform:none;transition:none}
}
/* Bij afdrukken staat er geen scroll, dus alles gewoon tonen. */
@media print{
  [data-reveal],[data-reveal-groep] > *{opacity:1;transform:none;transition:none}
  .hero__video{display:none}
}

/* ---------- Wat we doen - 4 blokken ---------- */
.services{padding-block:clamp(3.4rem,7vw,5.5rem)}
.services__head{max-width:42rem;margin:0 0 2.2rem}
.services__head .eyebrow{margin-bottom:.7rem}
.services__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.svc{border-radius:var(--radius);padding:1.7rem 1.5rem;color:#fff;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc--ink{background:var(--ink)}
.svc--red{background:var(--red)}
.svc__ic{width:46px;height:46px;margin-bottom:1.1rem}
.svc__ic svg{width:100%;height:100%}
.svc--ink .svc__ic{color:var(--red)}
.svc--red .svc__ic{color:#fff}
.svc h3{font-size:1.22rem;margin-bottom:.5rem}
.svc p{font-size:.95rem;line-height:1.55}
.svc--ink p{color:rgba(255,255,255,.74)}
.svc--red p{color:rgba(255,255,255,.92)}

/* ---------- Werkwijze - 4 stappen ---------- */
.werkwijze{padding-block:clamp(3.4rem,7vw,5.5rem)}
.werkwijze__head{max-width:42rem;margin:0 0 2.2rem}
.werkwijze__head .eyebrow{margin-bottom:.7rem}
.werkwijze__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.werkwijze__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.step{position:relative;border-radius:var(--radius);padding:1.7rem 1.45rem;color:#fff;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step--ink{background:#262626}
.step--red{background:var(--red-fill)}
/* Zelfde oranje duim als in de reasons- en erkend-lijst. */
.step__no{position:absolute;top:1.2rem;right:1.3rem;opacity:.8}
.step__no svg{width:30px;height:30px;color:var(--gold)}
.step__ic{width:44px;height:44px;margin-bottom:1rem}
.step__ic svg{width:100%;height:100%}
.step--ink .step__ic{color:var(--red)}
.step--red .step__ic{color:#fff}
.step h3{font-size:1.18rem;margin-bottom:.45rem;padding-right:1.6rem}
.step p{font-size:.93rem;line-height:1.55}
.step--ink p{color:rgba(255,255,255,.74)}
.step--red p{color:rgba(255,255,255,.92)}
.step__tag{margin-top:auto;padding-top:1rem;font-family:"Lato",sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.4rem}
.step--ink .step__tag{color:var(--red-light)}
/* WhatsApp-knop onder in een stapkaart. margin-top:auto houdt hem net als .step__tag
   op de bodem, zodat de vier kaarten onderling uitgelijnd blijven. */
.step__wa{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--wa);color:#fff;border-radius:999px;padding:.55rem .9rem;
  font-family:"Lato",sans-serif;font-weight:800;font-size:.8rem;line-height:1;white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(20,114,55,.6);
  transition:background .2s ease,transform .2s var(--ease)}
.step__wa:hover{background:var(--wa-deep);transform:translateY(-2px)}
.step__wa svg{width:16px;height:16px;flex:none;fill:currentColor}
/* De knop heeft eigen ruimte nodig waar .step__tag alleen padding-top had. */
.step p + .step__wa{margin-top:1rem}
@media(max-width:860px){.werkwijze__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.werkwijze__grid{grid-template-columns:1fr}}

/* ---------- Waarom - 5 redenen ---------- */
.reasons{position:relative;overflow-x:clip;padding-block:clamp(3.4rem,7vw,5.5rem);background:var(--paper-2)}
/* Merkteken als watermerk rechtsboven. SVG (potrace van het logo), dus scherp
   op elk formaat. De right-waarde lijnt hem uit op de contentkolom zolang die
   smaller is dan het scherm, en valt daarna terug op een marge van 1,2rem. */
.reasons__mark{position:absolute;z-index:0;pointer-events:none;
  top:clamp(.2rem,1vw,1rem);
  right:clamp(.5rem,2.5vw,2.5rem);
  width:min(360px,28vw);height:auto;opacity:.12}
@media (max-width:860px){.reasons__mark{width:min(220px,34vw);opacity:.10}}
/* Onder 720px stapelt de sectie en schuift de fotokaart eroverheen,
   dan blijft er alleen een half afgedekte boog over. Liever weg. */
@media (max-width:720px){.reasons__mark{display:none}}
.reasons__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.reasons__media{position:relative;isolation:isolate}
.reasons__media::before{content:"";position:absolute;inset:0;background:var(--red);
  border-radius:calc(var(--radius) + 14px);transform:rotate(-5deg) translate(-16px,16px);z-index:-1}
.reasons__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);transform:rotate(1deg)}
.reasons__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.reasons__badge{position:absolute;right:-10px;bottom:-20px;background:#262626;color:#fff;
  border-radius:16px;padding:.95rem 1.15rem;box-shadow:var(--shadow);z-index:2}
.reasons__ab{display:block;font-family:"Lora",Georgia,serif;font-weight:700;font-size:1.5rem;line-height:1;color:var(--red)}
.reasons__abk{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.4rem}
.reasons__body .eyebrow{margin-bottom:.8rem}
.reasons__body h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:14ch}
.reasons__list{list-style:none;margin:1.5rem 0 0;padding:0}
.reasons__list li{display:flex;gap:1rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px solid var(--line)}
.reasons__list li:first-child{border-top:1px solid var(--line)}
.reasons__num{min-width:1.7rem;flex:none;margin-top:.1rem}
.reasons__num svg{width:20px;height:20px;color:var(--gold)}
.reasons__stats{display:flex;gap:clamp(1.4rem,4vw,2.6rem);margin-top:1.8rem}
.reasons__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
.reasons__stat b{display:inline-flex;align-items:center;gap:.18em;font-family:"Lora",Georgia,serif;font-weight:700;font-size:1.7rem;line-height:1}
.reasons__stat b svg{width:1.05em;height:1.05em;color:var(--gold)}
.reasons__stat small{display:block;margin-top:.3rem;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.reasons__cta{margin-top:1.8rem}

/* Gespiegelde variant: tekst links, foto rechts, blauwe achtergrondkaart */
.reasons--alt{background:var(--paper)}
.reasons--alt .reasons__grid{grid-template-columns:1.05fr 1fr}
.reasons--alt .reasons__media{order:2}
.reasons--alt .reasons__media::before{background:#262626;transform:rotate(5deg) translate(16px,16px)}
.reasons--alt .reasons__photo{transform:rotate(-1deg)}
.reasons--alt .reasons__badge{right:auto;left:-10px;background:var(--red)}
.reasons--alt .reasons__ab{font-size:1.7rem;color:#fff}
@media (max-width:880px){
  .reasons--alt .reasons__grid{grid-template-columns:1fr}
  .reasons--alt .reasons__media{order:0}
}

/* Story: tweede kaart blauw i.p.v. oranje */
.story__row:nth-child(2) .story__media::before{background:#262626}

/* Keurmerk-badge (het element uit de redenen-sectie) herhaald op de overige
   fotoblokken. Op de blauwe story-kaart in het rood; in containers met
   overflow:hidden (waarom, dozen) niet uitstekend maar op de rand van de foto. */
.story__row:nth-child(2) .reasons__badge{right:auto;left:-10px;background:var(--red)}
.story__row:nth-child(2) .reasons__ab{color:#fff}
.waarom__photo .reasons__badge{right:16px;bottom:16px}
.dozen__media .reasons__badge{right:16px;bottom:16px}
/* Op smalle schermen dekt de badge te veel van de foto af. */
@media(max-width:760px){.waarom__photo .reasons__badge{display:none}}
.reasons__badge--logo{text-align:center}
.reasons__badge--logo img{height:52px;width:auto;background:#fff;border-radius:8px;padding:6px 10px;margin-inline:auto}
.reasons__badge--logo .reasons__abk{margin-top:.55rem}

@media (max-width:980px){.services__grid{grid-template-columns:1fr 1fr}}
@media (max-width:880px){
  .reasons__grid{grid-template-columns:1fr}
  .reasons__media{max-width:24rem;margin-inline:auto}
}
@media (max-width:520px){.services__grid{grid-template-columns:1fr}}

.foot__social{display:flex;gap:.6rem;margin-top:1.2rem}.foot__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:background .2s ease,transform .2s ease}.foot__social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}.foot__social svg{width:18px;height:18px}

/* ---------- Zwevende WhatsApp-knop ----------
   1-op-1 van oranjelift.nl: ronde knop rechtsonder met een ring die van 1 naar 1,5
   schaalt terwijl hij vervaagt. Op mobiel staat hij hier wel (op verzoek), maar dan
   als mini-versie. Kan hier ook veilig: deze pagina heeft geen vaste onderbalk waar
   hij overheen zou vallen. */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:998;
  width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wa);color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s ease;
}
.wa-float svg{width:34px;height:34px;fill:currentColor;position:relative;z-index:1}
.wa-float:hover{background:var(--wa-deep);transform:scale(1.08);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.wa-float:active{transform:scale(.96)}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--wa);z-index:-1;
  animation:wa-puls 2s ease-out infinite;
}
@keyframes wa-puls{
  0%  {transform:scale(1);   opacity:.45}
  100%{transform:scale(1.5); opacity:0}
}
/* Onder 768px kleiner en dichter op de hoek, zodat hij zo min mogelijk content afdekt.
   De env() houdt hem op een iPhone vrij van de home-indicator; die is 0 zolang de
   Safari-onderbalk zichtbaar is, dus dan blijft het gewoon 16px. */
@media (max-width:767.98px){
  .wa-float{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:50px;height:50px}
  .wa-float svg{width:26px;height:26px}
}
/* De ring is puur decoratief, dus uit bij bewegingsgevoeligheid. */
@media (prefers-reduced-motion:reduce){.wa-float::after{animation:none;opacity:0}}

/* ---------- Dozenschatting in het offerteformulier ----------
   Uitklapper op het rode paneel. <details> doet het open en dicht zelf, dus geen
   extra JS en het werkt ook zonder toetsenbordgedoe. */
.lfcalc{margin-top:.2rem;border:1px solid rgba(255,255,255,.3);border-radius:14px;
  background:rgba(255,255,255,.10);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:800;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:.66rem}
.lfcalc__velden input,.lfcalc__velden select{padding:.6rem .7rem;font-size:.95rem}
.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:.66rem;font-weight:800;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:700;color:#fff;transition:background .2s ease,border-color .2s ease}
.lfcalc__extras label:has(input:checked){background:#fff;color:var(--red-deep);border-color:#fff}
.lfcalc__extras input{accent-color:#fff;width:14px;height:14px;margin:0}
.lfcalc__uit{font-size:.85rem;line-height:1.5;color:#fff;
  background:rgba(0,0,0,.22);border-radius:10px;padding:.6rem .75rem}
.lfcalc__uit strong{font-weight:900}
@media (max-width:620px){.lfcalc__velden{grid-template-columns:1fr 1fr}}

.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:#fff;color:var(--red-deep);
  transition:transform .2s var(--ease),background .2s ease}
.lfcalc__ok:hover{transform:translateY(-1px);background:#FFF3F3}
.lfcalc__wis{font-family:inherit;font-weight:700;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}
/* Toegevoegd: de kop krijgt een vinkje en de knop bevestigt dat hij bijgewerkt is. */
.lfcalc.is-toegevoegd{border-color:#fff;background:rgba(255,255,255,.18)}
.lfcalc.is-toegevoegd .lfcalc__titel::before{content:"\2713";margin-right:.45rem;font-weight:900}
.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)}

/* Vinkje onder het datumveld in het offerteformulier. */
/* align-self:flex-start, anders rekt de label over de volle kolombreedte uit
   (.lf__field is een kolom-flex met stretch) en kun je ook naast de tekst klikken. */
.lf__optie{display:inline-flex;align-self:flex-start;align-items:center;gap:.45rem;
  margin-top:.45rem;cursor:pointer;width:fit-content;
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.92)}
.lf__optie input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;
  accent-color:#fff;width:16px;height:16px;min-width:16px;margin:0;padding:0;flex:none;
  background:none;border-radius:0}
.lf__optie:hover{color:#fff}