/* Conelec: voorbeeldsite. Plat, scherp, technisch: het eendraadschema als beeldtaal.
   Tokens eerst; alles hieronder verwijst alleen naar tokens. */

@font-face { font-family: "Plex"; src: url("../fonts/plex-sans-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Plex Condensed"; src: url("../fonts/plex-sans-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Condensed"; src: url("../fonts/plex-sans-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #f3f5f9;          /* papier van een technische tekening */
  --surface: #e3e8f0;     /* één toonstap: velden, open kring */
  --surface-2: #d6dde9;
  --ink: #0e1a33;         /* tekst */
  --muted: #47526a;       /* secundaire noten */
  --blue: #1e40af;        /* schemalijn, velden */
  --blue-ink: #ffffff;
  --blue-soft: #c9d4ee;   /* tekst op blauw, secundair */
  --signal: #ffc20e;      /* actie: signaalgeel van de gevaarsdriehoek */
  --signal-ink: #0e1a33;
  --signal-hover: #ffd34d;
  --night: #0e1a33;       /* footer */
  --night-ink: #f3f5f9;
  --wire-brown: #7b4a24;
  --wire-blue: #2f6fd6;
  --wire-green: #2f9e4a;
  --wire-yellow: #f2c500;

  --font-display: "Plex Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: 1rem;
  --step-body: clamp(1.0625rem, 1.01rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --step-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --step-head: clamp(2.125rem, 1.4rem + 3.1vw, 4.25rem);
  --step-display: clamp(2.75rem, 1.2rem + 6.4vw, 6.5rem);

  --margin: clamp(1rem, 3vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 12vw, 12rem);
  --step-ui: 1.25rem;
  --header-h: 4rem;
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
::selection { background: var(--signal); color: var(--signal-ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-blue :focus-visible, .site-footer :focus-visible { outline-color: var(--signal); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; hyphens: manual; overflow-wrap: normal; }
.display { font-size: var(--step-display); line-height: 0.96; letter-spacing: -0.025em; }
.head { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.02em; }
.h3 { font-size: var(--step-h3); line-height: 1.15; letter-spacing: -0.01em; }
.lead { font-size: var(--step-lead); line-height: 1.45; max-width: 36ch; }
.small { font-size: var(--step-small); line-height: 1.5; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
h2 + p, h2 + .lead, .lead + p { margin-top: 1rem; }
strong { font-weight: 600; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); max-width: 96rem; margin-inline: auto; }
.section { padding-block: calc(var(--section) / 2); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 100; background: var(--signal); color: var(--signal-ink); padding: 0.75rem 1rem; font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.5rem; }

/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3.25rem; padding: 0 1.4rem; border-radius: var(--radius); font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button svg { width: 1.25rem; height: 1.25rem; flex: none; }
.button--signal { background: var(--signal); color: var(--signal-ink); }
.button--ink { background: var(--ink); color: var(--bg); }
.button--blue { background: var(--blue); color: var(--blue-ink); }
.button--plain { background: var(--surface); color: var(--ink); }
.on-blue .button--plain { background: var(--bg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .button--signal:hover { background: var(--signal-hover); }
  .button--ink:hover, .button--blue:hover { background: #22305a; }
  .button--plain:hover { background: var(--surface-2); }
  .button:hover svg.arrow { transform: translateX(3px); }
}
.button svg.arrow { transition: transform var(--t-hover) var(--ease-out); }
.link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--blue); transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--blue); } }
.on-blue .link { text-decoration-color: var(--signal); }
@media (hover: hover) and (pointer: fine) { .on-blue .link:hover { color: var(--signal); } }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: box-shadow var(--t-hover) ease; }
.site-header.is-scrolled { /* taste-skill-ignore: sticky bar floats */ box-shadow: 0 1px 0 rgba(14, 26, 51, 0.08), 0 6px 18px rgba(14, 26, 51, 0.06); }
.site-header__bar { display: flex; align-items: center; gap: 0.5rem; min-height: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); margin-right: auto; min-height: 44px; }
.wordmark svg { width: 1.9rem; height: 1.9rem; flex: none; }
.wordmark span { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.nav { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem; text-decoration: none; font-weight: 600; font-size: 1rem; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.4em; text-decoration-color: var(--signal); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--blue); } }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.875rem; height: 2.875rem; background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn svg { width: 1.35rem; height: 1.35rem; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--surface-2); } }
.header-actions .button { min-height: 2.875rem; padding: 0 1rem; font-size: 1rem; }
.header-mail-text { display: none; }
.menu-btn { display: none; }
.js .menu-btn { display: inline-flex; }
.mobile-nav { display: none; }
.mobile-nav.is-open { /* taste-skill-ignore: open menu floats */ display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); box-shadow: 0 18px 30px rgba(14, 26, 51, 0.14); padding: 0.5rem var(--margin) 1.25rem; }
.mobile-nav a { display: flex; align-items: center; min-height: 3.25rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-h3); text-decoration: none; }
.mobile-nav a + a { margin-top: 0.15rem; }
@media (min-width: 62em) {
  .nav { display: flex; gap: 0.25rem; margin-right: 1rem; }
  .js .menu-btn { display: none; }
  .header-mail-text { display: inline; }
  .header-actions .icon-btn.mail { width: auto; padding: 0 1rem; gap: 0.5rem; font-weight: 600; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(1.25rem, 4vw, 3.5rem); }
.hero__grid { display: grid; gap: 1.75rem; }
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: 1.1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 1.5rem; font-size: var(--step-small); color: var(--muted); }
.hero__facts li { display: flex; align-items: center; gap: 0.5rem; }
.hero__facts svg { width: 1.15rem; height: 1.15rem; color: var(--blue); flex: none; }
.hero__media { margin-inline: calc(var(--margin) * -1); }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 50%; }
.caption { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.7rem; padding-inline: var(--margin); font-size: var(--step-small); color: var(--muted); }
.wires { display: inline-flex; gap: 3px; flex: none; }
.wires i { display: block; width: 0.5rem; height: 1.15rem; }
.wires i:nth-child(1) { background: var(--wire-brown); }
.wires i:nth-child(2) { background: var(--wire-blue); }
.wires i:nth-child(3) { background: var(--wire-green); border-left: 0.25rem solid var(--wire-yellow); }
@media (max-width: 26.24em) {
  .hero__actions .button { flex: 1 1 100%; }
}
@media (min-width: 48em) {
  .hero__media { margin-inline: 0; }
  .caption { padding-inline: 0; }
}
@media (min-width: 62em) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .hero__text { grid-column: 1 / span 7; padding-bottom: 2rem; }
  .hero h1 { max-width: none; }
  .hero__media { grid-column: 8 / span 5; }
  .hero__media img { aspect-ratio: 5 / 6; max-height: calc(100vh - var(--header-h) - 7rem); min-height: 30rem; }
}

