/* layout */
.onik-cont{max-width:1120px;margin:0 auto;padding:0 1rem}
.onik-wrap{background:#fff}
.onik-section{padding:3.5rem 0}
.onik-section--alt{background:var(--surface)}
.onik-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.onik-ai-center{align-items:center}

.npem {
  padding-top: 0 !important;
  padding-bottom: 32px !important;
}

.npem_bottom {
  padding-bottom: 0 !important;
}

#cta {
  padding-bottom: 22px !important;
}

/* typography */
.onik-h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin:0 0 .75rem}
.onik-h2{font-size:1.5rem;font-weight:700;margin:0 0 1rem}
.onik-lead{font-size:1.125rem;color:#334155;margin:0}
.onik-muted{color:var(--muted)}
.onik-cardtitle{margin:.5rem 0 0}

/* grid */
.onik-grid{display:grid;gap:2rem}
.onik-grid-2{grid-template-columns:1fr}
.onik-grid-3{grid-template-columns:1fr}
.onik-grid-4{grid-template-columns:1fr}
@media(min-width:768px){
  .onik-grid-3{grid-template-columns:repeat(3,1fr)}
  .onik-grid-4{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  .onik-grid-2{grid-template-columns:repeat(2,1fr)}
}

/* cards & chips */
.onik-card{border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.04);background:#fff}
.onik-chip{width:40px;height:40px;border-radius:999px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;font-size:1rem}

/* buttons */
.onik-btn{display:inline-block;padding:.8rem 1.2rem;border-radius:16px;border:1px solid var(--border);text-decoration:none}
.onik-btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.onik-btn--light{background:#fff;color:#0b0b0b}

/* aspect images */
.onik-aspect{position:relative;padding-top:66.66%;background:#f1f5f9;border-radius:16px;overflow:hidden}
.onik-aspect>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* lists */
.onik-list{padding-left:1.2rem;margin:0}
.onik-topgap{margin-top:.75rem}

/* CTA section */
.onik-cta{background:var(--primary);color:#fff}
.onik-white{color:#fff}
.onik-white-80{color:rgba(255,255,255,.85)}
.onik-cta-frame{background:rgba(255,255,255,.08)}

/* footer */
.onik-footer{color:var(--muted);text-align:center;padding:1.25rem 0;font-size:.85rem}
/* ===== HERO updates (minimaal & scoped) ===== */

/* zelfde uitlijning als je inline style */
.onik-hero-align { align-items: center; }

/* H1: altijd op één regel + schaal met schermbreedte */
.onik-h1--nowrap{
  white-space: nowrap;     /* geen regelterugloop */
  overflow: hidden;
  text-overflow: ellipsis; /* safety bij extreem smal */
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
@media (max-width: 599.98px){
  .onik-h1--nowrap{ font-size: clamp(22px, 7.2vw, 34px); }
}

/* Intro: precieze witruimte per regel zoals in jouw tekst */
.onik-intro { margin: 0 0 clamp(16px, 2.2vw, 24px); }
.onik-line{
  margin: 0 0 10px;                         /* basisruimte tussen regels */
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  line-height: 1.5;
  color: #1a1a1a;
}
.onik-line--gap{ margin-top: 14px; }         /* extra micro-gap voor de 2 accenten */

/* Optisch lekkere afstand boven de knop */
.onik-hero-text .onik-btn{ margin-top: clamp(8px, 1.8vw, 18px); }
/* ===== HERO updates (minimaal & scoped) ===== */

/* zelfde uitlijning als je inline style */
.onik-hero-align { align-items: center; }

/* H1: altijd op één regel + schaal met schermbreedte */
.onik-h1--nowrap{
  white-space: nowrap;     /* geen regelterugloop */
  overflow: hidden;
  text-overflow: ellipsis; /* safety bij extreem smal */
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
@media (max-width: 599.98px){
  .onik-h1--nowrap{ font-size: clamp(22px, 7.2vw, 34px); }
}

/* Intro: precieze witruimte per regel zoals in jouw tekst */
.onik-intro { margin: 0 0 clamp(16px, 2.2vw, 24px); }
.onik-line{
  margin: 0 0 10px;                         /* basisruimte tussen regels */
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  line-height: 1.5;
  color: #1a1a1a;
}
.onik-line--gap{ margin-top: 14px; }         /* extra micro-gap voor de accenten */

/* CTA: oranje huisstijl + nette hover (werkt samen met je bestaande .onik-btn--primary) */
.onik-hero-text .onik-btn.onik-btn--primary{
  background:#F29B38;       /* jouw oranje */
  color:#fff;
  border:none;
  box-shadow:0 8px 20px rgba(242,155,56,.28);
  font-weight:800;
}
.onik-hero-text .onik-btn.onik-btn--primary:hover{
  box-shadow:0 12px 26px rgba(242,155,56,.35);
  transform: translateY(-2px);
  transition: transform .15s ease, box-shadow .15s ease;
}
.onik-hero-text .onik-btn.onik-btn--primary:active{
  transform: translateY(0);
}

/* Optische marge boven de knop */
.onik-hero-text .onik-btn{ margin-top: clamp(8px, 1.8vw, 18px); }

/* Zorgt dat de module 1:1 aansluit op jouw pagina-stijl */
#reviews-embed .review-embed-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(2,8,20,.06);
  padding:clamp(16px, 2.5vw, 24px);
}

#reviews-embed .review-embed-slot{
  /* Handig voor widgets met vaste breedte/hoogte */
  width:100%;
  overflow:hidden;
}

/* Visually hidden maar toegankelijk (voor de H2) */
#reviews-embed .sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Kleine spacing-fix boven/onder dit blok indien gewenst */
#reviews-embed{ scroll-margin-top: 80px; }

/* ===== HypotheekWijzer inline CTA (scoped) ===== */
.hypwijz-inline{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  margin-top:.75rem;         /* subtiele afstand tov vorig blok */
  color:#0f172a;
  font-size:clamp(1rem, 1.2vw + .6rem, 1.125rem);
  line-height:1.5;
}

.hypwijz-emoji{
  font-size:1.1em;
  line-height:1;
}

.hypwijz-text{
  display:inline;
}

.hypwijz-link{
  color:#0a2e73;             /* jouw secondary / merkblauw */
  font-weight:700;           /* subtiele nadruk */
  text-decoration:underline;
  text-underline-offset:2px;
}
.hypwijz-link:hover{
  text-decoration-thickness:2px;
}

/* Persoonlijke sectie – micro-typografie (scoped) */
#persoonlijk-blok .persoonlijk-copy{
  margin-top: clamp(10px, 1.8vw, 16px);
}
#persoonlijk-blok .p-line{
  margin: 0 0 10px;
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  line-height: 1.55;
  color: #1a1a1a;
}
#persoonlijk-blok .p-line--gap{
  margin-top: 14px; /* extra lucht op de accenten */
}
/* Slot-sectie microtypografie (scoped) */
#slot-de-keuze .slot-copy{
  margin-top: clamp(10px, 1.8vw, 16px);
}
#slot-de-keuze .slot-line{
  margin: 0 0 10px;
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  line-height: 1.55;
  color: #1a1a1a;
}
#slot-de-keuze .slot-line--gap{
  margin-top: 14px; /* extra lucht rond 'Of.' */
}

