/* ==========================================================================
   Jansseune & Co — jansseune.eu
   Design system: "editorial ledger" — ink, paper & brass
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Kleur */
  --ink: #10202f;
  --ink-2: #182c40;
  --ink-3: #223a52;
  --paper: #f7f4ed;
  --paper-2: #f0ebe0;
  --white: #fdfcf9;
  --brass: #a97f2f;        /* lijnen, randen, accenten op donker */
  --brass-2: #8a6624;      /* tekstlinks en knopvlakken (wit erop: 5,1:1) */
  --brass-bright: #c09a4a; /* accenten op de inktkleur */
  --brass-text: #78581e;   /* kleine messingtekst op papier (5,9:1) */
  --text: #22303e;
  --muted: #5c6673;
  --line: rgba(16, 32, 47, 0.14);
  --line-soft: rgba(16, 32, 47, 0.08);
  --line-paper: rgba(247, 244, 237, 0.16);
  --ok: #2e6e4e;
  --err: #a3372e;

  /* Typografie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Kleine maten. Er stonden zeventien verschillende waarden onder 1rem,
     waarvan vijf binnen 1,3 px van elkaar. Kies hieruit; verzin niets.
     Regel: hoe kleiner het label, hoe ruimer de letterafstand. */
  --label-xs: 0.62rem;   /* merkonderschrift, kleinste tags */
  --label-s: 0.7rem;     /* tags, rubrieken, meta */
  --label-m: 0.78rem;    /* sectienummers, doorlinks, formulierlabels */
  --label-l: 0.8rem;     /* knoppen */
  --text-xs: 0.85rem;    /* kleine lettertjes, voetnoten */
  --text-s: 0.9375rem;   /* kleine lopende tekst in kaarten */

  /* Ritme */
  --container: 1180px;
  /* Leesregel: ongeveer 70 tekens bij deze tekengrootte. Lopende tekst liep
     91 tot 97 tekens breed, ver boven wat comfortabel leest. */
  --measure: 36rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --radius: 4px;

  /* Beweging */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-btn: 0.18s;   /* knoppen moeten reageren, niet nadenken */
}

/* ---------- Reset & basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* De header is 5rem hoog en staat vast. Zonder deze marge landen
     ankerlinks zoals diensten.html#boekhouding eronder. */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[class],
ol[class] {
  list-style: none;
}

button {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

::selection {
  background: var(--brass);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* ---------- Typografie ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Weesregels wegwerken. balance verdeelt korte blokken gelijkmatig en is
   bedoeld voor koppen; pretty voorkomt losse eindwoorden in lopende tekst
   zonder de meetkost van balance. Browsers die het niet kennen negeren het. */
h1,
h2,
h3,
h4,
.display,
.h2,
.h3,
.lead,
blockquote {
  text-wrap: balance;
}

p,
li,
figcaption,
.calc-note {
  text-wrap: pretty;
}

.display {
  font-size: clamp(2.75rem, 6.4vw, 4.75rem);
  line-height: 1.04;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
}

.h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.lead {
  font-size: clamp(1.125rem, 1.7vw, 1.3rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 38em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--label-m);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--brass);
}

.amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

.section--paper2 {
  background: var(--paper-2);
}

.section--ink {
  background: var(--ink);
  color: rgba(247, 244, 237, 0.82);
}

.section--ink :is(h1, h2, h3, h4) {
  color: var(--paper);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head .lead {
  margin-top: 1rem;
}

.section-num {
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.18em;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: 0.5rem;
}

.section--ink .section-num {
  color: rgba(247, 244, 237, 0.5);
}

.section-head h2 {
  margin-top: 0.9rem;
  max-width: 16em;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-mono);
  font-size: var(--label-l);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background var(--dur-btn) var(--ease), color var(--dur-btn) var(--ease),
    border-color var(--dur-btn) var(--ease), transform 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--brass-2);
  color: var(--white);
}

/* Wit op --brass haalt maar 3,55:1 en zakt onder de AA-norm van 4,5:1.
   Op --brass-2 is dat 5,11:1 — de belangrijkste knop van de site moet
   leesbaar zijn, zeker voor de leeftijdsgroep die hier belt. */
.btn--brass {
  background: var(--brass-2);
  color: var(--white);
}

