/* ==========================================================================
   MAD Industriële Reiniging — premium laag
   Wordt ná de inline paginastijl geladen en overschrijft alleen wat nodig is.
   Kleuren uitsluitend uit het merktokensysteem: --accent, --ink, --bg,
   --surface plus de toegestane afgeleiden (#ff7a26 en rgba-varianten).
   ========================================================================== */

:root{
  --accent-licht:#ff7a26;                 /* enige toegestane accentstap */
  --glow:rgba(255,95,0,.25);
  --glow-sterk:rgba(255,95,0,.4);
  --accent-rand:rgba(255,95,0,.4);
  --accent-rand-zacht:rgba(255,95,0,.6);
  --rand-zacht:rgba(26,26,26,.08);
  --schaduw-diep:0 12px 40px rgba(26,26,26,.08);
  --wit-zacht:rgba(250,250,250,.7);
  --wit-lijn:rgba(250,250,250,.14);
  --uit:cubic-bezier(.16,1,.3,1);         /* ease-out-expo gevoel */
  --sectie:clamp(4rem,10vw,8rem);
}

/* ---- Typografie & ritme ---------------------------------------------- */
body{line-height:1.65}
h1,h2{line-height:1.05}
.method h3,.step h3,.quote b,.cert h3{line-height:1.2}
.lead,.section-head p,.step p,.quote .q{line-height:1.65}
.section,.sector-sec{padding:var(--sectie) 0}

/* Focus overal zichtbaar, in het merkaccent. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- Knoppen ---------------------------------------------------------- */
.btn{transition:background 300ms ease,color 300ms ease,border-color 300ms ease,
     box-shadow 300ms ease,transform 300ms ease}

.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-licht));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 20px var(--glow);
}
.btn-primary:hover,
.cta .btn-primary:hover,
.sticky-cta:hover{
  background:linear-gradient(135deg,var(--accent-licht),var(--accent));
  border-color:transparent;color:#fff;
  box-shadow:0 8px 32px var(--glow-sterk);
  transform:translateY(-2px);
}
.btn-primary:active,.cta .btn-primary:active{
  transform:translateY(0);
  box-shadow:0 4px 20px var(--glow);
}
.sticky-cta{box-shadow:0 8px 24px rgba(26,26,26,.18),0 4px 20px var(--glow)}

/* Secundair: outline in --ink, op hover naar het accent. */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{
  background:transparent;
  border-color:var(--accent-rand-zacht);
  color:var(--accent);
}
.cta .btn-ghost{color:#fff;border-color:var(--wit-zacht)}
.cta .btn-ghost:hover{
  background:transparent;
  border-color:var(--accent-rand-zacht);
  color:var(--accent);
}

/* ---- Filmische hero ---------------------------------------------------- */
/* De hero is één donker blok. De video staat als band over de volle hoogte
   rechts en lost naar links op in de achtergrond: beeldvullend van gevoel,
   zonder de bron (480x848) 3x te moeten opschalen.
   Positionering: .wrap en .hero-media staan bewust op static, zodat .photo
   zich tegen .hero afzet en dus buiten de container mag bloeden. */
.hero{background:var(--ink);border-bottom-color:var(--wit-lijn)}
.hero .wrap{position:static;grid-template-columns:1fr;align-items:center;
  gap:clamp(24px,3vw,44px);
  align-content:center;min-height:min(80vh,780px);
  padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(48px,6vw,84px)}
.hero .wrap>div:first-child{position:relative;z-index:2;max-width:min(100%,940px)}
/* transform op .hero-media zou .photo eraan vastzetten, dus de reveal hier uit */
.hero .hero-media{position:static;min-height:0;align-self:auto;
  animation:none;opacity:1;transform:none}

.hero::before{z-index:1;opacity:1;
  background-image:linear-gradient(rgba(250,250,250,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(250,250,250,.05) 1px,transparent 1px)}

.hero .photo{position:absolute;top:0;bottom:0;right:0;left:auto;z-index:0;
  width:min(52%,720px);padding:0;border:0;background:var(--ink);
  display:block;overflow:hidden;isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.85) 55%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.85) 55%,#000 100%)}
.hero .photo video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%}

