/* ============================================================
   TB Car Cleaning — v11 · fresh
   Clean premium-dark · real work driven · moderate scale
   Font: General Sans · accent: logo-blue · hexagon motif
   ============================================================ */

:root {
  --bg:        #0B0D11;
  --bg-2:      #0E1116;
  --surface:   #14171E;
  --card:      #191D26;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);

  --blue:      #3B8EF4;   /* logo-blauw: accenten, lijnen, hexagon (grafisch, 3:1) */
  --blue-br:   #66A8F7;
  --blue-dim:  #2B6DC4;
  /* Gevulde vlakken met witte tekst: #3B8EF4 haalt maar 3.30:1 met wit.
     Deze tint haalt 4.78:1 (WCAG AA) en leest als hetzelfde blauw. */
  --blue-cta:  #2D73C8;
  --blue-cta-h:#2762AB;
  --ink:       #071019;

  --text:      #ECEEF2;
  --muted:     #99A0AC;
  --dim:       #7E8694;   /* was #6A7280 = 4.01:1 op --bg, faalde AA */

  --font: 'General Sans', system-ui, -apple-system, sans-serif;
  --radius: 12px;
  --radius-sm: 7px;
  --maxw: 1180px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --nav-h: 86px;
  --sp: clamp(3.75rem, 7.5vw, 6.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tr: 0.35s var(--ease);
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

/* OP normalize trap-fixes */
:where(h1,h2,h3,h4,h5,h6){ max-inline-size:none; }
ul[class],ol[class]{ padding-inline-start:0; margin-block:0; list-style:none; }
li{ padding-inline-start:0; text-indent:0; max-inline-size:none; }
figcaption{ max-inline-size:none; }
details{ background:transparent; border-radius:0; padding:0; }
summary{ background:transparent; border-radius:0; margin:0; padding:0; list-style:none; }
summary::-webkit-details-marker{ display:none; }
[hidden]{ display:none !important; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
[id]{ scroll-margin-top: calc(var(--nav-h) + 1rem); }

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
body{
  background:var(--bg); color:var(--muted);
  font-family:var(--font); font-size:clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4{ color:var(--text); font-weight:600; line-height:1.08; letter-spacing:-0.02em; }
a{ color:inherit; text-decoration:none; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
::selection{ background:var(--blue-cta); color:#fff; }

.wrap{ width:min(var(--maxw), 100% - calc(var(--pad)*2)); margin-inline:auto; }
.wrap--wide{ width:min(1320px, 100% - calc(var(--pad)*2)); margin-inline:auto; }
.wrap--narrow{ width:min(760px, 100% - calc(var(--pad)*2)); } /* leespagina's: kop + prose in hetzelfde register */
.section{ padding-block:var(--sp); position:relative; }
.section--alt{ background:var(--bg-2); }
.section--line{ border-top:1px solid var(--line); }

/* section header */
.label{ display:inline-flex; align-items:center; gap:0.55rem; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-br); margin-bottom:1rem; }
.label .hex{ width:11px; height:12px; display:inline-block; background:var(--blue); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.h-title{ font-size:clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem); }
.h-sub{ margin-top:0.9rem; max-width:56ch; color:var(--muted); font-size:clamp(1rem,0.97rem + 0.2vw,1.12rem); }
.head{ margin-bottom:clamp(2rem,3.5vw,3rem); }
.head-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem 2rem; margin-bottom:clamp(2rem,3.5vw,3rem); }
.head-row .head{ margin:0; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.8rem 1.45rem; min-height:46px; line-height:1.1; border:1px solid transparent; border-radius:var(--radius-sm);
  font-family:var(--font); font-weight:600; font-size:0.94rem; cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform var(--tr), background var(--tr), border-color var(--tr), color var(--tr);
}
/* Gloss-hover: lichtstreep die één keer over de knop veegt (blauwe zweem op de witte knop).
   Transition alleen op :hover — bij loslaten springt hij zonder terug-sweep naar start. */
.btn::before{ content:''; position:absolute; top:-30%; bottom:-30%; left:0; width:34%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:translateX(-160%) skewX(-18deg); pointer-events:none; }
.btn--white::before{ background:linear-gradient(105deg, transparent, rgba(45,115,200,0.30), transparent); }
@media (hover:hover){
  .btn:hover::before{ transform:translateX(490%) skewX(-18deg); transition:transform 0.6s ease-out; }
}
/* Inline SVG-iconen (waren 447KB Tabler-webfont voor 10 iconen).
   De <i class="ic">-wrapper blijft bestaan zodat `.btn i{font-size}`,
   `.phone i{color}` enz. ongewijzigd blijven gelden: de svg erft beide. */
.ic{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; }
.ic svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn i{ font-size:1.15em; }
.btn--blue{ background:var(--blue-cta); color:#fff; }
.btn--white{ background:var(--text); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
/* WhatsApp-merkgroen. Donkere tekst, geen witte: wit op #25D366 haalt ~1,9:1. */
.btn--wa{ background:#25D366; color:var(--ink); }
@media (hover:hover){
  .btn--blue:hover{ background:var(--blue-cta-h); transform:translateY(-2px); }
  .btn--white:hover{ transform:translateY(-2px); }
  .btn--ghost:hover{ border-color:var(--blue); color:var(--blue-br); transform:translateY(-2px); }
  .btn--wa:hover{ background:#1EBE5B; transform:translateY(-2px); }
}
.phone{ display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; color:var(--text); }
.phone i{ color:var(--blue-br); font-size:1.2rem; }
@media (hover:hover){ .phone:hover{ color:var(--blue-br); } }
.link-arrow{ display:inline-flex; align-items:center; gap:0.4rem; font-weight:600; color:var(--blue-br); }
.link-arrow i{ transition:transform var(--tr); }
@media (hover:hover){ .link-arrow:hover i{ transform:translateX(3px); } }

/* ===== Navbar ===== */
#site-navbar{ position:sticky; top:0; z-index:1000; min-height:var(--nav-h); }  /* reserveer hoogte: JS injecteert de nav pas na parse (CLS) */
/* Meng nooit een bijna-neutrale kleur met `transparent` in oklch/lch/hsl: de chroma is
   te laag, de hue wordt 'powerless' en valt terug op 0deg (rood). #0B0D11 rendert dan
   als rgb(25,21,22) i.p.v. rgb(21,22,26). Gebruik srgb of oklab. Gemeten, niet gegokt. */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:min(var(--maxw),100% - calc(var(--pad)*2)); margin-inline:auto; height:var(--nav-h); }
#site-navbar::before{ content:''; position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid transparent; opacity:0; transition:opacity var(--tr), border-color var(--tr); pointer-events:none; }
#site-navbar.is-scrolled::before{ opacity:1; border-bottom-color:var(--line); }
.nav-logo{ position:relative; z-index:1; display:inline-flex; }
.nav-logo img{ height:clamp(42px, 4.4vw, 58px); width:auto; }
.nav-links{ display:flex; align-items:center; gap:2rem; position:relative; z-index:1; }
.nav-link{ font-size:0.94rem; font-weight:500; color:var(--muted); transition:color var(--tr); }
@media (hover:hover){ .nav-link:hover{ color:var(--text); } }
.nav-link.is-active{ color:var(--text); }
.nav-right{ display:flex; align-items:center; gap:1.1rem; position:relative; z-index:1; }
.nav-phone{ display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; color:var(--text); font-size:0.94rem; }
.nav-phone i{ color:var(--blue-br); font-size:1.15rem; }
.nav-cta{ padding:0.48rem 1rem; min-height:37px; font-size:0.86rem; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:6px; width:46px; height:46px; background:none; border:none; cursor:pointer; position:relative; z-index:1; }
.nav-toggle span{ width:26px; height:2px; margin-inline:auto; background:var(--text); border-radius:2px; transition:transform var(--tr), opacity var(--tr); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ===== Mobile menu ===== */
/* Merkscherm, geen kale sheet: de atelier-foto (honeycomb-LED + RS3, zelfde bestand
   als de portrait-hero) achter een zware scrim links — het menu ís de studio.
   isolation:isolate zoals bij .hero: de negatieve z-lagen schilderen dan bóven de
   eigen background i.p.v. eronder te verdwijnen (negative-z-trap). */
.m-menu{ position:fixed; inset:0; height:100dvh; z-index:900; background:var(--bg); isolation:isolate;
  display:grid; grid-template-rows:auto 1fr auto; padding:calc(var(--nav-h) + 1.5rem) var(--pad) 2.5rem; clip-path:inset(0 0 100% 0); }
.m-menu__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.m-menu__bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 50%; opacity:0; transition:opacity 0.5s var(--ease); }
.m-menu__bg img.is-loaded{ opacity:1; }
.m-menu::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(11,13,17,0.94) 0%, rgba(11,13,17,0.72) 55%, rgba(11,13,17,0.42) 100%),
    linear-gradient(0deg, rgba(11,13,17,0.9) 0%, rgba(11,13,17,0.25) 45%, transparent 60%),
    linear-gradient(180deg, rgba(11,13,17,0.72) 0%, transparent 32%); }
/* Open menu = eigen scherm: de blur-balk van de gescrollde navbar mag niet als
   vlakke strook over de foto liggen (logo en ✕ blijven gewoon zichtbaar). */
body.menu-open #site-navbar::before{ opacity:0; }
/* Woordmerk-kleuren zoals het logo: TB blauw, CARCLEANING wit; Buggenhout is
   locatie-suffix, geen deel van het merk — gedempt. .txt is één flex-item zodat
   de gap alleen tussen hex en tekst valt, niet tussen de woorden. */
.m-menu__top{ display:inline-flex; align-items:center; gap:0.55rem; font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); }
.m-menu__top .tb{ color:var(--blue-br); }
.m-menu__top .loc{ color:var(--muted); }
.m-menu__top .hex{ width:11px; height:12px; display:inline-block; background:var(--blue); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.m-menu__links{ display:flex; flex-direction:column; justify-content:center; gap:0.1rem; }
.m-menu__links a{ display:flex; align-items:baseline; gap:0.9rem; padding:0.65rem 0; border-bottom:1px solid var(--line); font-size:clamp(1.7rem,7vw,2.4rem); font-weight:600; color:var(--text); letter-spacing:-0.02em; }
.m-menu__links a .n{ font-size:0.85rem; font-weight:500; color:var(--dim); }
/* Waar-ben-ik: nummer in logo-blauw + blauwe hairline onder de actieve rij */
.m-menu__links a.is-active .n{ color:var(--blue-br); }
.m-menu__links a.is-active{ border-bottom-color:rgba(59,142,244,0.45); }
.m-menu__links a .lbl{ display:flex; flex-direction:column; }
.m-menu__links a .d{ font-size:0.82rem; font-weight:500; color:var(--dim); letter-spacing:0; line-height:1.3; }
.m-menu__foot{ display:flex; flex-direction:column; gap:1rem; }
.m-menu__foot .row{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.m-menu__foot .meta{ font-size:0.9rem; color:var(--dim); }
.m-menu__foot .meta a{ color:var(--muted); text-decoration:underline; }
body.menu-open{ overflow:hidden; }

/* ===== Hero (full-bleed) ===== */
/* 100svh, niet dvh: in-flow element, anders springt hij mee met de adresbalk (CLAUDE.md) */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; isolation:isolate; overflow:hidden; margin-top:calc(var(--nav-h) * -1); padding-top:var(--nav-h); }
.hero-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-bg picture{ display:contents; } /* art-direction-wrapper mag de 100%-sizing van de img niet breken */
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; will-change:transform; }
@media (orientation: portrait){
  /* Studiofoto: de wagen zit rechts in de 9:16-crop; op schermen smaller dan 9:16
     snijdt cover links+rechts — bias naar rechts zodat de muur eruit valt, niet de wagen. */
  .hero-bg img{ object-position:70% 50%; }
}
.hero-scrim{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,13,17,0.72) 0%, rgba(11,13,17,0.15) 26%, transparent 42%),
    linear-gradient(90deg, rgba(11,13,17,0.92) 0%, rgba(11,13,17,0.55) 42%, transparent 74%),
    linear-gradient(0deg, rgba(11,13,17,0.9) 0%, rgba(11,13,17,0.2) 40%, transparent 62%); }
.hero-inner{ width:min(var(--maxw), 100% - calc(var(--pad)*2)); margin-inline:auto; padding-block:clamp(2.75rem,6vw,5rem); }
.hero h1{ font-size:clamp(1.8rem, 1.2rem + 2.95vw, 4rem); line-height:1.02; max-width:19ch; }
.hero h1 .blue{ color:var(--blue-br); display:block; }  /* eigen regel zonder <br> (feedback_no-br-in-headings) */
.hero-lead{ margin-top:1.3rem; max-width:46ch; font-size:clamp(1.05rem,1rem + 0.35vw,1.24rem); color:#D8DCE3; }
.hero-cta{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.85rem 1.4rem; }
.hero-cta .phone{ color:#fff; }
.hero-meta{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,0.16); }
.hero-meta div{ display:flex; align-items:center; gap:0.55rem; font-size:0.9rem; color:#C7CCD4; }
.hero-meta i{ color:var(--blue-br); font-size:1.15rem; }
.split{ text-wrap:initial; }

/* ===== Voor & na ===== */
/* Bewijsfoto's integraal tonen: 3 gelijke tegels op natieve verhouding, nooit croppen.
   (Asymmetrische featured-variant van 07-10 teruggedraaid op Deniz' feedback:
   de crops sneden op desktop net de voor/na-inhoud weg.) */
.vn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.vn-pair{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:642/940; }
.vn-pair img{ width:100%; height:100%; object-fit:cover; display:block; }
.vn-pair::after{ content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--blue); box-shadow:0 0 0 1px rgba(0,0,0,0.35); }
.vn-pair .cap{ position:absolute; left:0.7rem; z-index:2; font-size:0.68rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; padding:0.24rem 0.6rem; border-radius:5px; }
.vn-pair .cap.voor{ top:0.7rem; background:rgba(0,0,0,0.72); color:#fff; }
.vn-pair .cap.na{ bottom:0.7rem; background:var(--blue-cta); color:#fff; }
.vn h3{ margin-top:0.9rem; font-size:1.1rem; }
.vn p{ font-size:0.92rem; color:var(--dim); margin-top:0.2rem; }

/* ===== Diensten ===== */
/* Editorial asymmetrisch: 01 Handwas groot links, 02-04 als compacte rijen rechts
   (de uniforme 4-koloms kaartenrij was de meest sjabloon-achtige sectie — audit 07-10). */
.diensten-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:1rem; }
.dienst{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; transition:border-color var(--tr), transform var(--tr); }
.dienst--feat{ grid-row:span 3; }
.dienst--feat .dienst-img{ aspect-ratio:auto; flex:1; min-height:0; }
.dienst--feat .dienst-b{ padding:1.4rem 1.5rem 1.6rem; }
.dienst--feat h3{ font-size:1.45rem; }
.dienst--row{ flex-direction:row; align-items:stretch; }
.dienst--row .dienst-img{ aspect-ratio:1/1; width:clamp(112px,13vw,170px); flex-shrink:0; }
.dienst--row .dienst-b{ align-self:center; padding:1.05rem 1.25rem; }
.dienst-img{ aspect-ratio:4/3; overflow:hidden; }
.dienst-img img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease); }
.dienst-b{ padding:1.25rem 1.35rem 1.5rem; }
.dienst-b .n{ font-size:0.8rem; font-weight:600; color:var(--blue-br); }
.dienst-b h3{ font-size:1.22rem; margin:0.35rem 0 0.5rem; }
.dienst-b p{ font-size:0.92rem; color:var(--muted); }
@media (hover:hover){ .dienst:hover{ border-color:var(--line-2); transform:translateY(-3px); } .dienst:hover .dienst-img img{ transform:scale(1.05); } }

/* ===== Werk gallery ===== */
.filters{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{ padding:0.45rem 1rem; border-radius:100px; border:1px solid var(--line-2); background:transparent; color:var(--muted); font-family:var(--font); font-weight:500; font-size:0.85rem; cursor:pointer; transition:color var(--tr), border-color var(--tr), background var(--tr); }
.chip.is-active{ color:var(--ink); background:var(--text); border-color:var(--text); }
.chip .ct{ margin-left:0.45rem; font-size:0.72rem; font-weight:600; color:var(--dim); }
.chip.is-active .ct{ color:inherit; opacity:0.65; }
@media (hover:hover){ .chip:hover:not(.is-active){ color:var(--text); border-color:var(--muted); } }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.55rem,1vw,0.85rem);
  overflow-anchor:none; /* scroll-anchoring mag zich niet vastklampen aan vliegende Flip-tegels */ }
.gallery.is-filtering{ overflow:clip; } /* tijdens het filteren: niets hangt over de secties eronder */
.shot{ position:relative; overflow:hidden; border-radius:var(--radius-sm); aspect-ratio:4/5; cursor:pointer; border:1px solid var(--line); background:#111; }
.shot img{ width:100%; height:100%; object-fit:cover; object-position:center 50%; transition:transform 0.6s var(--ease); }
.shot .cap{ position:absolute; left:0.7rem; bottom:0.65rem; z-index:2; color:#fff; font-weight:600; font-size:0.9rem; opacity:0; transform:translateY(8px); transition:opacity var(--tr), transform var(--tr); }
.shot .cap b{ display:block; font-size:0.66rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--blue-br); }
.shot::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,8,12,0.8), transparent 55%); opacity:0; transition:opacity var(--tr); }
.shot.is-hidden{ display:none; }
@media (hover:hover){ .shot:hover img{ transform:scale(1.05); } .shot:hover::after{ opacity:1; } .shot:hover .cap{ opacity:1; transform:none; } }
/* Featured tegel: de droomauto letterlijk groot ("van daily tot droomauto") */
.shot--feat{ grid-column:span 2; grid-row:span 2; }
/* CTA-tegel vult de laatste gridcel en maakt van de galerij een conversiemoment */
.shot--cta{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:0.5rem; padding:1.3rem; background:var(--card); }
.shot--cta::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='52' viewBox='0 0 90 52'%3E%3Cg fill='none' stroke='%233B8EF4' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M-30 0 L-15 -26 L15 -26 L30 0 L15 26 L-15 26 Z'/%3E%3Cpath d='M60 0 L75 -26 L105 -26 L120 0 L105 26 L75 26 Z'/%3E%3Cpath d='M-30 52 L-15 26 L15 26 L30 52 L15 78 L-15 78 Z'/%3E%3Cpath d='M60 52 L75 26 L105 26 L120 52 L105 78 L75 78 Z'/%3E%3Cpath d='M15 26 L30 0 L60 0 L75 26 L60 52 L30 52 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 52px;
  -webkit-mask-image:linear-gradient(200deg, rgba(0,0,0,0.9), transparent 72%);
  mask-image:linear-gradient(200deg, rgba(0,0,0,0.9), transparent 72%); }