.btn--brass:hover {
  background: var(--brass-bright);
  color: var(--ink);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--brass);
  color: var(--brass-2);
}

.btn--ghost-light {
  border-color: rgba(247, 244, 237, 0.35);
  color: var(--paper);
}

.btn--ghost-light:hover {
  border-color: var(--brass-bright);
  color: var(--brass-bright);
}

.btn .arrow {
  transition: transform 0.35s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* Tekstlink in lopende tekst. Deze opmaak stond 65 keer letterlijk
   overgetikt in de HTML; wie de kleur ooit wil wijzigen, hoeft nu één
   regel te raken in plaats van dertien bestanden. */
.tekstlink {
  color: var(--brass-2);
  border-bottom: 1px solid rgba(138, 102, 36, 0.45);
  transition: border-color 0.25s var(--ease);
}

.tekstlink:hover {
  border-bottom-color: var(--brass-2);
}

/* Op de inktvlakken moet messing juist oplichten in plaats van verdiepen */
.section--ink .tekstlink,
.calc-result .tekstlink {
  color: var(--brass-bright);
  border-bottom-color: rgba(192, 154, 74, 0.45);
}

/* Variant voor plaatsnamen in een adressenlijst: de naam is de link, de
   streep eronder markeert dat zonder de tekstkleur te breken. */
.tekstlink--ink {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--brass);
}

.tekstlink--ink:hover {
  color: var(--brass-2);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-2);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.link-more:hover {
  border-color: var(--brass-2);
}

/* De pijl verschuift, niet de ruimte ernaast. gap animeren kost layout per
   frame; .btn .arrow doet hetzelfde effect twintig regels hoger al goed. */
.link-more > span {
  transition: transform 0.3s var(--ease);
}

.link-more:hover > span,
.office:hover .link-more > span,
.news-card:hover .link-more > span {
  transform: translateX(4px);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: transparent;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Geen backdrop-filter meer. Bij 92% dekking droeg de blur nog 8% aan het
   beeld bij, terwijl hij permanent een GPU-laag kostte én van de header een
   containing block maakte voor position:fixed — de oorzaak van de kapotte
   menu-overlay. Een iets dekkendere achtergrond doet hetzelfde werk. */
.site-header.is-scrolled {
  background: rgba(247, 244, 237, 0.96);
  box-shadow: 0 1px 0 var(--line-soft);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 5rem;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand .amp {
  margin-inline: 0.1em;
}

.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label-xs);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* Bellen op één tik. Op desktop staat het nummer in de footer en op de
   contactpagina; op mobiel klapt de navigatie dicht en was bellen drie
   tikken ver. Deze knop blijft ook zichtbaar wanneer het menu openstaat. */
.header-tel {
  display: none;
  margin-left: auto;
  margin-right: 0.85rem;
  padding: 0.5rem 0.95rem;
  font-family: var(--font-mono);
  font-size: var(--label-m);
  font-weight: 500;
  color: var(--ink);
  background: rgba(253, 252, 249, 0.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

@media (max-width: 860px) {
  .header-tel {
    display: inline-block;
  }
}

@media (max-width: 400px) {
  .header-tel {
    font-size: var(--label-m);
    padding: 0.45rem 0.7rem;
    margin-right: 0.5rem;
  }
}

/* Boven de menu-overlay houden, zodat bellen ook met open menu werkt */
body.nav-open .header-tel {
  position: relative;
  z-index: 110;
  color: var(--paper);
  background: transparent;
  border-color: rgba(247, 244, 237, 0.4);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.site-nav a:not(.btn) {
  position: relative;
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--ink-3);
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}

.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] {
  color: var(--brass-2);
}

.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn)[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav .btn {
  padding: 0.65rem 1.3rem;
}

/* Mobiel menu */
.nav-toggle {
  display: none;
  z-index: 110;
  width: 2.75rem;
  height: 2.75rem;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s, background 0.3s;
}

.nav-toggle span:nth-child(1) {
  transform: translate(-50%, calc(-50% - 6px));
}

.nav-toggle span:nth-child(2) {
  transform: translate(-50%, -50%);
}

.nav-toggle span:nth-child(3) {
  transform: translate(-50%, calc(-50% + 6px));
}

body.nav-open .nav-toggle span {
  background: var(--paper);
}

body.nav-open .nav-toggle span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
    /* Vangnet voor lage schermen: liever scrollen dan items verliezen */
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
  }

  .site-nav::before {
    content: "&";
    position: absolute;
    right: -4rem;
    bottom: -6rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26rem;
    line-height: 1;
    color: rgba(192, 154, 74, 0.07);
    pointer-events: none;
  }

  body.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
  }

  /* De blur die dit ooit noodzakelijk maakte is inmiddels weg uit de header
     (backdrop-filter maakte er een containing block van voor
     position:fixed, waardoor de menu-overlay tot 5rem kromp). De regel
     blijft staan om twee redenen: de overlay dekt de header toch af, dus
     een achtergrond eronder is zichtbaar vuil, en wie hier ooit opnieuw
     een filter of transform zet, breekt de overlay niet meer. */
  body.nav-open .site-header,
  body.nav-open .site-header.is-scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .site-nav a:not(.btn) {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--paper);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
      color 0.3s;
  }

  .site-nav a:not(.btn)[aria-current="page"] {
    color: var(--brass-bright);
  }

  body.nav-open .site-nav a:not(.btn) {
    opacity: 1;
    transform: none;
  }

  body.nav-open .site-nav a:nth-child(1) { transition-delay: 0.08s; }
  body.nav-open .site-nav a:nth-child(2) { transition-delay: 0.14s; }
  body.nav-open .site-nav a:nth-child(3) { transition-delay: 0.2s; }
  body.nav-open .site-nav a:nth-child(4) { transition-delay: 0.26s; }
  body.nav-open .site-nav a:nth-child(5) { transition-delay: 0.32s; }
  body.nav-open .site-nav a:nth-child(6) { transition-delay: 0.38s; }
  body.nav-open .site-nav .btn {
    margin-top: 1.25rem;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease) 0.44s, transform 0.5s var(--ease) 0.44s,
      background 0.3s, color 0.3s;
  }

  body.nav-open .site-nav .btn {
    opacity: 1;
    transform: none;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-block: 9rem 5rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(16, 32, 47, 0.035) 1px, transparent 1px) 0 0 / 100% 3.2rem,
    linear-gradient(180deg, var(--paper-2), var(--paper) 55%);
}