/* ---------- section heads ---------- */
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head p { max-width: 52ch; }
@media (min-width: 62em) {
  .section-head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .section-head--split h2 { grid-column: 1 / span 7; }
  .section-head--split p { grid-column: 8 / span 5; }
}

/* ---------- kringen (het levende schema) ---------- */
.schema-layout { display: grid; gap: 1.5rem; }
.schema { background: var(--bg); }
.schema svg { width: 100%; height: auto; overflow: visible; }
.schema .bus, .schema .drop { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: square; }
.schema .box { fill: var(--bg); stroke: var(--ink); stroke-width: 5; transition: fill var(--t-hover) ease; }
.schema .box-text { font-family: var(--font-display); font-weight: 700; font-size: 22px; fill: var(--ink); }
.schema .flow { fill: none; stroke: var(--signal); stroke-width: 12; stroke-linecap: butt; }
.schema .branch use { color: var(--blue); --sym-fill: var(--bg); transition: color var(--t-hover) ease; }
.schema .branch.is-on use { color: var(--ink); --sym-fill: var(--signal); }
.schema .branch.is-on .drop { stroke: var(--ink); }
.schema .branch.is-on .box { fill: var(--signal); }
.schema .halo { fill: var(--signal); opacity: 0; transition: opacity var(--t-hover) ease; }
.schema .branch.is-on .halo { opacity: 0.35; }
.schema .branch { cursor: pointer; }
.schema .ground { stroke: var(--muted); stroke-width: 3; }
.schema__note { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); }