.shot--cta .hex{ position:absolute; top:1.3rem; left:1.3rem; width:22px; height:24px; background:var(--blue); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.shot--cta strong{ color:var(--text); font-size:clamp(1.15rem,1rem + 0.7vw,1.5rem); font-weight:600; line-height:1.15; letter-spacing:-0.01em; }
.shot--cta .go{ display:inline-flex; align-items:center; gap:0.45rem; font-weight:600; font-size:0.92rem; color:var(--blue-br); }
.shot--cta .go i{ transition:transform var(--tr); }
.shot--cta::after{ display:none; } /* geen foto-hover-gradient over de tekst */
@media (hover:hover){ .shot--cta:hover{ border-color:var(--blue); } .shot--cta:hover .go i{ transform:translateX(4px); } }

/* ===== Over / Thibault ===== */
/* Grensbreker: de atelierfoto steekt over de sectiegrens de FAQ-sectie (bg-2) in.
   #over krijgt z-index zodat de foto BOVEN de achtergrond van de volgende sectie
   schildert, en padding-bottom:0 zodat de negatieve marge de grens echt kruist. */
#over{ z-index:1; padding-bottom:0; }
.over-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(1.5rem,4vw,4rem); align-items:start; }
.over-media{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); margin-bottom:calc(var(--sp) * -0.5); box-shadow:0 18px 50px rgba(0,0,0,0.45); }
.over-body{ padding-block:0.5rem calc(var(--sp) * 0.6); }
.over-media img{ width:100%; height:100%; object-fit:cover; }
.over-body h2{ font-size:clamp(1.7rem,1.25rem + 1.7vw,2.5rem); margin-bottom:1.2rem; }
.over-body p{ max-width:48ch; margin-bottom:1rem; color:var(--muted); }
.over-body p strong{ color:var(--text); font-weight:600; }
.over-sign{ margin-top:1.5rem; display:flex; align-items:center; gap:0.8rem; }
.over-sign .nm{ font-weight:600; color:var(--text); }
.over-sign .rl{ font-size:0.88rem; color:var(--dim); }
.over-sign .ln{ width:34px; height:1px; background:var(--line-2); }