/* Optionele CTA-stijl (matcht je oranje huisstijl) */
#slot-de-keuze .slot-cta{
  display:inline-block;
  margin-top: clamp(12px, 2vw, 20px);
  background:#F29B38;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:1rem 1.25rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(242,155,56,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
#slot-de-keuze .slot-cta:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(242,155,56,.35);
}
/* ===== CTA kleurupdate naar #f96f03 ===== */

/* Bovenste CTA (hero) – werkt voor zowel onik-btn--primary als --secondary in de hero */
.onik-hero-text .onik-btn{
  background:#f96f03;
  border-color:#f96f03;
  color:#fff;
  box-shadow:0 8px 20px rgba(249,111,3,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.onik-hero-text .onik-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(249,111,3,.35);
}
.onik-hero-text .onik-btn:active{
  transform:translateY(0);
}

/* Onderste CTA in je #cta sectie (heeft inline background in de HTML) */
#cta .cta-button{
  background:#f96f03 !important;
  box-shadow:0 8px 20px rgba(249,111,3,.28) !important;
  color:#fff !important;
}
#cta .cta-button:hover{
  box-shadow:0 12px 26px rgba(249,111,3,.35) !important;
}

/* (Optioneel) Als je ook de slot-CTA gebruikt in “De keuze is simpel” */
#slot-de-keuze .slot-cta{
  background:#f96f03;
  border:none;
  color:#fff;
  box-shadow:0 8px 20px rgba(249,111,3,.28);
}
#slot-de-keuze .slot-cta:hover{
  box-shadow:0 12px 26px rgba(249,111,3,.35);
}

