/* Kapper-template · donkere barbershop-look: inkt, goud, barbierrood. Eén thema, bewust gekozen. */
:root{
  --ink:#0a0a0b; --ink-2:#111113; --ink-3:#18181c; --ink-4:#222228;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#ece8e1; --soft:#c9c4bb; --muted:#958f86;
  --gold:#c9a45c; --gold-2:#e6c784; --gold-ink:#1a1206; --gold-soft:rgba(232,200,105,.12);
  --red:#c8202f; --blue:#d4a93a; --white:#f6f3ee;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--gold-ink);padding:10px 14px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.eyebrow{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:clamp(34px,5vw,58px)}
h3{font-size:24px}
p{margin:0}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--soft);max-width:58ch}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
em.it{font-style:italic;color:var(--gold-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 24px;font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line-2);background:transparent;color:var(--text);transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;white-space:nowrap}
.btn:hover{border-color:var(--gold);color:var(--gold-2)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:transparent;color:var(--gold-ink);box-shadow:0 10px 30px rgba(232,200,105,.25)}
.btn-gold:hover{color:var(--gold-ink);transform:translateY(-2px);box-shadow:0 14px 40px rgba(232,200,105,.35)}
.btn svg{width:18px;height:18px}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:100;transition:background .35s,border-color .35s,padding .35s;border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px)}
.hdr.solid{background:rgba(7,17,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:24px;transition:padding .35s}
.hdr.solid .hdr-in{padding-block:12px}
.logo{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;line-height:1}
.logo b{font-family:var(--serif);font-weight:900;font-size:30px;letter-spacing:.06em}
.logo small{font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.42em;color:var(--gold);margin-top:3px}
.nav{margin-left:auto;display:flex;gap:6px}
.nav a{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:8px 12px;color:var(--soft);position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .btn{padding:10px 18px;font-size:14px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--text);transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:27px}
.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:90;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:100px 28px 40px;gap:6px;clip-path:circle(0 at calc(100% - 42px) 40px);transition:clip-path .7s var(--ease);visibility:hidden}
.menu-open .mnav{clip-path:circle(150% at calc(100% - 42px) 40px);visibility:visible}
.mnav a{font-family:var(--serif);font-weight:700;font-size:clamp(38px,10vw,56px);text-decoration:none;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s var(--ease)}
.menu-open .mnav a{opacity:1;transform:none}
.menu-open .mnav a:nth-child(2){transition-delay:.06s}.menu-open .mnav a:nth-child(3){transition-delay:.12s}.menu-open .mnav a:nth-child(4){transition-delay:.18s}.menu-open .mnav a:nth-child(5){transition-delay:.24s}
.mnav .mnav-foot{margin-top:30px;display:grid;gap:12px;font-size:15px;color:var(--soft)}
.mnav .btn{justify-content:center}

/* barber pole (CSS, herbruikbaar) */
.pole{--h:220px;--w:46px;width:var(--w);display:flex;flex-direction:column;align-items:center}
.pole .cap{width:calc(var(--w) + 14px);height:16px;border-radius:8px 8px 4px 4px;background:linear-gradient(90deg,#6d6d72,#f2f2f4 35%,#8a8a90 60%,#3a3a3e);box-shadow:inset 0 -2px 3px rgba(0,0,0,.4)}
.pole .cap.b{border-radius:4px 4px 8px 8px}
.pole .ball{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bdbdc3 40%,#55555b);margin-bottom:-2px}
.pole .glass{position:relative;width:var(--w);height:var(--h);border-radius:3px;overflow:hidden;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--white) 14px 28px,var(--blue) 28px 42px,var(--white) 42px 56px);background-size:100% 158.4px;animation:pole 2.4s linear infinite;box-shadow:0 0 40px rgba(200,32,47,.25)}
.pole .glass::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.35) 32%,rgba(255,255,255,.05) 50%,rgba(0,0,0,.6))}
@keyframes pole{to{background-position:0 158.4px}}

/* hero */
.hero{position:relative;min-height:min(100svh,940px);display:grid;align-items:center;padding:120px 0 70px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 600px at 78% 40%,rgba(232,200,105,.14),transparent 60%),radial-gradient(700px 500px at 10% 90%,rgba(200,32,47,.10),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(54px,8.4vw,112px);font-weight:900;line-height:.92;margin:18px 0 22px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.ready .hero h1 .line>span{transform:none}
.ready .hero h1 .line:nth-child(2)>span{transition-delay:.12s}
.ready .hero h1 .line:nth-child(3)>span{transition-delay:.24s}
.hero .lead{margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.rating{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:8px 16px 8px 10px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;color:var(--soft);text-decoration:none}
.rating .stars{color:var(--gold);letter-spacing:2px}
.rating b{color:var(--text)}
.hero-visual{position:relative;height:min(640px,72vh);perspective:1200px}
.card3d{position:absolute;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.6);border:1px solid var(--line-2);transform-style:preserve-3d;will-change:transform}
.card3d img{width:100%;height:100%;object-fit:cover}
.hv-a{width:58%;aspect-ratio:526/866;left:6%;top:4%;transform:rotateY(14deg) rotateZ(-3deg)}
.hv-b{width:48%;aspect-ratio:712/838;right:0;bottom:2%;transform:rotateY(-12deg) rotateZ(4deg) translateZ(60px)}
.hero-visual .pole{position:absolute;right:6%;top:2%;--h:180px;--w:38px;transform:translateZ(120px)}
.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--cond);font-size:12px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.scrollcue i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding-block:18px;background:var(--ink-2)}
.marquee-track{display:inline-flex;animation:mq 38s linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,34px);padding-inline:26px;color:var(--soft)}
.marquee span::after{content:"✦";font-style:normal;font-size:.5em;color:var(--gold);margin-left:52px;vertical-align:.4em}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(80px,11vw,140px) 0}
.sec-h{display:grid;gap:16px;margin-bottom:52px;max-width:760px}
.sec-h.center{margin-inline:auto;text-align:center;justify-items:center}

/* film */
.film{position:relative;height:560vh;background:var(--ink)}
.film-sticky{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.film-sticky::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 50% 55%,#17140e 0%,var(--ink) 65%)}
.film-stage{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 45%}
.film-world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.fx{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform,opacity}
.fx-text{text-align:center;width:min(900px,90vw)}
.fx-text h2{font-size:clamp(48px,9vw,128px);font-weight:900;line-height:.95}
.fx-text p{font-family:var(--cond);font-weight:600;font-size:clamp(14px,1.6vw,18px);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-top:18px}
.fx-photo{width:clamp(220px,26vw,360px);border-radius:12px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 50px 90px rgba(0,0,0,.7)}
.fx-photo img{width:100%;height:auto}
.fx-photo figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--cond);font-size:12px;letter-spacing:.24em;text-transform:uppercase;background:rgba(7,17,32,.7);padding:4px 10px;border-radius:999px;color:var(--gold-2)}
.fx-tool{width:clamp(180px,22vw,300px);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.fx-tool svg{width:100%;height:auto;overflow:visible}
.fx-floor{width:3200px;height:7000px;background:repeating-linear-gradient(90deg,rgba(232,200,105,.10) 0 1px,transparent 1px 160px),repeating-linear-gradient(0deg,rgba(232,200,105,.10) 0 1px,transparent 1px 160px);-webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 60%,#000 20%,transparent 70%)}
.film-hud{position:absolute;inset:auto 0 0;padding:0 20px calc(26px + env(safe-area-inset-bottom,0px));display:flex;align-items:end;justify-content:space-between;gap:20px;pointer-events:none}
.chap{font-family:var(--cond);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:13px;color:var(--soft);display:flex;gap:14px;align-items:baseline}
.chap b{font-family:var(--serif);font-size:34px;letter-spacing:0;color:var(--gold);font-weight:700}
.prog{flex:0 1 320px;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:scaleX(0);transform-origin:left}
.film-end{pointer-events:auto}

/* usp */
.usp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.usp>div{background:var(--ink-2);padding:38px 32px;display:grid;gap:12px;align-content:start}
.usp .big{font-family:var(--serif);font-weight:900;font-size:clamp(44px,5vw,64px);line-height:1;color:var(--gold-2)}
.usp h3{font-size:22px}
.usp p{color:var(--muted);font-size:15px}

/* services */
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.price-list{list-style:none;margin:0;padding:0;display:grid}
.price-list li{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.price-list li:first-child{border-top:1px solid var(--line)}
.price-list .n{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-weight:700}
.price-list .d{grid-column:1/-1;color:var(--muted);font-size:14.5px;margin-top:-10px}
.price-list .dots{border-bottom:1px dotted var(--line-2);transform:translateY(-6px)}
.price-list .p{font-family:var(--cond);font-weight:700;font-size:26px;color:var(--gold-2);letter-spacing:.04em}
.svc-photo{position:sticky;top:110px;border-radius:16px;overflow:hidden;border:1px solid var(--line-2)}
.svc-photo img{width:100%;height:auto}
.note{font-size:14px;color:var(--muted);margin-top:22px}

/* split feature */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 80px rgba(0,0,0,.5)}
.frame img{width:100%;height:auto}
.frame .tag{position:absolute;left:16px;top:16px;font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;background:rgba(7,17,32,.75);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;color:var(--gold-2)}
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.checks li{display:flex;gap:14px;color:var(--soft)}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;border:1px solid var(--gold);background:radial-gradient(circle,var(--gold) 0 3px,transparent 4px)}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.review{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:30px;display:grid;gap:18px;align-content:space-between}
.review .stars{color:var(--gold);letter-spacing:3px}
.review blockquote{margin:0;font-family:var(--serif);font-size:21px;line-height:1.4}
.review footer{font-size:14px;color:var(--muted)}
.review footer b{color:var(--text);font-weight:500}
.rev-sum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;color:var(--muted);font-size:14px}
.rev-sum b{font-family:var(--serif);font-size:40px;color:var(--gold-2);font-weight:900}

/* mosaic & gallery */
.mosaic{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.mosaic a{border-radius:14px;overflow:hidden;border:1px solid var(--line);display:block}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mosaic a:hover img{transform:scale(1.05)}
.mosaic a:first-child{grid-row:span 2}
.gallery{columns:3 280px;column-gap:18px}
.gallery figure{margin:0 0 18px;break-inside:avoid;border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;cursor:zoom-in}
.gallery figure img{width:100%;height:auto;transition:transform 1s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;inset:auto 0 0;padding:30px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--soft)}
.crop-fade{container-type:inline-size;aspect-ratio:300/519;overflow:hidden;position:relative}
div.crop-fade>img{position:absolute!important;left:0;top:0;width:calc(100cqw * 519 / 300)!important;max-width:none!important;height:auto!important;transform-origin:0 0;transform:translateY(calc(100cqw * 519 / 300)) rotate(-90deg)}
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(5,5,6,.94);display:grid;place-items:center;padding:60px 20px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:84vh;width:auto;border-radius:10px}
.lightbox .crop-fade{height:84vh;width:auto}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,20,22,.8);display:grid;place-items:center;font-size:22px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}.lb-next{right:18px;top:50%;transform:translateY(-50%)}.lb-close{right:18px;top:18px}

/* page header */
.phead{padding:170px 0 70px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 400px at 80% 0%,rgba(232,200,105,.12),transparent 60%)}
.phead h1{font-size:clamp(48px,8vw,96px);font-weight:900;margin-top:14px}
.phead .lead{margin-top:20px}
.crumbs{font-size:13px;color:var(--muted);font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase}
.crumbs a{text-decoration:none;color:var(--soft)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.box{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:34px;display:grid;gap:18px;align-content:start}
.box h3{font-size:26px}
.big-link{font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:700;text-decoration:none;color:var(--gold-2)}
.hours{width:100%;border-collapse:collapse;font-size:15.5px}
.hours td{padding:10px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--soft)}
.hours tr.today td{color:var(--gold-2);font-weight:700}
.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.status.open{color:#7fe0a3;border-color:rgba(127,224,163,.35)}
.status.open::before{background:#4cd383;box-shadow:0 0 10px #4cd383;animation:blink 1.8s infinite}
.status.closed{color:#f0a3a3}
.status.closed::before{background:var(--red)}
@keyframes blink{50%{opacity:.35}}
.mapcard{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:320px;background:#121215;display:grid;place-items:center;text-align:center;padding:30px;isolation:isolate}
.mapcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background:linear-gradient(115deg,transparent 46%,rgba(232,200,105,.25) 46.5% 47.5%,transparent 48%),linear-gradient(25deg,transparent 30%,rgba(255,255,255,.08) 30.3% 31.5%,transparent 32%),linear-gradient(160deg,transparent 60%,rgba(255,255,255,.07) 60.3% 61.8%,transparent 62%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px)}
.pin{width:46px;height:46px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--red);display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 14px 30px rgba(200,32,47,.45);animation:drop 2.4s var(--ease) infinite}
.pin::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--white)}
@keyframes drop{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(5px,-5px)}}