.hero::after {
  content: "&";
  position: absolute;
  right: clamp(-6rem, -2vw, 2rem);
  bottom: -12rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30rem, 48vw, 52rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(169, 127, 47, 0.22);
  pointer-events: none;
  user-select: none;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.hero h1 {
  margin-block: 1.4rem 1.6rem;
}

/* Fraunces wordt geladen in cursief 400, niet in cursief 560. Zonder deze
   regel synthetiseert de browser het gewicht van de h1 (560) en wordt de
   cursief kunstmatig verzwaard. De 21 andere pagina's staan via .amp al
   op 400; dit trekt de homepage gelijk. */
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

.hero-aside {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.6rem;
}

.hero-aside p {
  font-size: var(--text-s);
  color: var(--muted);
  max-width: 26em;
}

.hero-aside .sig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}

.hero-aside .sig small {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--label-s);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 0.4rem;
}

/* Statenbalk */
.statbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.statbar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: 2rem 1.5rem;
  border-left: 1px solid var(--line-soft);
}

.stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}

.stat b .amp {
  font-size: 0.8em;
}

/* Het label is een DIRECT kind van .stat. Zonder de > raakte deze regel ook
   het cijfer, dat in de HTML binnen de <b> staat: de vier kerncijfers
   verschenen daardoor als 11 px grijze mono in plaats van 32 px Fraunces. */
.stat > span {
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Diensten ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.45s var(--ease);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}

/* Deze kaart is een <article> met losse links erin, geen klikzone. Ze tilde
   wel op bij hover, waardoor de link wegschoof onder de cursor. De messing
   lat blijft: die markeert waar je staat zonder iets te verplaatsen. */
.service-card:hover {
  border-color: var(--line);
}

.service-card:focus-within::before {
  transform: scaleY(1);
  transform-origin: top;
}

.service-card:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}

.service-card .num {
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.2em;
  color: var(--brass-text);
}

