/* Heerlijk Thuis Verhuisservice, Ads-lander (verhuizen/).
   Opzet: hero met een foto van rand tot rand plus de offerte-pill, dozenkaart met calculator en het
   leadblock-formulier zijn 1-op-1 overgenomen van pro.feitsma.nl (~/feitsma-landing) en omgezet naar de
   kleuren van mijnheerlijkthuis.nl; de verhuischecklist en de inpaktips komen 1-op-1 van
   pro.sprintkoeriers.nl/kleine-verhuizing-amsterdam. Kleurmapping: rood -> goud #DBC096 (vlakken) en
   #7A5F2A (gouden tekst op licht), antraciet -> #3D3B3A (logo), ink-panelen en footer -> #553838 (site),
   WhatsApp-groen (CTA) -> antraciet, paper -> #FDFBF8 / #F2F1E9 (site). Koppen Open Sans 700, Josefin Sans
   voor labels, knoppen, chips en cijfers, lopende tekst Open Sans 400. Contrast: _werk/contrast.txt. */

@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/josefinsans-300-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:'Josefin Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/josefinsans-300-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:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/opensans-300-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:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/opensans-300-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{
  --creme:#F2F1E9; --creme-2:#ECEADA; --secundair:#ECEADA; --bruin:#553838; --zand:#E6D9C1; --goud-hover:#E0C9A6; --licht-hover:#EFEDE0;
  --goud:#DBC096; --goud-licht:#F2E8D3; --goud-diep:#7A5F2A; --goud-donker:#C9AB78;
  --ant:#222A23; --ant-diep:#2B2A29; --ant-zacht:#5A5F5A; --wit:#FFFFFF; --lijn:#DCD1BD;
  --ok:#2E6B3A; --fout:#A33A2E;
  --font-kop:'Josefin Sans',Georgia,'Times New Roman',serif;
  --font-tekst:'Open Sans','Helvetica Neue',Arial,sans-serif;
  --font-titel:'Josefin Sans',Georgia,'Times New Roman',serif;
  --maxw:1200px; --pad:clamp(16px,4vw,40px); --r:18px; --r-boog:999px 999px 18px 18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --schaduw:0 18px 50px -22px rgba(43,42,41,.35);
  --schaduw-lg:0 40px 90px -40px rgba(43,42,41,.55);
  --schaduw-kaart:0 1px 2px rgba(43,42,41,.05),0 14px 34px -22px rgba(43,42,41,.28);
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:170px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--ant);font:400 1.09rem/1.6 var(--font-kop);overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-titel);font-weight:600;line-height:1.18;letter-spacing:.02em;margin:0 0 .6em;color:var(--ant)}
p{margin:0 0 1.15em;line-height:1.72}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
svg{fill:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sectie{padding-block:clamp(3.5rem,7vw,6rem)}
/* twee secties met hetzelfde vlak achter elkaar tellen hun padding dubbel (96 + 96 = 190px op 1360)
   en dat leest als een gat. Volgt er zo'n sectie, dan halveert de bovenkant. Secties met een eigen
   vlak (--creme2, reviews) houden hun volle padding, want daar hoort de ruimte bij het kleurvlak. */
.sectie:not(.sectie--creme2):not(.reviews) + .sectie:not(.sectie--creme2):not(.reviews){padding-top:clamp(1.25rem,2.4vw,2rem)}
.sectie--creme2{background:var(--creme-2)}
.label,.eyebrow{font:400 .8rem/1.3 var(--font-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--goud-diep);display:inline-flex;align-items:center;gap:.75rem;margin:0 0 1.1rem}
.label::before,.eyebrow::before{content:"";width:2rem;height:1px;background:var(--goud-diep);flex:none}
.kop{font-size:clamp(2.05rem,3.6vw,2.95rem);color:var(--goud-diep)}
.intro{font-size:1.2rem;color:var(--ant-zacht);max-width:62ch}
.sectiekop{max-width:760px;margin-bottom:clamp(2rem,4vw,3rem)}
.sectiekop--midden{margin-inline:auto;text-align:center}
.sectiekop--midden .label{justify-content:center}
.sectiekop--midden .intro{margin-inline:auto}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1.05rem 1.6rem .9rem;border-radius:2rem;font:400 .82rem/1.2 var(--font-kop);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:normal;text-align:center;transition:none}
.btn svg{width:12px;height:12px;flex:none;margin-top:-.15em;order:2}
.btn--ant{background:var(--goud);color:#fff}
.btn--ant:hover{background:var(--goud-hover);color:#fff}
.btn--goud{background:var(--goud);color:#fff}
.btn--goud:hover{background:var(--goud-hover);color:#fff}
.btn--lijn{background:var(--secundair);border-color:var(--secundair);color:#000}
.btn--lijn:hover{background:var(--licht-hover);color:#000}
.btn--ghost{background:var(--secundair);color:#000}
.btn--ghost:hover{background:var(--licht-hover);color:#000}
/* WhatsApp-knop. Wit met het merkteken in WhatsApp-groen: herkenbaar zonder het goud/zand-palet te
   breken, en leesbaar op creme, op de gouden leadblock-kaart en op de donkere footer. Wil je hem
   toch vol groen: background #25D366, border-color #25D366, color #0B3D2C, svg color #fff. */
.btn--wa{background:var(--wit);border-color:var(--lijn);color:var(--ant)}
.btn--wa:hover{background:var(--goud-licht);border-color:var(--goud-donker);color:var(--ant)}
.btn--wa svg{width:15px;height:15px;order:0;margin-top:-.1em;color:#25D366}
/* Groene actieknop. Werkt op elke .btn, niet alleen op WhatsApp: hij markeert per sectie de knop
   waarop de meeste kliks worden verwacht. Donkere letter want wit op #25D366 haalt maar 2:1; zo
   staat de tekst op 7,4:1 en blijft de knop onmiskenbaar groen. Staat na de andere .btn--varianten,
   dus hij wint van goud, ant en lijn zonder !important. */
.btn--groen{background:#25D366;border-color:#21BE5C;color:#0A2E1F}
.btn--groen:hover{background:#1FBF5C;border-color:#1AA850;color:#0A2E1F}
.btn--groen svg{color:#0A2E1F}
/* losse WhatsApp-regel in secties die verder geen knop hadden */
.wa-rij{display:flex;justify-content:center;margin:clamp(1.8rem,3.2vw,2.6rem) 0 0}
.wa-rij--links{justify-content:flex-start;margin:1.4rem 0 0}
@media(max-width:620px){.wa-rij{margin-inline:auto;max-width:23rem}.wa-rij .btn{width:100%}}
.btn--lg{padding:1.3rem 1.9rem 1.1rem;font-size:.9rem}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--goud-diep);outline-offset:3px}
.knoprij{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch}
@media(max-width:620px){.knoprij{max-width:23rem}.knoprij .btn{width:100%}}

/* ---------- topbar (1-op-1 Feitsma: zweeft over de hero, wordt vast en licht na 40px) ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;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}
.topbar__logo{position:relative;display:flex;align-items:center}
.topbar__logo img{height:166px;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:600 1rem/1 var(--font-kop);letter-spacing:.02em;color:#fff;text-decoration:none;padding:.5rem .4rem .4rem;transition:color .35s var(--ease)}
.topbar__tel svg{width:18px;height:18px}
.topbar .btn{padding:.78rem 1.15rem .62rem;font-size:.85rem}
.topbar.is-stuck{background:rgba(253,251,248,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 2px 10px rgba(43,42,41,.06);padding:.55rem 0}
.topbar.is-stuck .topbar__logo img,.topbar.is-stuck .topbar__logo img+img{height:109px}
@media(min-width:1200px){.topbar__logo img{height:200px}.topbar.is-stuck .topbar__logo img,.topbar.is-stuck .topbar__logo img+img{height:131px}}
.topbar.is-stuck .topbar__tel{color:var(--ant)}
@media(max-width:620px){
  .topbar__tel{display:none}
  .topbar .btn .lbl{display:none}
  .topbar .btn{padding:.7rem .85rem .55rem}
  .topbar__logo img,.topbar__logo img+img,.topbar.is-stuck .topbar__logo img,.topbar.is-stuck .topbar__logo img+img{height:112px}
}

/* ---------- hero (1-op-1 Feitsma; foto in plaats van video) ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:stretch;overflow:hidden;isolation:isolate;background:var(--ant-diep)}
.hero__bg{position:absolute;inset:0;z-index:-3;display:block}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero__veil{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 70% 18%,rgba(43,42,41,0) 30%,rgba(43,42,41,.55) 100%),
    linear-gradient(180deg,rgba(43,42,41,.62) 0%,rgba(43,42,41,.18) 26%,rgba(43,42,41,.3) 58%,rgba(30,29,28,.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")}
.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:.16}
.hero__content{position:relative;z-index:1;padding-block:9.5rem 9rem;max-width:56rem;margin-inline:auto;text-align:center;color:#fff}
.hero .eyebrow{color:var(--goud);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-shadow:0 2px 12px rgba(0,0,0,.55);margin-bottom:.6rem}
.hero .eyebrow::before{background:var(--goud);width:32px;height:2px}
.hero__title{font-size:clamp(2.5rem,4.7vw,3.55rem);line-height:1.05;letter-spacing:-.02em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35);margin:0}
.hero__title em{font-style:normal;white-space:nowrap;color:#fff;background:linear-gradient(180deg,transparent 62%,rgba(219,192,150,.9) 62%);padding-inline:.06em}
.hero__sub{margin:.9rem auto 0;font-size:clamp(1.1rem,1.4vw,1.28rem);max-width:54rem;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.45)}
/* Figuur (1-op-1 Feitsma): rechterrand op de rechterrand van de contentkolom, onderrand 26px achter de
   offertebalk (die schuift clamp(56px,7.5vw,104px) over de hero heen), hoogte in px zodat hij niet meebeweegt. */
.hero .wrap{width:100%}
.hero__pic{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__person{position:absolute;z-index:0;left:50%;transform:translateX(-50%);bottom:calc(clamp(56px,7.5vw,104px) - 80px);height:min(420px,54%);width:auto;pointer-events:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.3))}
@media(min-width:1080px){.hero{min-height:830px}}
@media(max-width:1240px){.hero__person{height:min(380px,44%)}}
@media(max-width:1080px){
  .hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:min(84vh,760px)}
  .hero .wrap{order:1}
  .hero__pic{position:static;order:2;z-index:auto;pointer-events:auto}
  .hero__content{padding-block:9.5rem 1.2rem;max-width:none}
  .hero__sub{max-width:34rem}
  .hero__person{position:static;left:auto;transform:none;bottom:auto;display:block;height:auto;max-height:clamp(200px,32vw,340px);max-width:92%;margin:0 auto}
}
@media(max-width:860px){.hero__mark{width:min(230px,34vw);opacity:.12}}
@media(max-width:620px){
  .hero__mark{display:none}
  .hero{min-height:min(76vh,600px)}
  .hero__content{padding-block:10rem .8rem}
  .hero .eyebrow{font-size:.8rem}
}

/* ---------- offerte-pill (1-op-1 Feitsma: rode balk -> goud) ---------- */
.offerte-overlay{position:relative;margin-top:0;z-index:6;padding:0 clamp(16px,4vw,40px) 60px;background:var(--creme-2);display:flow-root}
.of-wrap{position:relative;max-width:var(--maxw);margin:clamp(-104px,-7.5vw,-56px) auto 0}
.of-box{position:relative;z-index:2;background:var(--goud);color:#fff;border-radius:28px;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,52px);box-shadow:0 24px 60px -10px rgba(122,95,42,.42)}
.of-trust{position:absolute;top:20px;right:24px;z-index:5}
.of-title{font-family:var(--font-titel);font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 8px;color:#fff}
.of-sub{font-size:16px;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(43,42,41,.18)}
.of-field{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;min-width:0;cursor:text}
.of-field span{font:600 11px/1 var(--font-kop);color:var(--ant);letter-spacing:.06em;margin:0 0 4px;text-transform:uppercase;opacity:.78}
.of-field input,.of-field select{border:none;outline:none;background:none;font-family:var(--font-tekst);font-size:16px;color:var(--ant);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='%233D3B3A' 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"]{color:var(--ant)}
.of-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.15);cursor:pointer;opacity:.7}
.of-field input:focus-visible,.of-field select:focus-visible{outline:2px solid var(--goud-diep);outline-offset:2px;border-radius:6px}
.of-divider{background:rgba(43,42,41,.12);width:1px;align-self:center;height:38px}
.of-cta{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#0A2E1F;border:none;border-radius:2rem;padding:16px 26px 14px;font:400 13px/1.2 var(--font-kop);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.of-cta:hover{background:#1FBF5C}
.of-cta svg{width:12px;height:12px;margin-top:-2px}
/* Keurmerken (Feitsma): witte chips, derdenmerk niet hertinten; hier Trustoo plus twee tekstchips. */
.keurmerken{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.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);text-decoration:none;color:var(--ant);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--score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.keurmerk--score.keurmerk--trustoo img{max-height:15px}
.keurmerk__cijfer{font:600 1.05rem/1 var(--font-kop);color:var(--ant);padding-top:.1em}
.keurmerk--tekst{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.keurmerk__kop{font:600 .95rem/1 var(--font-kop);color:var(--ant);letter-spacing:.04em;text-transform:uppercase;padding-top:.1em}
.keurmerk__sub{font:600 .58rem/1.15 var(--font-tekst);color:var(--ant-zacht)}
@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(43,42,41,.08)}
  .of-cta{justify-content:center;border-radius:14px;padding:14px 20px 12px}
}
@media(max-width:560px){
  .keurmerken{gap:6px}
  .keurmerk{width:78px;height:48px;padding:6px;border-radius:8px}
  .keurmerk--score.keurmerk--trustoo img{max-height:11px}
  .keurmerk__cijfer{font-size:.88rem}
  .keurmerk__kop{font-size:.78rem}
  .keurmerk__sub{font-size:.52rem}
}

/* ---------- ring-ornament van de site: grote dunne lichte cirkel rechtsboven ---------- */
.ring{position:relative;overflow:hidden}
.ring::before{content:"";position:absolute;width:900px;height:900px;border:2px solid rgba(255,255,255,.85);border-radius:50%;right:-320px;top:-560px;pointer-events:none}
.ring>.wrap{position:relative}

/* ---------- trust-strip: vier kaarten met Shutterstock-iconen (keuze 2 uit _werk/trust-varianten, 27-aug) ---------- */
.trust{background:var(--creme-2);padding-bottom:2rem}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.trust__item{display:flex;align-items:center;gap:.85rem;font-size:.98rem;line-height:1.4;color:var(--ant-zacht);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:1rem;box-shadow:var(--schaduw-kaart)}
.trust__item b{display:block;color:var(--ant);font-weight:700;font-size:1.09rem;line-height:1.25;margin-bottom:.15rem}
.trust__ico{flex:none;width:56px;height:56px;border-radius:15px;background:var(--goud-licht);border:1px solid var(--zand);display:grid;place-items:center;--ik-a:#3D3B3A;--ik-b:#C9AB78}
.trust__ico svg{display:block;width:40px;height:40px}
@media(max-width:900px){.trust__in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.trust__in{grid-template-columns:1fr;gap:.9rem}}

/* ---------- diensten ---------- */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.dienst{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.dienst:hover{transform:translateY(-3px);box-shadow:var(--schaduw-kaart)}
.dienst__nis{position:relative;height:190px;margin:14px 14px 0;border-radius:var(--r-boog);overflow:hidden;background:var(--goud-licht)}
.dienst__nis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.dienst:hover .dienst__nis img{transform:scale(1.05)}
.dienst__tekst{padding:1.1rem 1.5rem 1.5rem}
.dienst h3{font-size:1.4rem;margin-bottom:.45rem}
.dienst p{margin:0;color:var(--ant-zacht);font-size:1.04rem}
@media(max-width:900px){.diensten{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.diensten{grid-template-columns:1fr}}

/* ---------- werkwijze ---------- */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;list-style:none;padding:0;margin:0}
.stap{border-top:1px solid var(--goud);padding-top:1.1rem}
.stap__nr{display:block;font:300 3rem/1 var(--font-kop);color:var(--goud);margin-bottom:.7rem}
.stap h3{font-size:1.37rem;margin-bottom:.45rem}
.stap p{margin:0;color:var(--ant-zacht);font-size:1.04rem}
@media(max-width:900px){.stappen{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stappen{grid-template-columns:1fr}}

/* ---------- dozenkaart (1-op-1 Feitsma: rode kaart -> goud, watermerk = H-beeldmerk) ---------- */
.dozen{padding:clamp(2.6rem,5vw,4.2rem) 0 0;background:var(--creme)}
.dozen__card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.18fr .82fr;background:var(--goud);color:var(--ant);border-radius:28px 28px 0 0;box-shadow:var(--schaduw)}
.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:.12;background:url("../img/mark-wit.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(2.05rem,3.6vw,2.95rem);max-width:20ch;margin:0;color:#fff}
.dozen__body p{margin:.7rem 0 0;color:#fff;max-width:54ch;font-size:1.02rem}
.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%}
.badge{position:absolute;right:16px;bottom:16px;background:var(--bruin);color:var(--creme);border-radius:16px;padding:.95rem 1.15rem;box-shadow:var(--schaduw);z-index:2}
.badge__ab{display:block;font:600 1.5rem/1 var(--font-kop);color:var(--goud)}
.badge__abk{display:block;font:600 .66rem/1.2 var(--font-kop);letter-spacing:.14em;text-transform:uppercase;color:rgba(253,251,248,.75);margin-top:.4rem}
@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}
}

/* ---------- dozencalculator (1-op-1 Feitsma; uitkomstpaneel ink -> bruin) ---------- */
.calc{padding:0 0 clamp(2.6rem,5vw,4.2rem);background:var(--creme)}
.calc__card{background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--schaduw);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.3rem,2vw,1.6rem);margin:0}
.calc__intro p{margin:.35rem 0 0;color:var(--ant-zacht);font-size:.99rem;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:600 .7rem/1.3 var(--font-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--ant-zacht)}
.calc__veld input,.calc__veld select{font-family:inherit;font-size:1rem;font-weight:700;color:var(--ant);border:1px solid var(--lijn);border-radius:12px;padding:.6rem .7rem;width:100%;background:var(--creme);-webkit-appearance:none;appearance:none;min-height:44px}
.calc__veld input:focus,.calc__veld select:focus{outline:2px solid var(--goud-diep);outline-offset:1px}
.calc__veld i{position:absolute;right:.7rem;bottom:.72rem;font-style:normal;font-size:.82rem;color:var(--ant-zacht);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(--ant);border-bottom:2px solid var(--ant);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:600 .7rem/1.3 var(--font-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--ant-zacht);margin-bottom:.45rem}
.calc__extras label{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;border:1px solid var(--lijn);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(--goud-diep);background:var(--goud-licht);color:var(--goud-diep)}
.calc__extras input{accent-color:var(--goud-diep);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(--bruin);color:var(--creme);border-radius:18px;padding:clamp(1.1rem,2vw,1.6rem);min-width:15rem}
.calc__label{font:600 .7rem/1.3 var(--font-kop);letter-spacing:.1em;text-transform:uppercase;color:rgba(253,251,248,.65)}
.calc__getal{font-family:var(--font-titel);font-weight:800;font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--goud)}
.calc__bereik{font-size:.9rem;color:rgba(253,251,248,.78)}
.calc__detail{font-size:.82rem;color:rgba(253,251,248,.65);margin-top:.35rem;max-width:22ch}
.calc__uit .btn{margin-top:.9rem;width:100%}
.calc__tel{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;font-size:.82rem;font-weight:700;color:rgba(253,251,248,.75);text-decoration:underline;text-underline-offset:3px}
.calc__tel:hover{color:#fff}
.calc__tel 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}}

/* ---------- reviews ---------- */
/* Achtergrond mengt drie huisstijlen: de gouden HT-mark als watermerk, de vier Google-kleuren en het
   Trustoo-koraal als zacht licht op het bruin. De logo's zelf staan in volle kleur op lichte vlakken
   (scorekaart en bronchips), zodat Google en Trustoo hun eigen huisstijl houden. */
.reviews{position:relative;isolation:isolate;overflow:hidden;background:var(--bruin);color:var(--creme)}
.reviews::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(26% 30% at 2% 0%,rgba(66,133,244,.10),transparent 68%),
  radial-gradient(22% 24% at 26% -4%,rgba(234,67,53,.07),transparent 68%),
  radial-gradient(26% 30% at 99% 4%,rgba(251,188,5,.09),transparent 68%),
  radial-gradient(26% 30% at 88% 100%,rgba(52,168,83,.07),transparent 68%),
  radial-gradient(28% 34% at 0% 98%,rgba(254,137,94,.10),transparent 68%),
  radial-gradient(58% 52% at 50% 46%,rgba(219,192,150,.06),transparent 72%)}
.reviews::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;background:
  url(../img/mark-goud.svg) no-repeat right -7% top -13%/min(520px,40vw) auto,
  url(../img/mark-goud.svg) no-repeat left -12% bottom -16%/min(340px,28vw) auto}
.reviews .label{color:var(--goud)}
.reviews .label::before{background:var(--goud)}
.reviews .kop{color:var(--creme)}
.reviews .intro{color:rgba(253,251,248,.72)}
.reviews__kop{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,2.8rem)}
.reviews__kop .sectiekop{margin-bottom:0}

/* scorekaart: cijfer van Trustoo, met beide bronlogo's eronder */
.score{flex:none;width:min(100%,20.5rem);background:linear-gradient(180deg,var(--wit),var(--creme));color:var(--ant);border:1px solid rgba(219,192,150,.6);border-radius:var(--r);padding:1.15rem 1.35rem 1rem;box-shadow:0 30px 60px -34px rgba(20,10,4,.8)}
.score__top{display:flex;align-items:center;gap:1rem}
.score__cijfer{flex:none;font:600 2.9rem/1 var(--font-kop);color:var(--goud-diep);padding-top:.12em}
.score__tekst{font-size:.92rem;line-height:1.35;color:var(--ant-zacht)}
.score__tekst b{display:block;color:var(--ant);font-weight:600;font-size:1.06rem}
.sterren{display:flex;gap:2px;color:var(--goud-diep);margin-bottom:.28rem}
.sterren svg{width:14px;height:14px;fill:currentColor}
.score__bronnen{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--lijn)}
.bronlogo{display:inline-flex;align-items:center;gap:.4rem;font:600 .88rem/1 var(--font-kop);color:var(--ant);text-decoration:none}
.bronlogo img{height:17px;width:auto}
.bronlogo svg{width:17px;height:17px;flex:none}
.bronlogo+.bronlogo::before{content:"";width:1px;height:17px;background:var(--lijn);margin-right:.3rem}
.score__award{display:flex;align-items:center;gap:.45rem;margin:.75rem 0 0;font:600 .7rem/1.25 var(--font-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--goud-diep)}
.score__award svg{width:13px;height:13px;flex:none;fill:currentColor}

/* raster: de lange review beslaat twee rijen, zo eindigen alle kolommen even hoog */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;list-style:none;padding:0;margin:0}
.review--groot{grid-row:span 2}
.review{position:relative;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid rgba(219,192,150,.22);border-radius:var(--r);padding:1.55rem 1.5rem 1.25rem;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.review:hover{transform:translateY(-3px);border-color:rgba(219,192,150,.5);box-shadow:0 26px 46px -30px rgba(20,10,4,.9)}
.review::before{content:"\201C";position:absolute;top:.55rem;right:1.25rem;font:600 3.6rem/1 var(--font-kop);color:var(--goud);opacity:.34;pointer-events:none}
.review::after{content:"";position:absolute;top:0;left:1.5rem;width:74px;height:3px;border-radius:0 0 3px 3px}
.review--google::after{background:linear-gradient(90deg,#4285F4,#EA4335 34%,#FBBC05 66%,#34A853)}
.review--trustoo::after{background:linear-gradient(90deg,#FE895E,#10185A)}
.review p{margin:0;flex:1;font-size:1.05rem;line-height:1.72;color:rgba(253,251,248,.93)}
.review__wie{display:flex;align-items:center;gap:.7rem;margin-top:1.15rem;padding-top:.95rem;border-top:1px solid rgba(219,192,150,.18);font-size:.8rem;color:rgba(253,251,248,.66)}
.review__av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(219,192,150,.16);border:1px solid rgba(219,192,150,.34);color:var(--goud-licht);font:600 1rem/1 var(--font-kop);text-transform:uppercase;padding-top:.1em}
.review__naam{flex:1;min-width:0}
.review__naam b{display:block;color:var(--creme);font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.bron{flex:none;display:inline-flex;align-items:center;gap:.35rem;background:var(--creme);color:var(--ant);border-radius:999px;padding:.34rem .6rem .3rem;font:600 .74rem/1 var(--font-kop);letter-spacing:.03em}
.bron svg{width:14px;height:14px;flex:none}
.bron--trustoo{padding:.34rem .55rem}
.bron--trustoo img{height:11px;width:auto}
.reviews__meer{margin:1.4rem 0 0;text-align:center}
.reviews__meer a{display:inline-flex;align-items:center;gap:.5rem;padding-bottom:.35rem;color:var(--goud);font:600 .82rem/1 var(--font-kop);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(219,192,150,.45);transition:color .2s,border-color .2s}
.reviews__meer a:hover{color:var(--creme);border-bottom-color:var(--creme)}
.reviews__meer svg{width:17px;height:17px;stroke:currentColor}
@media(max-width:1099.98px){
  .rgrid{grid-template-columns:1fr 1fr}
  /* scorekaart valt onder de kop: dan liever een brede balk dan een smal blokje links */
  .score{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem}
  .score__bronnen{margin:0;padding:0 0 0 1.3rem;border-top:0;border-left:1px solid var(--lijn)}
  .score__award{margin:0 0 0 auto}
}
@media(max-width:640px){
  .rgrid{grid-template-columns:1fr}
  .review--groot{grid-row:auto}
  .score{display:block}
  .score__bronnen{margin-top:.9rem;padding:.85rem 0 0;border-top:1px solid var(--lijn);border-left:0}
  .score__award{margin:.75rem 0 0}
  .reviews::after{opacity:.1}
}

/* ---------- tekst + foto blokken (zigzag) ---------- */
.blok{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:stretch}
.blok+.blok{margin-top:clamp(3.5rem,7vw,6rem)}
.blok__foto{position:relative;align-self:stretch;aspect-ratio:auto;min-height:19rem;border-radius:var(--r-boog);overflow:hidden;background:var(--zand);margin:0}
/* het fotovak stond op height:100% en rekte mee met de tekstkolom; bij langere copy werd het zo hoog
   dat er nog maar een kwart van de breedte overbleef en de derde man buiten beeld viel. Vaste 4/5. */
.blok__foto--team img{object-position:65% 50%}
.blok__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blok__foto figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(43,42,41,.72);color:var(--creme);font:600 .78rem/1.3 var(--font-kop);letter-spacing:.08em;text-transform:uppercase;padding:.6rem .9rem .5rem;border-radius:10px;backdrop-filter:blur(4px)}
.blok__tekst{align-self:center}
.usps{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1.05rem}
.usps li{display:grid;grid-template-columns:44px 1fr;gap:.95rem;align-items:start}
.usps .ico{width:44px;height:44px;border-radius:50%;background:var(--goud-licht);display:grid;place-items:center;color:var(--goud-diep)}
.usps .ico svg{width:22px;height:22px}
.usps h3{font-size:1.26rem;margin:.35rem 0 .25rem}
.usps p{margin:0;color:var(--ant-zacht);font-size:1.03rem}
.team{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:1.6rem;list-style:none;padding:0}
.lid{display:flex;align-items:center;gap:.8rem}
.lid img{width:68px;height:82px;object-fit:cover;object-position:top;border-radius:999px 999px 10px 10px;background:var(--zand)}
.lid b{display:block;font:700 .95rem/1.25 var(--font-titel)}
.lid span{font-size:.85rem;color:var(--ant-zacht)}
.d4{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.4rem 0 0;padding:0;list-style:none}
.d4 li{display:flex;gap:.8rem;align-items:center;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:.85rem 1rem;font-size:1.02rem}
.d4 li svg{width:22px;height:22px;color:var(--goud-diep);flex:none}
.d4 li b{display:block;font:700 .95rem/1.25 var(--font-titel)}
.d4 li span{color:var(--ant-zacht);font-size:.86rem}
.d4 .d4--actief{border-color:var(--goud);background:var(--goud-licht)}
.plaatsen{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.2rem 0 0}
.plaatsen li{display:inline-flex;align-items:center;gap:.4rem;background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:.45rem .85rem .35rem;font:600 .82rem/1.1 var(--font-kop);letter-spacing:.03em}
.plaatsen svg{width:14px;height:14px;color:var(--goud-diep);margin-top:-.15em}
.blok__cta{margin-top:1.6rem}
/* #waarom, eerste blok: tekst en foto naast elkaar en even hoog (de foto rekt mee met de tekst,
   niet andersom), daaronder de vier punten over de volle breedte van tekst plus foto, en daaronder
   de twee knoppen gecentreerd. Zo leest het blok als een geheel in plaats van een lange kolom. */
.blok--stapel{grid-template-columns:1fr;gap:clamp(2.2rem,4vw,3.2rem)}
.blok__boven{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:stretch}
.blok--stapel .blok__foto{align-self:stretch;aspect-ratio:auto;min-height:19rem}
.usps--rij{grid-template-columns:repeat(4,1fr);gap:2rem 1.8rem;margin:0}
.usps--rij li{grid-template-columns:1fr;gap:.85rem;align-content:start}
/* min-height op de kop: anders zakt de alinea van de enige tweeregelige titel uit de lijn */
.usps--rij h3{margin:0 0 .3rem;font-size:1.15rem;min-height:2.36em}
.usps--rij p{font-size:.98rem}
.blok__cta--midden{justify-content:center;margin-top:0}
@media(max-width:1080px){.usps--rij{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .blok__boven{grid-template-columns:1fr;gap:1.8rem}
  .blok--stapel .blok__foto{aspect-ratio:4/5;min-height:0}
}
@media(max-width:560px){.usps--rij{grid-template-columns:1fr}}
@media(max-width:860px){
  .blok{grid-template-columns:1fr;gap:1.8rem}
  .blok__foto{order:-1;height:auto;min-height:0;aspect-ratio:4/5;width:100%;max-width:30rem;margin-inline:auto}
  .d4{grid-template-columns:1fr}
}

/* ---------- verhuischecklist (1-op-1 Sprint Koeriers .vcl, kleuren omgezet) ---------- */
.vcl{margin:0 auto;max-width:var(--maxw)}
.vcl-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.vcl-top label{font:600 13.5px/1.3 var(--font-tekst);color:var(--ant);display:flex;align-items:center;gap:10px}
.vcl-top input[type=date]{border:1.5px solid var(--lijn);border-radius:10px;padding:9px 12px;font-size:15px;font-family:var(--font-tekst);color:var(--ant);background:var(--creme);min-height:44px}
.vcl-progress{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ant-zacht)}
.vcl-bar{flex:1;height:8px;background:var(--lijn);border-radius:999px;overflow:hidden}
.vcl-bar span{display:block;height:100%;width:0;background:var(--goud-diep);border-radius:999px;transition:width .3s}
.vcl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.vcl-chip,.vcl-tab{border:1px solid var(--lijn);background:#fff;border-radius:999px;padding:10px 14px 8px;font:600 13px/1.2 var(--font-kop);letter-spacing:.04em;color:var(--ant);cursor:pointer;min-height:40px}
.vcl-chip.aan{background:var(--goud);border-color:var(--goud);color:#fff}
.vcl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.vcl-tab.aan{background:var(--goud);border-color:var(--goud);color:#fff}
.vcl-tab .n{font:600 11px/1 var(--font-kop);opacity:.7;margin-left:6px}
.vcl-fase{display:none;background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:8px 20px 20px}
.vcl-fase.aan{display:block}
.vcl-fase h3{font-size:22.5px;margin:16px 0 5px;color:var(--ant)}
.vcl-fase .vcl-datum{font-size:13px;color:var(--goud-diep);font-weight:600;margin:0 0 6px}
.vcl-item{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--creme-2);align-items:start}
.vcl-item.verborgen{display:none}
.vcl-item input{width:20px;height:20px;margin-top:2px;accent-color:var(--goud-diep)}
.vcl-item label{cursor:pointer}
.vcl-item .t{font-weight:600;font-size:16px;color:var(--ant)}
.vcl-item.klaar .t{text-decoration:line-through;color:#8a8580}
.vcl-item .u{display:block;font-size:14.5px;line-height:1.6;color:var(--ant-zacht);margin-top:3px}
.vcl-badge{display:inline-block;font:600 10.5px/1.3 var(--font-kop);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px 2px;border-radius:999px;margin-left:6px;vertical-align:middle;background:var(--creme-2);border:1px solid var(--lijn);color:var(--ant-zacht)}
.vcl-badge.deadline{background:var(--bruin);border-color:var(--bruin);color:var(--creme)}
.vcl-badge.ht{background:var(--goud-licht);border-color:var(--goud);color:var(--goud-diep)}
.vcl-badge.geld{background:var(--zand);border-color:var(--goud-donker);color:var(--goud-diep)}
.vcl-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.vcl-acties{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;justify-content:center}
.vcl-knop{border:1px solid var(--secundair);background:var(--secundair);color:#000;border-radius:999px;padding:11px 16px 9px;font:600 13px/1.2 var(--font-kop);letter-spacing:.04em;cursor:pointer;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.vcl-knop:hover{background:var(--licht-hover);color:#000}
.vcl-acties .vcl-knop{background:#fff;border-color:#fff}
.vcl-acties .vcl-knop:hover{background:var(--licht-hover)}
.vcl-nav .btn{padding:.75rem 1.2rem .6rem;font-size:.82rem}

/* ---------- inpaktips (1-op-1 Sprint Koeriers .tips-grid) ---------- */
.tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;counter-reset:tip;max-width:1280px;margin:0 auto}
.tip{display:grid;grid-template-columns:36px 1fr;gap:12px;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:16px 18px;counter-increment:tip}
.tip::before{content:counter(tip);width:36px;height:36px;border-radius:999px;background:var(--goud-licht);border:1px solid var(--goud);display:grid;place-items:center;font:600 14px/1 var(--font-kop);color:var(--goud-diep);padding-top:2px}
.tip strong{display:block;font-size:15.5px;color:var(--ant);margin-bottom:3px}
.tip span{font-size:15px;line-height:1.6;color:var(--ant-zacht)}
@media(max-width:860px){.tips-grid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
/* FAQ: genummerde regels over de volle containerbreedte (opzet zoals alldayservices.nl, uitgevoerd
   in de huisstijl). Nummers via een css-counter, dus geen nummers in de markup. */
.faq{max-width:none;margin-inline:0;counter-reset:faq}
.faq details{border-bottom:1px solid var(--lijn)}
.faq details:first-of-type{border-top:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.4rem 1fr 1.6rem;align-items:center;gap:0 1.4rem;padding:1.5rem 0 1.35rem;font:600 1.25rem/1.35 var(--font-titel);color:var(--ant)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{counter-increment:faq;content:counter(faq,decimal-leading-zero);font:600 1rem/1 var(--font-kop);letter-spacing:.1em;color:var(--goud-diep)}
.faq details[open] summary{color:var(--goud-diep)}
.faq__tk{position:relative;width:1.15rem;height:1.15rem;justify-self:end}
.faq__tk::before,.faq__tk::after{content:"";position:absolute;inset:50% 0 auto 0;height:2px;background:var(--goud-diep);transform:translateY(-50%);transition:opacity .2s,transform .25s}
.faq__tk::after{transform:translateY(-50%) rotate(90deg)}
.faq details[open] .faq__tk::after{opacity:0;transform:translateY(-50%) rotate(0)}
.faq summary:hover{color:var(--goud-diep)}
.faq details p{margin:0 0 1.5rem;padding-left:4.8rem;color:var(--ant-zacht);max-width:74ch}
@media(max-width:620px){
  .faq summary{grid-template-columns:2.4rem 1fr 1.2rem;gap:0 .8rem;font-size:1.08rem;padding:1.2rem 0 1.05rem}
  .faq details p{padding-left:3.2rem}
}

/* ---------- leadblock: foto + offerteformulier (1-op-1 Feitsma; rood paneel -> goud) ---------- */
.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(--schaduw);background:var(--ant-diep)}
.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.4rem,2.4vw,2.1rem);background:linear-gradient(140deg,#E6D2AE 0%,var(--goud) 60%,#CDB07E 100%)}
.leadblock__panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 80% at 95% 0%,rgba(255,255,255,.28),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.6rem,2.6vw,2.1rem);margin:.4rem 0 0;color:#fff}
.leadblock__panel .lead-p{margin:.5rem 0 0;color:#fff;max-width:52ch;font-size:.96rem}
.lead-google{display:inline-flex;align-items:center;gap:8px;margin-top:.8rem;background:#fff;color:var(--ant);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:0 6px 16px -6px rgba(0,0,0,.3);text-decoration:none}
.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(--ant-zacht);font-weight:600}
.lf{margin-top:1rem;display:flex;flex-direction:column;gap:.55rem}
.lf__row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;align-items:start}
.lf__field{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.lf__field>span{font:400 .74rem/1.3 var(--font-kop);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.lf__field input:not([type=checkbox]),.lf__field select{border:0;border-radius:12px;background:#fff;color:var(--ant);font-family:inherit;font-size:1rem;font-weight:600;padding:.55rem .8rem;width:100%;-webkit-appearance:none;appearance:none;min-height:42px}
.lf__field input:not([type=checkbox])::placeholder{color:#9b9b9b;font-weight:500}
.lf__field input:focus-visible,.lf__field select:focus-visible{outline:2px solid var(--ant);outline-offset:2px}
.lf__field--sel{position:relative}
.lf__field--sel::after{content:"";position:absolute;right:.9rem;bottom:.95rem;width:8px;height:8px;border-right:2px solid var(--ant);border-bottom:2px solid var(--ant);transform:rotate(45deg);pointer-events:none}
.lf__optie{display:inline-flex;align-self:flex-start;align-items:center;gap:.45rem;margin-top:.15rem;cursor:pointer;width:fit-content;font-size:.8rem;font-weight:700;color:#fff}
.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}
.lf__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.35rem}
.lf__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.lf__done{padding:1.5rem 1.3rem;background:#fff;border:1px solid var(--lijn);border-radius:16px;color:var(--ant);line-height:1.55}
.lf__done a{font-weight:700}
/* Dozenschatting in het formulier: uitklapper op het gouden paneel. */
.lfcalc{margin-top:.2rem;border:1px solid rgba(255,255,255,.45);border-radius:14px;background:rgba(255,255,255,.14);overflow:hidden}
.lfcalc__knop{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem .9rem .65rem;font:400 .84rem/1.3 var(--font-kop);letter-spacing:.06em;color:#fff}
.lfcalc__knop::-webkit-details-marker{display:none}
.lfcalc__knop:hover{background:rgba(255,255,255,.18)}
.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:400 .68rem/1.3 var(--font-kop);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:.4rem}
.lfcalc__extras label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:1px solid rgba(255,255,255,.5);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(--goud-diep);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,.18);border-radius:10px;padding:.6rem .75rem;margin:0}
.lfcalc__uit strong{font-weight:800}
.lfcalc__acties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.lfcalc__ok{font:400 .8rem/1.2 var(--font-kop);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:0;border-radius:2rem;padding:.75rem 1.1rem .6rem;background:#fff;color:var(--goud-diep)}
.lfcalc__ok:hover{background:var(--creme)}
.lfcalc__wis{font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;border:0;background:none;color:#fff;text-decoration:underline;text-underline-offset:3px;padding:.4rem}
.lfcalc.is-toegevoegd{border-color:#fff;background:rgba(255,255,255,.22)}
.lfcalc.is-toegevoegd .lfcalc__titel::before{content:"\2713";margin-right:.45rem;font-weight:900}
.lfcalc.is-toegevoegd .lfcalc__ok{background:rgba(255,255,255,.25);color:#fff;cursor:default}
.lfcalc.is-toegevoegd .lfcalc__ok:hover{background:rgba(255,255,255,.25)}
@media(max-width:820px){.leadblock__card{grid-template-columns:1fr}.leadblock__media{min-height:0;aspect-ratio:16/10}.leadblock__media img{object-position:50% 30%}}
@media(max-width:620px){.lfcalc__velden{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.lf__row{grid-template-columns:1fr}}

/* ---------- footer (avondfoto van rand tot rand: brand/fotos/serie/10-avond.jpg, gebouwd met
   _werk/build_footer_img.py; keuze uit de vier ontwerpen in _werk/footers.html) ---------- */
.footer{position:relative;isolation:isolate;background:#2A1C1C;color:#fff;font-size:.95rem}
.footer a:not(.btn){color:#fff;text-decoration:none}
.footer a:not(.btn):hover{text-decoration:underline}
.footer__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.footer__media img{width:100%;height:100%;object-fit:cover;object-position:58% 30%}
.footer__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(38,25,25,.62) 0%,rgba(38,25,25,.2) 18%,rgba(38,25,25,.42) 100%),
  linear-gradient(100deg,rgba(38,25,25,.96) 0%,rgba(38,25,25,.88) 30%,rgba(38,25,25,.42) 60%,rgba(38,25,25,.22) 80%,rgba(38,25,25,.5) 100%)}
.footer__claim{max-width:36rem;padding-block:clamp(3.2rem,6vw,5rem) clamp(2.4rem,4vw,3.2rem)}
.footer__claim .eyebrow{color:var(--goud);margin-bottom:1rem}
.footer__claim .eyebrow::before{background:var(--goud)}
.footer__claim h2{color:#fff;font-size:clamp(2.05rem,3.75vw,2.95rem);margin:0 0 1rem;max-width:16ch}
.footer__claim p{color:rgba(255,255,255,.8);margin:0 0 1.7rem;max-width:44ch;line-height:1.7}
.footer__tel{display:inline-flex;align-items:center;gap:.8rem;font:600 clamp(1.6rem,3vw,2.15rem)/1 var(--font-kop);color:#fff!important;text-decoration:none!important;margin-bottom:1.3rem}
.footer__tel svg{width:24px;height:24px;color:var(--goud);flex:none}
.footer__knoppen{display:flex;gap:.7rem;flex-wrap:wrap}
/* de adresstrook krijgt een eigen band met een vaste vervaging in pixels, zodat de leesbaarheid
   niet meekantelt met de footerhoogte (bij 2 kolommen schuift de strook omhoog, over de wagen) */
.footer__onder{position:relative;padding-top:118px;background:linear-gradient(to bottom,rgba(38,25,25,0) 0,rgba(38,25,25,.5) 46px,rgba(38,25,25,.93) 102px,rgba(38,25,25,.985) 150px,rgba(38,25,25,.99) 100%)}
.footer__rooster{border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 2rem;padding-block:1.9rem}
.footer__rooster>*{min-width:0}
.footer__rooster h2{font:600 .85rem/1.3 var(--font-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--goud);margin:0 0 .6rem}
.footer__rooster address{font-style:normal;font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.8)}
.footer__rooster p{margin:.6rem 0 0;font-size:.85rem;color:rgba(255,255,255,.62);line-height:1.6}
.footer__rooster ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.9rem}
.footer__logo{height:96px;width:auto;margin-bottom:.9rem}
.footer__balk{background:#241818;color:rgba(255,255,255,.58);font-size:.82rem}
.footer__balk .wrap{display:flex;justify-content:space-between;gap:.8rem 1.6rem;flex-wrap:wrap;padding-block:1.05rem}
.footer__balk a{color:rgba(255,255,255,.8)}
@media(max-width:900px){.footer__rooster{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .footer__knoppen{width:100%;max-width:23rem}
  .footer__knoppen .btn{width:100%}
  .footer__balk .wrap{flex-direction:column;align-items:flex-start;gap:.45rem}
}
@media(max-width:700px){
  /* smal scherm: het zij-scherm (100deg) maakt de hele foto zwart, dus alleen een verticaal scherm */
  .footer__media img{object-position:44% 34%}
  .footer__media::after{background:linear-gradient(to bottom,rgba(38,25,25,.88) 0%,rgba(38,25,25,.72) 26%,rgba(38,25,25,.58) 58%,rgba(38,25,25,.6) 100%)}
}
@media(max-width:520px){.footer__rooster{grid-template-columns:1fr}}

/* ---------- mobiele sticky balk ---------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:.5rem;padding:.55rem var(--pad) calc(.55rem + env(safe-area-inset-bottom));background:rgba(253,251,248,.96);backdrop-filter:blur(8px);border-top:1px solid var(--lijn)}
.mcta .btn{width:100%;padding:.85rem .5rem .7rem;font-size:.85rem}
@media(max-width:767.98px){.mcta{display:grid}.footer__balk .wrap{padding-bottom:6.5rem}}

/* ---------- reveal (Feitsma-patroon; in de hero nooit opacity 0, dat kost de LCP) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal-groep]>*{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js [data-reveal-groep]>*.in{opacity:1;transform:none}
.js .hero [data-reveal]{opacity:1;transform:translateY(14px);transition-duration:.85s}
.js .hero [data-reveal].in{transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js .hero [data-reveal],.js [data-reveal-groep]>*{opacity:1;transform:none;transition:none}
  .btn,.dienst,.dienst__nis img{transition:none}
}
/* Printen = alleen de checklist (Sprint-patroon). */
@media print{
  .topbar,.hero,.offerte-overlay,.trust,#diensten,#werkwijze,#dozen,#calc,#waarom,#reviews,#inpaktips,#faq,#offerte,.footer,.mcta,.vcl-acties,.vcl-tabs,.vcl-filters,.vcl-nav,.wa-rij{display:none!important}
  .vcl-fase{display:block!important;break-inside:avoid;border:0}
  [data-reveal],[data-reveal-groep]>*{opacity:1!important;transform:none!important}
}

/* ---------- opslag-band (voorbeeldblok 04, makelaardij-sessie 26-aug) ---------- */
.opslag{position:relative;overflow:hidden;padding-top:clamp(3rem,6vw,5rem);background:var(--creme,#FDFBF8)}
.opslag__band{position:absolute;left:0;right:0;bottom:115px;height:clamp(300px,19vw,400px);background:linear-gradient(90deg,var(--goud),var(--zand));transform:skewY(-5deg);z-index:1;overflow:hidden;backface-visibility:hidden}
.opslag__mark{position:absolute;left:3%;top:50%;transform:translateY(-50%);height:90%;width:auto;opacity:.97}
.opslag__script{position:absolute;right:2.5%;top:50%;transform:translateY(-50%);height:98%;width:auto;opacity:.97}
.opslag__lijn{position:absolute;left:0;right:0;bottom:100px;height:18px;background:var(--bruin);transform:skewY(-5deg);z-index:3;backface-visibility:hidden}
.opslag__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.opslag__kaart{position:relative;z-index:4;background:var(--bruin);color:var(--creme,#FDFBF8);border-radius:18px;padding:clamp(1.4rem,3vw,2.2rem);margin-bottom:150px;box-shadow:0 24px 50px -28px rgba(43,42,41,.55)}
.opslag__kaart .kop{color:var(--creme,#FDFBF8);font-size:clamp(1.75rem,2.9vw,2.4rem);margin-bottom:.6em}
.opslag__kaart .intro{color:rgba(253,251,248,.82);max-width:52ch}
.opslag__kaart .label{color:var(--goud)}
.opslag__kaart .label::before,.opslag__kaart .label::after{background:var(--goud);color:var(--goud)}
.opslag__fig{position:relative;height:620px;z-index:2}
.opslag__persoon{position:absolute;bottom:114px;left:50%;transform:translateX(-50%);height:520px;width:auto;max-width:none;z-index:2;filter:drop-shadow(0 30px 30px rgba(85,56,56,.35));clip-path:polygon(0 0,100% 0,100% calc(100% - 45px),0 100%)}
.opslag .btn--omlijnd{border:1.5px solid rgba(253,251,248,.6);color:var(--creme,#FDFBF8);background:transparent}
.opslag .btn--omlijnd:hover{background:rgba(253,251,248,.12);color:var(--creme,#FDFBF8)}
@media(min-width:901px) and (max-width:1600px){.opslag__mark{height:74%;left:2%}.opslag__kaart{margin-left:14%}.opslag__script{height:92%}}
@media(max-width:900px){
  .opslag__in{grid-template-columns:1fr;gap:0}
  .opslag__band{bottom:39px;height:230px}
  .opslag__mark{height:80%;left:2%}
  .opslag__script{height:74%;right:3%}
  .opslag__kaart{margin-bottom:1rem;margin-left:0}
  .opslag__fig{height:480px}
  .opslag__persoon{bottom:24px;height:440px;clip-path:polygon(0 0,100% 0,100% calc(100% - 25px),0 100%)}
  .opslag__lijn{bottom:30px;height:12px}
}

/* ---------- ringen (voorbeeldblok 07, makelaardij-sessie 26-aug) ---------- */
.ringen{position:relative;overflow:hidden;padding-top:clamp(3rem,6vw,5rem);background:var(--creme,#F2F1E9)}
.ringen__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.ringen__tekst{align-self:stretch;padding-bottom:clamp(2rem,4vw,3.5rem);position:relative;z-index:3}
.ringen__tekst .intro{max-width:52ch}
/* het fotovak had een vaste 560px terwijl de tekstkolom ernaast 737px werd; nu rekt het vak mee met
   de rij en zijn de cirkels en de figuur een percentage van diezelfde hoogte, zodat het een blok is. */
.ringen__fig{position:relative;align-self:stretch;min-height:560px;z-index:2}
.ringen__cirkel{position:absolute;left:50%;bottom:0;width:74%;height:auto;aspect-ratio:1;transform:translateX(-50%);background:var(--bruin);border-radius:50%;z-index:1}
.ringen__ring{position:absolute;left:50%;bottom:0;width:94%;height:auto;aspect-ratio:1;transform:translateX(-50%);border:3px solid var(--goud);border-radius:50%;z-index:1}
.ringen__ring::after{content:"";position:absolute;inset:-11%;border:1px solid var(--goud);border-radius:50%;opacity:.45}
.ringen__duo{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:none;z-index:2;filter:drop-shadow(0 26px 34px rgba(43,42,41,.28))}
@media(max-width:900px){
  .ringen__in{grid-template-columns:1fr;gap:0}
  .ringen__tekst{padding-bottom:1rem}
  .ringen__fig{height:440px;min-height:0;order:1}
  .ringen__cirkel{width:300px;height:300px}
  .ringen__ring{width:440px;height:440px}
  .ringen__duo{height:auto;width:min(94vw,440px)}
}

/* ---------- split (voorbeeldblok 09, makelaardij-sessie 26-aug) ---------- */
.split{position:relative;overflow:hidden;background:var(--creme,#F2F1E9);color:var(--creme,#F2F1E9)}
/* het bruine vlak is een eigen laag in plaats van een verloop op de sectie, want alleen zo kan de
   gouden cirkel er ACHTER liggen: een achtergrond schildert altijd onder alle inhoud. */
.split::before{content:"";position:absolute;inset:0 45% 0 0;background:var(--bruin);z-index:2}
.split__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.split__tekst{position:relative;z-index:3;padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem);align-self:center}
.split__tekst .kop{color:var(--creme,#F2F1E9)}
.split__tekst .intro{color:rgba(242,241,233,.8);max-width:52ch}
.split__tekst .label{color:var(--goud)}
.split__tekst .label::before,.split__tekst .label::after{background:var(--goud);color:var(--goud)}
.split .btn--omlijnd{border:1.5px solid rgba(242,241,233,.6);color:var(--creme,#F2F1E9);background:transparent}
.split .btn--omlijnd:hover{background:rgba(242,241,233,.12);color:var(--creme,#F2F1E9)}
/* GEEN z-index hier: een z-index op de kolom maakt een eigen stapelcontext en dan telt de z-index
   van de cirkel alleen nog binnen die kolom, waardoor hij nooit achter .split::before kan komen. */
.split__fig{position:relative;height:600px}
.split__cirkel{position:absolute;left:auto;right:-2%;bottom:-80px;width:min(46vw,620px);height:min(46vw,620px);background:var(--goud);border-radius:50%;z-index:1}
/* rechts uitgelijnd op de SECTIE en niet op de kolom: anders schuift de figuur bij een groter formaat
   naar links over de tekst heen. De min() houdt hem ook onder 1280px netjes binnen de sectierand. */
.split__trio{position:absolute;bottom:0;left:auto;right:-30px;transform:none;height:clamp(380px,40vw,540px);width:auto;max-width:none;z-index:4}
/* GEEN drop-shadow: op het lichte cremevlak legt een blur van 34px een grijze waas rond de hele
   contour en dat leest als een slechte uitsnede, terwijl de randen zelf scherp zijn. */
@media(max-width:900px){
  .split{background:var(--bruin)}
  .split::before{display:none}   /* mobiel is de hele sectie bruin en ligt de cirkel er weer voor */
  .split__in{grid-template-columns:1fr;gap:0}
  .split__tekst{padding-bottom:1rem}
  .split__fig{height:460px}
  .split__cirkel{left:50%;transform:translateX(-50%);width:380px;height:380px}
  .split__trio{left:50%;right:auto;transform:translateX(-50%);height:auto;width:min(94vw,440px)}
}

/* ---------- venster (voorbeeldblok 06, makelaardij-sessie 26-aug) ---------- */
.venster{position:relative;overflow:hidden;padding-top:clamp(3rem,6vw,5rem);background:var(--bruin);color:var(--creme,#F2F1E9)}
.venster__mark{position:absolute;left:-3vw;bottom:-4vw;width:min(380px,30vw);height:auto;opacity:.12;z-index:0;pointer-events:none}
.venster__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.venster__tekst{align-self:center;position:relative;z-index:3;padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.venster__tekst .kop{color:var(--creme,#F2F1E9)}
.venster__tekst .intro{color:rgba(242,241,233,.8);max-width:52ch}
.venster__tekst .label{color:var(--goud)}
.venster__tekst .label::before,.venster__tekst .label::after{background:var(--goud);color:var(--goud)}
.venster .btn--omlijnd{border:1.5px solid rgba(242,241,233,.6);color:var(--creme,#F2F1E9);background:transparent}
.venster .btn--omlijnd:hover{background:rgba(242,241,233,.12);color:var(--creme,#F2F1E9)}
.venster__fig{position:relative;height:clamp(415px,44vw,530px);z-index:2}
/* 27-aug: was 640px, boog nu 562px op 1440 (wens Shahab: boog kleiner, blok kleiner).
   Het figuur is 678x564 en mag BEWUST over de boogrand vloeien, 84px aan elke kant; het staat
   met z-index 2 onder de tekstkolom (z-index 3), dus geen enkele knop raakt bedekt (gemeten met
   elementFromPoint, 140 punten per breedte op 901 t/m 1920px, nul treffers).
   Het blok zakt van 720 naar 627px en verder niet: onder die hoogte is de TEKSTkolom de langste,
   dus nog kleiner maken krimpt alleen de boog. Let op: op 1360px en hoger komt de kruin van de
   figuur gelijk met de bovenrand van de boog (2px erboven). */
.venster__boog{position:absolute;left:2%;right:2%;top:-6%;bottom:0;background:var(--creme,#F2F1E9);border-radius:999px 999px 0 0;z-index:1}
.venster__boog::after{content:"";position:absolute;inset:14px 14px 0;border:2px solid var(--goud);border-radius:999px 999px 0 0;opacity:.7}
.venster__persoon{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:clamp(400px,42vw,564px);width:auto;max-width:none;z-index:2;filter:drop-shadow(0 26px 34px rgba(43,42,41,.35))}
/* vaste 564px liep tussen 900 en 1250px buiten de sectie en werd door overflow:hidden afgesneden;
   de hoogte schaalt daarom mee met het venster en loopt pas vanaf ongeveer 1230px vol. */
@media(max-width:900px){
  .venster__in{grid-template-columns:1fr;gap:0}
  .venster__tekst{padding-bottom:1rem}
  .venster__fig{height:min(80vw,528px)}
  .venster__boog{left:2%;right:2%;top:-6%}   /* de negatieve insets van desktop lopen op een volle kolom buiten beeld */
  .venster__persoon{height:auto;width:min(96vw,634px)}
}

/* ---------- vierkant (voorbeeldblok 10, makelaardij-sessie 26-aug) ---------- */
.vierkant{position:relative;overflow:hidden;padding-top:clamp(3rem,6vw,5rem);background:var(--creme,#F2F1E9)}
.vierkant__hoek{position:absolute;right:-120px;top:-120px;width:320px;height:320px;background:var(--bruin);border-radius:50%;z-index:0}
.vierkant__hoek img{position:absolute;left:48px;top:150px;width:110px;height:auto;opacity:.9}
.vierkant__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:stretch}
.vierkant__tekst{align-self:center;position:relative;z-index:3;padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.vierkant__vinkjes{display:grid;gap:1rem;margin:1.2rem 0 1.6rem;padding:0;list-style:none}
.vierkant__vinkjes li{display:flex;gap:.7rem;align-items:flex-start}
.vierkant__vinkjes li>span{display:grid;gap:.1rem}
.vierkant__vinkjes b{color:var(--ant);font-weight:700}
.vierkant__vinkjes li>span>span{color:var(--ant-zacht);font-size:.96em}
.vierkant__vinkjes img{width:22px;height:22px;flex:none;margin-top:.15rem}
/* knoppen in dit blok gecentreerd (verzoek 27-aug); .knoprij zelf blijft links, die staat ook in
   vier andere blokken waar links uitlijnen juist goed is. */
.vierkant__tekst .knoprij{justify-content:center}
.vierkant__fig{position:relative;min-height:560px;z-index:2}
.vierkant__vorm{position:absolute;left:50%;top:50%;width:460px;height:460px;transform:translate(-50%,-50%) rotate(12deg);background:var(--zand);border-radius:64px;z-index:1}
.vierkant__vorm::after{content:"";position:absolute;inset:-16px;border:2px solid var(--goud);border-radius:80px;opacity:.6}
.vierkant__duo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:470px;width:auto;max-width:none;z-index:2;filter:drop-shadow(0 26px 34px rgba(43,42,41,.28))}
@media(max-width:900px){
  .vierkant__in{grid-template-columns:1fr;gap:0}
  .vierkant__hoek{width:200px;height:200px;right:-100px;top:-100px}
  .vierkant__hoek img{left:26px;top:96px;width:64px}
  .vierkant{padding-top:6.5rem}
  .vierkant__tekst{padding-bottom:1rem}
  .vierkant__fig{height:440px;order:1}
  .vierkant__vorm{width:300px;height:300px}
  .vierkant__duo{height:auto;width:min(94vw,440px)}
}

/* ---------- topbar rechtsboven (makelaardij-sessie 26-aug): nummer en knoppen aan de bovenkant, niet gecentreerd naast het hoge logo ---------- */
.topbar .wrap{align-items:flex-start}
.topbar__actions{margin-left:auto;margin-top:.6rem}
.topbar.is-stuck .wrap{align-items:center}
.topbar.is-stuck .topbar__actions{margin-top:0}
@media(max-width:760px){.topbar .wrap{align-items:center}.topbar__actions{margin-top:0}}

/* ---------- topbar gescrold (header-sessie 26-aug, laat): balk compacter, logo kleiner en een reviews-badge die alleen in de witte stand verschijnt ---------- */
.topbar.is-stuck{padding:.4rem 0}
.topbar.is-stuck .topbar__logo img,.topbar.is-stuck .topbar__logo img+img{height:72px}
@media(min-width:1200px){.topbar.is-stuck .topbar__logo img,.topbar.is-stuck .topbar__logo img+img{height:80px}}
.topbar.is-stuck .btn{padding:.64rem 1rem .5rem;font-size:.78rem}
.topbar.is-stuck .topbar__tel{font-size:.95rem}
.topbar__reviews{display:none;align-items:center;gap:.55rem;text-decoration:none;color:var(--ant);padding:.2rem .5rem .2rem 0;margin-right:.3rem}
.topbar.is-stuck .topbar__reviews{display:inline-flex;animation:topbar-in .35s var(--ease)}
@keyframes topbar-in{from{opacity:0;transform:translateY(-4px)}}
.topbar__g{width:22px;height:22px;flex:none}
.topbar__rv{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.35rem;line-height:1}
.topbar__sterren{display:inline-flex;gap:1px;color:var(--goud-donker)}
.topbar__sterren svg{width:13px;height:13px}
.topbar__rv b{font:600 1rem/1 var(--font-kop);padding-top:.12em}
.topbar__rv small{grid-column:1/-1;font:400 .68rem/1.2 var(--font-kop);letter-spacing:.03em;color:var(--ant-zacht);margin-top:.2rem;white-space:nowrap}
.topbar__reviews:hover .topbar__rv b{color:var(--goud-diep)}
@media(max-width:760px){
  .topbar.is-stuck .topbar__logo img,.topbar.is-stuck .topbar__logo img+img{height:64px}
  .topbar.is-stuck .btn{padding:.6rem .8rem .48rem}
  .topbar__reviews{gap:.35rem;margin-right:0;padding-right:.2rem}
  .topbar__rv small{display:none}
  .topbar__sterren svg:not(:first-child){display:none}
}

/* ---------- werkwijze-kop (27-aug): tekst in de linkerhelft, tot de breedte van stap 2, met de uitgeknipte wagen rechts ---------- */
.werkwijze__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:end}
.werkwijze__top .sectiekop{margin-bottom:0;max-width:none}
.werkwijze__top .sectiekop .intro{max-width:none}
.werkwijze__wagen{margin:0;align-self:end;justify-self:end;width:100%}
.werkwijze__wagen img{display:block;width:100%;height:auto;max-width:none;filter:drop-shadow(0 26px 26px rgba(85,56,56,.22))}
@media(max-width:900px){
  .werkwijze__top{grid-template-columns:1fr;gap:1.2rem}
  .werkwijze__wagen{justify-self:center;width:88%}
}

/* ---------- opslag-figuur, opnieuw opgebouwd 27-aug ----------
   Waarom opnieuw: de oude opzet had clip-path EN filter:drop-shadow op dezelfde img. De browser
   tekent de schaduw dan van de CLIPVORM (rechthoek met schuine onderkant) in plaats van van de
   transparante foto, en dat gaf het lichte vak achter de figuur. Nu: geen clip-path, geen filter.
   De figuur staat rechts in zijn eigen kolom, loopt door tot de sectierand en overlapt de kaart
   nooit; de hoogte volgt de tekstkaart ernaast. */
.opslag__fig{position:relative;height:auto;min-height:680px;margin-right:calc((min(100vw,var(--maxw)) - 100vw)/2)}
.opslag__persoon{position:absolute;left:0;right:auto;bottom:112px;transform:none;height:clamp(420px,46vw,620px);width:auto;max-width:none;z-index:2;filter:none;
  /* schuine onderkant onder dezelfde hoek als de bordeauxlijn (skewY -5deg): 10 procent van de
     hoogte komt bij een breed beeld neer op ongeveer die 5 graden. GEEN filter op dit element. */
  clip-path:polygon(0 0,100% 0,100% 90%,0 100%)}
.opslag__lijn{z-index:6}
@media(max-width:900px){
  .opslag__fig{min-height:0;margin-right:0;height:auto}
  .opslag__persoon{position:static;height:auto;width:100%;max-width:420px;margin:0 auto;clip-path:none}
}

/* ---------- footer-claim ongeveer half zo hoog (27-aug, wens Shahab) ----------
   Alles wat de hoogte bepaalt evenredig terug: padding, kop, alinea, telefoonnummer en de
   knoppen naast elkaar in plaats van onder elkaar. */
.footer__claim{max-width:44rem;padding-block:clamp(1.6rem,3vw,2.5rem) clamp(1.2rem,2vw,1.6rem)}
.footer__claim .eyebrow{margin-bottom:.55rem}
.footer__claim h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin:0 0 .55rem;max-width:22ch}
.footer__claim p:not(.eyebrow){margin:0 0 .9rem;max-width:52ch;line-height:1.55;font-size:.95rem}
.footer__tel{font-size:clamp(1.15rem,1.9vw,1.45rem);margin-bottom:.8rem}
.footer__tel svg{width:19px;height:19px}
.footer__knoppen{display:flex;flex-wrap:wrap;gap:.7rem}
.footer__knoppen .btn{padding:.8rem 1.3rem .68rem;font-size:.8rem}
@media(max-width:620px){.footer__knoppen{flex-direction:column;align-items:flex-start}.footer__knoppen .btn{width:100%}}
/* de fade van de foto naar het donkere onderdeel schaalt mee, anders blijft er een leeg gat staan */
.footer__onder{padding-top:62px;background:linear-gradient(to bottom,rgba(38,25,25,0) 0,rgba(38,25,25,.5) 24px,rgba(38,25,25,.93) 54px,rgba(38,25,25,.985) 80px,rgba(38,25,25,.99) 100%)}

/* ---------- vierkant-blok 'Goed voorbereid verhuizen' (27-aug) ----------
   De vorm is 12 graden gedraaid, dus zijn bounding box is 1,19 x de zijde. Op 460px was die 546px
   breed terwijl de kolom 533px is: daardoor werd het zandvierkant links en rechts afgekneld.
   Nu schaalt de zijde mee met de kolom, zodat de hele vorm inclusief de gouden omlijning past. */
/* de twee kolommen vormen een geheel: even hoog, boven en onder flush. De fotokolom vult de
   rijhoogte en het vak plus de figuur schalen daarop mee in procenten. De bounding box van een
   12 graden gedraaide rechthoek is w*0,978 + h*0,208 breed, vandaar de breedte-limiet. */
.vierkant__in{align-items:stretch}
.vierkant__tekst{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-bottom:0}
.vierkant__tekst .intro{font-size:.98rem;line-height:1.6}
.vierkant__vinkjes{gap:.75rem;margin:1rem 0 1.3rem}
.vierkant__vinkjes li>span>span{font-size:.9em;line-height:1.5}
.vierkant__fig{position:relative;min-height:420px;height:100%;margin:0}
.vierkant__vorm{left:50%;top:50%;width:min(70%,380px);height:min(84%,600px);border-radius:72px}
.vierkant__vorm::after{border-radius:88px}
.vierkant__duo{top:50%;left:50%;height:clamp(420px,46vw,660px);width:auto;max-width:none}
@media(max-width:900px){
  .vierkant__in{align-items:start}
  .vierkant__tekst{display:block}
  .vierkant__fig{height:auto;min-height:430px}
  .vierkant__vorm{width:min(62vw,300px);height:min(88vw,400px)}
  .vierkant__duo{height:min(80vw,420px)}
}

/* ---------- mobiele correcties 27-aug (raakt alleen schermen tot 900px) ----------
   Twee figuren waren op mobiel absoluut gepositioneerd met een breedte-limiet; werd de foto
   daardoor hoger dan zijn container, dan stak hij naar BOVEN uit en lag hij over de knoppen van
   de tekst erboven. Gemeten: .ringen__duo op elke breedte tot 900px, .vierkant__duo tussen 600
   en 820px. Ze staan nu in de flow, dus uitsteken kan niet meer. Desktop blijft ongemoeid. */
@media(max-width:900px){
  .ringen__fig{height:auto;min-height:0;padding-top:1.5rem;display:flex;align-items:flex-end;justify-content:center}
  .ringen__duo{position:static;transform:none;display:block;margin:0 auto;width:min(88vw,420px);height:auto;max-width:100%}
  .ringen__cirkel,.ringen__ring{top:50%;left:50%;transform:translate(-50%,-50%)}
  .vierkant__fig{height:auto;min-height:0;padding:1.5rem 0 0;display:flex;align-items:flex-end;justify-content:center}
  .vierkant__duo{position:static;transform:none;display:block;margin:0 auto;width:min(80vw,360px);height:auto;max-width:100%}
  .vierkant__vorm{top:50%;left:50%;transform:translate(-50%,-50%) rotate(12deg)}
  .venster__fig{height:auto;min-height:0;padding-top:1.5rem;display:flex;align-items:flex-end;justify-content:center}
  .venster__persoon{position:static;transform:none;display:block;margin:0 auto;width:min(92vw,520px);height:auto;max-width:100%}
  .split__fig{height:auto;min-height:0;padding-top:1.5rem;display:flex;align-items:flex-end;justify-content:center}
  .split__trio{position:static;transform:none;display:block;margin:0 auto;width:min(92vw,440px);height:auto;max-width:100%}
  .split__cirkel{top:50%;transform:translate(-50%,-50%)}
}
/* de adressen staan tot 520px onder elkaar; twee naast elkaar leest korter en scheelt scrollen */
@media(max-width:520px){
  .footer__rooster{grid-template-columns:1fr 1fr;gap:1.4rem 1.2rem}
  .footer__rooster address,.footer__rooster ul{font-size:.85rem;line-height:1.6}
  .footer__rooster h2{font-size:.78rem;letter-spacing:.16em}
}

/* ---------- vierkant-blok definitief: scenefoto in de vorm, geen uitsnede meer (27-aug) ----------
   Rootcause van de terugkerende grijze resten: de gegenereerde plaat was voor 65 procent NIET
   magenta. Het model rendert een trap altijd MET kamer (muur, plafond, vloer), en het magenta
   scheen zelfs tussen de leuningspijlen door; er waren 3.401 losse lichte vlakken. Elke
   opgeruimde vlek legde de volgende bloot, en een magenta-vrije uitsnede bestond niet.
   Oplossing: dit is een SCENE, geen figuur. Scenes horen in een vorm, net als de boog en het
   dozenvak. De foto is opnieuw gegenereerd zonder magenta (0,00 procent gemeten) en vult nu de
   afgeronde rechthoek; de gedraaide zandvorm blijft er als accent achter staan. Geen key, dus
   geen restanten mogelijk. */
.vierkant__duo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(66%,340px);height:min(76%,470px);max-width:none;object-fit:cover;object-position:center 34%;
  border-radius:56px;box-shadow:0 24px 44px -22px rgba(43,42,41,.4);z-index:2;filter:none;clip-path:none}
@media(max-width:900px){
  .vierkant__fig{height:auto;min-height:0;padding:1.5rem 0 0;display:block;position:relative}
  .vierkant__duo{position:relative;left:auto;top:auto;transform:none;display:block;margin:0 auto;
    width:min(78vw,330px);height:min(96vw,430px);object-fit:cover}
  .vierkant__vorm{top:50%;left:50%;transform:translate(-50%,-50%) rotate(12deg);width:min(84vw,370px);height:min(104vw,470px)}
}

/* ---------- vierkant-blok: fotoblok ruim groter (27-aug, wens Shahab) ----------
   De fotokolom krijgt meer ruimte in het grid en vorm plus foto schalen mee. De breedte van de
   gedraaide vorm blijft begrensd door w*0,978 + h*0,208 <= kolombreedte, anders wordt hij afgekneld. */
.vierkant__in{grid-template-columns:1.16fr 0.84fr}
.vierkant__vorm{width:clamp(300px,36vw,480px);height:clamp(430px,58vw,760px)}
.vierkant__duo{width:min(74%,460px);height:min(82%,660px)}
@media(max-width:900px){
  .vierkant__in{grid-template-columns:1fr}
  .vierkant__vorm{width:min(88vw,390px);height:min(108vw,500px)}
  .vierkant__duo{width:min(82vw,350px);height:min(100vw,455px)}
}

/* ---------- vierkant-blok: fotoblok even lang als het tekstblok ernaast (27-aug) ----------
   De kolommen waren al even hoog, maar de foto vulde die hoogte niet. Nu vult de foto de rijhoogte
   en staat de gedraaide vorm er als accent achter; die blijft binnen w*0,978 + h*0,208 <= kolom. */
.vierkant__duo{width:min(96%,580px);height:94%}
.vierkant__vorm{width:min(68%,410px);height:92%}
@media(max-width:900px){
  .vierkant__duo{width:min(82vw,350px);height:min(100vw,455px)}
  .vierkant__vorm{width:min(88vw,390px);height:min(108vw,500px)}
}
/* correctie: op tabletbreedte werd de gedraaide vorm 561px in een kolom van 524; hoogte in px
   begrensd zodat w*0,978 + h*0,208 overal binnen de kolom blijft */
@media(min-width:901px){.vierkant__vorm{width:min(60%,400px);height:min(92%,900px)}}

/* ---------- vierkant-blok: het accentvlak weer groter dan de foto (27-aug) ----------
   Bij 12 graden kost elke pixel hoogte 0,208 px breedte, waardoor een vorm die hoog genoeg is om
   rond de foto uit te steken niet meer in de kolom past. Daarom 8 graden (0,139 per px) en een
   vorm die ruim groter is dan de foto; hij schuift iets naar links zodat de overhang naar de
   sectierand valt en niet achter de tekstkolom. */
@media(min-width:901px){
  .vierkant__vorm{width:min(84%,600px);height:min(112%,1120px);left:calc(50% - 46px);
    transform:translate(-50%,-50%) rotate(8deg);border-radius:80px}
  .vierkant__vorm::after{border-radius:96px;inset:-18px}
}

/* ---------- gat tussen mobiel en desktop dichten (27-aug) ----------
   De absoluut gepositioneerde figuren stonden op max-width:none met een hoogte in procenten van
   een gestretchte kolom. Tussen 901 en ongeveer 1000px is die kolom smal terwijl de tekst ernaast
   juist hoog is, dus werd de figuur breder dan zijn eigen kolom en viel hij over de knoppen van de
   tekst (gemeten: .ringen__duo op 940px). Een breedtegrens lost dat op; op ruimere schermen is de
   figuur al smaller dan zijn kolom, dus daar verandert er niets. */
@media(min-width:901px){
  .ringen__duo,.split__trio,.opslag__persoon{max-width:100%}
  /* .venster__persoon staat hier BEWUST niet meer bij (27-aug, Shahab: "ze mogen er overheen
     vloeien, dat is juist het design"). max-width:100% knijpt namelijk alleen de BREEDTE terug
     terwijl de hoogte hierboven vast staat (clamp), dus werd het figuur horizontaal samengeperst
     en zagen de mannen er uitgerekt uit: gemeten met chrome-headless 531x564 waar 678x564 hoort,
     22 procent te smal op 1360 tot 1920px. Zonder de grens loopt het figuur over zijn kolomrand
     heen op ware verhouding; de tekstkolom ligt met z-index 3 boven het figuur (z-index 2), dus
     de knoppen blijven bovenop en aanklikbaar. */
}
/* tussen 901 en 1150px is de fotokolom smal (480 tot 560px); daar past een foto van 96 procent
   plus een zichtbaar accentvlak niet naast elkaar. De foto krijgt daar wat ruimte terug zodat het
   accent zichtbaar blijft. Boven 1150px verandert er niets. */
@media(min-width:901px) and (max-width:1150px){
  .vierkant__duo{width:min(82%,430px);height:88%}
  .vierkant__vorm{width:min(94%,470px);height:min(104%,900px)}
}

/* ---------- decoratieve vormen binnen hun eigen vak houden (27-aug) ----------
   Dit was de echte oorzaak van "de foto ligt over de knop": niet de foto's maar de VORMEN
   erachter staken naar boven uit. Twee mechanismen, allebei gemeten op 390px:
   1. .vierkant__vorm staat 8 graden gedraaid; zijn omhullende is daardoor 483px hoog terwijl het
      vak 414px is, dus hij stak 34px boven de container uit, tot 39px over de belknop heen.
   2. .venster__boog stond op top:-6% (-19px) en kwam 8px over de belknop.
   Oplossing: genoeg verticale ruimte in het vak zodat de omhullende erbinnen past, en geen
   negatieve top meer. Alleen mobiel; desktop heeft ruimere vakken en blijft ongemoeid. */
@media(max-width:900px){
  .vierkant__fig{padding:3.5rem 0 3rem}
  .venster__fig{padding-top:2.4rem}
  .venster__boog{top:0;bottom:auto;height:100%}
  .split__fig{padding-top:2.4rem}
  .split__cirkel{top:auto;bottom:0;transform:translateX(-50%)}
}
/* restant: op mobiel stond de vorm nog op 12 graden (omhullende h*0,978 + w*0,208 = 570px in een
   vak van 559px). Gelijkgetrokken met desktop op 8 graden (h*0,990 + w*0,139 = 549px) plus wat
   meer verticale ruimte, en de cirkel in .split iets lager. */
@media(max-width:900px){
  .vierkant__vorm{transform:translate(-50%,-50%) rotate(8deg)}
  .vierkant__fig{padding:4.2rem 0 3.5rem}
  .split__fig{padding-top:3.2rem}
}

/* ---------- opslag: de donkere streep hoort ACHTER de mannen (27-aug) ----------
   Op desktop verdwijnt de schuin afgesneden onderrand van de foto achter de lijn, daar klopt het.
   In de gestapelde weergave is de foto niet afgesneden en liep de lijn (z-index 6) dwars door de
   benen heen, omdat de figuur daar in de flow staat en zijn z-index niet meetelde. De figuur komt
   nu boven de lijn; de streep loopt achter de lichamen langs en blijft zichtbaar in de
   transparante delen ernaast. */
@media(max-width:900px){
  /* De cutout is op kniehoogte afgesneden. Stond de figuur boven de streep, dan zweefden de
     afgesneden benen in de lucht; stond de streep ervoor zonder overlap, dan liep hij dwars door
     de benen. Nu zakt de figuur tot zijn onderrand IN de streep valt: de snijrand verdwijnt
     erachter en het leest als mannen die achter de streep staan. Kaart (4) blijft voor alles. */
  /* Geen donkere streep in de gestapelde weergave (wens Shahab): die liep of dwars door de benen
     of liet ze zweven. De figuur zakt nu zover dat zijn op kniehoogte afgesneden onderrand onder
     de sectierand valt; .opslag heeft overflow:hidden, dus de sectie snijdt hem af en het leest
     als mannen die doorlopen tot buiten beeld. Desktop houdt de streep, daar dekt hij de snijrand. */
  .opslag__lijn{display:none}
  /* het beeldblok staat 20 procent van de fotohoogte lager, zodat het niet tegen de tekstkaart
     plakt; de sectie groeit mee, dus onderaan valt er niet extra weg */
  .opslag__fig{padding-top:clamp(70px,20vw,120px)}
  .opslag__persoon{position:relative;z-index:1;margin-bottom:-165px}
  .opslag__band{z-index:0}
}