/* ============================================================
   ScaleHub v3-3 — "Fris & Campagne" (immersief, fotogedreven)
   Volledig origineel ontwerp in ScaleHub-teal. Full-bleed
   fotopanelen + luchtige lichte secties + grote typografie.
   Bricolage Grotesque (display) · Hanken Grotesk (body)
   ============================================================ */
.im{
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --night:#04181d; --night2:#072a31;
  --ink:#0b1c1f; --body:#3a4a4c; --muted:#6a7879;
  --paper:#ffffff; --soft:#f1f7f7; --line:#e2ecec;
  --glow:#1ba7c9;
  background:var(--paper); color:var(--body);
  font-family:'Hanken Grotesk',sans-serif; font-size:18px; line-height:1.6;
}
.im h1,.im h2,.im h3,.im h4{ font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1.0; color:var(--ink); }
.im ::selection{ background:var(--glow); color:#fff; }

/* ---------- ENTRY-MOMENT ---------- */
.im-gate{ position:fixed; inset:0; z-index:300; background:var(--night); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; transition:opacity .9s ease, visibility .9s; overflow:hidden; }
.im-gate.gone{ opacity:0; visibility:hidden; pointer-events:none; }
.im-gate::before{ content:""; position:absolute; width:120vmax;height:120vmax; border-radius:50%; background:radial-gradient(circle, rgba(0,142,180,.28), transparent 60%); animation:gateGlow 7s ease-in-out infinite; }
@keyframes gateGlow{ 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.18); opacity:1 } }
.im-gate .inner{ position:relative; z-index:1; max-width:720px; }
.im-mark{ width:76px;height:76px;border-radius:50%; background:var(--brand); display:grid;place-items:center; margin:0 auto 30px; animation:markPulse 2.6s ease-out infinite; }
.im-mark img{ width:42px;height:auto; display:block; }
@keyframes markPulse{ 0%{box-shadow:0 0 0 0 rgba(0,142,180,.45)} 70%{box-shadow:0 0 0 26px rgba(0,142,180,0)} 100%{box-shadow:0 0 0 0 rgba(0,142,180,0)} }
.im-gate .lede{ font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--glow); font-weight:700; }
.im-gate h2{ color:#fff; font-size:clamp(36px,6.5vw,76px); margin:20px 0 0; line-height:1.0; }
.im-gate h2 em{ font-style:normal; color:var(--glow); }
.im-gate p{ color:rgba(255,255,255,.62); font-size:17px; margin:18px auto 0; max-width:48ch; }
.im-enter{ margin-top:38px; display:inline-flex; align-items:center; gap:12px; padding:18px 36px; border-radius:999px; background:#fff; color:var(--night); font-family:var(--disp); font-weight:700; font-size:17px; border:0; transition:transform .2s, box-shadow .25s; }
.im-enter:hover{ transform:translateY(-2px); box-shadow:0 14px 44px rgba(0,142,180,.45); }
.im-enter .arr{ transition:transform .2s; } .im-enter:hover .arr{ transform:translateX(4px); }
.im-gate .skip{ position:absolute; bottom:30px; left:0; right:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.im.locked{ overflow:hidden; height:100vh; }

/* ---------- NAV ---------- */
.im-header{ position:fixed; top:0; left:0; right:0; z-index:90; transition:background .3s, border-color .3s, box-shadow .3s; border-bottom:1px solid transparent; }
.im-header.scrolled{ background:rgba(255,255,255,.86); backdrop-filter:blur(16px); border-color:var(--line); box-shadow:0 1px 16px rgba(6,38,45,.05); }
.im-nav{ display:flex; align-items:center; gap:32px; height:76px; }
.im-brand{ display:inline-flex; align-items:center; height:34px; line-height:0; font-size:0; transition:color .3s; }
.im-brand .brand-logo{ display:block; height:34px; width:auto; }
.im-brand .brand-logo--color{ display:none; }
.im-header.scrolled .im-brand .brand-logo--white{ display:none; }
.im-header.scrolled .im-brand .brand-logo--color{ display:block; }
.im-links{ display:flex; gap:26px; }
.im-links a{ color:rgba(255,255,255,.85); font-weight:600; font-size:15px; transition:color .2s; }
.im-header.scrolled .im-links a{ color:var(--body); }
.im-links a:hover{ color:#fff; } .im-header.scrolled .im-links a:hover{ color:var(--brand-deep); }
.im-actions{ margin-left:auto; }
.im-cta{ display:inline-flex; align-items:center; gap:8px; padding:11px 21px; border-radius:999px; background:var(--brand); color:#fff; font-weight:700; font-size:14.5px; transition:.2s; }
.im-cta:hover{ background:var(--brand-bright); transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,142,180,.3); }
.im-burger{ display:none; flex-direction:column; gap:5px; width:44px;height:44px; align-items:center;justify-content:center; border-radius:10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.im-header.scrolled .im-burger{ background:var(--soft); border-color:var(--line); }
.im-burger span{ width:18px;height:2px;background:#fff;transition:.25s; }
.im-header.scrolled .im-burger span{ background:var(--ink); }
.im-burger.x span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.im-burger.x span:nth-child(2){ opacity:0; }
.im-burger.x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.im-mobile{ position:fixed; inset:0; background:var(--night); z-index:80; padding:110px var(--gut) 40px; transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1); }
.im-mobile.open{ transform:none; }
.im-mobile a{ display:block; padding:14px 0; font-family:var(--disp); font-size:32px; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.1); }
.im-mobile .im-cta{ margin-top:24px; width:100%; justify-content:center; }

/* ---------- HERO ---------- */
.im-hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; color:#fff; }
.im-hero image-slot{ position:absolute; inset:0; width:100%;height:100%; border-radius:0; --is-bg:#04181d; }
.im-hero .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,24,29,.55) 0%, rgba(4,24,29,.28) 45%, rgba(4,24,29,.9) 100%); }
/* hero-slideshow */
.hero-slides{ position:absolute; inset:0; z-index:0; background:#072a31 url('assets/impressions/hero.png') center/cover; }
.fin-slides{ position:absolute; inset:0; z-index:0; background:#04181d url('assets/impressions/finale.png') center/cover; }
.hslide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background-size:cover; background-position:center; opacity:0; transition:opacity 1.6s ease; transform:scale(1.04); }
.hslide.on{ opacity:1; animation:heroZoom 7s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.04);} to{ transform:scale(1.10);} }
.sectorflag{ position:absolute; right:var(--gut); bottom:30px; z-index:2; display:flex; align-items:center; gap:16px; color:#fff; }
.sectorflag .lbl{ text-align:right; }
.sectorflag .lbl small{ display:block; font-family:'Hanken Grotesk'; font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--glow); margin-bottom:2px; }
.sectorflag .lbl b{ font-family:var(--disp); font-weight:700; font-size:16px; }
.sectorflag .dots{ display:flex; gap:7px; }
.sectorflag .dots i{ width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.4); transition:.35s; cursor:pointer; }
.sectorflag .dots i.on{ background:var(--glow); width:24px; border-radius:4px; }
@media (max-width:760px){ .sectorflag{ display:none; } }
/* panel-slideshow (foto-slider binnen een campagne-paneel) */
.panel-slides{ position:absolute; inset:0; z-index:0; background:#072a31; }
.pslide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; }
.pslide.on{ opacity:1; }
.panel-dots{ position:absolute; right:var(--gut); bottom:34px; z-index:3; display:flex; gap:8px; }
.panel-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.3s; }
.panel-dots i.on{ background:var(--glow); width:24px; border-radius:5px; }
.im-hero .wrap-wide{ position:relative; z-index:2; width:100%; }
.im-hero .eyebrow2{ font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--glow); font-weight:700; }
.im-hero h1{ color:#fff; font-size:clamp(50px,9.5vw,140px); margin:22px 0 0; max-width:15ch; letter-spacing:-.045em; }
.im-hero h1 em{ font-style:normal; color:var(--glow); }
.im-hero .sub{ font-size:clamp(18px,1.8vw,22px); color:rgba(255,255,255,.85); max-width:50ch; margin-top:24px; }
.im-hero .cta-row{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.im-hero .scrollcue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); display:flex; flex-direction:column; align-items:center; gap:10px; }
.im-hero .scrollcue i{ width:1px; height:38px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:edcue 2s infinite; }
@keyframes edcue{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- LICHT SECTIE (fris) ---------- */
.light{ background:var(--paper); padding:clamp(80px,11vw,150px) 0; }
.light.soft{ background:var(--soft); }
.eye{ display:inline-flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--brand-deep); }
.eye .no{ font-size:13px; padding:4px 11px; border:1px solid var(--line); border-radius:999px; color:var(--brand-deep); }
.sec-h{ max-width:20ch; margin-bottom:14px; }
.sec-h2{ font-size:clamp(34px,5.5vw,78px); margin-top:18px; }
.sec-h2 em{ font-style:normal; color:var(--brand); }
.sec-intro{ font-size:clamp(17px,1.7vw,21px); color:var(--muted); max-width:56ch; margin-top:18px; }

