/* Lettertypen en iconen worden in _Layout.cshtml als <link> geladen (met icon-subset),
   niet via @import: dat scheelt een render-blokkerende keten en 2,3 MB iconenfont.
   ============================================================================= */
/* =============================================================================
   REIWA — site stylesheet
   Handgeschreven vertaling van het Claude Design-artboard "REIWA Homepage.dc.html"
   (eerste versie) en de design-system tokens. Geen build-stap: dit bestand wordt
   rechtstreeks gelinkt vanuit Views/Shared/Reiwa/_Layout.cshtml.

   Opbouw: tokens → basis → grid → header/menu → secties → footer → motion.
   Maten komen uit het artboard, niet uit proza (workflow-regel U1).
   ========================================================================== */


/* ---------------------------------------------------------------- tokens */
:root {
  /* palette */
  --reiwa-ink: #1E1E1E;
  --reiwa-ink-hover: #3D3D3D;
  --reiwa-ink-press: #565656;
  --reiwa-canvas: #FAF8F2;
  --reiwa-parchment: #F0EDE3;
  --reiwa-white: #FFFFFF;
  --reiwa-slate-blue: #385D76;
  --reiwa-divider: #DAD5C7;
  --reiwa-gold: #BB8B00;
  --reiwa-gold-light: #E5B325;
  --reiwa-gold-lighter: #EFBE33;
  --reiwa-gold-bright: #C89400;
  --reiwa-gold-deep: #9C6800;
  --reiwa-gold-hover: #8A5B00;
  --reiwa-gold-press: #785000;
  --reiwa-rose: #A75E65;

  --text-primary: var(--reiwa-ink);
  --text-inverse: var(--reiwa-canvas);
  --text-muted: rgba(30, 30, 30, 0.72);
  --body-ink: #414141;            /* lopende tekst een stap van de inkt af */
  --hover-wash: #F7F1DE;          /* rij onder de cursor, geen affordance */
  --border-ink: #1E1E1E;
  --surface-page: var(--reiwa-canvas);
  --surface-inverse: var(--reiwa-ink);
  --text-on-ink: var(--reiwa-parchment);
  --surface-ghost-hover: rgba(30, 30, 30, 0.06);
  --surface-ghost-press: rgba(30, 30, 30, 0.12);
  --border-primary: var(--reiwa-ink);
  --border-divider: var(--reiwa-divider);
  --link-color: var(--reiwa-ink);
  --link-color-hover: var(--reiwa-gold-deep);

  /* type */
  --font-display: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Fluïde schaal in rem (artboard-override): 80/48/40/32/24/20/16/14 */
  --type-hero-size: clamp(3rem, 6vw, 5rem);        --type-hero-lh: 1.04;
  --type-h1-size: clamp(2.5rem, 4vw, 3rem);        --type-h1-lh: 1.1;
  --type-h2-size: clamp(2rem, 3.5vw, 2.5rem);      --type-h2-lh: 1.15;
  --type-h3-size: clamp(1.75rem, 2.8vw, 2rem);     --type-h3-lh: 1.25;
  --type-h4-size: clamp(1.375rem, 2.2vw, 1.5rem);  --type-h4-lh: 1.333;
  --type-h5-size: clamp(1.125rem, 2vw, 1.25rem);   --type-h5-lh: 1.4;
  --type-eyebrow-size: 0.875rem;
  --type-body-size: 1rem;      --type-body-lh: 24px;
  --type-body-sm-size: 0.875rem; --type-body-sm-lh: 24px;
  --type-nav-size: 1rem;       --type-nav-lh: 24px;
  --type-label-size: 1rem;     --type-label-lh: 24px;
  --type-label-sm-size: 0.875rem; --type-label-sm-lh: 16px;
  --type-eponym-size: 0.875rem;
  --tracking-on-ink: 0.015em;

  /* spacing (8px-grid; 4, 12 en 20 als uitzondering) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px;
  --space-11: 64px; --space-12: 80px; --space-13: 120px;
  --page-max: 1512px;
  --page-top-gap: 80px;
  --hero-gap: 64px;
  --gutter: 96px;
  --gutter-mobile: 16px;
  --section-gap: clamp(56px, 7.5vw, 144px);
  --section-gap-sm: clamp(40px, 5vw, 96px);
  --section-gap-lg: clamp(72px, 9.5vw, 184px);
  --header-height: 64px;
  --radius-sm: 0px;                     /* artboard: overal rechte hoeken */
  --control-height-sm: 40px;
  --control-height-md: 48px;

  /* grid */
  --grid-gap: 20px;
  --offers-gap: 40px;
  --grid-unit: calc((min(100vw, var(--page-max)) - 2 * var(--gutter) - 11 * var(--grid-gap)) / 12);
  --grid-span-4: calc(var(--grid-unit) * 4 + var(--grid-gap) * 3);
  --grid-span-5: calc(var(--grid-unit) * 5 + var(--grid-gap) * 4);
  --grid-span-6: calc(var(--grid-unit) * 6 + var(--grid-gap) * 5);
  --page-inset: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));

  /* motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --blend-artwork: multiply;
}
@media (max-width: 1440px) { :root { --gutter: 80px; } }
@media (max-width: 1024px) { :root { --gutter: 48px; } }
@media (max-width: 768px)  { :root { --gutter: 32px; --page-top-gap: 56px; } }  /* --hero-gap blijft 64px: zo lost het artboard het op (de 24px-override daar wordt overschreven door het design system) */
@media (max-width: 480px)  { :root { --gutter: 16px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-primary); text-decoration: none; transition: color var(--motion-base) var(--ease-standard); }
a:hover { color: var(--reiwa-gold-deep); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--fw-regular); margin: 0; }
em, i { font-style: italic; }
p { margin: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--reiwa-gold); color: var(--reiwa-canvas); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--reiwa-gold-deep); outline-offset: 2px; border-radius: var(--radius-sm);
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }
.reiwa-skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  transform: translateY(-200%);
  background: var(--surface-inverse); color: var(--reiwa-parchment);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-label-size);
  padding: var(--space-3) var(--space-4); border-radius: 0;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.reiwa-skip-link:focus { transform: translateY(0); color: var(--reiwa-parchment); }