.service-card h3 {
  font-size: 1.45rem;
}

.service-card p {
  color: var(--muted);
  font-size: var(--text-s);
  flex-grow: 1;
}

.service-card .link-more {
  margin-top: 0.4rem;
}

/* Dienstenpagina — detailblokken */
.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}

.service-detail:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.service-detail .num {
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.2em;
  color: var(--brass-text);
  margin-bottom: 0.9rem;
}

.service-detail h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  max-width: 12em;
}

.service-detail .body p + p {
  margin-top: 1rem;
}

.check-list {
  margin-top: 1.6rem;
  display: grid;
  gap: 0.65rem;
}

.check-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--text-s);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 1.05rem;
  height: 1px;
  background: var(--brass);
}

.check-list li b {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Werkwijze / stappen ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.step {
  counter-increment: step;
  position: relative;
  padding: 2rem 1.75rem 1.9rem;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 1.1rem;
}

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 0.55rem;
}

.step p {
  font-size: var(--text-s);
  color: var(--muted);
}

/* Verticale tijdlijn (starters) */
.timeline {
  position: relative;
  display: grid;
  gap: 0;
  counter-reset: tl;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line);
}

.tl-item {
  counter-increment: tl;
  position: relative;
  padding: 0 0 2.6rem 4.5rem;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: counter(tl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.2rem;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.08em;
  color: var(--brass-2);
  background: var(--paper);
  border: 1px solid var(--brass);
  border-radius: 50%;
}

.tl-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.tl-item p {
  color: var(--muted);
  max-width: var(--measure);
}

/* ---------- Kantoren ---------- */
.offices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.office {
  display: block;
  padding: 1.9rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.office:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(16, 32, 47, 0.22);
}

/* Een inktschaduw op een inktondergrond is onzichtbaar. In de donkere
   secties moet de rand de hover dragen. */
.section--ink .office:hover {
  border-color: rgba(192, 154, 74, 0.45);
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.5);
}