/* Overlay uit de briefing (par. 5e): donker linksboven waar de kop staat,
   oplopend naar een warme zweem rechtsonder waar het beeld doorkomt. */
.hero .photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg,
    rgba(26,26,26,.88) 0%,
    rgba(26,26,26,.55) 55%,
    rgba(255,95,0,.12) 100%);
}

/* Videobediening rechtsboven: rechtsonder botste het optisch met de zwevende
   offerteknop en met de specificatiestrip. */
.hero .photo .tag,.hero .photo .video-knop{z-index:2}
.hero .photo .tag{position:absolute;top:26px;left:auto;bottom:auto;right:74px;
  background:rgba(26,26,26,.65);backdrop-filter:blur(6px)}
.hero .photo .video-knop{top:24px;bottom:auto;right:24px}

/* Tekst op donker. */
.hero h1{color:#fafafa;font-size:clamp(38px,5.4vw,76px);max-width:min(100%,880px)}
.hero .eyebrow{color:var(--wit-zacht)}
.hero .lead{color:rgba(250,250,250,.78)}
.hero .hero-note{color:rgba(250,250,250,.5)}
.hero .btn-ghost{color:#fff;border-color:var(--wit-zacht)}
.hero .btn-ghost:hover{background:transparent;
  border-color:var(--accent-rand-zacht);color:var(--accent)}

/* Specificaties als strip onder de knoppen in plaats van als zwevende kaart. */
.hero .lead{margin:22px 0 32px;max-width:56ch}
.hero .spec{position:relative;z-index:2;transform:none;
  display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
  justify-content:start;gap:6px clamp(28px,4vw,64px);
  background:transparent;border:0;border-top:1px solid var(--wit-lijn);
  padding:20px 0 0;margin-top:clamp(24px,3vw,36px)}
.hero .spec dt{color:rgba(250,250,250,.5)}
.hero .spec dd{color:#fafafa}
.hero .spec dd+dt{margin-top:0}

/* Kop die woord voor woord van achter een masker omhoog schuift. */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .w>span{display:inline-block;transform:translateY(108%);opacity:0}
.hero.is-in h1 .w>span{transform:none;opacity:1;
  transition:transform 850ms var(--uit),opacity 550ms ease}
/* Zonder JS wordt er niet gesplitst en staat de kop gewoon stil in beeld. */
.hero h1.reveal{opacity:1;transform:none;animation:none}

/* De overige regels iets later, zodat de kop eerst staat. */
.hero .eyebrow.reveal{animation-delay:.08s}
.hero .lead.reveal{animation-delay:.62s}
.hero .hero-actions.reveal{animation-delay:.76s}
.hero .hero-note.reveal{animation-delay:.9s}

@media(max-width:900px){
  .hero .wrap{min-height:0}
  .hero .photo{width:100%;-webkit-mask-image:none;mask-image:none}
  .hero .photo::after{background:linear-gradient(180deg,
    rgba(26,26,26,.9) 0%,rgba(26,26,26,.82) 60%,rgba(255,95,0,.12) 100%)}
  .hero .photo .tag{display:none}          /* botst met de strip; video speelt hier niet */
  .hero .spec{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr;gap:2px}
  .hero .spec dd+dt{margin-top:14px}
}

@media(prefers-reduced-motion:reduce){
  .hero h1 .w>span{transform:none;opacity:1}
}


/* ---- Cijfersectie (donker) -------------------------------------------- */
.statband{
  background:radial-gradient(ellipse at top left,
    rgba(255,95,0,.06),transparent 50%),var(--ink);
  border-bottom-color:var(--wit-lijn);
}
.statband li+li{border-left-color:var(--wit-lijn)}
.statband b,.statband b em{color:var(--accent);font-variant-numeric:tabular-nums}
.statband span{color:var(--wit-zacht)}
@media(max-width:760px){
  .statband li:nth-child(n+3){border-top-color:var(--wit-lijn)}
}

/* ---- Kaart-hovers ------------------------------------------------------ */
/* De rasters gebruiken 1px gaps als scheidingslijn; een echte border zou het
   raster verspringen. Vandaar de rand als inset-schaduw. */
.method>li,.quote,.cert,.sector,.case,.step{
  position:relative;
  transition:box-shadow 300ms ease,border-color 300ms ease,transform 300ms ease;
}
.method>li:hover,.quote:hover,.cert:hover,.sector:hover,.case:hover{
  z-index:1;
  box-shadow:inset 0 0 0 1px var(--accent-rand),var(--schaduw-diep);
}
.garantie{transition:box-shadow 300ms ease}
.garantie:hover{box-shadow:var(--schaduw-diep)}

/* ---- Scroll-onthulling ------------------------------------------------- */
/* .mad-fx wordt door JS gezet; zonder JS blijft alles gewoon zichtbaar. */
.mad-fx{opacity:0;transform:translateY(20px);will-change:opacity,transform}
.mad-fx.is-in{
  opacity:1;transform:none;
  transition:opacity 600ms var(--uit),transform 600ms var(--uit);
}

/* ---- Voor/na sleep-slider ---------------------------------------------- */
.ba.ba--slider{display:block;background:var(--surface);border-color:var(--rand-zacht)}
.ba.ba--slider .ba-note{border-top:1px solid var(--rand-zacht)}

.ba-slider{
  --x:50%;
  position:relative;overflow:hidden;aspect-ratio:4/3;
  background:var(--ink);cursor:ew-resize;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ba-slider img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;-webkit-user-drag:none;
}
.ba-laag-voor{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}

.ba-label{
  position:absolute;bottom:16px;z-index:3;pointer-events:none;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;padding:6px 10px;
  background:rgba(26,26,26,.72);
}
.ba-label-voor{left:16px}
/* Donkere tekst op oranje: 7:1 contrast in plaats van 2,9:1 bij wit. */
.ba-label-na{right:16px;background:var(--accent);color:var(--ink)}

.ba-greep{
  position:absolute;top:0;bottom:0;left:var(--x);z-index:4;
  width:2px;margin-left:-1px;background:#fff;cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(26,26,26,.2),0 2px 12px rgba(26,26,26,.35);
}
.ba-knop{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-licht));
  color:#fff;box-shadow:0 4px 20px var(--glow);
  transition:box-shadow 300ms ease,transform 300ms ease;
}
.ba-knop svg{width:9px;height:12px;flex:none}
.ba-slider:hover .ba-knop,
.ba-greep:focus-visible .ba-knop{
  box-shadow:0 8px 32px var(--glow-sterk);
  transform:translate(-50%,-50%) scale(1.06);
}
.ba-greep:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:560px){
  .ba-slider{aspect-ratio:3/2}
  .ba-label{bottom:12px;font-size:10px}
  .ba-label-voor{left:12px}.ba-label-na{right:12px}
}

