/* ============================================================
   HMA Autoschade | Den Haag

   Palet: warm wit, zwart, flyer goud (licht thema)
   ============================================================ */

:root{
  --ink:#FFFFFF;
  --panel:#FFFFFF;
  --tint:#F7F5EF;
  --panel-2:#F1EEE4;
  --line:#E3DFD2;
  --paper:#191B1F;
  --mute:#5D6167;
  --donker:#0C0D0F;
  --licht:#F4F3EF;
  --mute-donker:#9DA1A8;
  --geel:#E9AC24;
  --geel-deep:#C88F12;
  --rood:#E10600;
  --tape:#E9AC24;
  --tape-ink:#241A04;
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-body:"Barlow",Arial,sans-serif;
  --max:1200px;
  --radius:10px;
  --shadow:0 16px 40px rgba(30,26,12,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
strong{font-weight:600}

::selection{background:var(--geel);color:#111}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:.5px;
}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.65rem);letter-spacing:1px}

.wrap{width:min(var(--max),calc(100% - 2.5rem));margin-inline:auto}

/* ---------- Skiplink en focus ---------- */
.skiplink{position:absolute;left:-999px;top:0;background:var(--geel);color:#111;padding:.6rem 1rem;z-index:200;font-weight:600}
.skiplink:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--geel);outline-offset:3px;border-radius:3px;
}

/* ---------- Topbalk ---------- */
.topbar{
  background:#0C0D0F;
  border-bottom:1px solid #1F2126;
  font-size:.82rem;
  color:#9DA1A8;
}

