/* ==========================================================================
   De Paepe Elektriciteit — stylesheet
   Design system: "Brand essence visual directions/De Paepe Elektriciteit.dc.html"
   Palette is fixed by the brand: navy, off-white, red, orange. Nothing else.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Colour — vast palet, geen andere kleuren toevoegen */
  --navy:        #0f1120;
  --off-white:   #efeeea;
  --red:         #e5252f;
  --orange:      #f8a815;

  /* Afgeleiden van het palet (alleen tinten/transparanties, geen nieuwe kleuren) */
  --red-hover:   #ff3b3b;
  --navy-soft:   #1b1e36;
  --slot-bg:     #e3e2dc;
  --ink-70:      rgba(15, 17, 32, .75);
  --ink-60:      rgba(15, 17, 32, .60);
  --ink-45:      rgba(15, 17, 32, .45);
  --paper-85:    rgba(239, 238, 234, .85);
  --paper-80:    rgba(239, 238, 234, .80);
  --paper-70:    rgba(239, 238, 234, .70);
  --hairline:    rgba(239, 238, 234, .14);

  /* Type */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Ruimte */
  --gutter:  80px;
  --maxw:    1280px;
  --section: 56px;
  --cut:     10px;   /* schuine hoek, race-vorm */
}

/* ------------------------------------------------------------- 2. Basisstijl */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--off-white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: var(--section); padding-bottom: var(--section); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow--red    { color: var(--red); }
.eyebrow--orange { color: var(--orange); }

.rule {           /* het korte gekleurde streepje boven een kop */
  width: 30px;
  height: 5px;
  margin-bottom: 16px;
}
.rule--red    { background: var(--red); }
.rule--orange { background: var(--orange); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: var(--navy);
  padding: 12px 18px;
  font-weight: 600;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- 3. Knoppen */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  border: 0;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn--primary {
  background: var(--red);
  color: var(--off-white);
  padding: 16px 26px;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--red-hover);
  color: var(--off-white);
  transform: scale(1.07);
  box-shadow: 0 0 0 6px rgba(229, 37, 47, .25);
}

/* Outline-knop = donker vlak met dunne rand, opgebouwd uit twee schuine vlakken */
.btn--outline {
  background: var(--off-white);
  padding: 1.5px;
  color: var(--off-white);
}
.btn--outline > span {
  display: block;
  background: var(--navy);
  padding: 14.5px 24.5px;
  clip-path: polygon(8.5px 0, 100% 0, 100% calc(100% - 8.5px), calc(100% - 8.5px) 100%, 0 100%, 0 8.5px);
}
.btn--outline:hover,
.btn--outline:focus-visible { color: var(--off-white); transform: scale(1.04); }
.btn--outline--ghost { background: rgba(239, 238, 234, .4); }

.btn--sm { font-size: 13px; padding: 11px 14px; }
.btn--sm.btn--outline { padding: 1.5px; }
.btn--sm.btn--outline > span { padding: 9.5px 12.5px; font-size: 13px; }

.btn--phone-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
}

.link-underline {
  font-weight: 600;
  font-size: 14.5px;
  border-bottom: 2px solid var(--navy);
  transition: border-color .3s ease;
}
.link-underline:hover { color: var(--navy); border-color: var(--red); }

/* ------------------------------------------------------ 4. Header en navigatie */
.site-header {
  background: var(--navy);
  color: var(--off-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar { background: var(--red); color: var(--off-white); }
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topbar__regio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__uren  { flex: none; white-space: nowrap; }
/* TOPBAR-UIT — tijdelijk verborgen op alle schermbreedtes, klant twijfelt
   nog over de rode balk. Terugzetten = deze regel weghalen. */
.topbar { display: none; }

.nav.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.nav__logo img { height: 40px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13.5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.nav__links a:hover            { color: var(--off-white); border-color: var(--red); }
.nav__links a[aria-current]    { color: var(--off-white); border-color: var(--red); }
.nav__cta { display: flex; gap: 8px; flex: none; }

/* Het menu staat in de HTML ná de knoppen (nodig voor de hamburger), maar
   op desktop hoort het ertussen. Vandaar expliciete volgorde. */
.nav__logo  { order: 0; }
.nav__links { order: 1; }
.nav__cta   { order: 2; }

/* Hamburger. Bestaat alleen op mobiel en alleen als js/main.js draait. */
.nav__menu { display: contents; }
.nav__toggle { display: none; }
.nav__menu-offerte { display: none; }

/* ------------------------------------------------------------------ 5. Hero */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 28%,
              rgba(15,17,32,.75) 52%, rgba(15,17,32,.25) 78%, rgba(15,17,32,.05) 100%);
}
.hero__body {
  position: relative;
  z-index: 2;
  color: var(--off-white);
  max-width: calc(640px + var(--gutter) * 2);
  padding: 56px var(--gutter) 64px;
}
.hero__body .eyebrow { margin-bottom: 22px; }
.hero h1 {
  margin: 0 0 22px;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 14ch;
}
.hero p:not(.eyebrow) {
  margin: 0 0 34px;
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 44ch;
  color: var(--paper-80);
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------- 6. Dienstenkaarten */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card {
  display: block;
  background: var(--navy);
  padding: 2px;
  box-shadow: 0 10px 24px rgba(15, 17, 32, .08);
  color: var(--navy);
  --fill: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background-color .35s ease, color .35s ease .1s;
}
.card__inner {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
  padding: 32px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.card__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--fill) * 100%);
  z-index: 0;
  transition: height .45s ease;
}
.card__content { position: relative; z-index: 1; }
.card h2, .card h3 { margin: 0 0 10px; font-size: 25px; }
.card p  { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; }
.card__link { font-weight: 600; font-size: 15px; border-bottom: 2px solid; transition: border-color .3s ease; }