/* herkenning kaarten (fris licht) */
.recog4{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:54px; }
.rc{ background:var(--soft); border:1px solid var(--line); border-radius:22px; padding:32px; transition:.25s; }
.rc:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(6,38,45,.08); background:#fff; }
.rc .n{ font-family:var(--disp); font-weight:800; font-size:30px; color:var(--brand); }
.rc h3{ font-size:21px; margin:12px 0 8px; }
.rc p{ font-size:15.5px; color:var(--body); }
.recog-foot{ margin-top:40px; font-family:var(--disp); font-weight:800; font-size:clamp(24px,3.2vw,42px); color:var(--ink); max-width:24ch; letter-spacing:-.03em; }
.recog-foot em{ font-style:normal; color:var(--brand); }

/* ---------- CAMPAGNE-PANELEN (full-bleed foto) ---------- */
.panels{ position:relative; }
.panel{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.panel image-slot{ position:absolute; inset:0; width:100%;height:100%; border-radius:0; --is-bg:#072a31; }
.panel .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,24,29,.25) 0%, transparent 30%, rgba(4,24,29,.55) 62%, rgba(4,24,29,.92) 100%); }
.panel .wrap-wide{ position:relative; z-index:2; width:100%; padding-bottom:clamp(64px,9vw,120px); }
.panel .pno{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.1em; color:var(--glow); }
.panel h2{ color:#fff; font-size:clamp(44px,8vw,116px); margin:14px 0 0; max-width:14ch; letter-spacing:-.045em; }
.panel p{ font-size:clamp(18px,1.9vw,23px); color:rgba(255,255,255,.88); max-width:46ch; margin-top:20px; }
.panel .cta-row{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
.panel .lnk{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; background:#fff; color:var(--night); font-family:var(--disp); font-weight:700; font-size:16px; transition:.2s; }
.panel .lnk:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.panel .lnk.ghost{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); }
.panel .lnk .arr{ transition:transform .2s; } .panel .lnk:hover .arr{ transform:translateX(4px); }

/* ---------- PLATFORM SHOWCASE (carousel) ---------- */
.show-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.caro-nav{ display:flex; gap:10px; }
.caro-nav button{ width:52px;height:52px;border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:20px; transition:.2s; }
.caro-nav button:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.caro{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:48px 0 14px; margin-top:10px; scrollbar-width:none; }
.caro::-webkit-scrollbar{ display:none; }
.slide{ flex:0 0 clamp(300px,42vw,520px); scroll-snap-align:start; background:var(--soft); border:1px solid var(--line); border-radius:24px; padding:28px; }
.slide .mk{ box-shadow:0 20px 50px rgba(6,38,45,.12); }
.slide .scap{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
.slide .scap .sn{ font-family:var(--disp); font-weight:800; color:var(--brand); font-size:15px; }
.slide .scap h4{ font-size:22px; } .slide .scap{ flex-wrap:wrap; }
.slide p{ font-size:15px; color:var(--body); margin-top:18px; }
.pillars2{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:60px; padding-top:42px; border-top:1px solid var(--line); }
.pl h4{ font-size:17px; color:var(--ink); display:flex; gap:9px; align-items:baseline; margin-bottom:7px; }
.pl h4 .d{ color:var(--brand); font-family:var(--disp); }
.pl p{ font-size:14.5px; color:var(--muted); }
.pl a{ color:var(--brand-deep); font-weight:600; }

/* ---------- CASE ---------- */
.im-case{ position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.im-case image-slot{ position:absolute; inset:0; width:100%;height:100%; border-radius:0; --is-bg:#072a31; }
.im-case .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,24,29,.3) 0%, transparent 28%, rgba(4,24,29,.6) 60%, rgba(4,24,29,.95) 100%); }
.im-case .wrap-wide{ position:relative; z-index:2; width:100%; padding-bottom:clamp(60px,9vw,120px); }
.im-case .pno{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.1em; color:var(--glow); }
.im-case .quote{ color:#fff; font-size:clamp(32px,5.5vw,76px); max-width:18ch; margin-top:14px; letter-spacing:-.04em; line-height:1.0; }
.im-case .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:920px; margin-top:42px; }
.im-case .fact .n{ font-family:var(--disp); font-weight:800; font-size:clamp(26px,3vw,40px); color:var(--glow); }
.im-case .fact p{ font-size:15px; color:rgba(255,255,255,.8); margin-top:6px; }
.im-case .wide{ margin-top:36px; font-size:16px; color:rgba(255,255,255,.66); }
.im-case .wide a{ color:var(--glow); font-weight:600; }
@media (max-width:700px){ .im-case .facts{ grid-template-columns:1fr; gap:18px; } }

/* ---------- SECTOREN ---------- */
.im-sect{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:60px; }
.im-sc{ position:relative; min-height:520px; border-radius:26px; overflow:hidden; display:flex; align-items:flex-end; cursor:pointer; }
.im-sc image-slot{ position:absolute; inset:0; width:100%;height:100%; border-radius:0; --is-bg:#072a31; }
.im-sc .ov{ position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(4,24,29,.92), rgba(4,24,29,.15) 58%, transparent); transition:.4s; }
.im-sc:hover .ov{ background:linear-gradient(0deg, rgba(4,24,29,.96), rgba(0,116,125,.5) 58%, transparent); }
.im-sc .c{ position:relative; z-index:2; padding:32px; color:#fff; }
.im-sc h3{ color:#fff; font-size:30px; margin-bottom:8px; }
.im-sc p{ font-size:14.5px; color:rgba(255,255,255,.85); }
.im-sc .lnk{ display:inline-flex; gap:8px; margin-top:16px; font-weight:700; color:#fff; font-size:15px; }
.im-sc:hover .lnk .arr{ transform:translateX(5px); } .im-sc .lnk .arr{ transition:.25s; }

/* ---------- PRIJS (teal blok) ---------- */
.im-price{ background:linear-gradient(135deg,var(--brand-deep),var(--night2)); border-radius:34px; padding:clamp(48px,7vw,96px); text-align:center; color:#fff; position:relative; overflow:hidden; }
.im-price::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 80% 0%, rgba(27,167,201,.4), transparent 60%); }
.im-price > *{ position:relative; z-index:1; }
.im-price h2{ color:#fff; font-size:clamp(32px,5vw,64px); }
.im-price h2 em{ font-style:normal; color:var(--glow); }
.im-price .big{ font-family:var(--disp); font-weight:800; font-size:clamp(60px,12vw,160px); color:#fff; letter-spacing:-.05em; line-height:.85; margin-top:18px; }
.im-price .big small{ font-family:'Hanken Grotesk'; font-size:clamp(18px,2vw,26px); color:rgba(255,255,255,.6); font-weight:500; letter-spacing:0; }
.im-price .nos{ display:flex; gap:14px 32px; justify-content:center; flex-wrap:wrap; list-style:none; padding:0; margin:30px 0 0; }
.im-price .nos li{ color:rgba(255,255,255,.82); font-size:16px; display:flex; gap:10px; align-items:center; }
.im-price .nos li::before{ content:"—"; color:var(--glow); font-weight:700; }
.im-price .btn{ margin-top:34px; background:#fff; color:var(--night); }
.im-price .btn:hover{ background:var(--soft); }

/* ---------- FAQ (licht) ---------- */
.im-faq{ max-width:920px; margin:54px auto 0; border-top:1px solid var(--line); }
.im-qa{ border-bottom:1px solid var(--line); }
.im-qa summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; align-items:center; padding:26px 0; font-family:var(--disp); font-weight:600; font-size:clamp(19px,2.2vw,26px); color:var(--ink); letter-spacing:-.02em; }
.im-qa summary::-webkit-details-marker{ display:none; }
.im-qa .pm{ flex:none; width:34px;height:34px;border-radius:50%; border:1px solid var(--line); display:grid;place-items:center; color:var(--brand); font-size:18px; transition:.3s; }
.im-qa[open] .pm{ background:var(--brand); border-color:var(--brand); color:#fff; transform:rotate(45deg); }
.im-qa .ans{ overflow:hidden; max-height:0; transition:max-height .4s ease, padding .4s ease; }
.im-qa[open] .ans{ max-height:440px; padding:0 0 28px; }
.im-qa .ans p{ font-size:17px; color:var(--body); max-width:68ch; }
.im-qa .ans a{ color:var(--brand-deep); font-weight:600; }

/* ---------- FINALE (full-bleed) ---------- */
.im-finale{ position:relative; min-height:88vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; color:#fff; }
.im-finale image-slot{ position:absolute; inset:0; width:100%;height:100%; border-radius:0; --is-bg:#04181d; }
.im-finale .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,24,29,.7), rgba(4,24,29,.55)); }
.im-finale .in{ position:relative; z-index:2; padding:40px var(--gut); }
.im-finale h2{ color:#fff; font-size:clamp(48px,9vw,140px); letter-spacing:-.05em; line-height:.92; }
.im-finale h2 em{ font-style:normal; color:var(--glow); }
.im-finale p{ color:rgba(255,255,255,.85); font-size:19px; max-width:56ch; margin:28px auto 0; }
.im-finale .cta-row{ display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap; }

/* ---------- FOOTER ---------- */
.im-foot{ background:var(--night); color:rgba(255,255,255,.7); padding:70px 0 40px; }
.im-foot-grid{ display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:38px; }
.im-foot .im-brand{ color:#fff; margin-bottom:18px; }
.im-foot .blurb{ font-size:15px; color:rgba(255,255,255,.55); max-width:32ch; }
.im-foot h6{ font-family:var(--disp); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
.im-foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.im-foot a{ color:rgba(255,255,255,.6); font-size:15px; } .im-foot a:hover{ color:var(--glow); }
.im-foot-bot{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; color:rgba(255,255,255,.45); }
.im-foot-bot b{ color:rgba(255,255,255,.72); }

@media (max-width:860px){
  .im-links{ display:none; } .im-burger{ display:flex; }
  .recog4,.pillars2,.im-sect,.im-foot-grid{ grid-template-columns:1fr; }
  .slide{ flex-basis:80vw; }
}

/* ---- teal-waas over foto's: verenigt stockbeeld met het merk + leesbaarheid ---- */
.im-hero,.panel,.im-case,.im-finale,.im-sc{ isolation:isolate; }
.im-hero::before,.panel::before,.im-case::before,.im-finale::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(155deg, rgba(0,116,125,.30), rgba(4,24,29,.22));
  mix-blend-mode:multiply;
}
.im-sc::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(0,116,125,.28); mix-blend-mode:multiply;
}

/* ============================================================
   SUBPAGINA'S (klanten + sectoren) — zelfde designsysteem
   ============================================================ */
.subhero{ position:relative; min-height:74vh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; isolation:isolate; }
.subhero .bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.subhero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(155deg, rgba(0,116,125,.34), rgba(4,24,29,.3)); mix-blend-mode:multiply; }
.subhero .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,24,29,.5) 0%, rgba(4,24,29,.25) 40%, rgba(4,24,29,.9) 100%); }
.subhero .wrap-wide{ position:relative; z-index:2; width:100%; padding-top:120px; padding-bottom:clamp(48px,7vw,90px); }
.subhero .badge2{ display:inline-block; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--glow); font-weight:700; }
.subhero h1{ color:#fff; font-size:clamp(38px,6vw,84px); margin:18px 0 0; max-width:18ch; letter-spacing:-.04em; }
.subhero h1 em{ font-style:normal; color:var(--glow); }
.subhero .sub{ font-size:clamp(17px,1.7vw,21px); color:rgba(255,255,255,.85); max-width:60ch; margin-top:22px; }
.subhero .cta-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.crumb{ font-size:13.5px; color:var(--muted); padding:18px 0 0; }
.crumb a{ color:var(--brand-deep); font-weight:600; }
.crumb span{ margin:0 8px; opacity:.5; }

.prose{ max-width:64ch; }
.prose p{ font-size:clamp(17px,1.5vw,20px); color:var(--body); margin-bottom:20px; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ color:var(--brand-deep); font-weight:600; }
.prose .lead-h{ font-size:clamp(26px,3.4vw,42px); }

/* module/feature rij (tekst + mockup), afwisselend */
.featrow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,72px); align-items:center; padding:clamp(34px,5vw,64px) 0; border-top:1px solid var(--line); }
.featrow:nth-child(even) .fr-vis{ order:2; }
.featrow .fr-step{ font-family:var(--disp); font-weight:800; font-size:14px; color:var(--brand); letter-spacing:.04em; }
.featrow h3{ font-size:clamp(22px,2.8vw,32px); margin:10px 0 12px; }
.featrow p{ font-size:16.5px; color:var(--body); }
.featrow ul{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; }
.featrow li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--body); }
.featrow li::before{ content:"✓"; color:#0a7d4f; font-weight:800; }
.featrow .fr-vis{ display:flex; justify-content:center; }
.featrow .fr-vis .mk{ max-width:440px; box-shadow:var(--shadow); }
@media (max-width:820px){ .featrow{ grid-template-columns:1fr; } .featrow:nth-child(even) .fr-vis{ order:0; } }

/* before/after */
.twin{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.twin .tc{ border-radius:20px; padding:30px; }
.twin .before{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.twin .after{ background:rgba(27,167,201,.12); border:1px solid rgba(27,167,201,.3); }
.twin .tc .lab{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:12px; }
.twin .after .lab{ color:var(--glow); }
.twin .tc p{ color:rgba(255,255,255,.85); font-size:16px; }
@media (max-width:760px){ .twin{ grid-template-columns:1fr; } }

/* klanten casecards */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.casecard{ border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:.25s; }
.casecard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.casecard .ph{ height:200px; background-size:cover; background-position:center; }
.casecard .b{ padding:24px; display:flex; flex-direction:column; flex:1; }
.casecard .chip{ align-self:flex-start; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--teal-050); color:var(--brand-deep); border:1px solid var(--teal-100); }
.casecard .chip.impl{ background:#fdf3e3; color:#8a5a10; border-color:#f0dcc0; }
.casecard h3{ font-size:20px; margin:14px 0 8px; }
.casecard p{ font-size:15px; color:var(--body); flex:1; }
.casecard .lnk{ margin-top:16px; font-weight:700; color:var(--brand-deep); font-size:14.5px; }
@media (max-width:820px){ .cases{ grid-template-columns:1fr; } }

/* kpi/stat regels */
.statrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:34px; }
.statrow .kpi .n{ font-family:var(--disp); font-weight:800; font-size:clamp(22px,2.6vw,32px); color:var(--glow); }
.statrow .kpi p{ font-size:14.5px; color:rgba(255,255,255,.8); margin-top:6px; }
@media (max-width:700px){ .statrow{ grid-template-columns:1fr; } }

.bandline{ text-align:center; font-size:clamp(18px,2vw,24px); font-family:var(--disp); font-weight:700; color:var(--ink); letter-spacing:-.02em; max-width:34ch; margin:0 auto; }
.bandline a{ color:var(--brand-deep); }