@font-face { font-family:'Fira Sans'; src:url('../fonts/FiraSans-Light.otf') format('opentype'); font-weight:300; }
@font-face { font-family:'Fira Sans'; src:url('../fonts/FiraSans-Regular.otf') format('opentype'); font-weight:400; }
@font-face { font-family:'Fira Sans'; src:url('../fonts/FiraSans-Medium.otf') format('opentype'); font-weight:500; }
@font-face { font-family:'Fira Sans'; src:url('../fonts/FiraSans-SemiBold.otf') format('opentype'); font-weight:600; }
@font-face { font-family:'Fira Sans'; src:url('../fonts/FiraSans-Bold.otf') format('opentype'); font-weight:700; }
@font-face { font-family:'Fira Sans'; src:url('../fonts/FiraSans-Heavy.otf') format('opentype'); font-weight:900; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
/* Landing scrolls; overlays are fixed full-screen */
html { scroll-behavior:auto; }
html, body { height:auto; overflow:auto; }
body { font-family:'Rubik',sans-serif; background:#fff; color:#000; overflow-x:hidden; overflow-y:auto; margin:0; }
#root { min-height:100vh; }

/* ══════════════════════════════════════════
   NEW LANDING — v3 (Figma: new-layout-1-mei)
══════════════════════════════════════════ */

/* ── Hero: full-bleed video with dark gradient overlay ── */
.lp-hero {
  position:relative;
  width:100%;
  height:100vh;
  min-height:700px;
  overflow:hidden;
  background:#000;
  z-index:5;
}

/* video fills the hero */
.lp-hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* dark gradient bottom overlay — exact from Figma:
   linear-gradient(rgba(0,0,0,0) → rgba(0,0,0,0.9)) */
.lp-hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.85) 100%);
  z-index:1;
  pointer-events:none;
}

/* Inner wrapper that caps hero content to 1440px and centers it.
   Video + overlay stay full-bleed; everything positioned (logo, G, copy, pill)
   sits inside this 1440 box so the layout aligns to the same content column. */
.lp-hero-inner {
  position:absolute;
  inset:0;
  max-width:1440px;
  margin:0 auto;
  z-index:2;
  pointer-events:none;
}
.lp-hero-inner > * { pointer-events:auto; }

/* filled G shape — top right, exact reference position.
   Crop is already built into the asset — do NOT shift up.
   Sits inside the 1440 content column so its right edge aligns with
   the same margin as logo/copy/pill instead of bleeding to the viewport edge. */
.lp-g-filled {
  position:absolute;
  width:clamp(220px,22vw,340px);
  height:auto;
  top:0;
  right:clamp(32px,4vw,60px);
  z-index:2;
  pointer-events:none;
}

/* logo — top left per Figma: left=141, top=42 */
.lp-logo {
  position:absolute;
  left:clamp(32px,4vw,60px);
  top:42px;
  height:60px;
  z-index:10;
  display:block;
}

/* hero copy block — absolute, bottom-left over the video.
   Sits at the SAME baseline as the pill so the bottom of the sub-text and
   the pill share one horizontal line. */
.lp-hero-copy {
  position:absolute;
  left:clamp(32px,4vw,60px);
  bottom:clamp(60px,calc(16vh - 40px),130px);
  z-index:10;
  max-width:820px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.lp-hero-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:800; /* Fira Sans Extra Bold */
  font-size:clamp(36px,4.3vw,62px);
  line-height:1.18;
  color:#fff;
  margin-bottom:20px;
}
.lp-hero-title .lp-hero-title-green {
  color:#3aaa35; /* groen — matches brand green */
}
.lp-hero-title .lp-hero-title-dot {
  color:#fff;
}
.lp-hero-sub {
  font-family:'Rubik',sans-serif;
  font-weight:300; /* Rubik Light */
  font-size:18px;
  line-height:1.78;
  letter-spacing:-0.01em;
  color:#fff;
  max-width:720px;
}

/* social proof button — absolute, bottom-right over the video.
   Shares its `bottom` value with .lp-hero-copy so text + pill align. */
.lp-hero-pill {
  position:absolute;
  right:clamp(32px,4vw,60px);
  bottom:clamp(60px,calc(16vh - 40px),130px);
  z-index:10;
  display:flex;
  align-items:center;
  gap:15px;
  height:52px;
  padding:0 22px 0 13px;
  border-radius:100px;
  background:rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.4);
  white-space:nowrap;
  cursor:default;
}
.lp-hero-pill img {
  height:32px;
  border-radius:99px;
}
.lp-hero-pill span {
  font-family:'Rubik',sans-serif;
  font-weight:300; /* Rubik Light */
  font-size:18px;
  line-height:1;
  color:#fff;
}
.lp-hero-pill span b {
  font-weight:700; /* alleen "2.500+" bold */
}

/* ── Scroll story section ── */
/* big G-line watermark — Figma: left=140, top=986, w=410, h=695 */
.lp-g-line {
  position:absolute;
  left:140px;
  top:0;
  width:410px;
  height:695px;
  pointer-events:none;
  user-select:none;
  opacity:0.8;
}

/* ── Statement ── */
.lp-statement {
  background:#fff;
  padding:100px 0 60px;
  opacity:0;
  transform:translateY(32px);
}
.lp-statement h2 {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:clamp(32px,3.45vw,50px);
  line-height:1.2;
  color:#000;
  text-align:left;
  padding:0 clamp(32px,9.7vw,140px);
  max-width:1440px;
  margin:0 auto;
}

/* ── Cards ── */
.lp-cards {
  padding:0 0 140px;
  background:#fff;
}
.lp-cards-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

/* ── Shared centred container ── */
.lp-container {
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(32px,9.7vw,140px);
}

/* ── Card base ── */
.lp-card {
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  height:429px;
  opacity:0;
  transform:translateY(48px);
  transition:
    box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
    transform 0.3s cubic-bezier(0.16,1,0.3,1);
  will-change:transform,opacity;
}
.lp-card:hover {
  /* hover effect removed */
}

/* card 1: light green bg — rgb(234,247,236) */
.lp-card-1 {
  background:#EAF7EC;
}
/* card 2: white with green border */
.lp-card-2 {
  background:#fff;
  border:1px solid rgb(52,168,69);
}
/* card 3: solid green */
.lp-card-3 {
  background:rgb(55,179,74);
}
/* card 4: light green */
.lp-card-4 {
  background:#EAF7EC;
}