.reiwa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.material-symbols-outlined {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; user-select: none; flex-shrink: 0;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
/* De iconenfont mag de eerste weergave niet tegenhouden (staat op display=swap). Tot hij binnen is
   houden we de iconen onzichtbaar -- anders flitst de ligatuurnaam ("arrow_forward") als gewone tekst --
   en reserveren we het vierkant van 1em dat het icoon straks vult, zodat er niets verspringt. */
.reiwa-iconen-wacht .material-symbols-outlined { visibility: hidden; width: 1em; height: 1em; overflow: hidden; }

/* ------------------------------------------------------------------ page */
.reiwa-page { position: relative; width: 100%; overflow-x: clip; background: var(--surface-page); }
/* Papierkorrel: één naadloze tegel, twee keer gemultiplied op lage opacity. */
.reiwa-page::after {
  content: ""; position: absolute; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("../assets/reiwa/textures/paper-tile.jpg"), url("../assets/reiwa/textures/paper-tile.jpg");
  background-size: 720px 720px, 293px 293px;
  background-position: 0 0, 97px 161px;
  background-repeat: repeat, repeat;
  mix-blend-mode: multiply; opacity: 0.35;
}
#main section[id], #main div[id] { scroll-margin-top: 128px; }

/* ------------------------------------------------------------------ grid */
.reiwa-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap); row-gap: var(--space-7); align-items: start; width: 100%;
  padding-inline: var(--page-inset);
}
.reiwa-col-1 { grid-column-end: span 1; } .reiwa-col-2 { grid-column-end: span 2; }
.reiwa-col-3 { grid-column-end: span 3; } .reiwa-col-4 { grid-column-end: span 4; }
.reiwa-col-5 { grid-column-end: span 5; } .reiwa-col-6 { grid-column-end: span 6; }
.reiwa-col-7 { grid-column-end: span 7; } .reiwa-col-8 { grid-column-end: span 8; }
.reiwa-col-9 { grid-column-end: span 9; } .reiwa-col-10 { grid-column-end: span 10; }
.reiwa-col-11 { grid-column-end: span 11; } .reiwa-col-12 { grid-column-end: span 12; }
.reiwa-start-2 { grid-column-start: 2; } .reiwa-start-3 { grid-column-start: 3; }
.reiwa-start-4 { grid-column-start: 4; } .reiwa-start-5 { grid-column-start: 5; }
.reiwa-start-6 { grid-column-start: 6; } .reiwa-start-7 { grid-column-start: 7; }
.reiwa-start-9 { grid-column-start: 9; } .reiwa-start-10 { grid-column-start: 10; }
@media (max-width: 1024px) {
  :root { --grid-unit: calc((100vw - 2 * var(--gutter) - 5 * var(--grid-gap)) / 6); }
  .reiwa-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .reiwa-col-4, .reiwa-col-5, .reiwa-col-6, .reiwa-col-7, .reiwa-col-8,
  .reiwa-col-9, .reiwa-col-10, .reiwa-col-11, .reiwa-col-12 { grid-column-end: span 6; }
  .reiwa-start-2, .reiwa-start-3, .reiwa-start-4, .reiwa-start-5,
  .reiwa-start-6, .reiwa-start-7, .reiwa-start-9, .reiwa-start-10 { grid-column-start: auto; }
  .reiwa-optical-top { margin-top: 0; }
}
@media (max-width: 768px) {
  :root { --grid-unit: calc(100vw - 2 * var(--gutter)); }
  .reiwa-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .reiwa-grid > * { grid-column-start: auto; grid-column-end: span 1; grid-row-start: auto; grid-row-end: span 1; }
}
/* Body-tekst draagt meer halve regelafstand dan het eyebrow ernaast: rechterkolom
   optisch omhoog. */
.reiwa-optical-top { margin-top: -4px; }

/* ------------------------------------------------------------ typografie */
.reiwa-eyebrow {
  display: block;
  font-family: var(--font-body); font-style: normal; font-weight: var(--fw-regular);
  text-transform: uppercase; font-size: var(--type-eyebrow-size); letter-spacing: 0.1em; line-height: 1.6;
  color: var(--body-ink); margin-bottom: var(--space-3);
}
.reiwa-h2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--text-primary); margin: 0; text-wrap: pretty; }
.reiwa-lead { font-family: var(--font-body); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--body-ink); margin: 0; text-wrap: pretty; }
.reiwa-body { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); margin: 0; text-wrap: pretty; }
.reiwa-body strong, .reiwa-lead strong { font-weight: var(--fw-bold); color: var(--text-primary); }
.reiwa-heading-block { display: flex; flex-direction: column; align-items: flex-start; }
/* Gouden penseelstreek achter een schuin woord: achtergrondlaag op de <em> zelf. De streek is een
   webp met alpha (brush-gold-wide-alpha.webp, uit de scan afgeleid), dus zonder dekkende
   achtergrond: een dekkende laag sneed op smalle schermen de staart van een j of g op de regel
   erboven af (feedback 17-09). */
