/* Abeel — site styles
 * Light theme = the underside of the leaf (paper, silver).
 * Dark theme  = the upper side (deep green). Same tokens, other side.
 */

/* type over the film: Noto Serif Display, pinned to its condensed width (tall, classical) */
@font-face {
  font-family: "Abeel Film";
  src: url("../fonts/NotoSerifDisplay-Condensed-VF.woff2") format("woff2");
  font-weight: 360 560;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Castoro";
  src: url("../fonts/Castoro-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Castoro";
  src: url("../fonts/Castoro-Italic-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --papier: #F4F5F1;
  --wit: #FFFFFF;
  --inkt: #161A17;
  --abeelgroen: #3B4F3F;
  --diepgroen: #26352A;
  --zilver: #DDE1DA;
  --vilt: #939B92;
  --schors: #5D655E;

  /* roles */
  --bg: var(--papier);
  --bg-tint: var(--zilver);
  --fg: var(--inkt);
  --fg-soft: var(--schors);
  --accent: var(--abeelgroen);
  --accent-strong: var(--diepgroen);
  --afterimage: var(--vilt);
  --rule: #C9CEC6;
  --field: var(--abeelgroen);
  --on-field: var(--papier);
  --on-field-soft: #C3CCC2;
  --focus: #3B4F3F;

  /* Two families.
     display: Noto Serif Display pinned to its condensed width: tall, classical letters; white with an
              ink hairline over the film, ink on paper for headings.
     text:    Castoro (Tiro Typeworks), a synthesis of Dutch types of the 16th-18th centuries; also the
              wordmark, whose second e is Castoro Italic in the Vilt tint. */
  --display: "Abeel Film", "Didot", "Bodoni 72", "Iowan Old Style", Georgia, serif;
  --film: var(--display);
  /* white letters, a thin Inkt edge drawn behind the fill, a soft shadow: legible on sky and on leaves.
     --film-white: the fill of every letter over the film (founders, 28 Sept: 90% white, so the film
       breathes through the type). The edge stays solid Inkt.
     --film-edge: the edge grows with the type instead of being 2.6px on every size: .6px + .02em is the
       2.6px the big beats had at 100px, 1.4px on the 42px subtitle, 1.3px on a phone's beat. The .6px
       keeps small type a little more edge than a strict ratio would (a hairline on bright sky needs it);
       the clamp keeps at least 1px (nav, credit) and never more than the 2.6px the beats had. Custom
       properties resolve where they are used, so the em is always the element's own size. Half of the
       width shows: the stroke is painted behind the fill. */
  --film-white: rgba(255, 255, 255, .9);
  --film-edge: clamp(1px, .6px + .02em, 2.6px);
  --film-shadow: 0 2px 18px rgba(10, 16, 12, .30);
  --serif: "Castoro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --wrap: 78rem;
  --step--1: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --step-0: clamp(1.13rem, 1.05rem + 0.3vw, 1.28rem);   /* body: large on purpose, readers are 50-75 */
  --step-1: clamp(1.45rem, 1.3rem + 0.7vw, 1.8rem);
  --step-2: clamp(1.9rem, 1.55rem + 1.6vw, 2.9rem);
  --step-3: clamp(2.8rem, 1.9rem + 3.8vw, 5.4rem);
  --step-4: clamp(3.6rem, 2rem + 7vw, 8.6rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141C17;
    --bg-tint: #1C2620;
    --fg: #E7EBE4;
    --fg-soft: #A4ADA4;
    --accent: #B9C8B6;
    --accent-strong: #DDE6DA;
    --afterimage: #5E6B61;
    --rule: #2E3A32;
    --field: #22302A;
    --on-field: #EEF1EA;
    --on-field-soft: #9FAE9F;
    --focus: #DDE1DA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141C17;
  --bg-tint: #1C2620;
  --fg: #E7EBE4;
  --fg-soft: #A4ADA4;
  --accent: #B9C8B6;
  --accent-strong: #DDE6DA;
  --afterimage: #5E6B61;
  --rule: #2E3A32;
  --field: #22302A;
  --on-field: #EEF1EA;
  --on-field-soft: #9FAE9F;
  --focus: #DDE1DA;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(4.25rem + env(safe-area-inset-top, 0px) + 1.5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color .3s var(--ease), color .3s var(--ease); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--zilver); color: var(--inkt); }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 380; line-height: 1.02; letter-spacing: 0; text-wrap: balance; }
/* below 350px the size follows the width (12.8vw is 2.8rem, the floor of --step-3, at 350px), so the longest
   word of a section heading ("uitvaartverzorgers") fits a 320px phone instead of pushing the page sideways */
h2 { font-size: min(var(--step-3), 12.8vw); }
h3 { font-family: var(--serif); font-size: var(--step-1); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
em, i { font-style: italic; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--bg); padding: .5rem 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* label: the book-typography way of doing an eyebrow: Castoro's true small caps, tracked */
.label {
  font-family: var(--serif);
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  color: var(--fg-soft);
  font-variant-numeric: lining-nums;
}

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

/* ---------- wordmark ---------- */
.wordmark { display: inline-block; line-height: 0; color: var(--fg); }
.wordmark svg { height: 100%; width: auto; overflow: visible; }
.wordmark .glyph { fill: currentColor; }
.wordmark .glyph-after { fill: var(--afterimage); transition: fill .6s var(--ease); }
.wordmark .ghost { fill: var(--afterimage); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.25rem; }
.site-header .home { height: 1.55rem; opacity: 0; transition: opacity .5s var(--ease); }
.site-header .home:focus-visible, html.no-js .site-header .home { opacity: 1; }
/* Header type is set ONCE, here, for both states. Over the film (transparent header) and on paper
   (.is-solid, .is-page) the links, the Menu button and NL · EN sit on exactly the same pixels, so
   nothing jumps when the header turns solid. The film-state rules (".site-header:not(.is-solid)...")
   may change paint only: color, -webkit-text-stroke, text-shadow, opacity. Never font-size, weight,
   letter-spacing, line-height or padding there. tools/check_layout.py (build_site.py --check) fails
   if anything in the header moves by more than half a pixel between the two states. */
.site-header { --nav-size: 1.02rem; }
.site-header nav a, .site-header .menu-toggle, .site-header .lang { font-size: var(--nav-size); }
/* over the film the links sit on dark foliage: light type with a thin edge and a soft shadow (paint only) */
.site-header:not(.is-solid):not(.is-open):not(.is-page) nav a,
.site-header:not(.is-solid):not(.is-open):not(.is-page) .menu-toggle {
  color: var(--film-white); -webkit-text-stroke: var(--film-edge) var(--inkt); paint-order: stroke fill;
  text-shadow: 0 1px 10px rgba(10,16,12,.35);
}
.site-header.is-solid { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 1px 0 var(--rule); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-header.is-solid .home, .site-header.is-page .home { opacity: 1; }
.site-header nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; color: var(--fg); padding-block: .5rem; }
.site-header nav a:hover { text-decoration: underline; }
.site-header .menu-toggle { display: none; }
@media (max-width: 820px) {
  .site-header nav ul { display: none; }
  .site-header .menu-toggle {
    display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .6rem 0; font: inherit; font-size: var(--nav-size); color: var(--fg); cursor: pointer;
  }
  .site-header.is-open { background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
  .site-header.is-open .home { opacity: 1; }
  .site-header.is-open nav ul {
    display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); padding: .5rem var(--gutter) 1.5rem; box-shadow: 0 1px 0 var(--rule);
  }
  .site-header.is-open nav a { display: block; padding-block: .75rem; font-size: 1.3rem; }
}

/* ---------- hero ---------- */
.hero { position: relative; height: 340vh; background: #F0F0EE; }
.hero.is-still, html.no-js .hero { height: auto; }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero.is-still .hero-stage, html.no-js .hero-stage { position: relative; height: auto; min-height: max(36rem, min(100svh, 62rem)); }
.hero.is-still .hero-copy, html.no-js .hero-copy { position: relative; inset: auto; min-height: inherit; }
.hero.is-still .hero-stage canvas, html.no-js .hero-stage canvas { display: none; }
/* the canvas stays invisible until hero.js has painted a real frame: no black flash */
.hero:not(.is-live) .hero-stage canvas { visibility: hidden; }
.hero-stage canvas, .hero-stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stage .poster { object-fit: cover; object-position: 62% 50%; }
/* opacity, not visibility: the poster stays in the accessibility tree, so its alt text ("Met AI gemaakt beeld,
   geen opname: ...") is still read while the film plays (AI Act Art. 50(4) disclosure; the canvas is aria-hidden) */
.hero.is-live .poster { opacity: 0; }
.hero-veil { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }
.hero-copy {
  position: absolute; inset: 0; display: grid; align-content: center; grid-template-columns: minmax(0, 1fr);
  padding: calc(4.25rem + env(safe-area-inset-top, 0px)) var(--gutter) 3rem;
  max-width: var(--wrap); margin-inline: auto; pointer-events: none;
  color: var(--film-white);
}
.hero-copy > * { grid-area: 1 / 1; max-width: min(46rem, 58vw); pointer-events: auto; }
.hero-copy [data-beat] { will-change: opacity, transform; }
/* until hero.js takes over, only the first beat shows (no stacked text at load) */
html:not(.no-js) .hero:not(.is-still) [data-beat]:not(:first-child) { opacity: 0; }
/* The hero mark ("nabeeld" / "abeel"), white with the film edge. build_site.py draws it 1.3x taller than
   the logo (STRETCH["reveal"]; the logo files and the header and footer marks keep their proportions), so
   its letters take the tall proportions of the condensed display face of the beats. --mark-h is the height
   the unstretched mark had; the box is sqrt(1.3) = 1.14x that, so the word keeps the area, the visual
   weight, it had: letters 14% taller, the word 12% narrower. font-size is the em of the drawn letters
   (the unstretched viewBox is 828.1 units high, the em 1000), so the em-based --film-edge is in proportion
   here too; non-scaling-stroke keeps the edge even although the glyphs are stretched.
   The edge shows OUTSIDE the letters only. The letters are filled opaque white over their ink stroke
   (paint-order: stroke fill), which hides the stroke's inner half and the overlapping contours inside the
   Castoro glyphs; build_site.py (outer_edge) then masks the mark to 90% inside the letters (the alpha of
   --film-white), so the film shows through them as through the other film text, while the stroke's outer
   half, the edge seen from outside (half of --film-edge), stays at full ink. The word (a b e e l) is one
   masked group (.word); the n and d each have their own (.fade), so their fading never touches the word. */
.hero .hero-mark {
  --mark-h: clamp(4.6rem, 3rem + 8vw, 10.5rem);
  height: calc(var(--mark-h) * 1.1402); font-size: calc(var(--mark-h) * 1.2076);
  color: var(--film-white);
}
.hero .hero-mark .word use, .hero .hero-mark .fade use {
  stroke: var(--inkt); stroke-width: var(--film-edge); stroke-linejoin: round; paint-order: stroke fill;
}
.hero .hero-mark svg { filter: drop-shadow(0 2px 14px rgba(10, 16, 12, .28)); fill: #C9D0C7; }
.hero .hero-mark .glyph, .hero .hero-mark .ghost { fill: #fff; }
/* The name reveal, driven by the scroll like the beats: hero.js sets --fade and --reveal from 0 to 1 over
   the first 12% of the hero. At rest the whole word "nabeeld" stands in white; as the visitor starts to
   scroll, the n and d fade like an afterimage (--fade, p 0 to 0.06), the italic e takes its tint and "abeel"
   settles onto the text margin (--reveal, p 0.015 to 0.12). The fade is done before the slide has carried
   the n to the edge of the screen: on a phone the text margin is only 20px, and a fading n must never
   slide off the screen. --settle is the n's share of the width, measured by hero.js; the value here is the
   same geometry for when the script does not run. Scrolling back up brings "nabeeld" back. Without the
   script, with reduced motion and in the still hero it is "abeel" from the start. The svg's fill above is
   the fallback for the italic e where color-mix() is not understood. */
.hero .hero-mark { --fade: 0; --reveal: 0; --settle: -17.522%; }
/* the n and d fade as a whole, stroke and fill together, by the opacity of their own groups (a fading
   letter inside the word's masked group would soften the edge of every letter in it, in Chrome) */
.hero .hero-mark .fade { opacity: calc(1 - var(--fade)); }
/* the italic e: from white to its opaque tint; its cut in the mask (90% inside) fades out with it */
.hero .hero-mark .glyph-after { transition: none; fill: color-mix(in srgb, #C9D0C7 calc(var(--reveal) * 100%), #fff); }
.hero .hero-mark .cut-after { fill-opacity: calc(.1 - .1 * var(--reveal)); }
.hero .hero-mark svg { transform: translateX(calc(var(--settle) * var(--reveal))); }
html.no-js .hero .hero-mark, .hero.is-still .hero-mark { --fade: 1; --reveal: 1; }
@media (prefers-reduced-motion: reduce) { .hero .hero-mark { --fade: 1; --reveal: 1; } }
/* a beat that holds keyboard focus is always visible */
.hero-copy [data-beat]:focus-within { opacity: 1 !important; transform: none !important; }
.hero .hero-sub, .hero .beat {
  font-family: var(--film); font-weight: 440; color: var(--film-white);
  -webkit-text-stroke: var(--film-edge) var(--inkt); paint-order: stroke fill;
  text-shadow: var(--film-shadow); letter-spacing: .008em;
}
/* the subtitle is under half the size of the beats: a touch heavier (480), so the white still reads inside its thinner edge */
.hero .hero-sub { margin-top: .9rem; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.7rem); line-height: 1; font-weight: 480; }
/* The subtitle arrives with the name: invisible while the word still reads "nabeeld", it fades in exactly
   as the n and d fade out (hero.js gives it the same --fade, p 0 to 0.06, same easing), rising 3px, and it
   is there the moment the word reads "abeel"; scrolling back takes it away again. Opacity and transform
   only: its box stays where it is, so nothing around it moves. The text stays in the DOM (the h1 carries
   the name). Without the script, with reduced motion and in the still hero it is simply there. */
.hero .hero-sub { --fade: 0; opacity: var(--fade); transform: translateY(calc((1 - var(--fade)) * 3px)); }
html.no-js .hero .hero-sub, .hero.is-still .hero-sub { --fade: 1; }
@media (prefers-reduced-motion: reduce) { .hero .hero-sub { --fade: 1; } }
.hero .beat { font-size: clamp(3.1rem, 1.6rem + 5.2vw, 7.4rem); line-height: .96; text-wrap: balance; }
.hero .beat em { font-style: normal; }
.hero .cta-row { margin-top: 2rem; display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.hero .button { background: var(--papier); color: var(--inkt); border-color: var(--inkt); box-shadow: 0 6px 22px -8px rgba(10,16,12,.45); }
.hero .button:hover { background: var(--inkt); color: var(--papier); }
/* The scroll hint: a small point of light with a soft white aura that glides down a short track, the way
   the page goes (like the line the hint used to draw downward). Each pass (2.6s): the dot lights up at the
   top of the track (fading in, its aura opening from .85 to full size), glides --hint-track (20px) down
   with an ease-in-out, fades out as it nears the bottom and rests a moment (0.65s) before the next pass.
   A very faint trail, a soft streak of light fading upward, follows it down and fades with it. The whole
   hint fades as the visitor starts to scroll (--p from hero.js). A hint, not a control: aria-hidden,
   takes no clicks.
   The box is the track: 9px wide, the dot plus --hint-track tall, with its bottom where each pass ends
   (the old resting place of the dot), so the clearance rules below hold over the whole travel.
   Reduced motion: no travel (--hint-track 0), no trail, a static dot where the pass ends. */
.hero { --hint-track: 20px; }
.hero .scroll-hint {
  position: absolute; left: 50%; bottom: calc(1.9rem + env(safe-area-inset-bottom, 0px));
  width: 9px; height: calc(9px + var(--hint-track)); margin-left: -4.5px; pointer-events: none;
  opacity: calc(1 - var(--p, 0) * 12);
}
.hero .scroll-hint::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, .8), 0 0 12px 5px rgba(255, 255, 255, .4), 0 0 28px 10px rgba(255, 255, 255, .16);
  animation: hint-glide 2.6s cubic-bezier(.45, 0, .4, 1) infinite, hint-light 2.6s ease-in-out infinite;
}
/* the trail runs from the dot's first centre to its current one: scaled from the top on the dot's own curve */
.hero .scroll-hint::before {
  content: ""; position: absolute; left: 3.5px; top: 4.5px; width: 2px; height: var(--hint-track); border-radius: 1px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .4)); filter: blur(.6px);
  transform-origin: top; opacity: 0;
  animation: hint-trail 2.6s cubic-bezier(.45, 0, .4, 1) infinite, hint-trail-light 2.6s ease-in-out infinite;
}
@keyframes hint-glide { 0% { translate: 0 calc(-1 * var(--hint-track)); } 75%, 100% { translate: 0 0; } }
@keyframes hint-light {
  0% { opacity: 0; scale: .85; } 16%, 46% { opacity: 1; scale: 1; } 75%, 100% { opacity: 0; scale: .85; }
}
@keyframes hint-trail { 0% { transform: scaleY(0); } 75%, 100% { transform: scaleY(1); } }
@keyframes hint-trail-light { 0%, 8% { opacity: 0; } 34%, 46% { opacity: 1; } 70%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero { --hint-track: 0px; }
  .hero .scroll-hint::after { animation: none; }
  .hero .scroll-hint::before { animation: none; content: none; }
}
/* On a narrow phone the centred dot meets the credit (bottom right; the Dutch line is the longer one).
   Up to 520px the dot therefore rises until its glow clears the credit's line by 12px: the credit's
   bottom (1.2rem) + its line (.85rem x 1.55) + 12px + the glow (the widest shadow above reaches
   28px + 10px = 38px beyond the dot); the track rises above that, so the lowest point of each pass is
   where the rule is met. Wider, the credit is clear of the centre: the page is wide enough when it is
   at least 2 x (the credit's width + the gutter + 4.5px + 38px + 12px), 499px for the Dutch line
   "Gemaakt of bewerkt met AI" (175px); 520px leaves room for a slightly longer line. The still hero
   (no script, reduced motion) has its text at the bottom, and its last line, the button, sits right
   above the dot: it keeps the same 12px clear of the glow at the highest point of the track, so the
   padding is the track's top (the dot's bottom + 9px + --hint-track) + the glow (38px) + 12px. */
@media (max-width: 520px) {
  .hero .scroll-hint { bottom: calc(1.2rem + .85rem * 1.55 + 12px + 38px + env(safe-area-inset-bottom, 0px)); }
  .hero.is-still .hero-copy, html.no-js .hero-copy { padding-bottom: calc(1.2rem + .85rem * 1.55 + 12px + 38px + 9px + var(--hint-track) + 38px + 12px + env(safe-area-inset-bottom, 0px)); }
}
.hero.is-still .hero-copy > *, html.no-js .hero-copy > * { position: relative; }
.hero.is-still .hero-copy, html.no-js .hero-copy { align-content: end; gap: 1.2rem; }
.hero.is-still .hero-copy > *, html.no-js .hero-copy > * { grid-area: auto; opacity: 1 !important; transform: none !important; }
@media (max-width: 820px) {
  .hero { height: 300vh; }
  .hero-copy { align-content: start; padding-top: calc(6rem + env(safe-area-inset-top, 0px)); }
  .hero-copy > * { max-width: 100%; }
  .hero .beat { font-size: clamp(2.2rem, 9.4vw, 3.4rem); line-height: 1; }
  .hero .hero-sub { font-size: clamp(1.45rem, 6.2vw, 2rem); }
}

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 3rem;
  padding: .7rem 1.35rem; border-radius: 0; border: 1px solid var(--inkt);
  background: var(--inkt); color: var(--papier); font: inherit; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.button:hover { background: var(--abeelgroen); border-color: var(--abeelgroen); }
.button.ghost { background: transparent; color: var(--inkt); }
.button.ghost:hover { background: var(--inkt); color: var(--papier); }
.button .arrow { display: inline-block; transition: transform .35s var(--ease); }
.button:hover .arrow { transform: translateY(2px); }
.text-link { color: var(--accent); text-decoration: underline; }

/* ---------- sections ---------- */
.section { padding-block: clamp(5rem, 11vw, 10rem); }
.section + .section { padding-top: 0; }
.section.tint { background: var(--bg-tint); padding-block: clamp(5rem, 10vw, 9rem); }
.section.tint + .section { padding-top: clamp(5rem, 11vw, 10rem); }
.section.field { background: var(--field); color: var(--on-field); padding-block: clamp(5rem, 10vw, 9rem); --focus: var(--on-field); }
.section.field .label { color: var(--on-field-soft); }
.section.field + .section { padding-top: clamp(5rem, 11vw, 10rem); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: 2.5rem; }
.col-label { grid-column: 1 / span 3; padding-top: .65rem; }
.col-main { grid-column: 4 / span 8; }
.col-wide { grid-column: 4 / -1; }
.stack { display: grid; gap: 1.4rem; align-content: start; }
.lede { font-size: var(--step-1); line-height: 1.42; max-width: 36rem; }
@media (max-width: 820px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .col-label, .col-main, .col-wide { grid-column: 1; }
  .col-label { padding-top: 0; }
}

/* the film portrait: specifications in the manner of a film label */
.specs { margin: 1rem 0 0; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); border-top: 1px solid var(--rule); max-width: 40rem; }
.specs dt, .specs dd { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.specs dt { color: var(--fg-soft); font-size: var(--step--1); padding-right: 1rem; padding-top: 1rem; }
@media (max-width: 520px) { .specs { grid-template-columns: minmax(0, 1fr); } .specs dt { border-bottom: 0; padding-bottom: 0; } }

/* how it goes: a real sequence, so it is numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 2.4rem clamp(1.2rem, 2.5vw, 2.4rem); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: .55rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--fg); }
.steps li::before { content: counter(step); font-family: var(--display); font-size: var(--step-3); font-weight: 380; line-height: 1; font-variant-numeric: lining-nums; color: var(--fg); }
.steps h3 { font-family: var(--serif); font-size: 1.28rem; }
.steps p { color: var(--fg-soft); font-size: var(--step--1); line-height: 1.5; max-width: 26rem; }
.timing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem 2.5rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.timing p { font-size: var(--step--1); color: var(--fg-soft); }
.timing strong { color: var(--fg); font-weight: 500; }

/* little material: the quiet big line */
.big-line { font-family: var(--display); font-size: var(--step-4); font-weight: 380; line-height: .98; }
.big-line .after { color: #858D84; }   /* 3.1:1 on Papier; the logo keeps Vilt */
:root[data-theme="dark"] .big-line .after { color: var(--afterimage); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .big-line .after { color: var(--afterimage); } }

/* promises */
.promises { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); max-width: 46rem; }
.promises li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--rule); font-family: var(--display); font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.12; font-weight: 380; }
.promises li::before { content: ""; width: .95rem; height: .95rem; border-radius: 50%; background: var(--fg); box-shadow: .42rem 0 0 0 var(--afterimage); transform: translateY(-.1rem); }

/* funeral directors: the green field, and the card that turns over */
.director-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .director-grid { grid-template-columns: minmax(0, 1fr); } }
.field .lede { color: var(--on-field); }
.field p { color: var(--on-field); }
.field .soft { color: var(--on-field-soft); }
.card-flip { perspective: 1400px; width: min(100%, 26rem); aspect-ratio: 85 / 55; margin-top: 2.2rem; cursor: pointer; background: none; border: 0; padding: 0; display: block; }
.card-flip .card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s var(--ease); }
.card-flip.is-turned .card { transform: rotateY(180deg) rotateZ(-1deg); }
.card-flip:hover:not(.is-turned) .card { transform: rotateY(12deg); }
@media (prefers-reduced-motion: reduce) { .card-flip .card { transition: none; } }
.card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 14px 30px -12px rgba(0,0,0,.35); }
.card-face img { width: 100%; height: 100%; object-fit: cover; }
.card-back { transform: rotateY(180deg); }
.card-note { margin-top: .9rem; font-size: .9rem; color: var(--on-field-soft); }

/* forms */
.form { display: grid; gap: 1.1rem; max-width: 30rem; }
.form .field-row { display: grid; gap: .35rem; }
.form label { font-size: .95rem; }
.form input, .form textarea {
  width: 100%; font: inherit; font-size: 1.1rem; color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: .55rem 0 .5rem;
}
.form textarea { min-height: 7rem; resize: vertical; border: 1px solid currentColor; padding: .6rem .7rem; }
.form input:not([type=checkbox]):focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 2px 0 0 var(--accent); }
.check-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.field .form input:not([type=checkbox]):focus { border-color: var(--on-field); box-shadow: 0 2px 0 0 var(--on-field); }
.form .consent { font-size: .9rem; color: var(--fg-soft); }
.field .form .consent { color: var(--on-field-soft); }
.form .status { min-height: 1.5em; font-size: 1rem; }
.form .hp { display: none; }
.field .button { background: var(--papier); color: var(--inkt); border-color: var(--papier); }
.field .button:hover { background: var(--zilver); border-color: var(--zilver); }

