/* Inenova — wit thema. Oude tokens en klassen blijven bestaan zodat
   work/services/about/contact.html blijven werken tot ze omgezet zijn. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #FFFFFF;
  --soft: #F7F7F4;
  --surface: #F7F7F4;
  --ink: #0B0B0C;
  --body: #4A4C50;
  --muted: #5A5C60;
  --faint: #86888C;
  --line: #E8E7E2;
  --line-strong: #D9D7D0;
  --dark: #0A0A0A;
  --dark-surface: #171717;
  --dark-line: #2A2A2A;
  --dark-body: #B5B6B8;
  --accent: #E08A2E;
  --accent-ink: #A0590C;
  --accent-soft: #FDF4E9;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; text-wrap: pretty; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.page { width: 100%; max-width: 1280px; margin: 0 auto; }
.sec { padding: clamp(64px, 7vw, 112px) var(--gutter); }
.sec-soft { background: var(--soft); }
.lead { font-size: 18px; line-height: 1.62; color: var(--body); }

/* kop van een sectie */
.sec-head { max-width: 760px; margin: 0 auto clamp(36px, 4vw, 60px); text-align: center; }
.sec-head h2 { font-size: clamp(30px, 4vw, 52px); }
.sec-head p { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--body); }

.lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.lbl-a { color: var(--accent-ink); }
.lbl-d { color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 11px; border: 1px solid var(--line-strong); border-radius: 99px;
  background: var(--bg); font-size: 13px; font-weight: 600; color: var(--muted);
}
.pill b { color: var(--ink); font-weight: 700; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.ph {
  font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--accent-ink);
  border: 1px dashed #D9A15C; border-radius: 4px; padding: 2px 8px; background: var(--accent-soft);
}

.card, .card-plain { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.card-dark { background: var(--dark-surface); border: 1px solid var(--dark-line); border-radius: var(--radius); }

.chip { font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 99px; padding: 5px 11px; }
.chip-d { color: var(--dark-body); border-color: var(--dark-line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border: 0; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #26262A; }
.btn-accent { background: var(--accent); color: #1A1307; }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: var(--bg); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-d { border: 1px solid rgba(255,255,255,.38); color: #fff; }
.btn-ghost-d:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }

.tick { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.5; color: var(--body); }
.tick::before {
  content: ""; flex: 0 0 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0590C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 10px no-repeat;
}

/* sticky navigatie */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 14px var(--gutter); }
.brand { display: flex; align-items: center; gap: 1px; font-weight: 800; font-size: 21px; letter-spacing: -.03em; color: var(--ink); }
.brand i { display: inline-flex; width: 15px; height: 15px; margin: 0 1px; border-radius: 50%; border: 3.5px solid var(--accent); box-shadow: 0 0 10px rgba(224,138,46,.5); font-style: normal; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
/* :not(.btn) is nodig: zonder dat wint deze regel van .btn-primary en krijgt
   de knop in de kop grijze tekst op bijna zwart, ruim onder de leesnorm. */
.nav-links a:not(.btn) { color: var(--muted); }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"]:not(.btn) { color: var(--ink); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 99px; background: transparent; cursor: pointer; padding: 0; }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-panel { display: none; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(48px, 7vw, 104px) var(--gutter) clamp(40px, 5.6vw, 84px); }
/* Tekstblok 30px hoger dan het midden; onderlinge afstanden blijven gelijk. */
.hero > div:first-child { position: relative; top: -30px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 68px); margin-top: 22px; }
.hero .sub { margin-top: clamp(22px, 2.4vw, 32px); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--body); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 3vw, 40px); }
.hero-tools { margin-top: clamp(20px, 1.8vw, 26px); }
.ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.ticks .tick { font-size: 14px; color: var(--muted); }

.frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: 0 24px 60px -32px rgba(0,0,0,.35); }
.frame-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--soft); border-bottom: 1px solid var(--line); }
.frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.frame-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--faint); }
.frame img { width: 100%; height: clamp(230px, 28vw, 330px); object-fit: cover; }
.frame-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }

/* logo-bol in de hero. Zonder JS is dit een raster; cloud.js zet de klasse
   is-cloud erop en rekent per frame de posities uit. */
.cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cloud-item { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.cloud-item img { width: 26px; height: 26px; }

/* isolation maakt van de bol een eigen stapelcontext. cloud.js deelt de
   iconen 10 tot 210 uit om ze op diepte te sorteren, en dat zijn getallen
   boven de 40 van de kop. Zonder deze regel schuiven de logos bij het
   scrollen over de kop en over het mobiele menu heen. Binnen de bol blijft
   de onderlinge volgorde precies hetzelfde. */
.cloud.is-cloud {
  --cloud-depth: 1.9;
  position: relative; isolation: isolate; display: block; height: clamp(300px, 34vw, 420px);
  margin: 0;
}
.cloud.is-cloud .cloud-item {
  position: absolute; top: 50%; left: 50%; width: 56px; height: 56px;
  margin: -28px 0 0 -28px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.35);
  will-change: transform, opacity;
}
.cloud.is-cloud .cloud-item img { width: 28px; height: 28px; }

/* lijnen van elk logo naar het bedrijf. z-index 1 houdt ze onder elk icoon,
   dus een lijn loopt altijd achter een logo langs en nooit eroverheen. */
.cloud-links { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.cloud-links line { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }

/* het bedrijf in het midden van de bol, draait niet mee */
.cloud:not(.is-cloud) .cloud-core { display: none; }
.cloud.is-cloud .cloud-core {
  position: absolute; top: 50%; left: 50%; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; margin: -37px 0 0 -37px;
  background: var(--accent); color: #fff; border-radius: 20px;
  box-shadow: 0 14px 34px -14px rgba(224,138,46,.75);
}
.cloud.is-cloud .cloud-core svg { width: 44px; height: 44px; }

@media (max-width: 1080px) {
  .cloud.is-cloud .cloud-item { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .cloud.is-cloud .cloud-item img { width: 24px; height: 24px; }
  .cloud.is-cloud .cloud-core { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 18px; }
  .cloud.is-cloud .cloud-core svg { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
  .cloud.is-cloud { height: clamp(260px, 72vw, 320px); }
  .cloud.is-cloud .cloud-item { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 11px; }
  .cloud.is-cloud .cloud-item img { width: 22px; height: 22px; }
  .cloud.is-cloud .cloud-core { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 16px; }
  .cloud.is-cloud .cloud-core svg { width: 38px; height: 38px; }
  .cloud-item { width: 52px; height: 52px; }
  .cloud-item img { width: 24px; height: 24px; }
}

.rail-note { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--faint); text-align: center; }


/* De zes lekken. Elk punt is een eigen kaart met een genummerde schijf die
   half over de bovenrand valt, zodat de kaarten ook zonder kleur uit elkaar
   te houden zijn. Was verdwenen bij een eerdere vervanging, nu terug. */
.leak-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px;
  margin: 0; padding: 0; list-style: none; counter-reset: leaks;
}
.leak-grid li {
  position: relative; counter-increment: leaks;
  padding: 34px clamp(22px, 2.2vw, 28px) clamp(24px, 2.4vw, 30px);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .15s ease, transform .15s ease;
}
.leak-grid li:hover { border-color: var(--ink); transform: translateY(-2px); }

/* Het nummer zit in de o uit het logo: een ring in de accentkleur met
   dezelfde gloed als .brand i, niet een gevulde stip. Hij ligt op de
   bovenrand van de kaart, dat is meteen de scheiding tussen de kaarten. */
.leak-grid li::before {
  content: counter(leaks, decimal-leading-zero);
  position: absolute; top: -20px; left: clamp(20px, 2.2vw, 26px);
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 3.5px solid var(--accent); background: var(--bg);
  box-shadow: 0 0 10px rgba(224,138,46,.5);
  color: var(--accent-ink); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.leak-grid h3 { font-size: 20px; }
.leak-grid p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--body); }

.leak-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; margin-top: 36px; text-align: center;
}
.leak-cta-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.leak-cta p { font-size: 17px; line-height: 1.55; color: var(--body); max-width: 46ch; }