/* ---- Bewegingsvoorkeur respecteren ------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .mad-fx,.mad-fx.is-in{opacity:1;transform:none}
  .btn-primary:hover,.cta .btn-primary:hover,.sticky-cta:hover{transform:none}
}

/* ==========================================================================
   MOBIEL
   Deze laag staat bewust achteraan: de basisstijl staat inline en identiek
   gedupliceerd in alle 14 pagina's, dus alles wat hier staat overschrijft die
   14 kopieën in één keer. Nieuwe mobiele fixes horen hier, niet in de HTML.
   ========================================================================== */

:root{
  --balk-hoogte:66px;                      /* JS meet de echte hoogte van .sticky-cta */
  --balk-onder:calc(20px + env(safe-area-inset-bottom,0px));
  --balk-tussen:12px;
}

/* ---- Header: telefoonnummer eruit ------------------------------------- */
/* Het nummer stond als kale tekst naast de oranje knop. Het element blijft in
   de DOM staan omdat mad-premium.js er het nummer uit leest voor de belknop in
   het mobiele menu; zo staat het telefoonnummer op precies één plek in de HTML. */
.nav-cta .tel{display:none}

/* De bovenbalk verliest onder 700px zijn linkerhelft; met space-between plakt
   het e-mailadres dan alleen tegen de rechterrand. */
@media(max-width:700px){.topbar .wrap{justify-content:center}}