/* ===== FAQ ===== */
/* Antwoorden staan altijd open: geen accordeon. Wie moet klikken om een antwoord
   te zien, scrollt door (Deniz 2026-07-09). */
.faq{ max-width:800px; }
.faq-item{ border-bottom:1px solid var(--line); padding-block:1.5rem; }
.faq-item:first-child{ padding-top:0; }
.faq-q{ font-size:clamp(1.15rem,1.05rem + 0.5vw,1.45rem); font-weight:600; color:var(--text); line-height:1.25; }
.faq-a p{ margin-top:0.6rem; color:var(--muted); max-width:70ch; }

/* ===== CTA (photo background) ===== */
.cta{ position:relative; overflow:hidden; isolation:isolate; }
.cta::before{ content:''; position:absolute; inset:0; z-index:-2; background:url(../assets/images/cta-bg-v2.webp) center/cover no-repeat; }
.cta::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(8,10,14,0.95) 0%, rgba(9,15,27,0.82) 44%, rgba(11,22,44,0.42) 100%),
    linear-gradient(0deg, rgba(8,10,14,0.55), transparent 55%); }
@media (max-width:640px){ .cta::before{ background-image:url(../assets/images/cta-bg-m-v2.webp); } }
.cta{ padding-block:calc(var(--sp) * 1.15); } /* net iets meer adem dan een gewone sectie */
.cta-grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; position:relative; z-index:1; }
/* TB-glans: lichtbaan die één keer over de CTA-foto veegt (tween in main.js) + logo-sparkles.
   Geparkeerd buiten beeld; zonder motion (reduced/geen GSAP) blijft alles onzichtbaar. */
