/* ============================================================
   SERVAES MECHANIEK. Gedeelde stijl voor alle pagina's.
   Stond tot 20/08 inline in home.html. Met vier pagina's is
   een gedeeld bestand de enige manier om drift te voorkomen.
   ============================================================ */
/* ============================================================
   TOKENS. Overgenomen uit het design system van Servaes Mechaniek.
   ============================================================ */
:root{
  --sm-orange:#fbab18;
  --sm-black:#000000;
  --sm-white:#ffffff;

  --orange-50:#fff8ec;
  --orange-100:#feecd0;
  --orange-400:#fbab18;
  --orange-500:#e69910;
  --orange-700:#9c6708;

  --neutral-0:#ffffff;
  --neutral-25:#fafafa;
  --neutral-50:#f4f4f4;
  --neutral-100:#e8e8e8;
  --neutral-200:#d4d4d4;
  --neutral-400:#8a8a8a;
  --neutral-500:#6b6b6b;
  --neutral-700:#2e2e2e;
  --neutral-800:#1a1a1a;
  --neutral-900:#0d0d0d;

  --text-strong:var(--sm-black);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);

  --font-display:"Jura","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Open Sans",system-ui,-apple-system,sans-serif;

  --fs-3xs:.6875rem;
  --fs-2xs:.75rem;
  --fs-xs:.8125rem;
  --fs-sm:.875rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.25rem;
  --fs-2xl:1.5rem;
  --fs-3xl:1.875rem;

  --ls-label:.14em;
  --ls-eyebrow:.22em;
  --ls-display:.02em;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px;

  --radius-card:4px;
  --radius-control:3px;

  --container:1240px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --section-y:clamp(3.5rem,7vw,6rem);
  --header-h:76px;

  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 16px rgba(0,0,0,.14);
  --shadow-lg:0 18px 40px rgba(0,0,0,.22);

  --dur-state:140ms;
  --dur-ui:220ms;
  --dur-reveal:360ms;
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-mech:cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   BASIS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sm-white);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--text-strong);
  letter-spacing:var(--ls-display);
  line-height:1.1;
  margin:0;
}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.sm-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sm-section{padding-block:var(--section-y)}

/* Focusring. Afwijking van het brandbook: geel op wit haalt maar 1,9:1,
   dus te zwak als focusindicator. Zwart op licht, geel op donker. */
:focus-visible{outline:3px solid var(--sm-black);outline-offset:2px}
.sm-dark :focus-visible,.sm-bar :focus-visible{outline-color:var(--sm-black)}
.sm-dark a:focus-visible,.sm-dark button:focus-visible{outline:3px solid var(--sm-orange)}

.sm-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--sm-black);color:var(--sm-white);
  padding:var(--space-3) var(--space-5);
  font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--ls-label);
  font-size:var(--fs-xs);text-decoration:none;
}
.sm-skip:focus{left:var(--space-4);top:var(--space-4)}

/* ============================================================
   TYPOGRAFISCHE ROLLEN
   ============================================================ */
.sm-kicker{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--orange-700);
  margin:0 0 var(--space-4);
}
.sm-dark .sm-kicker{color:var(--sm-orange)}

.sm-h1{font-size:clamp(2.05rem,4.2vw,3.25rem);letter-spacing:.01em}
.sm-h2{font-size:clamp(1.75rem,3vw,2.5rem)}
.sm-h3{font-size:var(--fs-xl);letter-spacing:.01em}

/* Accentstreep onder sectiekoppen. 56 x 3 px, uit het brandbook. */
.sm-rule{
  display:block;width:56px;height:3px;
  background:var(--sm-orange);
  margin-top:var(--space-5);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-reveal) var(--ease-out) 120ms;
}
.is-in .sm-rule,.sm-rule.is-in{transform:scaleX(1)}

.sm-lead{font-size:var(--fs-lg);line-height:1.55;color:var(--text-body);max-width:34em}
.sm-meta{font-size:var(--fs-sm);color:var(--text-muted)}

/* ============================================================
   KNOPPEN. Hiërarchie: bellen = primair (geel), formulier = zwart,
   doorkijken = outline, doorlink = ghost.
   ============================================================ */
.sm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  line-height:1;text-decoration:none;border:none;cursor:pointer;
  padding:15px 24px;border-radius:var(--radius-control);
  transition:background var(--dur-state) var(--ease-standard),
             transform var(--dur-state) var(--ease-standard),
             box-shadow var(--dur-state) var(--ease-standard),
             color var(--dur-state) var(--ease-standard);
}
.sm-btn svg{width:16px;height:16px;flex:none}
.sm-btn--primary{background:var(--sm-orange);color:var(--sm-black)}
.sm-btn--primary:hover{background:var(--orange-500);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sm-btn--dark{background:var(--sm-black);color:var(--sm-white)}
.sm-btn--dark:hover{background:var(--neutral-800);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sm-btn--outline{background:transparent;color:var(--text-strong);box-shadow:inset 0 0 0 2px var(--sm-black)}
.sm-btn--outline:hover{background:var(--sm-black);color:var(--sm-white)}
.sm-dark .sm-btn--outline{color:var(--sm-white);box-shadow:inset 0 0 0 2px var(--sm-white)}
.sm-dark .sm-btn--outline:hover{background:var(--sm-white);color:var(--sm-black)}
.sm-btn--lg{padding:19px 32px;font-size:var(--fs-sm)}
.sm-btn:active{transform:scale(.985);box-shadow:none}

.sm-link{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--sm-black);text-decoration:none;
  padding-block:var(--space-2);
}
.sm-link svg{width:14px;height:14px;transition:transform var(--dur-state) var(--ease-mech)}
.sm-link:hover svg{transform:translateX(4px)}
.sm-link:hover{color:var(--orange-700)}
.sm-dark .sm-link{color:var(--sm-white)}
.sm-dark .sm-link:hover{color:var(--sm-orange)}

/* ============================================================
   HEADER. 76 px, plakt bij scrollen.
   ============================================================ */
.sm-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--neutral-100);
  transition:box-shadow var(--dur-ui) var(--ease-standard);
}
.sm-header.is-stuck{box-shadow:var(--shadow-sm)}
.sm-header__in{
  height:100%;display:flex;align-items:center;gap:var(--space-8);
}
.sm-header__logo{display:flex;align-items:center;flex:none}
/* 52 px in een header van 76 px. Het nieuwe logo draagt de baseline
   TRUCK & TRAILER SERVICE, en die was op 38 px niet te lezen. */
