/* ============================================================
   trwn.eu — editorial design system
   One stylesheet for the whole English marketing site.
   Direction: an international bridal magazine, not a SaaS page.
   Warm paper ground, light serif display, one gold hairline as
   the recurring signature. Everything else stays quiet.
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────── */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(/assets/fonts/cormorant-garamond-300i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(/assets/fonts/cormorant-garamond-300i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/nunito-sans-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/nunito-sans-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/nunito-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/nunito-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-sans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-sans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ── Tokens ──────────────────────────────────────────────── */

:root {
  /* merk (uit deploy/styles.css) */
  --sand: #C4A882; --sand-light: #D4C4A8; --sand-pale: #EDE6D8;
  --blush: #D4A0A0; --blush-pale: #F5E6E6; --charcoal: #2D2926;
  --accent: #8B7355; --goud: #CFAC48; --sage: #A8B5A0;
  --warm-white: #FAF7F2; --cream: #F5F0E8; --surface: #FFFFFF;
  --ink: #2D2926; --warm-gray: #6B635B; --light-gray: #B8B0A6;
  /* tekstveilige varianten van --goud/--blush: zelfde familie, donkerder
     zodat ze als TEKST (kicker-labels, cursieve nadruk, links) WCAG AA
     halen op elke crème/witte ondergrond die de site gebruikt. --goud en
     --blush zelf blijven ongewijzigd voor decoratie (lijnen, randen,
     vlakken) — die hoeven geen teksteis te halen. Zie site.css-verslag
     in task-11-report.md voor de berekende contrastcijfers. */
  --goud-text: #796220; --blush-text: #9A4646;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;
  /* redactionele schaal */
  --step-display: clamp(2.75rem, 8vw, 6.5rem);   /* hero */
  --step-1: clamp(2rem, 4.5vw, 3.75rem);         /* sectiekop */
  --step-2: clamp(1.4rem, 2.2vw, 1.9rem);        /* subkop / standfirst */
  --measure: 62ch; --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-gap: clamp(5rem, 12vw, 11rem);

  /* afgeleid: ritme, lijnen, beweging */
  --wrap: 1240px;
  --hairline: 1px solid var(--sand-pale);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 1px 2px rgba(45, 41, 38, .03), 0 12px 40px rgba(45, 41, 38, .05);
  --shadow-lift: 0 2px 4px rgba(45, 41, 38, .04), 0 24px 64px rgba(45, 41, 38, .09);
  --tracking-kicker: .18em;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: .7s;
  --header-h: 76px;
}

/* ── Reset ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--ink);
  background: var(--warm-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Papierkorrel: één vast, niet-aanklikbaar vlak over de hele pagina.
   Nooit aan een scrollende container hangen — dat hertekent continu. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--sand-pale); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 400;
  padding: .7rem 1.2rem;
  background: var(--ink);
  color: var(--warm-white);
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .04em;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Layout ──────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * .55); }

.band { background: var(--cream); }
.band--paper { background: var(--surface); }
.band--ink { background: var(--charcoal); color: var(--sand-pale); }

/* 12-koloms redactieraster. Varianten zetten alleen --cols. */
.ed-grid {
  --cols: 12;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: start;
}
.ed-grid--2 { --cols: 2; }
.ed-grid--3 { --cols: 3; }
.ed-grid--4 { --cols: 4; }

/* Spans, alleen zinvol binnen het 12-koloms raster. */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: 1 / -1; }

/* Asymmetrische tweedeling: 7 tegen 5, het redactionele evenwicht. */
.split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }

.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; margin-inline: auto; }

/* Vaste afstanden tussen de vaste combinaties, zodat pagina's geen
   eigen marges hoeven te verzinnen (en dus geen inline styles krijgen). */
.kicker + .display,
.kicker + .h-serif { margin-top: clamp(1rem, 2vw, 1.6rem); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: none;
}

.link-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin-top: 1.25rem;
}

/* ── Typografie ──────────────────────────────────────────── */

.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--goud-text);
}
.kicker--muted { color: var(--accent); }

.display,
.h-serif {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -.015em;
  text-wrap: balance;
}

.display {
  font-size: var(--step-display);
  line-height: .96;
}

.h-serif {
  font-size: var(--step-1);
  line-height: 1.06;
}

.h-serif--sm {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: 0;
}

/* De cursief binnen een serif-kop is de stem van het merk:
   waar de zin persoonlijk wordt, kleurt hij mee. */
.display em,
.h-serif em {
  font-style: italic;
  font-weight: 300;
  color: var(--blush-text);
}
.h-serif--sm em { color: var(--accent); }

.lede {
  font-size: var(--step-2);
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.45;
  color: var(--warm-gray);
  max-width: 42ch;
}

p, li { max-width: var(--measure); }
p + p { margin-top: 1rem; }