/* about the name */
.name-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.name-grid figure { margin: 0; }
/* the plate is the original engraving (Reitter & Abel, plate 8), shown unaltered as a print on the page */
.name-grid img { width: 100%; height: auto; box-shadow: 0 1px 2px rgba(22, 26, 23, .07), 0 8px 24px -6px rgba(22, 26, 23, .12); }
@media (max-width: 820px) { .name-grid { grid-template-columns: minmax(0, 1fr); } .name-grid figure { max-width: 22rem; } }
.etym { font-style: italic; color: var(--fg-soft); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-lines { display: grid; gap: .3rem; font-size: var(--step-1); }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }

/* footer */
.site-footer { padding-block: 4rem 3rem; border-top: 1px solid var(--rule); font-size: .95rem; color: var(--fg-soft); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: end; }
.site-footer .wordmark { height: 2.1rem; color: var(--fg); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.site-footer .fine { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .4rem 2rem; font-size: .88rem; }

/* inner pages (Vertrouwen, Privacy) */
.page-head { padding-top: calc(4.25rem + env(safe-area-inset-top, 0px) + clamp(3rem, 8vw, 7rem)); padding-bottom: clamp(2rem, 5vw, 4rem); }
.page-head h1 { font-size: var(--step-4); }
.page-head .lede { margin-top: 1.6rem; }
.prose { display: grid; gap: 1.2rem; max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: 2.2rem; }
.prose h3 { margin-top: 1.2rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.faq { border-top: 1px solid var(--fg); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1.05rem 2.5rem 1.05rem 0; font-size: var(--step-1); line-height: 1.3; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .3rem; top: 1.55rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--afterimage); transition: background-color .3s var(--ease); }
.faq details[open] summary::after { background: var(--fg); }
.faq .answer { padding: 0 0 1.4rem; display: grid; gap: .9rem; }
.draft-note { border-left: 3px solid var(--accent); padding: .8rem 1rem; background: var(--bg-tint); font-size: .95rem; max-width: var(--measure); }

@media print {
  .site-header, .hero-stage canvas, .scroll-hint { display: none; }
  .hero { height: auto; }
}

/* ---------- homepage details (copy of 28 Sept) ---------- */
.after-steps { margin-top: 2.8rem; }
.narrow { max-width: var(--measure); }
.h-small { font-size: var(--step-2); }
.big-line + .narrow { margin-top: 1.4rem; }
.pilot { padding-top: .4rem; }
.pilot h3 { font-family: var(--display); font-size: var(--step-2); font-weight: 380; }
.check-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.check-row input { width: 1.2rem; height: 1.2rem; margin: .28rem 0 0; accent-color: var(--abeelgroen); }
.footer-brand .wordmark { height: 2.2rem; }
.footer-brand p { max-width: 26rem; }
#naam .card-flip { margin-top: 1.6rem; }
.field h2 { color: var(--on-field); }

/* full-width rows inside the 12-column grid */
#hoe-het-werkt .col-wide, #weinig .col-wide { grid-column: 1 / -1; }
#weinig .narrow { margin-left: calc((100% + clamp(1rem, 2.4vw, 2.5rem)) / 4); }
@media (max-width: 820px) { #weinig .narrow { margin-left: 0; } }
.big-line { max-width: none; }
.card-flip .card, .card-flip .card-face { display: block; }

/* labels for generated imagery (trust line 5 applies to our own site too) */
.hero-credit { position: absolute; right: var(--gutter); bottom: 1.2rem; margin: 0; font-size: .85rem; letter-spacing: .02em; }
.hero-credit a { color: var(--film-white); text-decoration: none; -webkit-text-stroke: var(--film-edge) var(--inkt); paint-order: stroke fill; text-shadow: 0 1px 8px rgba(10,16,12,.35); }
.hero-credit a:hover { text-decoration: underline; }
.credit { margin-top: .6rem; font-size: .88rem; color: var(--fg-soft); }
.site-footer .fine a { color: inherit; text-decoration: none; }
.site-footer .fine a:hover { text-decoration: underline; }

/* the trust section's heading keeps the look of a label */
h2.label { font-family: var(--serif); font-weight: 400; line-height: 1.55; font-size: 1rem; text-wrap: wrap; }
/* footer lockup: the mark over FILMPORTRETTEN, as on the card */
.footer-lockup { display: inline-grid; gap: .35rem; height: auto !important; line-height: 1; text-decoration: none; }
.footer-lockup svg { height: 2.2rem; width: auto; }
.wordmark-cat { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: .16em; font-size: .95rem; color: var(--fg-soft); }
/* no script, phone width: show the menu as a plain list instead of a dead button */
@media (max-width: 820px) {
  html.no-js .site-header .menu-toggle { display: none; }
  html.no-js .site-header nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
}
/* still hero (reduced motion / no JS): the three lines stack, so they are set smaller */
.hero.is-still .beat, html.no-js .hero .beat { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem); }

.phone-note { font-size: .95rem; color: var(--fg-soft); }
a.tel { white-space: nowrap; }
/* two numbers, each with the first name of who answers (29 Sept): the name in the soft tone, the number
 * is the link. In the contact block the numbers stand in one column. In the footer they are a second
 * line under the links, flush right beside the about text as the links were: from 900px (the two lines
 * fit beside it from about 875px); narrower, the block wraps under the about text and reads from the
 * left. A name never parts from its number. */
.contact-lines .phones { display: grid; grid-template-columns: max-content max-content; gap: .3rem .55em; margin: 0; }
.contact-lines .phones dt { color: var(--fg-soft); }
.contact-lines .phones dd { margin: 0; }
.footer-links { display: grid; gap: .4rem; }
.site-footer .tel-list li { white-space: nowrap; }
@media (min-width: 900px) { .footer-links { justify-items: end; } .site-footer .footer-links ul { justify-content: flex-end; } }

/* ---------- language switcher NL · EN (added 28 Sept) ----------
 * <p class="lang"> sits at the end of the header nav, outside the menu list, so on phones it stays
 * visible next to the Menu button instead of hiding with the list. The current language is a
 * <span aria-current="true"> (underlined like the current page in pages.css); the other is a plain
 * link to the twin page. No cookie, no storage, no redirect by browser language: the privacy
 * statement says the site stores nothing. site.js carries the section in view over to the twin page
 * (both languages share the section ids). */
.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.site-header .lang {
  margin: 0; max-width: none; display: inline-flex; align-items: baseline; gap: .1rem;
  line-height: 1.2; white-space: nowrap; color: var(--fg-soft); letter-spacing: .04em;
}
.site-header .lang a, .site-header .lang [aria-current] { padding: .55rem .3rem; }   /* a finger-sized target */
.site-header .lang a { color: var(--fg-soft); }
.site-header .lang a:hover { color: var(--fg); }
.site-header .lang [aria-current] {
  color: var(--fg); text-decoration: underline; text-decoration-color: var(--afterimage);
  text-decoration-thickness: 2px; text-underline-offset: .32em;
}
.site-header .lang:last-child { margin-right: -.3rem; }   /* the padding must not push the row off the text margin */
/* the open phone menu enlarges "nav a": the switcher keeps its own size */
.site-header.is-open .lang a { display: inline; font-size: inherit; padding: .55rem .3rem; }
/* over the film: the same rule as the nav links (white, thin ink edge, soft shadow). Paint only: the
   size comes from --nav-size in the header block, the same in both states. */
.site-header:not(.is-solid):not(.is-open):not(.is-page) .lang {
  color: var(--film-white); -webkit-text-stroke: var(--film-edge) var(--inkt); paint-order: stroke fill;
  text-shadow: 0 1px 10px rgba(10,16,12,.35);
}
.site-header:not(.is-solid):not(.is-open):not(.is-page) .lang a,
.site-header:not(.is-solid):not(.is-open):not(.is-page) .lang [aria-current] { color: var(--film-white); text-decoration-color: currentColor; }
@media (max-width: 820px) {
  .site-header nav { gap: .9rem; }
}
/* With NL · EN beside it, the full menu needs about 990px (Dutch, six items since 29 Sept: Prijzen was
 * added; it was 935px with five). Between 821 and 1000px the menu therefore folds behind the Menu button,
 * as on phones (same rules as the 820px block above), instead of breaking its items over two lines or
 * running into the wordmark. Above 1000px an item never breaks (at 1024px about 25px are left over). */
@media (min-width: 821px) and (max-width: 1000px) {
  .site-header nav ul { display: none; }
  .site-header .menu-toggle {
    display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .6rem 0; font: inherit; font-size: var(--nav-size); color: var(--fg); cursor: pointer;
  }
  .site-header.is-open { background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
  .site-header.is-open .home { opacity: 1; }
  .site-header.is-open nav ul {
    display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); padding: .5rem var(--gutter) 1.5rem; box-shadow: 0 1px 0 var(--rule);
  }
  .site-header.is-open nav a { display: block; padding-block: .75rem; font-size: 1.3rem; }
  html.no-js .site-header .menu-toggle { display: none; }
  html.no-js .site-header nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
}
@media (min-width: 1001px) {
  .site-header nav ul a { white-space: nowrap; }
}
/* ---------- no script: the header ----------
 * Without the script the header never turns solid and there is no Menu button: the menu is a plain list
 * (above). Up to 1000px that list wraps over several lines, so the header becomes a paper bar at the top of
 * the page: in the flow instead of fixed, as tall as its lines need (no line above the top of the screen,
 * nothing over the hero's type), Inkt on Papier in the light theme and the dark one alike. Wider, the menu
 * fits on one line over the film as with the script; the header then scrolls away with the film (absolute)
 * instead of floating, transparent, over the paper below, and the wordmark, which only the no-script header
 * shows over the film, takes the film type like the links: white with the thin Inkt edge and a soft
 * shadow, the italic e in the tint of the hero mark, in both themes. */
@media (max-width: 1000px) {
  html.no-js .site-header { position: relative; background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
  html.no-js .site-header .bar { height: auto; min-height: 4.25rem; flex-wrap: wrap; row-gap: .75rem; padding-block: .8rem .65rem; }
  html.no-js .site-header nav { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; gap: 0 1rem; }
  html.no-js .site-header nav ul { gap: 0 1rem; }
  html.no-js .site-header nav ul a { display: inline-block; padding-block: .2rem; }
  /* NL · EN on the wordmark's line, at the right (it follows the links in the reading order). Its tap
     targets reach .55rem above and below the text: the text is centred on the wordmark's line (.8rem
     down, less that padding), and the menu starts below the targets (the bar's row-gap), so a finger
     on NL or EN never lands on a menu link. */
  html.no-js .site-header .lang { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .8rem - .55rem); right: var(--gutter); line-height: 1.55rem; margin-right: -.3rem; }
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) nav a,
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) .lang,
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) .lang a,
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) .lang [aria-current] { -webkit-text-stroke: 0; text-shadow: none; }
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) nav a,
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) .lang [aria-current] { color: var(--fg); }
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) .lang,
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) .lang a { color: var(--fg-soft); }
  html.no-js .site-header:not(.is-solid):not(.is-open):not(.is-page) .lang [aria-current] { text-decoration-color: var(--afterimage); }
  html.no-js .page-head { padding-top: clamp(3rem, 8vw, 7rem); }   /* the header no longer covers the top */
}
@media (min-width: 1001px) {
  html.no-js .site-header:not(.is-page) { position: absolute; }
  html.no-js .site-header:not(.is-page) .home { color: var(--film-white); }
  html.no-js .site-header:not(.is-page) .home svg { filter: drop-shadow(0 1px 8px rgba(10, 16, 12, .35)); }
  html.no-js .site-header:not(.is-page) .home path {
    stroke: var(--inkt); stroke-width: var(--film-edge); vector-effect: non-scaling-stroke; paint-order: stroke fill; stroke-linejoin: round;
  }
  html.no-js .site-header:not(.is-page) .home .glyph-after { fill: #C9D0C7; }
}

/* ---------- prices (29 Sept): three cards, paper on the silver tint ----------
 * Family prices only, including btw. The cards are equal columns from 1001px; narrower they stack in one
 * column (three cards never break 2 + 1). The button sits at the foot of each card, so the three line up. */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: stretch; }