/* Volledige achtergrond voor de persoonlijke sectie */
#persoonlijk-blok{
  background: #f8f9fa;
}

/* (optioneel) extra lucht binnenin zodat de grijze band mooi ademt */
#persoonlijk-blok .onik-cont{
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

/* (blijft zoals eerder) micro-typografie voor de regels */
#persoonlijk-blok .persoonlijk-copy{ margin-top: clamp(10px, 1.8vw, 16px); }
#persoonlijk-blok .p-line{
  margin: 0 0 10px;
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  line-height: 1.55;
  color: #1a1a1a;
}
#persoonlijk-blok .p-line--gap{ margin-top: 14px; }

/* 1) Iets meer wit onder de zin met 'HypotheekWijzer' */
.hypwijz-inline{
  /* was klein; nu wat royaler */
  margin-bottom: clamp(20px, 4vw, 44px);
}

/* 2) Grijze achtergrond start bij de persoonlijke sectie en loopt er netjes omheen */
#persoonlijk-blok{
  background:#f8f9fa;
}
#persoonlijk-blok .onik-cont{
  /* extra lucht zodat de grijze band mooi 'ademt' */
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 56px);
}

/* 3) Vanaf 'De keuze is simpel' weer witte achtergrond,
      met extra wit tot een stukje onder de laatste zin ('...waar je aan toe bent.') */
#slot-de-keuze{
  background:#fff;
}
#slot-de-keuze .onik-cont{
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 80px);  /* extra wit onderaan */
}

/* safeguard als 'De keuze is simpel' per ongeluk een alt-klasse meekrijgt */
#slot-de-keuze.onik-section--alt{ background:#fff; }

/* Full-bleed wit vlak voor 'De keuze is simpel' */
#slot-de-keuze{
  position: relative;
  background:#fff;                 /* fallback */
}

/* Forceer full-bleed wit tot aan de randen van het viewport */
#slot-de-keuze::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;                     /* trek over volle schermbreedte */
  transform: translateX(-50%);
  background:#fff;
  z-index:-1;                      /* achter de content */
}

/* Extra lucht binnen deze sectie (optioneel, pas aan naar smaak) */
#slot-de-keuze .onik-cont{
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
/* -- Forceer full-bleed wit, ongeacht parent backgrounds of eerdere pseudo-elementen -- */
#slot-de-keuze,
#slot-de-keuze.onik-section--alt{
  background:#fff !important;
  position:relative;
  isolation:isolate;                /* eigen stacking context */
  /* trek sectie over de volle schermbreedte */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* neutraliseer eerdere ::before hack (als je die had) */
#slot-de-keuze::before{ content:none !important; }

/* optioneel: extra ademruimte binnenin */
#slot-de-keuze .onik-cont{
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
/* Zorg dat de grid-sectie grijs blijft (jij hebt dit al meestal): */
.onik-section.onik-section--alt{ background:#f8f9fa; }

/* Kaarten altijd wit, ook binnen grijze sectie */
.onik-card.onik-card--value{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,0.10);
  padding:2rem;
  text-align:left;
}
.onik-card.onik-card--value h3{
  margin:0 0 .5rem;
  font-size:clamp(1.15rem, 2.2vw, 1.35rem);
  color:#0a2e73;
  font-weight:800;
}
.onik-card.onik-card--value .onik-muted{
  color:#475569;
  font-size:clamp(.95rem, 1.2vw, 1rem);
  line-height:1.6;
}
/* Match 'Nog niet klaar...' exact aan .p-line (zoals 'Spring ik uit vliegtuigen.') */
.hypwijz-inline{
  display:block;                 /* geen flex meer → gedraagt zich als p-regel */
  margin: 0 0 10px;              /* exact als .p-line */
  font-size: clamp(16px, 1.2vw + 12px, 20px); /* exact als .p-line */
  line-height: 1.55;             /* exact als .p-line */
  color:#1a1a1a;
  font-weight: 400;              /* basis; <strong> blijft vet voor 'binnen 2 minuten' */
}