.muted { color: var(--warm-gray); }
.small { font-size: .875rem; line-height: 1.6; }

.prose h2 { font-family: var(--font-serif); font-weight: 300; font-size: var(--step-1); line-height: 1.1; margin-top: 2.5rem; }
.prose h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--step-2); line-height: 1.2; margin-top: 2rem; }
.prose p, .prose li { color: var(--warm-gray); }
.prose ul { margin-top: 1rem; }
.prose li { padding-left: 1.1rem; position: relative; }
.prose li + li { margin-top: .5rem; }
.prose li::before { content: ""; position: absolute; left: 0; top: .8em; width: 5px; height: 1px; background: var(--sand); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }

/* Het oversized cijfer: een drukwerk-folio, geen versiering.
   Alleen gebruiken waar de volgorde echt iets betekent. */
.num-xl {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: .8;
  color: rgba(196, 168, 130, .2);
  display: block;
}

.pullquote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 24ch;
  border: 0;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--goud);
}
.pullquote cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Gouden haarlijn: de handtekening van de site ─────────── */

.rule-gold {
  border: 0;
  height: 1px;
  background: var(--goud);
  opacity: .55;
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.rule-gold--gradient {
  opacity: 1;
  background: linear-gradient(to right, transparent, var(--goud), transparent);
}
.rule-gold--short { width: 64px; margin-inline: 0; }
.center > .rule-gold--short,
.rule-gold--short.center { margin-inline: auto; }

/* ── Knoppen ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform .45s var(--ease), background-color .45s var(--ease),
              color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.btn:active { transform: scale(.985); }

.btn--primary {
  background: var(--ink);
  color: var(--warm-white);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover {
  background: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(-1px) scale(.985); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--sand);
}
.btn--ghost:hover {
  background: var(--sand-pale);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn--lg { padding: 1.05rem 2.1rem; font-size: .86rem; }

/* Tekstlink met gouden onderlijn die bij hover doorloopt. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--sand-pale);
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.link-arrow:hover { border-color: var(--goud); color: var(--ink); }

/* ── Kaarten (dubbele rand: papier in een lade) ───────────── */

.card {
  background: var(--warm-white);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: 6px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.card__inner {
  background: var(--surface);
  border-radius: calc(var(--radius-lg) - 6px);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  height: 100%;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--sand-light);
  box-shadow: var(--shadow-lift);
}
.card--flat:hover { transform: none; box-shadow: none; }

.figure {
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: 6px;
  background: var(--surface);
}
.figure img { border-radius: calc(var(--radius-lg) - 6px); width: 100%; }
.figure figcaption {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--warm-gray);
  padding: .9rem .6rem .3rem;
}

/* ── Header ──────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-scrolled {
  background: var(--surface);
  border-bottom-color: var(--sand-pale);
  box-shadow: 0 1px 30px rgba(45, 41, 38, .05);
}

.site-header .logo { display: block; flex: none; padding-block: 1rem; }
.site-header .logo img { width: 92px; height: auto; }

.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-inline: auto;
}
.site-header nav a {
  position: relative;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--warm-gray);
  padding-block: .35rem;
  transition: color .4s var(--ease);
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--goud);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.site-header nav a:hover { color: var(--ink); }
.site-header nav a:hover::after { transform: scaleX(1); }
.site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: .5rem; flex: none; }
.header-cta .btn { padding: .45rem .9rem; font-size: .68rem; }

/* Taalkeuze: uitklapmenu met vlaggen (inhoud beheerd door
   scripts/build-eu-locales.mjs via data-lang-nav; <details> werkt ook
   zonder JavaScript, reveal.js sluit hem bij klik-ernaast en Escape). */
.lang-nav { position: relative; }
.lang-dd { position: relative; }
.lang-dd summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--warm-gray);
  padding: .45rem .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover { color: var(--ink); border-color: var(--sand-pale); }
.lang-dd[open] summary { color: var(--ink); border-color: var(--sand-pale); background: var(--surface); }
.lang-dd .flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(45, 41, 38, .08); flex: none; }
.lang-dd .chev { width: 10px; height: 6px; opacity: .55; transition: transform .25s var(--ease); }
.lang-dd[open] .chev { transform: rotate(180deg); }
.lang-dd ul {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 200;
  margin: 0;
  padding: .35rem;
  list-style: none;
  min-width: 10.5rem;
  background: var(--surface);
  border: 1px solid var(--sand-pale);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(45, 41, 38, .12);
}
.lang-dd ul a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: 9px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--ink);
}
.lang-dd ul a:hover { background: var(--cream); }
.lang-dd ul a[aria-current="true"] { background: var(--cream); font-weight: 600; }
/* In het mobiele paneel klapt de lijst gewoon in de flow open. */
.mobile-nav .lang-nav { align-self: flex-start; width: 100%; }
.mobile-nav .lang-dd ul {
  position: static;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: .2rem 0 0 .4rem;
  min-width: 0;
}