.reiwa-brushed em {
  font-style: italic; padding-inline: 0.1em; margin-inline: -0.1em; white-space: nowrap;
  background-image: url("../assets/reiwa/brushes/brush-gold-wide-alpha.webp");
  background-repeat: no-repeat; background-size: 100% 1.28em;
  /* Niet op het midden van het tekstvak maar iets lager: dat vak loopt van de bovenkant van
     de stokletters tot onder de staartletters, terwijl het woord zelf lager zit. Zonder deze
     verschuiving ligt de streek boven het woord in plaats van erop (feedback Catelijne,
     18-09). Steekt hij uit, dan liever aan de onderkant. */
  background-position: center calc(50% + 0.28em);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (forced-colors: active) { .reiwa-brushed em { background-image: none; } }
/* Op een telefoon mag een lang gemarkeerd begrip ("Marketing Value Gap") wél afbreken: elk deel
   krijgt zijn eigen streek (box-decoration-break: clone), anders loopt de kop uit beeld. */
@media (max-width: 640px) { .reiwa-brushed em { white-space: normal; } }

/* ---------------------------------------------------------------- knoppen */
.reiwa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: none; border-radius: 0; font-family: var(--font-body); font-weight: var(--fw-bold);
  text-align: center; white-space: nowrap; text-decoration: none; cursor: pointer;
  height: var(--control-height-md); padding: 0 20px; font-size: var(--type-body-size); line-height: var(--type-label-lh);
  transition: background var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.reiwa-btn--sm { height: var(--control-height-sm); padding: 0 16px; font-size: var(--type-body-sm-size); line-height: var(--type-label-sm-lh); }
.reiwa-btn--primary { background: var(--reiwa-gold-light); color: var(--reiwa-ink); }
.reiwa-btn--primary:hover, .reiwa-btn--primary:focus-visible { background: var(--reiwa-gold-lighter); color: var(--reiwa-ink); }
.reiwa-btn--primary:active { background: var(--reiwa-gold-bright); color: var(--reiwa-ink); transform: translateY(1px); }
.reiwa-btn--secondary { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-primary); }
.reiwa-btn--secondary:hover, .reiwa-btn--secondary:focus-visible { background: var(--surface-ghost-hover); color: var(--text-primary); }
.reiwa-btn--secondary:active { background: var(--surface-ghost-press); transform: translateY(1px); }
/* Op inkt: accent is dezelfde gouden knop met inkt-label; inverse is de omlijnde knop in crème. */
.reiwa-btn--accent { background: var(--reiwa-gold-light); color: var(--reiwa-ink); }
.reiwa-btn--accent:hover, .reiwa-btn--accent:focus-visible { background: var(--reiwa-gold-lighter); color: var(--reiwa-ink); }
.reiwa-btn--accent:active { background: var(--reiwa-gold-bright); color: var(--reiwa-ink); transform: translateY(1px); }
.reiwa-btn--inverse { background: transparent; color: var(--text-inverse); box-shadow: inset 0 0 0 1px var(--text-inverse); }
.reiwa-btn--inverse:hover, .reiwa-btn--inverse:focus-visible { background: rgba(250, 248, 242, 0.1); color: var(--text-inverse); }
.reiwa-btn--inverse:active { background: rgba(250, 248, 242, 0.18); transform: translateY(1px); }
.reiwa-btn .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; }

/* Tekstlink: vette label + pijl, geen onderstreping. */
.reiwa-link {
  display: inline-flex; align-items: center; gap: 2px; padding-block: var(--space-2); margin-block: calc(var(--space-2) * -1);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-size); line-height: var(--type-label-lh);
  color: var(--link-color); white-space: nowrap; max-width: 100%;
}
.reiwa-link:hover, .reiwa-link:focus-visible { color: var(--link-color-hover); }
.reiwa-link .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20; }
.reiwa-link__label { position: relative; }
.reiwa-link__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); }
.reiwa-link:hover .reiwa-link__label::after, .reiwa-link:focus-visible .reiwa-link__label::after { opacity: 1; }

/* ----------------------------------------------------------------- header */
/* Design 16-09: op desktop woordmerk links (tevens home-knop) en navigatie rechts; tot 1120px
   hamburger links, woordmerk in het midden, knop rechts (raster 1fr auto 1fr). */
.reiwa-header {
  position: sticky; top: 0; z-index: 50; width: 100%; height: var(--header-height);
  background: var(--surface-page); border-block: 1px solid var(--border-divider);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-6);
  padding-inline: var(--page-inset);
}
.reiwa-header__brand { display: flex; align-items: center; flex-shrink: 0; justify-self: start; }
.reiwa-header__brand img, .reiwa-header__brand .reiwa-wordmark { display: block; height: 32px; width: auto; }
.reiwa-wordmark { color: var(--text-primary); overflow: visible; }
/* Intro van het woordmerk (eerste lading per sessie): de haken staan eerst tegen elkaar in het
   midden en klappen uit elkaar; de letters verschijnen van binnen naar buiten (I, dan E en W,
   dan R en A). Eenheden zijn viewBox-units (166,665 breed), dus onafhankelijk van de weergavemaat. */
.reiwa-intro .reiwa-wordmark__bracket { animation: reiwa-bracket-open 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.reiwa-intro .reiwa-wordmark__bracket--right { animation-name: reiwa-bracket-open-right; }
.reiwa-intro .reiwa-wordmark__letter { animation: reiwa-letter-in 420ms var(--ease-standard) both; animation-delay: calc(260ms + var(--d, 0) * 90ms); }
@keyframes reiwa-bracket-open { from { transform: translateX(72.8px); } to { transform: none; } }
@keyframes reiwa-bracket-open-right { from { transform: translateX(-72.8px); } to { transform: none; } }
@keyframes reiwa-letter-in { from { opacity: 0; transform: scaleX(0.6); } to { opacity: 1; transform: none; } }
.reiwa-wordmark__letter { transform-box: fill-box; transform-origin: center; }
.reiwa-header__nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); min-width: 0; }
.reiwa-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); justify-self: end; }
.reiwa-nav-link {
  position: relative; display: flex; align-items: center; height: 40px; padding-inline: var(--space-3);
  font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--type-nav-size); line-height: var(--type-nav-lh);
  white-space: nowrap; color: var(--text-primary); text-decoration: none; flex-shrink: 0; background: transparent;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.reiwa-nav-link:hover, .reiwa-nav-link:focus-visible { color: var(--text-primary); }