/* Zorg dat inline elementen dezelfde hoogte volgen */
.hypwijz-inline .hypwijz-text{ font: inherit; line-height: inherit; }
.hypwijz-inline .hypwijz-link{
  font: inherit;                 /* zelfde font/hoogte als de regel */
  color:#0a2e73;                 /* merkblauw voor de link */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Emoji mag blijven zonder de hoogte te verstoren; wil je 'm weg? zet display:none */
.hypwijz-inline .hypwijz-emoji{
  display:inline;                
  font-size: 1em;                /* volgt dezelfde x-hoogte */
  line-height: 1.55;             
  margin-right: .4ch;            /* klein beetje ruimte voor de tekst */
  vertical-align: baseline;
}
/* Meer witte spacing onder 'Nog niet klaar voor een gesprek?... HypotheekWijzer.' */
.hypwijz-inline{
  display:block;                           /* gedraagt zich als losse paragraaf */
  margin-top: clamp(12px, 2.5vw, 28px);
  margin-bottom: clamp(48px, 8vw, 120px);  /* 👈 extra witruimte naar wens */
  font: inherit;
  line-height: inherit;
}
/* 'Nog niet klaar voor een gesprek?... HypotheekWijzer.' */
.hypwijz-inline{
  /* spacing behouden */
  display:block;
  margin-top: clamp(12px, 2.5vw, 28px);
  margin-bottom: clamp(48px, 8vw, 120px);

  /* match .p-line typografie */
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  line-height: 1.55;
  color:#1a1a1a;
  font-weight:400;
  font-family: inherit; /* zelfde font als de rest */
}

/* zorg dat inline elementen exact dezelfde typografie volgen */
.hypwijz-inline .hypwijz-text,
.hypwijz-inline .hypwijz-link{
  font: inherit;
  line-height: inherit;
}

.hypwijz-inline .hypwijz-link{
  color:#0a2e73;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hypwijz-inline .hypwijz-emoji{
  display:inline;
  font-size:1em;
  line-height:1.55;
  margin-right:.4ch;
  vertical-align:baseline;
}
/* Centreer: 'Nog niet klaar voor een gesprek?... HypotheekWijzer.' */
.hypwijz-inline{
  text-align: center;           /* midden uitlijnen */
  display: block;               /* blijft paragrafisch blok */
}
.hypwijz-inline .hypwijz-text,
.hypwijz-inline .hypwijz-link,
.hypwijz-inline .hypwijz-emoji{
  text-align: inherit;          /* volgt centrering van parent */
}

/* Centreer: 'De keuze is simpel' + alle regels eronder */
#slot-de-keuze .onik-h2{
  text-align: center;
}
#slot-de-keuze .slot-copy{
  max-width: 760px;             /* prettige leesbreedte */
  margin-left: auto;
  margin-right: auto;
  text-align: center;           /* midden uitlijnen van de zinnen */
}

/* (optioneel) als je daar een CTA-knop gebruikt, ook centreren */
#slot-de-keuze .slot-cta{
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
/* === 'Waar ik voor sta' gecentreerd + nette leesbreedte === */
#waar-ik-voor-sta {
  text-align: center;                 /* centreer alle tekst binnen deze sectie */
}

/* Titel centreren (veilig, ook als elders h2 anders is) */
#waar-ik-voor-sta .onik-h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Inleidende regel(s) onder de titel: prettige leesbreedte en centreren */
#waar-ik-voor-sta .onik-cont > p,
#waar-ik-voor-sta .onik-lead {
  max-width: 760px;
  margin: 0.5rem auto 1.25rem;       /* centreren + lucht */
  text-align: center;
}

/* Grid zelf centreren; kaarten netjes uitlijnen */
#waar-ik-voor-sta .onik-grid.onik-grid-4 {
  justify-items: center;              /* centreer grid-items in hun kolom */
}

/* Kaarten: gecentreerde tekst + max-breedte voor leesbaarheid */
#waar-ik-voor-sta .onik-grid.onik-grid-4 > .onik-card {
  text-align: center;
  max-width: 520px;                   /* voorkomt te lange regels op brede schermen */
  width: 100%;
}

