/* ══════════════════════════════════════════════════════════════
   v3 — de stijl van de huidige site (v1), de inhoud en de
   conversielaag van v2b.

   v1 in het kort: warm papier als basis, Instrument Serif in
   zeer groot formaat, Geist als broodletter, geen enkel
   accentkleurtje (dus ook geen messing), veel lucht tussen de
   secties en twee donkere blokken als tegenwicht.

   Dit bestand laadt NA styles.css en herdefinieert alleen de
   tokens en de typografie. De structuur, de scripts en alle
   componenten blijven die van v2b.
   ══════════════════════════════════════════════════════════════ */

:root {
  --ink: #1a1815;
  --ink-2: #100f0d;
  --ink-3: #1a1815;
  --paper: #f4f1ec;
  --paper-2: #ece7e0;

  /* v1 kent geen goud: het "accent" is gewoon inkt.
     Binnen donkere secties draait dat om (zie hieronder). */
  --brass: #1a1815;
  --brass-lt: #e2dbd1;

  --txt: #1a1815;
  --txt-mut: #6f6558;
  --txt-lt: #f4f1ec;
  --txt-lt-mut: rgba(244, 241, 236, 0.62);
  --line: rgba(26, 24, 21, 0.13);
  --line-lt: rgba(244, 241, 236, 0.16);

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Geist', -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1360px;
  --sec-y: clamp(84px, 11vw, 197px);
}

/* op donker draait het accent om naar papier, anders zouden
   lijnen, iconen en knoppen in het niets verdwijnen */
.hero,
.sec--ink,
.case,
.foot,
.util,
.drawer,
.curtain,
.fabs {
  --brass: #e2dbd1;
  --brass-lt: #e2dbd1;
}

body {
  font-size: clamp(15.5px, 1.06vw, 16.9px);
  line-height: 1.6;
  letter-spacing: -0.005em;
}

/* ── typografie: v1 zet de display-letter fors groter ── */
h1,
h2,
h3,
h4,
.h2,
.h3 {
  font-weight: 400;
}
.hero__h {
  font-size: clamp(3rem, 9.8vw, 9.4rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  max-width: 13ch;
}
.h2 {
  font-size: clamp(2.4rem, 6.5vw, 5.9rem);
  line-height: 0.94;
  letter-spacing: -0.028em;
}
.cta .h2,
.area .h2,
.faq .h2 {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
}
.h3 {
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
}
.case__end h4 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* cursief accentwoord in dezelfde kleur — zo doet v1 het */
.hero__h em,
.h2 em,
.h3 em,
.case__end h4 em,
.pitch__t em {
  color: inherit;
  font-style: italic;
}

.lead,
.sechead__sub,
.hero__sub {
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
}

/* ── labels: klein, wijd gespatieerd, gedempt ── */
.eyebrow {
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--txt-mut);
}
.eyebrow::before {
  background: currentColor;
  width: 26px;
}
.eyebrow--light {
  color: var(--txt-lt-mut);
}
.eyebrow--light::before {
  background: currentColor;
}

/* ── knoppen: inkt op papier, omgekeerd bij hover ── */
.btn {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.95rem 1.6rem;
}
.btn--lg {
  padding: 1.15rem 2rem;
  font-size: 0.72rem;
}
.btn::before {
  background: var(--paper);
}
.btn:hover {
  color: var(--ink);
}
.btn--ghost::before,
.btn--lightghost::before,
.btn--wa::before {
  background: var(--paper);
}

/* op donker: gevulde knop wordt papier met inkttekst */
.hero .btn--brass,
.sec--ink .btn--brass,
.case__end .btn--brass,
.nav .btn--brass {
  --bg: var(--paper);
  --fg: var(--ink);
  border-color: var(--paper);
}
.hero .btn--brass::before,
.sec--ink .btn--brass::before,
.case__end .btn--brass::before,
.nav .btn--brass::before {
  background: var(--ink-2);
}
.hero .btn--brass:hover,
.sec--ink .btn--brass:hover,
.case__end .btn--brass:hover,
.nav .btn--brass:hover {
  color: var(--paper);
}
.btn--ink::before {
  background: var(--paper);
}
.btn--ink:hover {
  color: var(--ink);
}

/* de vaste balk boven een casestudy volgt hetzelfde principe */
.case__act--wa {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.case__act--wa:hover {
  background: var(--paper-2);
  border-color: var(--paper-2);
  color: var(--ink);
}

/* ── mobiele actiebalk ── */
.fabs__wa {
  background: var(--paper);
  color: var(--ink);
}

/* ── secties: v1 ademt meer ── */
.sechead {
  margin-bottom: clamp(2.6rem, 5vw, 4.6rem);
}
.sechead__sub {
  color: var(--txt-mut);
}

/* ── ritme van v1: licht dominant, donker als uitzondering ──
   v1 is één lange papieren pagina met precies twee donkere
   blokken: "het verschil zit 'm in de laatste twee procent" en
   het contact/footer-slot. v2b wisselt veel vaker af. Hieronder
   draaien diensten, voor & na en de reviews terug naar papier en
   gaat vakmanschap juist op inkt.

   Het gaat via tokens, niet via klassen: de componenten binnen
   die secties tekenen zichzelf met --txt-lt / --line-lt, dus door
   die binnen de sectie te herdefiniëren klapt het geheel om. */
.svc,
.ba,
.revs {
  background: var(--paper);
  color: var(--txt);
  --txt-lt: #1a1815;
  --txt-lt-mut: #6f6558;
  --line-lt: rgba(26, 24, 21, 0.13);
  --brass: #1a1815;
  --brass-lt: #1a1815;
}
.ba {
  background: var(--paper-2);
}
.svc .h2--light,
.ba .h2--light,
.revs .h2--light {
  color: var(--txt);
}
.svc .eyebrow--light,
.ba .eyebrow--light,
.revs .eyebrow--light {
  color: var(--txt-mut);
}
.svc .btn--brass,
.ba .btn--brass,
.revs .btn--brass {
  --bg: var(--ink);
  --fg: var(--paper);
  border-color: var(--ink);
}

.craft {
  background: var(--ink);
  color: var(--txt-lt);
  --txt: #f4f1ec;
  --txt-mut: rgba(244, 241, 236, 0.62);
  --line: rgba(244, 241, 236, 0.16);
  --brass: #e2dbd1;
}
.craft .h2 {
  color: var(--txt-lt);
}
.craft .eyebrow {
  color: var(--txt-lt-mut);
}

/* ── nav: donker boven de hero, papier zodra je scrollt ── */
.nav {
  background: rgba(26, 24, 21, 0.62);
}
.nav.is-stuck {
  background: rgba(247, 245, 241, 0.94);
  color: var(--ink);
  --txt-lt: #1a1815;
  --txt-lt-mut: #6f6558;
  --brass-lt: #1a1815;
  --line-lt: rgba(26, 24, 21, 0.13);
}
.nav.is-stuck .btn--brass {
  --bg: var(--ink);
  --fg: var(--paper);
  border-color: var(--ink);
}
.nav.is-stuck .btn--brass::before {
  background: var(--paper);
}
.nav.is-stuck .btn--brass:hover {
  color: var(--ink);
}

/* ── details die naar goud verwezen ── */
.case__quote,
.quotecard {
  border-color: var(--ink);
}
.rev__stars {
  color: var(--txt-lt-mut);
  letter-spacing: 0.2em;
}

/* de displaykop van v1 is fors: de scroll-hint botste ermee.
   De statbalk eronder wijst al genoeg naar beneden. */
.hero__scroll {
  display: none;
}