/* Plakbalk onderin op mobiel (zelfde gedrag als trwn.nl): verschijnt na
   flink scrollen, alleen op de homepage (het element staat alleen daar). */
.sticky-cta { display: none; }
@media (max-width: 780px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(254, 250, 245, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--sand-pale);
    box-shadow: 0 -6px 20px rgba(45, 41, 38, .06);
    transform: translateY(120%);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
  }
  .sticky-cta.show { transform: translateY(0); }
  .sticky-cta .btn { width: 100%; text-align: center; }
}

/* Hamburger: drie lijnen die naar een kruis vouwen. */
.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin-left: auto;
  position: relative;
  border-radius: 999px;
}
.nav-toggle span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1px;
  background: var(--ink);
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: clamp(1.5rem, 6vw, 3rem) var(--gutter) 3rem;
  background: var(--warm-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
  border-bottom: var(--hairline);
  padding-block: .7rem;
}
.mobile-nav .btn { margin-top: 1.75rem; align-self: flex-start; border-bottom: 0; }
.mobile-nav .btn--ghost + .btn--primary { margin-top: .75rem; }
body.nav-open { overflow: hidden; }

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
  background: var(--charcoal);
  color: var(--sand-pale);
  padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem;
  margin-top: var(--section-gap);
}
.site-footer .foot-grid {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.site-footer .logo img { width: 92px; height: auto; }
.site-footer .foot-tag {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--sand-light);
  max-width: 26ch;
}
.site-footer nav { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--goud);
  margin-bottom: .5rem;
}
.site-footer nav a {
  font-size: .875rem;
  color: var(--sand-light);
  border-bottom: 1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.site-footer nav a:hover { color: var(--warm-white); border-bottom-color: var(--goud); }
.site-footer .foot-legal {
  width: 100%;
  max-width: var(--wrap);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 1.75rem var(--gutter) 0;
  border-top: 1px solid rgba(237, 230, 216, .16);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--light-gray);
}
.site-footer .foot-legal a { color: var(--sand-light); text-decoration: underline; text-underline-offset: .2em; }
.site-footer .foot-legal a:hover { color: var(--warm-white); }

/* ── Reveal ──────────────────────────────────────────────── */

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; will-change: auto; }
/* Zonder JavaScript zet niemand `in` erop: dan mag er ook niets
   verborgen blijven staan. */
@media (scripting: none) { .rv { opacity: 1; transform: none; } }
.rv--d1 { transition-delay: .09s; }
.rv--d2 { transition-delay: .18s; }
.rv--d3 { transition-delay: .27s; }

/* ── Foutpagina ──────────────────────────────────────────── */