.kringen { display: grid; gap: 0.5rem; }
.kring { background: var(--bg); }
.kring summary { list-style: none; display: flex; align-items: center; gap: 0.9rem; min-height: 3.75rem; padding: 0.55rem 0.9rem 0.55rem 0.6rem; cursor: pointer; background: var(--surface); transition: background-color var(--t-hover) ease; }
.kring summary::-webkit-details-marker { display: none; }
.kring summary .k-icon { width: 2.5rem; height: 2.5rem; flex: none; color: var(--blue); --sym-fill: var(--surface); }
.kring summary .k-name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-ui); line-height: 1.15; }
.kring summary .k-chev { margin-left: auto; width: 1.4rem; height: 1.4rem; flex: none; transition: transform var(--t-hover) var(--ease-out); }
.kring[open] summary { background: var(--blue); color: var(--blue-ink); }
.kring[open] summary .k-icon { color: var(--blue-ink); }
.kring[open] summary .k-icon { --sym-fill: var(--signal); }
.kring[open] summary .k-chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .kring:not([open]) summary:hover { background: var(--surface-2); } }
.kring__body { padding: 1.1rem 0.9rem 1.5rem; background: var(--surface); }
.kring__body ul { margin-top: 0.8rem; padding-left: 1.2rem; }
.kring__body li + li { margin-top: 0.3rem; }
.kring__body li::marker { color: var(--blue); }
.kring__tip { margin-top: 1rem; padding-left: 0.9rem; border-left: 4px solid var(--signal); }
@media (min-width: 62em) {
  .schema-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .schema { grid-column: 1 / span 7; position: sticky; top: calc(var(--header-h) + 2rem); }
  .kringen { grid-column: 8 / span 5; }
}

