/* ============================================================
   Ontwerp "ZZP-dienstverlener" — strak & zakelijk.
   Clean grid, veel wit, kleine radius (hoekiger dan Praktijk), split-hero met
   portretbeeld + accentbadge, cijfer-strip en genummerde "case"-kaarten.
   Alles hieronder is gescoped onder [data-design="zzp-dienstverlener"] zodat andere
   ontwerpen hier niets van meekrijgen. --brand-primary/--brand-accent/--font-heading/
   --font-body blijven bewust onaangeroerd (klant-instelbaar via Theme::cssVariables);
   dit bestand voegt alleen ontwerp-eigen accenten toe. Knoppen blijven --brand-primary-
   leidend; --zzp-accent is een eigen zakelijke inkt/staalblauw-kleur voor tekst/lijnen.
   ============================================================ */

[data-design="zzp-dienstverlener"]{
  --zzp-accent:#1f2b45;
  --zzp-accent-soft:color-mix(in srgb, var(--zzp-accent) 8%, #fff 92%);
  --zzp-line:rgba(31,43,69,.14);
  --zzp-radius:8px;
  --zzp-radius-sm:4px;
}

/* ---- Beweging: scroll-reveal (motion.js voegt .is-in toe) ---- */
[data-design="zzp-dienstverlener"] [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-design="zzp-dienstverlener"] [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-design="zzp-dienstverlener"] [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- Header/footer: lichte accent-tuning voor dit ontwerp ---- */
[data-design="zzp-dienstverlener"] .site-header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--zzp-line)}
[data-design="zzp-dienstverlener"] .brand-word{letter-spacing:-.01em}
[data-design="zzp-dienstverlener"] .nav a:hover,
[data-design="zzp-dienstverlener"] .nav a[aria-current="page"]{color:var(--zzp-accent)}
[data-design="zzp-dienstverlener"] .site-footer{background:var(--zzp-accent);color:#fff}
[data-design="zzp-dienstverlener"] .footer-accent{color:#fff}

/* ============================================================
   Hero — split: tekst links, portretbeeld + accentbadge rechts
   ============================================================ */
[data-design="zzp-dienstverlener"] .zzp-hero{padding-block:clamp(48px,7vw,88px)}
[data-design="zzp-dienstverlener"] .zzp-hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
[data-design="zzp-dienstverlener"] .zzp-hero__eyebrow{
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.76rem;
  color:var(--zzp-accent);margin:0 0 1em;
}
[data-design="zzp-dienstverlener"] .zzp-hero__title{
  font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.01em;
  margin:0 0 .5em;max-width:14ch;
}
[data-design="zzp-dienstverlener"] .zzp-hero__intro{
  color:var(--muted);font-size:1.08rem;max-width:44ch;margin:0 0 1.9em;
}
[data-design="zzp-dienstverlener"] .zzp-hero__cta{display:flex;flex-wrap:wrap;gap:14px}
[data-design="zzp-dienstverlener"] .zzp-hero .btn{border-radius:var(--zzp-radius-sm)}
[data-design="zzp-dienstverlener"] .zzp-hero__media{position:relative;isolation:isolate}
[data-design="zzp-dienstverlener"] .zzp-hero__img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--zzp-radius);
  background:var(--zzp-accent-soft);
}
[data-design="zzp-dienstverlener"] .zzp-hero__badge{
  position:absolute;left:-20px;bottom:-20px;z-index:2;
  background:#fff;border:1px solid var(--zzp-line);border-radius:var(--zzp-radius-sm);
  padding:18px 22px;box-shadow:0 20px 40px -26px rgba(31,43,69,.45);
  display:flex;flex-direction:column;gap:.15rem;max-width:220px;
}
[data-design="zzp-dienstverlener"] .zzp-hero__badge-value{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--zzp-accent);line-height:1;
}
[data-design="zzp-dienstverlener"] .zzp-hero__badge-label{color:var(--muted);font-size:.84rem}

/* ============================================================
   Cijfer-strip
   ============================================================ */