.card--red .card__fill { background: var(--red); }
.card--red .card__link { border-color: var(--red); }
.card--red:hover, .card--red:focus-visible { background-color: var(--red); color: var(--off-white); --fill: 1; }
.card--red:hover .rule, .card--red:focus-visible .rule { background: var(--off-white); }
.card--red:hover .card__link, .card--red:focus-visible .card__link { border-color: var(--off-white); }

.card--orange .card__fill { background: var(--orange); }
.card--orange .card__link { border-color: var(--orange); }
/* Tekst blijft donkerblauw op het oranje vlak. Zonder deze `color` wint de
   algemene `a:hover { color: var(--red) }` en wordt de tekst rood. */
.card--orange:hover, .card--orange:focus-visible { background-color: var(--orange); color: var(--navy); --fill: 1; }
.card--orange:hover .rule, .card--orange:focus-visible .rule { background: var(--navy); }
.card--orange:hover .card__link, .card--orange:focus-visible .card__link { border-color: var(--navy); }

.cards--lg .card__inner { padding: 36px; }
.cards--lg .card h2, .cards--lg .card h3 { font-size: 27px; }
.cards--lg .card p  { font-size: 16px; }

/* -------------------------------------------------------- 7. Werkgebied-band */
.regio-band {
  background: linear-gradient(100deg, var(--navy), #5c1319, var(--red), #5c1319, var(--navy));
  background-size: 250% 100%;
  animation: currentFlow 9s ease-in-out infinite alternate;
  padding-top: 16px;
  padding-bottom: 16px;
}
.regio-band .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.regio-band__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-70);
  flex: none;
}
.regio-band__gemeenten { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.regio-band__gemeenten li {
  color: var(--off-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.regio-band__rest { font-size: 13.5px; color: var(--paper-85); flex: none; }

@keyframes currentFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---------------------------------------------------------------- 8. Beelden */
.shot {                       /* fotoslot */
  display: block;
  width: 100%;
  background: var(--slot-bg);
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--cut { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.shot--h170 { height: 170px; }
.shot--h220 { height: 220px; }
.shot--h320 { height: 320px; background: var(--navy-soft); }
.shot--h460 { height: 460px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-3--werk { gap: 20px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.section-head h2 { font-size: 28px; }

/* --------------------------------------------------------- 9. Vakman-band */
.vakman {
  position: relative;
  height: 520px;
  overflow: hidden;
  display: block;
  color: var(--off-white);
}
.vakman img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vakman__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,17,32,.88) 0%, rgba(15,17,32,.5) 45%, rgba(15,17,32,0) 75%);
}
.vakman__body {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.vakman__body > .wrap { width: 100%; }
.vakman__body .wrap > div { max-width: 420px; }
.vakman h2 { margin: 0 0 14px; font-size: 32px; }
.vakman p  { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--paper-85); }
.vakman:hover { color: var(--off-white); }

/* ------------------------------------------------------- 10. Paginakoppen */
.page-head h1 { margin: 0 0 40px; font-size: 42px; max-width: 20ch; }

.dienst-hero { background: var(--navy); color: var(--off-white); }
.dienst-hero .wrap {
  display: grid;
  grid-template-columns: 1fr .9fr;
  align-items: center;
  gap: 40px;
  padding-top: var(--section);
  padding-bottom: var(--section);
}
.dienst-hero h1 { margin: 0 0 18px; font-size: 44px; line-height: 1.08; max-width: 16ch; }
.dienst-hero p:not(.eyebrow) { margin: 0 0 28px; font-size: 16.5px; line-height: 1.65; max-width: 44ch; color: var(--paper-80); }
.dienst-hero .btn--primary { padding: 15px 24px; }

.feature h2, .feature h3 { margin: 0 0 8px; font-size: 20px; }
.feature p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.feature .rule { width: 26px; height: 4px; margin-bottom: 14px; }

.over { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: start; }
.over h1 { margin: 0 0 24px; font-size: 40px; max-width: 16ch; }
.over p:not(.eyebrow) { margin: 0 0 20px; font-size: 17px; line-height: 1.7; max-width: 56ch; }
.over p:not(.eyebrow):last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ 11. Contactblok */
.contact { background: var(--navy); color: var(--off-white); }
.contact .wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: start;
  padding-top: var(--section);
  padding-bottom: var(--section);
}
.contact .eyebrow { margin-bottom: 16px; }
.contact h2 { margin: 0 0 16px; font-size: 34px; line-height: 1.1; max-width: 16ch; }
.contact__intro { margin: 0 0 28px; font-size: 16px; line-height: 1.6; max-width: 40ch; color: var(--paper-80); }
.contact__meta {
  margin-top: 22px;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  color: var(--paper-70);
}
.contact__meta a { text-decoration: underline; display: inline-block; padding: 4px 0; }
.contact__meta a:hover { color: var(--orange); }

.form {
  background: var(--off-white);
  color: var(--navy);
  padding: 32px;
  display: grid;
  gap: 14px;
}
.form__label,
.form legend {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ink-60);
  padding: 0;
}
.form input[type="text"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: var(--off-white);
  border: 1.5px solid var(--navy);
  border-radius: 0;
  padding: 12px 14px;
}
.form textarea { min-height: 64px; resize: vertical; }
.form input::placeholder,
.form textarea::placeholder { color: var(--ink-45); }
.form input:focus, .form textarea:focus { outline: 3px solid var(--orange); outline-offset: 0; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__group { min-width: 0; }
.form fieldset { border: 0; margin: 0; padding: 0; }

.choice { display: flex; gap: 10px; position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  overflow: hidden;
}
.choice label {
  flex: 1;
  border: 1.5px solid var(--navy);
  padding: 12px 14px;
  font-size: 14.5px;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.choice input:checked + label { background: var(--navy); color: var(--off-white); font-weight: 600; }
.choice input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }

.form button[type="submit"] {
  width: 100%;
  font-weight: 700;
  padding: 16px 24px;
}

/* ----------------------------------------------------------------- 12. Footer */
.site-footer {
  background: var(--navy);
  color: var(--paper-70);
  padding-top: 48px;
  padding-bottom: 28px;
}
.site-footer a:hover { color: var(--orange); }
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
/* Formaat van het footerlogo: pas alleen deze hoogte aan, de breedte volgt.
   De viewBox van het SVG is bijgesneden, dus deze hoogte is de echte
   hoogte van het logo (verhouding ongeveer 4,8 : 1). */
.site-footer__logo { height: 76px; width: auto; max-width: 100%; margin-bottom: 18px; }
.site-footer__adres { margin: 0; font-size: 14px; line-height: 1.6; max-width: 32ch; }
.site-footer__list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 2; }
.site-footer__list a { display: inline-block; padding: 3px 0; }
.site-footer__bottom {
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* -------------------------------------------------------------- 13. Responsive */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .hero h1 { font-size: 44px; }
  .dienst-hero h1 { font-size: 38px; }
  .page-head h1 { font-size: 36px; }
  .over { grid-template-columns: 300px 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  :root { --gutter: 28px; --section: 44px; }

  /* Twee rijen: [logo ... bel + offerte] en daaronder de links.
     De header blijft sticky, dus hij mag niet te hoog worden. */
  .nav.wrap { flex-wrap: wrap; row-gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .nav__logo { order: 1; flex: 0 0 auto; }
  .nav__logo img { height: 32px; }
  .nav__cta { order: 2; margin-left: auto; flex-wrap: nowrap; }
  .nav__menu { display: contents; }
  .nav__links { order: 3; flex: 1 0 100%; flex-wrap: wrap; gap: 16px; }

  .topbar .wrap { flex-direction: column; align-items: flex-start; gap: 4px; }
  .topbar__regio { white-space: normal; }

  .hero { min-height: 0; }
  .hero__body { padding: 44px var(--gutter) 48px; max-width: none; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(15,17,32,.92) 0%, rgba(15,17,32,.85) 60%, rgba(15,17,32,.75) 100%);
  }

  .cards { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dienst-hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .over { grid-template-columns: 1fr; gap: 28px; }
  .shot--h460 { height: 380px; }

  .contact .wrap { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .vakman { height: 460px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; --section: 36px; }

  body { font-size: 15.5px; }

  /* De rode balk valt weg op een telefoon: drie regels blokletters boven een
     sticky header is te druk, en de inhoud staat sowieso al op elke pagina
     (gemeenten en uren in het contactblok, uren ook in de footer).
     Wil je hem toch terug, vervang dit blok door de variant in het commentaar
     hieronder: dan blijft de balk staan met alleen de gemeenten, op twee
     regels, zonder de openingsuren.

     .topbar .wrap { padding-top: 6px; padding-bottom: 6px; line-height: 1.35; }
     .topbar__regio { font-size: 10px; white-space: normal; }
     .topbar__uren  { display: none; }
  */
  .topbar { display: none; }

  /* Eén rij: logo — belknop — hamburger. De links zitten in het paneel,
     dat als vierde item naar een eigen regel wrapt. */
  .nav.wrap { flex-wrap: wrap; gap: 10px; row-gap: 0; }
  .nav__logo, .nav__cta, .nav__toggle { flex: none; }
  .nav__logo img { height: 26px; }
  .nav__cta { gap: 6px; order: 2; }
  .nav__cta .btn--sm { font-size: 12px; padding: 9px 10px; }
  .nav__cta .btn--sm.btn--outline { padding: 1.5px; }
  .nav__cta .btn--sm.btn--outline > span { font-size: 12px; padding: 7.5px 8.5px; }
  /* Alleen als er een hamburger is, verhuist Offerte naar het paneel.
     Zonder JS blijft de knop gewoon in de balk staan. */
  .js .nav__cta-offerte { display: none; }

  .nav__toggle {
    order: 3;
    flex: none;
    margin-left: auto;   /* onder ~340px wrapt hij; blijft dan netjes rechts staan */
    width: 40px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1.5px solid rgba(239, 238, 234, .4);
    color: var(--off-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .nav__toggle[hidden] { display: none; }

  /* Drie balken; open wordt het een kruis. */
  .nav__bars, .nav__bars::before, .nav__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--off-white);
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav__bars { position: relative; }
  .nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
  .nav__bars::before { top: -6px; }
  .nav__bars::after  { top: 6px; }
  .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
  .nav__toggle[aria-expanded="true"] .nav__bars::before { top: 0; transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__bars::after  { top: 0; transform: rotate(-45deg); }

  /* Zonder JS blijft het menu gewoon staan (display: contents).
     Met JS wordt het een uitklapbaar paneel. */
  .js .nav__menu {
    display: none;
    order: 4;
    flex: 1 0 100%;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 4px;
    border-top: 1px solid var(--hairline);
    margin-top: 4px;
  }
  .js .nav__menu.is-open { display: block; }

  .js .nav__menu .nav__links {
    display: grid;
    gap: 0;
    font-size: 16px;
  }
  .js .nav__menu .nav__links a {
    display: block;
    padding: 12px 0;
    border-bottom: 2px solid transparent;
  }
  .js .nav__menu .nav__links a[aria-current] { border-color: var(--red); }

  .js .nav__menu-offerte { display: block; margin-top: 14px; text-align: center; }
  .js .nav__menu-offerte > span { padding: 14px 20px; }

  .hero h1 { font-size: 34px; max-width: none; }
  .hero p:not(.eyebrow) { font-size: 16px; }
  .hero__cta .btn { flex: 1 1 100%; }

  .page-head h1 { font-size: 30px; }
  .dienst-hero h1 { font-size: 30px; }
  .over h1 { font-size: 30px; }
  .contact h2 { font-size: 28px; max-width: none; }
  .vakman h2 { font-size: 26px; }

  .grid-3 { grid-template-columns: 1fr; }
  .shot--h170, .shot--h220 { height: 200px; }
  .shot--h320 { height: 240px; }

  /* Werkgebied: de vier gemeenten blijven op één rij, ook op een kleine
     telefoon. Label en "en omliggende gemeenten" krijgen een eigen regel;
     de namen schalen mee met de schermbreedte zodat ze nooit afbreken. */
  .regio-band .wrap { flex-direction: column; align-items: stretch; gap: 8px; }
  .regio-band__gemeenten {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
  }
  .regio-band__gemeenten li {
    font-size: clamp(11px, 3.5vw, 19px);
    white-space: nowrap;
  }
  .regio-band__rest { font-size: 12.5px; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  .form { padding: 22px; }
  .form input[type="text"],
  .form input[type="tel"],
  .form textarea { font-size: 16px; }
  .form__row { grid-template-columns: 1fr; }
  .choice { flex-direction: column; }

  .vakman { height: auto; min-height: 0; }
  .vakman img { position: absolute; }
  .vakman__body { padding-top: 44px; padding-bottom: 44px; }
  .vakman__scrim { background: linear-gradient(180deg, rgba(15,17,32,.9), rgba(15,17,32,.78)); }

  .site-footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__logo { height: 60px; }
  .site-footer__bottom { flex-direction: column; gap: 8px; }
}

/* Beweging blijft minimaal; wie dat vraagt, krijgt helemaal niets. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------------ 14. Print */
@media print {
  .site-header, .regio-band { position: static; }
  body { background: #fff; }
}