.sm-header__logo img{height:52px;width:auto}
.sm-nav{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
.sm-nav__item{display:flex;align-items:center}
.sm-nav__link,.sm-nav__btn{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--sm-black);text-decoration:none;
  background:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  /* Gelijke regelhoogte. Zonder dit erft de link 1,65 van de body
     en de knop line-height:normal, waardoor ze niet uitlijnen. */
  line-height:1;
  margin:0;padding:2px 0 4px;
  border-bottom:2px solid transparent;
  transition:border-color var(--dur-state) var(--ease-standard);
}
.sm-nav__link:hover,.sm-nav__btn:hover,.sm-nav__item.is-open .sm-nav__btn{border-bottom-color:var(--sm-orange)}
.sm-nav__btn svg{width:12px;height:12px;transition:transform var(--dur-ui) var(--ease-mech)}
.sm-nav__item.is-open .sm-nav__btn svg{transform:rotate(180deg)}
.sm-header__cta{flex:none;margin-left:var(--space-6)}

/* ---- MEGAMENU ---- */
.sm-mega{
  position:absolute;top:100%;left:0;right:0;
  background:var(--sm-white);
  border-top:3px solid var(--sm-orange);
  border-bottom:1px solid var(--neutral-100);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-ui) var(--ease-out),
             transform var(--dur-ui) var(--ease-out),
             visibility 0s linear var(--dur-ui);
}
.sm-nav__item.is-open .sm-mega{
  opacity:1;visibility:visible;transform:translateY(0);
  transition-delay:0s;
}
.sm-mega__in{padding-block:var(--space-8) var(--space-6)}
.sm-mega__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.sm-mega__card{
  display:flex;flex-direction:column;
  padding:var(--space-5);
  border:1px solid var(--neutral-100);
  border-radius:var(--radius-card);
  text-decoration:none;
  transition:border-color var(--dur-state) var(--ease-standard),
             background var(--dur-state) var(--ease-standard);
}
.sm-mega__card:hover,.sm-mega__card:focus-visible{background:var(--sm-black);border-color:var(--sm-black)}
.sm-mega__card:hover .sm-mega__name,.sm-mega__card:focus-visible .sm-mega__name{color:var(--sm-white)}
.sm-mega__card:hover .sm-mega__desc,.sm-mega__card:focus-visible .sm-mega__desc{color:var(--neutral-200)}
.sm-mega__card:hover .sm-mega__price,.sm-mega__card:focus-visible .sm-mega__price{color:var(--sm-white);border-top-color:rgba(255,255,255,.22)}
.sm-mega__card:hover .sm-mega__price span,.sm-mega__card:focus-visible .sm-mega__price span{color:var(--neutral-400)}
.sm-mega__top{
  display:flex;align-items:center;gap:var(--space-3);
  min-height:44px;margin-bottom:var(--space-4);
}
.sm-mega__ico{
  width:34px;height:34px;flex:none;border-radius:var(--radius-control);
  background:var(--orange-50);display:grid;place-items:center;color:var(--sm-black);
  transition:background var(--dur-state) var(--ease-standard);
}
.sm-mega__card:hover .sm-mega__ico,.sm-mega__card:focus-visible .sm-mega__ico{background:var(--sm-orange);color:var(--sm-black)}
.sm-mega__ico svg{width:18px;height:18px}
.sm-mega__name{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;
  line-height:1.25;color:var(--sm-black);
  transition:color var(--dur-state) var(--ease-standard);
}
/* De marge onder de beschrijving garandeert de ruimte tot de scheidingslijn,
   ook in de langste kaart. De uitlijning blijft van margin-top:auto komen. */
.sm-mega__desc{
  font-size:var(--fs-xs);line-height:1.55;color:var(--text-body);margin-bottom:var(--space-5);
  transition:color var(--dur-state) var(--ease-standard);
}
.sm-mega__price{
  margin-top:auto;padding-top:var(--space-4);
  border-top:1px solid var(--neutral-100);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);
  color:var(--sm-black);
  transition:color var(--dur-state) var(--ease-standard),border-color var(--dur-state) var(--ease-standard);
}
.sm-mega__price span{font-size:var(--fs-2xs);color:var(--text-muted);font-weight:500;transition:color var(--dur-state) var(--ease-standard)}
.sm-mega__foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
  margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--neutral-100);
}
.sm-mega__note{font-size:var(--fs-2xs);color:var(--text-muted)}

/* ---- MOBIEL MENU ---- */
.sm-burger{
  display:none;flex:none;margin-left:auto;
  width:44px;height:44px;border:2px solid var(--sm-black);border-radius:var(--radius-control);
  background:none;cursor:pointer;place-items:center;
}
.sm-burger svg{width:20px;height:20px}
.sm-mobile{
  position:absolute;top:100%;left:0;right:0;
  background:var(--sm-white);border-top:3px solid var(--sm-orange);
  box-shadow:var(--shadow-lg);
  padding:var(--space-6) 0 var(--space-8);
  display:none;
}
.sm-mobile.is-open{display:block}
.sm-mobile__call{width:100%}
.sm-mobile__note{
  margin:var(--space-3) 0 var(--space-8);
  font-size:var(--fs-xs);color:var(--text-muted);text-align:center;
}
.sm-mobile h4,.sm-mobile__h{
  font-family:var(--font-display);font-weight:700;line-height:1.1;
  font-size:var(--fs-2xs);text-transform:uppercase;
  letter-spacing:var(--ls-label);color:var(--text-muted);margin:0 0 var(--space-3);
}
.sm-mobile__list{display:grid;gap:var(--space-1);margin-bottom:var(--space-6)}
.sm-mobile__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) 0;border-bottom:1px solid var(--neutral-100);text-decoration:none;
}
.sm-mobile__row span:first-child{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.05em;color:var(--sm-black);
}
.sm-mobile__row span:last-child{font-family:var(--font-display);font-weight:700;color:var(--sm-black)}