[data-design="zzp-dienstverlener"] .zzp-stats{
  border-block:1px solid var(--zzp-line);
  background:var(--zzp-accent-soft);
}
[data-design="zzp-dienstverlener"] .zzp-stats__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding-block:clamp(28px,4vw,44px);
}
[data-design="zzp-dienstverlener"] .zzp-stat{
  text-align:center;padding-inline:20px;
  border-left:1px solid var(--zzp-line);
}
[data-design="zzp-dienstverlener"] .zzp-stat:first-child{border-left:none}
[data-design="zzp-dienstverlener"] .zzp-stat__value{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,3vw,2.4rem);color:var(--zzp-accent);
}
[data-design="zzp-dienstverlener"] .zzp-stat__label{
  display:block;color:var(--muted);font-size:.9rem;margin-top:.3em;
}

/* ============================================================
   Diensten/cases — hoekige, genummerde kaarten
   ============================================================ */
[data-design="zzp-dienstverlener"] .zzp-cases .card-grid{grid-template-columns:repeat(3,1fr)}
[data-design="zzp-dienstverlener"] .zzp-cases .t-card{
  border-radius:var(--zzp-radius);
  border:1px solid var(--zzp-line);
  box-shadow:none;
  position:relative;
}
[data-design="zzp-dienstverlener"] .zzp-cases .t-card:hover{
  border-color:var(--zzp-accent);
  box-shadow:0 16px 32px -26px rgba(31,43,69,.4);
}
[data-design="zzp-dienstverlener"] .zzp-case__num{
  display:block;font-family:var(--font-display);font-weight:700;
  color:var(--zzp-line);font-size:1.4rem;margin-bottom:10px;
}
[data-design="zzp-dienstverlener"] .zzp-case .t-card__icon{
  width:40px;height:40px;border-radius:var(--zzp-radius-sm);
  background:var(--zzp-accent-soft);color:var(--zzp-accent);
  display:grid;place-items:center;
}
[data-design="zzp-dienstverlener"] .zzp-case h3{font-size:1.2rem}

/* ============================================================
   Zakelijke afsluit-band
   ============================================================ */
[data-design="zzp-dienstverlener"] .zzp-cta{
  background:var(--zzp-accent);color:#fff;
  padding-block:clamp(48px,7vw,84px);
}
[data-design="zzp-dienstverlener"] .zzp-cta__inner{text-align:center}
[data-design="zzp-dienstverlener"] .zzp-cta h2{
  color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);max-width:26ch;margin-inline:auto;
}
[data-design="zzp-dienstverlener"] .zzp-cta p{
  color:rgba(255,255,255,.78);margin:1rem auto 0;max-width:46ch;
}
[data-design="zzp-dienstverlener"] .zzp-cta__btns{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2rem;
}
[data-design="zzp-dienstverlener"] .zzp-cta .btn{border-radius:var(--zzp-radius-sm)}
[data-design="zzp-dienstverlener"] .zzp-cta .btn--ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.5);
}
[data-design="zzp-dienstverlener"] .zzp-cta .btn--ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.1);
}

/* ============================================================
   Responsive — geen horizontale scroll op mobiel
   ============================================================ */
@media (max-width:960px){
  [data-design="zzp-dienstverlener"] .zzp-cases .card-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  [data-design="zzp-dienstverlener"] .zzp-hero__grid{grid-template-columns:1fr}
  [data-design="zzp-dienstverlener"] .zzp-hero__media{order:-1}
  [data-design="zzp-dienstverlener"] .zzp-hero__title{max-width:none}
  [data-design="zzp-dienstverlener"] .zzp-hero__badge{left:16px;bottom:-18px}
}
@media (max-width:640px){
  [data-design="zzp-dienstverlener"] .zzp-stats__grid{grid-template-columns:1fr;gap:18px}
  [data-design="zzp-dienstverlener"] .zzp-stat{border-left:none;border-top:1px solid var(--zzp-line);padding-top:16px}
  [data-design="zzp-dienstverlener"] .zzp-stat:first-child{border-top:none;padding-top:0}
  [data-design="zzp-dienstverlener"] .zzp-cases .card-grid{grid-template-columns:1fr}
  [data-design="zzp-dienstverlener"] .zzp-hero__cta{flex-direction:column;align-items:stretch}
  [data-design="zzp-dienstverlener"] .zzp-hero__cta .btn{justify-content:center}
  [data-design="zzp-dienstverlener"] .zzp-hero__badge{position:static;margin-top:16px;max-width:none}
}