/* ==========================================================================
   Salon Romy, Nuland
   Visual direction: "warm inkt". Ontleend aan het eigen logo van de salon,
   de gouden krabbel-cirkel, de antracieten inktcirkel en de warme
   behandelkamer met oudroze doeken en donker hout.
   ========================================================================== */

/* ---------- Fonts (self-hosted, geen externe requests) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-var-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-var-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #26221f;
  --ink-deep: #17140f;
  --ink-soft: #4a443e;
  --paper: #fbf8f4;
  --paper-2: #f3ede5;
  --gold: #d1a950;
  --gold-deep: #7d5f18;
  --rose: #d9a79a;
  --rose-wash: #f5e7e2;
  --line: #e2d9cd;
  --line-dark: #3d3833;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 74rem;
  --wrap-narrow: 46rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --step-xs: 0.8125rem;
  --step-sm: 0.9375rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.95rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.4vw, 2.85rem);
  --step-4: clamp(2.3rem, 1.75rem + 2.6vw, 4.25rem);

  --radius: 2px;
  --radius-img: 4px;
  --shadow: 0 1px 2px rgba(38, 34, 31, .04), 0 12px 32px -12px rgba(38, 34, 31, .16);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Het hidden-attribuut moet ook winnen van een display uit een class.
   Zonder deze regel blijft bijvoorbeeld de WhatsApp-knop (display:inline-flex)
   zichtbaar terwijl er geen nummer is ingevuld, en dat wordt een dode link. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 45, 'WONK' 1, 'opsz' 40;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: var(--radius);
}

strong { font-weight: 600; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
/* Een smalle leeskolom, maar wel uitgelijnd op dezelfde linkerkantlijn als de
   koppen erboven. De kolom zelf centreren zou de tekst laten verspringen ten
   opzichte van de h1, wat leest als een fout in plaats van als een keuze. */
.wrap-narrow > * { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(3.25rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--paper2 { background: var(--paper-2); }
.section--rose { background: var(--rose-wash); }
.stack > * + * { margin-top: 1rem; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 42ch; }
.measure { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-size: var(--step-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: .9rem;
}
.on-ink .eyebrow { color: var(--gold); }

/* ---------- Signature: de gouden krabbel uit het logo ---------- */
/* Eén motief, drie plekken: onder kopteksten, bij de actieve navigatie,
   en als ring om de levelnummers van de gezichtsbehandelingen. */
.scribble {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scribble > svg {
  position: absolute;
  left: -3%;
  bottom: -0.42em;
  width: 106%;
  height: 0.52em;
  overflow: visible;
  pointer-events: none;
}
.scribble path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 244, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding-block: .6rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.brand img { width: 116px; height: auto; }
.brand__text { display: none; }

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  font: inherit;
  font-size: var(--step-sm);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 10px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 4.25px; }
.nav-toggle__bars::after { top: 8.5px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-4.25px) rotate(-45deg); }

.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.35rem; }
.site-nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: var(--step-sm);
  padding: .35rem 0;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current='page'] { color: var(--ink); font-weight: 600; }
.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -1px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6C22 2 38 7 58 4s40-4 60 1' fill='none' stroke='%23d1a950' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.site-nav .nav-cta {
  color: var(--paper);
  background: var(--ink);
  padding: .5rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.site-nav .nav-cta:hover { background: var(--ink-deep); color: var(--paper); }
/* Op de contactpagina krijgt deze link aria-current, en die regel is
   specifieker dan .site-nav .nav-cta. Zonder onderstaande regel wordt de tekst
   donker op een donkere knop, dus onleesbaar. */
.site-nav .nav-cta[aria-current='page'] { color: var(--paper); }
.site-nav .nav-cta[aria-current='page']::after { display: none; }

@media (max-width: 60rem) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .site-nav a { display: block; padding: .85rem 0; font-size: var(--step-0); }
  .site-nav .nav-cta { text-align: center; padding: .85rem 1rem; }
}
@media (min-width: 60.0625rem) {
  .nav-toggle { display: none; }
  .site-header__inner { position: relative; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.on-ink .btn--primary { background: var(--gold); color: var(--ink-deep); }
.on-ink .btn--primary:hover { background: #e0bb68; }
.on-ink .btn--ghost { color: var(--paper); border-color: rgba(251, 248, 244, .5); }
.on-ink .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 1px;
  transition: border-color .2s ease;
}
.textlink:hover { border-color: var(--ink); }
.textlink svg { width: .8em; height: .8em; transition: transform .2s ease; }
.textlink:hover svg { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem); }
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}
.hero h1 { margin-bottom: 1.25rem; }
.hero .lede { margin-bottom: 1.75rem; max-width: 46ch; }
.hero__note {
  margin-top: 1.5rem;
  font-size: var(--step-sm);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
}
.hero__note span { display: inline-flex; align-items: center; gap: .4rem; }
.hero__note svg { width: 1em; height: 1em; color: var(--gold-deep); flex: none; }