/* ---- Mobiel menu ------------------------------------------------------- */
/* .menu-cta wordt door de JS toegevoegd. Op desktop staat het menu op flex-row,
   daar horen de knoppen niet tussen. */
.menu-cta{display:none}

@media(max-width:960px){
  /* Vast op 76px gaf een kier zodra de logohoogte of de balk veranderde. */
  .nav.open .menu{
    top:100%;
    max-height:calc(100dvh - 100%);
    overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:24px;
  }

  .nav.open .menu-cta{display:block;border-bottom:0}

  .nav.open .menu .menu-cta .menu-tel{
    display:flex;align-items:center;gap:12px;
    padding:16px 0;border-bottom:1px solid var(--line);
    font-family:var(--font-mono);font-weight:500;font-size:16px;
    letter-spacing:.02em;text-decoration:none;color:var(--ink);
  }
  .nav.open .menu .menu-cta .menu-tel svg{
    width:18px;height:18px;flex:none;color:var(--accent)
  }
  .nav.open .menu .menu-cta .menu-tel:hover{color:var(--accent)}

  .nav.open .menu .menu-cta .btn{
    display:flex;justify-content:center;width:100%;
    margin-top:16px;padding:18px 24px;font-size:15px;
    border-bottom:2px solid transparent;
  }
}

/* ---- Vaste elementen onderin ------------------------------------------- */
/* De cookiebalk stond op een geraden bottom:76px en schoof daardoor over de
   zwevende offerteknop heen. Die hoogte komt nu uit --balk-hoogte, en beide
   houden de iOS-home-indicator vrij. */
.sticky-cta{bottom:var(--balk-onder)}

/* Met het uitgeklapte menu staat de offerteknop al onderin dat menu. */
@media(max-width:960px){
  body:has(.nav.open) .sticky-cta{opacity:0;pointer-events:none}
}

@media(max-width:560px){
  #consent{
    bottom:calc(var(--balk-onder) + var(--balk-hoogte) + var(--balk-tussen));
  }
}

/* Op offerte.html en bedankt.html staat geen zwevende knop: geen loze ruimte
   onder de cookiebalk en geen loze ruimte onder de footer. */
body:not(:has(.sticky-cta)) #consent{bottom:var(--balk-onder)}
body:not(:has(.sticky-cta)) footer{padding-bottom:56px}

/* ---- Hero -------------------------------------------------------------- */
@media(max-width:900px){
  /* Op desktop staat de tekst op massief --ink en de foto alleen rechts. Op
     mobiel ligt de foto eronder en liep de overlay onderin terug naar 12%
     oranje: de specificatiestrip en de notitie vielen daar op licht zand. */
  .hero .photo::after{background:linear-gradient(180deg,
    rgba(26,26,26,.92) 0%,rgba(26,26,26,.86) 55%,rgba(26,26,26,.8) 100%),
    linear-gradient(180deg,transparent 55%,rgba(255,95,0,.1) 100%)}
  .hero .hero-note,.hero .spec dt{color:rgba(250,250,250,.72)}
  .hero .eyebrow{color:rgba(250,250,250,.8)}
  .hero .lead{color:rgba(250,250,250,.88)}

  /* Eén kolom maakte van drie dt/dd-paren een lijst van zes regels onder de
     knoppen. Als label/waarde leest het als een compacte strip. */
  .hero .spec{
    grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px 18px;align-items:baseline;
  }
  .hero .spec dd+dt{margin-top:0}
}

/* ---- Rasters die niet meevielen naar één kolom ------------------------- */
/* Een tweekolomsraster dat naar `1fr` valt houdt `min-width:auto` op zijn
   kinderen: de kolom wordt dan zo breed als de breedste onbreekbare inhoud.
   Daardoor duwde de horizontaal scrollende .subnav de hele methodepagina
   483px breed op een scherm van 360px. `min-width:0` laat de kolom krimpen en
   het scrollen weer bij de scrollcontainer zelf liggen. */
.page-head .wrap>*,.sector-grid>*,.trust>*,.story>*,.cta .wrap>*,
.form-grid>*,.thanks .wrap>*,.legal-grid>*,.legal-body>*,
.hero .wrap>*{min-width:0}