/* cta band */
.cta-band{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line-2);padding:clamp(40px,7vw,80px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;background:radial-gradient(700px 300px at 85% 50%,rgba(232,200,105,.18),transparent 70%),var(--ink-2)}
.cta-band h2{font-size:clamp(36px,5vw,64px)}
.cta-band .pole{--h:150px;--w:34px}

/* legal */
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:60px;align-items:start}
.legal nav{position:sticky;top:110px;display:grid;gap:8px;font-size:14px}
.legal nav a{color:var(--muted);text-decoration:none}
.legal nav a:hover{color:var(--gold-2)}
.legal article{max-width:74ch}
.legal article h2{font-size:30px;margin:46px 0 14px;scroll-margin-top:110px}
.legal article h2:first-child{margin-top:0}
.legal article p,.legal article li{color:var(--soft);font-size:16px}
.legal article p+p{margin-top:12px}
.legal article ul{padding-left:20px;display:grid;gap:6px}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0}
.legal dt{color:var(--muted)}
.legal dd{margin:0}
.fill{background:rgba(232,200,105,.14);border:1px dashed var(--gold);color:var(--gold-2);border-radius:4px;padding:0 6px;font-style:normal}
.updated{font-size:14px;color:var(--muted);margin-top:40px}

/* footer */
.ftr{border-top:1px solid var(--line);padding:70px 0 30px;margin-top:40px;background:var(--ink-2)}
.ftr-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.ftr h4{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.ftr p,.ftr li{font-size:15px;color:var(--soft)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--gold-2)}
.ftr-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}

/* demo badge */
.demo{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;align-items:center;gap:10px;background:rgba(17,17,19,.92);border:1px solid var(--gold);color:var(--gold-2);border-radius:999px;padding:8px 8px 8px 16px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.demo button{border:0;background:var(--ink-4);width:26px;height:26px;border-radius:50%;color:var(--soft)}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
.no-js .rv{opacity:1;transform:none}
body.leaving{opacity:0;transition:opacity .3s}

@media (max-width:980px){
  .nav,.hdr .btn{display:none}
  .burger{display:block}
  .hero-grid,.svc-grid,.split,.contact-grid,.legal{grid-template-columns:minmax(0,1fr)}
  .hero-visual{height:520px;max-width:520px;width:100%;margin-inline:auto}
  .usp,.reviews{grid-template-columns:minmax(0,1fr)}
  .svc-photo,.legal nav{position:static}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .cta-band{grid-template-columns:minmax(0,1fr)}
  .cta-band .pole{display:none}
}
@media (max-width:600px){
  .hero{padding-top:110px}
  .hero-visual{height:420px}
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic a:first-child{grid-column:span 2;grid-row:auto}
  .ftr-grid{grid-template-columns:1fr}
  .film{height:460vh}
  .box{padding:24px}
  .prog{flex-basis:120px}
}
[hidden]{display:none!important}
.film-play{display:grid;justify-items:center;gap:14px;text-align:center;padding:0 20px 50px;color:var(--soft);font-size:15px}
@media (prefers-reduced-motion:reduce){
  :root:not(.force-motion){scroll-behavior:auto}
  :root:not(.force-motion) .rv{opacity:1;transform:none;transition:none}
  :root:not(.force-motion) .hero h1 .line>span{transform:none;transition:none}
  :root:not(.force-motion) .pole .glass,:root:not(.force-motion) .marquee-track,:root:not(.force-motion) .scrollcue i,:root:not(.force-motion) .pin,:root:not(.force-motion) .status.open::before{animation:none}
  :root:not(.force-motion) .film{height:auto}
  :root:not(.force-motion) .film-sticky{position:relative;height:auto;padding:80px 0}
  :root:not(.force-motion) .film-stage{position:relative;perspective:none}
  :root:not(.force-motion) .film-world{position:relative;display:grid;gap:40px;justify-items:center;transform:none!important}
  :root:not(.force-motion) .fx{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important}
  :root:not(.force-motion) .fx-floor,:root:not(.force-motion) .film-hud{display:none}
}

/* ================= high-tech laag ================= */
.hero-gl{position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-gl.on{opacity:1}
.hero-word{position:absolute;right:-2vw;bottom:-4vw;z-index:-1;font-family:var(--serif);font-weight:900;font-size:clamp(160px,26vw,420px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(232,200,105,.18);pointer-events:none;user-select:none}

/* intro */
.loader{position:fixed;inset:0;z-index:400;background:var(--ink);display:grid;place-items:center;transition:clip-path 1s var(--ease);clip-path:inset(0 0 0 0)}
.loader.out{clip-path:inset(0 0 100% 0)}
.loader-in{display:grid;justify-items:center;gap:18px}
.loader b{font-family:var(--serif);font-weight:900;font-size:clamp(64px,12vw,140px);letter-spacing:.08em;line-height:1;background:linear-gradient(100deg,var(--soft) 30%,var(--gold-2) 50%,var(--soft) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 1.4s linear infinite}
.loader i{display:block;width:220px;height:6px;border-radius:3px;background:repeating-linear-gradient(-45deg,var(--red) 0 8px,var(--white) 8px 16px,var(--blue) 16px 24px,var(--white) 24px 32px);background-size:45.25px 100%;animation:barber .6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
@keyframes barber{to{background-position:45.25px 0}}

/* cursor */
.has-cursor,.has-cursor *{cursor:none!important}
.cursor,.cursor-dot{position:fixed;left:0;top:0;z-index:500;pointer-events:none;border-radius:50%}
.cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(232,200,105,.7);transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s;display:grid;place-items:center}
.cursor.hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(232,200,105,.12);border-color:var(--gold-2)}
.cursor.label{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--gold);border-color:var(--gold)}
.cursor.label::after{content:attr(data-label);font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.cursor.gone{opacity:0}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold-2)}

/* woord-voor-woord */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w>span{display:inline-block;transform:translateY(105%) rotate(4deg);filter:blur(6px);opacity:0;transition:transform 1s var(--ease),filter 1s var(--ease),opacity 1s var(--ease);transition-delay:calc(var(--i) * 60ms)}
[data-split].in .w>span{transform:none;filter:none;opacity:1}

/* spotlight + tilt */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(232,200,105,.16),transparent 60%);opacity:0;transition:opacity .4s}
.spot:hover::before{opacity:1}
.tilt{transition:transform .5s var(--ease);transform-style:preserve-3d;position:relative}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 50%);opacity:0;transition:opacity .4s}
.tilt:hover::after{opacity:1}
.btn{will-change:transform}