.page-narrow {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Mobiel ──────────────────────────────────────────────── */

@media (max-width: 960px) {
  .site-header nav { display: none; }
  /* De taalkiezer blijft áltijd in de balk staan, naast de hamburger;
     alleen de twee knoppen verhuizen naar het uitklapmenu. De automarge
     verhuist mee van de hamburger naar dit blok, anders plakt de kiezer
     links tegen het logo. */
  .header-cta { margin-left: auto; }
  .header-cta .btn { display: none; }
  .nav-toggle { display: block; margin-left: 0; }
  /* De kiezer in het uitklapmenu is daarmee dubbel geworden. */
  .mobile-nav .lang-nav { display: none; }
}

@media (max-width: 780px) {
  .ed-grid { --cols: 1 !important; gap: 2rem; }
  .ed-grid > * { grid-column: 1 / -1 !important; }
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split--reverse > :first-child { order: 0; }
  .site-footer .foot-grid { grid-template-columns: 1fr 1fr; }
  .pullquote { max-width: none; }
}

@media (max-width: 520px) {
  .site-footer .foot-grid { grid-template-columns: 1fr; }
  /* Alleen knoppen in een rij of in het menu vullen de breedte —
     nooit .btn in het algemeen: de hamburger is geen .btn maar zou
     via zo'n regel wel zijn vaste 44px kwijtraken. */
  .btn-row .btn,
  .mobile-nav .btn { width: 100%; justify-content: center; }
  /* Lange knopteksten (Duits!) mogen op smal scherm afbreken in plaats van
     de pagina breder te maken dan het scherm. */
  .btn { max-width: 100%; }
  .btn-row .btn, .mobile-nav .btn, .sticky-cta .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}

/* ── Bewegingsvoorkeur ───────────────────────────────────── */

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

/* ── Afdrukken ───────────────────────────────────────────── */

@media print {
  body::after, .site-header, .mobile-nav, .site-footer { display: none; }
  .rv { opacity: 1; transform: none; }
  body { background: #fff; }
}

/* ============================================================
   HOMEPAGE — secties die alleen op index.html voorkomen.
   Alles hieronder staat op zichzelf: geen enkele regel wijzigt
   een component uit het blok hierboven. De mobiele varianten
   staan onderaan dít blok, ná de basisregels.
   ============================================================ */

/* ── 1. Hero ─────────────────────────────────────────────────
   Tekst links op cream, rechts twee lagen papier: de foto bleedt
   (zij is het moment), het scherm zit in een kader (het is drukwerk).
   De schermafbeelding ligt absoluut over de foto heen, zodat hij bij
   het laden geen enkele regel verschuift. */

.hero {
  background: var(--cream);
  padding-block: clamp(2rem, 5vw, 4rem) calc(var(--section-gap) * .8);
}
/* De hero-kop staat in de smalle kolom van een tweedeling; op de volle
   --step-display liep hij naar vijf regels en duwde hij de knoppen onder de
   vouw. Alleen hier dus een lagere bovengrens. */
.hero .display { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
/* Precies halveren, niet 5,4 tegen 6,6: in de smallere variant paste de
   knoppenrij (502 px) niet meer naast elkaar in de tekstkolom (474 px). */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy .lede { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.hero-note { margin-top: 1.5rem; font-size: .8rem; letter-spacing: .06em; color: var(--warm-gray); }

.hero-stack { position: relative; padding-bottom: clamp(2rem, 7vw, 5rem); }
.hero-photo {
  width: 88%;
  margin-left: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.hero-shot {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  box-shadow: var(--shadow-lift);
}

/* ── 2. Statement ────────────────────────────────────────────
   Eén zin tussen twee gouden lijnen. Bewust smaller dan de kolom:
   een uitspraak van vier regels leest als drukwerk, van één regel
   als een banner. */

.statement {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  max-width: 30ch;
  margin-inline: auto;
}
.statement em { font-style: italic; color: var(--blush-text); }

/* ── 3. Hoofdstukken (features) ──────────────────────────────
   Zes redactionele rijen. Het folionummer is geen versiering: de
   volgorde is de leesvolgorde van het blad. */

.chapters > * + * { margin-top: clamp(4rem, 10vw, 8.5rem); }
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* Bij een omgekeerde rij wisselen de KOLOMBREEDTES mee, niet alleen de
   plaatsing: anders krijgt de ene schermafbeelding 7 kolommen en de volgende
   er 5, en golft de rechterkantlijn heen en weer. */
.chapter--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chapter--flip .chapter__text { grid-column: 2; grid-row: 1; }
.chapter--flip .chapter__figure { grid-column: 1; grid-row: 1; }
.chapter__text .num-xl { margin-bottom: .5rem; }
.chapter__text .kicker { margin-bottom: clamp(.75rem, 1.5vw, 1rem); }
.chapter__text p { margin-top: 1.1rem; color: var(--warm-gray); }

/* ── 4. Stappen ──────────────────────────────────────────────
   Een lijst met haarlijnen, geen drie kaartjes: het is een
   volgorde, geen keuzemenu. */

.steps { border-top: var(--hairline); }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: var(--hairline);
}
.step .num-xl { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.step p { margin-top: .5rem; color: var(--warm-gray); }

/* ── 5. Twee doelgroepen ─────────────────────────────────────
   Links een foto met een kaartje dat er half overheen ligt,
   rechts een rustig zandvlak. Twee verschillende manieren om
   hetzelfde te zeggen, zodat de keuze geen tweeling wordt. */

.aud-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
/* De bronfoto is 2:3; over de halve paginabreedte wordt dat een meter beeld.
   Bijsnijden in het kader, niet de kolom smaller maken. */
.aud-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.aud-card {
  position: absolute;
  left: clamp(1rem, 4%, 2.25rem);
  right: clamp(1rem, 4%, 2.25rem);
  bottom: clamp(1rem, 4%, 2.25rem);
  background: rgba(250, 247, 242, .95);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.6vw, 2rem);
}
/* Bewust NIET op height:100%: een zandvlak dat even hoog is als de foto laat
   de tekst in een leeg veld zweven. Het paneel is zo hoog als zijn inhoud en
   staat op ooghoogte naast het beeld. */
.aud-panel {
  background: var(--sand-pale);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  align-self: center;
}
.aud-card p, .aud-panel p { margin-top: .9rem; color: var(--warm-gray); }
.aud-card .link-arrow, .aud-panel .link-arrow { margin-top: 1.25rem; }

/* ── 6. Citaat ───────────────────────────────────────────────
   Uit het midden getrokken: de gouden zijlijn hoort ergens tegenaan
   te staan, niet in een leeg vlak te zweven. */

.quote-offset { grid-column: 5 / -1; }

/* ── 7. Prijzen ──────────────────────────────────────────────
   Twee kaarten, één toon. De bedragen staan in serif — het is de
   enige plek waar een getal iets belooft. */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.plan .card__inner { display: flex; flex-direction: column; }
.price { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-top: 1.25rem; }
.price-amount,
.ps-amount {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.price-meta {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--warm-gray);
}
.price-duo { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.25rem; }
.price-duo + .price-meta { display: block; margin-top: .7rem; }
.price-duo .price { margin-top: 0; display: block; }
.price-duo .price-name {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .4rem;
}
.plan-list { margin-top: clamp(1.5rem, 3vw, 2rem); border-top: var(--hairline); }
.plan-list li {
  max-width: none;
  padding-block: .75rem;
  border-bottom: var(--hairline);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--warm-gray);
}
.plan-year { margin-top: 1.1rem; font-size: .85rem; color: var(--accent); }
.plan .btn-row { margin-top: auto; }
.plans-note { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; margin-inline: auto; }

/* ── 7b. Actieprijzen (pricing.js) ──────────────────────────
   pricing.js zet deze klassen alleen neer zolang er een lopende
   actie is; zonder actie bestaan ze niet en verandert er niets.
   .price-was/.ps-was zitten IN .price-amount/.ps-amount, dus ze
   erven de grote serif-cijferstijl — hier alleen dempen en
   verkleinen zodat de nieuwe prijs de blikvanger blijft.
   .deal-note landt bewust NOOIT als kind van .price-duo (die is
   display:flex voor de Basic/Pro-kolommen) maar als sibling erna,
   dus de tweekolomslayout blijft intact en de melding wordt een
   eigen, volle-breedte regel eronder. */
.price-was,
.ps-was {
  color: var(--warm-gray);
  font-weight: 300;
  font-size: .55em;
  margin-right: .3em;
}
.deal-note {
  margin-top: .6rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--goud-text);
  letter-spacing: .01em;
}
.price-duo + .deal-note { margin-top: .9rem; }
.deal-note + .price-meta { margin-top: .5rem; }

/* ── 8. Vragen ───────────────────────────────────────────────
   Native <details>. Het plusteken is getekend met twee lijnen, niet
   met een letterteken: het moet meedraaien, niet meelezen. */

.faq { border-top: var(--hairline); }
.faq details { border-bottom: var(--hairline); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq-sign { position: relative; flex: none; width: 20px; height: 20px; }
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--sand);
}
.faq-sign::after { transform: rotate(90deg); transition: transform .5s var(--ease); }
.faq details[open] .faq-sign::after { transform: rotate(0deg); }
.faq details p { padding-bottom: clamp(1.1rem, 2vw, 1.6rem); color: var(--warm-gray); max-width: 70ch; }

/* ── 9. Slot ─────────────────────────────────────────────────
   Foto over de volle breedte met een donkere sluier erover. De
   dekking van .82 is geijkt op AA-contrast tegen warm wit; verlaag
   hem niet zonder opnieuw te meten. */

.cta-final { position: relative; isolation: isolate; overflow: hidden; }
.cta-final__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(45, 41, 38, .82);
}
.cta-final .h-serif, .cta-final .lede, .cta-final .hero-note { color: var(--warm-white); }
/* .center centreert het blok zelf, niet zijn kinderen: een <p> met een
   max-width blijft anders links staan met gecentreerde tekst erin. */