/* Kopjes in kaarten: iets meer nadruk */
#waar-ik-voor-sta .onik-grid.onik-grid-4 > .onik-card h3 {
  margin: 0 0 .5rem;
}

/* Paragrafen in kaarten: prettige line-height */
#waar-ik-voor-sta .onik-grid.onik-grid-4 > .onik-card .onik-muted {
  line-height: 1.6;
  margin: 0;
}

/* Mobiel: grid blijft 1 kolom; spacing iets royaler */
@media (max-width: 767.98px){
  #waar-ik-voor-sta .onik-grid.onik-grid-4 {
    gap: 1.25rem;
  }
}
/* Hero CTA exact dezelfde oranje als onderaan (#f96f03) */
.onik-hero-text .onik-btn,
.onik-hero-text .onik-btn--primary,
.onik-hero-text .onik-btn--secondary{
  background:#f96f03 !important;
  border-color:#f96f03 !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(249,111,3,.28);
  font-weight:800;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* Hover/active/focus states, gelijk aan onder */
.onik-hero-text .onik-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(249,111,3,.35);
}
.onik-hero-text .onik-btn:active{
  transform:translateY(0);
}
.onik-hero-text .onik-btn:focus-visible{
  outline:2px solid #f96f03;
  outline-offset:2px;
}

/* (optioneel) visited links niet paars laten worden */
.onik-hero-text .onik-btn:visited{
  color:#fff !important;
}
/* === CTA hover: donker oranje-rood + uplift === */

/* BOVENSTE CTA (hero) */
.onik-hero-text .onik-btn,
.onik-hero-text .onik-btn--primary,
.onik-hero-text .onik-btn--secondary{
  background:#f96f03 !important;          /* basis oranje */
  border-color:#f96f03 !important;
  color:#fff !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}
.onik-hero-text .onik-btn:hover,
.onik-hero-text .onik-btn--primary:hover,
.onik-hero-text .onik-btn--secondary:hover{
  background:#d94a00 !important;           /* donker oranje-rood */
  border-color:#d94a00 !important;
  box-shadow:0 12px 26px rgba(217,74,0,.35);
  transform: translateY(-2px);
}

/* ONDERSTE CTA (#cta) */
#cta .cta-button{
  background:#f96f03 !important;           /* basis oranje */
  color:#fff !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease !important;
}
#cta .cta-button:hover{
  background:#d94a00 !important;           /* donker oranje-rood */
  border-color:#d94a00 !important;
  box-shadow:0 12px 26px rgba(217,74,0,.35) !important;
  transform: translateY(-2px);
}

/* (Optioneel) slot-CTA in 'De keuze is simpel' */
#slot-de-keuze .slot-cta{
  background:#f96f03;
  color:#fff;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}
#slot-de-keuze .slot-cta:hover{
  background:#d94a00;
  border-color:#d94a00;
  box-shadow:0 12px 26px rgba(217,74,0,.35);
  transform: translateY(-2px);
}

/* === 1) Één centrale rail (breedte + gutter) ===
   Pas desnoods 1200px aan als je menu smaller/breder is. */
:root{
  --rail: 1200px;   /* jouw vaste contentbreedte */
  --gutter: 1rem;   /* zij-padding binnen de rail */
}