.office .tag {
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.office h3 {
  font-size: 1.5rem;
  margin: 0.5rem 0 0.6rem;
}

.office p {
  font-size: var(--text-s);
  color: var(--muted);
  line-height: 1.55;
}

.section--ink .office .tag {
  color: var(--brass-bright);
}

/* --brass-2 is bedoeld voor licht papier en haalt op de inktkleur maar
   3,16:1. In de donkere secties moet messing juist oplichten. */
.section--ink .link-more {
  color: var(--brass-bright);
}

.section--ink .link-more:hover {
  border-color: var(--brass-bright);
}

.section--ink .office {
  background: var(--ink-2);
  border-color: var(--line-paper);
}

.section--ink .office h3 {
  color: var(--paper);
}

.section--ink .office p {
  color: rgba(247, 244, 237, 0.65);
}

/* ---------- Split (over ons / quote) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.split .body p + p {
  margin-top: 1.1rem;
}

.portrait-card {
  position: relative;
  background: var(--ink);
  border-radius: var(--radius);
  padding: clamp(2.25rem, 4vw, 3.25rem);
  color: rgba(247, 244, 237, 0.85);
  overflow: hidden;
}

.portrait-card::after {
  content: "&";
  position: absolute;
  right: -2.5rem;
  bottom: -5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16rem;
  line-height: 1;
  color: rgba(192, 154, 74, 0.12);
  pointer-events: none;
}

/* Portretfoto in de citaatkaart */
.portrait-card .foto {
  position: relative;
  z-index: 1;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  margin-bottom: 1.6rem;
  border: 1px solid rgba(192, 154, 74, 0.55);
}

/* Groot portret, bv. naast de tekst op de over-onspagina */
.portret {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
}

.portret img {
  width: 100%;
  /* height:auto is nodig: zonder dat wint het height-attribuut uit de HTML
     en wordt aspect-ratio genegeerd. Die attributen blijven wel staan,
     want ze voorkomen dat de pagina verspringt tijdens het laden. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.portret figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.5rem 1.4rem;
  background: linear-gradient(transparent, rgba(16, 32, 47, 0.9));
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.portret figcaption small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-top: 0.35rem;
}

.portrait-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.45;
  color: var(--paper);
}

.portrait-card figcaption {
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-bright);
}

/* Waarden */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.value {
  padding: 2.25rem 2rem;
  background: var(--white);
  border-left: 1px solid var(--line-soft);
}

.value:first-child {
  border-left: 0;
}

.value .amp {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.9rem;
}

.value h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.value p {
  font-size: var(--text-s);
  color: var(--muted);
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  background-image: linear-gradient(rgba(247, 244, 237, 0.045) 1px, transparent 1px);
  background-size: 100% 3.2rem;
}

.cta-band::before {
  content: "&";
  position: absolute;
  left: -3rem;
  top: -7rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24rem;
  line-height: 1;
  color: rgba(192, 154, 74, 0.09);
  pointer-events: none;
}

.cta-band .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 2rem 4rem;
  align-items: center;
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.cta-band h2 {
  color: var(--paper);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  max-width: 15em;
}

.cta-band p {
  margin-top: 1rem;
  color: rgba(247, 244, 237, 0.66);
  max-width: 34em;
}

.cta-band .actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}

/* ---------- Nieuws ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -24px rgba(16, 32, 47, 0.25);
}

.news-card .card-top {
  padding: 1.5rem 1.75rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.news-card time,
.news-card .cat {
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.news-card .cat {
  color: var(--brass-text);
}

.news-card .card-body {
  padding: 0.9rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex-grow: 1;
}

.news-card h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  transition: color 0.3s var(--ease);
}

.news-card:hover h3 {
  color: var(--brass-2);
}

.news-card p {
  font-size: var(--text-s);
  color: var(--muted);
  flex-grow: 1;
}

/* ---------- Artikel ---------- */
.article-hero {
  padding: 10rem 0 3.5rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
}

.article-hero .meta {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.article-hero .meta .cat {
  color: var(--brass-text);
}

.article-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  max-width: 18em;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose h2 {
  font-size: 1.65rem;
  margin-top: 2.75rem;
}

.prose h3 {
  font-size: 1.25rem;
  margin-top: 2.25rem;
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
  display: grid;
  gap: 0.5rem;
}

.prose li::marker {
  color: var(--brass);
}

.prose strong {
  color: var(--ink);
}

.prose a {
  color: var(--brass-2);
  border-bottom: 1px solid rgba(169, 127, 47, 0.4);
  transition: border-color 0.3s;
}

.prose a:hover {
  border-color: var(--brass-2);
}

.prose blockquote {
  border-left: 2px solid var(--brass);
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
}

.prose .note {
  padding: 1.4rem 1.6rem;
  background: var(--paper-2);
  border-left: 2px solid var(--brass);
  border-radius: var(--radius);
  font-size: var(--text-s);
  color: var(--muted);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.prose th {
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-2);
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.6rem 0;
  text-align: left;
}

.faq-q .idx {
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.12em;
  color: var(--brass-text);
  min-width: 2.2rem;
}

.faq-q h3 {
  flex-grow: 1;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  transition: color 0.3s var(--ease);
}

.faq-q:hover h3 {
  color: var(--brass-2);
}

.faq-q .plus {
  position: relative;
  align-self: center;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.faq-q .plus::before,
.faq-q .plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%;
  height: 1.5px;
  background: var(--brass-2);
  transition: transform 0.4s var(--ease);
}

.faq-q .plus::after {
  transform: rotate(90deg);
}

.faq-item.is-open .plus::after {
  transform: rotate(0deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p,
.faq-a ul {
  /* De inspringing van 3,7rem gaat van de leesbreedte af */
  max-width: calc(var(--measure) + 3.7rem);
  color: var(--muted);
  padding-left: 3.7rem;
}

.faq-a > div > :last-child {
  padding-bottom: 1.8rem;
}

.faq-a p + p {
  margin-top: 0.8rem;
}

.faq-a ul {
  list-style: disc;
  padding-left: 5rem;
  margin-top: 0.8rem;
  display: grid;
  gap: 0.35rem;
}

/* ---------- Tarieven ---------- */
.price-factors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.factor {
  display: flex;
  gap: 1.4rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.factor .idx {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--brass);
  line-height: 1.1;
}

.factor h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.factor p {
  font-size: var(--text-s);
  color: var(--muted);
}

/* ---------- Rekentool ---------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.calc-form {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.calc-field {
  display: grid;
  gap: 0.5rem;
}

.calc-field > label,
.calc-legend {
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc-field .hint {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

.calc-input {
  position: relative;
  display: flex;
  align-items: center;
}

.calc-input .prefix,
.calc-input .suffix {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-s);
  color: var(--brass-2);
  pointer-events: none;
}

.calc-input .prefix {
  left: 1rem;
}

.calc-input .suffix {
  right: 1rem;
}

.calc-input input {
  font: inherit;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  width: 100%;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 0.85rem 2.1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  -moz-appearance: textfield;
}

.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-input input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169, 127, 47, 0.15);
}

.calc-input--suffix input {
  padding: 0.85rem 3rem 0.85rem 1rem;
}

/* Keuzeschakelaar hoofd-/bijberoep */
.calc-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.calc-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calc-toggle label {
  padding: 0.8rem 1rem;
  text-align: center;
  font-size: var(--text-s);
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.calc-toggle--vier {
  grid-template-columns: repeat(4, 1fr);
}

.calc-toggle label + label {
  border-left: 1px solid var(--line);
}

.calc-toggle input:checked + label {
  background: var(--ink);
  color: var(--paper);
}

.calc-toggle input:focus-visible + label {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

/* Resultaatpaneel */
.calc-result {
  position: sticky;
  top: 6.5rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--ink);
  border-radius: var(--radius);
  color: rgba(247, 244, 237, 0.75);
  overflow: hidden;
}

.calc-result .label {
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-bright);
}

.calc-big {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  font-weight: 560;
  line-height: 1.05;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  margin: 0.5rem 0 0.3rem;
}

.calc-sub {
  font-size: var(--text-s);
  color: rgba(247, 244, 237, 0.6);
}

/* Verdeelbalk */
.calc-bar {
  display: flex;
  height: 0.6rem;
  margin: 1.9rem 0 1.1rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(247, 244, 237, 0.12);
}

/* De segmentbreedte wordt via flex-basis gestuurd, niet via width, en
   bewust zonder transitie: een overgang op de maatvoering van een
   flex-item houdt hier de nieuwe waarde tegen, waardoor de balk leeg
   blijft. De cijfers ernaast springen ook meteen, dus dit loopt gelijk. */
.calc-bar span {
  display: block;
  flex: 0 0 0%;
}

.calc-bar .seg-netto { background: var(--brass-bright); }
.calc-bar .seg-sociaal { background: rgba(247, 244, 237, 0.5); }
.calc-bar .seg-belasting { background: rgba(247, 244, 237, 0.24); }

.calc-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: var(--label-m);
  color: rgba(247, 244, 237, 0.6);
}

.calc-legend-items span::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  margin-right: 0.45rem;
}

.calc-legend-items .k-netto::before { background: var(--brass-bright); }
.calc-legend-items .k-sociaal::before { background: rgba(247, 244, 237, 0.5); }
.calc-legend-items .k-belasting::before { background: rgba(247, 244, 237, 0.24); }

.calc-rows {
  margin-top: 1.9rem;
  border-top: 1px solid var(--line-paper);
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line-paper);
  font-size: var(--text-s);
}

.calc-row b {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--paper);
  white-space: nowrap;
}