.cta-final .lede,
.cta-final .hero-note { margin-inline: auto; }
.cta-final .hero-note { max-width: none; }
.cta-final .btn--primary { background: var(--warm-white); color: var(--ink); }
.cta-final .btn--primary:hover { background: var(--sand-pale); color: var(--ink); }
.cta-final .btn-row { justify-content: center; }
/* De voettekst houdt normaal afstand van de sectie ervoor; direct onder een
   volle-breedte beeldsectie zou die strook cream een fout lijken. De
   beeldsectie is het laatste kind van <main>, dus de voettekst is er geen
   buur van — vandaar :has(). Zonder ondersteuning blijft simpelweg de
   normale afstand staan. */
main:has(> .cta-final:last-child) + .site-footer { margin-top: 0; }

/* ── Homepage, smallere schermen ─────────────────────────── */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
  .hero-stack { padding-bottom: 0; }
  .hero-photo { width: 100%; }
  .hero-shot { position: static; width: 86%; margin: -14% 0 0 auto; }
  .chapter { grid-template-columns: 1fr; gap: 2rem; }
  .chapter--flip .chapter__text,
  .chapter--flip .chapter__figure { grid-column: 1; grid-row: auto; }
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .quote-offset { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* Het kaartje over de foto wordt op een telefoon een kaartje
     ónder de foto: overlappend zou het de helft van het beeld
     opeten en de tekst laten uitlopen. */
  .aud-photo { overflow: visible; }
  .aud-photo img { border-radius: var(--radius-lg); }
  /* position:relative + z-index, niet static: een <img> is atomaire
     inline-inhoud en wordt gétekend bóven de achtergrond van een gewoon
     blok. Zonder eigen laag zakt de kaartachtergrond onder de foto en
     blijft alleen de tekst zichtbaar. */
  .aud-card {
    position: relative;
    inset: auto;
    z-index: 1;
    margin: -2.5rem 1rem 0;
    box-shadow: var(--shadow-soft);
  }
}