/* tools-strip */
.strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 36px; padding: 24px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.strip span { font-size: 15px; font-weight: 600; color: #8A8C90; letter-spacing: -.01em; }
.strip .lbl { width: 100%; text-align: center; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bento article { display: flex; flex-direction: column; gap: 14px; padding: 30px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease, transform .15s ease; }
.bento article:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.bento h3 { font-size: 22px; }
.bento p { font-size: 15px; line-height: 1.6; color: var(--body); }
/* Beeld bovenaan de tegel. Een tekening, geen schermafbeelding van een echte
   klant: het laat zien waar de dienst over gaat zonder iets te suggereren
   wat er niet is. Kleuren komen uit dezelfde tokens als de rest. */
.b-shot { margin: 0; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.b-shot svg { display: block; width: 100%; height: auto; }
.b-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.bento .b-visual { margin-top: auto; }
/* Chips in de tegels altijd op een regel. */
.bento .b-visual { flex-wrap: nowrap; gap: 6px; container-type: inline-size; }
/* Chips krimpen mee met de tegel, zodat ze op elke breedte op een regel passen. */
.bento .b-visual .chip { white-space: nowrap; font-size: min(12px, 4.4cqi); padding: .42em .8em; }
/* De knop staat onderaan de tegel en over de volle breedte: daar zoekt een
   bezoeker hem, en als vlak is hij te zien zonder de tekst te lezen. */
.b-cta { width: 100%; height: 46px; font-size: 15px; }
.b-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }

/* cases */
.case { display: grid; grid-template-columns: 5fr 7fr; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.case > img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.case-body { padding: clamp(24px, 2.4vw, 36px); }
.case-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.case-cols p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--body); }
.case-cta { margin-top: 24px; height: 46px; font-size: 15px; }

/* donkere band */
.band { background: var(--dark); color: #fff; border-radius: var(--radius); padding: clamp(30px, 4vw, 48px); }
.band h2, .band h3 { color: #fff; }
.band p { color: var(--dark-body); }

/* rekenmachine */
.calc { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.calc-in { padding: clamp(26px, 3vw, 40px); }
.calc-out { padding: clamp(26px, 3vw, 40px); background: var(--dark); color: #fff; }
.field { margin-bottom: 26px; }
.field header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.field b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--line-strong); border-radius: 99px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer; }
.calc-big { font-size: clamp(38px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; color: var(--accent); line-height: 1; }

/* stappen */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.steps > div { padding-top: 20px; border-top: 2px solid var(--line); }
.steps > div:first-child { border-top-color: var(--ink); }
.steps h3 { margin-top: 12px; font-size: 20px; }
.steps p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--body); }

/* cijfers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats > div { padding: 30px 26px; background: var(--bg); }
.stats b { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.stats span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--body); }

/* quotes */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quote { padding: 28px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.quote p { font-size: 17px; line-height: 1.5; }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }


/* Mobiel: titel bovenaan, bol groot en half uit beeld rechts, beschrijving
   in de strook links ernaast. display: contents lost de tekstwikkel op zodat
   titel, bol en beschrijving broers worden en met order te ordenen zijn. */
@media (max-width: 720px) {
  /* stretch is nodig: .hero staat op align-items: center, en dan sizet een
     flex-item naar zijn inhoud, waardoor een breedte in procenten nul wordt */
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0;
          padding-top: 18px; padding-bottom: 30px; }
  .hero > div:first-child { display: contents; }
  .hero h1 { order: 1; margin-top: 0; position: relative; z-index: 3; }
  .hero .rails { order: 2; }
  .hero .sub { order: 3; }
  .hero .hero-cta { order: 4; }
  .hero .ticks { order: 6; }

  /* tot de rechterrand doorlopen en daar afkappen, de pagina mag niet schuiven */
  .hero .rails { margin: -22px calc(var(--gutter) * -1) 0 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 99%), linear-gradient(180deg, #000 76%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 80%, transparent 99%), linear-gradient(180deg, #000 76%, transparent 100%);
    mask-composite: intersect; }
  /* Vlakker perspectief: grootste en kleinste tegel schelen nu 1,6 keer in
     plaats van 3,2. Van een halve bol zie je de vorm niet, en dan leest sterk
     perspectief als losse tegels in willekeurige maten. */
  .cloud.is-cloud { --cloud-depth: 4.2; width: 151%; height: clamp(280px, 78vw, 320px); transform: translateX(-30px); }

  /* De beschrijving schuift omhoog naast de onderkant van de bol. 62% breed
     en 54px omhoog: daar is de bol zo ver ingebogen dat de tekst er net
     langs past. Ruimer maken betekent de bol kleiner maken. */
  .hero .sub { margin-top: -10px; position: relative; z-index: 2; }
  .hero .hero-cta { margin-top: 14px; }
  .hero .hero-tools { order: 5; margin-top: 22px; }
  .hero .ticks { margin-top: 24px; }
}

/* dienstpagina's */
.svc-hero { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 4vw, 56px); align-items: start; }
.svc-facts { padding: clamp(24px, 2.4vw, 32px); position: sticky; top: 96px; }
.svc-fact { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.svc-fact b { display: block; margin-top: 8px; font-size: 19px; letter-spacing: -.02em; }
.svc-fact p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--body); }
.svc-symptoms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc-includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.svc-others { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.svc-other { display: block; padding: 22px; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.svc-other:hover { border-color: var(--ink); transform: translateY(-2px); }
.svc-other h3 { font-size: 17px; }
.svc-other p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--body); }

