/* ============================================================
   Ontwerp "Helder redactioneel" — rustig, verzorgd, ruim.
   Hero: grote serif-kop links met veel witruimte naast een cirkelmasker-
   foto met een dunne boog-accent ernaast, als een rustige tijdschrift-
   pagina. Diensten, kernwaarden en werkwijze staan links uitgelijnd in
   ruime, verzorgde blokken — geen kaartjes, geen drukte.
   Alles hieronder is gescoped onder [data-design="redactioneel"]. --brand-primary/
   --brand-accent/--font-heading/--font-body blijven het huisstijl-stuurwiel
   (klant-instelbaar via Theme::cssVariables); dit bestand voegt alleen
   redactioneel-eigen sfeer-tinten en lijnkleuren toe, afgeleid van de merkkleur.
   ============================================================ */

[data-design="redactioneel"]{
  --rd-ink: color-mix(in srgb, var(--brand-primary) 90%, #000 10%);
  --rd-muted: color-mix(in srgb, var(--brand-primary) 38%, #626b74 62%);
  --rd-line: color-mix(in srgb, var(--brand-primary) 14%, #fff 86%);
  --rd-tint: color-mix(in srgb, var(--brand-accent) 6%, #fff 94%);
  --rd-radius: 3px;
}

/* ---- Beweging: scroll-reveal (motion.js voegt .is-in toe) — rustig, ruim ---- */
[data-design="redactioneel"] [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-design="redactioneel"] [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-design="redactioneel"] [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- Header/footer: stille, verzorgde accent-tuning voor dit ontwerp ---- */
[data-design="redactioneel"] .site-header{background:#fff;border-bottom:1px solid var(--rd-line)}
[data-design="redactioneel"] .brand-word{font-family:var(--font-heading);font-weight:600;letter-spacing:-.01em;color:var(--rd-ink)}
[data-design="redactioneel"] .nav a{letter-spacing:.02em}
[data-design="redactioneel"] .nav a:hover,
[data-design="redactioneel"] .nav a[aria-current="page"]{color:var(--brand-accent)}
[data-design="redactioneel"] .site-footer{background:#fff;border-top:1px solid var(--rd-line)}
[data-design="redactioneel"] .footer-accent{color:var(--brand-accent)}

/* ---- Gedeelde bouwstenen ---- */
[data-design="redactioneel"] .rd-eyebrow{
  font-family:var(--font-body);font-weight:600;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.16em;color:var(--brand-accent);margin:0 0 1em;
}
[data-design="redactioneel"] .rd-head{max-width:640px;margin:0 0 clamp(40px,6vw,72px)}
[data-design="redactioneel"] .rd-head__title{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--rd-ink);letter-spacing:-.01em}
[data-design="redactioneel"] .rd-head__sub{color:var(--rd-muted);margin:.9rem 0 0}

/* Tekstlink-CTA: geen gevulde knop, een ingetogen lijn onder de tekst */
[data-design="redactioneel"] .rd-link{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-body);font-weight:500;font-size:1rem;letter-spacing:.01em;
  color:var(--rd-ink);text-decoration:none;
  border-bottom:1px solid var(--brand-accent);padding-bottom:.2em;
  transition:color .25s ease,border-color .25s ease,gap .25s ease;
}
[data-design="redactioneel"] .rd-link:hover{color:var(--brand-accent);gap:.7em}
[data-design="redactioneel"] .rd-link--muted{color:var(--rd-muted);border-color:var(--rd-line)}
[data-design="redactioneel"] .rd-link--muted:hover{color:var(--rd-ink);border-color:var(--rd-muted)}

/* ============================================================
   Hero — grote serif-kop links, veel wit, cirkelmasker-foto + boog rechts
   ============================================================ */
[data-design="redactioneel"] .rd-hero{padding:clamp(56px,9vw,120px) 0 clamp(48px,8vw,96px);background:#fff}
[data-design="redactioneel"] .rd-hero__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,7vw,88px);align-items:center;
}
[data-design="redactioneel"] .rd-hero__title{
  font-family:var(--font-heading);font-weight:500;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.08;letter-spacing:-.01em;
  margin:0 0 .5em;color:var(--rd-ink);text-wrap:balance;
}
[data-design="redactioneel"] .rd-hero__intro{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.2rem);line-height:1.65;color:var(--rd-muted);
  max-width:48ch;margin:0 0 2em;
}
[data-design="redactioneel"] .rd-hero__cta{display:flex;flex-wrap:wrap;gap:2em}

/* Cirkelmasker-foto met een dunne boog-accent ernaast — offset, niet gecentreerd */
[data-design="redactioneel"] .rd-hero__media{position:relative;aspect-ratio:1/1;max-width:420px;margin-left:auto}
[data-design="redactioneel"] .rd-arc{
  position:absolute;top:-9%;left:-13%;width:62%;height:62%;
  color:var(--brand-accent);transform:rotate(-18deg);pointer-events:none;
}
[data-design="redactioneel"] .rd-hero__circle{
  position:relative;z-index:1;width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-shadow:0 28px 56px -24px color-mix(in srgb, var(--rd-ink) 32%, transparent);
}
[data-design="redactioneel"] .rd-hero__img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   Diensten — links uitgelijnde, verzorgde lijst met kop naast een rijenkolom
   ============================================================ */
[data-design="redactioneel"] .rd-services{background:var(--rd-tint)}
[data-design="redactioneel"] .rd-services__grid{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,72px);align-items:start;
}
[data-design="redactioneel"] .rd-services .rd-head{margin:0}
[data-design="redactioneel"] .rd-rows{border-top:1px solid var(--rd-line)}
[data-design="redactioneel"] .rd-row{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,28px);
  padding:clamp(28px,4vw,40px) 0;border-bottom:1px solid var(--rd-line);
}
[data-design="redactioneel"] .rd-row__num{
  font-family:var(--font-heading);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:var(--brand-accent);line-height:1;
}
[data-design="redactioneel"] .rd-row__title{
  font-size:clamp(1.3rem,2.2vw,1.6rem);color:var(--rd-ink);margin:0 0 .45em;letter-spacing:-.01em;
}
[data-design="redactioneel"] .rd-row__body{color:var(--rd-muted);margin:0;max-width:56ch;line-height:1.65}
[data-design="redactioneel"] .rd-row__link{
  display:inline-flex;align-items:center;gap:.4em;margin-top:1em;
  font-weight:500;color:var(--brand-accent);text-decoration:none;
}
[data-design="redactioneel"] .rd-row__link:hover{color:var(--rd-ink);text-decoration:underline}

/* ============================================================
   Kernwaarden — rustige, links uitgelijnde woordenrij
   ============================================================ */
[data-design="redactioneel"] .rd-values{background:#fff}
[data-design="redactioneel"] .rd-values__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4em 0;
  font-family:var(--font-heading);font-size:clamp(1.3rem,2.8vw,1.8rem);color:var(--rd-ink);
}
[data-design="redactioneel"] .rd-values__item{padding:0 .9em 0 0;position:relative}
[data-design="redactioneel"] .rd-values__item:not(:last-child)::after{
  content:'·';position:absolute;right:.15em;color:var(--brand-accent);
}

/* ============================================================
   Werkwijze — genummerde, links uitgelijnde stappen
   ============================================================ */
[data-design="redactioneel"] .rd-steps{background:var(--rd-tint)}
[data-design="redactioneel"] .rd-steps__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,40px);
}
[data-design="redactioneel"] .rd-step{padding-top:1.4em;border-top:1px solid var(--rd-line)}
[data-design="redactioneel"] .rd-step__num{
  display:block;font-family:var(--font-heading);font-weight:500;
  font-size:1.4rem;color:var(--brand-accent);margin-bottom:.6em;
}
[data-design="redactioneel"] .rd-step h3{font-size:1.15rem;color:var(--rd-ink);margin:0 0 .4em}
[data-design="redactioneel"] .rd-step p{color:var(--rd-muted);margin:0;font-size:.96rem;line-height:1.6}