/* ============================================================
   SUBPAGES — /for-couples en /for-wedding-planners.
   Twee pagina's die dezelfde taal spreken als de homepage maar
   een eigen compositie krijgen: een halfhoge openingsspread in
   plaats van een hero met twee lagen papier, en daarna telkens
   een ánder middel (feitenstrook, inhoudsopgave, volle plaat,
   grootboek) zodat geen twee secties na elkaar hetzelfde doen.
   Niets hieronder wijzigt een component uit de blokken erboven.
   ============================================================ */

/* ── Halfhoge openingsspread ─────────────────────────────────
   De tekst blijft netjes in .wrap staan; de foto ligt eronder als
   absoluut vlak dat tot de vensterrand doorloopt. Bewust géén
   100vw-rekenwerk: dat telt de schrollbalk mee en schuift de kolom
   dan een paar pixels uit het stramien van de rest van de pagina.
   Onder 961 px valt alles terug op de normale volgorde: eerst de
   tekst, dan de foto over de volle breedte. */

.sub-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.sub-hero__copy { padding-block: clamp(2.5rem, 6vw, 4rem); }
/* De opening staat in een smallere kolom dan de homepage-hero: dit is
   een vervolgpagina, geen tweede voordeur. */
.sub-hero .display { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
.sub-hero .lede { margin-top: clamp(1rem, 2vw, 1.5rem); }
.sub-hero__photo { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.sub-hero__photo img { width: 100%; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--light-gray);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.crumbs a {
  color: var(--warm-gray);
  border-bottom: 1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--goud); }

/* ── Feitenstrook ────────────────────────────────────────────
   Drie afspraken onder een gouden lijn: een definitielijst, want
   dat is precies wat het is — term en betekenis, geen kaartjes. */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  border-top: 1px solid var(--goud);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.facts dt {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--accent);
}
.facts dd {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
  margin-top: .6rem;
}
.facts dd + dd {
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.65;
  color: var(--warm-gray);
  margin-top: .7rem;
  max-width: 34ch;
}

/* ── Inhoudsopgave ───────────────────────────────────────────
   Zes onderdelen als de inhoudspagina van een blad: naam links,
   toelichting rechts, haarlijn ertussen. Geen nummers — dit is een
   opsomming, geen volgorde. */

.idx { border-top: var(--hairline); }
.idx li {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(.75rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: var(--hairline);
}
.idx h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
}
.idx p { margin: 0; color: var(--warm-gray); font-size: .95rem; }

/* ── Volle plaat ─────────────────────────────────────────────
   Eén schermafbeelding over de volle kolom met het bijschrift uit
   het midden getrokken, zoals een plaat in drukwerk. */

