/* ============================================================
   EFFECTIEF — HERO v3 "terracotta split, rond aflopend"
   Laden via $page_css = ['hero-v3.css'];
   - uitlijning gelijk aan de site-wrap (1480px / 48px)
   - paneel hangt aan boven- en rechterrand, loopt linksonder
     rond af; witruimte eronder tot de logostrip
   - pay-off regel-voor-regel uitgelijnd met de kop
   - paneel-onderkant uitgelijnd met de onderkant van de knoppen
   ============================================================ */
:root{--hv3-ink:#0b161d;--hv3-terra:#E8602C;--hv3-terra-d:#c84e1f;
  --hv3-muted:#63666b;--hv3-muted2:#9a9a9e;--hv3-line:#e7e7e4;--hv3-ease:cubic-bezier(.16,1,.3,1);
  --hv3-maxw:1480px;--hv3-pad:48px;
  --hv3-edge:max(var(--hv3-pad), calc((100vw - var(--hv3-maxw))/2 + var(--hv3-pad)));
  --hv3-fs:clamp(2rem,3.7vw,3.15rem);--hv3-lh:1.18;
  --hv3-pt:clamp(72px,8vw,116px)}

.hv3-hero{background:#fff;overflow:hidden}
.hv3-grid{display:grid;grid-template-columns:1.3fr 1fr}

/* ── linkerkolom ── */
.hv3-txt{padding:var(--hv3-pt) clamp(32px,4vw,72px) clamp(72px,8vw,116px) var(--hv3-edge)}
.hv3-kick{display:block;font-size:1.05rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--hv3-terra-d);margin:0 0 22px}
.hv3-txt h1{font-size:var(--hv3-fs);line-height:var(--hv3-lh);font-weight:400;letter-spacing:-.03em;color:var(--hv3-ink);margin:0;text-wrap:balance}
.hv3-txt h1 b{font-weight:700}
.hv3-txt h1 .accent{color:var(--hv3-terra);position:relative;white-space:nowrap}
.hv3-txt h1 .accent svg{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.18em;overflow:visible}
.hv3-txt h1 .accent path{fill:none;stroke:var(--hv3-terra);stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320;animation:hv3-draw 1s var(--hv3-ease) .7s forwards}
@keyframes hv3-draw{to{stroke-dashoffset:0}}
.hv3-sub{color:var(--hv3-muted);font-size:1.1rem;line-height:1.7;max-width:520px;margin:28px 0 0}
.hv3-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hv3-reas{margin:20px 0 0;color:var(--hv3-muted2);font-size:.88rem}

/* ── terracotta paneel: rond aflopend, onderkant op knop-hoogte ── */
.hv3-panel{position:relative;align-self:start;overflow:hidden;
  background:linear-gradient(168deg,#ef6f3d,var(--hv3-terra) 48%,var(--hv3-terra-d));
  border-radius:0 0 0 clamp(90px,10vw,160px);
  padding:var(--hv3-pt) var(--hv3-edge) clamp(114px,5.5vw + 62px,142px) clamp(40px,4.5vw,72px)}
.hv3-panel::before{content:"";position:absolute;width:560px;height:560px;right:-200px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%)}
/* onzichtbare kicker: 'Snel.' begint exact op de hoogte van de kop */
.hv3-ghost{visibility:hidden;display:block;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 26px}
.hv3-word{position:relative;font-size:var(--hv3-fs);line-height:var(--hv3-lh);font-weight:700;letter-spacing:-.03em;margin:0;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.hv3-word em{font-style:normal;-webkit-text-stroke:0;color:#fff}
.hv3-pfoot{position:relative;margin-top:30px;padding-top:22px;border-top:1.5px solid rgba(255,255,255,.35);
  display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.92);font-size:.92rem;font-weight:500;flex-wrap:wrap}
.hv3-pfoot b{letter-spacing:2.5px;color:#fff}

/* ── logostrip onder de split ── */
.hv3-logos{border-top:1px solid var(--hv3-line);padding:46px 0 64px;background:#fff}
.hv3-logos .lbl{text-align:center;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hv3-muted2);
  font-weight:600;margin-bottom:8px}
.hv3-logos .logo-item img{filter:grayscale(1);opacity:.55;mix-blend-mode:multiply;transition:filter .3s,opacity .3s}
.hv3-logos .logo-item:hover img{filter:none;opacity:1}
/* multiply laat witte jpg-vlakken wegvallen tegen de witte pagina */

/* ── responsief ── */
@media(max-width:960px){
  .hv3-grid{grid-template-columns:1fr}
  .hv3-txt{padding:64px 24px 48px}
  .hv3-panel{border-radius:0 0 0 70px;padding:48px 28px 52px;margin-bottom:48px}
  .hv3-ghost{display:none}
  .hv3-pfoot{margin-top:32px}
}
@media (prefers-reduced-motion: reduce){
  .hv3-txt h1 .accent path{animation:none;stroke-dashoffset:0}
  .hv3-logos .logo-item img{transition:none}
}


/* ============================================================
   LEADMAGNET (midden-CTA homepage) — licht paneel, variant B
   Warmgrijs met gloed en ronde afloop; streep onder het
   kernwoord in de kop.
   ============================================================ */
.leadmag-box{position:relative;overflow:hidden;background:#f6f6f4;
  border-radius:28px 28px 28px clamp(70px,7vw,120px);
  padding:clamp(48px,5vw,68px) clamp(36px,4vw,64px)}
.leadmag-box::before{content:"";position:absolute;width:440px;height:440px;right:-170px;top:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,96,44,.15),transparent 65%);pointer-events:none}
.leadmag-txt,.leadmag-vis{position:relative}
.leadmag-txt .lm-accent{color:var(--hv3-terra);position:relative;white-space:nowrap}
.leadmag-txt .lm-accent svg{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.17em;overflow:visible}
.leadmag-txt .lm-accent path{fill:none;stroke:var(--hv3-terra);stroke-width:4;stroke-linecap:round}
.leadmag-txt .cta-reassure{color:var(--hv3-muted2)}
.leadmag-vis{background:#fff;border:1px solid var(--hv3-line)}

/* Titel en logo's horen bij elkaar: kleinere afstand ertussen */
.hv3-logos .logo-carousel{margin-top:22px;padding-bottom:0}