/* glas-kaart met gouden rand */
.glass{position:relative;background:linear-gradient(160deg,rgba(28,28,33,.78),rgba(14,14,17,.86));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:24px;box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(150deg,rgba(232,200,105,.55),rgba(255,255,255,.06) 30%,rgba(255,255,255,.04) 70%,rgba(232,200,105,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* diensten-kaarten */
.svc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.svc-card{display:grid;gap:14px;text-align:left;padding:22px 22px 20px;border-radius:18px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);transition:border-color .3s,transform .3s var(--ease),background .3s;position:relative;overflow:hidden}
.svc-card:hover{border-color:rgba(232,200,105,.5);transform:translateY(-3px)}
.svc-card.sel{border-color:var(--gold);background:var(--gold-soft)}
.svc-name{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.15;padding-right:28px}
.svc-meta{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:14px}
.svc-meta b{font-family:var(--cond);font-size:24px;color:var(--gold-2);letter-spacing:.04em}
.svc-go{position:absolute;right:20px;top:20px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .3s,color .3s,transform .3s var(--ease)}
.svc-card:hover .svc-go,.svc-card.sel .svc-go{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);transform:rotate(-45deg)}
.home-svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-svc a{text-decoration:none}

/* horizontale galerij */
.hscroll{position:relative}
.hs-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-content:center;gap:34px}
.hs-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.hs-track{display:flex;gap:28px;padding-left:max(20px,calc((100vw - var(--wrap)) / 2 + 20px));will-change:transform}
.hs-item{flex:none;width:clamp(260px,30vw,420px);border-radius:20px;overflow:hidden;border:1px solid var(--line-2);position:relative;background:var(--ink-2)}
.hs-item img{width:100%;height:auto}
.hs-item figcaption{position:absolute;left:16px;bottom:16px;font-family:var(--cond);letter-spacing:.22em;text-transform:uppercase;font-size:13px;background:rgba(7,17,32,.7);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;color:var(--gold-2)}
.hs-item .num{position:absolute;right:16px;top:12px;font-family:var(--serif);font-size:44px;font-weight:900;color:rgba(255,255,255,.85);text-shadow:0 4px 20px rgba(0,0,0,.6)}
.hs-bar{height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;max-width:var(--wrap);margin:0 auto;width:calc(100% - 40px)}
.hs-bar i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.hscroll.static .hs-sticky{position:relative;height:auto;padding:80px 0}
.hscroll.static .hs-track{overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.hscroll.static .hs-item{scroll-snap-align:start}

/* ================= boeken ================= */
.bk{padding:150px 0 90px;position:relative;isolation:isolate}
.bk::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 500px at 15% 0%,rgba(232,200,105,.13),transparent 60%),radial-gradient(800px 500px at 100% 40%,rgba(212,169,58,.10),transparent 60%)}
.bk-top{display:grid;gap:14px;margin-bottom:40px;max-width:760px}
.bk-top h1{font-size:clamp(46px,7vw,88px);font-weight:900}
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.bk-main{padding:30px clamp(20px,3vw,40px) 36px;min-height:560px}
.bk-steps{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:s}
.bk-steps li{counter-increment:s;display:flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bk-steps li::before{content:counter(s);width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);font-size:13px;letter-spacing:0;transition:all .4s var(--ease)}
.bk-steps li.now{color:var(--text)}
.bk-steps li.now::before{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.bk-steps li.done{color:var(--gold-2)}
.bk-steps li.done::before{content:"✓";border-color:var(--gold);color:var(--gold-2)}
.bk-progress{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:34px}
.bk-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.bk-panel{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.bk-panel.on{opacity:1;transform:none}
.bk-panel h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:22px}
.bk-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.bk-head h2{margin:0;margin-right:auto}
.back{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;font-size:18px;transition:border-color .3s,color .3s}
.back:hover{border-color:var(--gold);color:var(--gold-2)}
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.cal{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.015)}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-h b{font-family:var(--serif);font-size:20px;text-transform:capitalize}
.cal-h button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:transparent;font-size:18px}
.cal-h button:disabled{opacity:.25;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow{text-align:center;font-family:var(--cond);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.day{aspect-ratio:1;border:1px solid transparent;border-radius:12px;background:transparent;display:grid;place-items:center;position:relative;font-variant-numeric:tabular-nums;font-size:15px;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.day i{position:absolute;bottom:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%}
.day.many i{background:#4cd383}.day.few i{background:var(--gold)}
.day.full{color:var(--muted);text-decoration:line-through;opacity:.5}
.day.off{opacity:.2}
.day.load i{background:var(--line-2);animation:blink 1s infinite}
.day:not([disabled]):hover{border-color:rgba(232,200,105,.5);transform:translateY(-1px)}
.day.today span{color:var(--gold-2);font-weight:700}
.day.sel{background:var(--gold);color:var(--gold-ink);font-weight:700}
.day.sel i{background:var(--gold-ink)}
.cal-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--muted)}
.cal-legend span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.cal-legend .l1::before{background:#4cd383}.cal-legend .l2::before{background:var(--gold)}
.slots-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.slots-h b{font-family:var(--serif);font-size:20px;text-transform:capitalize}
.slot-g{margin-bottom:18px}
.slot-l{display:block;font-family:var(--cond);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.slot-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.slot{border:1px solid var(--line-2);background:rgba(255,255,255,.02);border-radius:12px;padding:11px 0;font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;transition:all .25s var(--ease);opacity:0;animation:pop .45s var(--ease) forwards;animation-delay:calc(var(--i) * 18ms)}
.slot:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}
.slot.sel{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:700}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.skel{height:140px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));background-size:200% 100%;animation:shine 1.2s linear infinite}
.bk-form{display:grid;gap:16px;max-width:620px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:8px}
.fld span{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.fld span i{font-style:normal;color:var(--muted);letter-spacing:.06em;text-transform:none;font-family:var(--sans);font-weight:400}
.inp{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:14px;padding:15px 16px;font:inherit;color:var(--text);transition:border-color .25s,box-shadow .25s,background .25s}
.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,200,105,.14);background:rgba(255,255,255,.05)}
textarea.inp{min-height:96px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.legal-note{font-size:13.5px;color:var(--muted)}
.legal-note a{color:var(--gold-2)}
.bk-err{color:#f3a4a4;background:rgba(200,32,47,.12);border:1px solid rgba(200,32,47,.35);border-radius:12px;padding:12px 14px;font-size:14.5px;margin-bottom:14px}
.btn.busy{opacity:.7;pointer-events:none}
.btn.danger{border-color:var(--red);color:#f3a4a4}
.bk-sum{padding:28px;position:sticky;top:110px;display:grid;gap:16px}
.bk-sum h3{font-size:24px}
.sum-row{display:flex;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:14.5px}
.sum-row span{color:var(--muted)}
.sum-row b{font-weight:500;text-align:right}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:4px}
.sum-total span{color:var(--soft);font-size:14px}
.sum-total b{font-family:var(--cond);font-size:34px;color:var(--gold-2)}
.sum-foot{display:grid;gap:8px;font-size:13.5px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.sum-foot a{color:var(--soft);text-decoration:none}
.perks{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--soft)}
.perks li::before{content:"✓";color:var(--gold);margin-right:8px}
#bkDone,#qDone{display:grid;gap:18px;justify-items:start}
.check{width:96px;height:96px}
.check circle{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:330;stroke-dashoffset:330;animation:draw 1s var(--ease) forwards}
.check path{fill:none;stroke:var(--gold-2);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:draw .6s .7s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done-card{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;width:100%}
.done-card div{background:var(--ink-2);padding:16px 18px;display:grid;gap:4px}
.done-card span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:var(--cond)}
.done-card .code{font-family:var(--cond);font-size:24px;letter-spacing:.3em;color:var(--gold-2)}
.done-actions{display:flex;gap:10px;flex-wrap:wrap}
.demo-note{font-size:13.5px;color:var(--gold-2);border:1px dashed var(--gold);border-radius:12px;padding:10px 14px}
.link-btn{border:0;background:none;padding:0;color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.cancel-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:30px;align-items:center;padding:32px clamp(20px,3vw,40px)}
.cancel-box form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
#cancelOut.ok{color:#7fe0a3}

/* ================= beheer ================= */
.ad{padding:140px 0 80px;min-height:100vh}
.ad-gate{max-width:440px;margin:0 auto;padding:34px;display:grid;gap:16px}
.ad-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.ad-top h1{font-size:clamp(36px,5vw,56px)}
.ad-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;padding:9px 16px;font-family:var(--cond);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--soft)}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
.ad-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:28px}
.ad-stats div{background:var(--ink-2);padding:20px 22px;display:grid;gap:2px}
.ad-stats b{font-family:var(--serif);font-size:36px;color:var(--gold-2)}
.ad-stats span{font-size:13px;color:var(--muted)}
.ad-day{font-size:22px;margin:26px 0 12px;text-transform:capitalize}
.ad-item{display:grid;grid-template-columns:80px minmax(0,1.4fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--ink-2);margin-bottom:10px}
.ad-item.now{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.ad-item.past{opacity:.55}
.ad-item.cx{opacity:.45}
.ad-item.cx .ad-main b{text-decoration:line-through}
.ad-time b{font-family:var(--cond);font-size:26px;display:block;line-height:1}
.ad-time span{font-size:13px;color:var(--muted)}
.ad-main{display:grid;gap:3px}
.ad-main span{font-size:14px;color:var(--soft)}
.ad-main em{font-size:13.5px;color:var(--muted)}
.ad-contact{display:grid;gap:3px;font-size:14px}
.ad-contact a{color:var(--gold-2);text-decoration:none}
.pill{font-family:var(--cond);font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:999px;padding:5px 10px;color:var(--muted)}
.ad-empty{padding:40px 0}

@media (max-width:1100px){
  .home-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-grid{grid-template-columns:minmax(0,1fr)}
  .bk-sum{position:static}
  .cal-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .bk-steps li{font-size:0;justify-content:center}
  .bk-steps li::before{font-size:13px}
  .f2,.done-card,.cancel-box,.cancel-box form{grid-template-columns:minmax(0,1fr)}
  .home-svc{grid-template-columns:minmax(0,1fr)}
  .ad-item{grid-template-columns:64px minmax(0,1fr)}
  .ad-contact,.ad-act{grid-column:2}
  .ad-stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  :root:not(.force-motion) [data-split] .w>span{transform:none;filter:none;opacity:1;transition:none}
  :root:not(.force-motion) .slot{animation:none;opacity:1}
  :root:not(.force-motion) .loader{display:none}
}

.svc-desc{color:var(--muted);font-size:14px;line-height:1.5}
.home-svc .svc-meta span{font-family:var(--cond);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--gold)}
.cursor.idle{opacity:0}