.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;flex-wrap:wrap}
.topbar a{color:#FFFFFF;font-weight:500}
.topbar a:hover{color:var(--geel)}
.topbar .nood{color:#FFFFFF}
@media(max-width:640px){.topbar .hours{display:none}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(12,13,15,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #1F2126;
  transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand .logo{height:60px;width:auto;display:block}
.mainnav{display:flex;align-items:center;gap:1.6rem}
.mainnav a{
  font-family:var(--font-display);
  font-weight:600;font-size:1.05rem;letter-spacing:1.5px;text-transform:uppercase;
  color:#F4F3EF;position:relative;padding:.3rem 0;
}
.mainnav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--geel);
  transition:right .22s ease;
}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{right:0}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.nav-toggle{display:none;background:none;border:1px solid #33373E;border-radius:8px;color:#F4F3EF;padding:.5rem .65rem;cursor:pointer}
.nav-toggle svg{display:block}

@media(max-width:960px){
  .mainnav{
    position:fixed;inset:0;top:0;background:rgba(10,11,12,.97);
    flex-direction:column;justify-content:center;gap:2rem;
    transform:translateX(100%);transition:transform .3s ease;z-index:150;
  }
  .mainnav.open{transform:translateX(0)}
  .mainnav a{font-size:1.6rem}
  .nav-toggle{display:block;z-index:160;position:relative}
  .nav-cta .btn-ghost{display:none}
}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  font-size:1rem;padding:.78rem 1.5rem;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,background .2s ease,border-color .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--geel);color:#111}
.btn-red:hover{background:var(--geel-deep)}
.btn-ghost{background:transparent;color:var(--paper);border-color:#C9C4B4}
.btn-ghost:hover{border-color:var(--paper)}
.btn-wa{background:#25D366;color:#06280F}
.btn-wa:hover{background:#1FB958}
.btn-lg{font-size:1.12rem;padding:.95rem 1.9rem}

/* ---------- Tape eyebrow (handtekening element) ---------- */
.tape{
  display:inline-block;
  background:var(--tape);
  color:var(--tape-ink);
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  letter-spacing:3px;text-transform:uppercase;
  padding:.35rem 1.1rem;
  transform:rotate(-1.2deg);
  clip-path:polygon(1.5% 8%,3% 0,97.5% 3%,100% 12%,99% 90%,96.5% 100%,2.5% 97%,0 88%);
  box-shadow:0 3px 10px rgba(30,26,12,.18);
  margin-bottom:1.1rem;
}
.tape.alt{transform:rotate(.9deg)}

/* ---------- Secties ---------- */
.section{padding:5.5rem 0}
.section.tight{padding:3.5rem 0}
.section-head{max-width:720px;margin-bottom:2.8rem}
.section-head p{color:var(--mute);margin-top:1rem;font-size:1.06rem}
.laklijn{position:relative;display:inline-block;padding-bottom:.35rem}
.laklijn::after{
  content:"";position:absolute;left:0;bottom:0;height:5px;width:76px;
  background:linear-gradient(90deg,var(--geel),var(--geel) 70%,transparent);
  border-radius:3px;
}
.center{text-align:center}
.center .section-head{margin-inline:auto}
.center .laklijn::after{left:50%;transform:translateX(-50%);background:var(--geel)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:82vh;display:flex;align-items:center;
  overflow:hidden;color:#F4F3EF;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.80) 38%,rgba(8,9,10,.26) 75%,rgba(8,9,10,.42) 100%);
}
.hero .wrap{position:relative;z-index:1;padding:7rem 0 6rem}
@media(max-width:640px){
  .hero{min-height:auto}
  .hero .wrap{padding:4.5rem 0 4rem}
}
.hero-kicker{
  font-family:var(--font-display);font-weight:600;letter-spacing:4px;text-transform:uppercase;
  color:var(--geel);font-size:1.02rem;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;
}
.hero-kicker::before{content:"";width:42px;height:3px;background:var(--geel);display:inline-block}
.hero h1{max-width:15ch}
.hero h1 .rood{color:var(--geel)}
.hero-sub{max-width:52ch;color:#D6D8DC;margin-top:1.3rem;font-size:1.15rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.hero-usps{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.6rem;color:#C9CCD1;font-size:.95rem}
.hero-usps li{display:flex;align-items:center;gap:.5rem}
.hero-usps svg{color:var(--geel);flex:none}


/* ---------- USP grid ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.usp{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem;transition:border-color .2s ease,transform .2s ease;
}
.usp:hover{border-color:#CFC9B8;transform:translateY(-3px)}
.usp .icon{
  width:46px;height:46px;border-radius:9px;background:rgba(233,172,36,.14);
  display:grid;place-items:center;color:var(--geel);margin-bottom:1rem;
}
.usp h3{font-size:1.25rem;margin-bottom:.4rem}
.usp p{color:var(--mute);font-size:.97rem}
@media(max-width:900px){.usp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.usp-grid{grid-template-columns:1fr}}

/* ---------- Diensten grid ---------- */
.diensten-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.dienst-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .2s ease,transform .2s ease;position:relative;overflow:hidden;
}
.dienst-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--geel);
  transform:scaleY(0);transform-origin:top;transition:transform .25s ease;
}
.dienst-card:hover{border-color:#CFC9B8;transform:translateY(-3px)}
.dienst-card:hover::before{transform:scaleY(1)}
.dienst-card h3{font-size:1.22rem}
.dienst-card p{color:var(--mute);font-size:.94rem;flex:1}
.dienst-card .meer{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  font-size:.92rem;color:var(--geel);display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;
}
.dienst-card.soon{opacity:.75}
.badge-soon{
  position:absolute;top:1rem;right:1rem;background:var(--panel-2);border:1px solid var(--line);
  color:var(--tape);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--font-display);font-weight:600;padding:.2rem .55rem;border-radius:99px;
}
@media(max-width:1000px){.diensten-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.diensten-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.diensten-grid{grid-template-columns:1fr}}

/* ---------- Voor en na ---------- */
.vn-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch;margin-bottom:1.4rem;
}
.vn-item{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.vn-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.vn-label{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  background:#F4F3EF;color:#26282D;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:3px;text-transform:uppercase;
  padding:.3rem .95rem;transform:rotate(-2deg);
  clip-path:polygon(2% 10%,4% 0,97% 4%,100% 14%,98.5% 88%,96% 100%,3% 96%,0 86%);
  box-shadow:0 3px 8px rgba(30,26,12,.25);
}
.vn-label.na{background:var(--geel);color:#111;transform:rotate(1.6deg)}
.vn-caption{color:var(--mute);font-size:.95rem;margin:-.4rem 0 2.4rem}
@media(max-width:640px){.vn-pair{grid-template-columns:1fr}}

/* ---------- Werkwijze ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center}
.split .media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.steps{display:flex;flex-direction:column;gap:0;counter-reset:stap}
.step{
  display:flex;gap:1.2rem;padding:1.25rem 0;border-bottom:1px solid var(--line);counter-increment:stap;
}
.step:last-child{border-bottom:none}
.step::before{
  content:counter(stap,decimal-leading-zero);
  font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--geel);
  line-height:1;min-width:2.6rem;padding-top:.15rem;
}
.step h3{font-size:1.2rem;margin-bottom:.25rem}
.step p{color:var(--mute);font-size:.97rem}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- Over strook ---------- */
.over-strip{background:var(--tint);border-block:1px solid var(--line)}
.over-strip .split{align-items:start}
.feitjes{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.8rem}
.feit{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem;font-size:.95rem;display:flex;gap:.6rem;align-items:center}
.feit svg{color:var(--geel);flex:none}
@media(max-width:520px){.feitjes{grid-template-columns:1fr}}

/* ---------- Quote / missie ---------- */
.missie{
  border-left:4px solid var(--geel);padding-left:1.6rem;max-width:62ch;
  font-size:1.25rem;line-height:1.55;color:#2B2E34;font-weight:400;
}
.missie footer{margin-top:1rem;color:var(--mute);font-size:.95rem;font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase}

/* ---------- Kaart en reviews ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);height:100%;min-height:360px}
.map-frame iframe{width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.35) contrast(1.05)}
.infolijst{display:flex;flex-direction:column;gap:1.05rem}
.inforij{display:flex;gap:.9rem;align-items:flex-start}
.inforij .icon{width:40px;height:40px;border-radius:8px;background:rgba(233,172,36,.14);display:grid;place-items:center;color:var(--geel);flex:none}
.inforij h3{font-size:1.05rem;letter-spacing:2px;margin-bottom:.15rem}
.inforij p,.inforij a{color:var(--mute);font-size:.98rem}
.inforij a:hover{color:var(--paper)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:.8rem;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 1.4rem;font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  letter-spacing:1px;text-transform:uppercase;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--geel);line-height:1;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .antwoord{padding:0 1.4rem 1.3rem;color:var(--mute)}

/* ---------- CTA slab ---------- */
.cta-slab{
  background:linear-gradient(115deg,#F2BC43,var(--geel) 55%,#DE9F16);
  color:#17130A;
  border-block:1px solid #D69B14;
  text-align:center;padding:5rem 0;
  position:relative;overflow:hidden;
}
.cta-slab::before{
  content:"";position:absolute;inset:auto -10% -60% -10%;height:70%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.28),transparent 65%);
  pointer-events:none;
}
.cta-slab h2{margin-bottom:.8rem}
.cta-slab p{color:#4A3B10;max-width:52ch;margin:0 auto 2rem}
.cta-slab .hero-cta{justify-content:center;margin-top:0}

/* ---------- Footer ---------- */
.site-footer{background:#0C0D0F;color:#F4F3EF;padding:4rem 0 2rem;font-size:.95rem}
.site-footer .footer-grid h3{color:#F4F3EF}
.site-footer .footer-grid p,.site-footer .footer-grid a,.site-footer .footer-grid li{color:#9DA1A8}
.site-footer .footer-grid a:hover{color:#F4F3EF}
.site-footer .footer-bottom{border-top-color:#1F2126;color:#9DA1A8}
.site-footer .footer-bottom a{color:#F4F3EF}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.8rem}
.footer-grid h3{font-size:1.02rem;letter-spacing:2.5px;margin-bottom:1rem;color:var(--paper)}
.footer-grid p,.footer-grid a,.footer-grid li{color:var(--mute)}
.footer-grid a:hover{color:var(--paper)}
.footer-grid li{margin-bottom:.5rem}
.footer-brand .logo{height:84px;width:auto;margin-bottom:1rem;display:block}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--mute);font-size:.85rem;
}
.footer-bottom a{color:var(--paper)}
.footer-bottom a:hover{color:var(--geel)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Mobiele actiebalk ---------- */
.actionbar{display:none}
@media(max-width:760px){
  body{padding-bottom:64px}
  .actionbar{
    display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;bottom:0;left:0;right:0;z-index:120;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 -6px 20px rgba(30,26,12,.08);
  }
  .actionbar a{
    display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.95rem .5rem;
    font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:.95rem;
  }
  .actionbar a+a{border-left:1px solid var(--line)}
  .actionbar .melden{background:var(--geel);color:#111}
  .actionbar svg{flex:none}
}

/* ---------- Subpagina hero ---------- */
.page-hero{
  background:
    radial-gradient(ellipse 60% 80% at 85% 10%,rgba(233,172,36,.16),transparent 60%),
    var(--panel);
  border-bottom:1px solid var(--line);
  padding:4.5rem 0 3.5rem;
}
.crumbs{font-size:.85rem;color:var(--mute);margin-bottom:1.4rem;display:flex;gap:.5rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--paper)}
.crumbs span[aria-hidden]{color:#C9C4B4}
.page-hero p.lead{max-width:60ch;color:var(--mute);margin-top:1.1rem;font-size:1.1rem}

/* ---------- Dienstpagina ---------- */
.dienst-body{display:grid;grid-template-columns:1.4fr .8fr;gap:3rem;align-items:start}
.dienst-body .tekst p{margin-bottom:1.1rem;color:#3A3E45}
.dienst-body .tekst h2{font-size:1.6rem;margin:2rem 0 .9rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.65rem;color:#3A3E45}
.checklist svg{color:var(--geel);flex:none;margin-top:.3rem}
.zijkaart{
  position:sticky;top:110px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;
}
.zijkaart h3{font-size:1.25rem}
.zijkaart p{color:var(--mute);font-size:.95rem}
.zijkaart .btn{justify-content:center}
.notitie{
  background:var(--panel-2);border:1px dashed var(--line);border-radius:8px;
  padding:1rem 1.2rem;color:var(--mute);font-size:.95rem;margin-top:1.6rem;
}
@media(max-width:860px){.dienst-body{grid-template-columns:1fr}.zijkaart{position:static}}

/* ---------- Formulier ---------- */
.formkaart{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:2.2rem;max-width:760px;
}
.veldgroep{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.veld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.veld.breed{grid-column:1/-1}
.veld label{
  font-family:var(--font-display);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-size:.92rem;
}
.veld label .optioneel{color:var(--mute);letter-spacing:0;text-transform:none;font-family:var(--font-body);font-weight:400}
.veld input,.veld select,.veld textarea{
  background:var(--ink);border:1px solid var(--line);border-radius:8px;color:var(--paper);
  padding:.75rem .9rem;font-family:var(--font-body);font-size:1rem;width:100%;
  transition:border-color .2s ease;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--geel);outline:none}
.veld textarea{min-height:130px;resize:vertical}
.radio-rij{display:flex;gap:1.6rem;padding:.4rem 0}
.radio-rij label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:0;font-size:1rem;cursor:pointer}
.radio-rij input{width:18px;height:18px;accent-color:var(--geel)}
.form-note{color:var(--mute);font-size:.9rem;margin-top:1rem}
.fotohint{
  display:flex;gap:1rem;align-items:center;background:var(--panel-2);border:1px dashed var(--line);
  border-radius:8px;padding:1rem 1.2rem;margin:1.4rem 0;
}
.fotohint svg{color:#25D366;flex:none}
.fotohint p{color:var(--mute);font-size:.95rem}
@media(max-width:640px){.veldgroep{grid-template-columns:1fr}.formkaart{padding:1.5rem}}

/* ---------- Portfolio ---------- */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.portfolio-grid figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);position:relative}
.portfolio-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.portfolio-grid figcaption{padding:.9rem 1.1rem;color:var(--mute);font-size:.92rem;border-top:1px solid var(--line)}
@media(max-width:640px){.portfolio-grid{grid-template-columns:1fr}}

/* ---------- Reveal animatie ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- 404 ---------- */
.err{min-height:60vh;display:grid;place-items:center;text-align:center;padding:5rem 0}
.err .code{font-family:var(--font-display);font-weight:700;font-size:7rem;color:var(--geel-deep);line-height:1}

/* ---------- Grid varianten ---------- */
.usp-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.usp-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.usp-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.usp-grid.cols-2,.usp-grid.cols-3{grid-template-columns:1fr}}

/* ---------- Compacte header op klein scherm ---------- */
@media(max-width:560px){
  .nav-cta .btn-red{display:none}
  .brand .logo{height:48px}
}


/* ============================================================
   Witte uitvoering: contrast en accenten
   ============================================================ */
:root{--geel-tekst:#8F6604}

/* accentwoord in koppen: markeerstreep in plaats van gele tekst */
.hero h1 .rood{color:var(--geel)}

/* gele tekst op wit donkerder voor leesbaarheid */
.dienst-card .meer{color:var(--geel-tekst)}
.badge-soon{color:var(--geel-tekst)}
.step::before{color:var(--geel-deep)}

/* knoppen op het gouden cta blok */
.cta-slab .btn-red{background:#17130A;color:#FFFFFF}
.cta-slab .btn-red:hover{background:#2B2415}
.cta-slab .btn-ghost{color:#17130A;border-color:rgba(23,19,10,.4)}
.cta-slab .btn-ghost:hover{border-color:#17130A}

/* formuliervelden met lichte tint voor definitie */
.veld input,.veld select,.veld textarea{background:var(--tint)}

/* logo maat in mobiel menu en kleine schermen */
.footer-brand{display:block}

/* ============================================================
   Donkere kaders (top en footer), witte inhoud
   ============================================================ */
.site-header .btn-ghost{color:#F4F3EF;border-color:#3A3F48}
.site-header .btn-ghost:hover{border-color:#F4F3EF}
.hero .btn-ghost{color:#F4F3EF;border-color:#4A4F58}
.hero .btn-ghost:hover{border-color:#F4F3EF}

/* mobiele actiebalk donker, sluit aan op footer */
@media(max-width:760px){
  .actionbar{background:rgba(12,13,15,.96);border-top:1px solid #1F2126;box-shadow:none}
  .actionbar a{color:#F4F3EF}
  .actionbar .melden{background:var(--geel);color:#111}
}

/* ============================================================
   Diepte op wit: subtiele schaduwen en kaartranden
   ============================================================ */
.usp,.dienst-card,.faq details{box-shadow:0 2px 10px rgba(30,26,12,.05)}
.usp:hover,.dienst-card:hover{box-shadow:0 10px 26px rgba(30,26,12,.10)}
.formkaart,.zijkaart{box-shadow:0 6px 24px rgba(30,26,12,.07)}

/* hero overgang naar witte inhoud */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--geel);
  z-index:2;
}