.offset-right { grid-column: 6 / -1; }
.plate { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ── Eén prijs ───────────────────────────────────────────────
   Het bedrag in serif en op formaat: op deze pagina is het de
   belofte, niet een regel in een tabel. */

/* De prijsregel is hier géén rij maar een blok: naast een cijfer van vijf
   rem gaat de toelichting anders op dezelfde grondlijn staan en leest het
   als een prijskaartje in plaats van een belofte. */
.price-solo .price {
  display: block;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.price-xl { font-size: clamp(3.25rem, 7vw, 5rem); }
.price-solo .price-meta { display: block; margin-top: .6rem; }
.plan-list--duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

/* ── Grootboek ───────────────────────────────────────────────
   Uren en facturen als een lijst met haarlijnen: het onderdeel dat
   op papier hoort, ziet er ook uit als papier. */

.ledger { border-top: 1px solid var(--goud); }
.ledger li {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(.5rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(.9rem, 1.8vw, 1.25rem);
  border-bottom: var(--hairline);
}
.ledger .led-term {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink);
}
.ledger p { margin: 0; font-size: .92rem; color: var(--warm-gray); }

/* ── Verdeling 5/7 ───────────────────────────────────────────
   .split staat vast op 7 tegen 5; deze variant draait de breedtes
   om zodat de tekst links smal blijft en het beeld rechts ruim. */

.split--narrow-first { grid-template-columns: 5fr 7fr; }

.crosslink { margin-top: clamp(2rem, 4vw, 3rem); }

/* ── Subpagina's, brede schermen ─────────────────────────────
   Pas vanaf 961 px krijgt de foto zijn eigen vlak naast de tekst;
   daaronder staat hij gewoon onder de kolom. */

@media (min-width: 961px) {
  .sub-hero__copy {
    max-width: 27rem;
    padding-block: clamp(3rem, 7vw, 5rem);
  }
  .sub-hero--flip .sub-hero__copy { margin-left: auto; }
  .sub-hero__photo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 56%;
    margin-top: 0;
  }
  .sub-hero--flip .sub-hero__photo { left: 0; right: 56%; }
  .sub-hero__photo img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
  .sub-hero--flip .sub-hero__photo img { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}

@media (min-width: 1240px) {
  .sub-hero__copy { max-width: 32rem; }
  .sub-hero__photo { left: 52%; }
  .sub-hero--flip .sub-hero__photo { left: 0; right: 52%; }
}

@media (max-width: 780px) {
  .facts { grid-template-columns: 1fr; gap: 1.75rem; }
  .offset-right { grid-column: 1 / -1; }
  .split--narrow-first { grid-template-columns: 1fr; }
  .plan-list--duo { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .idx li,
  .ledger li { grid-template-columns: 1fr; gap: .4rem; }
}

/* ============================================================
   LANDING PAGES — /wedding-website en /online-guestbook.
   Twee zoekpagina's die op dezelfde componenten draaien als de
   rest van de site. Alleen de middelen die zíj als enige gebruiken
   staan hier; `.steps`, `.statement`, `.idx`, `.facts`, `.card` en
   `.plate` komen bewust uit de blokken hierboven — het zijn
   componenten, geen homepage- of doelgroepdecoratie, en een tweede
   kopie zou onherroepelijk uiteenlopen. Niets hieronder wijzigt een
   bestaande regel.
   ============================================================ */

/* ── Masthead ────────────────────────────────────────────────
   De opening van een zoekpagina is bewust géén `.sub-hero`: die
   halfhoge fotospread hoort bij de doelgroeppagina's, en wie via
   Google binnenkomt wil eerst het onderwerp zien. Hier dus de kop in
   de brede kolom, de belofte ernaast als colofon, en het bewijs
   eronder als plaat over de volle kolombreedte.
   De kop staat in een kolom van zeven, niet over de volle breedte:
   op de volle `--step-display` liep hij naar vijf regels. */

.lp-head .display { font-size: clamp(2.4rem, 4.8vw, 4.1rem); }
.lp-head .lede { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* Colofon naast de kop: haarlijnen onder een gouden regel, geen
   kaartje — het is een opsomming van afspraken, geen aanbieding. */
.spec {
  border-top: 1px solid var(--goud);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.spec li {
  max-width: none;
  padding-block: .7rem;
  border-bottom: var(--hairline);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--warm-gray);
}

/* `.plate` zet zijn ruimte ónder zich (plaat vóór de tekst); deze
   variant is voor een plaat die ná de tekst komt. */
.plate-after { margin-top: clamp(2rem, 4.5vw, 3.5rem); }

/* De foto in de smalle kolom naast een inhoudsopgave. */
.idx-photo { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Kolommen die in dezelfde sectie ná een tekstblok komen: de twee
   uitwerkingen onder een statement, of de drie kaarten onder een
   intro. Alleen ruimte en typografie — de kolomindeling zelf komt
   van `.ed-grid`. */
.lp-cols { margin-top: clamp(2.5rem, 5vw, 4rem); }
.lp-cols h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
}
.lp-cols p { margin-top: .8rem; color: var(--warm-gray); }

/* Eén smalle, gecentreerde kolom midden op de pagina (het tarief op
   /online-guestbook). `.center` centreert alleen de tekst; zonder een
   eigen breedte zou een <p> met zijn 62ch-maat links blijven staan
   met gecentreerde tekst erin. */
.lp-mid {
  max-width: 42rem;
  margin-inline: auto;
}
.lp-mid p { max-width: none; }
.lp-mid .btn-row { justify-content: center; }

/* ── Een pagina uit het gastenboek ───────────────────────────
   Het eigen middel van /online-guestbook. Geen foto van een boek
   maar het boek zelf, in tekst: drie berichten zoals gasten ze
   achterlaten, met de spraakopname als golfvorm. Dat is precies wat
   deze pagina verkoopt en wat een foto niet kan laten zien.
   De golfvorm is een inline SVG op ware grootte (nooit uitgerekt),
   met de duur die er als laatste tegenaan schuift. */

.gbook {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(.85rem, 1.6vw, 1.15rem);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: clamp(.6rem, 1.2vw, .9rem);
}
.gb-entry {
  background: var(--warm-white);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: clamp(.9rem, 1.8vw, 1.25rem);
}
.gb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.gb-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
}
.gb-time {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light-gray);
  white-space: nowrap;
}
.gb-entry p {
  max-width: none;
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--warm-gray);
}
.gb-voice {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .8rem;
  padding: .4rem .9rem .4rem .4rem;
  background: var(--cream);
  border-radius: 999px;
}
.gb-play {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-play svg { width: 9px; height: 9px; margin-left: 1px; fill: var(--warm-white); }
.gb-wave {
  flex: 1;
  min-width: 0;
  height: 20px;
  overflow: hidden;
  color: var(--sand);
}
.gb-wave svg { flex: none; fill: currentColor; }
.gb-dur { flex: none; font-size: .7rem; letter-spacing: .04em; color: var(--warm-gray); }
.gb-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin-top: .8rem;
}
.gb-photos figure { min-width: 0; }
.gb-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.gb-photos figcaption {
  margin-top: .4rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--warm-gray);
}
.gbook-note {
  margin-top: .9rem;
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--light-gray);
}