.reiwa-nav-link > span {
  display: inline-flex; align-items: center; height: 32px; padding-inline: var(--space-3); margin-inline: calc(var(--space-3) * -1);
  transition: background var(--motion-fast) var(--ease-standard);
}
.reiwa-nav-link:hover > span, .reiwa-nav-link:focus-visible > span { background: rgba(30, 30, 30, 0.05); }
/* Actieve pagina: alleen vet en volle inkt. Het homepage-artboard had een gouden stip
   voor het label, de pagina-artboards (Werk, Case, Contact) niet — en op de homepage is
   nooit een item actief, dus de stip komt nergens voor. */
.reiwa-nav-link[aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-bold); }
.reiwa-header__menu {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--text-primary); justify-self: start;
}
.reiwa-header__menu .material-symbols-outlined { font-size: 32px; width: 32px; height: 32px; }
.reiwa-cta-short { display: none; }
@media (max-width: 1120px) {
  .reiwa-header { grid-template-columns: 1fr auto 1fr; column-gap: var(--space-3); }
  .reiwa-header__nav { display: none; }
  .reiwa-header__menu { display: flex; }
  .reiwa-header__brand { justify-self: center; }
}
@media (max-width: 560px) { .reiwa-cta-long { display: none; } .reiwa-cta-short { display: inline; } }
@media (max-width: 420px) { .reiwa-header__actions .reiwa-btn { display: none; } }

/* Menu: zijpaneel op desktop/tablet, volledige overlay op een telefoon. */
.reiwa-menu { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.reiwa-menu__backdrop { position: absolute; inset: 0; background: rgba(30, 30, 30, 0.42); opacity: 0; transition: opacity var(--motion-base) var(--ease-standard); }
/* Het paneel komt van links, waar het hamburgerglyph staat; de zijmarge is de paginagutter
   zodat de inhoud onder het glyph en op de pagina erachter uitlijnt. Kop- en voetlijn lopen
   door tot de panelranden, zoals de header- en footerlijnen op de pagina. */
.reiwa-menu__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(440px, 86vw);
  display: flex; flex-direction: column; gap: var(--space-7);
  padding: 10px var(--gutter) var(--space-8);
  background: var(--surface-page); border-right: 1px solid var(--border-divider);
  transform: translateX(-100%); transition: transform var(--motion-base) var(--ease-standard);
  overflow-y: auto;
}
.reiwa-menu.is-open { pointer-events: auto; }
.reiwa-menu.is-open .reiwa-menu__backdrop { opacity: 1; }
.reiwa-menu.is-open .reiwa-menu__panel { transform: translateX(0); }
.reiwa-menu__top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-divider); min-height: 54px; }
.reiwa-menu__top, .reiwa-menu__contact { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.reiwa-menu__logo { display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--motion-base) var(--ease-standard); }
.reiwa-menu__logo img, .reiwa-menu__logo .reiwa-wordmark { display: block; height: 32px; width: auto; }
.reiwa-menu.is-open .reiwa-menu__logo { opacity: 1; transition-delay: 120ms; }
.reiwa-menu__close { justify-self: start; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-primary); }
.reiwa-menu__close .material-symbols-outlined { font-size: 32px; width: 32px; height: 32px; transition: transform var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard); }
.reiwa-menu:not(.is-open) .reiwa-menu__close .material-symbols-outlined { opacity: 0; transform: rotate(-90deg); }
.reiwa-menu.is-open .reiwa-menu__close .material-symbols-outlined { opacity: 1; transform: rotate(0deg); transition-delay: 80ms; }
.reiwa-menu__links { display: flex; flex-direction: column; }
.reiwa-menu__links a { font-family: var(--font-display); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--text-primary); padding-block: var(--space-4); border-bottom: 1px solid var(--border-divider); }
.reiwa-menu__links a:hover { color: var(--reiwa-gold-deep); }
/* Na het openschuiven komen de regels getrapt binnen (40ms per regel), het contactblok als laatste. */
.reiwa-menu__links a, .reiwa-menu__foot { opacity: 0; transform: translateX(12px); transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard), color var(--motion-base) var(--ease-standard); }
.reiwa-menu.is-open .reiwa-menu__links a { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i, 0) * 40ms); }
.reiwa-menu.is-open .reiwa-menu__foot { opacity: 1; transform: none; transition-delay: calc(200ms + var(--n, 4) * 40ms); }
.reiwa-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.reiwa-menu__contact { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--border-divider); }
.reiwa-menu__label { font-family: var(--font-display); font-style: italic; font-size: var(--type-h5-size); line-height: 2; letter-spacing: 0.08em; color: var(--text-primary); }
.reiwa-menu__foot a { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); }
.reiwa-menu__foot a:hover { color: var(--reiwa-gold-deep); }
.reiwa-menu__cta { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 48px; padding-inline: var(--space-5); background: var(--reiwa-gold-light); color: var(--reiwa-ink); font-weight: var(--fw-bold); }
.reiwa-menu__cta:hover { background: var(--reiwa-gold-lighter); color: var(--reiwa-ink); }
.reiwa-menu__cta .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
@media (max-width: 640px) {
  .reiwa-menu__panel { width: 100%; border-right: none; }
  .reiwa-menu__backdrop { display: none; }
  .reiwa-menu__foot a, .reiwa-menu__label { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }
}
body.reiwa-menu-open { overflow: hidden; }

/* ------------------------------------------------------------------- hero */
.reiwa-hero { row-gap: var(--space-8); padding-top: var(--page-top-gap); }
.reiwa-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-hero-size); line-height: var(--type-hero-lh);
  text-align: center; text-wrap: pretty; color: var(--text-primary); margin: 0; max-width: 100%;
}
.reiwa-hero__body {
  font-family: var(--font-body); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); text-align: center; text-wrap: pretty;
  color: var(--body-ink); margin: calc(var(--space-4) * -1) 0 0; max-width: 100%;
}
.reiwa-hero__body p + p { margin-top: 24px; }
.reiwa-hero__body strong { font-weight: var(--fw-bold); color: var(--text-primary); }
.reiwa-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: calc(var(--space-2) * -1); }