.hero__figure { position: relative; }
.hero__figure::before {
  content: '';
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 62%;
  height: 68%;
  background: var(--rose-wash);
  border-radius: var(--radius-img);
  z-index: 0;
}
.hero__figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow);
}

/* ---------- Inktband met feiten ---------- */
.factband { background: var(--ink); color: var(--paper); }
.factband ul {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.factband li { display: flex; gap: .85rem; align-items: flex-start; }
.factband svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--gold); margin-top: .15rem; }
.factband strong { display: block; font-weight: 600; }
.factband p { font-size: var(--step-sm); color: rgba(251, 248, 244, .72); margin-top: .15rem; }

/* ---------- Behandelmenu: rijen, geen kaarten ----------
   De site is opgebouwd als de behandelkaart die je in de salon krijgt. */
.menu { border-top: 1px solid var(--line); }
.menu__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color .2s ease;
}
.menu__item:hover { background: var(--paper-2); }
.menu__thumb {
  grid-row: span 3;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-img);
}
.menu__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.menu__title { font-family: var(--display); font-size: var(--step-2); font-variation-settings: 'SOFT' 45, 'WONK' 1, 'opsz' 32; }
.menu__price {
  margin-left: auto;
  font-size: var(--step-sm);
  font-weight: 600;
  color: var(--gold-deep);
  white-space: nowrap;
}
.menu__desc { color: var(--ink-soft); max-width: 58ch; }
.menu__more {
  font-size: var(--step-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
}
.menu__more svg { width: .75em; height: .75em; transition: transform .2s ease; }
.menu__item:hover .menu__more svg { transform: translateX(3px); }
@media (max-width: 34rem) {
  .menu__thumb { width: 64px; height: 64px; }
  .menu__item { gap: .3rem 1rem; }
}

/* ---------- Kolommen met korte blokken ---------- */
.cols {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.block h3 { margin-bottom: .5rem; }
.block p { color: var(--ink-soft); }
.block__mark {
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1rem;
}

/* ---------- Signature 2: de huidladder (levels 1 t/m 5) ----------
   Een echte volgorde uit het Lanéche-systeem waarmee de salon werkt,
   dus de nummering draagt hier informatie en is geen versiering. */
.ladder { border-top: 1px solid var(--line); }
.ladder__step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: .35rem 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.ladder__num {
  grid-row: span 2;
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-variation-settings: 'SOFT' 45, 'WONK' 1, 'opsz' 30;
  color: var(--ink);
}
.ladder__num::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M40 8C24 3 8 13 6 28c-2 16 12 30 28 29 14-1 25-13 23-27C55 17 45 9 33 9 21 9 12 18 12 29c0 10 8 18 18 18' fill='none' stroke='%23d1a950' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.ladder__bar { grid-column: 2; height: 3px; background: var(--rose-wash); border-radius: 2px; margin-top: .6rem; }
.ladder__bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.ladder h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.ladder p { color: var(--ink-soft); max-width: 62ch; }

/* ---------- Tarieven ---------- */
.pricetable { width: 100%; border-collapse: collapse; margin-top: 1.25rem; }
.pricetable caption {
  text-align: left;
  font-family: var(--display);
  font-size: var(--step-2);
  font-variation-settings: 'SOFT' 45, 'WONK' 1, 'opsz' 32;
  padding-bottom: .5rem;
}
.pricetable th, .pricetable td {
  text-align: left;
  padding: .95rem 1rem .95rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.pricetable thead th {
  font-family: var(--body);
  font-size: var(--step-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  padding-bottom: .5rem;
}
.pricetable tbody th { font-weight: 600; font-family: var(--body); font-size: var(--step-0); }
.pricetable .num { text-align: right; white-space: nowrap; font-weight: 600; padding-right: 0; }
.pricetable .desc { color: var(--ink-soft); font-size: var(--step-sm); display: block; margin-top: .25rem; font-weight: 400; }
.pricetable .dur { white-space: nowrap; color: var(--ink-soft); font-size: var(--step-sm); }
@media (max-width: 40rem) {
  .pricetable .dur { display: none; }
}
.table-scroll { overflow-x: auto; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--step-1);
  font-variation-settings: 'SOFT' 45, 'WONK' 1, 'opsz' 28;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: .7rem;
  height: .7rem;
  border-right: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg) translateY(-25%);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq .faq__answer { padding-bottom: 1.35rem; color: var(--ink-soft); max-width: 66ch; }
.faq .faq__answer > * + * { margin-top: .75rem; }

/* ---------- Stappen (afspraak maken) ---------- */
.steps { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: .75rem;
}
.steps h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.steps p { color: var(--ink-soft); font-size: var(--step-sm); }
.on-ink .steps p { color: rgba(251, 248, 244, .75); }
.on-ink .steps li::before { border-color: var(--gold); color: var(--gold); }

/* ---------- Contactblok ---------- */
.cta-band { background: var(--ink); color: var(--paper); }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { color: rgba(251, 248, 244, .78); }
.cta-band__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .cta-band__grid { grid-template-columns: 1.1fr .9fr; align-items: center; } }

.naplist { display: grid; gap: 1rem; }
.naplist div { display: flex; gap: .85rem; align-items: flex-start; }
.naplist svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .25rem; color: var(--gold-deep); }
.on-ink .naplist svg { color: var(--gold); }
.naplist dt { font-size: var(--step-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); }
.on-ink .naplist dt { color: var(--gold); }
.naplist dd { font-size: var(--step-1); }
.naplist a { text-decoration: none; border-bottom: 1.5px solid currentColor; }

.map-link { display: block; text-decoration: none; }
.map-link img { width: 100%; border-radius: var(--radius-img); border: 1px solid var(--line); }
.on-ink .map-link img { border-color: var(--line-dark); }
.map-link span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .75rem;
  font-size: var(--step-sm);
  font-weight: 600;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 1px;
}
/* Zonder maat neemt een inline SVG zijn eigen standaardformaat aan en duwt
   dan de tekst ernaast in stukken. */
