/* ===== Catering Juliëtte · projectstijl =====
   Tokens en componenten bovenop basis.css (niet wijzigen).
   Merk: bourgondisch-warm, crème/sage, Marcellus + Mulish. */

/* ---- fonts (lokaal, OFL) ---- */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/marcellus-400-latinext.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:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/marcellus-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/mulish-latinext.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:"Mulish";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/mulish-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:"Mulish";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/mulish-latinext.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:"Mulish";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/mulish-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:"Mulish";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/mulish-latinext.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:"Mulish";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/mulish-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}

/* ---- tokens (overschrijven basis) ---- */
:root{
  --sage:#5c6556;
  --sage-donker:#43493f;
  --sage-zacht:#697362;
  --creme:#eaece8;
  --beige:#dfddd1;
  --terra:#b4684a;
  --accent:#5c6556;
  --accent-d:#43493f;
  --inkt:#23281f;
  --inkt-2:#43493f;
  --tint:#dfddd1;
  --tint-2:#e6e8e2;
  --wit:#eaece8;
  --grijs:#565b50;
  --lijn:rgba(35,40,31,.14);
  --f-display:"Marcellus",Georgia,serif;
  --f-serif:"Marcellus",Georgia,serif;
  --f-body:"Mulish","Segoe UI",Arial,sans-serif;
  --r:2px;--r-s:2px;--wrap:76rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(1.25rem,5vw,5.5rem);
}
body{background:var(--creme);color:var(--inkt);font-weight:400}
.wrap{width:min(var(--wrap),100% - clamp(2.5rem,10vw,11rem))}
.wrap--smal{--wrap:56rem}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.kopbalans{text-wrap:balance;max-width:20ch}