/* ============================================================
   HERO. Asymmetrische verdeling. Links de vraag, rechts het antwoord.
   ============================================================ */
.sm-hero{
  padding-block:clamp(3rem,6vw,5.5rem);
  background:var(--neutral-25);
  border-bottom:1px solid var(--neutral-100);
}
.sm-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.sm-hero__lead{margin-top:var(--space-5)}
.sm-hero__sub{margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-sm)}
.sm-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.sm-hero__aside{display:flex;flex-direction:column}
.sm-hero__caption{
  margin-top:var(--space-8);
  padding-left:var(--space-4);
  border-left:2px solid var(--neutral-200);
  font-size:var(--fs-xs);line-height:1.55;color:var(--text-muted);
}

/* ---- HET PRIJZENBORD ----
   Stond tot 20/08 in de hero. De klant wil de tabel niet bovenaan, dus
   het bord verhuist naar de tarievenpagina. De opmaak blijft hier staan
   zodat die pagina hem ongewijzigd kan overnemen. */
.sm-board{
  background:var(--sm-black);
  color:var(--sm-white);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.sm-board__top{height:4px;background:var(--sm-orange);transform:scaleX(0);transform-origin:left center}
.is-loaded .sm-board__top{transform:scaleX(1);transition:transform 520ms var(--ease-out) 260ms}
.sm-board__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5) var(--space-5) var(--space-3);
}
.sm-board__label{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--sm-orange);
}
.sm-board__note{font-size:var(--fs-2xs);color:var(--neutral-400)}
.sm-board__rows{padding:0 var(--space-5) var(--space-4)}
.sm-board__row{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-4);
  align-items:baseline;
  padding-block:var(--space-3);
  border-top:1px solid rgba(255,255,255,.14);
  text-decoration:none;color:inherit;
  transition:background var(--dur-state) var(--ease-standard);
  margin-inline:calc(var(--space-3) * -1);
  padding-inline:var(--space-3);
}
.sm-board__row:hover{background:rgba(255,255,255,.05)}
.sm-board__row:hover .sm-board__price{color:var(--sm-orange)}
.sm-board__name{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.06em;
}
.sm-board__desc{
  display:block;margin-top:2px;
  font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:var(--fs-xs);color:var(--neutral-400);
}
.sm-board__price{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  white-space:nowrap;
  transition:color var(--dur-state) var(--ease-standard);
}
.sm-board__unit{font-size:var(--fs-xs);color:var(--neutral-400);font-weight:500}

/* ---- SIGNATUUR: de werkplaatskaart ----
   Vervangt het prijzenbord in de hero. Toont het werk in eigen garage,
   zodat de bovenkant niet volledig om depannage draait. */
.sm-shopcard{
  margin:0;background:var(--sm-white);
  border:1px solid var(--neutral-100);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.sm-shopcard__top{display:block;height:4px;background:var(--sm-orange);transform:scaleX(0);transform-origin:left center}
.is-loaded .sm-shopcard__top{transform:scaleX(1);transition:transform 520ms var(--ease-out) 260ms}
.sm-shopcard img{display:block;width:100%;height:clamp(200px,21vw,270px);object-fit:cover;object-position:center 45%}
.sm-shopcard__body{padding:var(--space-5) var(--space-5) var(--space-6)}
.sm-shopcard__label{
  display:block;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--orange-700);
}
.sm-shopcard__body p{margin-top:var(--space-3);font-size:var(--fs-sm);line-height:1.6;color:var(--text-body)}
.sm-shopcard__body .sm-link{margin-top:var(--space-5)}

/* Depannage publiceert geen tarief meer. Deze regel neemt de plaats
   van .sm-card__price in, zonder de nadruk van een bedrag. */
.sm-card__pricenote{
  margin-top:auto;padding-top:var(--space-4);
  border-top:1px solid var(--neutral-100);
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted);
}

/* ============================================================
   UTILITYSTROOK. Zit vast tegen de header, boven alles.
   Leest als chrome, niet als sectie. Zwart op geel haalt 10,9:1.
   ============================================================ */
.sm-utility{background:var(--sm-orange);color:var(--sm-black)}
.sm-utility__in{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-2) var(--space-6);
  min-height:42px;padding-block:6px;
}
.sm-utility__msg{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--sm-black);
}
.sm-utility__msg svg{width:16px;height:16px;flex:none}
.sm-utility__action{
  display:inline-flex;align-items:baseline;gap:var(--space-3);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--sm-black);text-decoration:none;
  border-bottom:2px solid rgba(0,0,0,.3);padding-bottom:1px;
  transition:border-color var(--dur-state) var(--ease-standard);
}
.sm-utility__action:hover{border-bottom-color:var(--sm-black)}
.sm-utility__note{font-family:var(--font-body);font-weight:400;font-size:var(--fs-2xs);letter-spacing:0;text-transform:none;opacity:.8}

/* ============================================================
   DIENSTEN
   ============================================================ */