/* Alle containers volgen dezelfde rail */
.onik-cont{
  max-width: var(--rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* === 2) Zorg dat ALLE grids/rijen/blokken binnen .onik-cont
   niet stiekem een andere breedte/marge pakken === */
.onik-section .onik-grid,
.onik-section .onik-row,
.onik-section .hs-custom-module-slot{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Grids vullen de rail; items rekt mee i.p.v. eigen max-width */
.onik-section .onik-grid > *{
  width: 100% !important;            /* kaarten/blokken even breed als hun kolom */
  max-width: 100% !important;        /* geen “stray” max-widths die inspringen */
}

/* Als er ergens kaarten met een eigen max-width waren toegevoegd, neutraliseer die */
.onik-section .onik-card{
  max-width: 100% !important;
}

/* === 3) Specifieke modules die vaak de rail “breken” — gelijk trekken === */

/* Autoriteit/badges module: niet buiten de rail laten uitsteken */
.niki-autoriteit-module{
  max-width: 100% !important;        /* respecteert .onik-cont */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* laat interne padding staan voor design, maar rail blijft strak */
}

/* CTA-sectie: kaart blijft centrisch, maar rail blijft leidend */
#cta .onik-cont{
  max-width: var(--rail) !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* 'Waar ik voor sta' grid: netjes “flush” binnen de rail */
#waar-ik-voor-sta .onik-grid.onik-grid-4{
  justify-items: stretch;            /* geen scheve self-alignment */
}

/* Debug (optioneel): laat de rail visueel zien als je wilt testen
.onik-cont{ outline: 1px dashed rgba(10,46,115,.25); }
*/
/* ===========================
   1) TRUST BAR: visueel sterker
   =========================== */

/* Maak van de bestaande .onik-proof een echte 'balk' */
.onik-proof{
  background:#f8f9fa;               /* heel lichtgrijs vlak */
  border:1px solid #e5e7eb;         /* subtiele rand */
  border-radius:12px;
  padding:.6rem .9rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem .8rem;
}

/* Sterren in huisstijl (accent) en links in primaire kleur */
.onik-proof .gstar{ color:#f96f03; }         /* accent: oranje */
.onik-proof a{ color:#0a2e73; font-weight:600; }
.onik-proof .score{ color:#0a2e73; font-weight:700; }
.onik-proof .proof-logo{ filter:none; opacity:1; } /* logo helderder in de balk */

/* Optie: 'tussen twee dunne lijnen' i.p.v. grijs vlak
   -> voeg class 'onik-proof--lined' toe naast .onik-proof in de HTML als je dit wilt */
.onik-proof.onik-proof--lined{
  background:transparent;
  border:none;
  position:relative;
  padding-top:1rem; padding-bottom:1rem;
}
.onik-proof.onik-proof--lined::before,
.onik-proof.onik-proof--lined::after{
  content:"";
  position:absolute; left:0; right:0;
  height:1px; background:#e5e7eb;
}
.onik-proof.onik-proof--lined::before{ top:0; }
.onik-proof.onik-proof--lined::after{ bottom:0; }

/* Responsive fijnslijpen */
@media (max-width: 640px){
  .onik-proof{ gap:.45rem .6rem; padding:.55rem .7rem; }
}

/* ===========================
   2) MEER 'ADEMRUIMTE' RONDOM H2
   =========================== */

/* Geef elk H2-blok net wat meer luxe ruimte */
.onik-section .onik-h2{
  margin-bottom: clamp(18px, 3vw, 32px) !important;
}

/* Ook de secties zelf iets royaler laten ademen (niet té groot) */
.onik-section{
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* Als een sectie al 'alt' is (grijze band), behoud dezelfde paddings */
.onik-section.onik-section--alt{
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* ===========================
   3) KLEINE POLISH
   =========================== */

/* Scheidingspunt onder 'HypotheekWijzer'-regel iets royaler */
.hypwijz-inline{ margin-bottom: clamp(28px, 5vw, 64px); }

/* Zorg dat kaarten in 'Waar ik voor sta' mooi blijven in het grijze grid */
.onik-section.onik-section--alt .onik-grid.onik-grid-4 > .onik-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* Bewijs/awards module laat binnen de rail (geen extra uitstulping) */
.niki-autoriteit-module{ max-width:100%; margin-left:0; margin-right:0; }
/* Extra spacing tussen hero-CTA en trust bar */
.onik-hero-text .onik-proof{
  margin-top: clamp(28px, 5vw, 64px) !important;  /* stuk meer lucht */
}
/* 1) Behoud de uitlijning van de fotokolom (zoals het was) */
.onik-hero-align{ align-items: center !important; }   /* grid cross-axis */
.onik-hero-col{ align-self: baseline; }                 /* fixeer kolom zelf */

/* 2) Regie over verticale spacing binnen de tekstkolom */
.onik-hero-text{
  display: flex;                 /* interne flow, geen effect op grid-uitlijning */
  flex-direction: column;
}

/* 3) Extra lucht tussen CTA en trust bar, zonder de rest te beïnvloeden */
.onik-hero-text .onik-btn{ 
  margin-bottom: clamp(28px, 5vw, 64px);  /* ← “stuk meer” lucht */
}

/* Safety: mocht ergens nog een top-margin op .onik-proof staan, neutraliseer die */
.onik-hero-text .onik-proof{ 
  margin-top: 0 !important;
}
/* 1) Trustbar iets afwijkend van kleur (#e9ecef) */
.onik-hero-text .onik-proof{
  background:#e9ecef !important;           /* subtiele afwijking */
  border:1px solid #dfe3e6;                /* zachte rand (optioneel) */
  border-radius:12px;                      /* behoud luxe uitstraling */
}

/* 2) Iets meer spacing tussen H1 en de intro-tekst eronder */
.onik-hero-text .onik-h1{
  margin-bottom: clamp(18px, 3vw, 36px) !important; /* wat royaler dan voorheen */
}

/* 3) Foto rechts netjes uitgelijnd en in verhouding houden */
.onik-hero-align{ 
  align-items: center !important;          /* grid-rij verticaal centreren */
}
.onik-hero-col{ 
  align-self: baseline;                      /* kolom zelf centreren t.o.v. de tekstkolom */
}

/* Zorg dat de linkerkolom intern netjes stapelt (heeft geen effect op grid uitlijning) */
.onik-hero-text{
  display:flex;
  flex-direction:column;
}

    .onik-cont{max-width:1200px;margin:0 auto;padding:0 1rem}
    .onik-h1{font-size:2.5rem;font-weight:700;color:#0a2e73;margin-bottom:1rem}
    .onik-h2{font-size:1.75rem;font-weight:700;color:#0a2e73;margin:0 0 2.5rem}
    .onik-lead{font-size:1.125rem;color:#333;margin-bottom:1.25rem}
    .onik-grid{display:grid;gap:2rem}
    .onik-grid-2{grid-template-columns:1fr}
    .onik-grid-3{grid-template-columns:1fr}
    .onik-grid-4{grid-template-columns:1fr}
    @media(min-width:768px){.onik-grid-3{grid-template-columns:repeat(3,1fr)}.onik-grid-4{grid-template-columns:repeat(4,1fr)}}
    @media(min-width:1024px){.onik-grid-2{grid-template-columns:repeat(2,1fr)}}
    .onik-card{border:1px solid #e5e7eb;border-radius:14px;padding:2rem;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,0.14);text-align:center;transition:transform .25s ease,box-shadow .25s ease}
    .onik-card:hover{transform:translateY(-10px);box-shadow:0 18px 40px rgba(0,0,0,0.22)}
    .onik-btn{display:inline-block;padding:.9rem 1.5rem;border-radius:6px;text-decoration:none;font-weight:600;text-align:center}
    .onik-btn--primary{background:#F29B38;color:#fff;border:none}
    .onik-btn--secondary{background:#0a2e73;color:#fff;border:none}
    .onik-btn--segment{background:#0a2e73;color:#fff;border:none;display:block;margin-top:.5rem;padding:.6rem 1rem;border-radius:6px;text-align:center;text-decoration:none;font-weight:600}
    .onik-aspect{position:relative;padding-top:66.66%;border-radius:8px;overflow:hidden;background:#f3f4f6}
    .onik-aspect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .onik-muted{color:#555;font-size:.95rem}
    .onik-section{padding:4rem 0}
    .onik-section--alt{background:#f9fafb}
    .icoon{font-size:4rem;margin-bottom:1rem;display:flex;justify-content:center;align-items:center}

    /* Hero image sizing */
    .onik-hero-col{max-width:680px;width:100%;justify-self:end}
    .onik-aspect--hero{padding-top:66.66%}
    @media(min-width:1280px){.onik-aspect--hero{padding-top:60%}}


    /* Hero social proof */
    .onik-proof{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.6rem;font-size:.9rem}
    .gstars{display:inline-flex;gap:2px;transform:translateY(1px)}
    .gstar{font-size:12px;line-height:1;color:#fbbc04}
    .onik-proof .sep{opacity:.5}
    .onik-proof .score{font-weight:700;color:#0a2e73}
    .proof-logo{height:18px;filter:grayscale(100%);opacity:.95}

    /* Mini quotes onder segmenten */
    .onik-quote{font-size:.92rem;font-style:italic;color:#475569;margin-top:.5rem}

    /* Badge op/onder portret */
    .onik-badge{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:10px;padding:6px 8px;box-shadow:0 8px 22px rgba(0,0,0,.22);display:flex;align-items:center;z-index:20;border:1px solid rgba(0,0,0,.06)}
    .onik-badge img{height: clamp(42px, 6vw, 70px); display:block}
    .onik-caption{margin-top:.5rem;font-size:.95rem;color:#334155;font-weight:600}

    /* Autoriteit/badges module */
    .niki-autoriteit-module{width:100%;max-width:none;margin:0 auto;padding:2rem 1.25rem;font-family:Arial,sans-serif;background:#e2e8f0;border-radius:12px}
    .niki-centrale-belofte{text-align:center;margin-bottom:3rem}
    .niki-centrale-belofte h2{font-size:2rem;color:#2c3e50;margin:0}
    .niki-pilaren-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:2rem}
    .niki-pilaar{display:flex;flex-direction:column;text-align:center;padding:2rem 1.5rem;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:520px;box-shadow:0 6px 18px rgba(0,0,0,.08);transition:transform .25s ease,box-shadow .25s ease}
    .niki-pilaar:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)}
    .niki-pilaar-logo{height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;flex-shrink:0;overflow:visible}
    .niki-pilaar-logo.award-badge{height:160px;width:160px;border:8px solid #fff;border-radius:12px;padding:0;box-shadow:0 2px 8px rgba(224,224,224,.6);box-sizing:border-box;margin:0 auto 1.5rem}
    .niki-pilaar-logo img 
        height: auto;
        max-height: 90px;
        max-width: 200px;
        object-fit: contain;
    }
    .niki-pilaar-logo.award-badge img{width:150%;height:150%;object-fit:contain}
    .niki-pilaar h3{color:#2c3e50;font-size:clamp(1.2rem,3vw,1.4rem);height:5rem;display:flex;align-items:center;justify-content:center;margin:0 0 1rem}
    .niki-autoriteit-module .highlight{font-weight:700;color:#ff6b35;font-size:clamp(1rem,2.5vw,1.1rem);height:3.5rem;display:flex;align-items:center;justify-content:center;margin:0 0 1rem}
    .niki-pilaar p{color:#555;line-height:1.6;flex-grow:1;margin:0;font-size:clamp(.9rem,2vw,1rem)}

@media screen and (max-width: 768px) {
  .onik-section .onik-grid > * {
      max-width: calc(100% - 40px) !important;
  }
  .onik-cont {
      padding: 0 20px;
  }
  .onik-hero-col {
      justify-self: start;
  }
  .onik-aspect--hero {
      padding-top: 0;
  }
  .onik-aspect img {
      position: relative;
  }
  #cont_sect4 {
    padding-top: 0 !important;
  }
  .hypwijz-inline {
      padding: 0 20px;
      margin-top: -65px;
  }
  #cont_sect4 img {
      height: 400px;
  }
  #cta {
      padding-bottom: 0 !important;
  }
}

@media screen and (max-width: 425px) {
  .onik-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .onik-section .onik-grid > * {
    max-width: 100% !important;
  }
  .onik-h1 {
      font-size: 34px;
      white-space: unset;
      text-align: center;
      margin-top: -30px;
  }
  .onik-intro {
      text-align: center;
  }
  #waar-ik-voor-sta {
      padding: 55px 0 60px;
  }
  .niki-pilaar-logo img {
    height: auto;
    max-height: 150px;
    max-width: 200px;
    object-fit: contain;
  }
  .niki-centrale-belofte {
      margin-bottom: 2rem;
  }
  .niki-pilaar h3 {
      height: auto;
  }
  .niki-autoriteit-module .highlight {
      height: auto;
      margin: 1rem 0 1rem;
  }
  .niki-pilaar {
      min-height: 460px;
  }
  #reviews_script {
    padding-top: 0px;
  }
  .cta-pill {
    display: inline-block;
    align-items: center;
  }
}

@media screen and (max-width: 400px) {
  .niki-pilaren-grid {
      grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  }
  .cta-pill {
      display: inline-block !important;
      text-align: center !important;
  }
  .cta-card {
    padding: 1.5rem !important;
  }
}