@media (max-width: 1000px) { .tiers { grid-template-columns: minmax(0, 1fr); max-width: 42rem; } }
.tier { display: flex; flex-direction: column; gap: 1.05rem; background: var(--bg); padding: clamp(1.3rem, 2.2vw, 2.1rem); border-top: 2px solid var(--fg); }
.tier-head { display: grid; gap: .45rem; }
.tier-head h3 { font-family: var(--display); font-weight: 380; font-size: var(--step-2); line-height: 1; }
.tier-length { font-variant-caps: all-small-caps; letter-spacing: .12em; font-variant-numeric: lining-nums; font-size: 1rem; color: var(--fg-soft); }
.tier-line { font-size: 1.16rem; line-height: 1.42; }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.tier-price .amount { font-family: var(--display); font-weight: 380; font-size: var(--step-2); line-height: 1; font-variant-numeric: lining-nums; }
.tier-price .vat { font-size: var(--step--1); color: var(--fg-soft); }
.tier-price .from { font-family: var(--serif); font-size: 1.05rem; color: var(--fg-soft); margin-right: .1em; }
.tier-via { margin-top: -.45rem; font-size: var(--step--1); line-height: 1.5; color: var(--fg-soft); }
.tier-facts { margin: 0; border-top: 1px solid var(--rule); }
.tier-facts dt { padding-top: .8rem; font-variant-caps: all-small-caps; letter-spacing: .1em; font-variant-numeric: lining-nums; font-size: .98rem; color: var(--fg-soft); }
.tier-facts dd { margin: .15rem 0 0; padding-bottom: .8rem; border-bottom: 1px solid var(--rule); font-size: var(--step--1); line-height: 1.5; }
.tier-facts dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
/* what is included: the promise dot of the home page, small (ink, with its afterimage) */
.tier-list { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .4rem; }
.tier-list li { position: relative; padding-left: 1.2rem; }
.tier-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--fg); box-shadow: .2rem 0 0 0 var(--afterimage); }
.tier-cta { margin-top: auto; padding-top: .6rem; }
.tier .button.ghost { color: var(--fg); border-color: var(--fg); }
.tier .button.ghost:hover { background: var(--fg); color: var(--bg); }
/* side by side, the cards share their rows (subgrid): the prices, the facts and the buttons line up */
@media (min-width: 1001px) {
  @supports (grid-template-rows: subgrid) {
    .tiers { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .tier { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 1.05rem; }
    .tier-cta { align-self: end; }
  }
}
/* extras and the notes under the cards */
.tier-extras { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.2rem clamp(2rem, 5vw, 5rem); margin-top: clamp(2.8rem, 5vw, 4rem); align-items: start; }
.tier-extras h3.label { grid-column: 1 / -1; font-family: var(--serif); font-weight: 400; font-size: 1rem; line-height: 1.55; }
.extras { margin: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border-top: 1px solid var(--fg); }
.extras dt, .extras dd { margin: 0; padding: .75rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1); line-height: 1.45; }
.extras dd { padding-left: 1.2rem; text-align: right; font-variant-numeric: lining-nums; }
.tier-notes { display: grid; gap: .9rem; padding-top: .75rem; }
.tier-notes p { font-size: var(--step--1); line-height: 1.5; color: var(--fg-soft); }
@media (max-width: 820px) { .tier-extras { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .extras { grid-template-columns: minmax(0, 1fr); }
  .extras dt { border-bottom: 0; padding-bottom: 0; }
  .extras dd { padding: .15rem 0 .75rem; text-align: left; color: var(--fg-soft); }
}

/* how it works: the timing line under the steps; the brochure link under the pilot form, in the green field */
#hoe-het-werkt .timing strong { font-weight: 600; }
.timing p:last-child { grid-column: 1 / -1; }   /* "Is het afscheid deze week?": the line under the three timings */
.booklet { display: grid; gap: 1.1rem; margin-top: 1.4rem; padding-top: 1.8rem; border-top: 1px solid color-mix(in srgb, var(--on-field) 35%, transparent); }

/* ---------- 404: the English line under the Dutch one (the page is bilingual) ---------- */
.missing-en { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule); max-width: 40rem; }
.missing-en-line { font-family: var(--display); font-weight: 380; font-size: min(var(--step-2), 9vw); line-height: 1.04; text-wrap: balance; }
.missing-en .missing-link { margin-top: 1.2rem; }