/* ============================================================
     OpenFiber — homepage concept, twee richtingen
     Bewust één licht "brand"-canvas (merkpitch, geen dark variant).
     Kleuren afgeleid uit het OpenFiber-logo.
     ============================================================ */
  :root{
    --font-display: "SF Pro Rounded", ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* één samenhangende blauwfamilie (tint ~214), afgeleid van het logoblauw */
    --blue:#5b8fd6; --blue-deep:#2f5fa0; --blue-ink:#1b3253;
    --blue-050:#eff5fd; --blue-mid:#3f79c9;
    --peri:#3f79c9; --peri-deep:#2f5fa0;
    --green:#7aad3c; --green-deep:#5f8f2f;
    --orange:#e37b3c; --orange-deep:#c9622a;

    --ink:#16222e; --muted:#5a6b7a; --faint:#8a99a7;
    --line:#e3e9f0; --soft:#f4f8fc; --white:#ffffff;

    --maxw:1120px;
  }

  *{box-sizing:border-box;}
  [hidden]{ display:none !important; }   /* anders overschrijft bv. display:grid het hidden-attribuut */
  html{ -webkit-text-size-adjust:100%; }
  body{ margin:0; }

  #stage{
    font-family:var(--font-body);
    color:var(--ink);
    background:#ffffff;              /* buiten het canvas: donkere "studio" achtergrond */
    line-height:1.5;
    min-height:100vh;
  }

  /* ---------- canvas: volle breedte; alleen .wrap centreert de inhoud ---------- */
  #canvas{
    background:var(--white);
    overflow:clip;   /* klipt full-bleed weg zonder scroll-context (breekt position:sticky niet) */
  }
  #canvas img{ max-width:100%; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

  a{ color:inherit; }
  .btn{
    font-family:var(--font-body); font-weight:600; font-size:16px;
    border:0; border-radius:12px; padding:14px 22px; cursor:pointer;
    display:inline-flex; align-items:center; gap:9px; text-decoration:none;
    transition:transform .12s ease, box-shadow .15s, background .15s;
  }
  .btn:active{ transform:translateY(1px); }
  /* Echt uitgeschakeld (alleen tijdens het versturen): niet klikbaar. */
  .btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
  .btn:disabled:active{ transform:none; }
  /* Nog niet bruikbaar, maar wél klikbaar: klikken laat de browser vertellen wat
     er nog mist. Daarom gewoon een pointer en geen not-allowed. */
  .btn.is-waiting{ opacity:.45; box-shadow:none; }
  .btn:focus-visible{ outline:3px solid rgba(78,134,212,.5); outline-offset:2px; }
  .btn-primary{ background:var(--blue-deep); color:#fff; box-shadow:0 8px 20px -10px rgba(47,95,160,.7); }
  .btn-primary:hover{ background:var(--blue-ink); }
  .btn-light{ background:#fff; color:var(--blue-deep); box-shadow:0 8px 20px -12px rgba(0,0,0,.4), inset 0 0 0 1px rgba(47,95,160,.22); }
  .btn-light:hover{ background:var(--blue-050); }
  .btn-blue{ background:var(--blue-deep); color:#fff; }
  .btn-blue:hover{ background:#264e85; }
  .btn-ghost{ background:transparent; color:var(--blue-deep); border:1.5px solid var(--line); }
  .btn-ghost:hover{ border-color:var(--blue); }

  /* ---------- top utility + nav ---------- */
  .util{ border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
  .util .wrap{ display:flex; gap:20px; align-items:center; height:38px; }
  .util a{ text-decoration:none; }
  .util .u-tab{ font-weight:600; color:var(--ink); }
  .util .u-right{ margin-left:auto; display:flex; gap:20px; align-items:center; }
  /* taal-dropdown (globe + code + chevron); werkt ook zonder JS via <details>.
     NB: reset de globale FAQ-accordeon-styling (details/summary) die anders lekt. */
  .langsw{ position:relative; font-size:13px; border-bottom:0; padding:0; }
  .langsw > summary{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; list-style:none;
     color:var(--muted); padding:4px 2px; line-height:1; font-family:inherit; font-size:13px; font-weight:400; }
  .langsw > summary::-webkit-details-marker{ display:none; }
  .langsw > summary::marker{ content:""; }
  .langsw > summary::after{ content:none; }   /* geen FAQ-"+"-icoon */
  .langsw:hover > summary{ color:var(--blue-deep); }
  .langsw .glb{ display:inline-flex; align-items:center; color:var(--faint); }
  .langsw .glb svg{ width:15px; height:15px; display:block; }
  .langsw:hover .glb{ color:var(--blue-deep); }
  .langsw .lc{ font-weight:600; color:var(--blue-deep); letter-spacing:.3px; }
  .langsw .chev{ width:13px; height:13px; color:var(--faint); transition:transform .15s ease; }
  .langsw[open] .chev{ transform:rotate(180deg); }
  .langsw > summary:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }
  .lang-menu{ position:absolute; top:calc(100% + 7px); right:0; z-index:70; margin:0; padding:5px;
     list-style:none; min-width:158px; background:var(--white); border:1px solid var(--line);
     border-radius:11px; box-shadow:0 14px 34px rgba(16,34,46,.16); }
  .lang-menu a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
     text-decoration:none; color:var(--ink); white-space:nowrap; }
  .lang-menu a:hover{ background:var(--soft); }
  .lang-menu a .lc{ font-size:12px; color:var(--faint); min-width:20px; }
  .lang-menu a.on{ background:var(--soft); }
  .lang-menu a.on .lc,.lang-menu a.on .ln{ color:var(--blue-deep); }

  nav.main{ position:relative; z-index:5; }
  nav.main .wrap{ display:flex; align-items:center; gap:34px; height:74px; }
  .logo{ display:flex; align-items:center; cursor:pointer; user-select:none; }
  .logo-lockup{ height:40px; width:auto; display:block; }
  a.logo{ text-decoration:none; color:inherit; transition:opacity .15s; }
  a.logo:hover{ opacity:.72; }

  /* ---------- homepage: groot floatend embleem <-> kleine liggende lockup ----------
     Bovenaan: het grote embleem (met 'open fiber' erin) hangt fors vergroot over de
     content. Bij scrollen krimpt het in-place, fadet het weg, en fadet de liggende
     lockup (embleem + 'openfiber') in. --sc toggelt 0 (boven) / 1 (gescrolld); de
     CSS-transitions spelen de nette animatie af (losgekoppeld van de scroll-afstand).
     De opacity-fade van het embleem heeft delay, zodat de cross-fade pas gebeurt als
     het embleem klein is en z'n cirkel ~samenvalt met de cirkel in de lockup. */
  #canvas[data-home]{ --sc:0; --big:2.5; }
  #canvas[data-home] .topbar,
  #canvas[data-home] nav.main,
  #canvas[data-home] nav.main .wrap{ overflow:visible; }
  #canvas[data-home] .logo{ position:relative; }

  /* kleine liggende lockup: alleen zichtbaar wanneer gescrolld. */
  #canvas[data-home] .logo-lockup{ opacity:var(--sc); transition:opacity .16s ease; }     /* GROEIEN: snel weg */
  #canvas[data-home].scrolled .logo-lockup{ transition:opacity .22s ease .3s; }           /* KRIMPEN: infaden ná de krimp */

  /* groot floatend embleem. Basisgrootte + positie zo dat z'n cirkel ~samenvalt met de
     cirkel in de lockup (scale 1); origin left 24% -> groeit vooral naar beneden/rechts,
     niet omhoog door de util-balk. Massieve outline (8 richtingen) in de achtergrondkleur
     dekt de topbar-haarlijn af. */
  #canvas[data-home] .logo-emblem{
    position:absolute; left:1px; top:3px; height:34px; width:34px;
    transform-origin:left 24%;
    transform:translateX(calc((1 - var(--sc)) * 30px)) translateY(calc((1 - var(--sc)) * 10px)) scale(calc(1 + (1 - var(--sc)) * var(--big)));
    opacity:calc(1 - var(--sc));
    transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .18s ease;               /* GROEIEN: embleem snel terug in beeld */
    pointer-events:none; z-index:2; will-change:transform;
    filter:drop-shadow(1.4px 0 0 var(--white)) drop-shadow(-1.4px 0 0 var(--white))
           drop-shadow(0 1.4px 0 var(--white)) drop-shadow(0 -1.4px 0 var(--white))
           drop-shadow(1px 1px 0 var(--white)) drop-shadow(-1px 1px 0 var(--white))
           drop-shadow(1px -1px 0 var(--white)) drop-shadow(-1px -1px 0 var(--white));
  }
  /* KRIMPEN (gescrolld): embleem fadet pas wég ná de krimp (als 't ~over de lockupcirkel ligt). */
  #canvas[data-home].scrolled .logo-emblem{ transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .25s ease .28s; }

  @media (prefers-reduced-motion: reduce){
    #canvas[data-home] .logo-emblem, #canvas[data-home] .logo-lockup{ transition:none; }
  }
  .navlinks{ display:flex; gap:26px; font-weight:500; }
  .navlinks a{ text-decoration:none; color:var(--ink); padding:6px 0; }
  .navlinks a:hover{ color:var(--blue-deep); }
  .nav-right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
  .nav-right .mijn{ text-decoration:none; font-weight:600; color:var(--blue-deep); display:flex; align-items:center; gap:7px; white-space:nowrap; }
  .nav-right .mijn .ic-user{ width:19px; height:19px; flex:0 0 auto; }
  .nav-right .mijn:hover{ color:var(--blue-ink); }
  .nav-toggle{ display:none; -webkit-tap-highlight-color:transparent; }   /* hamburger: alleen mobiel; geen donkere tap-flash */
  .mijn-menu{ display:none; }    /* login onderin het menu: alleen mobiel */

  /* ---------- altijd-zichtbare (floating) topbar, KPN-stijl ---------- */
  .topbar{ position:sticky; top:0; z-index:60; background:var(--white); box-shadow:0 1px 0 var(--line); }

  /* ---------- Consument / Zakelijk segment-switch ---------- */
  #canvas[data-seg="consumer"] .seg-b, #canvas[data-seg="consumer"] .seg-e{ display:none; }   /* zakelijke + vastgoed items verborgen */
  #canvas[data-seg="business"] .seg-c, #canvas[data-seg="business"] .seg-e{ display:none; }   /* consumenten + vastgoed items verborgen */
  #canvas[data-seg="estate"]   .seg-c, #canvas[data-seg="estate"] .seg-b, #canvas[data-seg="estate"] .seg-cb{ display:none; }   /* op vastgoed alleen eigen items */
  .util .useg{ color:var(--muted); font-weight:400; cursor:pointer; }
  #canvas[data-seg="consumer"] .util .useg[data-seg="consumer"],
  #canvas[data-seg="business"] .util .useg[data-seg="business"],
  #canvas[data-seg="estate"]   .util .useg[data-seg="estate"]{ color:var(--ink); font-weight:600; }

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; }
  #canvas[data-seg="business"] .hero-photo{ background-image:url("../img/hero-business.jpg"); background-position:62% 34%; }

  /* zakelijk: klant-logo-rol (naadloze marquee). Namen als tekst-'logo's'; padding op de
     chips (i.p.v. flex-gap) zodat de dubbele set precies tegen elkaar tilt -> translateX(-50%)
     is exact naadloos. Vervang de <span>-namen later 1-op-1 door <img> klantlogo's. */
  .logo-roll{ margin-top:38px; overflow:hidden;
     -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
     mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .logo-track{ display:flex; align-items:center; width:max-content; animation:logoroll 55s linear infinite; }
  .logo-roll:hover .logo-track{ animation-play-state:paused; }
  .logo-chip{ display:flex; align-items:center; justify-content:center; height:72px; padding:0 30px; flex:0 0 auto; }
  /* hoogte per logo via inline style (PHP-array); grijs+gedempt, alleen het gehóverde
     logo wordt kleur (de rol pauzeert bij hover zodat je een logo kunt aanwijzen). */
  .logo-chip img{ width:auto; filter:grayscale(1); opacity:.6; transition:filter .3s, opacity .3s; }
  .logo-chip img.ln{ filter:grayscale(1) brightness(.58); opacity:.72; }   /* lichte logo's (bv. oranje) donkerder -> beter zichtbaar in grijs */
  .logo-chip:hover img{ filter:grayscale(0); opacity:1; }                   /* na .ln in bron -> wint bij hover (tie) */
  /* Vastgoed-referenties: contrast-compressie trekt de grijstinten naar elkaar toe
     (donkere logo's iets lichter, lichte iets donkerder) voor een rustige, egale rij. */
  .logo-roll.estate .logo-chip img{ filter:grayscale(1) contrast(.6) brightness(1.08); opacity:.82; }
  .logo-roll.estate .logo-chip:hover img{ filter:grayscale(0); opacity:1; }
  @keyframes logoroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  /* zakelijk: glasvezelnetwerken waarop we leveren */
  .net-grid{ display:flex; flex-wrap:wrap; gap:11px 12px; margin-top:28px; }
  .net-chip{ font-weight:600; font-size:15px; color:var(--blue-ink); background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:10px 17px; }
  .net-chip.net-more{ color:var(--muted); background:transparent; border-style:dashed; }
  @media (prefers-reduced-motion:reduce){ .logo-track{ animation:none; } }
  .hero-photo{ position:absolute; top:0; right:0; bottom:0; width:71%; z-index:0;
     background-image:url("../img/hero.jpg"); background-size:cover; background-position:40% 24%; }
  .hero-photo::after{ content:""; position:absolute; inset:-2px;
     background:linear-gradient(104deg, var(--white) 0%, var(--white) 27%, rgba(255,255,255,.62) 48%, rgba(255,255,255,.24) 68%, rgba(255,255,255,0) 90%); }
  .hero .wrap{ position:relative; z-index:2; padding-top:72px; padding-bottom:132px; }
  .hero-copy{ max-width:560px; }

  /* postcodecheck als horizontale balk, los onder de hero (overlapt de onderrand) */
  .checkband{ position:relative; z-index:5; padding-bottom:26px; }
  .checkband .checkcard{ max-width:1000px; margin:-86px auto 0; padding:24px 30px;
     box-shadow:0 20px 44px -28px rgba(23,52,92,.32); }
  .result-topbar{ max-width:1000px; margin:0 auto 16px; display:flex; align-items:center; gap:16px; }
  .result-topbar .rt-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--muted); }
  #canvas[data-check="start"] .result-topbar{ display:none; }
  /* resultaat = eigen paginaweergave: hero + rest van de homepage verbergen */
  #canvas[data-check="yes"] .hero,      #canvas[data-check="yes"] .home-below,
  #canvas[data-check="complex"] .hero,  #canvas[data-check="complex"] .home-below,
  #canvas[data-check="no"] .hero,       #canvas[data-check="no"] .home-below{ display:none; }
  #canvas:not([data-check="start"]) .checkband{ background:var(--blue-050); padding:40px 0 90px; min-height:70vh; }
  #canvas:not([data-check="start"]) .checkband .checkcard{ margin-top:0; }
  .cc-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 28px; }
  .cc-form .cc-intro{ flex:1 1 220px; min-width:200px; }
  .cc-form .cc-intro h3{ margin:0 0 5px; }
  .cc-form .cc-intro .cc-sub{ margin:0; }
  .cc-form .fields{ flex:2 1 320px; margin:0; }
  .cc-form .cc-go{ flex:0 0 auto; display:flex; flex-direction:column; }
  /* zelfde verticale box als .field input (16px + 12px padding + 1.5px rand) zodat
     de knop even hoog is en, via align-items:flex-end, met de velden uitlijnt */
  .cc-form .cc-go .btn{ width:auto; margin-top:0; height:48px; padding-top:0; padding-bottom:0; border:1.5px solid transparent; }
  .cc-form .cc-go .cc-note{ margin:8px 0 0; }
  .res{ max-width:560px; margin-left:auto; margin-right:auto; }
  /* Rating-debug: klein chipje, tabel verschijnt bij mouse-over. Alleen zichtbaar
     als de schakelaar op /debug aan staat (cookie of_debug). */
  .checkcard{ position:relative; }
  .dbg{ position:absolute; bottom:10px; right:14px; z-index:6; }
  .dbg-tag{ font-size:10px; letter-spacing:.3px; color:var(--faint); background:#f1f4f8; border:1px solid var(--line); border-radius:6px; padding:2px 7px; cursor:help; opacity:.5; transition:opacity .15s; }
  .dbg:hover .dbg-tag{ opacity:1; }
  .dbg-panel{ display:none; position:absolute; bottom:26px; right:0; width:330px; background:#fff; border:1px solid var(--line); border-radius:11px; box-shadow:0 16px 36px -12px rgba(0,0,0,.35); padding:10px 13px; }
  .dbg:hover .dbg-panel{ display:block; }
  .dbg-panel table{ width:100%; border-collapse:collapse; font-size:12px; }
  .dbg-panel th{ text-align:left; color:var(--muted); font-weight:600; padding:2px 10px 2px 0; vertical-align:top; white-space:nowrap; }
  .dbg-panel td{ text-align:right; padding:2px 0; color:var(--ink); }
  .dbg-panel tr:last-child th, .dbg-panel tr:last-child td{ padding-top:6px; font-weight:700; border-top:1px solid var(--line); }

  /* /debug — interne schakelpagina. Sober gehouden: het is gereedschap, geen content. */
  .dbg-page{ max-width:620px; }
  .dbg-page h1{ margin:6px 0 14px; }
  .dbg-switch{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin-top:26px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:16px; }
  .dbg-state{ display:flex; align-items:center; gap:11px; font-size:16px; }
  .dbg-dot{ width:11px; height:11px; border-radius:50%; background:var(--faint); flex:0 0 auto; }
  .dbg-switch.is-on .dbg-dot{ background:var(--green-deep); box-shadow:0 0 0 4px rgba(95,143,47,.18); }
  .dbg-switch form{ margin:0; }
  .dbg-hint{ margin-top:14px; font-size:13px; color:var(--faint); }
  .dbg-hint code{ background:#f1f4f8; border-radius:4px; padding:1px 5px; font-size:12.5px; }
  .kicker{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14px;
     color:var(--green-deep); background:var(--white); border:1px solid #d9e8d4; padding:7px 13px; border-radius:999px; }
  .kicker .k-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); }
  h1.hh{ font-family:var(--font-display); font-weight:800; letter-spacing:-1.2px;
     font-size:clamp(38px,5.2vw,60px); line-height:1.02; margin:20px 0 0; text-wrap:balance; }
  h1.hh .eur{ color:var(--blue-deep); white-space:nowrap; }
  .hero-sub{ font-size:19px; color:var(--muted); margin:20px 0 26px; max-width:34ch; }
  .hero-sub b{ color:var(--ink); font-weight:600; }
  .trust{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:26px; font-size:14.5px; color:var(--muted); }
  .trust span{ display:inline-flex; align-items:center; gap:8px; }
  .trust .ck{ color:var(--green-deep); font-weight:800; }

  /* ---------- adrescheck widget ---------- */
  .checkcard{
    background:var(--white); border:1px solid var(--line); border-radius:22px;
    box-shadow:0 30px 60px -34px rgba(23,52,92,.42); padding:26px; position:relative;
  }
  .checkcard h3{ font-family:var(--font-display); font-weight:700; font-size:21px; margin:0 0 4px; letter-spacing:-.3px; }
  .checkcard .cc-sub{ color:var(--muted); font-size:14px; margin:0 0 18px; }
  .fields{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; }
  .field label{ display:block; font-size:12px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.6px; margin:0 0 5px; }
  .field input{ width:100%; height:48px; font:inherit; font-size:16px; padding:0 12px; border:1.5px solid var(--line); border-radius:11px; background:var(--soft); color:var(--ink); }
  .field input:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(78,134,212,.16); }
  .field input:disabled{ background:#eef1f5; color:var(--faint); cursor:not-allowed; }
  .field select{ width:100%; height:48px; font:inherit; font-size:16px; padding:0 12px; border:1.5px solid var(--line); border-radius:11px; background:var(--soft); color:var(--ink); }
  .field textarea{ width:100%; font:inherit; font-size:16px; padding:11px 12px; border:1.5px solid var(--line); border-radius:11px; background:var(--soft); color:var(--ink); resize:vertical; min-height:82px; line-height:1.5; }
  .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(78,134,212,.16); }
  .field input:focus::placeholder{ color:transparent; }   /* placeholder weg zodra je focust */
  /* custom combobox (huisnummer + toevoeging) */
  .field.combo, .of.combo{ position:relative; }
  .combo-list{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; margin:0; padding:6px;
     list-style:none; background:#fff; border:1px solid var(--line); border-radius:12px;
     box-shadow:0 20px 44px -22px rgba(20,40,70,.5); max-height:230px; overflow-y:auto; }
  .combo-list[hidden]{ display:none; }
  .combo-opt{ padding:9px 11px; border-radius:8px; font-size:15px; cursor:pointer; white-space:nowrap; }
  .combo-opt.active, .combo-opt:hover{ background:var(--blue-050); color:var(--blue-deep); }
  .checkcard .btn{ width:100%; justify-content:center; margin-top:14px; }
  .cc-note{ text-align:center; font-size:13px; color:var(--faint); margin-top:12px; }
  /* huisnummers worden opgehaald -> subtiele spinner rechts in het veld (i.p.v. '…') */
  .field.combo.loading::after{ content:''; position:absolute; right:13px; bottom:15px; width:15px; height:15px;
     border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%;
     animation:ccspin .6s linear infinite; pointer-events:none; }
  @keyframes ccspin{ to{ transform:rotate(360deg); } }
  /* postcode geldig van vorm maar geen adres gevonden (bestaat niet / postbus / antwoordnummer) */
  /* eigen volle-breedte regel ónder de formulierrij (cc-form is een horizontale flex) */
  .cc-msg{ flex:0 0 100%; display:flex; gap:8px; align-items:center; margin:0; padding:11px 13px;
     border-radius:12px; font-size:13.5px; line-height:1.4; color:var(--orange-deep);
     background:#fdf3ec; border:1px solid #f2dcca; }
  .cc-msg svg{ flex:0 0 auto; margin-top:1px; }
  #pc.pc-invalid{ border-color:var(--orange); background:#fff; }
  #pc.pc-invalid:focus{ box-shadow:0 0 0 3px rgba(227,123,60,.18); }

  /* result: beschikbaar */
  .res{ display:none; }
  .res-head{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
  .res-badge{ width:46px; height:46px; border-radius:50%; display:grid; place-content:center; font-size:22px; flex:0 0 auto; }
  .res-badge svg{ display:block; }
  .res-badge.ok{ background:var(--green); color:#fff; }
  .res-badge.wait{ background:#e8eef6; color:var(--blue-deep); }
  .res-badge.hope{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; }
  .res-head b{ font-family:var(--font-display); font-size:19px; letter-spacing:-.2px; display:block; }
  .res-head .addr{ font-size:13.5px; color:var(--muted); }
  .planbox{ border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:4px 0 8px; }
  .planbox .pb-top{ display:flex; justify-content:space-between; align-items:center; padding:15px 17px; background:var(--soft); }
  .planbox .pb-name{ font-family:var(--font-display); font-weight:700; font-size:16px; }
  .planbox .pb-spec{ font-size:13px; color:var(--muted); }
  .planbox .pb-price{ text-align:right; }
  .planbox .pb-price .amt{ font-family:var(--font-display); font-weight:800; font-size:27px; color:var(--blue-deep); letter-spacing:-.5px; }
  .planbox .pb-price .per{ font-size:12px; color:var(--muted); display:block; margin-top:-2px; }
  .planbox .pb-foot{ padding:11px 17px; font-size:13px; color:var(--green-deep); display:flex; align-items:center; gap:8px; border-top:1px dashed var(--line); }
  .res .btn{ width:100%; justify-content:center; }
  .res .btn-row{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
  .backlink{ display:inline-flex; gap:6px; background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; margin-top:14px; padding:0; }
  .backlink:hover{ color:var(--blue-deep); }

  /* result: kansrijk complex */
  .res-complex p.lead{ font-size:15px; color:var(--muted); margin:2px 0 15px; }
  .needrow{ display:flex; gap:9px; margin:0 0 16px; }
  .needrow .need{ flex:1; font-size:12px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:11px; padding:11px 12px; }
  .needrow .need b{ display:block; font-family:var(--font-display); font-size:12.5px; color:var(--ink); margin-bottom:3px; }
  .needrow .need i{ font-style:normal; color:var(--blue-deep); font-weight:700; }

  /* result: nog niet */
  .res-wait p.lead{ font-size:15px; color:var(--muted); margin:2px 0 16px; }
  /* input bepaalt de hoogte; knop rekt via align-items:stretch exact mee (geen losse
     heights die uit de pas lopen). Knop: verticale padding 0 -> tekst centreert in de
     gerekte hoogte; width:auto overschrijft .res .btn width:100%. */
  .notify{ display:flex; gap:10px; align-items:stretch; }
  .notify input{ flex:1 1 auto; min-width:0; font:inherit; font-size:15px; padding:11px 15px; border:1.5px solid var(--line); border-radius:12px; background:var(--soft); }
  .notify input:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(78,134,212,.16); }
  /* margin-top:0 is nodig omdat .checkcard .btn elke knop in de kaart 14px omlaag
     duwt; naast een invoerveld hoort de knop juist op dezelfde regel te staan.
     Zonder die reset zakt hij weg en wordt hij een stuk lager dan het veld. */
  .notify .btn{ flex:0 0 auto; width:auto; margin-top:0; padding-top:0; padding-bottom:0; }
  /* Bij het kansrijke complex klapt het veld pas open na een klik; de eigenaar is
     daar de hoofdroute en een e-mailveld dat er meteen staat leidt daarvan af. */
  .notify-fold{ margin-top:14px; }
  .notify-msg{ margin:12px 0 0; font-size:14.5px; line-height:1.5; }
  .notify-msg.is-ok{ color:var(--green-deep); font-weight:600; }
  .notify-msg.is-err{ color:#b4443a; }
  .owner{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:13px; background:var(--soft);
     display:flex; align-items:flex-start; gap:12px; font-size:14px; }
  .owner > span{ flex:0 0 auto; line-height:1.5; color:var(--blue-deep); }
  .owner .owner-body p{ margin:0 0 11px; color:var(--muted); }
  .owner .owner-cta{ width:auto; margin:0; font-size:13.5px; padding:9px 16px; }   /* bescheiden knop */

  /* state visibility */
  #canvas[data-check="yes"]     .cc-form,
  #canvas[data-check="complex"] .cc-form,
  #canvas[data-check="no"]      .cc-form{ display:none; }
  #canvas[data-check="yes"]     .res-ok{ display:block; }
  #canvas[data-check="complex"] .res-complex{ display:block; }
  #canvas[data-check="no"]      .res-wait{ display:block; }

  /* ---------- sections ---------- */
  section.blk{ padding:70px 0; }
  .eyebrow{ font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--blue); margin:0 0 12px; }
  h2.hh{ font-family:var(--font-display); font-weight:800; letter-spacing:-.7px; font-size:clamp(28px,3.4vw,40px); margin:0; line-height:1.06; text-wrap:balance; }
  .sec-intro{ max-width:none; }
  .sec-intro h2.hh{ max-width:24ch; }
  .sec-intro h2.hh-2line{ max-width:none; }
  .sec-intro p{ color:var(--muted); font-size:17px; margin:14px 0 0; max-width:none; text-wrap:pretty; }

  /* prijsvergelijking */
  .compare{ background:var(--soft); }
  .bars{ margin-top:34px; display:flex; flex-direction:column; gap:14px; }
  .bar-row{ display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:center; cursor:pointer; }
  .bar-row .who{ font-weight:600; font-size:15px; }
  .bar-row .who .bm{ display:block; font-weight:800; font-size:16px; letter-spacing:.2px; color:#98a5b3; line-height:1.05; margin-bottom:1px; }
  .bar-row .who .bm-of{ color:var(--ink); }
  .bar-row .who .bm-delta{ text-transform:uppercase; letter-spacing:2.5px; font-weight:700; font-size:13px; }
  .bar-row .who .bm-ziggo{ letter-spacing:-.3px; }
  .bar-row .who small{ display:block; font-weight:500; color:var(--faint); font-size:12px; }
  .bar-track{ background:#e7edf4; border-radius:999px; height:44px; position:relative; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:999px; display:flex; align-items:center; justify-content:flex-end;
     padding-right:15px; color:#fff; font-weight:700; font-family:var(--font-display); font-size:16px;
     font-variant-numeric:tabular-nums; position:relative; z-index:2; width:var(--w); }
  .bar-fill .amt{ position:relative; z-index:3; }
  .bar-fill.them{ background:linear-gradient(90deg,#a9b6c4,#8fa0b1); }
  .bar-fill.us{ background:linear-gradient(90deg,var(--green),var(--green-deep)); }
  /* hover over een ISP-balk: het deel voorbij het OpenFiber-niveau kleurt in */
  .bar-fill.them::after{ content:""; position:absolute; inset:0; border-radius:999px; z-index:1;
     background-color:#8b96a4;
     -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0);
     transition:-webkit-clip-path .45s ease, clip-path .45s ease, background-color .25s ease; }
  .bar-row:hover .bar-fill.them::after{
     -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); background-color:#c0645b;
     transition:-webkit-clip-path .78s linear, clip-path .78s linear, background-color .5s steps(10) var(--cd,.3s); }
  /* Logo + productregel vormen samen de knop naar de bronmodal, maar mogen er niet
     als knop uitzien: het diagram moet rustig blijven. Alleen de cursor en een
     focusring verraden dat er iets te klikken valt. */
  .bar-row .who .logo-cmp{ position:relative; display:inline-block; }
  .bar-row .who .who-btn{ display:block; background:none; border:0; padding:0; margin:0;
    font:inherit; color:inherit; text-align:left; cursor:inherit; border-radius:4px; }
  .bar-row .who .who-btn:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:4px; }
  /* De hele rij opent de bron, balk en bedrag inbegrepen. De rij had al een
     hover-animatie, dus de cursor is genoeg signaal; er komt geen kader bij. */
  .bar-row--src{ cursor:pointer; }
  .bar-row .who .logo-cmp img{ display:block; height:var(--h,20px); width:auto; max-width:132px; }
  .bar-row .who .logo-cmp .lg-color{ position:absolute; left:0; top:0; opacity:0; transition:opacity .35s ease; }
  .bar-row:hover .who .logo-cmp .lg-color{ opacity:1; }
  .bar-row .who .lc-odido{ --h:15px; }
  .bar-row .who .lc-kpn{ --h:21px; }
  .bar-row .who .lc-ziggo{ --h:20px; }
  .bar-row .who .lc-delta{ --h:22px; }
  /* onze regel = het echte logo (lettercontouren), strak getrimd en iets groter dan de concurrenten */
  .bar-row .who .bm-of{ display:inline-flex; align-items:center; }
  .bar-row .who .bm-of .of-logo{ height:30.4px; width:auto; display:block; flex:0 0 auto; }   /* bol == menu-bol (25px) */
  .compare .foot{ font-size:12.5px; color:var(--faint); margin-top:24px; max-width:none; }

  /* Bronmodal achter de concurrentlogo's. Native <dialog>: de browser regelt
     focusopsluiting, Escape en het backdrop-gedrag. */
  /* Breedte bewust in vw en niet in %: het bevattende blok van een <dialog> hangt
     af van transforms hoger in de boom, vw doet dat niet en is hier voorspelbaar. */
  .cmp-modal{ border:0; border-radius:18px; padding:30px 32px 26px; position:fixed; inset:0; margin:auto;
    width:min(560px, calc(100vw - 32px)); height:fit-content; max-height:calc(100vh - 48px); overflow:auto;
    background:var(--white); color:var(--ink); box-shadow:0 24px 60px rgba(16,32,64,.22); }
  .cmp-modal::backdrop{ background:rgba(16,32,64,.42); backdrop-filter:blur(2px); }
  .cmp-modal h3{ font-family:var(--font-display); font-size:24px; line-height:1.15; margin:0; }
  /* Het logo ís de kop; hoogte per merk inline gezet omdat de beeldhoogtes verschillen. */
  .cmp-modal-h{ margin:0 0 2px; line-height:0; }
  .cmp-modal-h .cmp-logo{ width:auto; max-width:150px; display:block; }
  .cmp-modal-sub{ font-size:13.5px; color:var(--muted); margin:8px 0 18px; }
  .cmp-x{ position:absolute; top:12px; right:14px; background:none; border:0; cursor:pointer;
    font-size:26px; line-height:1; color:var(--faint); padding:4px 8px; border-radius:8px; }
  .cmp-x:hover{ color:var(--ink); }
  .cmp-dl{ display:grid; grid-template-columns:150px 1fr; gap:8px 18px; margin:0; font-size:14.5px; }
  .cmp-dl dt{ color:var(--muted); }
  .cmp-dl dd{ margin:0; }
  /* Uitsplitsing per onderliggend netwerk (nu alleen Odido). Smal en rustig; bij
     krappe schermen scrollt de tabel zelf i.p.v. de modal breder te maken. */
  .cmp-nets-h{ font-size:12.5px; color:var(--muted); margin:18px 0 8px;
    padding-top:16px; border-top:1px solid var(--line); }
  .cmp-nets-wrap{ overflow-x:auto; }
  .cmp-nets{ width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
  .cmp-nets th{ text-align:right; font-weight:500; color:var(--faint); font-size:11.5px;
    text-transform:uppercase; letter-spacing:.4px; padding:0 0 6px 12px; }
  .cmp-nets th:first-child, .cmp-nets td:first-child{ text-align:left; padding-left:0; }
  .cmp-nets td{ text-align:right; padding:5px 0 5px 12px; border-top:1px solid var(--line); }

  .cmp-note{ font-size:13px; line-height:1.6; color:var(--muted); margin:18px 0 0;
    padding-top:16px; border-top:1px solid var(--line); }
  .cmp-nets-wrap + .cmp-note{ border-top:0; padding-top:0; margin-top:16px; }
  /* De vergelijkingsgrondslag staat altijd onderaan, dus geen tweede scheidingslijn. */
  .cmp-note + .cmp-basis{ border-top:0; padding-top:0; margin-top:10px; }
  .cmp-basis{ color:var(--faint); }
  .cmp-modal-link{ margin:18px 0 0; font-size:14px; }
  @media (max-width:560px){ .cmp-modal{ padding:26px 22px 22px; } .cmp-dl{ grid-template-columns:1fr; gap:2px 0; }
    .cmp-dl dd{ margin-bottom:10px; }
    /* net genoeg krimp zodat de netwerktabel op een telefoon niet hoeft te schuiven */
    .cmp-nets{ font-size:12px; }
    .cmp-nets th, .cmp-nets td{ padding-left:8px; } }

  /* stappen */
  .steps-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .step{ position:relative; }
  .step .num{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--blue);
     width:34px; height:34px; border-radius:50%; border:2px solid #d5e3f4; display:grid; place-content:center; margin-bottom:16px; }
  .step h4{ font-family:var(--font-display); font-size:19px; margin:0 0 7px; font-weight:700; }
  .step p{ color:var(--muted); margin:0; font-size:15px; }

  /* benefits */
  .ben-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .ben{ border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--white); }
  .ben .ic{ width:40px; height:40px; border-radius:11px; display:grid; place-content:center; font-size:19px; margin-bottom:14px;
     background:var(--blue-ink); color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); }
  .ben .ic svg{ width:22px; height:22px; display:block; }
  .ben h4{ font-family:var(--font-display); font-size:17px; margin:0 0 6px; font-weight:700; }
  .ben p{ color:var(--muted); margin:0; font-size:14.5px; }

  /* reviews / tevredenheid */
  .stars{ position:relative; display:inline-block; line-height:1; letter-spacing:2px; white-space:nowrap; font-size:18px; }
  .stars .sbg{ color:#d7dee7; }
  .stars .sfg{ position:absolute; top:0; left:0; color:#f4a723; overflow:hidden; white-space:nowrap; }
  .rev-top{ margin-top:34px; }
  .score-badge{ display:inline-flex; align-items:center; gap:16px; padding:16px 22px;
     background:var(--soft); border:1px solid var(--line); border-radius:16px; }
  .score-num{ font-family:var(--font-display); font-weight:800; font-size:46px; line-height:1; color:var(--blue-deep); }
  .score-meta{ display:flex; flex-direction:column; gap:5px; }
  .score-src{ font-size:13.5px; color:var(--muted); }
  .score-src b{ color:var(--ink); font-weight:600; }
  /* Onderbouwing onder de score: aantal beoordelingen, peildatum en bronlink.
     Bewust klein en rustig: het is bewijs, geen verkoopargument. */
  .score-proof{ font-size:12.5px; color:var(--muted); }
  .score-proof a{ color:var(--muted); text-underline-offset:2px; }
  .score-proof a:hover{ color:var(--blue-deep); }
  .review-grid{ margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  /* NL/EN elk hun eigen reviews (geen vertaling); tonen per paginataal */
  .review-grid.lang-en{ display:none; }
  #canvas[data-lang="en"] .review-grid.lang-nl{ display:none; }
  #canvas[data-lang="en"] .review-grid.lang-en{ display:grid; }
  .review{ margin:0; border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--white);
     display:flex; flex-direction:column; gap:14px; }
  .review .stars{ font-size:16px; }
  .review blockquote{ margin:0; font-size:16px; line-height:1.55; color:var(--ink); }
  .review figcaption{ margin-top:auto; font-size:14px; color:var(--muted); }
  .review figcaption b{ display:block; color:var(--ink); font-weight:600; font-size:15px; }

  /* lifestyle / overstap band */
  .band{ position:relative; overflow:hidden; background:var(--peri); color:#fff; }
  .band-photo{ position:absolute; top:0; right:0; bottom:0; width:48%; z-index:0;
     background-image:url("../img/band.jpg"); background-size:cover; background-position:50% 40%; }
  .band-photo::after{ content:""; position:absolute; inset:0;
     background:linear-gradient(90deg, var(--peri) 6%, rgba(63,121,201,.45) 42%, rgba(63,121,201,0) 78%); }
  .band-5g .band-photo{ background-image:url("../img/band-business.jpg"); background-position:72% 42%; }
  .band-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; padding:64px 28px; }
  .band-inner h2{ color:#fff; }
  .band-inner p{ max-width:44ch; font-size:17px; color:#eef2fb; margin:16px 0 26px; }
  .band-inner .band-eyebrow{ color:rgba(255,255,255,.82); margin:0 0 8px; }
  .band-inner p b{ color:#fff; }

  /* footprint */
  .footprint{ background:var(--blue-ink); color:#eaf1fb; }
  .footprint h2{ color:#fff; }
  .footprint .eyebrow{ color:#8fc0f2; }
  .footprint .sec-intro p{ color:#b9cde6; }
  .cities{ margin-top:34px; display:flex; flex-wrap:wrap; gap:11px; }
  .city{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); padding:10px 16px; border-radius:999px; font-weight:600; font-size:15px; color:#eaf1fb; text-decoration:none; transition:background .15s, border-color .15s; }
  a.city:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.36); }
  .city.small{ opacity:.62; font-weight:500; }
  .fp-cta{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .fp-cta .note{ color:#b9cde6; font-size:14px; }
  /* Op het (witte) stad-overzicht: note onder de knop, leesbaar. */
  .cov .fp-cta{ flex-direction:column; align-items:flex-start; gap:12px; }
  .cov .fp-cta .note{ color:var(--muted); font-size:15px; }

  /* ---------- contactpagina ---------- */
  .contact{ padding-top:56px; }
  .contact-grid{ margin-top:32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
  .contact-card{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px 22px 24px; }
  .contact-card .ic{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--blue-050,#eef4ff); color:var(--blue-deep); margin-bottom:14px; }
  .contact-card .ic svg{ width:24px; height:24px; }
  .contact-card h3{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.2px; margin:0 0 8px; }
  .contact-card p{ margin:0 0 4px; }
  .contact-card .ct-lead{ font-size:17px; font-weight:600; }
  .contact-card .ct-lead a{ color:var(--ink); text-decoration:none; }
  .contact-card .ct-lead a:hover{ color:var(--blue-deep); }
  .contact-card .ct-sub{ color:var(--muted); font-size:14.5px; line-height:1.5; }
  .ct-mails{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .ct-mails li{ font-size:15px; line-height:1.3; }
  .ct-mails a{ color:var(--blue-deep); text-decoration:none; font-weight:600; }
  .ct-mails a:hover{ text-decoration:underline; }
  .ct-mails span{ display:block; color:var(--muted); font-size:12.5px; font-weight:500; }
  .facts-grid{ margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
  .facts{ background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:20px 22px; }
  .facts h3{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 12px; }
  .facts dl{ margin:0; display:grid; grid-template-columns:auto 1fr; column-gap:18px; row-gap:9px; }
  .facts dt{ color:var(--muted); font-size:14.5px; }
  .facts dd{ margin:0; color:var(--ink); font-weight:600; font-size:14.5px; text-align:right; }

  /* faq */
  .faq-list{ margin-top:32px; border-top:1px solid var(--line); }
  details{ border-bottom:1px solid var(--line); padding:0; }
  details summary{ list-style:none; cursor:pointer; padding:20px 4px; font-family:var(--font-display);
     font-weight:600; font-size:18px; display:flex; align-items:center; gap:14px; }
  details summary::-webkit-details-marker{ display:none; }
  details summary::after{ content:"+"; margin-left:auto; font-size:24px; color:var(--blue); font-weight:400; transition:transform .2s; }
  details[open] summary::after{ transform:rotate(45deg); }
  details .ans{ padding:0 4px 22px; color:var(--muted); font-size:15.5px; max-width:74ch; }

  /* ---------- televisie-pagina ---------- */
  .tv-hero .hero-photo{ background-image:url("../img/tv-hero.jpg"); background-position:50% 40%; }
  .tv-hero .wrap{ padding-top:56px; padding-bottom:120px; }   /* ruimte voor de overlappende checkkaart */
  .tv-hero .hero-copy .eyebrow{ margin-bottom:14px; }
  /* zender-marquee: full-color. Chip = block (géén flex) met auto-breedte, zodat smalle
     logo's een smalle cel krijgen (geen extra whitespace); de img wordt in die block-
     context wél op max-width begrensd (op een flex-item werkt max-width niet), zodat
     brede logo's (RTL) niet dominant zijn. Verticaal centreren doet de track zelf. */
  .logo-roll.chan .logo-chip{ display:block; height:auto; max-width:78px; margin:0 15px; padding:0; }
  .logo-roll.chan .logo-chip img{ display:block; margin:0 auto; max-width:100%; max-height:29px; width:auto; height:auto; filter:none; opacity:1; }
  .tv-linear-card{ display:grid; grid-template-columns:1.25fr 1fr; gap:30px 44px; align-items:center;
     background:var(--soft); border:1px solid var(--line); border-radius:22px; padding:34px 38px; }
  .tv-linear-copy .eyebrow{ margin-bottom:10px; }
  .tv-linear-copy h2.hh{ max-width:18ch; }
  .tv-linear-copy p{ color:var(--muted); font-size:16px; margin:12px 0 0; }
  .tv-linear-points{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
  .tv-linear-points li{ font-size:14px; color:var(--muted); background:var(--white);
     border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  .tv-linear-points li b{ display:block; font-family:var(--font-display); font-size:13px; color:var(--ink); margin-bottom:2px; }
  .tv-cta{ text-align:center; }
  .tv-cta .sec-intro{ margin:0 auto; }
  .tv-cta .sec-intro h2.hh{ max-width:none; }
  .tv-cta-btn{ margin-top:28px; }

  /* ---------- internet-pagina ---------- */
  .internet-hero .hero-photo{ background-image:url("../img/hero-internet.jpg"); background-position:70% 45%; }
  .plans{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px; }
  .plan-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
     border-radius:18px; padding:26px 26px 24px; box-shadow:0 18px 40px -30px rgba(20,40,70,.35); }
  .plan-card.p-feat{ border-color:var(--blue); box-shadow:0 22px 46px -28px rgba(47,95,160,.5); }
  .plan-card .p-badge{ position:absolute; top:-12px; right:24px; background:var(--green-deep); color:#fff;
     font-size:12px; font-weight:700; letter-spacing:.2px; padding:5px 12px; border-radius:999px;
     box-shadow:0 8px 18px -8px rgba(20,60,40,.5); }
  .plan-card .p-tag{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--blue-deep); }
  .plan-card .p-avail{ position:absolute; top:24px; right:24px; font-size:12px; color:var(--faint); }
  .plan-card .p-name{ font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-.5px; margin:6px 0 4px; }
  .plan-card .p-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:12px; }
  .plan-card .p-price .amt{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--blue-deep); }
  .plan-card .p-price .per{ font-size:14px; color:var(--muted); }
  .plan-card .p-desc{ color:var(--muted); font-size:15px; margin:0 0 16px; }
  .plan-card .p-feats{ list-style:none; margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:grid; gap:8px; }
  .plan-card .p-feats li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--ink); }
  .plan-card .p-feats li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--green-deep); font-weight:700; }
  .plans-foot{ margin:24px 0 0; font-size:13.5px; color:var(--faint); text-align:center; }
  .sym-block{ background:var(--soft); }
  .get-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:30px; }
  .get{ display:flex; gap:12px; align-items:flex-start; }
  .get .ck{ flex:0 0 auto; margin-top:2px; }
  .get b{ display:block; color:var(--ink); }
  .get span{ color:var(--muted); font-size:14.5px; }
  .get-note{ margin:18px 0 0; font-size:13.5px; color:var(--faint); }
  @media (max-width:760px){ .plans, .get-grid{ grid-template-columns:1fr; } }
  /* prijs-sticker (schuin) op de TV-secties */
  .price-sticker{ position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center;
     width:94px; height:94px; border-radius:50%; background:var(--orange); color:#fff; text-align:center;
     transform:rotate(-8deg); box-shadow:0 14px 28px -12px rgba(23,52,92,.5); }
  .price-sticker .lbl{ font-size:10px; opacity:.9; margin-bottom:2px; }
  .price-sticker .amt{ font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1; letter-spacing:-.3px; }
  .price-sticker .per{ font-size:10.5px; opacity:.92; margin-top:3px; }
  .price-sticker.st-green{ background:var(--green-deep); }
  .tv-interactive .wrap{ position:relative; }
  .tv-interactive .price-sticker{ top:2px; right:6px; }
  .tv-linear-card{ position:relative; }
  .tv-linear-card .price-sticker{ top:-20px; right:-10px; }
  @media (max-width:760px){
    .price-sticker{ width:80px; height:80px; }
    .price-sticker .amt{ font-size:16px; }
    .tv-interactive .price-sticker{ top:14px; right:14px; }
  }
  @media (max-width:760px){ .tv-linear-card{ grid-template-columns:1fr; padding:26px 22px; } }

  /* footer */
  footer.site{ background:#0f1a26; color:#9fb2c6; padding:56px 0 40px; font-size:14.5px; }
  footer.site .fcols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
  footer.site h5{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.8px; margin:0 0 14px; }
  footer.site a{ color:#9fb2c6; text-decoration:none; display:block; padding:5px 0; }
  footer.site a:hover{ color:#fff; }
  footer.site .fbrand{ margin-bottom:14px; }
  footer.site .fbrand img{ height:40px; width:auto; display:block; }
  footer.site .fbot{ margin-top:34px; padding-top:22px; border-top:1px solid #1e2c3a; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:#6f8296; font-size:13px; }
  footer.site .fbot a{ display:inline; color:inherit; }

  .disc{ background:#ffffff; color:#7f93a8; font-size:12.5px; padding:14px 18px; text-align:center; }
  .disc b{ color:#b9c8d8; }

  /* ---------- bestel-scherm ---------- */
  .order{ background:var(--blue-050); padding:44px 0 80px; }
  .order-head{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .order-head h1.hh{ margin:6px 0 0; }
  /* Beschikbaarheids-/levertijd-banner (kop van de bestelflow) */
  .ok-eyebrow{ color:var(--green-deep); display:inline-flex; align-items:center; gap:7px; }
  .ok-tick{ display:inline-grid; place-content:center; width:18px; height:18px; border-radius:50%; background:var(--green-deep); color:#fff; font-size:12px; line-height:1; }
  .order-head .deliv{ margin:12px 0 0; color:var(--muted); font-size:16.5px; max-width:56ch; transition:color .4s ease; }
  .order-head .deliv-up{ color:var(--green-deep); font-weight:600; }
  .order-head .deliv-occ{ margin:8px 0 0; color:var(--blue-deep); font-size:14.5px; font-weight:600; }
  .order-addr{ display:flex; align-items:center; gap:9px; color:var(--muted); font-size:16px; margin:14px 0 0; }
  .order-addr svg{ width:19px; height:19px; color:var(--blue-deep); flex:0 0 auto; }
  .order-addr a{ color:var(--blue-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; margin-left:2px; }

  /* stappen-indicator (geanimeerd) */
  .stepper{ max-width:640px; margin:26px auto 4px; padding:0 28px; list-style:none; display:flex; }
  .stepper li{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; color:var(--faint); font-size:13.5px; font-weight:600; transition:color .35s ease; }
  /* verbindingsbalk: 2 lagen — blauwe basis (vult bij 'huidig'), groene laag (vult van
     links zodra de rechter bol groen wordt). Beide via background-position geanimeerd. */
  .stepper li::before{ content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; z-index:0;
     background:linear-gradient(to right, var(--green) 50%, transparent 50%),
                linear-gradient(to right, var(--blue-deep) 50%, var(--line) 50%);
     background-size:200% 100%, 200% 100%; background-repeat:no-repeat; background-position:100% 0, 100% 0;
     transition:background-position .5s ease var(--barDelay, 0s); }
  .stepper li:first-child::before{ display:none; }
  .stepper li.is-current::before{ background-position:100% 0, 0 0; }   /* blauw gevuld */
  .stepper li.is-done::before{ background-position:0 0, 0 0; }         /* groen vult (van links) over blauw */
  /* --dotDelay/--barDelay worden per stap in JS gezet zodat de balk en de bol in cascade
     (bol3 -> bol2 -> bol1) leeglopen i.p.v. allemaal tegelijk. */
  .stepper .s-dot{ position:relative; z-index:1; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--faint); display:grid; place-content:center; font-size:14px; font-weight:700;
     transition:background-color .3s ease var(--dotDelay,0s), border-color .3s ease var(--dotDelay,0s), color .2s ease var(--dotDelay,0s); }
  .stepper li.is-current, .stepper li.is-done{ color:var(--blue-deep); }
  .stepper li.is-current .s-dot{ border-color:var(--blue-deep); background:var(--blue-deep); color:#fff; }
  .stepper li.is-done .s-dot{ border-color:var(--green); background:var(--green); color:transparent; }
  .stepper li.is-done .s-dot::after{ content:"\2713"; position:absolute; inset:0; display:grid; place-content:center; color:#fff; font-size:16px; animation:tickIn .3s ease var(--dotDelay,0s) both; }
  @keyframes tickIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
  .stepper li.is-clickable{ cursor:pointer; }
  .stepper li.is-clickable:hover{ color:var(--blue-deep); }
  .stepper li.is-clickable:hover .s-dot{ border-color:var(--blue-deep); }

  .order-grid{ max-width:var(--maxw); margin:20px auto 0; padding:0 28px; display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:26px; align-items:start; }
  .order-main{ display:flex; flex-direction:column; gap:18px; position:relative; }

  .ocard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 24px; }
  .ocard-h{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 16px; }
  .step-n{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:var(--blue-deep); color:#fff; font-size:15px; display:grid; place-content:center; }
  .ocard-lead{ color:var(--muted); font-size:15px; margin:0 0 14px; }
  /* .ocard .ocard-sep i.p.v. .ocard-sep: wint van '.step p{margin:0}' (wizard-kaart heeft ook class 'step') */
  .ocard .ocard-sep{ font-size:15.5px; font-weight:600; color:var(--ink); margin:38px 0 28px; }
  .ocard .ocard-lead{ margin:0 0 14px; }

  .opt{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1.5px solid var(--line); border-radius:13px; cursor:pointer; margin-bottom:10px; transition:border-color .15s, background .15s; }
  .opt:last-child{ margin-bottom:0; }
  .opt:hover{ border-color:var(--blue); }
  .opt:has(input:checked){ border-color:var(--blue-deep); background:var(--blue-050); }
  .opt input[type=radio], .opt input[type=checkbox]{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--blue-deep); }
  /* Custom, rustig keuze-vakje (tv-checkboxes, internet-radio's én de SEPA-machtiging) */
  .opt input.of-check, .ocheck input.of-check{ appearance:none; -webkit-appearance:none; width:22px; height:22px; border:1.5px solid var(--line); border-radius:6px; background:#fff; position:relative; cursor:pointer; flex:0 0 auto; transition:border-color .15s; }
  .opt input.of-check:hover, .ocheck input.of-check:hover{ border-color:var(--blue); }
  .opt input.of-check:checked, .ocheck input.of-check:checked{ border-color:var(--blue); }
  .opt input.of-check:checked::after, .ocheck input.of-check:checked::after{ content:""; position:absolute; left:50%; top:47%; width:5.5px; height:10.5px; border:solid var(--blue-deep); border-width:0 2.2px 2.2px 0; transform:translate(-50%,-50%) rotate(45deg); }
  .opt:has(.of-check:checked){ border-color:var(--blue); background:var(--blue-050); }
  /* Enige beschikbare dienst: geen keuze nodig -> geen vakje, neutrale kaart */
  .opt-single{ cursor:default; }
  .opt-single input{ display:none; }
  .opt-single:has(input:checked){ border-color:var(--line); background:#fff; }
  .opt-body{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
  .opt-title{ font-weight:600; font-size:16px; }
  .opt-sub{ color:var(--muted); font-size:14px; }
  /* Snelheid met download-/upload-pijltjes i.p.v. 'symmetrisch' */
  .speedvis{ display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:3px; }
  .speedvis .sv{ display:inline-flex; align-items:center; gap:5px; color:var(--ink); }
  .speedvis .sv b{ font-weight:600; }
  .speedvis .sv-ico{ width:15px; height:15px; color:var(--blue-deep); flex:0 0 auto; }
  .opt-price{ text-align:right; white-space:nowrap; }
  .opt-price b{ font-size:16px; color:var(--blue-deep); }
  .opt-price small{ color:var(--muted); font-size:12px; display:block; }
  .tag{ font-size:11px; font-weight:600; color:var(--green-deep); background:#eef6e6; border-radius:6px; padding:2px 7px; margin-left:6px; text-transform:none; letter-spacing:0; vertical-align:middle; }
  .in-date{ margin-left:auto; font:inherit; font-size:15px; padding:8px 10px; border:1.5px solid var(--line); border-radius:10px; background:var(--soft); }
  .ph-note{ font-size:12.5px; color:var(--faint); font-style:italic; margin:12px 0 0; }

  .ofields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .of{ display:flex; flex-direction:column; gap:6px; }
  .of.of-wide{ grid-column:1 / -1; }
  .of > span{ font-size:13px; font-weight:600; color:var(--faint); }
  .of input{ font:inherit; font-size:16px; padding:12px 13px; border:1.5px solid var(--line); border-radius:11px; background:var(--soft); }
  .of input:user-invalid{ border-color:#d6584f; background:#fdf5f4; }
  .of-hint{ font-size:12.5px; color:var(--muted); margin-top:2px; }
  .of input:focus, .in-date:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(78,134,212,.16); }
  .ocheck{ display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; font-size:14.5px; cursor:pointer; }
  .ocheck[hidden]{ display:none; }
  .ocheck input{ width:19px; height:19px; margin-top:1px; accent-color:var(--blue-deep); flex:0 0 auto; }

  .order-summary{ position:sticky; top:20px; }
  .summary-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 22px 20px; box-shadow:0 20px 44px -30px rgba(20,40,70,.4); }
  .summary-card h3{ font-family:var(--font-display); font-size:17px; margin:0 0 10px; }
  .sum-addr{ font-size:14px; color:var(--muted); padding-bottom:14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
  .sum-edit{ flex:0 0 auto; margin-left:auto; color:var(--blue-deep); line-height:0;
             background:none; border:0; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
  .sum-edit svg{ width:16px; height:16px; display:block; }
  .name-row{ display:grid; grid-template-columns:1.1fr .85fr 1.3fr; gap:10px; }
  .name-row input{ min-width:0; }   /* anders duwt de intrinsieke inputbreedte de laatste eruit */
  .sum-lines{ list-style:none; margin:0; padding:14px 0 0; display:flex; flex-direction:column; gap:9px; }
  .sum-lines li{ display:flex; justify-content:space-between; gap:12px; font-size:15px; }
  .sum-lines li b{ font-weight:600; white-space:nowrap; }
  .sum-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:15px; }
  .sum-total b{ font-family:var(--font-display); font-size:24px; color:var(--blue-deep); }
  .sum-once{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); margin-top:6px; }
  .summary-card .btn{ width:100%; justify-content:center; margin-top:18px; }
  /* terug-knop schuift open/dicht zodat de kaart mee-groeit/krimpt i.p.v. te verspringen */
  .summary-card .order-back{ margin-top:8px; padding:10px 16px; overflow:hidden; max-height:52px;
     transition:max-height .3s ease, opacity .24s ease, margin-top .3s ease, padding .3s ease, border-width .3s ease; }
  .summary-card .order-back.is-collapsed{ max-height:0; opacity:0; margin-top:0; padding-top:0; padding-bottom:0; border-width:0; }
  .sum-reassure{ display:flex; align-items:flex-start; gap:7px; font-size:13px; color:var(--muted); margin:12px 0 0; }
  .sum-reassure .ck{ color:var(--green-deep); font-weight:700; }

  .order-done{ max-width:620px; margin:20px auto 0; text-align:center; background:#fff; border:1px solid var(--line); border-radius:20px; padding:44px 32px; }
  .done-badge{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--green); color:#fff; font-size:32px; display:grid; place-content:center; }
  .order-done p{ color:var(--muted); font-size:17px; margin:12px auto 24px; max-width:44ch; }

  /* ===== Vastgoed & ontwikkelaars ===== */
  .estate-hero .hero-photo{ background-image:url("../img/hero-vastgoed.jpg"); background-position:50% 50%; }
  .scan-hero .hero-photo{ background-image:url("../img/hero-projectscan.jpg"); background-position:42% 48%; }
  .scan-hero .hero-copy{ min-height:clamp(240px,34vh,340px); display:flex; flex-direction:column; justify-content:center; }
  .scan-hero .hero-sub{ margin:16px 0 0; }
  .aanpak-hero .hero-photo{ background-image:url("../img/estate/hero-aanpak.jpg"); background-position:58% 46%; }
  .aanpak-hero .hero-copy{ min-height:clamp(260px,36vh,360px); display:flex; flex-direction:column; justify-content:center; }
  .aanpak-hero .hero-sub{ margin:16px 0 0; }
  .waarom-hero .hero-photo{ background-image:url("../img/estate/hero-waarom.jpg"); background-position:50% 44%; }
  .waarom-hero .hero-copy{ min-height:clamp(260px,36vh,360px); display:flex; flex-direction:column; justify-content:center; }
  .waarom-hero .hero-sub{ margin:16px 0 0; }
  .tel-hero .hero-photo{ background-image:url("../img/telefonie-hero.jpg"); background-position:58% 34%; }
  .tel-hero .hero-copy{ min-height:clamp(260px,36vh,360px); display:flex; flex-direction:column; justify-content:center; }
  .tel-hero .hero-sub{ margin:16px 0 0; }
  #canvas[data-seg="business"] .b5g-hero .hero-photo{ background-image:url("../img/band-business.jpg"); background-position:72% 42%; }
  .b5g-hero .hero-copy{ min-height:clamp(260px,36vh,360px); display:flex; flex-direction:column; justify-content:center; }
  .b5g-hero .hero-sub{ margin:16px 0 0; }
  #canvas[data-seg="business"] .bzt-hero .hero-photo{ background-image:url("../img/telefonie-zakelijk-hero.jpg"); background-position:12% 30%; }
  .bzt-hero .hero-copy{ min-height:clamp(260px,36vh,360px); display:flex; flex-direction:column; justify-content:center; }
  .bzt-hero .hero-sub{ margin:16px 0 0; }
  .tel-uses--2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); max-width:760px; }
  .b5g-how2{ margin:24px 0 0; max-width:72ch; color:var(--muted); line-height:1.7; font-size:16.5px; }
  .b5g-faq{ max-width:760px; margin:22px 0 0; }
  .scan-page{ padding-top:34px; }
  .estate-hero-cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
  /* Util-balk: op smalle schermen het 3e segment inkorten tot "Vastgoed" e.d. */
  .util .useg .seg-short{ display:none; }
  @media (max-width:640px){ .util .useg .seg-full{ display:none; } .util .useg .seg-short{ display:inline; }
     .util .u-right a[href^="tel"]{ display:none; }   /* telefoonnummer breekt af op mobiel -> verbergen */
     .nav-right .mijn{ font-size:15px; }               /* 'Huismeester login' compacter zodat het op één regel past */
  }
  /* Ons model: individueel vs. collectief (groene checks + collectief-note). */
  .model-list{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:13px 30px; max-width:860px; }
  .model-list li{ display:flex; gap:11px; align-items:flex-start; font-size:16px; color:var(--ink); line-height:1.45; }
  .model-list .ck{ color:var(--green-deep); font-weight:800; flex:0 0 auto; }
  .model-note{ margin:28px 0 0; max-width:780px; color:var(--muted); font-size:15.5px; line-height:1.6;
     background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:17px 20px; }
  .model-note b{ color:var(--ink); font-weight:600; }
  .model-close{ margin:26px 0 0; max-width:780px; color:var(--muted); font-size:15.5px; line-height:1.6; }
  /* Collectief-blok: zachte achtergrond scheidt het rustig van het standaardmodel (gelijkwaardig, geen kader). */
  section.blk-soft{ background:var(--soft); }
  @media (max-width:640px){ .model-list{ grid-template-columns:1fr; } }
  .model-cta{ margin-top:26px; display:flex; align-items:center; gap:16px 18px; flex-wrap:wrap; }
  .model-cta span{ color:var(--muted); font-size:14.5px; }
  /* Kerncijfer-band (vertrouwen): sinds 2012, duizenden woningen. */
  .estate-stats-blk{ padding-bottom:30px; }
  .estate-refs{ padding-top:26px; }
  .estate-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 30px; text-align:center; }
  .estate-stats .stat{ padding:0 8px; }
  .estate-stats .stat-n{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,40px); color:var(--blue-ink); letter-spacing:-.5px; line-height:1.05; }
  .estate-stats .stat-l{ margin-top:8px; color:var(--muted); font-size:15.5px; line-height:1.4; }
  @media (max-width:640px){ .estate-stats{ grid-template-columns:1fr; gap:24px; } }
  /* Subpagina-kop (Waarom/Aanpak/Team): compacte header i.p.v. de hero. Selector
     specifiek genoeg om de algemene section.blk-padding te overrulen (anders een
     dubbel gat van 70+70px tussen kop en eerste sectie). */
  section.blk.estate-sub-head{ padding-bottom:8px; }
  section.blk.estate-sub-head + section.blk{ padding-top:34px; }
  .estate-sub-head .cov-crumb{ margin:0 0 14px; }
  .estate-sub-head h1.hh{ margin:2px 0 0; }
  .estate-sub-head p{ color:var(--muted); max-width:62ch; margin:14px 0 0; line-height:1.6; }
  /* Hub-kaarten op de landing -> subpagina's */
  .hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
  .hub-card{ display:flex; flex-direction:column; gap:9px; padding:24px 24px 22px; border:1px solid var(--line); border-radius:16px; background:var(--white); text-decoration:none; min-height:150px; transition:border-color .2s, box-shadow .2s, transform .2s; }
  .hub-card:hover{ border-color:#cfe0f5; box-shadow:0 16px 40px -30px rgba(23,52,92,.5); transform:translateY(-2px); }
  .hub-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
  .hub-title{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--blue-ink); line-height:1.2; }
  .hub-arrow{ margin-top:auto; color:var(--blue-ink); font-weight:600; font-size:14.5px; }
  .hub-cta{ margin-top:36px; }
  @media (max-width:820px){ .hub-grid{ grid-template-columns:1fr; } }
  /* Klikbaar referentie-logo: knop-reset, geen extra badge; het logo zelf is
     klikbaar en kleurt bij hover als hint. */
  .logo-btn{ -webkit-appearance:none; appearance:none; background:none; border:0; font:inherit; cursor:pointer; }
  /* Testimonial-kaartje (modal) */
  .tm-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; }
  .tm-modal[hidden]{ display:none; }
  .tm-backdrop{ position:absolute; inset:0; background:rgba(15,28,48,.55); }
  .tm-card{ position:relative; z-index:1; background:var(--white); border-radius:20px; max-width:560px; width:100%; padding:34px 36px 30px; box-shadow:0 40px 90px -40px rgba(15,28,48,.6); }
  .tm-x{ position:absolute; top:12px; right:16px; background:none; border:0; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; }
  .tm-logo{ height:30px; width:auto; max-width:200px; margin-bottom:18px; filter:grayscale(1); opacity:.7; }
  .tm-name{ font-weight:700; color:var(--ink); font-size:15.5px; }
  .tm-quote{ margin:16px 0 0; font-family:var(--font-display); font-size:clamp(18px,2.4vw,22px); line-height:1.5; color:var(--ink); }
  .tm-by{ margin-top:22px; display:flex; align-items:center; gap:13px; }
  .tm-photo{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
  .tm-author{ font-weight:700; color:var(--ink); }
  .tm-role{ color:var(--muted); font-size:14.5px; }
  .tm-site{ display:inline-block; margin-top:18px; color:var(--blue-ink); font-weight:600; font-size:15px; text-decoration:none; }
  .tm-site:hover{ text-decoration:underline; }
  /* Vastgoedteam-pagina: verhaal + contactgegevens naast een contactformulier. */
  .team-story{ max-width:64ch; margin:16px 0 0; color:var(--ink); font-size:17px; line-height:1.7; }
  .team-contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:30px 46px; align-items:start; }
  .team-contact-info h2.hh{ font-size:clamp(21px,2.5vw,26px); margin:0 0 10px; }
  .team-contact-info > p{ color:var(--muted); line-height:1.6; margin:0 0 14px; max-width:44ch; }
  .team-contact-info .team-contact{ margin:0; text-align:left; }
  @media (max-width:820px){ .team-contact-grid{ grid-template-columns:1fr; gap:22px; } }
  /* Projectscan */
  .scan-page{ padding-top:44px; }
  .scan{ margin-top:26px; display:grid; gap:18px; max-width:760px; }
  /* Resultaat = eigen scherm (geen hero): gecentreerde uitkomstkaart + terug-link. */
  .scan-result{ padding-top:34px; padding-bottom:56px; }
  .scan-result .scan{ margin-top:14px; margin-left:auto; margin-right:auto; }
  .scan-back{ max-width:760px; margin:0 auto; }
  .scan-back a{ color:var(--blue-ink); font-weight:600; font-size:14.5px; text-decoration:none; }
  .scan-back a:hover{ text-decoration:underline; }
  .scan-card{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:24px 26px; box-shadow:0 16px 44px -30px rgba(23,52,92,.4); }
  .scan-msg{ margin:12px 0 0; color:var(--orange-deep); font-size:14px; }
  .scan-badge{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin-bottom:12px; }
  .scan-badge--ok{ color:var(--green-deep); background:#eef7ea; border-color:#d4e8cc; }
  .scan-out h2.hh{ font-size:clamp(22px,2.6vw,28px); margin:0 0 8px; }
  .scan-out > p{ color:var(--muted); margin:0 0 4px; max-width:64ch; line-height:1.55; }
  .scan-addr{ color:var(--ink); font-weight:600; font-size:15px; margin:0 0 12px; }
  .scan-soft{ color:var(--muted); font-size:14.5px; margin-top:14px; }
  .scan-follow{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
  .scan-follow h3{ font-family:var(--font-display); font-weight:700; font-size:18px; margin:0 0 4px; }
  .scan-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
  .scan-lead .field label .opt{ color:var(--faint); font-weight:400; text-transform:none; letter-spacing:0; }
  .scan-lead .scan-submit{ margin-top:16px; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  .btn.is-loading{ opacity:.7; pointer-events:none; }
  @media (max-width:640px){ .scan-fields{ grid-template-columns:1fr; } }
  .spoor-grid{ margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .spoor{ border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--white); }
  .spoor h3{ font-family:var(--font-display); font-weight:700; font-size:20px; margin:0 0 8px; color:var(--blue-ink); }
  .spoor p{ color:var(--muted); margin:0; }
  .proces-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .proces-step .num{ width:34px; height:34px; border-radius:50%; background:var(--blue-deep); color:#fff; font-weight:700; font-family:var(--font-display); display:grid; place-content:center; margin-bottom:12px; }
  .proces-step h4{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 5px; }
  .proces-step p{ color:var(--muted); font-size:15px; margin:0; }
  .team-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .team-card{ text-align:center; }
  .team-photo{ width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 12px; background:var(--soft); }
  .team-photo.ph{ display:grid; place-content:center; font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--blue-deep); border:1px solid var(--line); }
  .team-card .tn{ font-family:var(--font-display); font-weight:700; }
  .team-contact{ margin-top:30px; text-align:center; font-size:17px; color:var(--muted); }
  .team-contact a{ color:var(--blue-deep); font-weight:600; text-decoration:none; }
  .team-contact a:hover{ text-decoration:underline; }
  @media (max-width:820px){ .proces-grid, .team-grid{ grid-template-columns:1fr 1fr; } .spoor-grid{ grid-template-columns:1fr; } }
  @media (max-width:460px){ .proces-grid, .team-grid{ grid-template-columns:1fr; } }

  /* ===== Dekkingspagina (/consumenten/<stad>[/<project>]) ===== */
  /* Project-hero: één statische foto met diagonale fade naar wit (geen animatie). */
  .proj-hero{ position:relative; overflow:hidden; background:var(--white); }
  .proj-hero-slides{ position:absolute; inset:0; z-index:0; }
  /* Foto vult de breedte + cover; per-project verticale uitsnede via --phs-pos. */
  .phs{ position:absolute; inset:0; background-size:cover; background-position:var(--phs-pos,center); }
  /* Smalle schermen: diagonale witte overlay-fade over de full-bleed foto. */
  .proj-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
     background:linear-gradient(78deg, var(--white) 0%, var(--white) 22%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.26) 62%, rgba(255,255,255,0) 82%); }
  /* Smalle schermen: daar loopt de tekst over de foto en viel hij weg. Sterkere sluier
     onder de tekst; de foto blijft rechts/onder zichtbaar. */
  @media (max-width:1099px){
    .proj-hero::after{
      background:linear-gradient(78deg, var(--white) 0%, var(--white) 34%, rgba(255,255,255,.88) 56%, rgba(255,255,255,.62) 74%, rgba(255,255,255,.18) 100%); }
  }
  /* Brede schermen: het is een aspect-ratio-probleem (breed vlak, gecapte hoogte
     -> cover snijdt hoogte weg). Fix = de foto een MAX-BREEDTE geven en rechts
     uitlijnen, zodat z'n verhouding fotovriendelijk blijft (weinig crop). De
     overruimte wordt wit tekstvlak; de linkerkant lost via een DIAGONALE mask
     zacht op -> geen rechthoek. */
  @media (min-width:1100px){
    .proj-hero::after{ display:none; }
    .proj-hero-slides{ left:auto; right:0; width:clamp(720px, 64%, 1180px);
      -webkit-mask-image:linear-gradient(104deg, transparent 0%, transparent 12%, #000 56%);
              mask-image:linear-gradient(104deg, transparent 0%, transparent 12%, #000 56%); }
  }
  .proj-hero-cap{ position:relative; z-index:2; }
  .proj-hero-cap .wrap{ min-height:clamp(480px,66vh,750px); display:flex; flex-direction:column; justify-content:center; padding-top:48px; padding-bottom:48px; }
  .proj-hero-cap h1{ margin:6px 0 0; max-width:18ch; }
  .proj-hero-cap .cov-badges{ margin-top:16px; }
  /* Diensten als groene checkmark-regels (boven de postcodecheck), stijl i.l.m. .trust. */
  .proj-serv{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .proj-serv li{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--ink); }
  .proj-serv .ck{ color:var(--green-deep); font-weight:800; }
  /* Postcodechecker: zelfde vorm-factor als de homepage, als brede kaart die de
     onderkant van de hero overlapt (dekt tevens het rechte stuk van de mask af). */
  .proj-checkband{ position:relative; z-index:5; margin-top:22px; padding-bottom:26px; }
  .proj-checkband--over{ margin-top:-84px; }   /* alleen overlappen als er een foto-hero is */
  .proj-checkband.scan-checkband{ padding-bottom:76px; }   /* projectscan: meer lucht onder de pill */
  .proj-checkband .checkcard{ max-width:1000px; margin:0 auto; padding:24px 30px;
     box-shadow:0 20px 44px -28px rgba(23,52,92,.32); }
  @media (max-width:900px){ .proj-checkband--over{ margin-top:-56px; } }
  .cov{ padding-top:56px; }
  .cov-head{ max-width:640px; }
  .cov-head .hh{ margin:6px 0 10px; }
  .cov-head p{ color:var(--muted); font-size:17px; margin:0; }
  .cov-crumb{ margin:0 0 18px; }
  .cov-crumb a{ color:var(--blue-deep); text-decoration:none; font-weight:600; }
  .cov-crumb a:hover{ text-decoration:underline; }
  .cov-soon{ margin:24px 0 0; max-width:640px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
  /* Projectverhaal (beperkte HTML uit de admin: alinea's, vet/cursief, lijsten, links). */
  .proj-prose{ margin:8px 0 0; max-width:680px; color:var(--ink); font-size:17px; line-height:1.65; }
  .proj-prose p{ margin:0 0 14px; }
  .proj-prose ul,.proj-prose ol{ margin:0 0 14px; padding-left:22px; }
  .proj-prose li{ margin:4px 0; }
  .proj-prose a{ color:var(--blue-deep); font-weight:600; }
  .proj-prose a:hover{ text-decoration:underline; }
  .proj-prose strong{ font-weight:700; } .proj-prose :last-child{ margin-bottom:0; }
  .cov-badges{ margin:18px 0 4px; display:flex; flex-wrap:wrap; gap:10px; }
  .cov-badge{ background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:15px; color:var(--muted); }
  .cov-badge b{ color:var(--ink); font-weight:700; }
  .cov-badge--soon{ background:var(--blue-soft,#eef4ff); border-color:var(--blue-line,#cfe0ff); color:var(--blue-deep); font-weight:600; }
  .cov-badge--ok{ background:#e8f6ec; color:#2e7d4f; }
  .cov-serv-title{ font-size:clamp(22px,2.4vw,28px); margin:36px 0 0; }
  .serv-list{ margin-top:16px; display:grid; gap:12px; max-width:640px; }
  .serv{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; border:1px solid var(--line); border-radius:14px; padding:16px 20px; background:var(--white); }
  .serv-name{ font-family:var(--font-display); font-weight:700; }
  .serv-val{ color:var(--muted); text-align:right; }
  .proj-grid{ margin:34px 0 8px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .proj-card{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:14px 18px; background:var(--white); text-decoration:none; color:var(--ink); transition:border-color .15s, box-shadow .15s, transform .15s; }
  .proj-card:hover{ border-color:var(--blue); box-shadow:0 12px 28px -20px rgba(23,52,92,.5); transform:translateY(-1px); }
  /* Naam neemt de ruimte; icoontjes en pijl staan rechts bij elkaar. (Met twee keer
     margin-left:auto werd de ruimte ertussen verdeeld en zweefden de icoontjes.) */
  .proj-name{ font-family:var(--font-display); font-weight:700; flex:1; min-width:0; }
  /* Icoontjes + pijl staan in rust onzichtbaar (ruimte blijft gereserveerd, dus geen
     verspringen) en verschijnen bij aanwijzen of toetsenbordfocus. */
  .proj-meta{ display:flex; align-items:center; gap:8px; flex:0 0 auto;
              opacity:0; transition:opacity .16s ease; }
  .proj-card:hover .proj-meta, .proj-card:focus-visible .proj-meta{ opacity:1; }
  .proj-arrow{ color:var(--blue-deep); font-weight:700; flex:0 0 auto; }
  @media (max-width:900px){ .proj-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .proj-grid{ grid-template-columns:1fr; } }

  /* ---------- responsive ---------- */
  /* Laptops / kleinere schermen: tussen 900px en desktop zat geen tussenstap,
     waardoor de hero het hele scherm vulde. Compactere hero + koppen zodat er
     meer content (met name de postcodecheck) direct in beeld komt. */
  @media (min-width:901px) and (max-width:1600px){
    h1.hh{ font-size:clamp(34px,3.4vw,48px); }
    .hero .wrap{ padding-top:52px; padding-bottom:104px; }
    .hero-sub{ font-size:18px; margin:16px 0 22px; }
    section.blk{ padding:58px 0; }
    h2.hh{ font-size:clamp(26px,2.8vw,34px); }
    .sec-intro p{ font-size:16px; }
    .band-inner{ padding:52px 28px; }
  }
  /* Lage laptopschermen (bv. 1366×768): hero nog wat verder inkorten. */
  @media (min-width:901px) and (max-height:820px){
    .hero .wrap{ padding-top:40px; padding-bottom:96px; }
    h1.hh{ font-size:clamp(32px,3vw,44px); }
    .hero-sub{ margin:14px 0 20px; }
  }

  @media (max-width:900px){
    .hero-photo{ position:relative; width:100%; height:220px; background-position:50% 30%; }
    .hero-photo::after{ background:linear-gradient(180deg, rgba(255,255,255,0) 45%, var(--white) 100%) !important; }
    .hero .wrap{ grid-template-columns:1fr; gap:34px; min-height:auto; padding-top:30px; padding-bottom:52px; }
    .checkband .checkcard{ margin-top:14px; }
    .cc-form .cc-go{ width:100%; }
    .cc-form .cc-go .btn{ width:100%; }
    .band-photo{ position:relative !important; width:100% !important; height:200px !important; }
    .steps-grid{ grid-template-columns:1fr; }
    .ben-grid{ grid-template-columns:1fr 1fr; }
    .order-grid{ grid-template-columns:1fr; }
    .order-summary{ position:static; }
    .ofields{ grid-template-columns:1fr; }
    footer.site .fcols{ grid-template-columns:1fr 1fr; }
    /* Projectscan: op mobiel niet over de (bovenstaande) tekst heen, maar ruimte eronder. */
    .scan-checkband.proj-checkband--over{ margin-top:12px; }
    /* ---- Hamburgermenu ---- */
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px; background:none; border:0; color:var(--blue-ink); cursor:pointer; }
    .nav-toggle svg{ width:26px; height:26px; }
    .nav-toggle .ico-close{ display:none; }
    nav.main.nav-open .nav-toggle .ico-menu{ display:none; }
    nav.main.nav-open .nav-toggle .ico-close{ display:inline; }
    .nav-right > .mijn{ display:none; }   /* login uit de balk; komt onderin het menu */
    /* navlinks = uitklappaneel onder de nav */
    .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; z-index:50; flex-direction:column; gap:0;
       background:var(--white); border-top:1px solid var(--line); box-shadow:0 20px 34px -20px rgba(23,52,92,.4); padding:4px 0; }
    nav.main.nav-open .navlinks{ display:flex; }
    .navlinks a{ padding:14px 24px; font-size:16px; -webkit-tap-highlight-color:transparent; }
    .navlinks .mijn-menu{ display:flex; align-items:center; gap:9px; margin-top:4px; border-top:1px solid var(--line);
       padding-top:16px; padding-bottom:16px; color:var(--blue-deep); font-weight:600; }
    .navlinks .mijn-menu .ic-user{ width:19px; height:19px; flex:0 0 auto; }
  }
  @media (max-width:560px){
    #canvas[data-home]{ --big:2.0; }   /* embleem iets minder groot op telefoons */
    .wrap{ padding:0 18px; }
    .util .wrap{ font-size:12px; gap:12px; }
    .util .u-right{ gap:12px; }
    .fields{ grid-template-columns:1fr 1fr; }
    .field:first-child{ grid-column:1 / -1; }
    .ben-grid{ grid-template-columns:1fr; }
    .bar-row{ grid-template-columns:1fr; gap:6px; }
    .bar-row .who{ font-size:14px; }
    footer.site .fcols{ grid-template-columns:1fr 1fr; }
  }
  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

  .ocheck a{ color:var(--blue-deep); text-decoration:underline; }
  .legal ol a, .legal p a{ color:var(--blue-deep); text-decoration:none; }
  .legal ol a:hover, .legal p a:hover{ text-decoration:underline; }

  /* ===== Algemene voorwaarden / juridische leespagina ===== */
  .legal{ max-width:820px; margin:0 auto; padding:44px 0 80px; color:var(--ink); }
  .legal h1{ font-size:32px; line-height:1.15; margin:0 0 6px; color:var(--blue-ink); }
  .legal .ver{ color:var(--faint); font-size:14px; margin:0 0 22px; }
  .legal .langnote{ background:#fdf6e3; border:1px solid #ecd98a; border-left:4px solid #d9a400; border-radius:8px; padding:12px 16px; font-size:14px; line-height:1.55; color:#7a5c00; margin:0 0 26px; }
  .legal .lead{ font-size:17px; }
  .legal p{ margin:0 0 14px; line-height:1.65; }
  .legal h2.deel{ margin:40px 0 8px; font-size:22px; color:var(--blue-ink); border-top:1px solid var(--line); padding-top:28px; }
  .legal h3{ margin:30px 0 8px; font-size:18px; color:var(--blue-deep); scroll-margin-top:130px; }
  .legal ol{ margin:0 0 16px; padding-left:24px; }
  .legal ol li{ margin:7px 0; line-height:1.6; }
  .legal ol.alpha{ list-style:lower-alpha; margin:8px 0; }
  .legal ul{ margin:8px 0; padding-left:22px; }
  .legal ul li{ margin:5px 0; line-height:1.6; }
  .legal-toc{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin:28px 0 8px; }
  .legal-toc h2{ font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); margin:0 0 12px; }
  .legal-toc .toc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; }
  .legal-toc .toc-h{ font-weight:700; margin:6px 0; color:var(--ink); }
  .legal-toc ol{ margin:0 0 6px; padding-left:22px; }
  .legal-toc li{ margin:3px 0; }
  .legal-toc a{ color:var(--blue-deep); text-decoration:none; }
  .legal-toc a:hover{ text-decoration:underline; }
  @media (max-width:640px){ .legal-toc .toc-cols{ grid-template-columns:1fr; } .legal h1{ font-size:26px; } }

  /* ===== Vaste telefonie (consument) ===== */
  .blk-alt{ background:var(--soft); }
  .hero-cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
  .hero-cta--center{ justify-content:center; }
  .tel-cta{ text-align:center; }
  .tel-cta .cov-head{ margin-left:auto; margin-right:auto; }
  .tel-fineprint{ color:var(--faint); font-size:14px; margin:22px 0 0; max-width:70ch; }

  /* Waarom-tegels */
  .tel-uses{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:34px; }
  .tel-use{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; }
  /* Kanttekening onder de gebruiksvoorbeelden: informatief, niet alarmerend. */
  .tel-note{ margin-top:18px; font-size:14px; line-height:1.6; color:var(--muted); max-width:760px; }
  .tel-note b{ color:var(--ink); font-weight:600; }
  .tel-use-ic{ width:44px; height:44px; border-radius:12px; background:var(--blue-050); color:var(--blue-deep);
               display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  .tel-use-ic svg{ width:23px; height:23px; }
  .tel-use h3{ margin:0 0 6px; font-size:18px; color:var(--blue-ink); }
  .tel-use p{ margin:0; color:var(--muted); line-height:1.6; }

  /* Abonnementen */
  .tel-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:34px; max-width:760px; }
  .tel-plan{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; }
  .tel-plan h3{ margin:0 0 10px; font-size:19px; color:var(--blue-ink); }
  .tel-plan-price{ margin:0 0 12px; display:flex; align-items:baseline; gap:4px; }
  .tel-plan-price b{ font-size:30px; color:var(--ink); letter-spacing:-.01em; }
  .tel-plan-price small{ color:var(--faint); font-size:15px; }
  .tel-plan-desc{ margin:0; color:var(--muted); line-height:1.6; }

  /* Apparatuur */
  .tel-equip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:34px; }
  .tel-eq{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
  .tel-eq h3{ margin:0 0 6px; font-size:17px; color:var(--blue-ink); }
  .tel-eq p{ margin:0 0 10px; color:var(--muted); line-height:1.6; }
  .tel-eq-price{ margin:0 !important; font-weight:600; color:var(--blue-deep); font-size:15px; }

  /* Telefonie-aanmeldflow (hergebruikt order/opt; hieronder de extra's) */
  .tel-addr{ display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:12px; margin:6px 0 16px; }
  .tel-addr .of span{ display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }
  .tel-addr input{ width:100%; }
  .ocard .tel-check-msg{ margin:22px 0 2px; font-size:15px; font-weight:600; }   /* wint van '.step p{margin:0}' */
  .tel-check-msg.is-ok{ color:var(--blue-deep); }
  .tel-check-msg.is-no{ color:#b4531f; }
  .tel-sub{ margin:2px 0 6px 14px; padding-left:16px; border-left:2px solid var(--line); }
  .tel-numin{ display:flex; align-items:stretch; }
  .tel-numin input{ flex:1; min-width:0; }
  .tel-numin .tel-prefix{ display:flex; align-items:center; padding:12px 14px; font-size:16px; font-weight:700;
                          color:var(--ink); background:#e8eef6; border:1.5px solid var(--line); border-right:0;
                          border-radius:11px 0 0 11px; letter-spacing:.02em; }
  .tel-numin.has-prefix input{ border-top-left-radius:0; border-bottom-left-radius:0; }
  .opt-slim{ padding-top:12px; padding-bottom:12px; }
  .sum-muted{ font-weight:600; color:var(--muted); font-size:14px; text-align:right; }
  @media (max-width:640px){ .tel-addr{ grid-template-columns:1fr 1fr; } .tel-addr .of:first-child{ grid-column:1 / -1; } }

  /* ===== Klantenservice (consument) ===== */
  /* Reset de globale FAQ-accordeonstyling (details summary::after "+"/border) die anders lekt. */
  .ks-cat, .ks-q{ border-bottom:0; }
  .ks-cat > summary::after, .ks-q > summary::after{ content:none; }
  .ks-cat > summary, .ks-q > summary{ font-family:inherit; }
  .ks-cats{ max-width:840px; margin:30px 0 0; }
  .ks-cat{ background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; }
  .ks-cat > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 20px; font-weight:700; color:var(--blue-ink); font-size:17px; }
  .ks-cat > summary::-webkit-details-marker, .ks-q > summary::-webkit-details-marker{ display:none; }
  .ks-cat > summary::marker, .ks-q > summary::marker{ content:""; }
  .ks-cat-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--blue-050); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; }
  .ks-cat-ic svg{ width:20px; height:20px; }
  .ks-cat-t{ flex:1; }
  .ks-chev{ width:20px; height:20px; color:var(--faint); transition:transform .18s ease; flex:0 0 auto; }
  details[open] > summary .ks-chev{ transform:rotate(180deg); }
  .ks-qs{ padding:0 20px 8px; }
  .ks-q{ border-top:1px solid var(--line); }
  .ks-q > summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 2px; font-weight:600; color:var(--ink); font-size:15.5px; }
  .ks-q > summary::-webkit-details-marker{ display:none; }
  .ks-q > summary .ks-chev{ margin-top:2px; }
  .ks-a{ padding:0 2px 16px; }
  .ks-a p{ margin:0; color:var(--muted); line-height:1.65; font-size:15.5px; max-width:64ch; }
  .ks-specs{ margin:16px 0 4px; max-width:420px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .ks-specs > div{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:11px 16px; background:var(--blue-050); border-top:2px solid #fff; }
  .ks-specs > div:first-child{ border-top:0; }
  .ks-specs dt{ margin:0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--blue-deep); }
  .ks-specs dd{ margin:0; font-weight:700; color:var(--ink); font-size:15px; }

  /* Zelf-diagnose */
  .ks-diag-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
  .ks-diag-copy .eyebrow{ margin-bottom:8px; }
  .ks-diag-copy > .btn{ margin-top:8px; }
  .ks-app{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
  .ks-app-h{ margin:0 0 12px; font-weight:700; color:var(--blue-ink); }
  .store-badges{ display:flex; gap:12px; flex-wrap:wrap; }
  .store-badge{ display:inline-flex; align-items:center; gap:10px; background:#000; color:#fff; border-radius:12px; padding:9px 16px; text-decoration:none; }
  .store-badge:hover{ text-decoration:none; }
  .store-badge .sb-logo{ width:24px; height:24px; flex:0 0 auto; }
  .store-badge .sb-txt{ display:flex; flex-direction:column; line-height:1.06; text-align:left; }
  .store-badge .sb-txt small{ font-size:10px; font-weight:500; letter-spacing:.01em; opacity:.92; }
  .store-badge .sb-txt b{ font-size:17px; font-weight:600; letter-spacing:.01em; }
  .store-badge.sb--play .sb-txt small{ text-transform:uppercase; letter-spacing:.06em; }
  .store-badge[aria-disabled="true"]{ cursor:default; }
  .store-badges--sm{ margin-top:14px; }
  .store-badges--sm .store-badge{ padding:7px 13px; }
  .store-badges--sm .store-badge .sb-logo{ width:21px; height:21px; }
  .store-badges--sm .store-badge .sb-txt b{ font-size:15px; }
  .ks-app-note{ margin:12px 0 0; color:var(--faint); font-size:14px; }
  .ks-diag-shot{ text-align:center; }
  .ks-diag-shot img{ max-width:300px; width:100%; height:auto; filter:drop-shadow(0 18px 40px rgba(20,34,46,.16)); }

  /* Contact-strip */
  .ks-channels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:30px; }
  .ks-ch{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; }
  .ks-ch:hover{ border-color:var(--blue); box-shadow:0 6px 18px rgba(47,95,160,.10); }
  .ks-ch-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:var(--blue-050); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; }
  .ks-ch-ic svg{ width:21px; height:21px; }
  .ks-ch-t{ display:flex; flex-direction:column; }
  .ks-ch-t b{ color:var(--blue-ink); font-size:16px; }
  .ks-ch-t span{ color:var(--muted); font-size:14.5px; }
  .ks-contact-all{ margin:22px 0 0; }
  .ks-contact-all a{ color:var(--blue-deep); text-decoration:none; font-weight:600; }
  .ks-contact-all a:hover{ text-decoration:underline; }
  @media (max-width:820px){ .ks-diag-grid{ grid-template-columns:1fr; gap:28px; } .ks-diag-shot{ order:-1; } .ks-diag-shot img{ max-width:240px; } }

  /* ===== Over OpenFiber / Storingen / Zakelijk internet ===== */
  .about-sub{ font-size:18px; }
  .about-story{ max-width:70ch; }
  .about-story p{ margin:0 0 16px; color:var(--muted); line-height:1.75; font-size:16.5px; }
  .about-mile{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
  .about-mile li{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
  .am-yr{ display:inline-block; font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--blue-deep); background:var(--blue-050); border-radius:999px; padding:4px 11px; margin-bottom:10px; }
  .about-mile h3{ margin:0 0 6px; font-size:17px; color:var(--blue-ink); }
  .about-mile p{ margin:0; color:var(--muted); line-height:1.6; }

  .out-empty{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-top:22px; max-width:640px; }
  .out-empty p{ margin:0; color:var(--muted); font-size:16px; }
  .out-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:var(--blue-050); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; }
  .out-ic svg{ width:21px; height:21px; }
  .out-empty--ok .out-ic{ background:#e8f6ec; color:#2e7d4f; }
  .out-soon{ margin:22px 0 0; display:inline-block; font-size:14px; font-weight:600; color:var(--blue-deep); background:var(--blue-050); border-radius:999px; padding:7px 14px; }

  #canvas[data-seg="business"] .bzi-hero .hero-photo{ background-image:url("../img/hero-business.jpg"); background-position:62% 34%; }
  .bzi-hero .hero-copy{ min-height:clamp(260px,36vh,360px); display:flex; flex-direction:column; justify-content:center; }
  .bzi-hero .hero-sub{ margin:16px 0 0; }
  .bzi-link{ margin:10px 0 0 !important; font-weight:600; }
  .bzi-link a{ color:var(--blue-deep); text-decoration:none; }
  .bzi-link a:hover{ text-decoration:underline; }

  /* ===== "Waar we leveren"-kaart ===== */
  .map-legend{ display:flex; gap:22px; flex-wrap:wrap; margin:26px 0 6px; }
  .ml-item{ display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--muted); }
  .ml-dot{ width:13px; height:13px; border-radius:50%; flex:0 0 auto; }
  .ml-dot--own{ background:var(--blue-deep); }
  .ml-dot--third{ background:#fff; border:2px solid var(--blue); }
  .nlmap-wrap{ position:relative; max-width:520px; margin:10px auto 0; }
  .nlmap{ width:100%; height:auto; display:block; overflow:visible; }
  /* Klikken naast een stip gaf de SVG focus, met de blauwe browserrand om de kaart.
     De stippen zelf houden wel hun focus-markering (toetsenbordgebruik). */
  .nlmap:focus, .nlmap:focus-visible{ outline:none; }
  .nlmap-land{ fill:#eaf1f9; stroke:#cddcec; stroke-width:2; }
  .nlmap-dot{ fill:#fff; stroke:var(--blue); stroke-width:2.5; cursor:pointer; }
  /* Gevulde stippen krijgen een witte rand zodat ze in een cluster van elkaar loskomen. */
  .nlmap-dot.is-own{ stroke:#fff; stroke-width:2; }
  .nlmap-dot.is-own{ fill:var(--blue-deep); }
  .nlmap-dot:focus{ outline:none; }
  .nlmap-dot:focus-visible{ stroke:var(--ink); }
  .map-card{ position:absolute; z-index:25; transform:translate(-50%,-100%);
             background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 16px;
             box-shadow:0 18px 40px -18px rgba(20,40,70,.45); min-width:150px; text-align:center; }
  /* Pijltje naar de marker toe. */
  .map-card::after{ content:""; position:absolute; left:50%; bottom:-7px; width:12px; height:12px;
                    transform:translateX(-50%) rotate(45deg); background:#fff;
                    border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  /* Details vouwen open bij klik. */
  .mc-more{ max-height:0; opacity:0; overflow:hidden;
            transition:max-height .26s ease, opacity .2s ease, margin-top .26s ease; margin-top:0; }
  .map-card.is-open{ min-width:190px; }
  .map-card.is-open .mc-more{ max-height:220px; opacity:1; margin-top:6px; }
  .mc-name{ margin:0; font-weight:700; color:var(--blue-ink); font-size:16px; white-space:nowrap; }
  .mc-net{ margin:2px 0 0; color:var(--faint); font-size:13.5px; }
  .mc-btns{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
  .mc-btns:empty{ display:none; }
  .mc-btn{ padding:8px 14px; font-size:14px; justify-content:center; }
  .place-list{ list-style:none; margin:26px 0 0; padding:0; columns:3; column-gap:28px; max-width:760px; }
  .place-list li{ display:flex; align-items:center; gap:9px; margin:0 0 9px; break-inside:avoid; font-size:15.5px; }
  .place-list a{ color:var(--blue-deep); text-decoration:none; }
  .place-list a:hover{ text-decoration:underline; }
  .place-list span:not(.ml-dot){ color:var(--muted); }
  @media (max-width:760px){ .place-list{ columns:2; } }
  @media (max-width:460px){ .place-list{ columns:1; } }
  .nlmap-water{ fill:#fff; stroke:#cddcec; stroke-width:2; }
  /* Actieve stip: donkere rand + witte gloed, zodat hij loskomt van overlappende buren. */
  .nlmap-dot.is-active{ stroke:var(--blue-ink); stroke-width:4;
                        filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 2px 6px rgba(20,40,70,.25)); }
  /* Kleine, rustige icoontjes i.p.v. tekstbadges: bijna elk gebouw heeft tegenwoordig ook
     zakelijke ruimte, dus het onderscheid mag subtiel zijn. */
  .proj-ic{ display:inline-flex; color:var(--faint); flex:0 0 auto; }
  .proj-ic svg{ width:15px; height:15px; }
  .mc-count{ margin:2px 0 0; color:var(--muted); font-size:13.5px; font-weight:600; }

  /* Vergrootglas over de kaart (alleen op apparaten met een echte cursor). */
  .nlmap-lens{ position:absolute; width:190px; height:190px; border-radius:50%; overflow:hidden;
               pointer-events:none; z-index:15; background:#fff;
               border:3px solid #fff; box-shadow:0 10px 30px -8px rgba(20,40,70,.45), 0 0 0 1px var(--line);
               transform:translate(-50%,-50%) scale(1); opacity:1;
               transition:transform .24s cubic-bezier(.4,0,.2,1), opacity .24s ease; }
  /* Bij klikken op een plaats (of wegbewegen) krimpt de loep weg i.p.v. abrupt te verdwijnen. */
  .nlmap-lens.is-hiding{ transform:translate(-50%,-50%) scale(0); opacity:0; }
  .nlmap-lens svg{ width:100%; height:100%; display:block; }
  /* In de loep dunnere randen: een dikke ring maakt een open stip optisch groter
     dan een gevulde, waardoor de individuele aansluitingen zwaarder gingen wegen. */
  .nlmap-lens .nlmap-dot{ stroke-width:1.5; }
  .nlmap-lens .nlmap-dot.is-own{ stroke-width:1.2; }
  @media (hover: none){ .nlmap-lens{ display:none !important; } }