/* ------------------------------------------------------------ lijstsectie */
.reiwa-list-section { margin-top: var(--section-gap-lg); row-gap: var(--space-6); }
.reiwa-list-section--numbered { row-gap: var(--space-8); }
.reiwa-list-section__head { display: flex; flex-direction: column; gap: var(--space-6); }
.reiwa-list-section__head--stacked { gap: var(--space-6); }
.reiwa-list-section__body { display: flex; flex-direction: column; gap: var(--space-6); }
.reiwa-list-section__group { display: flex; flex-direction: column; gap: var(--space-4); }
/* De slottekst staat in de dom na de lijst, zodat hij op een telefoon onder de opsomming
   valt. Op een breed scherm hoort hij in de linkerkolom onder de kop: kolom 1 afdwingen
   legt hem op de tweede rij, want rij 1 is daar al bezet door de kop. */
.reiwa-list-section__after { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 769px) {
  /* Rijen expliciet: de kop en de slottekst onder elkaar in de linkerkolom, de lijst ernaast over
     beide rijen. Zonder dit zakt de slottekst mee tot onder de lijst, want die bepaalt dan in zijn
     eentje de hoogte van de eerste rij. */
  .reiwa-list-section__head  { grid-column: 1 / span 4; grid-row: 1; }
  .reiwa-list-section__after { grid-column: 1 / span 4; grid-row: 2; }
  .reiwa-list-section:has(.reiwa-list-section__after) .reiwa-list-section__body { grid-row: 1 / span 2; }
}
.reiwa-list-section__label { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink); }
.reiwa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--border-divider); }
.reiwa-list-row {
  position: relative;
  font-family: var(--font-display); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--body-ink);
  border-top: 1px solid transparent; padding-block: var(--space-4); text-wrap: pretty;
  padding-inline: var(--space-4); margin-inline: calc(var(--space-4) * -1);
  transition: background var(--motion-fast) var(--ease-standard);
}
.reiwa-list-row:hover { background: var(--hover-wash); }
/* De scheidingslijn is een pseudo-element, zodat hij bij het binnenkomen van links naar
   rechts kan uitlopen (een vouw in het papier die openvalt). */
.reiwa-list-row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--border-divider); transform-origin: left center; transition: transform 400ms var(--ease-standard); transition-delay: var(--reveal-delay, 0ms); }
.reiwa-list-row.reiwa-reveal:not(.is-visible)::before { transform: scaleX(0); }
.reiwa-list--numbered .reiwa-list-row { padding-block: var(--space-5); display: flex; gap: var(--space-5); align-items: baseline; }
/* Design 16-09: lijsten zonder nummer krijgen een opsommingsteken van 7px (30% inkt) op de eerste
   regel; ::before is hier de uitlopende vouwlijn, dus het teken staat in ::after en schuift met order naar voren. */
.reiwa-list-row--bullet { display: flex; gap: var(--space-4); align-items: flex-start; }
.reiwa-list-row--bullet::after { content: ""; order: -1; flex: 0 0 auto; width: 7px; height: 7px; margin-top: calc((var(--type-h5-size) * var(--type-h5-lh) - 7px) / 2); background: rgba(30, 30, 30, 0.3); }
.reiwa-list__n { font-family: var(--font-display); font-size: var(--type-h4-size); line-height: 1; color: var(--reiwa-slate-blue); flex: 0 0 auto; min-width: 2.4ch; }
.reiwa-list-section__text { margin-top: var(--space-2); }
.reiwa-list-section__text + .reiwa-list-section__text { margin-top: 0; }
/* Ritme van het artboard: de gids-sectie volgt de gecentreerde tekstsectie op de
   kleinere sectie-afstand. */
.reiwa-text-section--center + .reiwa-list-section { margin-top: var(--section-gap); row-gap: var(--space-7); }

/* ------------------------------------------------------------ tekstsectie */
.reiwa-text-section { margin-top: var(--section-gap-lg); row-gap: var(--space-6); }
.reiwa-text-section--center { padding-block: var(--space-9); }
.reiwa-text-section__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.reiwa-text-section--center .reiwa-text-section__inner { align-items: center; text-align: center; }
.reiwa-text-section__text { max-width: 48ch; }
.reiwa-text-section--center .reiwa-text-section__text { max-width: 48ch; }
.reiwa-text-section__text p + p { margin-top: 24px; }
/* Design 16-09: de Value Gap-tekst volledig op body-maat, met alleen de alinea-afstand van 20px. */
.reiwa-text-section--center .reiwa-text-section__text p + p { margin-top: var(--space-5); }
.reiwa-text-section__text ul { padding-left: 1.25em; margin: 0; }

/* ------------------------------------------------------- kenmerken (aanpak) */
.reiwa-features { margin-top: var(--section-gap); row-gap: var(--space-10); column-gap: var(--offers-gap); }
.reiwa-features__intro { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-5); max-width: var(--grid-span-6); }
.reiwa-features__track { display: contents; }
.reiwa-feature {
  grid-column-end: span 3; align-self: stretch;
  width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
  padding-right: var(--space-6);
}
.reiwa-features__track > .reiwa-feature:not(:first-child) { border-left: 1px solid var(--border-divider); padding-left: var(--space-6); margin-left: -10px; }
.reiwa-features__track > .reiwa-feature:last-child { padding-right: 0; }
.reiwa-feature__glyph { position: relative; width: 136px; height: 136px; flex-shrink: 0; }
/* Gouacheblob: de scan heeft wit papier. Multiply als achtergrondlaag tegen het crème van
   de pagina (background-blend-mode), niet als mix-blend-mode: de kaarten krijgen door de
   reveal-animatie een eigen stacking context en dan blendt een mix-blend-mode met niets. */