.lp-card-inner {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* big ghost number */
.lp-card-num {
  position:absolute;
  top:0; right:44px;
  font-family:'Fira Sans',sans-serif;
  font-weight:400;
  font-size:188px;
  line-height:1.2;
  color:rgba(0,0,0,0.07);
  user-select:none;
  letter-spacing:-4px;
}

.lp-card-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:39px;
  line-height:1.2;
  margin-bottom:16px;
  color:#000;
}
.lp-card-3 .lp-card-title { color:#fff; }

.lp-card-desc {
  font-family:'Fira Sans',sans-serif;
  font-weight:300;
  font-size:16.6px;
  line-height:1.75;
  color:#000;
  max-width:385px;
}
.lp-card-3 .lp-card-desc { color:#fff; }

/* arrow CTA */
.lp-card-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.2);
  margin-top:20px;
  font-size:13px;
  color:#000;
  opacity:0;
  transform:translateX(-8px);
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
  align-self:flex-start;
}
.lp-card-3 .lp-card-arrow { border-color:rgba(255,255,255,0.4); color:#fff; }
.lp-card:hover .lp-card-arrow { opacity:1; transform:translateX(0); }

/* ── Footer ── */
.lp-footer {
  background:#fff;
  box-shadow:0 -20px 140px 0 rgba(0,0,0,0.1);
  padding:118px 0 96px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lp-footer-logo { height:80px; margin-bottom:0; }
.lp-footer-bar {
  width:100%;
  background:#EAF7EC;
  padding:41px 0;
  display:flex;
  justify-content:center;
}
.lp-footer-copy {
  font-family:'Fira Sans',sans-serif;
  font-weight:300;
  font-size:14.5px;
  color:#000;
  display:flex;
  gap:80px;
}

/* ── Blob decorations ── */
.blob {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  animation:blobFloat 8s ease-in-out infinite;
}
@keyframes blobFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  50% { transform:translate(20px,-15px) scale(1.05); }
}

/* ── Scroll story section ──
   Figma: text at left=259, top=1077, w=943
   font: Fira Sans regular, 40.9px, color rgb(190,190,190) → reveals to black
*/
.lp-story {
  position:relative;
  background:#fff;
  overflow:visible;
  z-index:1;
}
.lp-story-sticky {
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.lp-story-inner {
  padding:0 40px;
  max-width:1440px;
  width:100%;
  margin:0 auto;
}
/* Each sentence on its own line */
.lp-story-sentence {
  display:block;
  font-family:'Fira Sans',sans-serif;
  font-weight:400;
  font-size:clamp(24px,2.85vw,41px);
  line-height:1.0;
  color:rgb(190,190,190);
  margin-bottom:0;
  transition:none;
  will-change:color,opacity;
}

/* G-line sits in story section */
.lp-story-gline-wrap {
  position:absolute;
  left:clamp(32px,9.7vw,140px);
  top:60px;
  pointer-events:none;
}
.lp-story-gline-wrap img {
  width:clamp(200px,28.5vw,410px);
  opacity:0.7;
}

/* ── Statement ── */
.lp-statement {
  background:#fff;
  padding:120px 0 80px;
  opacity:0;
  transform:translateY(32px);
}
.lp-statement-inner {
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(32px,4vw,60px);
}
.lp-statement h2 {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:clamp(32px,5vw,67px); /* responsive */
  line-height:1.1;
  color:#000;
  text-align:left;
}
.lp-statement-green { color:#31A042; }

/* ── Cards ── */
.lp-cards {
  padding:0 0 140px;
  background:#fff;
}
.lp-cards-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:24px;
}

/* ── Shared centred container ── */
.lp-container {
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(32px,4vw,60px);
}

.lp-card {
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  height:400px;
  opacity:0;
  transform:translateY(48px);
  transition:
    box-shadow 0.6s cubic-bezier(0.16,1,0.3,1),
    transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change:transform,opacity;
  transform-style:preserve-3d;
  perspective:1200px;
}
.lp-card.is-tilting {
  transition:
    box-shadow 0.5s cubic-bezier(0.16,1,0.3,1),
    transform 0.15s cubic-bezier(0.22,1,0.36,1);
}
.lp-card:hover {
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.18), 0 12px 24px -12px rgba(0,0,0,0.10);
}
.lp-card:hover .lp-card-bg {
  transform:translateZ(40px) scale(1.04);
}
.lp-card:hover .lp-card-inner {
  transform:translateZ(60px);
}
.lp-card-inner-wrap {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.lp-card-inner {
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change:transform;
}
.lp-card-hover-disabled-2 {}

/* card backgrounds */
/* card backgrounds — moved to child .lp-card-bg layer for 3D parallax */
.lp-card-bg {
  position:absolute;
  inset:0;
  border-radius:inherit;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
  transform:translateZ(0);
  will-change:transform;
}
.lp-card-1 .lp-card-bg { background:url('../assets/card-bg-1.png') center/cover no-repeat; }
.lp-card-2 .lp-card-bg { background:#fff; }
.lp-card-3 .lp-card-bg { background:url('../assets/card-bg-3.png') center/cover no-repeat; }
.lp-card-4 .lp-card-bg { background:url('../assets/card-bg-1.png') center/cover no-repeat; filter:hue-rotate(8deg) saturate(0.6); }
.lp-card-2 { border:1.5px solid #34A845; }

.lp-card-inner {
  position:absolute;
  inset:0;
  padding:40px 44px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.lp-card-num {
  position:absolute;
  top:16px; right:32px;
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:180px;
  line-height:1;
  color:rgba(0,0,0,0.07);
  user-select:none;
  letter-spacing:-4px;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change:transform;
}
.lp-card:hover .lp-card-num {
  transform:translateZ(30px);
}
.lp-card-3 .lp-card-num { color:rgba(255,255,255,0.12); }

.lp-card-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:clamp(24px,2.4vw,38px);
  line-height:1.15;
  margin-bottom:12px;
  color:#000;
}
.lp-card-3 .lp-card-title { color:#fff; }
.lp-card-1 .lp-card-title, .lp-card-2 .lp-card-title { font-weight:900; }

.lp-card-desc {
  font-family:'Fira Sans',sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  color:#000;
  max-width:380px;
  opacity:0.75;
}
.lp-card-3 .lp-card-desc { color:#fff; opacity:0.85; }

/* arrow CTA */
.lp-card-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.2);
  margin-top:20px;
  font-size:13px;
  color:#000;
  opacity:0;
  transform:translateX(-8px);
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
  align-self:flex-start;
}
.lp-card-3 .lp-card-arrow { border-color:rgba(255,255,255,0.4); color:#fff; }
.lp-card:hover .lp-card-arrow { opacity:1; transform:translateX(0); }

/* ── Footer strip ── */
.lp-footer {
  background:#eaf7ec;
  padding:28px 0;
}
.lp-footer-inner {
  max-width:1440px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.lp-footer-logo { height:44px; }
.lp-footer-copy {
  font-family:'Fira Sans',sans-serif;
  font-weight:300;
  font-size:13px;
  color:#000;
  opacity:0.5;
  display:flex;
  gap:40px;
}

/* ── Blob decorations (kept for section overlays compat) ── */
.blob {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  animation:blobFloat 8s ease-in-out infinite;
}
@keyframes blobFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  50% { transform:translate(20px,-15px) scale(1.05); }
}

/* ── SECTION OVERLAY ── */
.section-overlay {
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1);
}
.section-overlay.open {
  opacity:1;
  pointer-events:all;
}

.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 48px;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.section-logo { display:flex; align-items:center; gap:12px; }
.section-logo img { height:32px; }

.section-nav-pills {
  display:flex;
  align-items:center;
  gap:4px;
}
.section-pill {
  padding:7px 18px;
  border-radius:99px;
  font-family:'Fira Sans',sans-serif;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  border:none;
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6);
  transition:all 0.2s ease;
  letter-spacing:0.02em;
}
.section-pill.active {
  background:rgba(255,255,255,0.95);
  color:#000;
}
.section-pill:hover:not(.active) {
  background:rgba(255,255,255,0.18);
  color:#fff;
}

.section-close {
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  transition:background 0.2s ease;
}
.section-close:hover { background:rgba(255,255,255,0.22); }

.section-body {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  scroll-behavior:smooth;
}

/* Content styles */
.content-stage {
  min-height:calc(100vh - 81px);
  display:flex;
  flex-direction:column;
  /* match header/subnav gutters so titles + body align with the logo */
  padding:64px 36px;
  max-width:1440px;
  width:calc(100% - 80px);
  margin:0 auto;
}

.content-kicker {
  font-family:'Fira Sans',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.5;
  margin-bottom:16px;
}
/* Hide the small kicker label above the title — only the H1 stays. */
.content-kicker { display:none; }
.content-h1 {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:clamp(40px,5vw,72px);
  line-height:1.0;
  margin-bottom:24px;
}
.content-lead {
  font-family:'Rubik',sans-serif;
  font-weight:300;
  font-size:21px;
  line-height:1.65;
  max-width:660px;
  opacity:0.8;
  margin-bottom:56px;
}

/* Cards grid */
.cards-row {
  display:grid;
  gap:20px;
  margin-bottom:48px;
}
.cards-row.two { grid-template-columns:1fr 1fr; }
.cards-row.three { grid-template-columns:1fr 1fr 1fr; }
.cards-row.four { grid-template-columns:1fr 1fr 1fr 1fr; }

.card {
  border-radius:20px;
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:transform 0.25s ease;
}
.card:hover { /* hover removed */ }

.card-light { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); }
.card-green { background:#31A042; }
.card-yellow { background:#FFB300; color:#000; }
.card-white { background:#fff; color:#000; }
.card-dark { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.08); }

.card-icon {
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  margin-bottom:20px;
  background:transparent !important;
  color:#37B34A !important;
}
/* Force Font Awesome to render in light/regular (outline) weight where available */
.card-icon i, .card-icon .fa, .card-icon .fas, .card-icon .far {
  font-weight:400 !important;
}
/* Lucide outline icons inside card-icon */
.card-icon svg, .card-icon [data-lucide] {
  width:32px;
  height:32px;
  stroke:#37B34A !important;
  stroke-width:1.6;
  fill:none;
  color:#37B34A;
}
/* Lucide icons inline anywhere — green outline default */
[data-lucide] svg, svg.lucide {
  stroke-width:1.6;
}
.card-label {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:1.2;
  margin-bottom:10px;
}
.card-text {
  font-family:'Rubik',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  opacity:0.75;
}

/* Process flow */
.process-flow {
  display:flex;
  align-items:stretch;
  gap:0;
  margin-bottom:48px;
}
.process-step {
  flex:1;
  padding:28px 28px 28px 36px;
  position:relative;
  cursor:default;
  transition:all 0.25s ease;
}
.process-step:first-child { border-radius:16px 0 0 16px; padding-left:28px; }
.process-step:last-child { border-radius:0 16px 16px 0; }
.process-arrow {
  position:absolute;
  right:-18px; top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.process-num {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:40px;
  line-height:1;
  opacity:0.15;
  margin-bottom:8px;
}
.process-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:22px;
  margin-bottom:10px;
}
.process-text {
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:16px;
  font-size:14px;
  line-height:1.55;
  opacity:0.95;
}

/* Before/after reveal */
.reveal-row {
  display:grid;
  grid-template-columns:1fr 60px 1fr;
  gap:0;
  align-items:center;
  margin-bottom:48px;
}
.reveal-col {
  padding:36px;
  border-radius:20px;
}
.reveal-divider {
  display:flex; align-items:center; justify-content:center;
  font-size:24px; opacity:0.4;
}
.reveal-label {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:20px;
  opacity:0.5;
}
.reveal-item {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:'Rubik',sans-serif;
  font-size:16px;
  line-height:1.5;
  opacity:0.8;
}
.reveal-item:last-child { border-bottom:none; }
.reveal-dot {
  width:6px; height:6px;
  border-radius:50%;
  margin-top:7px;
  flex-shrink:0;
}

/* Insight pills */
.insight-grid {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:48px;
}
.insight-pill {
  padding:14px 22px;
  border-radius:99px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  font-family:'Fira Sans',sans-serif;
  font-weight:600;
  font-size:16px;
  display:flex; align-items:center; gap:10px;
  transition:all 0.2s ease;
  cursor:default;
}
.insight-pill:hover { /* hover removed */ }

/* Custom bullet/check icons (loaded as inline svg backgrounds) */
.el-bullet, .el-check {
  display:inline-block;
  flex-shrink:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.el-bullet { width:7px; height:12px; margin-top:7px; margin-right:14px; background-image:url('../assets/icon-bullet.svg'); }
.el-check  { width:14px; height:13px; margin-top:6px; margin-right:12px; background-image:url('../assets/icon-check.svg'); }

.el-row { display:flex; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.06); }
.el-row:last-child { border-bottom:none; }
.el-row span { font-family:'Rubik',sans-serif; font-weight:300; font-size:17px; line-height:1.6; color:inherit; }

/* Green-bordered light card */
.card-light.card-greenborder {
  border:1.5px solid #37B34A;
  background:#E1EDE3 !important;
}

/* Quote block */
.quote-block {
  padding:40px 48px;
  border-radius:20px;
  border-left:4px solid #31A042;
  background:rgba(49,160,66,0.1);
  margin-bottom:48px;
}
.quote-text {
  font-family:'Caveat',cursive;
  font-size:28px;
  line-height:1.45;
  margin-bottom:16px;
}
.quote-attr {
  font-family:'Rubik',sans-serif;
  font-size:13px;
  opacity:0.5;
}

/* Sub-nav dots — hidden; navigation happens via the top sub-chips. */
.sub-nav {
  display:none;
  align-items:center;
  gap:8px;
  position:fixed;
  right:40px;
  top:50%;
  transform:translateY(-50%);
  flex-direction:column;
  z-index:200;
}
.sub-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  cursor:pointer;
  transition:all 0.2s ease;
}
.sub-dot.active {
  width:10px; height:10px;
  background:#fff;
}

/* Themes per section — all unified to soft green inner-page bg per Figma */
.theme-dark,
.theme-light,
.theme-mid,
.theme-yellow {
  background:#EAF7EC;
  color:#000;
  position:relative;
}

/* Decorative background layers (new soft cream→mint gradient + fixed G outline) */
.section-overlay::before {
  content:'';
  position:fixed; /* fixed so the bg + G don't move when navigating chapters */
  inset:0;
  background:url('../assets/binnenpagina-bg-new.png') center/cover no-repeat, #EAF7EC;
  z-index:0;
  pointer-events:none;
}
.section-overlay::after {
  content:'';
  position:fixed; /* fixed: G stays in place across chapter changes */
  /* 30% smaller than before — was clamp(360,42vw,640) */
  top:0;
  /* shifted 100px to the right (was clamp(120,20vw,288)) */
  right:clamp(20px,calc(20vw - 100px),188px);
  width:clamp(252px,29vw,448px);
  height:auto;
  aspect-ratio:280/372;
  background:url('../assets/losse-g-binnenpagina.png') no-repeat top right/contain;
  z-index:0;
  pointer-events:none;
  opacity:0.9;
}

/* Section header & body need to sit above bg layers */
.section-header,
.section-body,
.sub-nav {
  position:relative;
  z-index:2;
}

/* Override section-header to match Figma floating pill style */
.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 36px;
  flex-shrink:0;
  margin:0 auto;
  max-width:1440px;
  width:calc(100% - 80px);
  background:linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 200%), rgba(255,255,255,0.8);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,1);
  border-top:none;
  border-radius:0 0 20px 20px;
  box-shadow:0 4px 100px rgba(0,0,0,0.1);
}