.sm-head{max-width:44rem}
.sm-head p{margin-top:var(--space-5)}
.sm-grid4{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);
  margin-top:var(--space-12);
}
.sm-card{
  display:flex;flex-direction:column;
  background:var(--sm-white);
  border:1px solid var(--neutral-100);
  border-radius:var(--radius-card);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:transform var(--dur-ui) var(--ease-standard),
             box-shadow var(--dur-ui) var(--ease-standard),
             border-color var(--dur-ui) var(--ease-standard);
}
.sm-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--neutral-200)}
.sm-card__icon{
  width:48px;height:48px;border-radius:var(--radius-card);
  background:var(--orange-50);color:var(--sm-black);
  display:grid;place-items:center;margin-bottom:var(--space-5);
  transition:background var(--dur-state) var(--ease-standard);
}
.sm-card:hover .sm-card__icon{background:var(--sm-orange)}
.sm-card__icon svg{width:24px;height:24px}
.sm-card h3{text-transform:uppercase;letter-spacing:.05em;font-size:var(--fs-lg)}
.sm-card p{margin-top:var(--space-3);margin-bottom:var(--space-5);font-size:var(--fs-sm);line-height:1.6;color:var(--text-body)}
/* Niet meer in gebruik sinds 21/08: er staan geen bedragen meer op de site.
   Bewaard voor het geval die beslissing ooit terugdraait. */
.sm-card__price{
  margin-top:auto;padding-top:var(--space-4);
  border-top:1px solid var(--neutral-100);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);
  color:var(--sm-black);
}
.sm-card__price span{font-size:var(--fs-sm);color:var(--text-muted);font-weight:500}
.sm-card__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--orange-700);
}
.sm-card__go svg{width:13px;height:13px;transition:transform var(--dur-state) var(--ease-mech)}
.sm-card:hover .sm-card__go svg{transform:translateX(4px)}

/* ============================================================
   BEELDPLAATSHOUDERS.
   Tonen wat voor foto er komt, zodat Jef weet wat hij moet aanleveren.
   Verdwijnen zodra het echte beeld er is.
   ============================================================ */
.sm-ph{
  display:grid;place-items:center;text-align:center;
  background:var(--neutral-50);
  border:2px dashed var(--neutral-300);
  border-radius:var(--radius-card);
  padding:var(--space-8) var(--space-6);
  min-height:220px;
}
.sm-ph__badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--sm-orange);color:var(--sm-black);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  padding:5px 10px;border-radius:var(--radius-control);
  margin-bottom:var(--space-4);
}
.sm-ph__badge svg{width:13px;height:13px}
.sm-ph__what{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-lg);color:var(--sm-black);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.3;
  max-width:26ch;
}
.sm-ph__spec{margin-top:var(--space-3);font-size:var(--fs-xs);color:var(--text-muted);max-width:44ch;line-height:1.55}
.sm-ph--bleed{min-height:clamp(260px,34vw,420px);border-radius:0;border-left:0;border-right:0}
.sm-ph--tall{min-height:340px}
.sm-dark .sm-ph{background:var(--neutral-900);border-color:var(--neutral-700)}
.sm-dark .sm-ph__what{color:var(--sm-white)}
.sm-dark .sm-ph__spec{color:var(--neutral-400)}

/* ============================================================
   BEELDBAND. Halve breedte beeld, halve breedte tekst, samen over
   het volle scherm. Breekt uit het containerstramien zonder een
   tweede donker vlak te worden, want daardoor liep deze sectie
   vroeger over in de zwarte sectie eronder.

   Het beeld toont hier op ongeveer de helft van de schermbreedte, dus
   het bestand van 1920 px wordt verkleind in plaats van uitgerekt.
   Dat oogt merkbaar scherper dan de vorige opzet over de volle breedte.
   ============================================================ */
.sm-band{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--neutral-50);
  border-block:1px solid var(--neutral-100);
}
/* De beeldband is op 15/09 hoger gezet. Hij stond op clamp(280px,32vw,460px)
   en dan sneed de uitsnede zoveel van de foto weg dat je alleen nog een strook
   overhield. Nu zie je de opname zelf. Geldt voor alle bands op de site, want
   een homepage met een andere bandhoogte dan de dienstenpagina's leest als
   een fout, niet als een keuze. */
.sm-band__media{position:relative;min-height:clamp(360px,42vw,580px);overflow:hidden;background:var(--sm-black)}
.sm-band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.sm-band__body{
  display:flex;align-items:center;
  padding:clamp(2.25rem,4.5vw,4rem) clamp(1.5rem,4vw,3.5rem);
}
.sm-band__inner{max-width:34rem}
.sm-band__note{
  margin-top:var(--space-5);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--orange-700);
}

/* ============================================================
   ZWARTE SECTIE. De werkwijze.
   ============================================================ */
.sm-dark{background:var(--sm-black);color:var(--neutral-200)}
.sm-dark h2,.sm-dark h3{color:var(--sm-white)}
.sm-dark .sm-meta{color:var(--neutral-400)}
.sm-work__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.sm-work__stack{display:grid;gap:var(--space-5)}
.sm-work__stack img{width:100%}
.sm-promises{margin-top:var(--space-10);display:grid;gap:var(--space-8)}
.sm-promise{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start}
.sm-promise__mark{
  width:40px;height:40px;flex:none;border-radius:var(--radius-card);
  background:rgba(251,171,24,.14);color:var(--sm-orange);
  display:grid;place-items:center;
}
.sm-promise__mark svg{width:20px;height:20px}
.sm-promise h3{font-size:var(--fs-lg);text-transform:uppercase;letter-spacing:.05em}
.sm-promise p{margin-top:var(--space-2);font-size:var(--fs-sm);line-height:1.6}

/* ============================================================
   WERKGEBIED
   ============================================================ */
.sm-area{background:var(--neutral-50)}
.sm-area__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
/* ---- GEMEENTEPILLEN ----
   Stonden tot 20/08 in de werkgebiedsectie. Een rij pillen leest als een
   grens, terwijl de gemeenten er enkel voor de vindbaarheid staan. Ze staan
   nu in een gewone zin, wat voor Google hetzelfde gewicht heeft. De opmaak
   blijft hier voor de werkgebiedpagina, waar een lijst wel op zijn plaats is. */
.sm-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.sm-tag{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:.08em;
  background:var(--sm-white);border:1px solid var(--neutral-200);
  border-radius:999px;padding:7px 14px;color:var(--sm-black);
}
.sm-tag--home{background:var(--sm-black);color:var(--sm-white);border-color:var(--sm-black)}
/* Sluit de rij af zodat de lijst niet als een grens leest. De gemeenten
   staan er voor de vindbaarheid, niet om iemand buiten te sluiten. */