.reiwa-feature__blob {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/reiwa/brushes/blob-gold-circle.webp");
  background-position: center; background-size: contain; background-repeat: no-repeat;
  background-color: var(--surface-page); background-blend-mode: multiply;
}
.reiwa-feature__blob { transition: opacity 500ms var(--ease-standard); }
.reiwa-feature__icon { transition: opacity 400ms var(--ease-standard) 180ms; }
.reiwa-feature.reiwa-reveal:not(.is-visible) .reiwa-feature__blob, .reiwa-feature.reiwa-reveal:not(.is-visible) .reiwa-feature__icon { opacity: 0; }
.reiwa-feature__icon {
  position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + 6px), -50%);
  font-size: 3rem; width: 3rem; height: 3rem; color: var(--reiwa-gold-deep);
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
}
.reiwa-feature__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); text-align: left; text-wrap: pretty; color: var(--text-primary); margin: 0; min-height: 2.5em; }
.reiwa-feature__text { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); text-align: left; text-wrap: pretty; color: var(--body-ink); margin: 0; }
.reiwa-feature__text strong { font-weight: var(--fw-bold); color: var(--text-primary); }
.reiwa-track-bar { display: none; }
@media (max-width: 1024px) {
  .reiwa-features__track {
    display: flex; align-items: stretch; gap: 0; grid-column: 1 / -1; order: 1;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-left: calc(var(--gutter) - var(--space-6)); scroll-padding-inline: var(--gutter);
    scrollbar-width: none; cursor: grab;
  }
  .reiwa-features__track::-webkit-scrollbar { display: none; }
  .reiwa-features__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .reiwa-feature { flex: 0 0 min(80%, 340px); width: auto; scroll-snap-align: start; padding: var(--space-5) var(--space-6); }
  .reiwa-features__track > .reiwa-feature:last-child { padding-right: var(--space-6); scroll-snap-align: end; }
  .reiwa-feature__title { min-height: 0; }
  .reiwa-track-bar { display: block; grid-column: 1 / -1; order: 2; height: 6px; margin-top: var(--space-2); background: rgba(30, 30, 30, 0.2); position: relative; overflow: hidden; }
  .reiwa-track-bar > div { position: absolute; inset-block: 0; left: 0; width: 40px; background: rgba(30, 30, 30, 0.7); }
}

/* -------------------------------------------------- kenmerken naast tekst */
.reiwa-scope { margin-top: var(--section-gap-lg); row-gap: var(--space-8); align-items: center; }
.reiwa-scope__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.reiwa-scope__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.reiwa-scope__grid .reiwa-feature { grid-column-end: auto; padding: var(--space-6); border: 1px solid var(--border-divider); height: 100%; margin: 0; }
.reiwa-scope__grid .reiwa-feature__title, .reiwa-scope__grid .reiwa-feature__text { align-self: stretch; width: 100%; }
.reiwa-scope__grid .reiwa-feature__text { display: flex; flex-direction: column; }
.reiwa-scope__grid .reiwa-feature__text span { display: block; border-top: 1px solid var(--border-divider); padding-block: var(--space-3); }
.reiwa-scope__bar { display: none; }
@media (max-width: 1024px) {
  .reiwa-scope__grid {
    display: flex; align-items: stretch; gap: var(--space-4); order: 1;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none; cursor: grab;
  }
  .reiwa-scope__grid::-webkit-scrollbar { display: none; }
  .reiwa-scope__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .reiwa-scope__grid .reiwa-feature { flex: 0 0 min(88%, 400px); scroll-snap-align: start; height: auto; align-self: stretch; }
  .reiwa-scope__bar { display: block; order: 2; height: 6px; margin-top: var(--space-2); background: rgba(30, 30, 30, 0.2); position: relative; overflow: hidden; }
  .reiwa-scope__bar > div { position: absolute; inset-block: 0; left: 0; width: 40px; background: rgba(30, 30, 30, 0.7); }
}

/* ------------------------------------------------------------------ bewijs */
.reiwa-proof { margin-top: var(--section-gap-lg); row-gap: var(--space-8); }
.reiwa-proof__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
/* Vier op een rij, maar met flex in plaats van grid: het aantal logo's is geen veelvoud van
   vier, en zo komt de laatste rij gecentreerd te staan in plaats van links met een gat. */