.map-link span svg { width: .8em; height: .8em; flex: none; }

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: 1.5rem; font-size: var(--step-sm); color: var(--ink-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: .4rem; color: var(--line); }
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--line); }
.crumbs a:hover { border-color: var(--ink); }

/* ---------- Paginakop ---------- */
.pagehead { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3rem); }
.pagehead h1 { margin-bottom: 1rem; }
.pagehead__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 56rem) { .pagehead__grid { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.pagehead img { border-radius: var(--radius-img); box-shadow: var(--shadow); width: 100%; }

/* ---------- Prose (juridische en lange teksten) ---------- */
.prose { max-width: 68ch; }
/* Staat .prose op hetzelfde element als .wrap, dan zou de max-width de hele
   wrapper versmallen en die daarna centreren, waardoor de tekst verspringt
   ten opzichte van de kop erboven. Dus: wrapper op volle breedte houden en
   alleen de regellengte van de losse alinea's begrenzen. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 68ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 1.35rem; }
.prose ul li + li { margin-top: .5rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .65em;
  width: .45rem; height: .45rem;
  background: var(--gold);
  border-radius: 50%;
}
.prose a { text-decoration: none; border-bottom: 1.5px solid var(--gold); }

/* ---------- Notitie / melding ---------- */
.note {
  border-left: 3px solid var(--gold);
  background: var(--paper-2);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note p + p { margin-top: .75rem; }
.note__date { font-size: var(--step-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-deep); color: rgba(251, 248, 244, .8); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--paper); }
.site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 {
  font-family: var(--body);
  font-size: var(--step-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1rem;
}
.site-footer li + li { margin-top: .55rem; }
.site-footer .footer-brand img { width: 128px; margin-bottom: 1rem; }
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: var(--step-sm);
  color: rgba(251, 248, 244, .55);
}
.site-footer__bottom a { border-bottom: 1px solid transparent; }
.site-footer__bottom a:hover { border-color: currentColor; }

/* ---------- Mobiele contactbalk ---------- */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
}
.callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step-sm);
}
.callbar a + a { border-left: 1px solid var(--line-dark); }
.callbar svg { width: 1.05em; height: 1.05em; color: var(--gold); }
@media (min-width: 48rem) { .callbar { display: none; } }
@media (max-width: 47.9375rem) { body { padding-bottom: 3.5rem; } }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Motion ----------
   Eén bewegingsmoment: de hero die bij het laden rustig omhoog komt. Dat is
   een CSS-animatie die altijd afloopt, dus inhoud kan nooit onzichtbaar
   blijven doordat een script of een scrollpositie iets niet triggert.
   Bewust geen reveal-bij-scrollen verderop de pagina: die verbergt inhoud
   standaard, en dat is het risico niet waard op een site die gevonden moet
   worden. De regel geldt alleen met JavaScript (html.js), zodat de tekst
   zonder scripts meteen staat waar hij hoort. */
.js .hero .reveal {
  animation: rise .7s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.scribble path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw .9s .35s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .hero .reveal { animation: none; opacity: 1; transform: none; }
  .scribble path { stroke-dashoffset: 0; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .callbar, .cta-band, .site-footer { display: none; }
  body { background: #fff; }
}