.sm-tag--open{background:var(--orange-50);border-color:var(--sm-orange);color:var(--orange-700)}
.sm-split{display:grid;gap:var(--space-6)}
.sm-split__item{background:var(--sm-white);border:1px solid var(--neutral-100);border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column}
.sm-split__item h3{font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.06em}
.sm-split__item p{margin-top:var(--space-2);font-size:var(--fs-sm)}
.sm-split__item .sm-link{margin-top:auto;padding-top:var(--space-4);align-self:flex-start}

/* ============================================================
   VOOR WIE. De filter.
   ============================================================ */
/* Lichtgele sectie. Nieuwe kleurnoot zonder een derde zwart vlak,
   en de boodschap mag hier zelfverzekerder staan dan in een grijze kaart. */
.sm-filter{background:var(--orange-50);border-top:3px solid var(--sm-orange)}
.sm-filter__in{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
}
.sm-filter h2{
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.08;
}
.sm-filter p{margin-top:var(--space-4);font-size:var(--fs-md);line-height:1.6}
.sm-filter p + p{margin-top:var(--space-4)}
.sm-yes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.sm-yes li{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:.08em;
  padding:6px 12px;border:1px solid var(--neutral-200);border-radius:var(--radius-control);
  background:var(--sm-white);color:var(--sm-black);
}

/* ============================================================
   CONTACT
   ============================================================ */
#contact{border-top:1px solid var(--neutral-100)}
.sm-contact__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.sm-facts{margin-top:var(--space-8);display:grid;gap:var(--space-5)}
.sm-fact{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start}
.sm-fact__ico{width:36px;height:36px;flex:none;border-radius:var(--radius-card);background:var(--neutral-50);display:grid;place-items:center;color:var(--sm-black)}
.sm-fact__ico svg{width:18px;height:18px}
.sm-fact dt{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-muted);
}
.sm-fact dd{margin:2px 0 0;font-size:var(--fs-md);color:var(--sm-black)}
.sm-fact dd a{text-decoration:none;border-bottom:2px solid var(--sm-orange)}
/* Wit met een zware zwarte rand in plaats van een zwart vlak.
   Zo blijven er twee donkere secties op de pagina: werkwijze en footer. */
.sm-callcard{
  background:var(--sm-white);color:var(--text-body);
  border:3px solid var(--sm-black);
  border-radius:var(--radius-card);padding:clamp(1.75rem,3.5vw,2.5rem);
}
.sm-callcard .sm-kicker{color:var(--orange-700)}
.sm-callcard h3{font-size:var(--fs-2xl);text-transform:uppercase;letter-spacing:.03em}
.sm-callcard p{margin-top:var(--space-3);font-size:var(--fs-sm)}
.sm-callcard__phone{
  display:block;margin-top:var(--space-6);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2.25rem);
  color:var(--sm-black);text-decoration:none;letter-spacing:.02em;
  border-bottom:4px solid var(--sm-orange);padding-bottom:2px;
  width:fit-content;
}
.sm-callcard__phone:hover{color:var(--orange-700)}
/* Bereikbaarheid onder het nummer. Afgesproken in de meeting van 11/09: het
   moet meteen naast het nummer staan, niet verderop in een openingsurenblok.
   De .sm-callcard p-regel zet hier een marge van space-3 op, die halen we weg
   zodat de regel tegen het nummer aan blijft staan. */
.sm-callcard__bereik{
  margin-top:var(--space-2)!important;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);
}
.sm-callcard .sm-btn{margin-top:var(--space-6)}
/* Legt uit waar de mailknop toe leidt. De klant vroeg wat er na het
   versturen gebeurt, dus dat staat er nu bij. */
.sm-callcard__note{margin-top:var(--space-4);font-size:var(--fs-xs);line-height:1.55;color:var(--text-muted)}

/* ============================================================
   FOOTER
   ============================================================ */
.sm-footer{background:var(--sm-black);color:var(--neutral-400);padding-block:var(--space-16) var(--space-8)}
.sm-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}
.sm-footer img{height:40px;width:auto}
.sm-footer h4,.sm-footer__h{
  font-family:var(--font-display);font-weight:700;line-height:1.1;
  color:var(--sm-white);font-size:var(--fs-2xs);text-transform:uppercase;
  letter-spacing:var(--ls-label);margin-bottom:var(--space-4);
}
/* Maat op de li en niet enkel op de link. Anders erven de regels zonder
   link de 16 px van de body en staan adres en btw-nummer groter dan de rest. */
.sm-footer li{margin-bottom:var(--space-2);font-size:var(--fs-sm)}
.sm-footer a{color:var(--neutral-400);text-decoration:none}
.sm-footer a:hover{color:var(--sm-orange)}
.sm-footer__pay{
  margin-top:var(--space-5);font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-2xs);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--sm-orange);
}
.sm-footer__bottom{
  margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  font-size:var(--fs-2xs);
}

/* ============================================================
   VASTE BELTOETS OP GSM.
   Afwijking van het brandbook: daar is alleen de kop fixed.
   Voor deze site is bellen de conversie, dus dit is de uitzondering waard.
   ============================================================ */
.sm-callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--neutral-200);
  transform:translateY(110%);
  transition:transform var(--dur-ui) var(--ease-out);
}
.sm-callbar.is-on{transform:translateY(0)}
.sm-callbar .sm-btn{width:100%}

/* ============================================================
   REVEALS
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.is-loaded .hero-seq{animation:heroIn 520ms var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ============================================================
   RESPONSIEF
   ============================================================ */
@media (max-width:1080px){
  .sm-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-nav{display:none}
  .sm-burger{display:grid}
}
@media (max-width:900px){
  .sm-hero__grid,.sm-work__grid,.sm-area__grid,.sm-contact__grid,.sm-filter__in{grid-template-columns:1fr}
  .sm-band{grid-template-columns:1fr}
  .sm-band__media{min-height:clamp(260px,58vw,400px)}
  .sm-work__stack{order:-1}
  .sm-footer__grid{grid-template-columns:1fr 1fr}
  /* Hero compacter maken zodat het prijzenbord dichter bij de vouw komt.
     De kop blijft eerst: prijzen zonder de vraag ervoor missen hun context. */
  .sm-hero{padding-block:clamp(2rem,5vw,3rem)}
  .sm-hero__lead{margin-top:var(--space-4)}
  .sm-hero__cta{margin-top:var(--space-5)}
}
@media (max-width:768px){
  /* Het nummer staat al in de gele strook erboven en in het hamburgermenu,
     plus in de vaste balk zodra de hero uit beeld is. Drie keer volstaat. */
  .sm-header__cta{display:none}
  .sm-callbar{display:block}
  body{padding-bottom:72px}
  .sm-board__row{grid-template-columns:1fr;gap:var(--space-1)}
  .sm-board__price{font-size:1.75rem}
  .sm-utility__note{display:none}
  .sm-utility__in{justify-content:flex-start;gap:var(--space-3)}
  .sm-utility__msg{font-size:var(--fs-2xs);letter-spacing:.06em}
  /* Op een telefoon blijft alleen de depannagekant staan. De afspraakknop
     zit daar al in de hero en in het menu. */
  .sm-utility__action--shop{display:none}
}
@media (max-width:560px){
  .sm-grid4{grid-template-columns:1fr}
  .sm-footer__grid{grid-template-columns:1fr}
  .sm-hero__cta .sm-btn{width:100%}
  /* Deze regel staat ook in de filtersectie. Op een klein scherm telt elke pixel
     boven de vouw zwaarder dan de herhaling. */
  .sm-hero__sub{display:none}
  .sm-ph{padding:var(--space-6) var(--space-5);min-height:180px}
  .sm-ph__what{font-size:var(--fs-md)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .sm-rule{transform:scaleX(1)}
  .sm-board__top{transform:scaleX(1)}
}

/* ============================================================
   ONDERDELEN VOOR DE BINNENPAGINA'S. Toegevoegd 20/08.
   ============================================================ */

/* Actieve pagina in de navigatie. Zonder dit weet je op een
   binnenpagina niet waar je staat. */
.sm-nav__link[aria-current="page"]{border-bottom-color:var(--sm-orange)}
.sm-mobile__row[aria-current="page"]{color:var(--orange-700)}

/* ---- KRUIMELPAD ----
   De navigatie-analyse merkte op dat /diensten/onderhoud-en-herstellingen/
   twee niveaus diep ligt zonder dat de pagina dat toont. */
.sm-crumbs{
  border-bottom:1px solid var(--neutral-100);
  background:var(--neutral-0);
}
.sm-crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  list-style:none;margin:0;padding-block:var(--space-3);
  font-size:var(--fs-2xs);color:var(--text-muted);
}
.sm-crumbs a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid transparent}
.sm-crumbs a:hover{color:var(--sm-black);border-bottom-color:var(--sm-orange)}
.sm-crumbs [aria-current="page"]{color:var(--sm-black);font-weight:600}
.sm-crumbs svg{width:12px;height:12px;color:var(--neutral-200)}

/* ---- PAGINAKOP ----
   Smaller dan de hero van de home. Eén kolom, want een binnenpagina
   opent met wat ze is, niet met een tweede blikvanger. */
.sm-phero{
  padding-block:clamp(2.5rem,5vw,4rem);
  background:var(--neutral-25);
  border-bottom:1px solid var(--neutral-100);
}
/* Het tekstblok begrenst zichzelf, maar staat in de container. Zet je
   allebei op hetzelfde element, dan overschrijft 46rem de containerbreedte
   en komt de kop gecentreerd te staan in plaats van links uitgelijnd. */
.sm-phero__in{max-width:46rem}
/* Paginakop met een beeld ernaast. */
.sm-phero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.sm-phero__beeld{margin:0;border-radius:var(--radius-card);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.12);border:1px solid var(--neutral-100)}
.sm-phero__beeld img{display:block;width:100%;height:clamp(220px,24vw,320px);object-fit:cover;object-position:center 45%}
.sm-phero h1{margin-top:var(--space-3)}
.sm-phero__lead{margin-top:var(--space-5);font-size:var(--fs-xl);line-height:1.5;color:var(--text-body)}
.sm-phero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* ---- TEKSTBLOK OP TWEE KOLOMMEN ----
   Kop links, tekst rechts. Houdt regellengte onder de 75 tekens,
   de bevinding uit de ui-review van 14/08. */
.sm-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.sm-two__body > * + *{margin-top:var(--space-5)}
.sm-two__body p{max-width:62ch}

/* ---- VEELGESTELDE VRAGEN ----
   Accordion op <details>, zodat het zonder javascript werkt. */
/* Gecentreerd blok, tekst binnenin blijft links uitgelijnd. Een vraag
   die je moet lezen zet je niet gecentreerd. */
.sm-faq{margin-top:var(--space-10);border-top:1px solid var(--neutral-100);max-width:38rem;margin-inline:auto}
.sm-head--mid{margin-inline:auto;text-align:center}
.sm-head--mid .sm-rule{margin-inline:auto;transform-origin:center}
.sm-faq details{border-bottom:1px solid var(--neutral-100)}
.sm-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-5) 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);
  color:var(--sm-black);
}
.sm-faq summary::-webkit-details-marker{display:none}
.sm-faq summary:hover{color:var(--orange-700)}
.sm-faq summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2px solid var(--sm-orange);border-bottom:2px solid var(--sm-orange);
  transform:rotate(45deg);margin-right:4px;
  transition:transform var(--dur-ui) var(--ease-standard);
}
.sm-faq details[open] summary::after{transform:rotate(-135deg)}
/* Antwoord vult de volle breedte van het blok. De regellengte wordt
   begrensd door het blok zelf, niet door een tweede maximum. Op 38rem
   met 16 px komt dat op ongeveer 75 tekens. */
.sm-faq__a{padding:0 0 var(--space-6);font-size:var(--fs-md);line-height:1.7;color:var(--text-body)}
.sm-faq__a > * + *{margin-top:var(--space-3)}

/* ---- FORMULIER ----
   Labels staan boven het veld, niet erin. Een placeholder als label
   verdwijnt zodra je typt en dat kost invullers. */
.sm-form{display:grid;gap:var(--space-5)}
.sm-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.sm-field{display:flex;flex-direction:column;gap:var(--space-2)}
.sm-field label{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--sm-black);
}
.sm-field input,.sm-field select,.sm-field textarea{
  font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-body);
  background:var(--sm-white);
  border:1px solid var(--neutral-200);border-radius:var(--radius-control);
  padding:11px 13px;width:100%;
  transition:border-color var(--dur-state) var(--ease-standard),box-shadow var(--dur-state) var(--ease-standard);
}
.sm-field textarea{min-height:110px;resize:vertical}
.sm-field input:focus,.sm-field select:focus,.sm-field textarea:focus{
  outline:none;border-color:var(--sm-black);
  box-shadow:0 0 0 3px var(--orange-100);
}
.sm-field__hint{font-size:var(--fs-2xs);color:var(--text-muted)}
.sm-form__foot{margin-top:var(--space-2)}
.sm-form__note{margin-top:var(--space-4);font-size:var(--fs-xs);line-height:1.6;color:var(--text-muted);max-width:46ch}

/* ---- GEGEVENSBLOK ---- */
/* Blijft bovenaan de sectie hangen terwijl de aanvraag ernaast doorscrollt,
   zodat het nummer altijd in beeld staat. Vraagt align-items:start op de
   grid, want een uitgerekte cel kan niet plakken. */
.sm-contact__grid--top{align-items:start}
.sm-vcard{
  background:var(--neutral-25);border:1px solid var(--neutral-100);
  border-radius:var(--radius-card);padding:var(--space-8);
  position:sticky;top:calc(var(--header-h) + var(--space-5));align-self:start;
}
.sm-vcard dl{display:grid;gap:var(--space-5);margin:0}
.sm-vcard dt{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--text-muted);
}
.sm-vcard dd{margin:2px 0 0;font-size:var(--fs-md);color:var(--sm-black)}
.sm-vcard a{color:var(--sm-black);text-decoration:none;border-bottom:2px solid var(--sm-orange)}

/* ---- LIJST MET VINKJES ---- */
/* Open vraag aan de klant, in plaats van een gestreepte plaatshouder.
   Zachter in het ontwerp, even zichtbaar in het gesprek. */
.sm-vraag{
  border-left:3px solid var(--sm-orange);
  background:var(--orange-50);
  padding:var(--space-5) var(--space-6);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
}
.sm-vraag p{margin-top:var(--space-3);font-size:var(--fs-xs);line-height:1.6;color:var(--text-body)}
.sm-vraag .sm-ph__badge{margin-bottom:0}

/* ---- OPSOMMING ----
   Het bolletje staat absoluut gepositioneerd in plaats van als kolom in een
   raster. Met een raster werd een <strong> aan het begin van de regel een
   eigen kolom, waardoor de tekst uit elkaar viel. Nu loopt de regel gewoon
   door en staat het bolletje ernaast.
   Eén kleur, klein en massief geel. Overal op de site hetzelfde. */
.sm-check{list-style:none;margin-top:var(--space-5);display:grid;gap:var(--space-4)}
.sm-check li{
  position:relative;padding-left:22px;
  font-size:var(--fs-sm);line-height:1.65;color:var(--text-body);
}
.sm-check li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:999px;background:var(--sm-orange);
}
.sm-dark .sm-check li{color:var(--neutral-200)}

@media (max-width:900px){
  .sm-two{grid-template-columns:1fr;gap:var(--space-6)}
  .sm-phero__grid{grid-template-columns:1fr}
  /* Plakken heeft geen zin in één kolom, dan duwt het blok de aanvraag weg. */
  .sm-vcard{position:static}
}
@media (max-width:560px){
  .sm-form__row{grid-template-columns:1fr}
  .sm-phero__cta .sm-btn{width:100%}
}

/* ============================================================
   STAPPEN. Genummerde reeks, voor een verloop dat de lezer
   in de juiste volgorde moet zien. Breekt het ritme van de
   twee-koloms secties.
   ============================================================ */
.sm-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-6);margin-top:var(--space-12);counter-reset:stap;
}
.sm-step{position:relative;padding-top:var(--space-8);border-top:2px solid var(--neutral-100)}
.sm-step::before{
  counter-increment:stap;content:counter(stap);
  position:absolute;top:calc(var(--space-8) * -0.5 - 12px);left:0;
  width:38px;height:38px;border-radius:999px;
  background:var(--sm-orange);color:var(--sm-black);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);
}
.sm-step h3{font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.05em}
.sm-step p{margin-top:var(--space-3);font-size:var(--fs-sm);line-height:1.6;color:var(--text-body)}
.sm-dark .sm-step{border-top-color:var(--neutral-700)}
.sm-dark .sm-step p{color:var(--neutral-200)}

/* ============================================================
   STATEMENT. Eén zin over de volle breedte, als adempauze
   tussen twee inhoudelijke secties.
   ============================================================ */
/* Geen geel volvlak. Geel is in deze huisstijl gereserveerd voor accenten
   en CTA's. Een gele sectie pal onder de hero trok de aandacht weg van de
   belknop, precies het omgekeerde van wat deze pagina moet doen. Het blok
   werkt nu als een pull quote: rustig vlak, oranje accentstreep. */
.sm-statement{
  background:var(--neutral-0);color:var(--sm-black);
  border-block:1px solid var(--neutral-100);
  padding-block:clamp(2.75rem,5vw,4.5rem);
}
/* Twee kolommen: de uitspraak links, de onderbouwing rechts. In één kolom
   bleef de rechterhelft leeg en oogde het blok als een losse alinea. */
.sm-statement__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
}
.sm-statement__zin{
  position:relative;padding-top:var(--space-6);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,2.9vw,2.1rem);line-height:1.16;
  letter-spacing:var(--ls-display);
}
.sm-statement__zin::before{
  content:"";position:absolute;top:0;left:0;
  width:56px;height:3px;background:var(--sm-orange);
}
/* Specifieker dan .sm-statement__zin, anders erft de toelichting het
   displaylettertype en staat alles even groot. */
.sm-statement .sm-statement__note{
  font-family:var(--font-body);font-weight:400;
  font-size:var(--fs-md);line-height:1.7;letter-spacing:0;
  color:var(--text-body);
  max-width:46ch;padding-top:var(--space-6);
}
@media (max-width:760px){
  .sm-statement__in{grid-template-columns:1fr;gap:var(--space-5)}
  .sm-statement .sm-statement__note{padding-top:0}
}
@media (max-width:560px){
  .sm-steps{gap:var(--space-10)}
}

/* ============================================================
   SITEMAPPAGINA. Drie groepen naast elkaar in plaats van drie
   identieke secties onder elkaar.
   ============================================================ */
.sm-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-10);margin-top:var(--space-12)}
.sm-map__groep h2{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--orange-700);padding-bottom:var(--space-3);
  border-bottom:2px solid var(--sm-orange);
}
.sm-map__groep ul{list-style:none;margin-top:var(--space-5);display:grid;gap:var(--space-5)}
.sm-map__groep a{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);
  color:var(--sm-black);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color var(--dur-state) var(--ease-standard);
}
.sm-map__groep a:hover{border-bottom-color:var(--sm-orange)}
.sm-map__groep span{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted)}

/* ============================================================
   ANKERS. De kop plakt bovenaan, dus een sectie waarnaar
   gesprongen wordt moet ruimte houden. Zonder dit verdwijnt de
   titel van de aanvraagsectie onder de header.
   ============================================================ */
[id]{scroll-margin-top:calc(var(--header-h) + var(--space-6))}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ============================================================
   KAART. Laadt pas na een klik. Een ingesloten Google-kaart zet
   cookies zodra de pagina opent, en dat mag niet vóór toestemming.
   Daarom eerst een stille plaat met een knop.
   ============================================================ */
.sm-kaart__kolom{align-self:center}
.sm-kaart{
  position:relative;border:1px solid var(--neutral-200);
  border-radius:var(--radius-card);overflow:hidden;
  background:var(--neutral-50);
}
/* Zwart-wit, want de standaardkleuren van een kaart botsen met een huisstijl
   van zwart, wit en geel. Iets meer contrast zodat de wegen leesbaar blijven. */
.sm-kaart iframe{
  display:block;width:100%;height:clamp(280px,32vw,400px);border:0;
  filter:grayscale(1) contrast(1.08);
}
/* Eigen speldje in plaats van dat van OpenStreetMap, dat mee zou vergrijzen.
   Het kader is op de werkplaats gecentreerd, dus 50/50 klopt exact. Daarom
   staat de kaart vast: kon je ze verslepen, dan wees het speldje meteen de
   verkeerde plek aan. Wie wil verkennen klikt door naar de grote kaart. */
.sm-kaart iframe{pointer-events:none}
.sm-kaart__vlak{position:absolute;inset:0;z-index:2}
.sm-kaart__pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);
  pointer-events:none;z-index:3;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.sm-kaart__pin svg{display:block;width:40px;height:40px}
.sm-kaart__pin-vorm{fill:var(--sm-orange);stroke:var(--sm-black);stroke-width:1.1}
.sm-kaart__pin-oog{fill:var(--sm-black)}
.sm-kaart__vlak:focus-visible{outline:3px solid var(--sm-black);outline-offset:-3px}
.sm-kaart__knop{
  display:grid;justify-items:center;gap:var(--space-3);
  padding:var(--space-8) var(--space-6);
  background:none;border:0;cursor:pointer;font:inherit;color:inherit;width:100%;
}
.sm-kaart__ico{
  width:44px;height:44px;border-radius:999px;
  background:var(--sm-orange);color:var(--sm-black);
  display:grid;place-items:center;
}
.sm-kaart__ico svg{width:22px;height:22px}
.sm-kaart__titel{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-lg);text-transform:uppercase;letter-spacing:.04em;
}
.sm-kaart__uitleg{font-size:var(--fs-xs);line-height:1.55;color:var(--text-muted);max-width:38ch}
.sm-kaart__knop:hover .sm-kaart__titel{color:var(--orange-700)}
.sm-kaart__bron{margin-top:var(--space-3);font-size:var(--fs-2xs);color:var(--text-muted)}
.sm-kaart__bron a{color:var(--text-muted)}

.sm-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;
}

/* "Ook nodig?" stond als lopende tekst voor een rij hoofdletterlinks. Nu een
   klein label erboven, zodat de links een groep vormen in plaats van een
   staart aan een zin. */
.sm-verder__label{
  margin-top:var(--space-8);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--text-muted);
}
.sm-verder{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);margin-top:var(--space-2)}

/* ---- BEELD IN EEN TEKSTSECTIE ----
   Anders dan het beeld naast een paginakop. Daar houdt een vaste hoogte de
   kop compact, hier niet: het beeld is het onderwerp. Dus geen bijsnijden,
   de foto houdt haar eigen verhouding en wordt zo groot als de kolom toelaat.
   Op de foto van de ophanging werd anders het hoofd van de monteur afgesneden. */
.sm-beeldblok{
  margin:0;border:1px solid var(--neutral-100);
  border-radius:var(--radius-card);overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  align-self:center;
}
.sm-beeldblok img{display:block;width:100%;height:auto}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor een bot. Niet met
   display:none, want sommige bots slaan verborgen velden over. */
.sm-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}