/* ============================================================
   Afsluit-CTA — links uitgelijnd, ruim
   ============================================================ */
[data-design="redactioneel"] .rd-cta{background:#fff}
[data-design="redactioneel"] .rd-cta__inner{max-width:640px}
[data-design="redactioneel"] .rd-cta__title{
  font-family:var(--font-heading);font-weight:500;
  font-size:clamp(2rem,4vw,2.9rem);color:var(--rd-ink);letter-spacing:-.01em;margin:0 0 .5em;
}
[data-design="redactioneel"] .rd-cta__text{color:var(--rd-muted);margin:0 0 1.6em}
[data-design="redactioneel"] .rd-cta__actions{display:flex;flex-wrap:wrap;gap:2em}

/* ============================================================
   Responsive — geen horizontale scroll op mobiel
   ============================================================ */
@media (max-width:900px){
  [data-design="redactioneel"] .rd-hero__grid{grid-template-columns:1fr}
  [data-design="redactioneel"] .rd-hero__media{margin:clamp(32px,6vw,48px) auto 0;max-width:320px}
  [data-design="redactioneel"] .rd-services__grid{grid-template-columns:1fr}
  [data-design="redactioneel"] .rd-steps__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  [data-design="redactioneel"] .rd-hero__cta,
  [data-design="redactioneel"] .rd-cta__actions{flex-direction:column;align-items:flex-start;gap:1.1em}
  [data-design="redactioneel"] .rd-row{grid-template-columns:1fr}
  [data-design="redactioneel"] .rd-steps__grid{grid-template-columns:1fr}
  [data-design="redactioneel"] .rd-values__list{font-size:1.2rem}
}