/* ── Zoekpagina's, smallere schermen ─────────────────────────
   De staande foto naast de inhoudsopgave wordt op een telefoon een
   liggende: over de volle breedte zou 4:5 een halve schermhoogte
   opeten voordat de lijst begint. */

@media (max-width: 780px) {
  .idx-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
  .lp-cols { margin-top: 2rem; }
}

/* ============================================================
   ABOUT PAGE — /about.
   Reuses .sub-hero, .ed-grid, .pullquote and .lp-mid wholesale;
   the three rules below only add the spacing and small type
   touches that page needed and nothing else in the system had.
   ============================================================ */

/* Two-column founder bios sit under the intro block in the same
   section; every other stacked pair on the site is either its own
   <section> (which gets --section-gap for free) or a `.chapters`
   list, so this is the one place that needed its own top margin. */
.founders-grid { margin-top: clamp(3rem, 6vw, 5rem); }

/* Postal address: `<address>` is italic by default in most UAs,
   which reads as a typo next to the roman lede type around it. */
.about-address { font-style: normal; }

/* The signed closing line, styled like the footer's `.foot-tag`
   (serif italic) so the "personal note" register is consistent
   with the one other place the site already uses it. */
.about-signoff {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
}

/* ============================================================
   CONTACT PAGE — /contact.
   No `.sub-hero` here: a contact page is a short, single errand,
   not a second front door, so the opening is a centred `.lp-mid`
   block (same device the pricing pages use) instead of a photo
   spread. The form below is the one place on the site that needed
   input styling, so the field chrome and the status-message colours
   are defined here rather than added to the shared token block.
   ============================================================ */

:root {
  --danger: #8B2F2F;  /* AA on --warm-white and --surface (~8:1) */
  --success: #3F6B4A; /* AA on --warm-white and --surface (~5.9:1) */
}

/* Scoped the way `.sub-hero .display` and `.lp-head .display` already
   scope the same element: full `--step-display` reads like a second
   homepage hero, which a one-errand page shouldn't claim. */
.contact-head .display { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }

.contact-form {
  max-width: 640px;
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: left;
}
.cf-field input,
.cf-field textarea {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--sand-pale);
  border-radius: var(--radius-sm);
  padding: .85rem 1.1rem;
  width: 100%;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.cf-field textarea { resize: vertical; min-height: 160px; }
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--light-gray); }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 168, 130, .22);
}
.cf-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.cf-status {
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--warm-gray);
}
.cf-status.is-error { color: var(--danger); font-weight: 600; }
.cf-status.is-success { color: var(--success); font-weight: 600; }

@media (max-width: 560px) {
  .cf-row { grid-template-columns: 1fr; }
  .cf-actions .btn { width: 100%; justify-content: center; }
}

/* ── LEGAL — privacy policy & terms pages ───────────────────
   Quiet document layout: narrow reading column, serif headings,
   numbered articles. No photography, no split layout — this is
   text that people come to read, not to be sold on. */

.legal-hero { padding-top: clamp(2.75rem, 6vw, 4.5rem); }

.legal-meta {
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--light-gray);
  margin-top: 1rem;
}

.legal-note {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--warm-gray);
  max-width: 42rem;
  margin-top: 1.5rem;
  padding: .85rem 1.1rem;
  background: var(--cream);
  border-left: 2px solid var(--goud);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal-body {
  max-width: 42rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
.legal-body > * + * { margin-top: 1.15rem; }

.legal-body h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.25;
  color: var(--ink);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.legal-body h2:first-of-type { margin-top: 0; }

.legal-body p,
.legal-body li,
.legal-body address {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--warm-gray);
  max-width: none;
}
.legal-body address { font-style: normal; }
.legal-body strong { font-weight: 600; color: var(--ink); }
.legal-body a { color: var(--blush-text); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }

.legal-body ul,
.legal-body ol {
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body ol ul { margin-top: .5rem; }
.legal-body li::marker { color: var(--blush-text); font-size: .9em; }

.legal-table-scroll { overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; margin-block: .6rem 1.1rem; }
.legal-table th,
.legal-table td {
  text-align: left;
  padding: .55rem .6rem;
  vertical-align: top;
  border-bottom: 1px solid var(--sand-pale);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--warm-gray);
}
.legal-table th { font-weight: 600; color: var(--ink); }

.legal-outro {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--sand-pale);
}