/* ---------- klussen ---------- */
.jobs { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.job { display: grid; gap: 1.1rem; }
.job h3 { margin-top: 0.2rem; }
.job p { margin-top: 0.1rem; }
.job__media img, .job__media video { width: 100%; object-fit: cover; }
.job__media video { aspect-ratio: 16 / 9; }
.job--wide .job__media img { aspect-ratio: 3 / 2; }
.job--tall .job__media img { aspect-ratio: 4 / 5; }
.pair { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 48em) {
  .job--feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .job--feature .job__media { grid-column: 1 / span 7; }
  .job--feature .job__text { grid-column: 8 / span 5; }
  .pair { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .pair .job--tall { grid-column: 1 / span 5; }
  .pair .job--wide { grid-column: 7 / span 6; margin-top: clamp(3rem, 9vw, 9rem); }
}

/* ---------- keuring (blauw veld) ---------- */
.on-blue { background: var(--blue); color: var(--blue-ink); --shutter: var(--blue); }
.on-blue .muted { color: var(--blue-soft); }
.keuring { display: grid; gap: 2rem; }
.keuring__list { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.keuring__list li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.9rem; align-items: start; }
.keuring__list svg { width: 2.75rem; height: 2.75rem; color: var(--signal); }
.keuring__list strong { display: block; font-size: var(--step-ui); }
.keuring__list span { color: var(--blue-soft); }
.keuring__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.keuring__media figcaption { margin-top: 0.7rem; font-size: var(--step-small); color: var(--blue-soft); }
.keuring__sale { margin-top: 2rem; padding: 1.25rem 1.25rem 1.35rem; background: var(--ink); color: var(--bg); }
@media (min-width: 48em) and (max-width: 61.99em) {
  .keuring { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .keuring__text { grid-column: 1 / span 7; }
  .keuring__media { grid-column: 8 / span 5; padding-top: 5rem; }
}
.keuring__sale h3 { color: var(--signal); }
.keuring__sale p { margin-top: 0.5rem; }
@media (min-width: 62em) {
  .keuring { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .keuring__text { grid-column: 1 / span 7; }
  .keuring__media { grid-column: 9 / span 4; }
}

/* ---------- band met automaten ---------- */
.band img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
@media (min-width: 62em) { .band img { aspect-ratio: 21 / 6; } }

/* ---------- werkwijze ---------- */
.steps { display: grid; gap: 1.75rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start; counter-increment: step; }
.steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; background: var(--signal); color: var(--signal-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--step-h3); line-height: 1; }
.steps h3 { margin-bottom: 0.35rem; }
@media (min-width: 62em) {
  .werkwijze { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .werkwijze .section-head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
  .werkwijze .steps { grid-column: 7 / span 6; gap: 2.75rem; }
}

/* ---------- over de naam ---------- */
.about { display: grid; gap: 2rem; }
.about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about__media figcaption { margin-top: 0.7rem; font-size: var(--step-small); color: var(--muted); }
.facts { display: grid; gap: 0.1rem; margin-top: 1.75rem; }
.facts div { display: grid; grid-template-columns: minmax(7.5rem, 34%) 1fr; gap: 1rem; padding: 0.7rem 0; }
.facts div:nth-child(odd) { background: var(--surface); margin-inline: -0.75rem; padding-inline: 0.75rem; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; }
@media (min-width: 62em) {
  .about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .about__text { grid-column: 1 / span 6; }
  .about__media { grid-column: 8 / span 5; }
}

/* ---------- werkgebied ---------- */
.area { display: grid; gap: 2rem; }
.area__map { margin-inline: calc(var(--margin) * -1); }
.area__map img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 40% 70%; }
.area__map figcaption { margin-top: 0.7rem; padding-inline: var(--margin); font-size: var(--step-small); color: var(--muted); }
.towns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 1.5rem; margin-top: 1.5rem; }
.towns li { display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; font-weight: 600; }
.towns li::before { content: ""; width: 0.75rem; height: 0.75rem; flex: none; background: var(--blue); }
.towns li.is-home::before { background: var(--signal); outline: 3px solid var(--ink); }
@media (min-width: 48em) { .area__map { margin-inline: 0; } .area__map figcaption { padding-inline: 0; } .towns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62em) {
  .area { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .area__text { grid-column: 1 / span 5; }
  .area__map { grid-column: 6 / span 7; }
  .area__map img { aspect-ratio: 8 / 7; }
}

/* ---------- vragen ---------- */
.faq { display: grid; gap: 2rem; }
.faq__list { display: grid; gap: 0.5rem; }
.qa summary { list-style: none; display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0.85rem 1rem; background: var(--surface); cursor: pointer; font-weight: 600; font-size: var(--step-body); line-height: 1.35; transition: background-color var(--t-hover) ease; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { margin-left: auto; width: 1.4rem; height: 1.4rem; flex: none; transition: transform var(--t-hover) var(--ease-out); }
.qa[open] summary svg { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { background: var(--surface-2); } }
.qa__a { padding: 1rem 1rem 1.4rem; background: var(--surface); }
@media (min-width: 62em) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .faq .section-head { grid-column: 1 / span 4; align-self: start; }
  .faq__list { grid-column: 6 / span 7; }
}

/* ---------- afsluiter ---------- */
.closer { background: var(--signal); color: var(--signal-ink); }
.closer__inner { display: grid; gap: 1.5rem; padding-block: clamp(3.5rem, 8vw, 7rem); }
.closer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.closer .button--plain { background: var(--bg); }
@media (min-width: 48em) {
  .closer__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .closer__inner > div:first-child { grid-column: 1 / span 7; }
  .closer__actions { grid-column: 8 / span 5; justify-content: flex-end; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--night-ink); padding-top: clamp(5rem, 12vw, 9rem); padding-bottom: 2rem; }
.footer__name { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(4.5rem, 21vw, 21rem); line-height: 0.9; letter-spacing: -0.04em; padding-top: 0.08em; }
.footer__name svg { width: 0.72em; height: 0.72em; flex: none; }
.footer__grid { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vw, 4rem); }
.footer__grid h2 { font-size: var(--step-ui); margin-bottom: 0.6rem; color: var(--signal); }
.footer__grid a { text-decoration-color: rgba(243, 245, 249, 0.4); text-underline-offset: 0.2em; }
.footer__grid li { min-height: 2rem; }
.footer__grid li a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
.footer__credits { margin-top: 2.5rem; font-size: 1rem; color: #b4bdd0; max-width: 68ch; }
.footer__credits a { color: inherit; }
@media (min-width: 48em) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- binnenpagina's ---------- */
.page-hero { padding-top: clamp(1.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.page-hero .lead { margin-top: 1rem; }
.page-hero__grid { display: grid; gap: 1.5rem; }
@media (min-width: 62em) {
  .page-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .page-hero__grid > :first-child { grid-column: 1 / span 7; }
  .page-hero__grid > :last-child { grid-column: 8 / span 5; }
}
.service { display: grid; gap: 1.5rem; }
.service + .service { margin-top: clamp(4rem, 9vw, 9rem); }
.service__icon { width: 3.5rem; height: 3.5rem; color: var(--blue); --sym-fill: var(--signal); }
.service h2 { margin-top: 0.75rem; }
.service ul { margin-top: 1rem; padding-left: 1.2rem; list-style: disc; }
.service li + li { margin-top: 0.35rem; }
.service li::marker { color: var(--blue); }
.service__media img, .service__media video { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.service__media figcaption { margin-top: 0.7rem; font-size: var(--step-small); color: var(--muted); }
.service__tip { margin-top: 1.25rem; padding: 1rem 1.1rem; background: var(--surface); }
@media (min-width: 62em) {
  .service { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .service__text { grid-column: 1 / span 6; }
  .service__media { grid-column: 8 / span 5; }
  .service--flip .service__text { grid-column: 7 / span 6; grid-row: 1; }
  .service--flip .service__media { grid-column: 1 / span 5; grid-row: 1; }
}
.service--plain .service__text { grid-column: 1 / span 7; }
.extras { display: grid; gap: 2rem 3rem; margin-top: 1.5rem; }
.extra { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.extra svg { width: 3rem; height: 3rem; color: var(--signal); --sym-fill: var(--blue); }
.on-blue .extra p { color: var(--blue-soft); }
.extra h3 { font-size: var(--step-ui); }
.extra p { margin-top: 0.3rem; }
@media (min-width: 48em) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- formulier ---------- */
.contact { display: grid; gap: 3rem; }
.form { display: grid; gap: 1.25rem; }
.form .row { display: grid; gap: 1.25rem; }
.field label, .field .label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.field .hint { display: block; font-weight: 400; font-size: var(--step-small); color: var(--muted); margin-top: 0.1rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.25rem; padding: 0.75rem 0.9rem; background: #ffffff; border: 2px solid var(--surface-2); border-radius: var(--radius); font-size: 1rem; transition: border-color var(--t-hover) ease; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid var(--blue); outline-offset: 2px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1a33' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1.2rem; padding-right: 2.5rem; }
.req { color: var(--blue); }
.form__note { font-size: var(--step-small); color: var(--muted); }
.form__done { padding: 1.4rem; background: var(--blue); color: var(--blue-ink); }
.form__done h2 { font-size: var(--step-h3); }
.form__done p { margin-top: 0.5rem; }
.form__done a { color: var(--signal); }
.contact__aside { display: grid; gap: 2rem; align-content: start; }
.contact__card h2 { font-size: var(--step-h3); margin-bottom: 0.6rem; }
.contact__card dl div { padding: 0.25rem 0; }
.contact__card dt { color: var(--muted); font-size: var(--step-small); }
.contact__card dd { font-weight: 600; }
.contact__card dd a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.prep li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; align-items: start; }
.prep li + li { margin-top: 0.9rem; }
.prep svg { width: 2.25rem; height: 2.25rem; color: var(--blue); }
@media (min-width: 40em) { .form .row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .contact__form { grid-column: 1 / span 7; }
  .contact__aside { grid-column: 9 / span 4; }
}

/* ---------- motion (inhoud blijft zichtbaar zonder JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; position: relative; }
  .js .shutter[data-reveal]::after { content: ""; position: absolute; inset: -1px; background: var(--shutter, var(--bg)); transform-origin: 50% 0; transition: transform 1100ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 80ms); pointer-events: none; }
  .js .shutter[data-reveal].is-in::after { transform: scaleY(0); }
  .js .shutter[data-reveal] img { transform: scale(1.08); transition: transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in img { transform: none; }
  .hero__media img { animation: settle 1600ms var(--ease-soft) both; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.shutter { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- binnenpagina's: sprongmenu, voorbeeldfoto's ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jump a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; background: var(--surface); text-decoration: none; font-weight: 600; transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .jump a:hover { background: var(--signal); } }
.page-hero__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.page-hero__media .caption { padding-inline: 0; }
.example { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.75rem; margin-top: 1.25rem; align-items: start; }
.example img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.example figure:last-child img { aspect-ratio: 4 / 3; }
.example figcaption, .mini-map figcaption { margin-top: 0.4rem; font-size: var(--step-small); color: var(--muted); }
.mini-map { margin-top: 1rem; }
.mini-map img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 70%; }

.service__media video { aspect-ratio: 16 / 9; object-position: 50% 20%; }

/* gesloten accordeons: inhoud echt weg (Chrome legt ze anders onzichtbaar uit) */
.kring:not([open]) .kring__body, .qa:not([open]) .qa__a { display: none; }
.contact__form > h2 { margin-bottom: 1.5rem; }
@media (max-width: 47.99em) { .page-hero__media { display: none; } }
.schema .lbl text { font-family: var(--font-text); font-size: 15px; font-weight: 600; fill: var(--muted); }
@media (max-width: 47.99em) { .schema .lbl { display: none; } }