.calc-row small {
  display: block;
  font-size: var(--label-m);
  color: rgba(247, 244, 237, 0.45);
  margin-top: 0.1rem;
}

.calc-row--total {
  border-bottom: 0;
  padding-top: 1.1rem;
}

.calc-row--total b {
  color: var(--brass-bright);
  font-size: 1.15rem;
}

.calc-tip {
  margin-top: 1.6rem;
  padding: 1.1rem 1.25rem;
  background: rgba(192, 154, 74, 0.13);
  border-left: 2px solid var(--brass-bright);
  border-radius: var(--radius);
  font-size: var(--text-s);
  color: rgba(247, 244, 237, 0.85);
}

.calc-tip b {
  color: var(--brass-bright);
}

.calc-note {
  margin-top: 1.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.6;
}

/* Twee scenario's naast elkaar (eenmanszaak tegenover vennootschap) */
.vergelijk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.vergelijk-kaart {
  padding: 1.6rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.vergelijk-kaart.is-beste {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass), 0 18px 36px -22px rgba(16, 32, 47, 0.3);
}

.vergelijk-kaart h3 {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.vergelijk-kaart .tag {
  font-family: var(--font-mono);
  font-size: var(--label-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  min-height: 1.1em;
  display: block;
}

.vergelijk-bedrag {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 560;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0.9rem 0 0.15rem;
}

.vergelijk-kaart .onder {
  font-size: var(--text-xs);
  color: var(--muted);
}

.vergelijk-regels {
  margin-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}

.vergelijk-regels div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-xs);
  color: var(--muted);
}