.reiwa-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); align-items: center; align-self: center; }
.reiwa-logo-cell { flex: 0 1 calc(25% - var(--space-6)); display: flex; align-items: center; justify-content: center; }
.reiwa-logo {
  display: block; width: 100%; height: 22px; background: var(--body-ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center;
  -webkit-mask-size: contain; mask-size: contain;
}
.reiwa-logo--tall { height: 36px; }
@media (max-width: 560px) { .reiwa-logo-cell { flex-basis: calc(50% - var(--space-6)); } }

/* ------------------------------------------------------------------- cases */
.reiwa-rail {
  display: flex; gap: var(--grid-gap); overflow-x: auto; overflow-y: hidden; align-items: stretch; width: 100%; margin-top: var(--space-8);
  scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: var(--page-inset); scroll-padding-inline: var(--page-inset);
}
.reiwa-rail::-webkit-scrollbar { display: none; }
.reiwa-rail.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.reiwa-rail-item { flex: 0 0 var(--grid-span-5); width: var(--grid-span-5); scroll-snap-align: start; }
.reiwa-rail-item:last-child { scroll-snap-align: end; }
@media (max-width: 1024px) { .reiwa-rail-item { flex: 0 0 calc(var(--grid-unit) * 3 + var(--grid-gap) * 2); width: calc(var(--grid-unit) * 3 + var(--grid-gap) * 2); } }
@media (max-width: 768px) { .reiwa-rail-item { flex: 0 0 320px; width: 320px; } }
.reiwa-case {
  display: flex; flex-direction: column; border: 1px solid var(--border-divider); text-decoration: none; color: inherit; cursor: grab;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.reiwa-case:hover, .reiwa-case:focus-visible { border-color: var(--border-primary); color: inherit; }
.reiwa-rail.is-dragging .reiwa-case { cursor: grabbing; }
.reiwa-case img, .reiwa-case a { -webkit-user-drag: none; }
.reiwa-case__media { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.reiwa-case__img { display: block; width: 100%; height: 100%; background: var(--reiwa-ink); background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform var(--motion-slow) var(--ease-standard); }
.reiwa-case:hover .reiwa-case__img { transform: scale(1.04); }
.reiwa-case__body { display: flex; flex-direction: row; align-items: stretch; gap: var(--space-4); padding: var(--space-5); flex: 1 1 auto; }
.reiwa-case__copy { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.reiwa-case__client { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--type-eponym-size); line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-ink); }
.reiwa-case__title { font-family: var(--font-display); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--text-primary); text-wrap: pretty; }
.reiwa-meta-tags { display: flex; gap: var(--space-2); width: 100%; margin-top: auto; padding-top: var(--space-4); flex-wrap: nowrap; overflow: hidden; }
.reiwa-meta-tags.has-fade { -webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, 0)); }
/* Design 16-09: op ≤1024px wikkelen de tags in plaats van af te kappen. */
@media (max-width: 1024px) {
  .reiwa-meta-tags { flex-wrap: wrap; overflow: visible; row-gap: var(--space-2); }
  .reiwa-meta-tags.has-fade { -webkit-mask-image: none; mask-image: none; }
}
.reiwa-meta-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px var(--space-3); border-radius: 0; background: rgba(30, 30, 30, 0.06); font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--body-ink); flex: 0 0 auto; white-space: nowrap; }
.reiwa-case__chevron { display: flex; flex: 0 0 auto; align-self: center; color: var(--text-primary); transition: transform var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.reiwa-case__chevron .material-symbols-outlined { font-size: 24px; width: 24px; height: 24px; }
.reiwa-case:hover .reiwa-case__chevron { transform: translateX(3px); color: var(--reiwa-gold-deep); }
.reiwa-rail-controls { margin-top: var(--space-9); }
.reiwa-rail-controls__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); }
.reiwa-scrollbar { justify-self: stretch; width: 100%; min-width: 120px; height: 6px; background: rgba(30, 30, 30, 0.10); position: relative; cursor: grab; touch-action: none; }
.reiwa-scrollbar:active { cursor: grabbing; }
.reiwa-scrollbar > div { position: absolute; inset-block: 0; left: 0; width: 40px; background: rgba(30, 30, 30, 0.7); pointer-events: none; }
.reiwa-scrollbar.is-leeg { pointer-events: none; }
.reiwa-scrollbar.is-leeg > div { width: 100% !important; transform: none !important; }

/* --------------------------------------------------------------- CTA-band */
/* Slot-CTA (design 16-09): band op inkt over de volle breedte, geen gouden gloed meer; kop wit,
   tekst crème, alles gecentreerd. Binnenmaten uit het design system: min. 368px hoog, verticale
   padding 64–116px, kop op h1-maat, tekst max. 56ch, knoppen 16px uit elkaar. */
.reiwa-cta-band { position: relative; width: 100%; margin-top: var(--section-gap); background: var(--surface-inverse); color: var(--text-on-ink); overflow: hidden; }
.reiwa-cta-band__inner { position: relative; min-height: 368px; align-content: center; row-gap: var(--space-8); padding-block: clamp(64px, 6.5vw, 116px); }
.reiwa-cta-band__content { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; text-align: center; }
.reiwa-cta-band__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); color: #FFFFFF; text-wrap: pretty; letter-spacing: var(--tracking-on-ink); }
.reiwa-cta-band__title em { font-style: italic; }
.reiwa-cta-band__text { margin: 0; font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: #FAF8F2; max-width: 56ch; text-wrap: pretty; letter-spacing: var(--tracking-on-ink); }
.reiwa-cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); }
@media (max-width: 1024px) { .reiwa-cta-band__title { font-size: clamp(32px, 5.4vw, 40px); } }
@media (max-width: 640px) {
  .reiwa-cta-band__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .reiwa-cta-band__actions .reiwa-btn { width: 100%; }
}
/* Sluit een pagina af met de band, dan staat de footer er direct onder (die heeft zelf 64px kop). */
main:has(> .reiwa-cta-band:last-child) ~ .reiwa-footer { margin-top: 0; border-top: none; }

/* ------------------------------------------------------------ naar boven */
/* "Terug naar boven" (design 16-09, reiwa-back-to-top.js): ghost-knop rechtsonder die verschijnt na
   een halve schermhoogte scrollen en binnen 1600px van de onderkant; op een donkere ondergrond
   (CTA-band) wisselt hij naar crème. De knop wordt door reiwa.js in de pagina gezet. */
.reiwa-to-top {
  position: fixed; right: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 48px); z-index: 60;
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4);
  border: 1px solid currentColor; border-radius: 0; background: transparent; color: var(--text-primary);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--type-body-sm-size); line-height: 1; cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.reiwa-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.reiwa-to-top:hover { background: rgba(30, 30, 30, 0.08); }