/* scan van zeven vragen */
.quiz { max-width: 760px; margin: 0 auto; padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.quiz-bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.quiz-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.quiz-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0 22px; }
.quiz-back { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.quiz-back:hover { color: var(--ink); }
.quiz-q { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 22px; }
.quiz-opt {
  display: block; width: 100%; margin-bottom: 10px; padding: 18px 20px; text-align: left;
  font: inherit; font-size: 17px; font-weight: 500; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.quiz-opt:hover { border-color: var(--ink); background: var(--soft); }
.quiz-opt.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.quiz-list { margin: 0; padding: 0; list-style: none; counter-reset: leak; }
.quiz-list li { position: relative; padding: 20px 0 20px 46px; border-top: 1px solid var(--line); counter-increment: leak; }
.quiz-list li:last-child { border-bottom: 1px solid var(--line); }
.quiz-list li::before { content: counter(leak); position: absolute; left: 0; top: 20px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.quiz-list b { font-size: 18px; }
.quiz-list p { margin: 8px 0 12px; font-size: 15px; line-height: 1.6; color: var(--body); }

/* faq, native details */
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-size: 26px; font-weight: 400; color: var(--accent-ink); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 4px 24px; font-size: 16px; line-height: 1.65; color: var(--body); max-width: 72ch; }

/* contactformulier */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label, .field-full { display: flex; flex-direction: column; gap: 8px; }
.field-full { margin-top: 14px; }
.inp { height: 52px; padding: 0 16px; background: var(--dark-surface); border: 1px solid var(--dark-line); border-radius: 10px; color: #fff; font-family: inherit; font-size: 16px; }
textarea.inp { height: 140px; padding: 15px 16px; line-height: 1.55; resize: vertical; }
.inp::placeholder { color: #636467; }
.inp:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* footer */
.ft { background: #070708; padding: clamp(44px, 5vw, 64px) var(--gutter) 40px; }
.ft-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: 1280px; margin: 0 auto; padding-bottom: 36px; border-bottom: 1px solid #1C1C1E; }
.ft a { color: var(--dark-body); font-size: 15px; }
.ft a:hover { color: #fff; }
.ft-col { display: flex; flex-direction: column; gap: 10px; }
.ft-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; max-width: 1280px; margin: 26px auto 0; font-size: 13px; color: #5A5B5E; }

/* responsive */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-hero { grid-template-columns: 1fr; }
  .svc-facts { position: static; }
  .svc-symptoms { grid-template-columns: 1fr 1fr; }
  .svc-others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes, .leak-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .case { grid-template-columns: 1fr; }
  .case > img { min-height: 220px; max-height: 300px; }
  .calc { grid-template-columns: 1fr; }
  .ft-in { grid-template-columns: 1fr 1fr; }
  /* oude pagina's: elk raster wordt een kolom */
  .wrap, [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-column"] { grid-column: auto !important; }
}
/* Tablet: bol tussen titel en beschrijving, zoals op mobiel maar zonder de
   mobiele uitsnede. Eigen bereik zodat de mobiele regels hierboven blijven winnen. */
@media (min-width: 721px) and (max-width: 1080px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero > div:first-child { display: contents; }
  .hero h1 { order: 1; margin-top: 0; }
  .hero .rails { order: 2; margin-top: 12px; }
  .hero .sub { order: 3; margin-top: 12px; }
  .hero .hero-cta { order: 4; }
  .hero .hero-tools { order: 5; }
  .hero .ticks { order: 6; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; margin: -7px -12px -7px 0; }
  /* de kop hoeft op telefoon geen 72px hoog te zijn */
  .hdr-in { padding: 9px var(--gutter); }
  .brand { font-size: 20px; }
  .nav-panel[data-open="true"] { display: flex; flex-direction: column; padding: 8px var(--gutter) 22px; background: var(--bg); border-bottom: 1px solid var(--line); }
  /* Zelfde valkuil als in de kop: zonder :not(.btn) wint deze regel van
     .btn-primary en staat de knop zwart op zwart, dus onzichtbaar. */
  .nav-panel a:not(.btn) { padding: 14px 0; font-size: 18px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-panel .btn { margin-top: 16px; width: 100%; }
  .bento { grid-template-columns: 1fr; }
  .steps, .quotes, .stats, .case-cols, .form-grid, .leak-grid { grid-template-columns: 1fr; }
  .leak-grid { gap: 26px; }
  .steps[style] { grid-template-columns: 1fr !important; }
  .svc-symptoms, .svc-includes, .svc-others { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .case-cta { width: 100%; }
  .leak-cta-knoppen { flex-direction: column; width: 100%; }
  .leak-cta-knoppen .btn { width: 100%; }
  .sec-head { text-align: left; }

  /* Voettekst op telefoon. Twee kolommen van 15px brak elke linktekst
     middenin af en zette Werk en Contact op ongelijke hoogte. Een kolom,
     ruimere regelafstand en kopjes die je herkent leest in een keer. */
  .ft-in { grid-template-columns: 1fr; gap: 30px; padding-bottom: 28px; }
  .ft-in > div > p { max-width: none; }
  .ft-col { gap: 2px; }
  .ft-col a, .ft-col span { padding: 9px 0; font-size: 16px; }
  .ft-bot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* legacy: klassen die de andere pagina's nog gebruiken */
.wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(18px); }
  [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
}

/* Stroomschema boven de diensten. De verhouding staat vast op 560/240, dus de
   procenten van de iconen vallen precies samen met de coordinaten in de
   viewBox van de lijnen eronder. Dat scheelt het rekenwerk dat cloud.js wel
   nodig heeft, want hier beweegt niets van plaats. */
.flow { position: relative; aspect-ratio: 320 / 200; width: 100%; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-base path { fill: none; stroke: var(--line-strong); stroke-width: 1.3; }
.fl-puls path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 18 82; stroke-dashoffset: 100;
  animation: fl 2.8s linear infinite; animation-delay: var(--d); }
.fl-puls .fl-uit { stroke-width: 3; }
@keyframes fl { to { stroke-dashoffset: 0; } }

.flow-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.4); }
.flow-tool { --x: 85%; width: 13.125%; aspect-ratio: 1; border-radius: 9px; }
.flow-tool img { width: 62%; height: auto; }
.flow-biz { --x: 16.25%; --y: 22%; width: 17.5%; aspect-ratio: 1; border-radius: 12px;
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 14px 34px -14px rgba(224,138,46,.75); }
.flow-biz svg { width: 50%; height: auto; }
.flow-hub { --x: 46.875%; --y: 59%; width: 15%; aspect-ratio: 1; border-radius: 50%; }
/* dezelfde ring als de o in het logo */
.flow-hub i { display: block; width: 46%; aspect-ratio: 1; border-radius: 50%;
  border: 3.5px solid var(--accent); box-shadow: 0 0 10px rgba(224,138,46,.5); }
.flow-lbl { position: absolute; left: var(--x); transform: translateX(-50%); width: 34%;
  text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); }
.flow-lbl-biz { --x: 16.25%; top: 38%; }
.flow-lbl-hub { --x: 46.875%; top: 73%; }

@media (max-width: 720px) {
  .flow { margin-bottom: 22px; }
  .flow-lbl { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  /* zonder beweging blijft het een leesbaar schema: lijnen zonder puls */
  .fl-puls { display: none; }
}