/* Subnav chip strip — sits below header on green bg */
.section-subnav {
  display:flex;
  align-items:center;
  gap:12px;
  padding:24px 36px 0;
  margin:0 auto;
  max-width:1440px;
  width:calc(100% - 80px);
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}
.section-subchip {
  padding:10px 28px;
  border-radius:7px;
  background:#fff;
  border:1px solid #fff;
  color:#000;
  font-family:'Rubik',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:28px;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
}
.section-subchip:hover { background:rgba(255,255,255,0.85); }
.section-subchip.active {
  background:#37B34A;
  border-color:#37B34A;
  color:#fff;
  font-weight:500;
}

/* Logo clickable */
.section-logo { cursor:pointer; }
.section-logo img { height:48px; width:auto; }

/* Theme overrides for the new header — all same now */
.theme-dark .section-header,
.theme-light .section-header,
.theme-mid .section-header,
.theme-yellow .section-header {
  border-bottom-color:transparent;
}

/* Pill nav: numbered chips, right-aligned next to the close button */
.section-nav-pills {
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto; /* push to the right, against the close button */
  margin-right:16px;
}
.section-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent !important;
  color:#000;
  cursor:pointer;
  font-family:'Rubik',sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:28px;
  letter-spacing:0;
  transition:opacity 0.2s ease;
  opacity:0.85;
}
.section-pill:hover:not(.active) {
  opacity:1;
  color:#000;
  background:transparent !important;
}
.section-pill.active {
  background:transparent !important;
  color:#000;
  opacity:1;
}
.section-pill .pill-num {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  background:#37B34A;
  color:#fff;
  font-family:'Rubik',sans-serif;
  font-weight:700;
  font-size:13px;
  line-height:1;
  flex-shrink:0;
}
.section-pill .pill-label {
  text-decoration:none;
}
.content-stage .card u {
  text-decoration:none;
}
.section-pill.active .pill-label {
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}

/* Close button */
.section-close {
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.06);
  color:#000;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  transition:background 0.2s ease;
}
.section-close:hover { background:rgba(0,0,0,0.12); }

/* Logo always green/RGB version on light bg */
.section-logo img { filter:none !important; }