.reiwa-to-top.is-on-ink { color: var(--text-on-ink); }
.reiwa-to-top.is-on-ink:hover { background: rgba(255, 255, 255, 0.12); }
.reiwa-to-top:focus-visible { outline: 2px solid var(--reiwa-gold-deep); outline-offset: 2px; }
.reiwa-to-top__glyph { position: relative; display: block; width: 14px; height: 16px; flex: 0 0 auto; }
.reiwa-to-top__glyph::before { content: ""; position: absolute; left: 6px; top: 2px; width: 2px; height: 13px; background: currentColor; }
.reiwa-to-top__glyph::after { content: ""; position: absolute; left: 7px; top: 2px; width: 8px; height: 8px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateX(-50%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .reiwa-to-top { transition: none; } }
@media print { .reiwa-to-top { display: none; } }

/* ------------------------------------------------------------------ footer */
.reiwa-footer {
  position: relative; background: var(--surface-page); border-top: 1px solid var(--border-divider);
  padding-block: var(--space-11) var(--space-8); row-gap: var(--space-10);
  margin-top: var(--section-gap-lg);
}
.reiwa-footer__brand { display: flex; justify-content: center; }
.reiwa-footer__brand img { display: block; height: 32px; width: auto; }
.reiwa-footer__tagline { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.reiwa-footer__tagline img { display: block; height: 40px; width: auto; max-width: 100%; }
.reiwa-footer__offices { display: flex; flex-wrap: nowrap; justify-content: center; row-gap: var(--space-6); font-style: normal; }
.reiwa-footer__office {
  padding-inline: var(--space-9); text-align: center; border-left: 1px solid var(--border-divider);
  display: flex; flex-direction: column; gap: var(--space-1);
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--body-ink);
}
.reiwa-footer__office:first-child { border-left: none; }
.reiwa-footer__office-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-primary); }
.reiwa-footer-link { color: inherit; text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
.reiwa-footer-link:hover, .reiwa-footer-link:focus-visible { color: var(--reiwa-gold-deep); text-decoration: underline; }
.reiwa-footer__baseline {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--space-10); gap: var(--space-9);
  font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-primary);
}
.reiwa-footer__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: var(--space-6); row-gap: var(--space-7); width: 100%; }
.reiwa-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
/* Twee per rij: vier naast elkaar passen niet in de kolom en geven een scheve 3 + 1.
   Met twee kolommen valt de volgorde van admix.nl vanzelf goed: lidmaatschappen boven,
   ISO-certificaten eronder. */
.reiwa-footer__marks { display: grid; grid-template-columns: repeat(2, max-content); align-items: center; justify-items: center; gap: var(--space-4); }
/* De keurmerken zijn officiele emblemen: die laten we staan zoals Kiwa en FONK ze leveren,
   dus geen kader eromheen en geen herkleuring. Alleen de hoogte gelijktrekken. */
.reiwa-footer__mark { display: block; height: 80px; width: auto; }
.reiwa-footer__copyright { opacity: 0.55; margin-top: var(--space-4); }
@media (min-width: 1101px) { .reiwa-footer__office { flex: 1 1 0; min-width: 0; } }
@media (max-width: 1100px) {
  .reiwa-footer__offices { flex-direction: column; flex-wrap: nowrap; row-gap: 0; align-items: stretch; }
  .reiwa-footer__office { border-left: none; border-top: 1px solid var(--border-divider); padding-inline: 0; padding-block: var(--space-5); width: 100%; }
  .reiwa-footer__office:first-child { border-top: none; padding-top: 0; }
}
@media (max-width: 1024px) {
  .reiwa-footer { padding-block: var(--space-9) var(--space-6); row-gap: var(--space-7); }
  .reiwa-footer__tagline img { height: 28px; }
}
@media (max-width: 768px) {
  .reiwa-footer__brand { padding-top: var(--space-6); }
  .reiwa-footer__brand img { height: 24px; }
}
@media (max-width: 640px) {
  .reiwa-footer { padding-block: var(--space-8) var(--space-5); row-gap: var(--space-6); }
  .reiwa-footer__tagline img { height: 24px; }
}

/* ------------------------------------------------------------------ motion */
/* Lichte onthulling bij het scrollen: 16px omhoog en in, met een kleine trap per
   item. Onder prefers-reduced-motion staat alles direct — de fidelity-check rendert
   met die voorkeur, zodat de meting deterministisch blijft. */
.reiwa-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard); transition-delay: var(--reveal-delay, 0ms); }
.reiwa-reveal.is-visible { opacity: 1; transform: none; }
.reiwa-hero .reiwa-reveal { transition-duration: 800ms; }
/* Beelden (.reiwa-img): twee lagen op het element. ::before is de blur-up-placeholder (--lqip,
   20 px WebP uit het media-item), ::after het echte beeld: --bg-l op grote schermen, --bg-s tot
   768px. Lazy (.reiwa-img--lazy): het echte beeld wordt pas gezet als het element bijna in beeld
   is (reiwa.js zet reiwa-img-ready) en fadet in zodra het geladen is (is-loaded). Zonder
   JavaScript (html.no-js) staat het echte beeld er direct. */
.reiwa-img { position: relative; overflow: hidden; }
.reiwa-img::before, .reiwa-img::after { content: ""; position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.reiwa-img::before { background-image: var(--lqip, none); filter: blur(12px); transform: scale(1.08); }
.reiwa-img::after { background-image: var(--bg-l); opacity: 0; transition: opacity 640ms var(--ease-standard); }
@media (max-width: 768px) { .reiwa-img::after { background-image: var(--bg-s, var(--bg-l)); } }
.reiwa-img.is-loaded::after { opacity: 1; }
.reiwa-img.is-instant::after { transition: none; }
html:not(.no-js) .reiwa-img--lazy:not(.reiwa-img-ready)::after { background-image: none; }
html.no-js .reiwa-img::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reiwa-img::after { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reiwa-reveal { opacity: 1; transform: none; transition: none; }
  .reiwa-list-row::before { transform: none !important; }
  .reiwa-feature__blob, .reiwa-feature__icon { opacity: 1 !important; }
  .reiwa-menu__links a, .reiwa-menu__foot { transition: none; }
}
.no-js .reiwa-reveal { opacity: 1; transform: none; }
.no-js .reiwa-list-row::before { transform: none; }
.no-js .reiwa-feature__blob, .no-js .reiwa-feature__icon { opacity: 1; }
@media (forced-colors: active) { .reiwa-header, .reiwa-case { border-color: CanvasText; } }
@media print { .reiwa-menu, .reiwa-header__menu { display: none !important; } }