.vergelijk-regels div:last-child {
  border-bottom: 0;
}

.vergelijk-regels b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vergelijk-oordeel {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--ink);
  border-radius: var(--radius);
  color: rgba(247, 244, 237, 0.82);
  font-size: var(--text-s);
}

.vergelijk-oordeel b {
  color: var(--brass-bright);
}

@media (max-width: 640px) {
  .vergelijk {
    grid-template-columns: 1fr;
  }
}

.calc-assumptions {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.calc-assumptions h3 {
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}

.calc-assumptions ul {
  display: grid;
  gap: 0.5rem;
  font-size: var(--text-s);
  color: var(--muted);
}

.calc-assumptions li {
  position: relative;
  padding-left: 1.5rem;
}

.calc-assumptions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.8rem;
  height: 1px;
  background: var(--brass);
}

@media (max-width: 900px) {
  .calc {
    grid-template-columns: 1fr;
  }

  .calc-result {
    position: static;
  }
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.contact-info {
  display: grid;
  gap: 2rem;
}

.contact-block .label {
  font-family: var(--font-mono);
  font-size: var(--label-s);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: 0.5rem;
}

.contact-block a.big,
.contact-block p.big {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--ink);
  transition: color 0.3s;
}

.contact-block a.big:hover {
  color: var(--brass-2);
}

.contact-block p {
  color: var(--muted);
}

/* Formulier */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-mono);
  /* 0,68rem is ongeveer 10,9 px — te klein voor hoofdletters met veel
     letterafstand. Iets groter en met minder spatiëring leest vlotter. */
  font-size: var(--label-m);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.field label b {
  color: var(--brass-text);
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--text-s);
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 8.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169, 127, 47, 0.15);
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: var(--err);
}

.field .error-msg {
  display: none;
  font-size: var(--label-l);
  color: var(--err);
}

.field.is-invalid .error-msg {
  display: block;
}

.form-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.form-footer small {
  color: var(--muted);
  font-size: var(--text-xs);
  max-width: 28em;
}

.form-status {
  grid-column: 1 / -1;
  display: none;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-size: var(--text-s);
}

.form-status.is-ok {
  display: block;
  background: rgba(46, 110, 78, 0.1);
  border: 1px solid rgba(46, 110, 78, 0.35);
  color: var(--ok);
}

.form-status.is-err {
  display: block;
  background: rgba(163, 55, 46, 0.09);
  border: 1px solid rgba(163, 55, 46, 0.35);
  color: var(--err);
}

/* Neutraal: er moet nog iets gebeuren bij de bezoeker zelf. Bewust niet
   groen — dat zou een verzending suggereren die er niet is. */
.form-status.is-info {
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--text);
}

.form-status a {
  color: var(--brass-2);
  border-bottom: 1px solid currentColor;
}

.map-frame {
  margin-top: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  filter: grayscale(1) sepia(0.14) contrast(0.95);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ---------- Subpage hero ---------- */
.page-hero {
  padding: 11rem 0 4.5rem;
  background:
    linear-gradient(rgba(16, 32, 47, 0.035) 1px, transparent 1px) 0 0 / 100% 3.2rem,
    var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  margin-top: 1.2rem;
  max-width: 15em;
}

.page-hero .lead {
  margin-top: 1.4rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(247, 244, 237, 0.68);
  font-size: var(--text-s);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 3rem 2.5rem;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 3rem;
}

.footer-brand .brand {
  color: var(--paper);
  font-size: 1.5rem;
}

.footer-brand .brand small {
  color: rgba(247, 244, 237, 0.45);
}

.footer-brand .tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass-bright);
  font-size: 1.1rem;
  margin-top: 1.2rem;
}

