/* =========================================================================
   Garage E&M, Dordrecht - demo site
   Direction: the Dutch kenteken plate and the road sign (doc 05 §4b, approved
   2026-07-27). Hard-edged coloured fields, thick keylines, fixed cells with
   hard separators. Layout written fresh per doc 05 §4e - this is deliberately
   NOT a :root swap of the shared template, which produces a re-skin.
   ========================================================================= */

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

:root {
  --geel: #f3c900;          /* kenteken yellow - the ONLY saturated colour */
  --inkt: #0d0d0d;          /* carbon: rules, seams, dark fields */
  --grond: #f4f4f1;         /* sign white */
  --inkt-zacht: #3a3a38;    /* muted body on light ground - 10.4:1, WCAG AA */
  --geel-zacht: #6b5800;    /* only for small text ON light ground, 6.1:1 */
  --naad: 4px;              /* the hard seam between cells */
  --maat-1: .5rem;
  --maat-2: 1rem;
  --maat-3: 1.75rem;
  --maat-4: 3rem;
  --maat-5: 5rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;          /* 17px - above the 16px floor */
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

/* Geometry lock: industrial-brutalist-ui §5 - 90 degree corners, no exceptions */
* { border-radius: 0 !important; }

/* height:auto is load-bearing: the HTML width/height attributes map to CSS
   width/height, so without this an explicit height wins over aspect-ratio and
   the image renders at full natural height inside a narrow column. That is
   what produced 23-27% crops at 360px. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .9;
  margin: 0;
  text-wrap: balance;
}

/* Capped so the hero H1 holds to 2 lines at every width (taste-skill §4.7).
   5.2rem produced 3 lines at 1440 and at 390; measured, not guessed. */
h1 { font-size: clamp(2.05rem, 4.6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); letter-spacing: -.02em; }

p { margin: 0 0 var(--maat-2); max-width: 62ch; }

/* Metadata register: small, uppercase, tracked - the sign's own micro-type */
.meta {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.35;
}

.container { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 4px solid var(--inkt);
  outline-offset: 2px;
}
.veld--geel :where(a, button, input, textarea):focus-visible,
.veld--inkt :where(a, button, input, textarea):focus-visible { outline-color: var(--geel); }
.veld--inkt :where(a, button):focus-visible { outline-color: var(--geel); }

/* =========================================================================
   demo-banner - doc 05 legal guardrail, mandated exact text
   ========================================================================= */
.demo-banner {
  background: var(--inkt);
  color: var(--grond);
  border-bottom: var(--naad) solid var(--geel);
}
.demo-banner p {
  margin: 0 auto;
  padding: .55rem 1.25rem;
  width: min(100% , 76rem);
  font-size: 1rem;         /* >= 16px, doc 05 §5 */
  line-height: 1.4;
  max-width: none;
}

/* =========================================================================
   site-header - single line at desktop, <= 80px
   ========================================================================= */
.kop {
  background: var(--grond);
  border-bottom: 2px solid var(--inkt);
  position: relative;
  z-index: 5;
}
.kop__binnen {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-2);
}
/* The wordmark IS the business name typeset in the site's own face - doc 05
   forbids using the business's logo. Set as a plate: yellow field, carbon keyline. */
.merk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .3rem .7rem;
  background: var(--geel);
  border: 3px solid var(--inkt);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
}
.kop__nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.kop__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .7rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.kop__nav a:hover { border-bottom-color: var(--geel); }
.kop__nav a[aria-current="page"] { border-bottom-color: var(--inkt); }
.kop__bel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .8rem;
  background: var(--inkt);
  color: var(--geel);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
  text-decoration: none;
}
.kop__bel:hover { background: var(--geel); color: var(--inkt); outline: 3px solid var(--inkt); }
.kop__bel svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
/* Label hidden visually below 640px but kept in the accessibility tree.
   font-size:0 not display:none - doc 05 §5 records display:none stripping the
   accessible name on kapzones. */
@media (max-width: 639px) {
  .kop__bel span { font-size: 0; }
}

/* Phone nav: a full-width row of seamed cells under the header bar. There is
   deliberately NO hamburger and no JS toggle - every link stays in the DOM and
   on screen, so navigation survives with scripting off. */
@media (max-width: 767px) {
  .kop__binnen { flex-wrap: wrap; padding-block: .4rem; min-height: 0; }
  .kop__nav {
    order: 3;
    width: 100%;
    margin-top: .35rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    background: var(--inkt);
    border: 2px solid var(--inkt);
    margin-top: .5rem;
  }
  .kop__nav a {
    background: var(--grond);
    padding: 0 .3rem;
    font-size: .95rem;
    letter-spacing: .01em;
    white-space: nowrap;
    border-bottom: 0;
    border-top: 3px solid transparent;
  }
  .kop__nav a[aria-current="page"] { background: var(--geel); border-top-color: var(--inkt); }
  .kop__nav a:hover { border-top-color: var(--geel); border-bottom-color: transparent; }
}

/* =========================================================================
   FAMILY 1 - kenteken-band (hero)
   One edge-to-edge band, unequal cells, hard seams, no outer margin.
   ========================================================================= */
.band {
  display: grid;
  border-bottom: var(--naad) solid var(--inkt);
}
.band__cel { min-width: 0; }

.band__type {
  background: var(--geel);
  padding: var(--maat-3) var(--maat-3) var(--maat-4);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* anchors top-left, never vertically centred */
  gap: var(--maat-2);
}
.band__type h1 { max-width: 15ch; }
.band__type .band__sub { max-width: 34ch; font-size: 1.15rem; margin: 0; }

.band__foto { position: relative; background: var(--inkt); }
.band__foto img { width: 100%; height: 100%; object-fit: cover; }

.band__actie {
  background: var(--inkt);
  color: var(--grond);
  padding: var(--maat-3);
  display: flex;
  flex-direction: column;
  gap: var(--maat-2);
  justify-content: center;
}
.band__actie .meta { color: var(--geel); }
.band__dagen { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; }
.band__dagen dt { font-weight: 700; font-size: 1rem; }
.band__dagen dd { margin: 0; font-size: 1rem; text-align: right; }
.band__dagen .dicht { color: #b9b9b4; }
.band__tel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-decoration: none;
}
.band__tel:hover { color: var(--geel); }

/* Phone: full-bleed rows. ORDER IS DELIBERATELY type -> actie -> foto so the
   button clears a 630px-tall viewport (a real Android Chrome viewport, not the
   390x844 that hid this class of defect on de-prinsemarij). The phone chrome
   above the hero is ~235px of mandated banner + header + nav, so the type and
   action cells are compressed here rather than inheriting desktop rhythm.
   Recorded in AUDIT.md §3. */
@media (max-width: 899px) {
  .band { grid-template-columns: 1fr; }
  .band__type { order: 1; border-bottom: var(--naad) solid var(--inkt); }
  .band__actie { order: 2; border-bottom: var(--naad) solid var(--inkt); }
  .band__foto { order: 3; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .band__type { padding: var(--maat-2); gap: .55rem; }
  .band__type .band__sub { font-size: 1rem; max-width: 40ch; }

  /* The action cell is laid out as a compact block: one status line, one hours
     line, then telephone and button SIDE BY SIDE. Stacking those two costs
     ~50px and pushed the button under the fold at 360x600 and 390x630.
     Measured, not estimated - see AUDIT.md §3. */
  .band__actie { padding: var(--maat-2); gap: .55rem; }

  /* display:block, not the grid: a grid child is blockified, so `display:inline`
     on dt/dd silently produced two rows instead of one. */
  .band__dagen { display: block; }
  .band__dagen dt, .band__dagen dd { display: inline; font-size: 1rem; text-align: left; }
  .band__dagen dd { margin-left: .4rem; }
  .band__dagen .dicht { display: none; }   /* full timetable is the next section */

  /* Kept visible on the phone. It was hidden here while it read "Geopend maandag
     t/m donderdag" and merely repeated the hours line beneath it; it now names
     the town, which is the one thing a local audience must see in the first
     viewport, and there is fold budget for it. */
  .band__actie > .meta { font-size: 1rem; }
  .band__actie-rij { display: grid; gap: .5rem; }
  .band__actie .btn { margin-top: 0; width: 100%; }
  .band__tel { font-size: 1.6rem; display: flex; align-items: center; min-height: 48px; }
}
@media (min-width: 900px) {
  .band { grid-template-columns: 50fr 26fr 24fr; min-height: 27rem; }
  .band__type { border-right: var(--naad) solid var(--inkt); }
  .band__foto { border-right: var(--naad) solid var(--inkt); }
}

/* =========================================================================
   FAMILY 2 - dagenbord (the four days)
   ========================================================================= */
.dagenbord {
  background: var(--inkt);
  color: var(--grond);
  border-bottom: var(--naad) solid var(--geel);
  padding: var(--maat-4) 0;
}
.dagenbord h2 { color: var(--geel); margin-bottom: var(--maat-3); }
.dagenbord__rij {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--naad);
  background: var(--geel);
  border: var(--naad) solid var(--geel);
}
.dagenbord__cel {
  background: var(--inkt);
  padding: var(--maat-2) var(--maat-2) var(--maat-3);
  min-width: 0;
}
.dagenbord__dag {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  letter-spacing: -.02em;
  line-height: 1;
}
.dagenbord__tijd { display: block; margin-top: .5rem; font-size: 1rem; font-weight: 700; color: var(--geel); }
.dagenbord__cel--dicht { background: var(--geel); }
@media (max-width: 699px) { .dagenbord__cel--dicht { grid-column: 1 / -1; } }
.dagenbord__cel--dicht .dagenbord__dag { color: var(--inkt); }
.dagenbord__cel--dicht .dagenbord__tijd { color: var(--inkt); }
.dagenbord__noot { margin: var(--maat-3) 0 0; color: var(--grond); max-width: 52ch; }
@media (min-width: 700px) { .dagenbord__rij { grid-template-columns: repeat(4, 1fr) 1.15fr; } }

/* =========================================================================
   FAMILY 3 - genummerde-lijst (services as hard-ruled rows, not cards)
   ========================================================================= */
.lijst { border-top: var(--naad) solid var(--inkt); }
.lijst__rij {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 var(--maat-2);
  align-items: start;
  padding: var(--maat-3) 0;
  border-bottom: 2px solid var(--inkt);
}
.veld--geel .lijst__nr, .veld--geel .lijst__tekst { color: var(--inkt); }
.lijst__nr {
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--geel-zacht);
  padding-top: .1rem;
}
.lijst__kop { margin: 0 0 .4rem; grid-column: 2; }
.lijst__tekst { margin: 0; color: var(--inkt-zacht); grid-column: 2; }
.lijst__foto { grid-column: 1 / -1; margin-top: var(--maat-2); }
.lijst__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 780px) {
  .lijst__rij { grid-template-columns: 4rem minmax(0, 22ch) minmax(0, 1fr); align-items: baseline; }
  .lijst__nr { font-size: 2.1rem; }
  .lijst__kop { margin: 0; }
  /* Rows WITHOUT a photograph let their text run the full width instead of
     leaving the photo column as dead field - reviewer finding 1: an owner reads
     an empty right-hand column as images that failed to load. */
  .lijst__rij--met-foto { grid-template-columns: 4rem minmax(0, 22ch) minmax(0, 1fr) 16rem; }
  .lijst__rij:not(.lijst__rij--met-foto) { grid-template-columns: 4rem minmax(0, 22ch) minmax(0, 1fr); }
  .lijst__rij:not(.lijst__rij--met-foto) .lijst__tekst { max-width: 68ch; }
  .lijst__foto { grid-column: auto; margin-top: 0; align-self: stretch; }
  .lijst__foto img { height: 100%; aspect-ratio: auto; min-height: 9rem; }
}

/* =========================================================================
   FAMILY 4 - fotoveld met hoekplaat (photo ground, corner-flush yellow cell)
   ========================================================================= */
.hoekveld { position: relative; background: var(--inkt); border-block: var(--naad) solid var(--inkt); }
.hoekveld > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 21 / 9; min-height: 18rem; }
.hoekveld__plaat {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--geel);
  border-top: var(--naad) solid var(--inkt);
  border-right: var(--naad) solid var(--inkt);
  padding: var(--maat-2) var(--maat-3) var(--maat-2) var(--maat-2);
  max-width: min(92%, 30rem);
}
.hoekveld__plaat h2 { font-size: clamp(1.5rem, 3.2vw, 2.6rem); }
.hoekveld__plaat p { margin: .5rem 0 0; font-size: 1rem; max-width: 34ch; }
@media (min-width: 900px) {
  .hoekveld__plaat { padding-left: max(var(--maat-3), calc((100vw - 76rem) / 2 + var(--maat-2))); }
}

/* =========================================================================
   FAMILY 5 - stappenveld (yellow field, seamed cells)
   ========================================================================= */
.veld--geel { background: var(--geel); color: var(--inkt); padding: var(--maat-4) 0; border-block: var(--naad) solid var(--inkt); }
.veld--inkt { background: var(--inkt); color: var(--grond); padding: var(--maat-4) 0; border-block: var(--naad) solid var(--geel); }
.veld--inkt h2 { color: var(--geel); }

.stappen {
  display: grid;
  gap: var(--naad);
  background: var(--inkt);
  border: var(--naad) solid var(--inkt);
  margin-top: var(--maat-3);
}
/* A yellow cell owns its ink. Inside .veld--inkt the cell inherited the field's
   bone text and rendered at 1.44:1 on over-ons.html - the same cell passed on
   index.html because that field is yellow. Never let a coloured cell inherit
   text colour from the field it happens to sit in. */
.stap { background: var(--geel); color: var(--inkt); padding: var(--maat-3) var(--maat-2); min-width: 0; }
.stap h3, .stap p, .stap .stap__nr { color: var(--inkt); }
.stap__nr { display: block; font-size: 2.4rem; font-weight: 900; line-height: 1; }
.stap h3 { margin: .6rem 0 .4rem; }
.stap p { margin: 0; font-size: 1rem; }
@media (min-width: 760px) { .stappen { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   FAMILY 6 - fotogrond met kolom (photo as ground, carbon column at an edge)
   ========================================================================= */
.grondfoto { position: relative; background: var(--inkt); border-block: var(--naad) solid var(--inkt); display: grid; }
.grondfoto > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; min-height: 20rem; }
.grondfoto__kolom {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: stretch;
  background: var(--inkt);
  border-left: var(--naad) solid var(--geel);
  color: var(--grond);
  padding: var(--maat-3) var(--maat-2);
  width: min(88%, 24rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--maat-1);
}
.grondfoto__kolom h2 { color: var(--geel); }
.grondfoto__kolom p { margin: .6rem 0 0; font-size: 1rem; }
.grondfoto__lijst { list-style: none; margin: var(--maat-2) 0 0; padding: 0; display: grid; gap: .4rem; }
.grondfoto__lijst li { border-top: 2px solid #34342f; padding-top: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }

/* =========================================================================
   FAMILY 7 - ongelijke panelen (reviews)
   ========================================================================= */
.panelen { display: grid; gap: var(--naad); background: var(--inkt); border: var(--naad) solid var(--inkt); margin-top: var(--maat-3); }
.paneel { background: var(--grond); padding: var(--maat-3) var(--maat-2); min-width: 0; }
.paneel blockquote { margin: 0; font-size: 1.15rem; line-height: 1.45; }
.paneel figcaption { margin-top: var(--maat-2); color: var(--inkt-zacht); }
.paneel--cijfer { background: var(--geel); display: flex; flex-direction: column; justify-content: center; }
/* A caption under a numeral, deliberately NOT the uppercase wide-tracked eyebrow
   signature - four of those on one page exceeded taste-skill's ceil(sections/3). */
.paneel__label { margin: .5rem 0 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.paneel__cijfer { font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 900; line-height: .85; letter-spacing: -.04em; }
@media (min-width: 820px) { .panelen { grid-template-columns: 2fr 1fr; } }

/* =========================================================================
   FAMILY 8 - formulierveld
   ========================================================================= */
.formulierveld { display: grid; gap: var(--maat-4); margin-top: var(--maat-3); }
@media (min-width: 900px) { .formulierveld { grid-template-columns: 55fr 45fr; gap: var(--maat-5); align-items: start; } }

.formulier { display: grid; gap: .35rem; }
.formulier label { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; margin-top: var(--maat-2); }
.formulier input, .formulier textarea {
  font: inherit;
  font-size: 1rem;
  padding: .7rem .8rem;
  min-height: 44px;
  border: 3px solid var(--inkt);
  background: var(--grond);
  color: var(--inkt);
  width: 100%;
}
.formulier textarea { min-height: 7.5rem; resize: vertical; }
.formulier input::placeholder, .formulier textarea::placeholder { color: #55554f; opacity: 1; }
.formulier__disclaimer { font-size: 1rem; margin: .5rem 0 0; color: var(--inkt); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 44px;
  padding: .8rem 1.6rem;
  margin-top: var(--maat-2);
  background: var(--inkt);
  color: var(--geel);
  border: 3px solid var(--inkt);
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  transition: transform .12s ease;
}
.btn:hover { background: var(--grond); color: var(--inkt); }
.btn:active { transform: translateY(1px); }
/* On a carbon field the button inverts to yellow - the one permitted inversion */
.veld--inkt .btn, .band__actie .btn { background: var(--geel); color: var(--inkt); border-color: var(--geel); }
.veld--inkt .btn:hover, .band__actie .btn:hover { background: var(--inkt); color: var(--geel); }

.grootbel { display: inline-flex; align-items: center; min-height: 52px; padding: .2rem 0; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; text-decoration: none; line-height: 1; }
.grootbel:hover { text-decoration: underline; text-underline-offset: .12em; }

/* =========================================================================
   FAMILY 9 - wegwijzer (contact / where the door is)
   ========================================================================= */
.wegwijzer { display: grid; gap: var(--naad); background: var(--inkt); border: var(--naad) solid var(--inkt); margin-top: var(--maat-3); }
.wegwijzer__kaart { background: var(--geel); padding: var(--maat-2); display: flex; align-items: center; justify-content: center; }
.wegwijzer__kaart svg { width: 100%; height: auto; max-height: 22rem; }
.wegwijzer__tekst { background: var(--grond); padding: var(--maat-3) var(--maat-2); }
.wegwijzer__tekst dl { margin: 0; display: grid; gap: .9rem; }
.wegwijzer__tekst dt { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1rem; color: var(--inkt-zacht); }
.wegwijzer__tekst dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 700; }
.wegwijzer__tekst dd a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 820px) { .wegwijzer { grid-template-columns: 1fr 1fr; } }

/* ---- generic section shell ---- */
.sectie { padding: var(--maat-4) 0; }
.sectie--strak { padding: var(--maat-3) 0; }
.sectie__intro { max-width: 56ch; margin-top: var(--maat-2); color: var(--inkt-zacht); }
/* On any dark field the muted colour must flip, or it lands at 1.6:1.
   .dagenbord is a dark field that is NOT .veld--inkt - that gap was a real
   WCAG failure caught in the first render. */
.veld--inkt .sectie__intro,
.dagenbord .sectie__intro { color: #d3d3cc; }
.veld--geel .sectie__intro { color: var(--inkt); }

/* ---- paginakop: full-bleed yellow band so the Committed colour strategy
   holds on the quiet pages too, not only the homepage (de-prinsemarij lesson) */
.paginakop { background: var(--geel); border-bottom: var(--naad) solid var(--inkt); padding: var(--maat-4) 0 var(--maat-3); }
.paginakop p { margin: var(--maat-2) 0 0; max-width: 52ch; font-size: 1.05rem; }

/* =========================================================================
   footer
   ========================================================================= */
.voet { background: var(--inkt); color: var(--grond); border-top: var(--naad) solid var(--geel); padding: var(--maat-4) 0 var(--maat-2); }
.voet__grid { display: grid; gap: var(--maat-3); }
@media (min-width: 760px) { .voet__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--maat-4); } }
.voet__naam { font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 var(--maat-1); color: var(--geel); }
.voet h3 { font-size: 1rem; letter-spacing: .12em; color: var(--geel); margin-bottom: .6rem; }
.voet a { color: var(--grond); display: inline-flex; align-items: center; min-height: 44px; }
.voet dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; }
.voet dt { font-weight: 700; }
.voet dd { margin: 0; text-align: right; }
.voet__banner { border-top: 2px solid #34342f; margin-top: var(--maat-3); padding-top: var(--maat-2); }
.voet__banner p { font-size: 1rem; color: #d3d3cc; max-width: none; margin: 0; }

/* =========================================================================
   MOTION - dial 4. Scroll-linked entrance via animation-timeline only, inside
   @supports. There is NO JavaScript-driven reveal anywhere on this site and no
   opacity:0 outside this block, so the doc 05 §5 "content visible without JS"
   check cannot fail by construction. (roj-bouw shipped 8 of 8 blocks hidden.)
   ========================================================================= */
/* The entrance moves the block, it NEVER fades it. opacity is deliberately not
   animated anywhere on this site.

   Two reasons, one of them found the hard way. First, the direction: a road sign
   does not fade in, it is either there or it is not, so a fade was off-brief for
   MOTION 4 in this world. Second, and decisive: with an opacity reveal the
   services list and the three-step field rendered COMPLETELY BLANK in every
   full-page screenshot, because a scroll-driven animation sits at its start
   value when the page has not been scrolled. The 21-check gate stayed green
   through it - the JS-off and stuck-invisible passes both run
   reducedMotion:'reduce', which is exactly the branch where the rule is off.
   Translating a block that is always opaque cannot hide anything from anyone,
   at any scroll position, in any capture. (garage-em-dordrecht, 2026-07-27) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .onthul {
      animation: opkomen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
    @keyframes opkomen {
      from { transform: translateY(10px); }
      to   { transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .demo-banner, .kop__nav, .kop__bel { display: none; }
  body { background: #fff; color: #000; }
}

/* Smallest common Android viewport: 360x600. The mandated legal banner plus the
   header consume ~250px of it before any content, so the hero trims further
   here rather than letting the CTA fall under the fold. */
@media (max-width: 400px) {
  .band__type { padding: .75rem .8rem 1rem; }
  .band__actie { padding: .8rem; }
  .band__type .band__sub { font-size: 1rem; line-height: 1.4; }
  .demo-banner p { padding-inline: .8rem; }
}