/* typografie-overrides (basis gebruikt 800/condensed defaults) */
h1,h2,h3{font-weight:400;letter-spacing:0;line-height:1.04}
h1 em,h2 em,h3 em,.serif{font-style:normal}
.t-l{font-size:clamp(2.2rem,4.6vw,3.9rem)}
.t-m{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.lead{color:#454a40}
.op-inkt .lead{color:rgba(234,236,232,.78)}

/* eyebrow: kale letterspaced caps, nooit een streepje (merkregel).
   basis.css tekent standaard een ::before-streepje; hier uitgeschakeld. */
.oog{font-weight:600;font-size:.78rem;letter-spacing:.18em;color:var(--sage);text-transform:uppercase}
.oog::before{content:none}
.op-inkt .oog{color:rgba(234,236,232,.75)}

/* knoppen: pill, sage gevuld / sage outline */
.knop{font-weight:600;min-height:44px}
.knop .ic{width:1.15em;height:1.15em;flex:none}
.knop--accent{background:var(--sage);color:#f6f5f1;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 0 var(--sage-donker),0 12px 24px -12px rgba(35,40,31,.5)}
.knop--accent:active{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 var(--sage-donker)}
.knop--lijn{background:transparent;color:var(--inkt);box-shadow:0 0 0 1.5px var(--sage) inset,0 4px 0 rgba(92,101,86,.35)}
.op-inkt .knop--lijn{background:transparent;color:var(--creme);box-shadow:0 0 0 1.5px rgba(234,236,232,.85) inset,0 4px 0 rgba(234,236,232,.2)}

/* kopbalk */
.kopbalk{background:rgba(234,236,232,.86);backdrop-filter:blur(14px) saturate(1.4)}
.kopbalk.vast{background:rgba(234,236,232,.92);box-shadow:0 1px 0 var(--lijn)}
section[id]{scroll-margin-top:108px}
.merk img{height:64px;width:auto}
@media (max-width:1400px){.kopbalk__tel{display:none}}
.nav{gap:1.2rem}
.menuknop{background:var(--sage-donker)}
.mobmenu{background:var(--creme)}
.mobmenu a.m{font-family:var(--f-display);font-weight:400;font-size:2rem;letter-spacing:0;color:var(--sage-donker)}
.nav a::after{background:var(--terra);height:1.5px}
.kopbalk__tel{color:var(--sage-donker)}

/* ---- hero: split editorial ---- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:100svh;position:relative;background:var(--creme)}
.hero__links{display:flex;align-items:center;position:relative;padding:clamp(6.5rem,12vh,9rem) clamp(1.25rem,4vw,3.5rem) clamp(3.5rem,8vh,6rem) var(--gutter)}
.t-hero{font-size:clamp(2.125rem,3.1vw + .45rem,3.05rem);max-width:none}
.hero__wissel{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.55;color:#454a40;max-width:38ch;margin:1.4rem 0 0}
/* eerste paint nooit leeg: de tagline is hero-kern, kit-reveal (.onthul) overruled */
html.js .hero__wissel.onthul{opacity:1;transform:none;transition:none}
/* wisselwoord: Marcellus-woord rolt per letter door een masker; het nieuwe
   woord jaagt het oude omhoog weg, het masker breedt mee en de sage-streek
   tekent zich bij elke wissel opnieuw. Nooit een leeg frame. */
.hero__wissel .wissel{display:inline-block;position:relative;white-space:nowrap;vertical-align:bottom}
.hero__wissel .wissel__mask{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;transition:width .5s var(--ease)}
.hero__wissel .wissel em{font-family:var(--f-display);font-style:normal;font-weight:400;font-size:1.18em;color:var(--terra);display:inline-block}
.hero__wissel .wissel em.w-uit{position:absolute;left:0;top:0}
.hero__wissel .wissel .lt{display:inline-block;transition:transform .5s var(--ease);transition-delay:calc(var(--j)*16ms)}
.hero__wissel .wissel em.w-uit .lt{transform:translateY(-115%)}
.hero__wissel .wissel em.w-in .lt{transform:translateY(115%);transition:none}
.hero__wissel .wissel__streek{position:absolute;left:-1.5%;bottom:-.07em;width:103%;height:.5em;overflow:visible;pointer-events:none}
.hero__wissel .wissel__streek path{fill:none;stroke:var(--sage);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hero__wissel .wissel__streek .streek-bij{stroke-width:1.4;opacity:.45}
.hero .knoprij{margin-top:2.2rem}
.hero__bewijs{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;margin:2.6rem 0 0;padding:0}
.hero__bewijs span{display:flex;align-items:center;gap:1.1rem;font:600 .76rem/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-zacht)}
.hero__bewijs span + span::before{content:"·";color:var(--sage)}
.hero__beeld{position:relative;min-height:44vh;background:url(assets/hero-poster.jpg) center/cover no-repeat var(--sage-zacht)}
.hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__beeld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,22%,190px);background:linear-gradient(to bottom,rgba(234,236,232,0),var(--creme));pointer-events:none;z-index:2}
html:not(.js) .hero__film{display:none}

/* signatuur-lijntekening (M2): knoflook + kruidtakje, tekent zichzelf */
.tekening{position:absolute;right:-56px;bottom:clamp(1.2rem,4vh,2.4rem);width:clamp(120px,12vw,180px);z-index:6;pointer-events:none;overflow:visible}
.tekening path,.watermerk path,.check__motief path{fill:none;stroke:var(--sage);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
html.js .tekening path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.9s cubic-bezier(.33,.66,.3,1)}
html.js .tekening.getekend path{stroke-dashoffset:0}

/* ---- laadscherm: echt logo, contour + sage-naar-crème mask-fill op sage-donker ---- */
html:not(.js) .laad{display:none}
.laad{background:var(--sage-donker)}
.laad__logo{position:relative;width:min(340px,66vw);aspect-ratio:865/520}
.laad__contour,.laad__vul i{-webkit-mask:url(assets/logo.png) center/contain no-repeat;mask:url(assets/logo.png) center/contain no-repeat}
.laad__contour{position:absolute;inset:0;background:rgba(234,236,232,.16)}
.laad__vul{position:absolute;inset:0;overflow:hidden}
.laad__vul i{position:absolute;inset:0;background:linear-gradient(0deg,var(--sage),#f6f5f1 78%);transform:translateY(101%);animation:cj-vullogo 1.5s .18s cubic-bezier(.32,.72,.28,1) forwards}
@keyframes cj-vullogo{to{transform:none}}
.laad__baan{width:min(340px,66vw);height:3px;margin-top:1.7rem;border-radius:2px;background:rgba(234,236,232,.12);overflow:hidden}
.laad__baan i{display:block;height:100%;background:var(--terra);transform:scaleX(0);transform-origin:left;animation:cj-baan 1.15s .38s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes cj-baan{to{transform:scaleX(1)}}
.laad__sub{margin:1.1rem 0 0;font:600 .78rem/1 var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:rgba(234,236,232,.55)}

/* ---- diensten (M4) ---- */
.diensten__kop{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:end}
.diensten__intro{margin:0 0 .5rem;color:#454a40;max-width:40ch}
.diensten__kop + .dienst{margin-top:clamp(2.2rem,4.5vw,3.6rem)}
.dienst{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:center;margin-top:clamp(3rem,6vw,5.5rem)}
.dienst--om .dienst__beeld{order:2}
.dienst__beeld{position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden}
.dienst__plx{position:absolute;inset:-8% 0;will-change:transform}
.dienst__plx img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.dienst:hover .dienst__plx img{transform:scale(1.03)}
.dienst__nr{font:400 .95rem/1 var(--f-display);color:var(--terra);letter-spacing:.14em}
.dienst__tekst h3{font-size:clamp(1.85rem,3vw,2.6rem);margin:.55rem 0 .9rem;padding-bottom:.55rem;position:relative;display:inline-block}
.dienst__tekst h3::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--terra);transform:scaleX(.22);transform-origin:left;transition:transform .6s var(--ease)}
.dienst:hover .dienst__tekst h3::after{transform:scaleX(1)}
.dienst__tekst p{margin:0;color:#454a40;max-width:46ch}
.dienst__link{display:inline-flex;gap:.45rem;align-items:center;margin-top:1.2rem;font-weight:600;color:var(--sage-donker);text-decoration:none;min-height:44px;position:relative}
.dienst__link::after{content:"";position:absolute;left:0;bottom:6px;height:1.5px;width:100%;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.dienst__link:hover::after{transform:scaleX(1)}
.dienst__link i{font-style:normal;transition:transform .35s var(--ease)}
.dienst__link:hover i{transform:translateX(4px)}

/* ---- gelegenheidscheck (M5) ---- */
.check{position:relative;overflow:clip}
.check__motief{position:absolute;left:-4%;top:18%;width:min(400px,55vw);opacity:.07;pointer-events:none}
.check__grid{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:start;margin-top:2.4rem;position:relative}
.check__box{position:relative;padding:clamp(.2rem,1vw,1rem) 0}
.check__foto{margin:0;border-radius:2px;overflow:hidden;aspect-ratio:4/5;position:relative}
.check__foto img{width:100%;height:100%;object-fit:cover}
.check__dots{display:flex;gap:.55rem;margin-bottom:1.6rem}
html:not(.js) .check__dots{display:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lijn);transition:background .3s,transform .3s}
.dot.klaar{background:var(--sage)}
.dot.actief{background:var(--terra);transform:scale(1.3)}
html.js .check .vraag{display:none}
html.js .check .vraag.actief{display:block;animation:vraagin .5s var(--ease)}
@keyframes vraagin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vraag h3{font-size:clamp(1.75rem,2.9vw,2.35rem);margin:0 0 1.6rem;max-width:22ch}
.opties{display:flex;flex-direction:column;counter-reset:optie;border-bottom:1px solid var(--lijn)}
.optie{counter-increment:optie;display:flex;align-items:center;gap:1.15rem;min-height:56px;padding:1.05rem .35rem;text-align:left;background:transparent;border:0;border-top:1px solid var(--lijn);border-radius:0;font:600 1.05rem/1.35 var(--f-body);color:var(--inkt);cursor:pointer;position:relative;transition:background .3s}
.optie::before{content:counter(optie,decimal-leading-zero);flex:none;font:400 .92rem/1 var(--f-display);letter-spacing:.14em;color:var(--terra);transition:transform .35s var(--ease)}
.optie::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.optie:hover,.optie:focus-visible{background:rgba(92,101,86,.06)}
.optie:hover::after,.optie:focus-visible::after,.optie.gekozen::after{transform:scaleX(1)}
.optie:hover::before{transform:translateX(4px)}
.optie.gekozen{background:rgba(92,101,86,.14)}
.uitslag[hidden]{display:none}
.uitslag{border-left:3px solid var(--terra);padding-left:clamp(1.2rem,3vw,2rem);animation:vraagin .5s var(--ease)}
.uitslag__label{font:600 .78rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin:0 0 .7rem}
.uitslag__dienst{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:0 0 .9rem}
.uitslag p{color:#454a40;max-width:52ch}
.uitslag__waarom{font-weight:600;color:var(--sage-donker)!important;border-top:1px solid var(--lijn);padding-top:.9rem;margin-top:.9rem}
.uitslag .knoprij{margin-top:1.6rem}
.uitslag__alt{margin-top:1.2rem;font-size:.95rem}
.uitslag__alt a{color:var(--sage-donker);font-weight:600}
.linkknop{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--sage-donker);text-decoration:underline;cursor:pointer;min-height:44px}
.check__nojs{display:none}
html:not(.js) .check__nojs{display:block;border-top:1px solid var(--lijn);margin-top:1.6rem;padding-top:1.2rem}

/* ---- galerij (M6) ---- */
.galerij{padding-bottom:clamp(4.5rem,9vw,8rem)}
.strip{margin-top:2.6rem;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.strip__spoor{display:flex;gap:clamp(.8rem,1.8vw,1.4rem);width:max-content;padding:0 var(--gutter);align-items:center;will-change:transform}
.strip img{height:clamp(210px,26vw,340px);width:auto;border-radius:2px;flex:none}
.galerij__cta{margin:1.6rem 0 0;display:flex;justify-content:flex-end}

/* ---- over Juliëtte ---- */
.over{position:relative;overflow:hidden}
.watermerk{position:absolute;right:-3%;top:4%;width:min(430px,58vw);opacity:.16;pointer-events:none}
.duo__beeld{aspect-ratio:3/5}
.over .duo{align-items:center}
.over p{color:#454a40;max-width:52ch}

/* ---- contact ---- */
.contact{background:var(--sage-donker)}
.contact__grid{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.form{display:grid;gap:1.2rem;margin-top:2.2rem;max-width:34rem}
.veld{display:grid;gap:.35rem}
.veld label{font:600 .78rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(234,236,232,.75)}
.veld label small{letter-spacing:.04em;text-transform:none;font-weight:400;color:rgba(234,236,232,.55)}
.veld input,.veld textarea{width:100%;background:rgba(234,236,232,.06);border:1px solid rgba(234,236,232,.28);border-radius:2px;padding:.85rem 1rem;color:var(--creme);font:400 1rem/1.4 var(--f-body);transition:border-color .25s,background .25s}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--terra);background:rgba(234,236,232,.1)}
.veld input::placeholder,.veld textarea::placeholder{color:rgba(234,236,232,.4)}
.veld.foutief input,.veld.foutief textarea{border-color:var(--terra)}
.fout{min-height:1.1em;font-size:.85rem;color:#e0a68d;font-weight:600}
.form .knop{justify-self:start}
.form-klaar{margin-top:2.2rem;border:1px solid rgba(234,236,232,.28);border-radius:2px;padding:1.6rem;max-width:34rem;animation:vraagin .5s var(--ease)}
.form-klaar p{margin:0 0 1.2rem;color:rgba(234,236,232,.85)}
.kaartje{background:rgba(234,236,232,.05);border:1px solid rgba(234,236,232,.16);border-radius:2px;padding:clamp(1.4rem,2.5vw,2rem)}
.kaartje__foto{display:block;width:100%;height:auto;border-radius:2px;margin-bottom:1.4rem}
.kaartje h3{font-size:1.5rem;margin:0 0 1rem;color:var(--creme)}
.contactlijst{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.contactlijst a{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.45rem 0;color:rgba(234,236,232,.85);text-decoration:none;font-weight:600;position:relative}
.contactlijst a::after{content:"";position:absolute;left:0;bottom:4px;height:1.5px;width:100%;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.contactlijst a:hover::after{transform:scaleX(1)}
.contactlijst .ic{width:1.05em;height:1.05em}
.kaartje__notitie{margin:1.2rem 0 0;font-size:.9rem;color:rgba(234,236,232,.6)}

/* ---- voet ---- */
.voet{background:var(--inkt)}
.voet__logo{height:52px;width:auto;margin-bottom:.9rem;filter:brightness(0) invert(.96)}
.voet__payoff{font-family:var(--f-display);color:var(--creme);font-size:1.05rem;margin:0;letter-spacing:.04em}
.voet a:hover{color:var(--terra)}

/* ---- plakker ---- */
.plakker{background:var(--sage-donker);color:var(--creme)}
.plakker.verborgen{transform:translate(-50%,160%)}
.plakker .knop--accent{background:var(--terra);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 4px 0 #8e4f36,0 12px 24px -12px rgba(0,0,0,.5)}
.plakker .knop--accent:active{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 0 #8e4f36}

/* ---- custom cursor (M7): lepeltje ---- */
.lepel{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:26px;height:26px;transform:translate(-100px,-100px)}
.lepel svg{display:block;width:100%;height:100%;transition:transform .28s var(--ease);filter:drop-shadow(0 1px 1px rgba(35,40,31,.25))}
.lepel.tilt svg{transform:rotate(-26deg) scale(1.18)}
.lepel{opacity:1;transition:opacity .25s}
.lepel.weg{opacity:0}
.lepel-aan,.lepel-aan a,.lepel-aan button{cursor:none}
.lepel-aan .form,.lepel-aan .form *,.lepel-aan .check,.lepel-aan .check *,.lepel-aan input,.lepel-aan textarea,.lepel-aan label,.lepel-aan select{cursor:auto}
@media (hover:none),(pointer:coarse){.lepel{display:none}}

/* ---- styleguide ---- */
.sg-hero{padding:7rem 0 3rem}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1.6rem}
.sg-kleur{border:1px solid var(--lijn);border-radius:2px;overflow:hidden}
.sg-kleur i{display:block;height:92px}
.sg-kleur span{display:block;padding:.6rem .8rem;font-size:.85rem}
.sg-kleur span b{display:block;font-weight:600}
.sg-rij{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.4rem}
.sg-blok{padding:3rem 0;border-top:1px solid var(--lijn)}
.sg-blok h2{font-size:1.6rem;margin:0 0 .4rem}
.sg-notitie{color:var(--grijs);font-size:.92rem;margin:0 0 1rem}
.sg-donker{background:var(--sage-donker);color:var(--creme);padding:1.6rem;border-radius:2px;margin-top:1.4rem}
.sg-donker .veld{max-width:26rem}
.sg-lijnwerk{display:flex;gap:2rem;align-items:flex-end;flex-wrap:wrap;margin-top:1.4rem}

/* ---- responsive ---- */
@media (max-width:1100px){
  .contact__grid{grid-template-columns:1fr}
  .kaartje{max-width:34rem}
}
@media (max-width:880px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__links{padding-top:8rem;padding-bottom:3.5rem}
  .hero__beeld{min-height:0;aspect-ratio:16/10}
  .tekening{right:14px;bottom:1.4rem;width:110px}
  .merk img{height:48px}
  .hero__bewijs{margin-top:2rem}
  .diensten__kop{grid-template-columns:1fr;gap:.4rem;align-items:start}
  .dienst{grid-template-columns:1fr;gap:1.4rem;margin-top:3.2rem}
  .dienst--om .dienst__beeld{order:0}
  .check__grid{grid-template-columns:1fr}
  .check__foto{aspect-ratio:16/10;max-height:300px}
  .check__motief{top:auto;bottom:-6%;left:auto;right:-14%;opacity:.12}
  .duo__beeld{aspect-ratio:4/3.4}
  .watermerk{opacity:.14;top:auto;bottom:-6%;right:-14%}
}
@media (max-width:480px){
  .tekening{display:none}
  .hero__bewijs span + span::before{display:none}
  .hero__bewijs{gap:.3rem 1.1rem}
}
@media (max-width:420px){
  .t-hero{font-size:2.125rem}
  .hero .knoprij .knop{flex:1 1 100%;justify-content:center}
}

/* ---- checkpagina: kale lead magnet zonder site-chroom ---- */
.checkpagina{min-height:100svh;display:flex;flex-direction:column;background:var(--beige)}
.checkpagina__balk{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem var(--gutter)}
.checkpagina__balk .merk img{height:56px;width:auto}
.checkpagina__tel{font-weight:600;color:var(--sage-donker);min-height:44px;display:inline-flex;align-items:center;text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;transition:background-size .3s var(--ease)}
.checkpagina__tel:hover{background-size:100% 2px;color:var(--terra)}
.check--los{flex:1;display:grid;place-items:center;padding:clamp(1.5rem,5vh,3.5rem) var(--gutter) clamp(3rem,8vh,5rem)}
.check--los .check__box{width:min(46rem,100%)}
.check--los h1{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:.5rem 0 .4rem}
.check--los .check__dots{margin-top:1.8rem}
.checkpagina__terug{margin:2.6rem 0 0;text-align:center}
.checkpagina__terug a{color:var(--sage-donker);font-weight:600}
html:not(.js) .check--los .vraag,html:not(.js) .check--los .uitslag,html:not(.js) .check--los .check__dots{display:none}

/* ---- teaser (lead magnet-opener op de homepage) ---- */
.teaser .lead{margin:.9rem 0 0;max-width:46ch}
.teaser .knoprij{margin-top:2rem}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html.js .tekening path{transition:none;stroke-dashoffset:0}
  .dienst__plx{position:absolute;inset:0}
  .strip__spoor{transform:none!important}
  html.js .check .vraag.actief,.uitslag,.form-klaar{animation:none}
  .lepel{display:none}
}