/* Zonder min-width:0 kan een lang woord een gridkolom breder duwen dan de rij. */
.method>li,.value,.quote,.fact,.cert,.case{min-width:0}

@media(max-width:560px){
  /* Wordt normaal een sleep-slider (.ba--slider, display:block). Ontbreekt een
     van de twee foto's, dan bleven er twee plaatjes van ~165px naast elkaar. */
  .ba:not(.ba--slider){grid-template-columns:1fr}
}

@media(max-width:480px){
  .facts{grid-template-columns:1fr}
  .case dl{grid-template-columns:1fr}
  .cert{grid-template-columns:56px 1fr;gap:14px;padding:20px}
  .cert .logo-ph{width:56px;height:56px}

  /* Vier vervuilingssoorten naast elkaar brak elke titel over twee regels. */
  .strip ul{grid-template-columns:1fr}
  .strip li+li{border-left:0;border-top:1px solid var(--line)}
  .strip a{padding:16px 20px}

  /* "1 werkdag" en "300 bar" pasten op 26px niet in een halve kolom. */
  .statband li{padding:22px 18px}
  .statband b{font-size:22px}
  .statband span{font-size:10px;letter-spacing:.08em}
}

/* ---- Tabellen (privacy.html) ------------------------------------------- */
/* Drie- en vierkolomstabellen persten hun tekst tot enkele tekens per regel.
   De wrapper in privacy.html scrollt nu horizontaal; welke tabel dat nodig
   heeft volgt hieronder uit het aantal koppen. */
.tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px}
.tabel-scroll table{margin-top:0}

@media(max-width:640px){
  /* break-word en niet anywhere: alleen een woord dat écht niet past breekt,
     "Functioneel" werd anders midden in het woord afgekapt. */
  .tabel-scroll th,.tabel-scroll td{overflow-wrap:break-word}
  /* Tweekolomstabellen passen op een telefoon; drie en vier niet. Die krijgen
     een minimumbreedte en schuiven binnen hun eigen container. */
  .tabel-scroll table:has(th:nth-child(3)){min-width:440px}
  .tabel-scroll table:has(th:nth-child(4)){min-width:560px}
}

/* ---- Subnavigatie ------------------------------------------------------ */
/* flex:1 vocht met white-space:nowrap: de items rekten op in plaats van te
   scrollen. Nu schuiven ze, met het laatste item zichtbaar half afgesneden. */
@media(max-width:900px){
  .subnav{scroll-snap-type:x proximity}
  .subnav li{flex:0 0 auto}
  .subnav a{scroll-snap-align:start}
}

/* ---- Koppen ------------------------------------------------------------ */
@media(max-width:480px){
  .hero h1{font-size:clamp(30px,8.6vw,38px)}
  /* "PRIVACYVERKLARING" past als één woord niet op 40px in 280px. De
     artikelpagina's houden hun eigen, specifiekere .page-head h1. */
  h1{font-size:clamp(26px,7.4vw,36px)}
  h2{font-size:clamp(24px,6.4vw,30px)}
  /* `anywhere` en niet `break-word`: alleen `anywhere` verlaagt óók de
     min-content-breedte, en dus de minimumbreedte van de gridkolom. */
  h1,h2,h3{overflow-wrap:anywhere}

  /* Het streepje van 28px plus .14em letterafstand liet deze regels ongelukkig
     breken op smalle schermen. */
  .eyebrow,.section-head .kicker,.sector-sec .kicker{letter-spacing:.1em;gap:10px}
  .eyebrow::before,.section-head .kicker::before,.sector-sec .kicker::before{width:18px}
}

/* ---- Raakvlakken ------------------------------------------------------- */
/* Footerlinks stonden op 15px met 10px tussenruimte: ruim onder de 44px die een
   duim nodig heeft. Het optische ritme blijft gelijk, de raakvlakken groeien. */
@media(max-width:700px){
  .foot ul{gap:0}
  .foot ul a{display:inline-block;padding:11px 0}
  .legal{gap:4px 16px}
  .legal a{display:inline-block;padding:6px 0}
}