/* ============================================================
   Ontwerp "Algemeen" — modern-minimalistisch, design-forward.
   Grote typografie, veel witruimte, asymmetrisch grid, één strak inkt-accent,
   subtiele beweging. Geen kaartjes-met-schaduw, geen sfeerfoto-hero: tekst
   leidend, beeld ondergeschikt/klein.
   Alles hieronder is gescoped onder [data-design="algemeen"] 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 een strak inkt-accent
   (--ag-ink) + dunne lijnkleur (--ag-line) toe voor scheidingslijnen en kaders.
   ============================================================ */

[data-design="algemeen"]{
  --ag-ink:#111111;
  --ag-ink-soft:color-mix(in srgb, var(--ag-ink) 5%, #fff 95%);
  --ag-line:color-mix(in srgb, var(--ag-ink) 13%, #fff 87%);
  --ag-radius:6px;
}

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

/* ---- Header/footer: strakke, stille accent-tuning voor dit ontwerp ---- */
[data-design="algemeen"] .site-header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--ag-line)}
[data-design="algemeen"] .brand-word{letter-spacing:-.02em}
[data-design="algemeen"] .nav a:hover,
[data-design="algemeen"] .nav a[aria-current="page"]{color:var(--ag-ink)}
[data-design="algemeen"] .site-footer{background:#fff;border-top:1px solid var(--ag-line)}
[data-design="algemeen"] .footer-accent{color:var(--ag-ink)}

/* ---- Knoppen: sober herbruikt, geen ronde pillen ---- */
[data-design="algemeen"] .ag-btn{border-radius:var(--ag-radius)}
[data-design="algemeen"] .btn--ghost{background:transparent;color:var(--ag-ink);border-color:var(--ag-line)}
[data-design="algemeen"] .btn--ghost:hover{border-color:var(--ag-ink)}

/* ============================================================
   Hero — grote typografie, asymmetrisch grid
   ============================================================ */
[data-design="algemeen"] .ag-hero{padding-block:clamp(64px,11vw,128px) clamp(40px,6vw,72px)}
[data-design="algemeen"] .ag-hero__grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
[data-design="algemeen"] .ag-hero__text{padding-top:clamp(4px,1.4vw,20px)}
[data-design="algemeen"] .ag-hero__eyebrow{
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.76rem;
  color:var(--muted);margin:0 0 1.5em;
}
[data-design="algemeen"] .ag-hero__title{
  font-size:clamp(2.8rem,7vw,5.6rem);line-height:.98;letter-spacing:-.02em;
  margin:0 0 .48em;text-wrap:balance;color:var(--ag-ink);
}
[data-design="algemeen"] .ag-hero__intro{
  font-size:1.15rem;color:var(--muted);max-width:46ch;margin:0 0 2.1em;
}
[data-design="algemeen"] .ag-hero__cta{display:flex;flex-wrap:wrap;gap:18px}
[data-design="algemeen"] .ag-hero__accent{
  margin-top:clamp(36px,9vw,112px);
  aspect-ratio:3/4;
  border-radius:var(--ag-radius);
  overflow:hidden;
  background:var(--ag-ink-soft);
  position:relative;
  isolation:isolate;
}
[data-design="algemeen"] .ag-hero__accent::after{
  content:'';position:absolute;inset:0;border:1px solid var(--ag-line);border-radius:inherit;pointer-events:none;
}
[data-design="algemeen"] .ag-hero__img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   Genummerde diensten-rij
   ============================================================ */
[data-design="algemeen"] .ag-services__head{max-width:640px;margin:0 0 clamp(40px,6vw,72px)}
[data-design="algemeen"] .ag-services__head .eyebrow{text-align:left}
[data-design="algemeen"] .ag-services__head h2{font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.01em}
[data-design="algemeen"] .ag-services__head p{color:var(--muted);margin:.8rem 0 0}

[data-design="algemeen"] .ag-list{border-top:1px solid var(--ag-line)}
[data-design="algemeen"] .ag-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(20px,4vw,48px);
  align-items:baseline;
  padding:clamp(28px,4vw,44px) 10px;
  margin-inline:-10px;
  border-bottom:1px solid var(--ag-line);
  border-radius:var(--ag-radius);
  transition:background-color .25s ease;
}
[data-design="algemeen"] .ag-row:hover{background:var(--ag-ink-soft)}
[data-design="algemeen"] .ag-row__num{
  font-size:clamp(1.05rem,2vw,1.35rem);color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
[data-design="algemeen"] .ag-row__body h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0 0 .4em;letter-spacing:-.01em}
[data-design="algemeen"] .ag-row__body p{color:var(--muted);margin:0;max-width:60ch}
[data-design="algemeen"] .ag-row__link{
  display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--ag-ink);white-space:nowrap;
}
[data-design="algemeen"] .ag-row__link:hover{text-decoration:underline}

/* ============================================================
   Groot beeldvlak — rustige statement-sectie
   ============================================================ */
[data-design="algemeen"] .ag-visual{padding-block:clamp(40px,6vw,88px)}
[data-design="algemeen"] .ag-visual__frame{
  aspect-ratio:21/9;
  border-radius:var(--ag-radius);
  overflow:hidden;
  background:var(--ag-ink-soft);
  border:1px solid var(--ag-line);
}
[data-design="algemeen"] .ag-visual__img{width:100%;height:100%;object-fit:cover;display:block}
[data-design="algemeen"] .ag-visual__caption{
  margin:1.6em 0 0;color:var(--muted);font-size:.95rem;letter-spacing:.01em;
}
[data-design="algemeen"] .ag-visual__caption span{color:var(--ag-ink);margin-right:.4em}

/* ============================================================
   Minimalistische afsluit-CTA
   ============================================================ */
[data-design="algemeen"] .ag-cta{padding-block:clamp(64px,10vw,140px)}
[data-design="algemeen"] .ag-cta__inner{max-width:760px}
[data-design="algemeen"] .ag-cta__title{
  font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.02em;line-height:1.05;
  margin:0 0 .5em;color:var(--ag-ink);
}
[data-design="algemeen"] .ag-cta__text{color:var(--muted);font-size:1.1rem;max-width:52ch;margin:0 0 2em}
[data-design="algemeen"] .ag-cta__actions{display:flex;flex-wrap:wrap;gap:18px}

/* ============================================================
   Responsive — geen horizontale scroll op mobiel
   ============================================================ */
@media (max-width:900px){
  [data-design="algemeen"] .ag-hero__grid{grid-template-columns:1fr}
  [data-design="algemeen"] .ag-hero__accent{margin-top:clamp(28px,6vw,48px);aspect-ratio:16/9;max-width:340px}
}
@media (max-width:640px){
  [data-design="algemeen"] .ag-row{grid-template-columns:auto 1fr;row-gap:10px}
  [data-design="algemeen"] .ag-row__link{grid-column:1 / -1;justify-self:start}
  [data-design="algemeen"] .ag-hero__cta{flex-direction:column;align-items:stretch}
  [data-design="algemeen"] .ag-hero__cta .btn{justify-content:center}
  [data-design="algemeen"] .ag-visual__frame{aspect-ratio:4/5}
}