.footer-brand p {
  margin-top: 1rem;
  max-width: 26em;
  font-size: var(--text-s);
  color: rgba(247, 244, 237, 0.55);
}

.footer-col h4 {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--label-s);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}

.footer-col ul {
  display: grid;
  gap: 0.6rem;
}

.footer-col a {
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--brass-bright);
}

.footer-col address {
  font-style: normal;
  line-height: 1.6;
}

.footer-col address + address {
  margin-top: 1rem;
}

.footer-col address b {
  color: var(--paper);
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid var(--line-paper);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: var(--text-xs);
  color: rgba(247, 244, 237, 0.45);
}

.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-bottom a:hover {
  color: var(--brass-bright);
}

/* ---------- Reveal animaties ---------- */
/* Alleen verbergen wanneer JavaScript effectief draait. De klasse .js wordt
   in de head gezet. Zonder die voorwaarde blijft de volledige pagina op
   opacity 0 staan zodra main.js faalt of geblokkeerd wordt — inclusief het
   contactformulier, dat zelf class="form reveal" draagt. */
/* Kort en klein gehouden: dit is een accent bij het lezen, geen voorstelling.
   De vertraging per blok is bewust weg — gestapelde vertragingen laten een
   pagina traag aanvoelen zonder dat iemand kan zeggen waarom. */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

/* Een blok waar een ankerlink naartoe springt moet er staan, ook wanneer
   de waarnemer het nog niet zag. */
.js .reveal:target {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero intro-sequentie.
   Bewust zonder opacity: de h1 is het LCP-element, en een element met
   opacity 0 telt bij Chrome niet mee als LCP-kandidaat. Met de oude
   vertraging begon de meting pas na 0,27 s. Nu schuift de tekst enkel
   in, maar staat ze meteen op het scherm. */
.js .hero [data-intro],
.js .page-hero [data-intro] {
  transform: translateY(26px);
  animation: intro 0.9s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 0.09s);
}

@keyframes intro {
  to {
    transform: none;
  }
}

/* ---------- 404 ---------- */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  background: var(--ink);
  color: rgba(247, 244, 237, 0.75);
}

.error-page .code {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6rem, 18vw, 12rem);
  color: var(--brass-bright);
  line-height: 1;
}

.error-page h1 {
  color: var(--paper);
  margin: 1rem 0 0.75rem;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--label-m);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.error-links a {
  color: var(--brass-bright);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: border-color 0.3s var(--ease);
}

.error-links a:hover {
  border-color: var(--brass-bright);
}

.error-acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

.error-voet {
  margin-top: 2.75rem;
  font-size: var(--text-xs);
  color: rgba(247, 244, 237, 0.5);
}

.error-voet a {
  color: var(--brass-bright);
}

/* ---------- Responsief ---------- */
@media (max-width: 1020px) {
  .offices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .hero-grid,
  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
    padding-top: 8.5rem;
  }

  .hero-aside {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 2rem 0 0;
  }

  .service-detail {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .steps,
  .values,
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }

  .value {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .value:first-child {
    border-top: 0;
  }

  .cta-band .container {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .statbar .container {
    grid-template-columns: 1fr 1fr;
  }

  .stat {
    padding: 1.4rem 1rem;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .stat:nth-child(-n + 2) {
    border-top: 0;
  }

  .stat:nth-child(even) {
    border-left: 1px solid var(--line-soft);
  }

  .stat:first-child {
    padding-left: 1rem;
  }

  .services-grid,
  .steps,
  .values,
  .news-grid,
  .price-factors,
  .offices-grid,
  .form {
    grid-template-columns: 1fr;
  }

  .field--full,
  .form-footer,
  .form-status {
    grid-column: auto;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .faq-a p,
  .faq-a ul {
    padding-left: 0;
  }

  .faq-a ul {
    padding-left: 1.25rem;
  }
}

/* ---------- Toegankelijkheid ---------- */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.8rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  transition: top 0.3s;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* De vertragingen moeten mee naar nul. Blijft alleen de duur weg, dan
     opent het mobiele menu in zeven harde sprongen tot 0,44 s. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal,
  .js .hero [data-intro],
  .js .page-hero [data-intro] {
    opacity: 1;
    transform: none;
  }
}