/* Fase 2 — homepage herpositionering (makelaars & hypotheekadviseurs).
   Bouwt bewust voort op de bestaande v3-componenten (.solution-card,
   .solution-card--visual, .solution-media, .section-head, .eyebrow) en voegt
   alleen de grids + de compacte expertise-strip toe. Terughoudend met motion;
   reduced-motion wordt gerespecteerd. */

/* 4 oplossingsblokken (fundament → websites → CRM → vindbaarheid) */
.home-solutions{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.home-solutions .solution-card{min-height:340px}
@media(max-width:1100px){.home-solutions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.home-solutions{grid-template-columns:1fr}.home-solutions .solution-card{min-height:auto}}

/* Cases-grid — hergebruikt de beeldkaart (.solution-card--visual) met echte
   magazinecovers, websites en het CRM-dashboard. */
.home-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home-cases .solution-card{min-height:0}
.home-cases .case-result{margin-top:auto;color:var(--v3-muted);font-size:13px;border-top:1px solid var(--v3-line);padding-top:13px}
@media(max-width:1040px){.home-cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.home-cases{grid-template-columns:1fr}}

/* Compacte expertise-strip onderaan */
.home-expertise{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.home-expertise span{padding:9px 14px;border:1px solid var(--v3-line);border-radius:999px;color:var(--v3-muted);font-size:13px;font-weight:800}

/* Sectie-ritme voor de nieuwe blokken */
.home-band{padding:clamp(56px,7vw,94px) 0}
.home-band .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.home-band .section-head .section-copy{max-width:520px}

/* Hero-LCP: het hero-beeld als echt <img> laden i.p.v. CSS-achtergrond — een
   <img> met fetchpriority telt sneller als LCP. De donkere gradient blijft via
   :before/:after erbovenop, zodat de look gelijk is; alleen de laadprioriteit
   verbetert. */
/* Hero-kop: iets ruimere regelhoogte zodat descenders (bv. de "g" van "nodig")
   niet over de volgende regel vallen bij de lange homepage-kop. */
.page-home .v3-hero .page-title{line-height:1.04}
.page-home .v3-hero{position:relative;overflow:hidden}
.page-home .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0;pointer-events:none}
.page-home.home-new-hero .v3-hero:before{background-image:linear-gradient(90deg,#050b13 0%,rgba(5,11,19,.98) 30%,rgba(5,11,19,.84) 48%,rgba(5,11,19,.24) 72%,rgba(5,11,19,.04) 100%)!important;background-position:center!important;background-size:cover!important;z-index:1;animation:none!important}
.page-home.home-new-hero .v3-hero:after{z-index:1}
.page-home .v3-hero .hero-grid{position:relative;z-index:2}
@media(max-width:900px){
  .page-home .hero-photo{object-position:66% center}
  .page-home.home-new-hero .v3-hero:before{background-image:linear-gradient(90deg,#050b13 0%,rgba(5,11,19,.96) 60%,rgba(5,11,19,.48) 100%)!important}
}
@media(max-width:700px){
  .page-home .hero-photo{object-position:center bottom}
  .page-home.home-new-hero .v3-hero:before{background-image:linear-gradient(180deg,#050b13 0%,rgba(5,11,19,.94) 56%,rgba(5,11,19,.38) 78%,#050b13 100%)!important}
}

/* Portret oprichtster (homepage Waarom Jezz; Over ons heeft eigen style) */
.owner-portrait{margin:0;position:relative;width:100%;max-width:400px;border-radius:14px;overflow:hidden;border:1px solid rgba(216,174,87,.35);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.owner-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.owner-portrait figcaption{position:absolute;inset:auto 0 0 0;padding:18px 20px;background:linear-gradient(to top,rgba(5,11,19,.94),rgba(5,11,19,.35) 55%,transparent);color:#fff;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;line-height:1.1}
.owner-portrait figcaption span{display:block;margin-top:3px;color:#d8ae57;font-family:Inter,sans-serif;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.page-home .owner-story .owner-grid{grid-template-columns:.75fr 1.25fr;gap:44px;align-items:center}
.page-home .owner-mark--photo{display:grid!important;place-items:center;min-height:0}
.page-home .owner-mark--photo::before,.page-home .owner-mark--photo::after{display:none!important}
@media(max-width:900px){.page-home .owner-story .owner-grid{grid-template-columns:1fr}}

/* Jezz-logo in de story-hub i.p.v. tekst; achtergrond gelijk aan de cirkel (geen los vlak). */
.page-home .machine-core--logo{padding:24px;overflow:hidden;background:#000510}
.page-home .machine-core--logo img{width:100%;height:100%;object-fit:contain;display:block}


/* Het stappenplan op de homepage heeft vier stappen; .v3-flow staat standaard
   op zes kolommen (werkwijze.html heeft er zes), waardoor het laatste derde
   deel leeg bleef en de kolommen onnodig smal werden. Ook de omschrijvingen
   zijn hier hele zinnen in plaats van korte labels, dus niet vet. */
#stappen .v3-flow{grid-template-columns:repeat(4,1fr)}
#stappen .v3-flow strong{font-weight:400;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
@media(max-width:900px){#stappen .v3-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#stappen .v3-flow{grid-template-columns:1fr}}

/* Bewijsbalk direct onder de hero. Vier korte, controleerbare uitspraken —
   geen aantallen of oplagecijfers, want die zijn niet betrouwbaar vast te
   stellen (zie de afspraak boven in assets/site-data.js). */
.home-proof{padding:0 0 clamp(28px,4vw,48px)}
.home-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--v3-line);
  border:1px solid var(--v3-line);border-radius:10px;overflow:hidden}
.home-proof-grid>div{display:flex;flex-direction:column;gap:6px;padding:22px 24px;background:#08111c}
.home-proof-grid strong{color:var(--v3-gold);font-size:15px;letter-spacing:.01em}
.home-proof-grid span{color:var(--v3-muted);font-size:13.5px;line-height:1.5}
@media(max-width:900px){.home-proof-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.home-proof-grid{grid-template-columns:1fr}}