/* ===== Auto-template: grafiet, staal en signaaloranje. Herdefinieert de basistokens van het kapper-template. ===== */
:root{
  --ink:#08090b; --ink-2:#0f1114; --ink-3:#16191d; --ink-4:#20242a;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#eef1f4; --soft:#c4cad2; --muted:#8a929c;
  --gold:#e8c869; --gold-2:#e8c869; --gold-ink:#1a0903; --gold-soft:rgba(232,200,105,.12);
  --serif:"Archivo","Arial Black",Arial,sans-serif;
  --cond:"Saira Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
h1,h2,h3{letter-spacing:-.025em}
.hero h1{font-weight:900;letter-spacing:-.04em}
em.it{font-style:italic;color:var(--gold)}
.logo b{font-weight:900;letter-spacing:.02em;font-size:26px}
.btn-gold{box-shadow:0 10px 30px rgba(232,200,105,.28)}
.btn-gold:hover{box-shadow:0 14px 40px rgba(232,200,105,.4)}
.marquee span{font-family:var(--serif);font-style:normal;font-weight:800;letter-spacing:-.02em}
.marquee span::after{content:"◆"}
.loader b{letter-spacing:.02em}
.loader i{background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:200% 100%;animation:sweep 1s linear infinite}
@keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}
.cursor{border-color:rgba(232,200,105,.7)}
.fx-floor{background:repeating-linear-gradient(90deg,rgba(232,200,105,.12) 0 1px,transparent 1px 160px),repeating-linear-gradient(0deg,rgba(232,200,105,.12) 0 1px,transparent 1px 160px)}
.film-sticky::before{background:radial-gradient(1200px 700px at 50% 55%,#1a0f09 0%,var(--ink) 65%)}

/* auto-art */
.car{width:100%;height:auto;overflow:visible}
.car .body{fill:var(--paint,#2b3442)}
.car .shine{fill:url(#carShine)}
.car .glass{fill:#0b0e13;stroke:rgba(255,255,255,.18);stroke-width:1}
.car .glass-hl{fill:rgba(255,255,255,.08)}
.car .tyre{fill:#0a0b0d}
.car .rim{fill:#3b4048;stroke:#9aa2ad;stroke-width:1.5}
.car .hub{fill:#c9ced6}
.car .spoke{stroke:#aab1bb;stroke-width:3;stroke-linecap:round}
.car .head{fill:#fff6e8}
.car .tail{fill:#ff3b2f}
.car .line{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.2}
.car .shadow{fill:rgba(0,0,0,.55)}
.hero-car{position:relative;padding:20px 0}
.hero-car .car{filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}
.hero-car .beam{position:absolute;right:-10%;top:52%;width:60%;height:120px;transform:translateY(-50%);background:radial-gradient(ellipse at left center,rgba(255,240,220,.22),transparent 70%);pointer-events:none;filter:blur(6px)}
.chipf{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(15,17,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:14px;padding:10px 14px;font-size:13.5px;color:var(--soft);box-shadow:0 20px 40px rgba(0,0,0,.45);animation:float 6s ease-in-out infinite}
.chipf b{color:var(--text);font-weight:700}
.chipf i{width:30px;height:30px;border-radius:9px;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold-2);font-style:normal;font-weight:800}
.chipf.c1{left:0;top:0}.chipf.c2{right:4%;top:8%;animation-delay:-2s}.chipf.c3{left:12%;bottom:-6px;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-10px)}}

/* voorraad */
.stock-note{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px dashed var(--gold);border-radius:14px;padding:12px 16px;color:var(--gold-2);font-size:14px;margin-bottom:26px}
.stock-tools{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:8px 14px;font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--soft);transition:all .25s}
.chip:hover{border-color:var(--gold);color:var(--gold-2)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.sel{background:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;color:var(--text);font:inherit;font-size:14px}
.stock{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.carcard{display:grid;text-align:left;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));overflow:hidden;transition:transform .4s var(--ease),border-color .3s;color:inherit;text-decoration:none;padding:0}
.carcard:hover{transform:translateY(-4px);border-color:rgba(232,200,105,.45)}
.carcard .stage{position:relative;aspect-ratio:16/9;display:grid;place-items:center;padding:18px 22px 6px;background:radial-gradient(ellipse at 50% 85%,rgba(232,200,105,.14),transparent 60%),linear-gradient(180deg,#14171c,#0c0e11)}
.carcard .stage::after{content:"";position:absolute;left:8%;right:8%;bottom:16%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.carcard .badge{position:absolute;left:14px;top:14px;font-family:var(--cond);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;background:rgba(8,9,11,.75);border:1px solid var(--line-2);border-radius:999px;padding:5px 10px;color:var(--gold-2)}
.carcard .info{padding:18px 20px 20px;display:grid;gap:10px}
.carcard h3{font-size:21px;line-height:1.15}
.carcard .sub{color:var(--muted);font-size:14px}
.specs{display:flex;gap:8px;flex-wrap:wrap}
.specs span{font-size:12.5px;color:var(--soft);background:var(--ink-4);border-radius:8px;padding:4px 9px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.price-row b{font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:-.02em}
.price-row span{font-family:var(--cond);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--gold-2)}
.cardlg{width:min(900px,calc(100vw - 32px));background:var(--ink-2);color:var(--text);border:1px solid var(--line-2);border-radius:24px;padding:0;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.cardlg::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.cardlg .stage{aspect-ratio:21/9;padding:30px 60px 10px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 85%,rgba(232,200,105,.18),transparent 60%),linear-gradient(180deg,#14171c,#0b0d10)}
.cardlg .body{padding:26px 30px 30px;display:grid;gap:18px}
.cardlg .top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:start}
.cardlg h2{font-size:clamp(26px,3.4vw,38px)}
.spec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.spec-grid div{background:var(--ink-3);padding:14px 16px;display:grid;gap:2px}
.spec-grid span{font-family:var(--cond);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.spec-grid b{font-weight:600}
.x{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:rgba(8,9,11,.7);font-size:20px}

/* stappen */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:st}
.steps4 li{list-style:none;counter-increment:st;border:1px solid var(--line);border-radius:20px;padding:26px 24px;background:var(--ink-2);display:grid;gap:10px;align-content:start;position:relative;overflow:hidden}
.steps4 li::before{content:counter(st,decimal-leading-zero);font-family:var(--serif);font-weight:900;font-size:48px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold)}
.steps4 h3{font-size:21px}
.steps4 p{color:var(--muted);font-size:15px}
.steps4{padding:0;margin:0}
.svc-cards .svc-meta b{font-size:18px}

@media (max-width:980px){
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chipf.c2{right:0}
}
@media (max-width:600px){
  .steps4{grid-template-columns:minmax(0,1fr)}
  .cardlg .stage{padding:20px}
  .chipf{font-size:12px;padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){
  :root:not(.force-motion) .chipf{animation:none}
}

/* ===== Vakman-template: nachtblauw, koper en waterblauw. Overschrijft de tokens van het auto-template. ===== */
:root{
  --ink:#071120; --ink-2:#0c1a2e; --ink-3:#12243d; --ink-4:#1a3150;
  --text:#f1f4f7; --soft:#c5cfdc; --muted:#8a9ab0;
  --gold:#e8c869; --gold-2:#e8c869; --gold-ink:#ffffff; --gold-soft:rgba(232,200,105,.13);
  --water:#e8c869; --water-soft:rgba(232,200,105,.12);
  --serif:"Archivo","Arial Black",Arial,sans-serif;
  --cond:"Saira Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.btn-gold{box-shadow:0 10px 30px rgba(232,200,105,.28)}
.btn-gold:hover{box-shadow:0 14px 40px rgba(232,200,105,.42)}
.film-sticky::before{background:radial-gradient(1200px 700px at 50% 55%,#0e1620 0%,var(--ink) 65%)}
.fx-floor{background:repeating-linear-gradient(90deg,rgba(232,200,105,.10) 0 1px,transparent 1px 160px),repeating-linear-gradient(0deg,rgba(232,200,105,.10) 0 1px,transparent 1px 160px)}
.cursor{border-color:rgba(232,200,105,.7)}
.loader i{background:linear-gradient(90deg,transparent,var(--water),var(--gold),transparent);background-size:200% 100%}

/* 24/7-band */
.sos{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 20px;background:linear-gradient(90deg,#0d2342,#0c1a2e 40%,#0d2342);border-block:1px solid var(--line);font-size:14.5px;color:var(--soft)}
.sos b{color:var(--text)}
.sos .dot{width:9px;height:9px;border-radius:50%;background:#4cd383;box-shadow:0 0 12px #4cd383;animation:blink 1.6s infinite}
.sos a{color:var(--gold-2);font-weight:700;text-decoration:none;font-family:var(--cond);letter-spacing:.12em;font-size:16px}

/* hero-illustratie */
.hero-art{position:relative;aspect-ratio:1;max-width:520px;margin-inline:auto;width:100%}
.hero-art .ring{position:absolute;inset:6%;border-radius:50%;border:1px solid var(--line-2);background:radial-gradient(circle at 50% 40%,rgba(232,200,105,.10),transparent 60%)}
.hero-art .ring::after{content:"";position:absolute;inset:9%;border-radius:50%;border:1px dashed rgba(232,200,105,.35);animation:spin 40s linear infinite}
.hero-art svg.house{position:absolute;inset:16%;width:68%;height:68%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.hero-art .drop{animation:dripY 2.6s cubic-bezier(.5,0,.8,.4) infinite}
@keyframes dripY{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(26px);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.badge247{position:absolute;right:4%;top:4%;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;background:linear-gradient(160deg,var(--gold-2),var(--gold));color:var(--gold-ink);box-shadow:0 20px 50px rgba(232,200,105,.35);transform:rotate(8deg)}
.badge247 b{display:block;font-family:var(--serif);font-weight:900;font-size:34px;line-height:.9;letter-spacing:-.03em}
.badge247 span{font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* diensten met icoon */
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.icard{display:grid;gap:12px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));text-decoration:none;color:inherit;transition:transform .35s var(--ease),border-color .3s}
.icard:hover{transform:translateY(-4px);border-color:rgba(232,200,105,.45)}
.icard .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid rgba(232,200,105,.25)}
.icard .ic svg{width:30px;height:30px}
.icard h3{font-size:21px}
.icard p{color:var(--muted);font-size:15px}
.icard .go{font-family:var(--cond);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--gold-2)}

@media (min-width:900px){ .icards.n6,.icards.n3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* werkgebied */
.area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center}
.radar{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin-inline:auto;border-radius:50%;overflow:hidden;background:radial-gradient(circle,rgba(232,200,105,.10) 0 1px,transparent 1px) 0 0/22px 22px}
.radar i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,200,105,.25)}
.radar i:nth-child(2){inset:16%}.radar i:nth-child(3){inset:32%}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(232,200,105,.28),transparent 25%);animation:spin 6s linear infinite}
.radar .core{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 8px rgba(232,200,105,.2),0 0 30px var(--gold)}
.radar .lbl2{position:absolute;left:50%;top:calc(50% + 18px);transform:translateX(-50%);font-family:var(--cond);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--gold-2);white-space:nowrap}
.towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.towns span{border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--soft)}

@media (max-width:980px){ .area{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){
  :root:not(.force-motion) .hero-art .drop,:root:not(.force-motion) .hero-art .ring::after,:root:not(.force-motion) .radar .sweep,:root:not(.force-motion) .sos .dot{animation:none}
}

/* juridische pagina's: lange invulvelden mogen niet buiten het scherm lopen */
.legal dl{grid-template-columns:max-content minmax(0,1fr)}
.legal dd{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){ .legal dl{grid-template-columns:minmax(0,1fr);gap:2px 0} .legal dd{margin-bottom:12px} }

/* sterren volgens de echte score */
.stars .dim{opacity:.25}

/* warmtepomp-illustratie */
.hero-art svg.hpump .fan{transform-box:view-box;transform-origin:118px 153px;animation:spin 2.4s linear infinite}
.hero-art svg.hpump .wave{opacity:0;animation:rise 3.2s ease-in-out infinite}
.hero-art svg.hpump .w2{animation-delay:.6s}.hero-art svg.hpump .w3{animation-delay:1.2s}
.hero-art svg.hpump .flake{animation:drift 4s ease-in-out infinite}
.hero-art svg.hpump .f2{animation-delay:1.3s}.hero-art svg.hpump .f3{animation-delay:2.6s}
.hero-art svg.hpump .led{animation:blink 1.6s infinite}
@keyframes rise{0%{transform:translateY(12px);opacity:0}35%{opacity:.95}100%{transform:translateY(-16px);opacity:0}}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(9px);opacity:1}}

/* keuzehulp */
.pick{display:grid;grid-template-columns:290px minmax(0,1fr);gap:30px;padding:26px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.pick-tabs{display:grid;gap:8px;align-content:start;min-width:0}
.pick-tabs button{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--soft);font:600 16px/1.2 var(--sans);text-align:left;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.pick-tabs button .ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.04)}
.pick-tabs button .ic svg{width:26px;height:26px}
.pick-tabs button:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pick-tabs button[aria-selected="true"]{color:var(--text);background:var(--gold-soft);border-color:rgba(232,200,105,.35)}
.pick-tabs button:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.pick-panels [role=tabpanel]{display:grid;grid-template-columns:180px minmax(0,1fr);gap:34px;align-items:center;padding:10px 10px 10px 0;animation:pickIn .5s var(--ease)}
.pick-panels [role=tabpanel][hidden]{display:none}
.pick-panels h3{font-size:30px}
.pick-art svg{width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
@keyframes pickIn{from{opacity:0;transform:translateY(12px)}}
@media (max-width:900px){
  .pick{grid-template-columns:minmax(0,1fr);padding:18px}
  .pick-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .pick-tabs::-webkit-scrollbar{display:none}
  .pick-panels [role=tabpanel]{grid-template-columns:minmax(0,1fr);gap:18px;padding:0}
  .pick-art{width:110px}
}

/* cijfers */
.stats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stats4>div{display:grid;gap:8px;align-content:start;padding:26px 24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.stats4 b{font-family:var(--serif);font-weight:900;font-size:clamp(42px,5vw,66px);line-height:1;letter-spacing:-.03em;background:linear-gradient(180deg,var(--text) 30%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats4 span{color:var(--muted);font-size:15px}
@media (max-width:900px){ .stats4{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* adres op de contactpagina */
.addr{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line-2);justify-self:start;font-size:16px}
.addr:hover{color:var(--text);border-color:var(--gold-2)}

@media (prefers-reduced-motion:reduce){
  :root:not(.force-motion) .hero-art svg.hpump *{animation:none}
  :root:not(.force-motion) .hero-art svg.hpump .wave{opacity:.7}
  :root:not(.force-motion) .pick-panels [role=tabpanel]{animation:none}
}

/* ===== uitbreiding 2: logo, koptekst, actiebalk, dienstpagina's, FAQ, check, offerte ===== */
.logo.has-mark{flex-direction:row;align-items:center;gap:12px}
.logo .mark{width:42px;height:42px;flex:none}
.logo .lt{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
@media (max-width:560px){ .logo .mark{width:34px;height:34px} .logo.has-mark b{font-size:24px} }
@media (max-width:1240px){ .hdr .hdr-phone span{display:none} .hdr .hdr-phone{padding:10px 13px} .nav a{padding:8px 9px;letter-spacing:.12em} .nav{gap:2px} }

/* mobiele actiebalk */
.mbar{display:none}
@media (max-width:760px){
  .mbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:110;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:6px;border-radius:20px;background:rgba(7,17,32,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-2);box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .mbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:14px;text-decoration:none;color:var(--soft);font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
  .mbar a svg{width:20px;height:20px}
  .mbar a.on{background:var(--gold);color:var(--gold-ink)}
  body:has(.mbar){padding-bottom:86px}
  body:has(.mbar) .demo{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .menu-open .mbar{display:none}
}

/* dienstpagina */
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center}
.svc-art{position:relative;aspect-ratio:1;max-width:340px;width:100%;margin-inline:auto}
.svc-art .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-2);background:radial-gradient(circle at 50% 40%,rgba(232,200,105,.10),transparent 62%)}
.svc-art .ring::after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px dashed rgba(232,200,105,.35);animation:spin 50s linear infinite}
.svc-art svg{position:absolute;inset:22%;width:56%;height:56%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));animation:float 6s ease-in-out infinite}
@media (max-width:980px){ .svc-hero-grid{grid-template-columns:minmax(0,1fr);gap:10px} .svc-art{max-width:190px;margin:10px 0 0} }
.sblocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sblock{display:grid;gap:12px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.sblock .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid rgba(232,200,105,.25)}
.sblock .ic svg{width:30px;height:30px}
.sblock h3{font-size:21px}
.sblock p{color:var(--muted);font-size:15px}
.sreview{margin:0}

/* veelgestelde vragen */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;font-family:var(--serif);font-weight:800;font-size:19px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--gold-2);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faq details[open] summary i{background:var(--gold-soft)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq summary:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}
.faq-a{padding:0 22px 20px;color:var(--soft);font-size:16px;max-width:72ch}

/* teaser-blok */
.teaser{display:grid;grid-template-columns:190px minmax(0,1fr);gap:40px;align-items:center;padding:40px;border:1px solid var(--line);border-radius:28px;background:radial-gradient(600px 300px at 0% 50%,var(--gold-soft),transparent 70%),linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.teaser-art svg{width:100%;height:auto}
@media (max-width:760px){ .teaser{grid-template-columns:minmax(0,1fr);padding:26px;gap:16px} .teaser-art{width:90px} }

/* keuzechips */
.hq{border:0;margin:0 0 22px;padding:0;min-width:0}
.hq legend{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;font-size:18px;margin-bottom:12px;padding:0}
.hq legend b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink-4);font-size:14px;color:var(--gold-2);font-family:var(--cond);flex:none}
.hq.ok legend b{background:var(--gold);color:var(--gold-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--line-2);color:var(--soft);font-size:15px;transition:background .2s,border-color .2s,color .2s}
.chip:hover span{border-color:rgba(232,200,105,.45);color:var(--text)}
.chip input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:700}
.chip input:focus-visible+span{outline:2px solid var(--gold-2);outline-offset:2px}

/* warmtepomp-check */
.hpc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:start}
.hpc-q{padding:28px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.hpc-q .hq:last-child{margin-bottom:0}
.hpc-r{position:sticky;top:100px;padding:28px;border-radius:24px}
.hpc-wait,.hpc-res{display:grid;gap:14px}
.hpc-r [hidden]{display:none!important}
.hpc-name{font-size:32px;line-height:1.1}
.hpc-note{font-size:14px}
.hpc-bar{height:6px;border-radius:6px;background:var(--ink-4);overflow:hidden;margin-top:6px}
.hpc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--water),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform .4s var(--ease)}
.hpc-res.pop{animation:pickIn .5s var(--ease)}
@media (max-width:900px){ .hpc{grid-template-columns:minmax(0,1fr)} .hpc-r{position:static} .hpc-q{padding:20px} }

/* offerte-wizard */
.qkinds{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.qkind .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--gold-soft)}
.qkind .ic svg{width:28px;height:28px}
.qkind .svc-meta span{font-size:13.5px}
.qgroup[hidden]{display:none}
.q-next{margin-top:6px;display:flex;justify-content:flex-end}
#quote .bk-panel .hq legend{font-size:17px}

/* infopagina */
.legal.info article a{color:var(--gold-2)}
.callout{border:1px solid rgba(232,200,105,.35);background:var(--gold-soft);border-radius:16px;padding:16px 18px;margin:16px 0;color:var(--soft)}

/* beheer: offerte-aanvragen */
.ad-req{margin-top:64px}
.ad-req .ad-top{margin-bottom:18px}
.ad-item.rq .rq-d{font-size:13.5px;color:var(--muted)}
.ad-item.rq .rq-d i{font-style:normal;color:var(--soft)}

@media (prefers-reduced-motion:reduce){
  :root:not(.force-motion) .svc-art svg,:root:not(.force-motion) .svc-art .ring::after,:root:not(.force-motion) .hpc-res.pop{animation:none}
}
/* de .chip uit de auto-template (filterknoppen) niet laten doorwerken in de keuzevragen */
.hq .chip,.hq .chip:hover{border:0;padding:0;background:none;font-family:var(--sans);font-weight:400;letter-spacing:0;text-transform:none;font-size:15px;color:inherit}

/* ===== uitbreiding 3: info-balk, zwevende menubalk, thermostaat-hero ===== */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;width:min(var(--wrap),calc(100% - 40px));margin:0 auto;padding:10px 4px 0;font-size:13px;max-height:44px;overflow:hidden;transition:max-height .35s var(--ease),opacity .3s,padding .35s}
.topbar .tb-l,.topbar .tb-r{display:flex;align-items:center;gap:24px;min-width:0}
.topbar span,.topbar a{display:inline-flex;align-items:center;gap:8px;color:var(--soft);text-decoration:none;white-space:nowrap}
.topbar a:hover{color:var(--text)}
.topbar b{color:var(--text);font-weight:700}
.topbar .dot{width:7px;height:7px;border-radius:50%;background:#4cd383;box-shadow:0 0 10px #4cd383;animation:blink 1.8s infinite}
.topbar .star{color:var(--gold-2)}
.hdr.solid .topbar{max-height:0;opacity:0;padding-top:0}
@media (max-width:980px){ .topbar{display:none} }
.hdr.pill,.hdr.pill.solid{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.pill .hdr-in{width:min(var(--wrap),calc(100% - 40px));margin:10px auto 0;padding:10px 12px 10px 18px;border:1px solid var(--line);border-radius:22px;background:rgba(7,17,32,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(0,0,0,.25);transition:background .35s,padding .35s,margin .35s}
.hdr.pill.solid .hdr-in{background:rgba(7,17,32,.86);margin-top:8px;padding-block:8px}
@media (max-width:980px){ .hdr.pill .hdr-in{width:calc(100% - 20px);margin-top:8px;padding:8px 8px 8px 14px} }

/* thermostaat-hero */
.thero{--tint:63,217,138;padding-top:170px}
.thero::before{background:radial-gradient(900px 640px at 74% 44%,rgba(var(--tint),.20),transparent 62%),radial-gradient(640px 520px at 6% 92%,rgba(var(--tint),.09),transparent 60%)}
.thero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.thero h1{font-size:clamp(44px,5.2vw,80px);line-height:.98;letter-spacing:-.035em}
.thero h1 .line:last-child>span{color:rgb(var(--tint));font-style:italic;transition:color .4s}
.thermo{display:grid;justify-items:center;gap:18px}
.thermo-dial{position:relative;width:min(440px,100%);aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%;outline:none;user-select:none;-webkit-user-select:none}
.thermo-dial.grab{cursor:grabbing}
.thermo-dial:focus-visible{box-shadow:0 0 0 3px rgba(var(--tint),.55)}
.thermo-dial svg{width:100%;height:100%;display:block;overflow:visible}
.th-halo{fill:rgba(var(--tint),.06);stroke:rgba(var(--tint),.18);stroke-width:1;transition:fill .4s,stroke .4s}
.th-ticks line{stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:round}
.th-ticks line.mj{stroke:rgba(255,255,255,.4);stroke-width:2.5}
.th-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:16;stroke-linecap:round}
.th-val{fill:none;stroke:rgb(var(--tint));stroke-width:16;stroke-linecap:round;filter:drop-shadow(0 0 14px rgba(var(--tint),.65))}
.th-face{fill:url(#thFace);stroke:rgba(255,255,255,.06);stroke-width:1}
.th-knob{fill:#fff;stroke:rgb(var(--tint));stroke-width:6;filter:drop-shadow(0 0 12px rgba(var(--tint),.9))}
.thermo-read{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;pointer-events:none}
.thermo-q{font-size:13px;color:var(--muted);max-width:17ch;line-height:1.3}
.thermo-read b{display:flex;align-items:flex-start;font-family:var(--serif);font-weight:900;font-size:clamp(70px,8.5vw,118px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.thermo-read b i{font-style:normal;font-size:.3em;margin:.28em 0 0 .08em;color:var(--soft);letter-spacing:0}
.thermo-mode{font-family:var(--cond);font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:13.5px;color:rgb(var(--tint));padding:6px 14px;border-radius:999px;border:1px solid rgba(var(--tint),.4);background:rgba(var(--tint),.1)}
.thermo-ctrl{display:flex;align-items:center;gap:16px}
.thermo-btn{width:50px;height:50px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font-size:26px;line-height:1;cursor:pointer;transition:border-color .25s,background .25s}
.thermo-btn:hover{border-color:rgba(var(--tint),.7);background:rgba(var(--tint),.1)}
.thermo-btn:focus-visible{outline:2px solid rgb(var(--tint));outline-offset:2px}
.thermo-hint{font-size:13px;color:var(--muted)}
.thermo-msg{display:grid;justify-items:center;gap:12px;text-align:center;max-width:430px;min-height:118px}
.thermo-text{color:var(--soft);font-size:16px}
.thermo-msg.swap{animation:pickIn .45s var(--ease)}
.thero .thermo-cta{background:rgb(var(--tint));border-color:rgb(var(--tint));color:#03130b;box-shadow:0 12px 34px rgba(var(--tint),.3)}
.thero-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:54px}
.tq{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:rgba(14,18,22,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-decoration:none;color:inherit;transition:border-color .3s,transform .3s var(--ease)}
.tq:hover{border-color:rgba(var(--tint),.55);transform:translateY(-3px)}
.tq .ic{width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;background:rgba(var(--tint),.12);transition:background .4s}
.tq .ic svg{width:28px;height:28px}
.tq-t{display:grid;gap:2px;min-width:0}
.tq b{font-family:var(--serif);font-size:18px}
.tq-t span{font-size:14px;color:var(--muted)}
.tq .go{margin-left:auto;font-style:normal;font-size:20px;color:rgb(var(--tint))}
@media (max-width:980px){
  .thero{padding-top:120px}
  .thero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .thermo-dial{width:min(330px,86vw)}
  .thero-quick{grid-template-columns:minmax(0,1fr);margin-top:36px}
}
@media (prefers-reduced-motion:reduce){ :root:not(.force-motion) .thermo-msg.swap,:root:not(.force-motion) .topbar .dot{animation:none} }
.topbar .star{font-family:system-ui,"Segoe UI Symbol",sans-serif;letter-spacing:0}

/* ===== uitbreiding 4: voor/na-hero (carrosserie) ===== */
.stats4.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .stats4.n3{grid-template-columns:minmax(0,1fr)} }
.rhero{--tint:232,200,105}
.rep{--pos:50;display:grid;gap:14px;justify-items:center}
.rep-stage{position:relative;width:100%;aspect-ratio:420/230;touch-action:none;cursor:ew-resize;border-radius:28px;outline:none;user-select:none;-webkit-user-select:none;border:1px solid var(--line);background:radial-gradient(70% 60% at 50% 30%,rgba(var(--tint),.16),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.25));overflow:hidden}
.rep-stage:focus-visible{box-shadow:0 0 0 3px rgba(var(--tint),.55)}
.rep-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px),linear-gradient(180deg,transparent,rgba(var(--tint),.08));transform:perspective(300px) rotateX(52deg);transform-origin:bottom}
.rep-layer{position:absolute;inset:0;padding:9% 4% 5%;display:grid;place-items:center}
.rep-layer .car{width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.rep-after{clip-path:inset(0 0 0 calc((100 - var(--pos)) * 1%))}
.rep-before{clip-path:inset(0 calc(var(--pos) * 1%) 0 0)}
.rep-before .car .body.dmg{fill:#5b616a}
.rep-before .car{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) saturate(.6)}
.rep-after .car .body{fill:rgb(var(--tint))}
.rep-after .streak{animation:streak 3.6s ease-in-out infinite}
@keyframes streak{0%{transform:skewX(-22deg) translateX(0)}60%,100%{transform:skewX(-22deg) translateX(640px)}}
.rep-handle{position:absolute;top:0;bottom:0;left:calc((100 - var(--pos)) * 1%);width:0;pointer-events:none}
.rep-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(transparent,rgb(var(--tint)) 20%,rgb(var(--tint)) 80%,transparent);box-shadow:0 0 18px rgba(var(--tint),.8)}
.rep-handle i{position:absolute;top:50%;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(var(--tint),.35),0 10px 30px rgba(0,0,0,.5);display:grid;place-items:center}
.rep-handle i::before{content:"‹ ›";font:700 18px/1 var(--sans);color:#0b0e13;letter-spacing:2px}
.rep-stage.grab{cursor:grabbing}
.rep-tag{position:absolute;top:16px;font-family:var(--cond);font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:12.5px;padding:6px 12px;border-radius:999px;background:rgba(8,10,12,.7);border:1px solid var(--line-2)}
.rep-tag.t-before{left:16px;color:var(--soft)}
.rep-tag.t-after{right:16px;color:rgb(var(--tint));border-color:rgba(var(--tint),.45)}
.rep-hint{font-size:13.5px;color:var(--muted)}
@media (max-width:980px){ .rep-stage{border-radius:20px} .rep-handle i{width:40px;height:40px;margin:-20px 0 0 -20px} }
@media (prefers-reduced-motion:reduce){ :root:not(.force-motion) .rep-after .streak{animation:none} }
.nav a,.logo .lt b,.logo .lt small{white-space:nowrap}

/* ===== uitbreiding 5: bandenmaat-hero en live openingsstatus ===== */
.ostat{display:inline-flex;align-items:center;gap:9px;margin:4px 0 2px;padding:7px 15px 7px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(7,17,32,.55);font-size:14px;color:var(--soft);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ostat.is-open{border-color:rgba(76,211,131,.45);color:var(--text)}
.ostat .dot,[data-open-status] .dot{width:8px;height:8px;border-radius:50%;flex:none;background:#4cd383;box-shadow:0 0 10px #4cd383;animation:blink 1.8s infinite}
[data-open-status].is-closed .dot{background:#ff6b5f;box-shadow:0 0 10px #ff6b5f;animation:none}
.tyhero h1{margin-top:14px}
.tyre{display:grid;justify-items:center;gap:14px}
.ty-stage{position:relative;width:min(390px,100%);aspect-ratio:1}
.ty-stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(var(--tint),.22),transparent 66%);filter:blur(24px)}
.ty-stage svg{position:relative;width:100%;height:100%;display:block;filter:drop-shadow(0 34px 50px rgba(0,0,0,.65))}
.ty-wheel{transform-box:view-box;transform-origin:200px 200px}
.ty-wheel.spin{animation:tyspin 1.1s cubic-bezier(.2,.75,.2,1)}
@keyframes tyspin{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
.ty-tread rect{fill:#08090a}
.ty-groove path{stroke:rgba(255,255,255,.05);stroke-width:2;stroke-linecap:round}
.ty-txt{font-family:var(--cond);font-weight:700;fill:#d4d8de}
.ty-big{font-size:34px;letter-spacing:3px}
.ty-small{font-size:12.5px;letter-spacing:4px;fill:#7d848e}
.ty-txt tspan{transition:fill .25s}
.tyre[data-hl="w"] .tw,.tyre[data-hl="r"] .tr,.tyre[data-hl="d"] .td{fill:rgb(var(--tint))}
.ty-holes circle{fill:#0f1013}
.ty-caliper{fill:rgb(var(--tint));opacity:.92}
.ty-spoke{fill:url(#tyRim);stroke:rgba(0,0,0,.35);stroke-width:1}
.ty-nuts circle{fill:#2a2d32;stroke:#c9ced6;stroke-width:1.2}
.ty-form{width:min(470px,100%);display:grid;gap:12px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:22px;background:rgba(14,16,20,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ty-q{font-family:var(--serif);font-weight:800;font-size:18px;text-align:center}
.ty-sel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px}
.ty-sel label{display:grid;gap:6px;min-width:0}
.ty-sel label span{font-family:var(--cond);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
.ty-sel select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;padding:12px 26px 12px 12px;border-radius:14px;border:1px solid var(--line-2);color:var(--text);font:700 22px/1 var(--cond);letter-spacing:.04em;text-align:center;cursor:pointer;background:#0b0d10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6adb7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/14px;transition:border-color .25s}
.ty-sel select:hover{border-color:rgba(var(--tint),.6)}
.ty-sel select:focus-visible{outline:2px solid rgb(var(--tint));outline-offset:2px}
.ty-sel option{background:#0b0d10;color:#eef1f4}
.ty-sel i{font-style:normal;font:700 22px/1 var(--cond);color:var(--muted);padding-bottom:13px}
.ty-hint{font-size:13px;color:var(--muted);text-align:center}
.tyhero .ty-cta{justify-content:center;background:rgb(var(--tint));border-color:rgb(var(--tint));color:#1a1400;box-shadow:0 14px 36px rgba(var(--tint),.28);white-space:normal;text-align:center}
.ty-cta b{font-weight:800;letter-spacing:.06em}
.ty-alt{font-size:13.5px;color:var(--soft);text-align:center;text-decoration:none}
.ty-alt:hover{color:var(--text);text-decoration:underline}
@media (max-width:980px){ .ty-stage{width:min(300px,78vw)} }
@media (max-width:420px){ .ty-sel select{font-size:19px;padding:11px 22px 11px 8px;background-position:right 5px center} .ty-sel{gap:5px} .ty-sel i{font-size:18px} }
@media (prefers-reduced-motion:reduce){ :root:not(.force-motion) .ty-wheel.spin{animation:none} :root:not(.force-motion) .ostat .dot{animation:none} }
@media (max-width:1400px){ .hdr.pill .hdr-in{gap:14px} }

/* bandenmaat-hero: garage-achtergrond (asfalt, werkplaatslamp, bandensporen) */
.tyhero.garage{background:#0a0b0d}
.tyhero.garage::before{background:radial-gradient(ellipse 46% 58% at 74% 40%,rgba(255,220,140,.17),transparent 70%),radial-gradient(ellipse 40% 50% at 8% 10%,rgba(232,200,105,.10),transparent 70%),linear-gradient(180deg,#0d0e11 0%,#0a0b0d 60%,#121418 100%)}
.ty-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ty-lamp{position:absolute;right:12%;top:-6%;width:44%;height:70%;background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(255,236,190,.07) 172deg,rgba(255,236,190,.11) 180deg,rgba(255,236,190,.07) 188deg,transparent 200deg);filter:blur(6px)}
.ty-track{position:absolute;width:132px;height:190%;top:-45%;transform:rotate(58deg);opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 15px,transparent 15px 28px) left top/44% 100% no-repeat,
             repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 15px,transparent 15px 28px) right 0 top 14px/44% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  animation:tyroll 2.4s linear infinite}
.ty-track.t1{left:30%}
.ty-track.t2{left:calc(30% + 250px)}
@keyframes tyroll{to{background-position:left 0 top 28px,right 0 top 42px}}
.ty-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.025)),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 90px);transform:perspective(420px) rotateX(58deg);transform-origin:bottom}
.ty-hazard{position:absolute;left:0;right:0;bottom:0;height:7px;background:repeating-linear-gradient(-45deg,rgb(var(--tint)) 0 14px,#111 14px 28px);opacity:.85}
.tyhero.garage .ty-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:-5%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);z-index:-1}
@media (max-width:980px){ .ty-track{width:96px} .ty-track.t1{left:8%} .ty-track.t2{left:calc(8% + 170px)} }
@media (prefers-reduced-motion:reduce){ :root:not(.force-motion) .ty-track{animation:none} }
/* merkenstrook (brands) en beeld bij een dienst (showcase / sv-fig) */
.brands{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.brand{display:grid;place-items:center;align-content:center;gap:6px;min-height:118px;padding:22px 18px;border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(160deg,var(--ink-3),var(--ink-2));text-align:center;transition:border-color .3s,transform .3s var(--ease)}
.brand:hover{transform:translateY(-3px)}
.brand .bw{font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.4vw,30px);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.brand .bs{font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.sv-fig{position:relative;display:grid;align-content:center;margin:0;padding:18px;border:1px solid var(--line-2);border-radius:24px;background:radial-gradient(ellipse 70% 60% at 50% 70%,rgba(232,200,105,.16),transparent 70%),linear-gradient(160deg,var(--ink-3),var(--ink-2));overflow:hidden}
.sv-fig img{display:block;width:100%;height:auto}
.sv-fig figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center}
.showcase .checks{margin:0}


/* ==== Kings Wheelservice · blauwe huisstijl ====
   Logo: navy #0f1c2e, blauw #d4a93a, lettertype Nunito. Wordt na het hertinten achter style.css gezet.
   Lichtblauw (--gold, uit theme.accent) dient voor tekstaccenten op donker; gevulde elementen worden
   merkblauw met witte tekst, zodat het contrast overal minstens 4,5:1 is. */
:root{
  --brand:#d4a93a; --brand-2:#d4a93a;
  --serif:"Nunito","Arial Black",Arial,sans-serif;
  --sans:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* gevulde elementen: merkblauw met witte tekst */
.skip,.svc-card:hover .svc-go,.svc-card.sel .svc-go,.bk-steps li.now::before,.day.sel,.slot.sel,
.seg button[aria-pressed="true"],.mbar a.on,.hq.ok legend b,.chip input:checked+span,.chip[aria-pressed="true"],.cursor.label{
  background:var(--brand);border-color:var(--brand);color:#0a0a0b}
.cursor.label::after{color:#fff}
.btn-gold,.tyhero .ty-cta{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-color:transparent;color:#0a0a0b;box-shadow:0 12px 32px rgba(212,169,58,.38)}
.btn-gold:hover,.tyhero .ty-cta:hover{color:#fff;box-shadow:0 16px 42px rgba(212,169,58,.5)}
.badge247{background:linear-gradient(160deg,var(--brand-2),var(--brand));color:#0a0a0b}

/* kop met zes menu-items: belknop als icoon (het nummer staat al in de bovenbalk),
   en onder 1140px het hamburgermenu, zodat de kop nergens overloopt */
.hdr .hdr-phone span{display:none}
.hdr .hdr-phone{padding:10px 13px}
@media (max-width:1140px){ .nav,.hdr .btn{display:none} .burger{display:block} }

/* logo: icoon + KINGS / WHEELSERVICE, zoals het goedgekeurde logo */
.logo .lt b{font-family:var(--serif);font-weight:900;letter-spacing:-.01em}
.logo .lt small{font-family:var(--serif);font-weight:800;letter-spacing:.22em;font-size:11.5px;color:#e8c869;margin-top:4px}
.loader-in b{font-family:var(--serif);letter-spacing:-.01em}

/* garage-hero: koel blauw licht in plaats van warm geel */
.tyhero.garage{background:#06101e}
.tyhero.garage::before{background:radial-gradient(ellipse 46% 58% at 74% 40%,rgba(232,200,105,.18),transparent 70%),radial-gradient(ellipse 40% 50% at 8% 10%,rgba(212,169,58,.18),transparent 70%),linear-gradient(180deg,#081428 0%,#06101e 60%,#0b1a33 100%)}
.ty-lamp{background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(232,200,105,.07) 172deg,rgba(232,200,105,.12) 180deg,rgba(232,200,105,.07) 188deg,transparent 200deg)}
.sos{background:linear-gradient(90deg,#0d2342,#0c1a2e 40%,#0d2342)}

/* beeld van de machines: blauwe gloed eronder */
.sv-fig{background:radial-gradient(ellipse 70% 55% at 50% 78%,rgba(232,200,105,.22),transparent 70%),linear-gradient(160deg,#12243d,#0c1a2e)}

/* merkenstrook: 2x2 op mobiel en tablet, 4 naast elkaar vanaf 900px */
.brands{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){ .brands{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .brand{min-height:84px;padding:16px 12px} }
.brand .bw{letter-spacing:.06em}
.brand:hover{border-color:rgba(232,200,105,.45)}

/* ==== bevindingen uit de review ==== */
/* logo: "KINGS" wit zoals het goedgekeurde logo (de kop erfde grijs van .pill) */
.logo .lt b{color:#fff}

/* hamburgermenu met 8 links: bovenaan beginnen, kleiner en scrollbaar, zodat alles bereikbaar is */
.mnav{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:calc(124px + env(safe-area-inset-top,0px)) 28px 40px}
.mnav > a{font-size:clamp(26px,min(7vw,5.2vh),44px);line-height:1.15}
.mnav .mnav-foot{margin-top:22px}
.mnav .mnav-foot a{font-size:15px;letter-spacing:.14em;white-space:normal;max-width:100%}

/* kalender: geselecteerde dag die vandaag is, wit op merkblauw */
.day.sel span{color:#fff}

/* formulierpanelen in navy in plaats van houtskoolgrijs */
.glass{background:linear-gradient(160deg,rgba(18,36,61,.82),rgba(12,26,46,.9))}

/* bijschrift bij het machinebeeld leesbaar op de blauwe gloed */
.sv-fig figcaption{color:var(--soft)}

/* keuzehulp met 5 tabs: onder 900px afbreken in plaats van verborgen horizontaal scrollen */
@media (max-width:900px){
  .pick-tabs{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible;padding-bottom:0}
  .pick-tabs button{padding:10px 12px;gap:10px;font-size:15px}
  .pick-tabs button .ic{width:36px;height:36px}
}

/* lange woorden in paginatitels (bandencentrale, Poederlakken) op smalle telefoons */
@media (max-width:420px){ .phead h1{font-size:clamp(30px,10.2vw,44px)} }

/* afspraakpagina: titel van de dienstkaart raakt de pijlknop niet meer */
.svc-name{padding-right:40px}

/* afspraakkalender: zeven kolommen blijven binnen de kaart, ook op smalle telefoons */
.cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-grid>*{min-width:0}

/* logo: band en velg draaien in tegengestelde richting rond het stilstaande kroontje, ook bij "minder beweging" */

/* logo van de klant (4-11-2026): schild op zwart, staat alleen op donker */
.logo .mark{display:block;flex:none;width:auto;height:66px}
.hdr.solid .logo .mark{height:54px}
.ftr .logo .mark{height:110px}
@media (max-width:640px){ .logo .mark{height:52px} .logo .lt small{letter-spacing:.14em} }

/* prijslijst */
.prijs-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.prijs-kaart:last-child{grid-column:1/-1}
@media (max-width:820px){ .prijs-grid{grid-template-columns:minmax(0,1fr)} }
.prijs-voordelen{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}
.prijs-voordeel{border:1px solid #e8c869}
.prijs-voordeel h3{margin:0 0 4px;color:#e8c869}.prijs-voordeel p{margin:0}
@media (max-width:820px){ .prijs-voordelen{grid-template-columns:minmax(0,1fr)} }
.prijs-kaart h3{margin:0}.prijs-kaart .muted{margin:2px 0 0;font-size:14px}
.ptabel{width:100%;border-collapse:collapse;margin-top:12px;font-size:16px}
.ptabel th,.ptabel td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;font-weight:600;white-space:nowrap}
.ptabel thead th{font-size:13px;font-weight:800;color:#e8c869;border-bottom:1px solid var(--line-2)}
.ptabel th:first-child{text-align:left;white-space:normal;padding-left:0}
.ptabel td:nth-child(2){font-weight:900;color:#fff}
.ptabel th:last-child,.ptabel td:last-child{padding-right:0}
.ptabel tbody tr:last-child th,.ptabel tbody tr:last-child td{border-bottom:0}
@media (max-width:420px){ .ptabel{font-size:15px} .ptabel th,.ptabel td{padding-inline:5px} }

/* ==== Kings Wheelservice · homepage "banden" (home_layout) ====
   Ritme: donkere hero met zoekfunctie, troevenstrook, lichte dienstensectie, seizoensband, velgenlab (donker),
   lichte reviews, stappen, witte merkenmuur, winkelblok met kaart, lichte FAQ. Licht = eigen tokens per sectie,
   zodat de bestaande componenten (kaarten, FAQ, knoppen) vanzelf meekleuren. */
:root{--paper:#f5f7f9;--paper-2:#ffffff;--navy:#0f1c2e;--navy-soft:#43536c;--hair:rgba(15,28,46,.12);
  /* typografie: Archivo voor koppen (strak, industrieel), Manrope voor lopende tekst. Het logo blijft Nunito. */
  --serif:"Archivo","Arial Narrow",Arial,sans-serif;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.logo .lt b,.logo .lt small,.loader-in b{font-family:"Nunito","Arial Black",Arial,sans-serif}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.2vw,52px)}
em.it{font-style:normal}
.btn{letter-spacing:.08em;font-size:15px}
.eyebrow{letter-spacing:.2em}

.b2-light{background:var(--paper);color:var(--navy);
  --text:var(--navy);--soft:#2f3e56;--muted:var(--navy-soft);--line:var(--hair);--line-2:rgba(15,28,46,.2);
  --ink-2:#ffffff;--ink-3:#ffffff;--gold:#d4a93a;--gold-2:#d4a93a;--gold-soft:rgba(212,169,58,.08);color-scheme:light}
.b2-light .eyebrow{color:#d4a93a}
.b2-light em.it{color:#d4a93a}
.b2-light .btn:not(.btn-gold){border-color:rgba(15,28,46,.22);color:var(--navy)}
.b2-light .btn:not(.btn-gold):hover{border-color:#d4a93a;color:#d4a93a}

/* ---------- hero ---------- */
.b2-hero{position:relative;overflow:hidden;background:#06101e;padding:calc(168px + env(safe-area-inset-top,0px)) 0 clamp(56px,7vw,92px)}
.b2-hero-bg{position:absolute;inset:0;pointer-events:none}
.b2-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 78% 40%,rgba(212,169,58,.32),transparent 70%),radial-gradient(ellipse 40% 50% at 0% 0%,rgba(232,200,105,.12),transparent 70%),linear-gradient(180deg,#081428,#06101e 70%)}
.b2-bigtyre{position:absolute;width:min(760px,62vw);aspect-ratio:1;right:-14vw;top:50%;translate:0 -50%;opacity:.5;filter:saturate(.9)}
.b2-bigtyre svg{width:100%;height:100%;display:block}
.b2-bigtyre .ty-wheel{transform-origin:50% 50%;animation:b2roll 1.6s var(--ease) both}
.b2-bigtyre.spin .ty-wheel{animation:b2roll .9s var(--ease)}
@keyframes b2roll{from{transform:rotate(-80deg)}to{transform:none}}
.b2-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;animation:b2zoom 14s ease-out both}
.b2-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,30,.92) 0%,rgba(6,16,30,.72) 36%,rgba(6,16,30,.18) 68%,rgba(6,16,30,.3) 100%),linear-gradient(180deg,rgba(6,16,30,.55) 0%,transparent 28%,transparent 72%,rgba(6,16,30,.85) 100%)}
@keyframes b2zoom{from{transform:scale(1.08)}to{transform:none}}
.b2-hero.has-photo .b2-finder{background:linear-gradient(180deg,rgba(12,26,46,.86),rgba(7,17,32,.92))}
.b2-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.b2-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.b2-copy h1{font-size:clamp(42px,5vw,72px);font-weight:900;line-height:.98;letter-spacing:-.02em}
.b2-copy h1 .line{display:block}
.b2-copy h1 .line:last-child{color:#e8c869}
.b2-copy .lead{max-width:46ch}
.b2-score{display:inline-flex;align-items:center;gap:12px;text-decoration:none;padding:10px 16px 10px 12px;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.03);font-size:14px;color:var(--soft)}
.b2-score b{font-family:var(--serif);font-weight:900;font-size:26px;color:#fff;line-height:1}
.b2-score .stars{color:#ffc84a;letter-spacing:2px;font-family:system-ui,"Segoe UI Symbol",sans-serif}
.b2-score:hover{border-color:rgba(232,200,105,.5);color:#fff}

/* zoekfunctie */
.b2-finder{position:relative;background:linear-gradient(180deg,rgba(18,36,61,.92),rgba(12,26,46,.96));border:1px solid rgba(232,200,105,.22);border-radius:24px;padding:10px 22px 20px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:0}
.b2-tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 -6px 18px;overflow-x:auto;scrollbar-width:none}
.b2-tabs button{flex:1 0 auto;border:0;background:none;padding:14px 12px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.b2-tabs button[aria-selected="true"]{color:#fff}
.b2-tabs button:hover{color:var(--text)}
.b2-tabline{position:absolute;left:0;bottom:-1px;height:3px;border-radius:3px;background:#e8c869;transition:transform .35s var(--ease),width .35s var(--ease)}
.b2-panel{display:grid;gap:16px}
.b2-panel legend,.b2-sel>span{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:8px}
.b2-seg,.b2-chips{border:0;margin:0;padding:0;min-width:0}
.b2-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.b2-seg legend{grid-column:1/-1}
.b2-seg label,.b2-chips label{position:relative;cursor:pointer}
.b2-seg input,.b2-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.b2-seg span{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border:1px solid var(--line-2);border-radius:12px;font-weight:700;font-size:14.5px;transition:background .2s,border-color .2s}
.b2-seg span svg{width:20px;height:20px;flex:none}
.b2-seg input:checked+span,.b2-chips input:checked+span{background:#d4a93a;border-color:#d4a93a;color:#0a0a0b}
.b2-seg input:focus-visible+span,.b2-chips input:focus-visible+span{outline:2px solid #e8c869;outline-offset:2px}
.b2-size{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}
.b2-size>i{font-style:normal;font-family:var(--serif);font-weight:900;font-size:24px;color:var(--muted);padding-bottom:12px}
.b2-sel{display:grid;min-width:0}
.b2-sel select{appearance:none;-webkit-appearance:none;width:100%;font-family:var(--serif);font-weight:900;font-size:24px;color:#fff;background:#071120 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8c869' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/12px;border:1px solid var(--line-2);border-radius:12px;padding:10px 30px 10px 14px;cursor:pointer}
.b2-sel select:focus-visible{outline:2px solid #e8c869;outline-offset:2px}
.b2-help{font-size:14px;color:var(--soft)}
.b2-help summary{cursor:pointer;color:#e8c869;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:8px}
.b2-help summary::before{content:"?";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:12px}
.b2-help summary::-webkit-details-marker{display:none}
.b2-help p{margin-top:10px;max-width:52ch}
.b2-wall{margin-top:12px;display:flex;gap:.45em;align-items:baseline;font-family:var(--cond);font-weight:700;font-size:30px;letter-spacing:.06em;color:#fff;background:#05090f;border-radius:12px;padding:12px 16px}
.b2-wall .hl{border-bottom:3px solid #e8c869;padding-bottom:2px}
.b2-wall span:not(.hl){color:var(--muted)}
.b2-go{justify-content:center;width:100%;padding:16px 20px}
.b2-plate{display:flex;align-items:stretch;border-radius:10px;overflow:hidden;border:3px solid #b3121d;background:#fff;max-width:340px}
.b2-plate .eu{display:grid;place-items:center;align-content:center;gap:2px;background:#5c4500;color:#ffd617;font-family:var(--cond);font-weight:700;font-size:17px;padding:0 10px;line-height:1}
.b2-plate .eu i{font-style:normal;font-size:9px;letter-spacing:1px}
.b2-plate .eu{color:#fff}
.b2-plate .eu i{color:#ffd617}
.b2-plate input{flex:1;min-width:0;border:0;background:#fff;color:#b3121d;font-family:var(--cond);font-weight:700;font-size:34px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px}
.b2-plate input::placeholder{color:rgba(179,18,29,.3)}
.b2-plate input:focus{outline:none}
.b2-plate:focus-within{box-shadow:0 0 0 3px rgba(232,200,105,.6)}
.b2-hint{font-size:14.5px;color:var(--soft)}
.b2-chips{display:flex;flex-wrap:wrap;gap:8px}
.b2-chips legend{width:100%}
.b2-chips span{display:inline-block;padding:10px 15px;border:1px solid var(--line-2);border-radius:999px;font-weight:700;font-size:14.5px}
.b2-alt{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}
.b2-alt a{color:#e8c869;font-weight:700;text-decoration:none}
.b2-alt a:hover{text-decoration:underline}

/* ---------- troevenstrook ---------- */
.b2-usp{background:#0a1628;border-block:1px solid rgba(232,200,105,.14)}
.b2-usp ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:6px}
.b2-usp li{display:flex;align-items:center;gap:14px;padding:18px 18px;min-width:0}
.b2-usp li+li{border-left:1px solid rgba(232,200,105,.12)}
.b2-usp .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(232,200,105,.1)}
.b2-usp .ic svg{width:26px;height:26px}
.b2-usp b{display:block;font-family:var(--serif);font-weight:800;font-size:16.5px;line-height:1.2}
.b2-usp small{display:block;color:var(--muted);font-size:13.5px;line-height:1.35;margin-top:2px}

/* ---------- diensten (licht) ---------- */
.b2-light .icard{background:#fff;border-color:var(--hair);box-shadow:0 1px 0 rgba(15,28,46,.04),0 18px 40px -28px rgba(15,28,46,.35)}
.b2-light .icard:hover{border-color:rgba(212,169,58,.45);box-shadow:0 24px 50px -24px rgba(212,169,58,.35)}
.b2-light .icard .ic{background:rgba(212,169,58,.08);border-color:rgba(212,169,58,.18)}
.b2-light .icard .ic svg *{stroke:#d4a93a}
.b2-light .icard p{color:var(--navy-soft)}
.b2-light .icard .go{color:#d4a93a}
.b2-light .icards{grid-template-columns:repeat(3,minmax(0,1fr))}
.icard.has-photo{padding:0 0 22px;overflow:hidden;gap:10px}
.icard.has-photo>:not(.ph){margin-inline:24px}
.icard .ph{display:block;aspect-ratio:16/10;overflow:hidden;background:#0c1a2e;margin-bottom:8px}
.icard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.icard.has-photo:hover .ph img{transform:scale(1.05)}
@media (min-width:1100px){.b2-light .icards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.icard.has-photo h3{font-size:19px}
.icard.has-photo p{font-size:14.5px}

/* dienstpagina's: foto in de kop in plaats van het grote icoon */
.svc-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(232,200,105,.2);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);min-width:0}
.svc-photo img{width:100%;height:100%;object-fit:cover;animation:b2zoom 12s ease-out both}
.svc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,17,32,.45));pointer-events:none}
@media (prefers-reduced-motion:reduce){.svc-photo img{animation:none}}
.svc-hero-grid:has(.svc-photo){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px)}
@media (max-width:980px){.svc-hero-grid:has(.svc-photo){grid-template-columns:1fr}.svc-photo{margin-top:18px;aspect-ratio:16/10}}

/* ---------- seizoensband ---------- */
.b2-season{background:linear-gradient(100deg,#d4a93a,#d4a93a 55%,#5c4500);color:#0a0a0b;position:relative;overflow:hidden}
.b2-season::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 14px,transparent 14px 40px);mask-image:linear-gradient(90deg,transparent 40%,#000);pointer-events:none}
.b2-season-in{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;padding-block:clamp(40px,5vw,60px)}
.b2-season-in[hidden]{display:none}
.b2-season .ic{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.b2-season .ic svg{width:52px;height:52px}
.b2-season .ic svg *{stroke:#fff}
.b2-season .eyebrow{color:#e1e6ed}
.b2-season h2{font-size:clamp(28px,3.6vw,44px);margin-top:8px}
.b2-season em.it{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.45)}
.b2-season .lead{color:#eef0f4;margin-top:10px}
.b2-season .btn{border-color:rgba(255,255,255,.5);color:#fff}
.b2-season .btn-gold{background:#fff;color:#5c4500;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.b2-season .btn-gold:hover{color:#5c4500}

/* ---------- velgenlab ---------- */
.b2-rims{background:radial-gradient(ellipse 60% 70% at 75% 50%,rgba(212,169,58,.18),transparent 70%),#071120}
.b2-rims-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:center}
.b2-rims-copy{display:grid;gap:20px;justify-items:start;min-width:0}
.b2-finishes{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:0;width:100%}
.b2-finishes li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.b2-finishes b{font-family:var(--serif);font-weight:800}
.b2-finishes span{color:var(--soft);font-size:15px}
.b2-lab{display:grid;gap:18px;min-width:0}
.b2-cmp{position:relative;aspect-ratio:1;width:min(520px,100%);justify-self:center;border-radius:50%;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.b2-cmp>div{position:absolute;inset:0}
.b2-cmp svg{width:100%;height:100%;display:block}
.b2-cmp-b{clip-path:inset(0 0 0 var(--pos))}
.rm-spoke{fill:var(--rim,#8d939b);transition:fill .45s var(--ease)}
.rm-face{fill:var(--face,#8d939b);transition:fill .45s var(--ease)}
.rm-lip{fill:var(--lip,#7d838b);transition:fill .45s var(--ease)}
.b2-cmp-a{--rim:#8a8780;--face:#8a8780;--lip:#77736c;filter:saturate(.5) sepia(.25) brightness(.72) contrast(.9)}
.b2-cmp-line{position:absolute;top:-4%;bottom:-4%;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(232,200,105,.8);pointer-events:none}
.b2-cmp-line i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.b2-cmp-line i::before{content:"‹ ›";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:18px;color:#0f1c2e;letter-spacing:2px}
.b2-tag{position:absolute;top:2%;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(7,17,32,.8);border:1px solid var(--line-2);pointer-events:none}
.b2-tag.l{left:2%}.b2-tag.r{right:2%}
.b2-cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;pointer-events:none}
.b2-cmp:has(.b2-cmp-range:focus-visible){outline:3px solid #e8c869;outline-offset:6px}
.b2-lab-ctl{display:grid;gap:14px;justify-items:center}
.b2-mode{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line-2);background:#0c1a2e}
.b2-mode button{border:0;background:none;padding:9px 18px;border-radius:999px;font-family:var(--cond);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--muted)}
.b2-mode button[aria-pressed="true"]{background:#d4a93a;color:#0a0a0b}
.b2-sws{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.b2-sw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#0c1a2e;border-radius:999px;padding:6px 13px 6px 6px;font-size:13.5px;font-weight:700;color:var(--soft)}
.b2-sw i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset -4px -6px 8px rgba(0,0,0,.25)}
.b2-sw[aria-pressed="true"]{border-color:#e8c869;color:#fff;background:#12243d}
.b2-lab-note{font-size:13px;color:var(--muted);text-align:center}

/* ---------- reviews (licht) ---------- */
.b2-revs-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,64px);align-items:start}
.b2-bigscore{display:grid;gap:10px;justify-items:start;position:sticky;top:120px}
.b2-bigscore>b{font-family:var(--serif);font-weight:900;font-size:clamp(84px,10vw,128px);line-height:.9;letter-spacing:-.03em;color:var(--navy)}
.b2-bigscore>b small{font-size:.32em;color:var(--navy-soft);margin-left:4px}
.b2-bigscore .stars{color:#f5a400;font-size:26px;letter-spacing:4px;font-family:system-ui,"Segoe UI Symbol",sans-serif}
.b2-bigscore p{color:var(--navy-soft)}
.b2-revlist{display:grid;gap:16px}
.b2-rev{margin:0;background:#fff;border:1px solid var(--hair);border-radius:20px;padding:26px 28px;display:grid;gap:12px;box-shadow:0 18px 40px -30px rgba(15,28,46,.4)}
.b2-rev .stars{color:#f5a400;letter-spacing:3px;font-family:system-ui,"Segoe UI Symbol",sans-serif}
.b2-rev blockquote{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,21px);line-height:1.4;color:var(--navy)}
.b2-rev figcaption{font-size:14px;color:var(--navy-soft)}
.b2-rev:nth-child(2){margin-left:clamp(0px,4vw,48px)}

/* ---------- stappen ---------- */
.b2-steps{background:#0a1628}
.b2-steplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:st;position:relative}
.b2-steplist::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:linear-gradient(90deg,#d4a93a,rgba(232,200,105,.15))}
.b2-steplist li{counter-increment:st;display:grid;gap:10px;align-content:start;padding:0 22px 0 0;position:relative;min-width:0}
.b2-steplist li::before{content:counter(st);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#d4a93a;color:#0a0a0b;font-family:var(--serif);font-weight:900;font-size:22px;box-shadow:0 0 0 8px #0a1628;position:relative;margin-bottom:10px}
.b2-steplist h3{font-size:20px}
.b2-steplist p{color:var(--muted);font-size:15px}

/* ---------- merkenmuur (wit) ---------- */
.brands-sec{background:#fff;color:var(--navy);padding-top:clamp(70px,9vw,110px)!important;
  --text:var(--navy);--soft:#2f3e56;--muted:var(--navy-soft);--line:var(--hair)}
.brands-sec .eyebrow{color:#d4a93a}
.brands-sec em.it{color:#d4a93a}
.brands-sec .brands{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:40px}
.brands-sec .brand{min-height:120px;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);border-radius:0;background:#fff;padding:26px 22px}
.brands-sec .brand:hover{transform:none;background:#f8f9fb}
.brands-sec .bl{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;transition:transform .35s var(--ease)}
.brands-sec .brand:hover .bl{transform:scale(1.07)}

/* ---------- winkelblok ---------- */
.b2-loc{background:radial-gradient(ellipse 50% 60% at 80% 50%,rgba(212,169,58,.16),transparent 70%),#071120}
.b2-loc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.b2-loc-card{display:grid;gap:18px;justify-items:start;min-width:0}
.b2-loc-card address{font-style:normal;font-size:19px;line-height:1.5;color:var(--text)}
.b2-hours{width:100%;max-width:420px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.b2-hours th,.b2-hours td{padding:9px 0;border-top:1px solid var(--line);font-weight:400;text-align:left}
.b2-hours td{text-align:right;font-family:var(--cond);font-weight:600;letter-spacing:.06em;color:var(--soft)}
.b2-hours tr.today th,.b2-hours tr.today td{color:#fff;font-weight:700}
.b2-hours tr.today th::after{content:"vandaag";margin-left:10px;font-family:var(--cond);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#e8c869;font-weight:600}
.b2-loc-map{border-radius:28px;overflow:hidden;border:1px solid rgba(232,200,105,.2);background:#0a1628}
.b2-map{display:block;width:100%;height:auto}
.mp-grid{stroke:rgba(232,200,105,.07);stroke-width:1}
.mp-canal{fill:none;stroke:rgba(232,200,105,.25);stroke-width:6;stroke-linecap:round}
.mp-road{stroke:rgba(232,200,105,.22);stroke-width:1.5;stroke-dasharray:4 5}
.mp-dot{fill:#e8c869}
.mp-lbl{fill:#c5cfdc;font:600 12.5px var(--sans)}
.mp-pin{fill:#e8c869;stroke:#fff;stroke-width:3}
.mp-pulse{fill:rgba(232,200,105,.18);transform-box:fill-box;transform-origin:center;animation:b2pulse 2.4s ease-out infinite}
.mp-home{fill:#fff;font:800 15px var(--serif)}
@keyframes b2pulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}

/* ---------- FAQ (licht) ---------- */
.b2-faq .faq details{background:#fff;border-color:var(--hair)}
.b2-faq .faq summary{color:var(--navy)}
.b2-faq .faq summary i::before,.b2-faq .faq summary i::after{background:#d4a93a}
.b2-faq .faq-a{color:var(--navy-soft)}

/* ---------- responsief ---------- */
@media (max-width:1080px){
  .brands-sec .brands{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b2-usp ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b2-usp li:nth-child(3){border-left:0}
  .b2-usp li:nth-child(n+3){border-top:1px solid rgba(232,200,105,.12)}
}
@media (max-width:960px){
  .b2-hero{padding-top:calc(128px + env(safe-area-inset-top,0px))}
  .b2-hero-grid,.b2-rims-grid,.b2-revs-grid,.b2-loc-grid{grid-template-columns:1fr}
  .b2-bigtyre{width:120vw;right:-60vw;top:6%;translate:0 0;opacity:.22}
  .b2-light .icards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b2-bigscore{position:static}
  .b2-rev:nth-child(2){margin-left:0}
  .b2-steplist{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
  .b2-steplist::before{display:none}
  .b2-season-in{grid-template-columns:auto minmax(0,1fr)}
  .b2-season-in .hero-cta{grid-column:1/-1}
}
@media (max-width:960px){
  /* zoekfunctie meteen onder de titel, uitleg en score erna */
  .b2-hero-grid{gap:20px}
  .b2-copy{display:contents}
  .b2-copy .ostat{order:1;justify-self:start}
  .b2-copy h1{order:2}
  .b2-finder{order:3}
  .b2-copy .lead{order:4}
  .b2-score{order:5;justify-self:start}
}
@media (max-width:620px){
  .b2-copy h1{font-size:clamp(38px,11vw,56px)}
  .b2-hero{padding-top:calc(112px + env(safe-area-inset-top,0px))}
  .b2-finder{padding:6px 14px 16px;border-radius:20px}
  .b2-tabs button{padding:13px 8px;font-size:13.5px;letter-spacing:.08em}
  .b2-seg span{flex-direction:column;gap:4px;font-size:13px;padding:10px 4px}
  .b2-sel select{font-size:20px;padding:9px 24px 9px 10px;background-position:right 8px center}
  .b2-size{gap:5px}
  .b2-size>i{font-size:18px}
  .b2-plate input{font-size:28px}
  .b2-usp ul{grid-template-columns:1fr}
  .b2-usp li{border-left:0!important;border-top:1px solid rgba(232,200,105,.12)}
  .b2-usp li:first-child{border-top:0}
  .b2-light .icards{grid-template-columns:1fr}
  .b2-steplist{grid-template-columns:1fr}
  .b2-finishes li{grid-template-columns:1fr;gap:2px}
  .b2-season-in{grid-template-columns:1fr}
  .b2-season .ic{width:64px;height:64px;border-radius:18px}
  .brands-sec .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brands-sec .brand{min-height:84px;padding:16px 12px}
  .brands-sec .bl{max-height:30px}
}
@media (prefers-reduced-motion:reduce){
  .b2-bigtyre .ty-wheel,.b2-bigtyre.spin .ty-wheel,.mp-pulse,.b2-hero-img{animation:none}
}