/* Sub-dots dark by default for light bg */
.sub-dot { background:rgba(0,0,0,0.2); }
.sub-dot.active { background:#37B34A; }

.theme-light .section-header { border-bottom-color:rgba(0,0,0,0.08); }
.theme-light .card-light { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); }
.theme-light .card-icon { background:rgba(49,160,66,0.1); }
.theme-light .card-label,.theme-light .content-h1,.theme-light .content-kicker { color:#000; }
.theme-light .card-text { color:#444; }
.theme-light .content-lead { color:#444; }
.theme-light .reveal-item { border-bottom-color:rgba(0,0,0,0.06); color:#333; }
.theme-light .insight-pill { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.1); color:#000; }
.theme-light .insight-pill:hover { background:rgba(0,0,0,0.09); }
.theme-light .sub-dot { background:rgba(0,0,0,0.2); }
.theme-light .sub-dot.active { background:#31A042; }
.theme-light .process-step { color:#000; }
.theme-light .process-num { color:#000; }
.theme-light .reveal-col { background:rgba(0,0,0,0.04); }
.theme-light .process-arrow { background:#f1f1f1; color:#31A042; border:2px solid rgba(49,160,66,0.3); }

.theme-yellow .section-header { border-bottom-color:rgba(0,0,0,0.08); }
.theme-yellow .card-light { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); }
.theme-yellow .card-label,.theme-yellow .content-h1,.theme-yellow .content-kicker { color:#000; }
.theme-yellow .card-text { color:#3a2f00; }
.theme-yellow .content-lead { color:#3a2f00; opacity:1; }
.theme-yellow .sub-dot { background:rgba(0,0,0,0.2); }
.theme-yellow .sub-dot.active { background:#0d2810; }
.theme-yellow .insight-pill { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.12); color:#000; }
.theme-yellow .quote-block { border-left-color:#0d2810; background:rgba(0,0,0,0.08); }

/* Fade in animation for content */
.fade-up {
  animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}
.delay-1 { animation-delay:0.08s; }
.delay-2 { animation-delay:0.16s; }
.delay-3 { animation-delay:0.24s; }
.delay-4 { animation-delay:0.32s; }

/* Scrollbar */
.section-body::-webkit-scrollbar { width:4px; }
.section-body::-webkit-scrollbar-track { background:transparent; }
.section-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2); border-radius:2px; }

/* Energiehuis diagram */
.energiehuis {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto;
  gap:16px;
  margin-bottom:48px;
}
.energiehuis-center {
  grid-column:1/-1;
  padding:28px;
  border-radius:20px;
  background:#31A042;
  display:flex;
  align-items:center;
  gap:24px;
}
.energiehuis-item {
  padding:24px;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
}
.energiehuis-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:18px;
  margin-bottom:8px;
}
.energiehuis-list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.energiehuis-list li {
  font-family:'Rubik',sans-serif;
  font-size:16px;
  font-weight:300;
  opacity:0.95;
  padding-left:24px;
  position:relative;
  line-height:1.55;
}
.energiehuis-list li::before {
  content:'';
  position:absolute;
  left:0; top:6px;
  width:14px; height:13px;
  background:url('../assets/icon-check.svg') no-repeat center / contain;
}

/* Slide-in from origin */
.section-overlay {
  transform-origin: var(--origin-x,50%) var(--origin-y,50%);
}

/* Large stat */
.big-stat {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.big-stat-num {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:56px;
  line-height:1;
  color:#31A042;
}
.big-stat-label {
  font-family:'Rubik',sans-serif;
  font-size:16px;
  opacity:0.6;
}

/* Side-by-side image + text layout (3:4 ratio, 20px radius) */
.img-text-row {
  display:flex;
  align-items:center;
  gap:32px;
}
.img-text-row.reverse { flex-direction:row-reverse; }
.img-text-row .it-img {
  flex:0 0 360px;
  width:360px;
  aspect-ratio:4/3;
  border-radius:20px;
  object-fit:cover;
  display:block;
}
.img-text-row .it-text {
  flex:1;
  min-width:0;
}
@media (max-width:760px) {
  .img-text-row { flex-direction:column !important; align-items:stretch; }
  .img-text-row .it-img { width:100%; flex:none; }
}

/* Aan de slag steps */
.actie-steps { display:flex; flex-direction:column; gap:4px; margin-bottom:48px; }
.actie-step {
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:24px 28px;
  border-radius:16px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  transition:all 0.25s ease;
  cursor:default;
}
.actie-step:hover { /* hover removed */ }
.actie-step-num {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:32px;
  line-height:1;
  color:#31A042;
  flex-shrink:0;
  width:40px;
}
.actie-step-content { flex:1; }
.actie-step-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:18px;
  margin-bottom:6px;
}
.actie-step-text {
  font-family:'Rubik',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  opacity:0.7;
}

/* ── Consistency overrides for inner pages ── */
/* All intro/lead text below titles: same size + black */
.section-overlay .content-lead {
  font-size:18px !important;
  line-height:1.65 !important;
  color:#000 !important;
  opacity:1 !important;
}
/* Small body texts inside cards: unified size + line-height */
.section-overlay .card-text,
.section-overlay .el-row span,
.section-overlay .energiehuis-list li {
  font-size:16px !important;
  line-height:1.6 !important;
}

/* 1.1 — image 20% larger; aspect ratio 2.39:1 landscape */
.it-img-1-1 {
  width:432px !important;
  flex:0 0 432px !important;
  aspect-ratio:2.39/1 !important;
}
@media (max-width:760px) {
  .it-img-1-1 { width:100% !important; flex:none !important; }
}

/* 1.2 — sections with icons get white card background (already cards, kept) */
.lp-card-icon-section { background:#fff !important; border:1px solid rgba(0,0,0,0.08) !important; }
.lp-card-icon-section .card-icon { background:transparent !important; }
.lp-card-icon-section .card-icon svg { stroke:#37B34A !important; fill:none !important; }

/* 1.4 — green outline icons, no background */
.insight-pill-1-4 {
  background:#fff !important;
  border:1px solid rgba(0,0,0,0.08) !important;
}
.insight-pill-1-4 .pill-icon-wrap {
  background:transparent !important;
  width:auto !important;
  height:auto !important;
}
.insight-pill-1-4 .pill-icon-wrap svg {
  stroke:#37B34A !important;
  fill:none !important;
  stroke-width:1.6 !important;
  width:40px !important;
  height:40px !important;
}

/* 2.1 — process arrows: white arrow only, no circle */
.process-arrow-clean {
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  color:#fff !important;
}
.process-arrow-clean svg { stroke:#fff !important; }
.it-img-2-1 {
  width:432px !important;
  flex:0 0 432px !important;
}
@media (max-width:760px) {
  .it-img-2-1 { width:100% !important; flex:none !important; }
}

/* 2.2 — green Energiehuis card, white outline icon, no bg */
.energiehuis-center-2-2 {
  background:#37B34A !important;
}
.energiehuis-center-2-2 .eh-icon-wrap {
  background:transparent !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
}
.energiehuis-center-2-2 .eh-icon-wrap svg {
  stroke:#fff !important;
  fill:none !important;
  stroke-width:1.6 !important;
  width:48px !important;
  height:48px !important;
}
.energiehuis-center-2-2 .eh-body {
  font-size:15px !important;
  line-height:1.6 !important;
}

/* 3.2 — arrows (year process) without shadow */
.process-arrow-noshadow {
  box-shadow:none !important;
}
/* 3.2 — image at bottom of card 30% larger */
.it-img-3-2 {
  width:468px !important;
  flex:0 0 468px !important;
}
@media (max-width:760px) {
  .it-img-3-2 { width:100% !important; flex:none !important; }
}

/* 4.1 — image 60% larger (was 432) */
.it-img-4-1 {
  width:691px !important;
  flex:0 0 691px !important;
}
@media (max-width:760px) {
  .it-img-4-1 { width:100% !important; flex:none !important; }
}

/* 4.1 — image inside green quote card (right side) */
.it-img-4-1-green {
  width:340px !important;
  flex:0 0 340px !important;
  aspect-ratio:4/3 !important;
  object-position:center 30% !important;
  border-radius:14px !important;
  object-fit:cover;
  height:auto;
}
@media (max-width:760px) {
  .it-img-4-1-green { width:100% !important; flex:none !important; }
}

@media (max-width:900px) {
  .cards-row.three { grid-template-columns:1fr 1fr; }
  .cards-row.four { grid-template-columns:1fr 1fr; }
  .reveal-row { grid-template-columns:1fr; }
  .reveal-divider { display:none; }
  .content-stage { padding:40px 28px; }
  .panel-inner { padding:32px 28px; }
  .energiehuis { grid-template-columns:1fr 1fr; }
  .process-flow { flex-direction:column; }
  .process-step:first-child,.process-step:last-child { border-radius:16px; }
  .process-arrow { display:none; }
}

/* ──────────────────────────────────────────────
   v6: feedback adjustments
   ────────────────────────────────────────────── */

/* Remove ALL hover effects on cards/pills/steps everywhere */
.lp-card:hover,
.card:hover,
.insight-pill:hover,
.actie-step:hover,
.theme-light .insight-pill:hover,
.theme-yellow .insight-pill:hover,
.section-pill:hover:not(.active) {
  transform:none !important;
  box-shadow:none !important;
  background-color:inherit;
}
.lp-card,
.card,
.insight-pill,
.actie-step {
  transition:none !important;
}
.lp-card-arrow {
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* v6: card CTA arrows back to green outline.
   - circle border becomes green
   - icon renders as outline (no fill) in green
   - card-3 (solid green bg) keeps white for contrast */
.lp-card-arrow {
  border-color:#37B34A !important;
  color:#37B34A !important;
}
.lp-card-arrow svg {
  stroke:#37B34A !important;
  fill:none !important;
  stroke-width:1.8 !important;
}
.lp-card-3 .lp-card-arrow {
  border-color:rgba(255,255,255,0.85) !important;
  color:#fff !important;
}
.lp-card-3 .lp-card-arrow svg {
  stroke:#fff !important;
  fill:none !important;
}

/* 1.2 — portret 4:3 (3:4 verhouding) */
.it-img-1-2 {
  width:360px !important;
  flex:0 0 360px !important;
  aspect-ratio:3/4 !important;
  object-position:center 30% !important;
  align-self:stretch;
  height:auto !important;
}
@media (max-width:760px) {
  .it-img-1-2 { width:100% !important; flex:none !important; aspect-ratio:4/3 !important; }
}

/* 1.1 — image larger; 4:3 landscape per nieuwe feedback */
.it-img-1-1 {
  width:600px !important;
  flex:0 0 600px !important;
  aspect-ratio:4/3 !important;
  object-position:center 30% !important;
}
@media (max-width:760px) {
  .it-img-1-1 { width:100% !important; flex:none !important; }
}

/* 1.3 — wat er gebeurde: image 20% larger */
.it-img-1-3 {
  width:432px !important;
  flex:0 0 432px !important;
  aspect-ratio:4/3 !important;
  object-position:center 30% !important;
}
@media (max-width:760px) {
  .it-img-1-3 { width:100% !important; flex:none !important; }
}

/* 2.1 — image 60% larger (was 432) */
.it-img-2-1 {
  width:691px !important;
  flex:0 0 691px !important;
  aspect-ratio:2.39/1 !important;
  object-position:center 30% !important;
}
@media (max-width:760px) {
  .it-img-2-1 { width:100% !important; flex:none !important; }
}

/* 3.2 — image ratio 2.39:1 */
.it-img-3-2 {
  aspect-ratio:2.39/1 !important;
  object-position:center 30% !important;
}

/* 4.2 (doorontwikkeling) — ratio 4:3 (landscape) */
.it-img-4-2 {
  aspect-ratio:4/3 !important;
  object-position:center 30% !important;
}

/* Transparent light-green / light-grey cards → solid #E1EDE3 */
.section-overlay .card-light[style*="rgba(55,179,74,0.12)"],
.section-overlay .card-light[style*="rgba(55, 179, 74, 0.12)"],
.section-overlay div[style*="background:rgba(55,179,74,0.12)"],
.section-overlay div[style*="background: rgba(55,179,74,0.12)"],
.section-overlay div[style*="background:rgba(55,179,74,0.1)"],
.section-overlay div[style*="background: rgba(55,179,74,0.1)"],
.section-overlay div[style*="background:rgba(55,179,74,0.08)"],
.section-overlay div[style*="background: rgba(55,179,74,0.08)"],
.section-overlay .reveal-col[style*="rgba(49,160,66,0.12)"] {
  background:#E1EDE3 !important;
  opacity:1 !important;
}

/* Cards met groene rand/lijn: dichter onder de content erboven */
.section-overlay .card-light[style*="border:1.5px solid #37B34A"],
.section-overlay .card-greenborder {
  margin-top:8px !important;
}

/* 2.3 Samenwerking en rollen — body text unification */
.contact-info { min-width:0; }
.contact-info div { overflow-wrap:anywhere; }
.section-overlay .s23-card .card-text {
  font-size:16px !important;
  line-height:1.6 !important;
  color:#000 !important;
  opacity:1 !important;
  font-weight:300 !important;
}

/* 3.1 — text in cards: same size + color as body */
.section-overlay .s31-card .card-text,
.section-overlay .s31-card .card-label + p,
.section-overlay .s31-card p {
  font-size:16px !important;
  line-height:1.6 !important;
  color:#000 !important;
  opacity:1 !important;
  font-weight:300 !important;
}
.section-overlay .s31-card p[style*="italic"],
.section-overlay .s31-card p.s31-italic {
  font-style:normal !important;
  color:#000 !important;
}

/* 3.1 — Aanvullende eerstelijns-vaardigheden card */
.s31-eerste-card .s31-eerste-title {
  font-family:'Fira Sans',sans-serif !important;
  font-weight:700 !important;
  font-size:20px !important;
  margin-bottom:14px !important;
  color:#000 !important;
}
.s31-eerste-card .s31-eerste-item {
  padding:20px 24px !important;
  gap:18px !important;
}
.s31-eerste-card .s31-eerste-item-icon {
  width:52px !important;
  height:52px !important;
}
.s31-eerste-card .s31-eerste-item-icon svg {
  width:36px !important;
  height:36px !important;
}
.s31-eerste-card .s31-eerste-item-text {
  font-size:16px !important;
  line-height:1.5 !important;
}

/* 4.1 — body text in cards: bigger, black, same as body */
.section-overlay .s41-card .card-text {
  font-size:16px !important;
  line-height:1.65 !important;
  color:#000 !important;
  opacity:1 !important;
  font-weight:300 !important;
  font-family:'Rubik',sans-serif !important;
  font-style:normal !important;
}

/* 2.3 — text under white cards moved out + closer */
.s23-followup {
  margin-top:12px !important;
  background:transparent !important;
  border:none !important;
  padding:0 4px !important;
}

/* Unified soft-green card style — based on 1.1 "In de praktijk" */
.section-overlay .card-light[style*="#E1EDE3"],
.section-overlay div[style*="background:'#E1EDE3'"],
.section-overlay div[style*="background:#E1EDE3"] {
  border:none !important;
  border-radius:20px !important;
}
.section-overlay .card-light[style*="#E1EDE3"]:hover,
.section-overlay div[style*="#E1EDE3"]:hover {
  transform:none !important;
  box-shadow:none !important;
  background:#E1EDE3 !important;
}
.section-overlay .card-light[style*="#E1EDE3"] .card-label {
  font-family:'Fira Sans',sans-serif !important;
  font-weight:900 !important;
  color:#000 !important;
  font-size:18px !important;
  margin-bottom:18px !important;
}
.section-overlay .card-light[style*="#E1EDE3"] .card-text,
.section-overlay .card-light[style*="#E1EDE3"] p,
.section-overlay .card-light[style*="#E1EDE3"] .el-row span {
  font-family:'Rubik',sans-serif !important;
  font-weight:300 !important;
  font-size:16px !important;
  line-height:1.65 !important;
  color:#000 !important;
  opacity:1 !important;
  font-style:normal !important;
}

/* Remove hover on green-bordered cards too */
.section-overlay .card-greenborder:hover {
  transform:none !important;
  box-shadow:none !important;
}

/* ──────────────────────────────────────────────
   v5: scroll animations removed.
   Make formerly-animated landing elements visible
   by default, and unpin the story section so
   the page scrolls normally.
   ────────────────────────────────────────────── */
.lp-story-sticky {
  position:relative !important;
  top:auto !important;
  height:auto !important;
  padding:260px 0 !important;
  align-items:flex-start !important;
  overflow:visible !important;
}
/* v6.3: green G sits to the LEFT of the story copy, both inside
   the 1440 content column. Larger G, text aligned to its right side. */
.lp-story-inner {
  padding:0 clamp(32px,4vw,60px) !important;
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:0;
  position:relative;
}
.lp-story-gline-wrap {
  position:static !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  max-width:none;
  margin:0;
  right:auto;
  display:block;
  padding:0;
  flex:0 0 auto;
}
.lp-story-gline-wrap img {
  width:clamp(220px,24vw,340px) !important;
  height:auto;
  display:block;
}
.lp-story-text {
  flex:1 1 auto;
  min-width:0;
  max-width:23em;
  margin-left:clamp(-230px,calc(-14vw - 50px),-150px);
  margin-top:-240px;
  position:relative;
  z-index:1;
}
.lp-story-text {
  flex:1 1 auto;
  min-width:0;
}
@media (max-width:760px) {
  .lp-story-inner { flex-direction:column; align-items:flex-start; }
  .lp-story-gline-wrap img { width:200px !important; }
  .lp-story-text { margin-left:0 !important; }
}
.lp-statement {
  opacity:1 !important;
  transform:none !important;
}
.lp-card {
  opacity:1 !important;
  transform:none !important;
}
.lp-card-hover-disabled-3 {}
/* ══════════════════════════════════════════════════════════════════════
   v6.5: Comprehensive responsive overhaul
   Breakpoints: 320 / 375 / 768 / 1024 / 1280 / 1920
   Goals: no overlap, no horizontal scroll, readable type, touch-safe.
   ══════════════════════════════════════════════════════════════════════ */

/* Hard rule: never allow horizontal scroll on the page itself. */
html, body { overflow-x:hidden !important; max-width:100vw; }
body { -webkit-text-size-adjust:100%; }

/* Never hyphenate or break words — entire words must stay on one line */
*, *::before, *::after {
  hyphens:none !important;
  -webkit-hyphens:none !important;
  -ms-hyphens:none !important;
  word-break:normal !important;
  overflow-wrap:normal;
}
.lp-hero-title, .lp-hero-sub, .lp-hero-pill span,
.lp-card-title, .lp-card-desc,
.lp-statement h2, .lp-story-sentence,
.content-h1, .content-lead, .card-label, .card-text,
.lp-footer-copy span {
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* ── ≤1280px (desktop tightening) ── */
@media (max-width:1280px) {
  .lp-hero-title { font-size:clamp(34px,4.6vw,56px) !important; }
  .lp-hero-sub { font-size:17px !important; }
  .lp-statement h2 { font-size:clamp(40px,5.2vw,62px) !important; }
  .lp-card-num { font-size:clamp(140px,16vw,180px) !important; }
}

/* ── ≤1024px (tablet landscape / small laptop) ── */
@media (max-width:1024px) {
  /* hero stays absolute-positioned but tighter — copy never reaches the pill */
  .lp-hero-copy { max-width:55vw !important; }
  .lp-hero-sub { width:auto !important; max-width:100% !important; }
  .lp-hero-pill {
    height:auto !important;
    padding:10px 18px 10px 10px !important;
    max-width:42vw;
  }
  .lp-hero-pill span { white-space:normal !important; font-size:15px !important; line-height:1.25 !important; }
  /* logo never distorts — keep aspect ratio at every breakpoint */
  .lp-logo { width:auto !important; }
  /* statement + cards padding tighter */
  .lp-statement { padding:100px 0 60px !important; }
  .lp-statement h2 { font-size:clamp(36px,5vw,56px) !important; line-height:1.15 !important; }
  .lp-cards { padding:0 0 100px !important; }
  /* align cards to the same side gutter as the text above */
  .lp-cards .lp-container { padding-left:24px !important; padding-right:24px !important; }
  .lp-cards-grid { gap:20px !important; }
  /* flow layout so cards grow with content (no collapsed/clipped cards on tablet) */
  .lp-card { height:auto !important; min-height:0 !important; }
  .lp-card-inner { position:relative !important; inset:auto !important; padding:120px 32px 36px !important; }
  .lp-card-num { position:absolute !important; top:0 !important; right:24px !important; font-size:140px !important; }
  .lp-card-title { font-size:clamp(26px,3vw,32px) !important; }

  /* story section: smaller G, less negative offset */
  .lp-story-sticky { padding:160px 0 !important; }
  .lp-story-gline-wrap img { width:clamp(180px,22vw,260px) !important; }
  .lp-story-text { margin-left:clamp(-110px,-10vw,-60px) !important; margin-top:-80px !important; }
  .lp-story-sentence { font-size:clamp(22px,2.8vw,30px) !important; line-height:1.25 !important; }

  /* inner page header chips wrap */
  .section-header { width:calc(100% - 48px) !important; padding:18px 24px !important; flex-wrap:wrap; gap:12px; }
  .section-nav-pills { gap:20px !important; row-gap:8px !important; flex-wrap:wrap; }
  .section-subnav { width:calc(100% - 48px) !important; padding:20px 24px 0 !important; }
  .content-stage { width:calc(100% - 48px) !important; padding:48px 24px !important; }
}

/* ── ≤768px (tablet portrait) ── */
@media (max-width:768px) {
  /* Cards: 1 column */
  .lp-cards-grid {
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    gap:18px !important;
  }
  .lp-card {
    min-height:0 !important;
    height:auto !important;
  }
  /* flow layout on mobile: inner sizes the card so nothing is clipped */
  .lp-card-inner {
    position:relative !important;
    inset:auto !important;
    padding:110px 28px 30px !important;
  }
  .lp-card-num {
    font-size:120px !important;
    top:0 !important;
    right:20px !important;
  }
  .lp-card-title { font-size:28px !important; white-space:normal !important; }
  .lp-card-desc { font-size:15px !important; line-height:1.6 !important; max-width:100% !important; }

  /* Story: text overlaps G with space top-left (like desktop) */
  .lp-story-sticky { padding:96px 0 !important; }
  .lp-story-inner {
    flex-direction:row !important;
    align-items:flex-start !important;
    gap:0 !important;
    padding:0 20px !important;
    position:relative !important;
  }
  .lp-story-gline-wrap img { width:clamp(140px,38vw,220px) !important; opacity:0.6; }
  .lp-story-text {
    margin-left:clamp(-120px,-26vw,-70px) !important;
    margin-top:clamp(40px,12vw,80px) !important;
  }
  .lp-story-sentence { font-size:20px !important; line-height:1.4 !important; }

  /* Statement */
  .lp-statement { padding:72px 0 32px !important; }
  .lp-statement h2 { font-size:clamp(28px,5.2vw,40px) !important; line-height:1.2 !important; }
  /* let the rotating green phrase wrap instead of running off-screen,
     and keep the trailing black period attached to the last word */
  .lp-statement-green, .lp-statement-green > span, .lp-statement-green span { white-space:normal !important; }
  .lp-statement-green > span { display:inline !important; }
  .lp-statement-green > span > span { display:inline !important; }
  .lp-statement-inner { padding:0 24px !important; }

  /* Inner pages */
  .section-header { padding:14px 20px !important; width:calc(100% - 32px) !important; gap:10px; }
  .section-logo img { height:36px !important; }
  /* close cross hidden on mobile — tap the logo to return home */
  .section-close { display:none !important; }
  .section-nav-pills { gap:12px !important; row-gap:6px !important; margin-right:8px !important; }
  .section-pill { font-size:14px !important; }
  .section-subnav { padding:16px 20px 0 !important; gap:8px !important; width:calc(100% - 32px) !important; }
  .section-subchip { padding:8px 18px !important; font-size:14px !important; }
  .content-stage { padding:32px 20px !important; width:calc(100% - 32px) !important; }
  .content-h1 { font-size:clamp(32px,7vw,48px) !important; }
  .content-lead { font-size:17px !important; }
  .cards-row.two, .cards-row.three, .cards-row.four { grid-template-columns:1fr !important; gap:14px !important; }
  .reveal-row { grid-template-columns:1fr !important; gap:14px; }
  .reveal-divider { display:none !important; transform:rotate(90deg); }
  .energiehuis { grid-template-columns:1fr !important; gap:12px !important; }
  .process-flow { flex-direction:column !important; gap:0 !important; }
  .process-step:first-child { border-radius:16px 16px 0 0 !important; }
  .process-step:last-child { border-radius:0 0 16px 16px !important; }
  .process-step:not(:first-child):not(:last-child) { border-radius:0 !important; }
  .process-step { padding:24px !important; }
  .process-arrow { display:none !important; }
  /* 3.2 "Een stevig fundament" grid — stack on mobile so card text isn't clipped */
  .fundament-grid { grid-template-columns:1fr !important; }
  /* 4.2 contact cards — photo on top, text below (more room, no clipping) */
  .contact-card { flex-direction:column !important; align-items:flex-start !important; gap:16px !important; }
  /* Quote card: text on top with padding, photo full-width flush to bottom */
  .quote-card { padding:0 !important; overflow:hidden; }
  .quote-card-row { flex-direction:column !important; gap:0 !important; align-items:stretch !important; }
  .quote-card-text { order:1; padding:28px 24px !important; min-width:0 !important; flex:0 0 auto !important; }
  .quote-card-photo { order:2; width:100% !important; align-self:stretch !important; object-fit:cover !important; display:block; }
  .img-text-row { flex-direction:column !important; align-items:stretch !important; gap:20px !important; }
  .img-text-row .it-img,
  .it-img-1-1, .it-img-1-3, .it-img-2-1, .it-img-3-2, .it-img-4-1, .it-img-4-2 {
    width:100% !important; flex:none !important; max-width:100% !important;
  }
  .quote-block { padding:28px 24px !important; }
  .insight-grid { gap:8px !important; }
  .actie-step { padding:18px 20px !important; gap:16px !important; }
  .actie-step-num { font-size:28px !important; width:32px !important; }

  /* Footer */
  .lp-footer { padding:48px 20px 0 !important; }
  .lp-footer-logo { height:60px !important; }
  .lp-footer-copy {
    flex-wrap:wrap !important;
    gap:8px !important;
    justify-content:center;
    text-align:center;
    padding:0 20px;
    font-size:13px !important;
  }
  .lp-footer-bar { padding:24px 0 !important; }
}

/* ── ≤600px: hero unstacks ── */
@media (max-width:600px) {
  /* Hero becomes flow-layout so copy and pill never overlap */
  .lp-hero { height:auto !important; min-height:auto !important; padding-bottom:24px; }
  .lp-hero-video { position:relative !important; height:300px !important; }
  .lp-hero-overlay { display:none !important; }
  .lp-hero-inner { position:relative !important; max-width:100%; padding:20px; }
  .lp-logo {
    position:static !important;
    height:44px !important;
    margin-bottom:24px;
  }
  .lp-g-filled { width:120px !important; top:8px !important; right:8px !important; }
  .lp-hero-copy {
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    max-width:100% !important;
    margin-top:24px;
  }
  .lp-hero-title { font-size:32px !important; line-height:1.18 !important; color:#000 !important; }
  .lp-hero-title .lp-hero-title-dot { color:#000 !important; }
  .lp-hero-sub { font-size:15px !important; color:#000 !important; line-height:1.6 !important; }
  .lp-hero-pill {
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin-top:20px;
    height:auto !important;
    min-height:44px;
    padding:8px 18px 8px 8px !important;
    background:rgba(0,0,0,0.06) !important;
    border-color:rgba(0,0,0,0.15) !important;
    width:fit-content;
    max-width:100%;
    flex-wrap:wrap;
  }
  .lp-hero-pill span { color:#000 !important; font-size:14px !important; white-space:normal !important; }
  /* sub-text never wider than viewport */
  .lp-hero-sub { width:auto !important; max-width:100% !important; }
  /* logo keeps its aspect ratio */
  .lp-logo { width:auto !important; max-width:60vw !important; }
}

/* ── ≤375px (standard mobile) ── */
@media (max-width:375px) {
  .lp-hero-title { font-size:28px !important; }
  .lp-hero-sub { font-size:14px !important; }
  .lp-card-inner { padding:96px 24px 26px !important; }
  .lp-card-title { font-size:24px !important; }
  .lp-card-num { font-size:96px !important; right:14px !important; }
  .lp-statement h2 { font-size:24px !important; }
  .lp-statement-inner { padding:0 20px !important; }
  .lp-cards .lp-container { padding-left:20px !important; padding-right:20px !important; }
  .lp-story-inner { padding:0 20px !important; }
  .lp-story-sentence { font-size:18px !important; }
  .content-h1 { font-size:28px !important; }
  .content-lead { font-size:16px !important; }
  .section-pill .pill-num { width:20px; height:20px; font-size:11px; }
  .section-pill { font-size:13px !important; }
  .section-pill .pill-label { display:inline !important; }
  .section-subchip { font-size:13px !important; padding:7px 14px !important; }
}

/* ── ≤320px (iPhone SE) ── */
@media (max-width:320px) {
  .lp-hero-title { font-size:24px !important; }
  .lp-card-title { font-size:22px !important; }
  .lp-card-num { font-size:80px !important; }
  .lp-statement h2 { font-size:22px !important; }
  .lp-story-sentence { font-size:17px !important; }
  .lp-footer-logo { height:48px !important; }
}

/* ── Touch targets: any pointing element must be ≥44px on touch ── */
@media (hover:none) and (pointer:coarse) {
  .lp-card, .section-pill, .section-subchip, .section-close {
    min-height:44px;
  }
  /* keep the arrow a perfect circle — size width & height together */
  .lp-card-arrow {
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    flex:0 0 auto !important;
  }
  /* Disable 3D tilt hover effect on touch — it can leave cards stuck rotated */
  .lp-card { transform:none !important; }
  .lp-card .lp-card-bg { transform:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v6.6: mobile fixes — header, story G, footer, inner page logo
   ══════════════════════════════════════════════════════════════════════ */

/* FOOTER LOGO — never clip, always full visible.
   The inline `object-fit:cover` + fixed height was clipping top/bottom. */
.lp-footer-logo {
  object-fit:contain !important;
  height:auto !important;
  max-width:335px;
  width:100% !important;
  display:block;
  margin:0 auto !important;
}
.lp-footer {
  padding:60px 24px 40px !important;
}
.lp-footer-bar {
  padding:24px 0;
}

/* INNER PAGE LOGO — breathing room under it. */
.section-logo { padding-bottom:4px; }
.section-header { margin-bottom:20px; }

/* HEADER on mobile (≤600px) — KEEP overlay layout like desktop:
   video fills hero, dark gradient over it, content sits on top in white. */
@media (max-width:600px) {
  .lp-hero {
    position:relative !important;
    height:auto !important;
    min-height:640px !important;
    padding:0 !important;
    background:#000 !important;
  }
  .lp-hero-video {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .lp-hero-overlay {
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(to bottom,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,0.6) 100%) !important;
  }
  .lp-hero-inner {
    position:relative !important;
    inset:auto !important;
    max-width:100% !important;
    min-height:640px;
    padding:24px 20px 28px !important;
    display:flex !important;
    flex-direction:column !important;
    background:transparent !important;
  }
  .lp-g-filled {
    display:none !important;
  }
  .lp-logo {
    position:static !important;
    height:58px !important;
    width:auto !important;
    margin:0 0 auto !important; /* pushes copy + pill to bottom */
    align-self:flex-start !important;
    object-position:left center !important;
  }
  .lp-hero-copy {
    position:static !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 0 20px !important;
    padding:0 !important;
    max-width:100% !important;
  }
  .lp-hero-title {
    font-size:30px !important;
    line-height:1.18 !important;
    color:#fff !important;
    margin-bottom:14px !important;
  }
  .lp-hero-title-green, .lp-hero-title-green * { text-shadow:none !important; }
  .lp-hero-title .lp-hero-title-dot { color:#fff !important; }
  .lp-hero-sub {
    font-size:15px !important;
    line-height:1.6 !important;
    color:#fff !important;
  }
  .lp-hero-pill {
    position:static !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    min-height:44px;
    height:auto !important;
    padding:8px 16px 8px 8px !important;
    background:rgba(0,0,0,0.35) !important;
    border:1px solid rgba(255,255,255,0.4) !important;
    flex-wrap:nowrap !important;
    width:fit-content;
    max-width:100%;
  }
  .lp-hero-pill span {
    color:#fff !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }
  .lp-hero-pill span * { white-space:nowrap !important; }
  /* sub-text + logo never overflow viewport on mobile */
  .lp-hero-sub { width:auto !important; max-width:100% !important; }
  .lp-logo { width:auto !important; max-width:70vw !important; height:58px !important; }
}
@media (max-width:375px) {
  .lp-hero-title { font-size:26px !important; }
}

/* STORY G + tekst — op mobiel: tekst overlapt de G (zoals desktop),
   met ruimte links- en bovenin. */
@media (max-width:768px) {
  .lp-story-inner {
    flex-direction:row !important;
    align-items:flex-start !important;
    gap:0 !important;
    padding:0 20px !important;
    position:relative !important;
  }
  .lp-story-gline-wrap {
    width:auto !important;
    display:block !important;
    flex:0 0 auto !important;
    padding-left:8px;
    padding-top:8px;
  }
  .lp-story-gline-wrap img {
    width:clamp(140px,38vw,220px) !important;
    opacity:0.6;
  }
  .lp-story-text {
    flex:1 1 auto !important;
    min-width:0 !important;
    margin-left:clamp(-120px,-26vw,-70px) !important;
    margin-top:clamp(40px,12vw,80px) !important;
    width:auto !important;
    position:relative;
    z-index:1;
  }
  .lp-story-text, .lp-story-sentence { width:auto !important; max-width:100% !important; }
}
@media (max-width:425px) {
  .lp-story-gline-wrap img { width:120px !important; }
  .lp-story-sentence { font-size:18px !important; line-height:1.45 !important; }
}

/* FOOTER stacking + readable on smallest. */
@media (max-width:425px) {
  .lp-footer-copy {
    flex-direction:column !important;
    text-align:center !important;
    gap:6px !important;
  }
}

.lp-story-sentence {
  color:#000 !important;
  opacity:1 !important;
}
/* ══════════════════════════════════════════
   Case pages (Bewonerscases) — chapter 3.4 / 3.5
   Soft-green frame with prominent hero image
══════════════════════════════════════════ */
.case-hero {
  position:relative;
  width:100%;
  border-radius:24px;
  overflow:hidden;
  margin:32px 0 0;
  aspect-ratio:16/8;
  background:#E1EDE3;
}
.case-hero img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.case-hero .case-badge svg,
.case-hero .case-badge svg * {
  stroke:#fff !important;
}
.case-hero .case-badge {
  position:absolute;
  left:0;
  bottom:0;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#37B34A;
  color:#fff;
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:18px;
  letter-spacing:0;
  text-transform:none;
  padding:16px 22px 18px;
  border-radius:14px 14px 0 0;
}
.case-wrap {
  background:#fff;
  border-radius:0;
  padding:48px 0 8px;
  margin-top:8px;
  position:relative;
  z-index:1;
}
.case-tagline {
  display:none;
}
.case-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:38px;
  line-height:1.15;
  color:#000;
  margin:0 0 20px;
  max-width:820px;
}
.case-intro {
  font-family:'Rubik',sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  color:#000;
  margin:0 0 40px;
  max-width:860px;
}
.case-quote {
  background:#fff;
  border-radius:20px;
  padding:32px 36px;
  margin:48px 0 48px;
  border:1px solid #37B34A;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.case-quote-text {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1.35;
  color:#000;
}
.case-quote-attr {
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:16px;
  color:#000;
  letter-spacing:0;
  text-transform:none;
}
.case-quote-attr em,
.case-quote-attr .case-name {
  font-style:italic;
  font-weight:500;
}
.case-section-title {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:22px;
  color:#000;
  margin:48px 0 18px;
}
.case-meta-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:0 0 48px;
}
.case-meta-cell {
  background:#fff;
  border-radius:14px;
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(0,0,0,0.08);
}
.case-meta-cell .ic {
  background:transparent;
  color:#37B34A;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:auto;
  height:auto;
  padding:0;
}
.case-meta-cell .ic svg {
  width:32px;
  height:32px;
}
.case-meta-cell .lbl {
  font-family:'Fira Sans',sans-serif;
  font-weight:500;
  font-size:16px;
  letter-spacing:0;
  text-transform:none;
  color:#000;
  opacity:0.6;
  margin-bottom:3px;
}
.case-meta-cell .val {
  font-family:'Fira Sans',sans-serif;
  font-weight:700;
  font-size:16px;
  color:#000;
  line-height:1.3;
}
.case-measures {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:0 0 48px;
}
.case-measure {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.08);
}
.case-measure .ic {
  background:transparent;
  color:#37B34A;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:auto;
  height:auto;
  padding:0;
}
.case-measure .ic svg {
  width:32px;
  height:32px;
}
.case-measure .txt {
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.45;
  color:#000;
}
.case-result {
  display:block;
  background:#37B34A;
  color:#fff;
  border-radius:20px;
  padding:32px 36px;
  margin-top:24px;
}
.case-result-label {
  font-family:'Fira Sans',sans-serif;
  font-weight:900;
  font-size:22px;
  letter-spacing:0;
  text-transform:none;
  background:transparent;
  padding:0;
  border-radius:0;
  margin:0 0 12px;
  color:#fff;
  display:block;
}
.case-result-text {
  font-family:'Rubik',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  color:#fff;
}
@media (max-width:760px) {
  .case-wrap { padding:32px 0 0; }
  .case-title { font-size:28px; }
  .case-meta-row { grid-template-columns:1fr; }
  .case-measures { grid-template-columns:1fr; }
  .case-result { padding:22px 22px; }
  .case-hero { aspect-ratio:16/10; border-radius:18px; }
}

/* ════════════════════════════════════════════
   Globale huisstijl-correcties — alle binnenpagina's
   ════════════════════════════════════════════ */

/* 1. Geen grijze teksten — content in standaard zwart */
.section-overlay .content-lead,
.section-overlay .card-text,
.section-overlay .case-intro {
  color:#000 !important;
}

/* 2. Geen HOOFDLETTERS in tekst-elementen */
.section-overlay .content-kicker,
.section-overlay .card-label,
.section-overlay .case-tagline,
.section-overlay .case-result-label,
.section-overlay .case-quote-attr,
.section-overlay .case-meta-cell .lbl,
.section-overlay .case-hero .case-badge,
.section-overlay .case-hero .case-badge span {
  text-transform:none !important;
}
.section-overlay .content-kicker {
  letter-spacing:0 !important;
  opacity:1 !important;
}

/* 3. Icoontjes: geen groene achtergrondbox meer; icoontjes prominent in beeld */
.section-overlay .card-icon {
  background:transparent !important;
  width:fit-content !important;
  height:auto !important;
  padding:0 !important;
  margin-bottom:18px !important;
  display:inline-flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
}
.section-overlay .card-icon svg,
.section-overlay .card-icon [data-lucide],
.section-overlay .case-meta-cell .ic svg,
.section-overlay .case-measure .ic svg,
.section-overlay div[style*="width: 44"] svg {
  width:36px !important;
  height:36px !important;
}
/* Inline 44×44 groen-getinte iconcontainers — strip de box, icoon links */
.section-overlay div[style*="width: 44"] {
  background:transparent !important;
  width:fit-content !important;
  height:auto !important;
  padding:0 !important;
  border-radius:0 !important;
  display:inline-flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex-shrink:0 !important;
}