.cta-shine{ position:absolute; top:-15%; bottom:-15%; left:0; width:28%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(220,232,245,0.10) 32%, rgba(220,232,245,0.26) 50%, rgba(220,232,245,0.10) 68%, transparent 100%);
  mix-blend-mode:screen; transform:translateX(-180%) skewX(-14deg); }
.cta-spark{ position:absolute; width:16px; height:16px; z-index:0; pointer-events:none; color:#EAF2FF; opacity:0; }
.cta-spark svg{ width:100%; height:100%; fill:currentColor; display:block; }
.cta-spark--sm{ width:10px; height:10px; color:var(--blue-br); }
.cta h2{ color:#fff; font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); max-width:16ch; }
.cta p{ color:#EAF2FF; margin-top:0.8rem; max-width:40ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:0.85rem 1.3rem; align-items:center; }
.cta .phone{ color:#fff; } .cta .phone i{ color:#fff; }

/* ===== Contact form (subpages) ===== */
/* Bel/WhatsApp direct onder de intro: op mobiel stond de eerste tapbare actie
   twee schermen diep (achter het hele formulier), terwijl de sub "Bel, stuur
   een bericht…" belooft. wa.me-link bestond nergens op de pagina (tel: alleen). */
.contact-actions{ margin-top:1.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.85rem; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.info-row{ display:flex; gap:1rem; padding:1.05rem 0; border-top:1px solid var(--line); }
.info-row:first-child{ border-top:0; }
.info-row i{ color:var(--blue-br); font-size:1.35rem; }
.info-row .k{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--dim); }
.info-row .v{ color:var(--text); font-weight:600; }
.form-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.25rem); }
.form-group{ margin-bottom:1.1rem; }
.form-group label{ display:block; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); margin-bottom:0.4rem; }
/* 1rem = 16px: onder de 16px zoomt iOS de hele pagina in zodra een veld focus krijgt */
.form-group input,.form-group textarea{ width:100%; padding:0.85rem 1rem; background:var(--bg); border:1.5px solid var(--line-2); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font); font-size:1rem; min-height:48px; transition:border-color var(--tr), box-shadow var(--tr); }
.form-group textarea{ min-height:150px; resize:vertical; }
.form-group input:focus,.form-group textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.form-status{ margin-top:1rem; padding:0.8rem 1rem; border-radius:var(--radius-sm); font-size:0.9rem; display:none; }
.form-status.is-show{ display:block; }
.form-status.success{ background:color-mix(in srgb,var(--blue) 14%,transparent); color:var(--blue-br); border:1px solid color-mix(in srgb,var(--blue) 35%,transparent); }
.form-status.error{ background:color-mix(in srgb,#E5484D 14%,transparent); color:#FF9B9E; border:1px solid color-mix(in srgb,#E5484D 40%,transparent); }
.recaptcha-disclaimer{ font-size:0.7rem; color:var(--dim); margin-top:0.9rem; }
.recaptcha-disclaimer a{ color:var(--dim); text-decoration:underline; }
.grecaptcha-badge{ visibility:hidden !important; }
.form-status.success{ text-align:center; }
.checkmark-svg{ width:44px; height:44px; display:block; margin:0 auto 0.5rem; }
.checkmark-circle{ stroke:var(--blue-br); stroke-width:2; fill:none; stroke-dasharray:166; stroke-dashoffset:166; animation:cp-check-stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards; }
.checkmark-check{ stroke:var(--blue-br); stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:48; stroke-dashoffset:48; animation:cp-check-stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.6s forwards; }
@keyframes cp-check-stroke{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .checkmark-circle,.checkmark-check{ animation:none; stroke-dashoffset:0; } }

/* ===== Footer ===== */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:clamp(3.25rem,6vw,5rem) 1.75rem; }
.footer-top{ display:grid; grid-template-columns:1.7fr 0.9fr 0.9fr 1.1fr; gap:clamp(2rem,4vw,3rem); align-items:start; }
.footer-brand img{ height:44px; width:auto; margin-bottom:1.15rem; }
.footer-brand p, .footer-big{ max-width:30ch; color:var(--muted); font-weight:400; font-size:1rem; line-height:1.55; }
.footer-brand .footer-big a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.footer-col h4{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.09em; color:var(--dim); margin-bottom:1.1rem; font-weight:600; }
.footer-col ul{ display:grid; gap:0.65rem; list-style:none; padding-inline-start:0; }
.footer-col a, .footer-col li{ color:var(--muted); font-size:0.95rem; }
@media (hover:hover){ .footer-col a:hover{ color:var(--blue-br); } }
.footer-social{ display:flex; gap:0.6rem; margin-top:1.4rem; }
.footer-social a{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--radius-sm); color:var(--text); font-size:1.15rem; transition:background var(--tr), border-color var(--tr), color var(--tr); }
@media (hover:hover){ .footer-social a:hover{ background:var(--blue-cta); border-color:var(--blue-cta); color:#fff; } }
.footer-bottom{ margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:0.8rem 1.5rem; justify-content:space-between; font-size:0.84rem; color:var(--dim); }
.footer-bottom .l{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.footer-bottom a{ color:var(--dim); }
.cookie-prefs-btn{ background:none; border:none; padding:0; font:inherit; color:var(--dim); cursor:pointer; }
@media (hover:hover){ .cookie-prefs-btn:hover{ color:var(--text); } }
@media (hover:hover){ .footer-bottom a:hover{ color:var(--muted); } }
.cp-credit{ display:inline-flex; align-items:center; gap:0.5rem; color:var(--dim); font-size:0.8rem; white-space:nowrap; }
.cp-credit img{ height:33px; width:auto; opacity:0.8; transition:opacity var(--tr); }
@media (hover:hover){ .cp-credit:hover img{ opacity:1; } }

/* ===== back-to-top / a11y ===== */
.back-to-top{ position:fixed; right:1.3rem; bottom:1.3rem; z-index:500; width:46px; height:46px; border-radius:50%; background:var(--blue-cta); color:#fff; border:none; cursor:pointer; display:grid; place-items:center; font-size:1.2rem; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity var(--tr), transform var(--tr), background var(--tr); }
.back-to-top.is-show{ opacity:1; transform:none; pointer-events:auto; }
@media (hover:hover){ .back-to-top:hover{ background:var(--blue-cta-h); } }
.skip-link{ position:fixed; top:0.75rem; left:0.75rem; z-index:2000; background:var(--blue-cta); color:#fff; padding:0.7rem 1.1rem; border-radius:var(--radius-sm); font-weight:600; transform:translateY(-160%); transition:transform var(--tr); }
.skip-link:focus{ transform:none; }
:focus-visible{ outline:2px solid var(--blue-br); outline-offset:3px; }

/* 44px tikdoelen op touch-toestellen */
@media (pointer:coarse){
  /* 44px tikdoel maakt de link zelf al hoog genoeg; de gap kwam er bovenop
     en gaf 55px per rij (Deniz: "heel veel ruimte onder elkaar"). */
  .footer-col ul{ gap:0; }
  .footer-col ul a,
  .footer-bottom a,
  .m-menu__foot .meta a{ min-height:44px; display:inline-flex; align-items:center; }
  .footer-social a{ width:44px; height:44px; }
  .chip{ min-height:44px; }
  .nav-phone,.phone{ min-height:44px; }
  .nav-logo{ min-height:44px; align-items:center; }
  .crumb a{ display:inline-block; padding-block:0.6rem; }
  .svc .link-arrow{ min-height:44px; align-items:center; }
}

/* Verhoogd contrast op verzoek van het besturingssysteem */
@media (prefers-contrast:more){
  :root{
    --muted: #C3C9D2;
    --dim:   #A7AEBA;
    --line:   rgba(255,255,255,0.24);
    --line-2: rgba(255,255,255,0.38);
  }
  .nav-link{ color:var(--text); }
  .btn--ghost{ border-color:var(--text); }
  .chip{ border-color:var(--muted); }
}

/* ===== Responsive ===== */
@media (max-width:960px){
  .diensten-grid{ grid-template-columns:1fr; }
  .dienst--feat{ grid-row:auto; }
  .dienst--feat .dienst-img{ aspect-ratio:16/9; flex:none; }
  .vn-grid{ grid-template-columns:1fr; max-width:520px; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .over-grid{ grid-template-columns:1fr; }
  .over-media{ max-width:440px; margin-bottom:0; box-shadow:none; }
  #over{ padding-bottom:var(--sp); }
  .over-body{ padding-block:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  :root{ --nav-h: 72px; }
  .nav-links,.nav-phone,.nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  /* Hero-meta: compacter + space-between zodat de drie punten tot ~320px op één
     lijn blijven ("Buggenhout" zakte op mobiel naar een tweede regel). */
  .hero-meta{ justify-content:space-between; gap:0.6rem; }
  .hero-meta div{ font-size:0.84rem; gap:0.45rem; }
  .hero-meta i{ font-size:1rem; }
  .diensten-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
}
@media (max-width:360px){
  .hero-meta div{ font-size:0.75rem; gap:0.3rem; }
  .hero-meta i{ font-size:0.85rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:0.001ms!important; transition-duration:0.001ms!important; }
  .m-menu{ clip-path:none; }
}
/* ===== Subpages ===== */
/* Subpagina-hero: reset de full-bleed hero-geometrie van .hero (100svh + flex-end + negatieve marge) */
.page-hero{ min-height:0; display:block; margin-top:0; overflow:visible;
  padding-top:clamp(2.25rem,5vw,3.75rem); padding-bottom:clamp(1.75rem,3.5vw,2.75rem); position:relative; }
/* Subtiel honingraat-motief rechts (echo van de hexagon-LED's in het atelier) */
.page-hero::before{ content:''; position:absolute; top:0; right:0; bottom:0; width:min(44vw,540px); z-index:-1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='52' viewBox='0 0 90 52'%3E%3Cg fill='none' stroke='%233B8EF4' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M-30 0 L-15 -26 L15 -26 L30 0 L15 26 L-15 26 Z'/%3E%3Cpath d='M60 0 L75 -26 L105 -26 L120 0 L105 26 L75 26 Z'/%3E%3Cpath d='M-30 52 L-15 26 L15 26 L30 52 L15 78 L-15 78 Z'/%3E%3Cpath d='M60 52 L75 26 L105 26 L120 52 L105 78 L75 78 Z'/%3E%3Cpath d='M15 26 L30 0 L60 0 L75 26 L60 52 L30 52 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 52px;
  -webkit-mask-image:linear-gradient(265deg, rgba(0,0,0,0.85), transparent 76%);
  mask-image:linear-gradient(265deg, rgba(0,0,0,0.85), transparent 76%); }
.crumb{ font-size:0.85rem; color:var(--dim); margin-bottom:0.9rem; }
.crumb a{ color:var(--muted); } @media (hover:hover){ .crumb a:hover{ color:var(--blue-br); } }
.page-hero h1{ font-size:clamp(2rem,1.5rem + 2vw,3rem); max-width:none; } /* .hero h1 capt op 19ch; hier gaf dat een weesregel ("…van je / wagen") */
.page-hero .h-sub{ margin-top:1rem; }
.svc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding-block:clamp(2rem,4vw,3.25rem); border-top:1px solid var(--line); }
.svc:nth-child(even) .svc-media{ order:2; }
.svc-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease); }
@media (hover:hover){ .svc:hover .svc-media img{ transform:scale(1.04); } }
/* Editorial hoofdstuk-nummer: outline in logo-blauw, maakt van de lijst vier hoofdstukken */
.svc-b .n{ display:block; font-size:clamp(2.6rem, 2.1rem + 2vw, 4rem); font-weight:700; line-height:1; letter-spacing:0.02em;
  color:transparent; -webkit-text-stroke:1.5px rgba(59,142,244,0.62); margin-bottom:0.55rem; }
.svc-b h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); margin:0.4rem 0 0.7rem; }
.svc-b p{ color:var(--muted); max-width:46ch; }
.svc .link-arrow{ margin-top:1.25rem; font-size:0.94rem; }
/* Landing-bevestiging bij anchor uit de footer (#handwas enz.): korte blauwe gloed die uitdooft */
@keyframes svc-target-flash{ from{ background:color-mix(in srgb, var(--blue) 10%, transparent); } to{ background:transparent; } }
.svc:target{ animation:svc-target-flash 2s var(--ease) 0.35s both; border-radius:var(--radius); }
.inc{ margin-top:1.15rem; display:grid; gap:0.5rem; }
.inc li{ display:flex; align-items:center; gap:0.6rem; color:var(--text); font-weight:500; }
.inc li i{ color:var(--blue-br); font-size:1.15rem; }
.prose{ max-width:760px; }
.prose h2{ font-size:1.3rem; color:var(--text); margin:2rem 0 0.75rem; }
.prose h2:first-of-type{ margin-top:0; }
.prose p, .prose li{ color:var(--muted); margin-bottom:0.75rem; }
.prose ul{ padding-left:1.2rem; list-style:disc; margin-bottom:1rem; }
.prose a{ color:var(--blue-br); text-decoration:underline; }
.err{ min-height:68svh; display:grid; place-items:center; text-align:center; }
.err h1{ font-size:clamp(2.2rem, 1.7rem + 2.2vw, 3.4rem); color:var(--blue-br); line-height:1; }
.err p{ margin:1rem 0 1.6rem; color:var(--muted); }
.err .btns{ display:flex; flex-wrap:wrap; gap:0.85rem; justify-content:center; }
@media (max-width:760px){ .svc{ grid-template-columns:1fr; } .svc:nth-child(even) .svc-media{ order:0; } }

/* ScrollTrigger zet tijdens het meten scroll-behavior:auto inline op <html> en schrijft
   daarna de BEREKENDE waarde terug als inline stijl. Een `@media (reduce){ html{auto} }`
   wordt daardoor permanent overschreven door een inline `smooth`. Vandaar de omgekeerde
   query: bij reduced-motion wordt de waarde nooit smooth, dus schrijft ScrollTrigger
   `auto` terug. */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }