@import url('fonts.css');

/* ==========================================================================
   Kraakman Kozijntechniek — "Tramreclame"
   The design system is lifted from the company's own HTM tram livery and
   showroom sign: chrome yellow fields, heavy black condensed capitals,
   bullet-separated material lines.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --livery:      #F4B41A;   /* chrome yellow — the tram field */
  --livery-deep: #D99A06;   /* pressed / hover */
  --inkt:        #141210;   /* warm black — the capitals */
  --staal:       #173F5C;   /* steel blue — the tram skirt */
  --staal-deep:  #0E2C42;
  --beton:       #ECEDEF;   /* cool grey surface (deliberately not cream) */
  --wit:         #FFFFFF;
  --grijs:       #5C666D;
  --lijn:        #D8DBDF;

  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --bleed:   1180px;
  --step:    clamp(3.5rem, 7vw, 6rem);   /* vertical rhythm between sections */
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--wit);
  color: var(--staal);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* `overflow-x: hidden` on body forces overflow-y to auto, which turns body
     into the scroll container and stops window.scrollTo and #anchor links —
     including the skip link — from working. `clip` contains stray horizontal
     overflow without that side effect; the hidden above is the fallback for
     browsers that predate it. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--livery); color: var(--inkt); }

/* --- Accessibility -------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--inkt);
  outline-offset: 3px;
}

.on-dark :focus-visible,
.masthead__cta:focus-visible { outline-color: var(--livery); }

/* <main> only takes focus so the skip link can land on it; it should not draw
   a focus ring the way an interactive element does. */
main:focus { outline: none; }

.livery :focus-visible { outline-color: var(--inkt); }

.skip {
  /* Fixed, not absolute: an absolutely positioned skip link sits at the top of
     the document, so it is off-screen for anyone who tabs to it after
     scrolling. */
  position: fixed;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--inkt);
  color: var(--livery);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip:focus { transform: translateY(0); }

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

/* --- Type roles ----------------------------------------------------------- */

.u-display {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 80%;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--inkt);
}

.u-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grijs);
}

.u-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Layout --------------------------------------------------------------- */

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

.section { padding-block: var(--step); }
.section--tint { background: var(--beton); }
.section--dark { background: var(--staal); color: #DCE5EC; }

.section--dark .u-display { color: var(--wit); }
.section--dark .u-label { color: var(--livery); }

/* A short yellow lead-in bar above a heading — the disciplined echo of the
   livery band, used where a full band would be too loud. */
.rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--livery);
  margin-bottom: 1.25rem;
}

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

.masthead__inner {
  max-width: var(--bleed);
  margin-inline: auto;
  padding: 0.875rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 74%;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inkt);
  line-height: 1;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.wordmark span { display: block; font-size: 0.62em; font-stretch: 90%; font-weight: 700; color: var(--grijs); letter-spacing: 0.06em; }

.masthead__spacer { flex: 1 1 auto; }

.masthead__tel {
  font-family: var(--mono);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--staal);
}
.masthead__tel:hover { text-decoration: underline; }

.masthead__cta {
  display: inline-block;
  background: var(--livery);
  color: var(--inkt);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.7rem 1.1rem;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.masthead__cta:hover { background: var(--livery-deep); }

/* Navigation. Uses <details> so it works with JavaScript disabled. */
.nav > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--inkt);
  color: var(--inkt);
  user-select: none;
}
.nav > summary::-webkit-details-marker { display: none; }
.nav[open] > summary { background: var(--inkt); color: var(--livery); }

.nav__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

.nav__list a {
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--staal);
  padding: 0.35rem 0;
  display: inline-block;
  border-bottom: 3px solid transparent;
}
.nav__list a:hover { border-bottom-color: var(--livery); }
.nav__list a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--livery); }

/* .nav__sub sits on the anchor itself, so it has to out-specify `.nav__list a`. */
.nav__list a.nav__sub { font-weight: 400; font-size: 0.875rem; color: var(--grijs); }

@media (max-width: 63.99em) {
  .nav { order: 3; }
  .nav__list {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--inkt);
    padding: 0.5rem var(--gutter) 1.5rem;
    border-bottom: 4px solid var(--livery);
  }
  .nav__list a { color: #E9EBED; display: block; padding: 0.6rem 0; border-bottom: 1px solid #2E2B27; }
  .nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--livery); border-bottom-color: #2E2B27; }
  .nav__list a.nav__sub { padding-left: 1.25rem; color: #B9BEC2; }
}

/* Between the desktop breakpoint and roughly 1360px, six menu items plus the
   phone number plus the offerte button do not fit on one line. The button is
   the primary action, so the number steps aside until there is room. */
@media (max-width: 84.99em) {
  .masthead__tel { display: none; }
}

/* Small screens: the masthead must stay on one line at 360px, so the tagline
   goes and everything tightens up. */
@media (max-width: 47.99em) {
  .masthead__inner { gap: 0.625rem; padding-inline: 1rem; }
  /* Wrapping the wordmark to two lines is what buys room for both the Menu
     button and the offerte button at 360px. */
  .wordmark { font-size: 0.75rem; white-space: normal; max-width: 8em; line-height: 1; }
  .wordmark span { display: none; }
  .masthead__cta { font-size: 0.75rem; padding: 0.55rem 0.7rem; }
  .nav > summary { padding: 0.45rem 0.6rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
  .wordmark, .masthead__cta, .nav { flex: 0 0 auto; }
}

@media (min-width: 64em) {
  .nav > summary { display: none; }
  /* Six top-level links fit one row. The product pages stay in the mobile
     menu, the footer and on /producten, so nothing becomes unreachable. */
  .nav__list a.nav__sub { display: none; }
  /* Without this the flexible spacer claims the free space first and squeezes
     the menu onto a second row. */
  .nav, .wordmark, .masthead__cta { flex: 0 0 auto; }
  .nav__list { flex-wrap: nowrap; }
  /* A closed <details> hides its content through the UA shadow slot, which no
     amount of `display` on the child can override. ::details-content is the
     supported way to reveal it. Browsers without it fall back to the Menu
     button, which still works — degraded, never broken. */
  .nav::details-content { content-visibility: visible; block-size: auto; overflow: visible; }
}

/* --- The livery band — the signature ------------------------------------- */

.livery {
  background: var(--livery);
  color: var(--inkt);
  overflow: hidden;
  border-block: 3px solid var(--inkt);
}

.livery__track { display: flex; width: max-content; }

.livery__list {
  display: flex;
  flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 74%;
  text-transform: uppercase;
  font-size: clamp(1.0625rem, 2.3vw, 1.5rem);
  line-height: 1;
  padding-block: 0.6em;
}

.livery__list li { white-space: nowrap; padding-inline-end: 0.85em; }
.livery__list li + li::before { content: '•'; padding-inline-end: 0.85em; color: var(--inkt); }

/* Drifting variant — only ever the hero band. Reads as the side of a tram
   passing. Every other band on the site is static. */
.livery--drift .livery__list li::before { content: '•'; padding-inline-end: 0.85em; }
.livery--drift .livery__track { animation: drift 48s linear infinite; }
.livery--drift:hover .livery__track,
.livery--drift:focus-within .livery__track { animation-play-state: paused; }

@keyframes drift { to { transform: translateX(-50%); } }

/* Static bands sit inside the content measure rather than running full bleed. */
.livery:not(.livery--drift) .livery__track {
  width: auto;
  max-width: var(--bleed);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* flex: 1 1 auto, not the 0 0 auto the drifting ribbon needs — otherwise the
   list keeps its max-content width and runs off the side of narrow screens. */
.livery:not(.livery--drift) .livery__list { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.15em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .livery--drift .livery__track { animation: none; width: auto; max-width: var(--bleed); margin-inline: auto; padding-inline: var(--gutter); }
  .livery--drift .livery__list { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.15em; }
  .livery--drift .livery__list[aria-hidden="true"] { display: none; }
  .livery--drift .livery__list li:first-child::before { content: none; padding: 0; }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.95rem 1.5rem;
  border: 3px solid var(--inkt);
  background: var(--livery);
  color: var(--inkt);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--inkt); color: var(--livery); }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--inkt); color: var(--wit); }

.on-dark .btn--ghost { border-color: var(--wit); color: var(--wit); }
.on-dark .btn--ghost:hover { background: var(--wit); color: var(--staal); }

.btn__arrow { font-family: var(--body); font-weight: 400; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* --- Hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); }

.hero__eyebrow { margin-bottom: 1.5rem; }

.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 76%;
  text-transform: uppercase;
  color: var(--inkt);
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.012em;
  margin-bottom: 1.5rem;
  max-width: 15ch;
}
/* The livery, pulled into the sentence itself. */
.hero h1 em {
  font-style: normal;
  background: var(--livery);
  padding: 0 0.12em;
  margin-left: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__lead {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  line-height: 1.55;
  max-width: 54ch;
  margin-bottom: 2rem;
}

/* --- Spec strip (mono facts under the hero) ------------------------------- */

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  margin-top: 3rem;
}
.specs > div { background: var(--wit); padding: 1.125rem 1.25rem; }
.specs dt { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grijs); margin-bottom: 0.4rem; }
.specs dd { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 84%; text-transform: uppercase; font-size: 1.0625rem; color: var(--inkt); line-height: 1.15; }

.section--tint .specs > div { background: var(--wit); }

.section--dark .specs { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.2); }
.section--dark .specs > div { background: var(--staal-deep); }
.section--dark .specs dt { color: var(--livery); }
.section--dark .specs dd { color: var(--wit); }
.section--dark .specs dd .tbd { background: var(--livery); color: var(--inkt); }

/* --- Prose ---------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 2rem; }
.prose p { line-height: 1.7; }
.prose strong { font-weight: 600; color: var(--inkt); }
.prose a { color: var(--staal); text-decoration-color: var(--livery); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.prose a:hover { background: var(--livery); text-decoration-color: transparent; color: var(--inkt); }

.prose ul { margin-top: 1.125rem; }
.prose ul li { position: relative; padding-left: 1.5rem; margin-top: 0.5rem; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 10px; height: 4px; background: var(--livery); }

h2.title {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 80%;
  text-transform: uppercase;
  color: var(--inkt);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 0.98;
  letter-spacing: -0.008em;
}

h3.subtitle {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 86%;
  text-transform: uppercase;
  color: var(--inkt);
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.section--dark .prose { color: #DCE5EC; }
.section--dark h2.title, .section--dark h3.subtitle { color: var(--wit); }
.section--dark .prose strong { color: var(--wit); }
.section--dark .prose a { color: var(--wit); }

/* --- Intro block (heading + lead side by side) ---------------------------- */

.intro { display: grid; gap: 1.5rem 3rem; margin-bottom: 3rem; }
@media (min-width: 52em) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}
.intro__lead { font-size: 1.125rem; line-height: 1.65; }

/* --- Card grid ------------------------------------------------------------ */

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--lijn);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--inkt); }
.card:hover .card__title { background: var(--livery); }

.card__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--beton); }
.card__body { padding: 1.125rem 1.25rem 1.375rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card__title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 84%;
  text-transform: uppercase;
  font-size: 1.0625rem;
  color: var(--inkt);
  align-self: flex-start;
  box-shadow: 0 0 0 3px transparent;
  transition: background 0.15s ease;
}
.card__text { font-size: 0.9375rem; color: var(--grijs); line-height: 1.55; }
.card__more { margin-top: auto; padding-top: 0.5rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--staal); }

/* --- Spec table (producten) ----------------------------------------------- */

.spectable { width: 100%; border-collapse: collapse; text-align: left; }
.spectable th, .spectable td { padding: 0.9rem 1rem; vertical-align: top; border-bottom: 1px solid var(--lijn); }
.spectable th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkt);
  white-space: nowrap;
  width: 1%;
  background: var(--beton);
}
.spectable td { font-size: 0.9375rem; }
.spectable tr:last-child th, .spectable tr:last-child td { border-bottom: 0; }
.spectable-scroll { overflow-x: auto; border: 1px solid var(--lijn); }

/* --- Gallery -------------------------------------------------------------- */

.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gallery--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.shot { margin: 0; }
.shot a { display: block; border: 1px solid var(--lijn); background: var(--beton); text-decoration: none; }
.shot a:hover { border-color: var(--inkt); }
.shot img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.gallery--wide .shot img { aspect-ratio: 4 / 3; }
.shot figcaption { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grijs); padding-top: 0.5rem; }

/* Full-width measured drawings — these are the real thing, let them breathe. */
.plate { margin: 0 0 2rem; }
.plate a { display: block; border: 1px solid var(--lijn); }
.plate a:hover { border-color: var(--inkt); }
.plate img { width: 100%; }
.plate figcaption { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grijs); padding-top: 0.5rem; }

/* --- Media block (image beside text) -------------------------------------- */

.media { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52em) {
  .media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
  .media--flip .media__fig { order: 2; }
}
.media__fig { margin: 0; }
/* No `width: 100%` here on purpose. Much of the photo library is small — the
   Politiekeurmerk logo is 234px wide — and stretching those past their natural
   size just makes them blurry. Large photos still fill the column via the
   max-width in the reset. */
.media__fig img { max-width: 100%; border: 1px solid var(--lijn); }
.media__fig figcaption { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grijs); padding-top: 0.6rem; }
.section--dark .media__fig figcaption { color: #9FB4C4; }
.section--dark .media__fig img { border-color: rgba(255,255,255,0.18); }

/* --- Callout -------------------------------------------------------------- */

.callout {
  border: 3px solid var(--inkt);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--wit);
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 46em) {
  .callout { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
}
.callout h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
.callout p { margin-top: 0.5rem; color: var(--grijs); }

/* --- Contact details ------------------------------------------------------ */

.details { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); }
.details > div { background: var(--wit); padding: 1.125rem 1.25rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
.details dt { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grijs); flex: 0 0 8rem; }
.details dd { margin: 0; font-size: 1rem; color: var(--inkt); }
.details dd a { text-decoration-color: var(--livery); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* A phone number that has not been supplied yet. */
.tbd {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--livery);
  color: var(--inkt);
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

/* --- Form ----------------------------------------------------------------- */

.form { display: grid; gap: 1.5rem; max-width: 44rem; }

.field { display: grid; gap: 0.4rem; }
.field > label,
.fieldset > legend {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt);
}
.field .req { color: var(--livery-deep); }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 2px solid var(--staal);
  background: var(--wit);
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  border-radius: 0;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--inkt) 50%), linear-gradient(135deg, var(--inkt) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--inkt);
  box-shadow: inset 0 -4px 0 0 var(--livery);
}

.field__hint { font-size: 0.8125rem; color: var(--grijs); }

.field--bad input,
.field--bad select,
.field--bad textarea { border-color: #B3261E; background: #FDF4F3; }
.field__error { font-size: 0.8125rem; color: #B3261E; font-weight: 600; }

.row { display: grid; gap: 1.5rem; }
@media (min-width: 40em) {
  .row--2 { grid-template-columns: 1fr 1fr; }
  .row--adres { grid-template-columns: 2fr 1fr; }
  .row--plaats { grid-template-columns: 1fr 2fr; }
}

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.fieldset > legend { padding: 0; margin-bottom: 0.2rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.check { position: relative; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check span {
  display: inline-block;
  border: 2px solid var(--staal);
  padding: 0.5rem 0.9rem;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.check:hover span { border-color: var(--inkt); }
.check input:checked + span { background: var(--livery); border-color: var(--inkt); color: var(--inkt); font-weight: 600; }
.check input:focus-visible + span { outline: 3px solid var(--inkt); outline-offset: 3px; }

/* Honeypot — hidden from people, reachable by naive bots. */
.trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.alert {
  border: 3px solid #B3261E;
  background: #FDF4F3;
  padding: 1rem 1.25rem;
  color: #7A1911;
}
.alert h2 { font-family: var(--display); font-weight: 800; font-stretch: 84%; text-transform: uppercase; font-size: 1.0625rem; color: #7A1911; }
.alert ul { margin-top: 0.5rem; }
.alert li { margin-top: 0.25rem; font-size: 0.9375rem; }
.alert a { color: #7A1911; }

.notice {
  border-left: 6px solid var(--livery);
  background: var(--beton);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
}

/* --- Footer --------------------------------------------------------------- */

.footer { background: var(--staal); color: #C6D5E1; padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }

.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 46em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--livery);
  margin-bottom: 0.875rem;
}
.footer a { color: #DCE7EF; text-decoration: none; }
.footer a:hover { color: var(--livery); text-decoration: underline; }
.footer li { margin-bottom: 0.4rem; font-size: 0.9375rem; }
.footer p { font-size: 0.9375rem; }

.footer__mark {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 74%;
  text-transform: uppercase;
  color: var(--wit);
  font-size: 1.375rem;
  line-height: 0.95;
  margin-bottom: 0.75rem;
}

.footer__base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #9FB4C4;
}

/* --- Breadcrumb ----------------------------------------------------------- */

.crumbs { padding-block: 1rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grijs); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumbs li + li::before { content: '/'; padding-right: 0.5rem; color: var(--lijn); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* --- Utilities ------------------------------------------------------------ */

.stack > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.5rem; }
.measure { max-width: 68ch; }
.center { text-align: center; }