/* ==========================================================================
   Van de Bovenkamp Bouw & Timmerwerken – stylesheet
   ========================================================================== */

:root {
  --navy: #041435;
  --navy-2: #0A1C44;
  --navy-3: #0E2152;
  --tint: #E8ECFB;
  --light: #F4F4F4;
  --white: #FFFFFF;
  --blue: #153BF4;
  --blue-dark: #0F2FD0;
  --blue-soft: #B9C6FF;
  --blue-line: #8FA3FF;
  --orange: #EF9235;
  --ink: #041435;
  --ink-2: #2E3A55;
  --ink-3: #5B6478;
  --on-dark: #F4F4F4;
  --on-dark-2: #D3D8E4;
  --on-dark-3: #C3CEFF;
  --line: #D5D9E2;
  --line-soft: #E4E7EE;
  --line-dash: #B4BCCF;
  --line-dark: #22335E;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Urbanist', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1280px;
  --gutter: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }

a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-dark a:focus-visible,
.on-dark button:focus-visible { outline-color: var(--blue-line); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
.dot { color: var(--orange); }
.dot--blue { color: var(--blue); }
.dot--navy { color: var(--navy); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--white); color: var(--ink); padding: 12px 20px; border-radius: 4px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Schuine knoppen ---------- */
.btn-sk { transform: skewX(-10deg); }
.btn-sk > * { transform: skewX(10deg); }

.sq {
  width: 44px; height: 44px; flex: none;
  border: 1.5px solid var(--navy); border-radius: 4px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .12s ease-out;
}
.sq svg { stroke: var(--navy); transition: stroke .25s var(--ease), transform .35s var(--ease); }
.sq:hover { background: var(--blue); border-color: var(--blue); }
.sq:hover svg { stroke: var(--white); }
.sq--light { border-color: var(--line); }

.icn {
  width: 44px; height: 44px; flex: none; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), transform .12s ease-out;
}
.icn svg { stroke: var(--white); transition: stroke .25s var(--ease), transform .35s var(--ease); }
.icn:hover { background: var(--blue); }
.icn--white { background: var(--white); }
.icn--white svg { stroke: var(--navy); }

/* ---------- Speciale CTA-knop ---------- */
.cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 20px;
  min-height: 64px; padding: 6px 28px 6px 6px;
  background: var(--navy); color: var(--white); border: 0; border-radius: 4px;
  text-decoration: none; font-family: var(--body); font-weight: 700; font-size: 18px;
  overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: skewX(-10deg);
  transition: transform .12s ease-out;
}
.cta-fill {
  position: absolute; z-index: 0; left: 6px; top: 6px; bottom: 6px; width: 52px;
  border-radius: 2px; background: var(--blue);
  transition: width .38s var(--ease);
}
.cta-box {
  position: relative; z-index: 1; width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease-out;
}
.cta-label { position: relative; z-index: 1; white-space: nowrap; transition: opacity .15s ease-out; }
.cta-run {
  position: absolute; z-index: 1; inset: 6px;
  display: flex; align-items: center; justify-content: space-evenly;
  opacity: 0; transition: opacity .2s ease-out .12s;
}
.cta-label, .cta-box > svg, .cta-run > svg { transform: skewX(10deg); }
.cta-run svg { opacity: .3; animation: ctaWave 1.2s ease-in-out infinite; }
.cta-run svg:nth-child(2) { animation-delay: .1s; }
.cta-run svg:nth-child(3) { animation-delay: .2s; }
.cta-run svg:nth-child(4) { animation-delay: .3s; }
.cta-run svg:nth-child(5) { animation-delay: .4s; }
.cta-run svg:nth-child(6) { animation-delay: .5s; }
@keyframes ctaWave { 0%, 100% { opacity: .3; } 35% { opacity: 1; } }
@media (hover: hover) {
  .cta:hover .cta-fill { width: calc(100% - 12px); }
  .cta:hover .cta-box, .cta:hover .cta-label { opacity: 0; }
  .cta:hover .cta-run { opacity: 1; }
}
.cta:focus-visible .cta-fill { width: calc(100% - 12px); }
.cta:focus-visible .cta-box, .cta:focus-visible .cta-label { opacity: 0; }
.cta:focus-visible .cta-run { opacity: 1; }
.cta:focus-visible { outline: 3px solid var(--blue-line); outline-offset: 3px; }
.cta:active { transform: skewX(-10deg) scale(.96); }
.cta--block { display: flex; width: calc(100% - 12px); margin-left: 6px; }

/* ==========================================================================
   HERO + HEADER
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 810px; display: flex; flex-direction: column;
  background: var(--navy) url('../images/bus-bos.webp') center 62% / cover no-repeat;
  color: var(--on-dark);
}
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,20,53,.88) 0%, rgba(4,20,53,.55) 45%, rgba(4,20,53,.15) 100%),
    linear-gradient(0deg, rgba(4,20,53,.85) 0%, rgba(4,20,53,0) 40%);
}
.hero__mark { display: none; position: absolute; pointer-events: none; }

/* Header: vast bovenin; tijdens scrollen een zwevende, doorzichtige donkerblauwe balk */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.site-header__bar {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding-top: 24px; padding-bottom: 24px;
  transition: padding .35s var(--ease), margin .35s var(--ease);
}
.site-header__bar > * { position: relative; z-index: 1; }
/* Schuine, doorzichtige achtergrond (zelfde hoek als de knoppen), alleen als de balk zweeft */
.site-header__bar::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; left: calc(var(--gutter) - var(--bar-pl)); right: calc(var(--gutter) - var(--bar-pr));
  transform: skewX(-10deg); border-radius: 4px;
  background: rgba(4, 20, 53, .55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 16px 40px -20px rgba(4, 20, 53, .6);
  opacity: 0; transition: opacity .35s var(--ease);
}
/* Blauwe balk bovenaan met USP's en slogan; klapt in zodra de navigatie gaat zweven */
.topbar {
  background: var(--blue); color: var(--white); overflow: hidden;
  max-height: 40px; transition: max-height .35s var(--ease);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 40px; }
.topbar__usps { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.topbar__usps li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.topbar__usps svg { stroke: var(--white); flex: none; }
.topbar__slogan { font-size: 14px; font-weight: 700; white-space: nowrap; }
.site-header.is-stuck .topbar { max-height: 0; }
.site-header__logo { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; }
.site-header__logo img { height: 54px; width: auto; transition: height .35s var(--ease); }
.site-header .menu-card { top: 128px; }
.site-header.is-stuck .menu-card { top: 96px; }
@media (prefers-reduced-motion: reduce) {
  .site-header__bar, .site-header__bar::before, .site-header__logo img { transition: none; }
}
.site-header { --bar-pl: 18px; --bar-pr: 14px; }
.site-header.is-stuck .site-header__bar { margin-top: 12px; padding-top: 10px; padding-bottom: 10px; }
.site-header.is-stuck .site-header__bar::before { opacity: 1; }
.site-header.is-stuck .site-header__logo img { height: 46px; }
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }

/* Witte contactknop met lichtgrijs vlak en telefoon */
.hdr-contact {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 5px 5px 5px 18px;
  background: var(--white); color: var(--navy); border-radius: 4px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), transform .12s ease-out;
}
.hdr-contact > .hdr-contact__box {
  width: 38px; height: 38px; flex: none; border-radius: 2px; background: var(--light);
  display: flex; align-items: center; justify-content: center; transform: none;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hdr-contact__box svg { stroke: var(--navy); transform: skewX(10deg); transform-origin: 50% 50%; transition: stroke .25s var(--ease); }
@media (hover: hover) {
  .hdr-contact:hover .hdr-contact__box { background: var(--blue); box-shadow: 0 6px 14px -6px rgba(21, 59, 244, .6); }
  .hdr-contact:hover .hdr-contact__box svg { stroke: var(--white); }
  .hdr-contact:hover .hdr-contact__box svg { animation: hdrRing .7s var(--ease); }
}
.hdr-contact:focus-visible .hdr-contact__box { background: var(--blue); }
.hdr-contact:focus-visible .hdr-contact__box svg { stroke: var(--white); }
.hdr-contact:active { transform: skewX(-10deg) scale(.96); }
@keyframes hdrRing {
  0%, 100% { transform: skewX(10deg) rotate(0); }
  20% { transform: skewX(10deg) rotate(-14deg); }
  40% { transform: skewX(10deg) rotate(12deg); }
  60% { transform: skewX(10deg) rotate(-8deg); }
  80% { transform: skewX(10deg) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-contact:hover .hdr-contact__box svg { animation: none; }
}
.hdr-call {
  display: none; -webkit-tap-highlight-color: transparent; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: var(--white); border-radius: 4px; transition: background-color .25s var(--ease), transform .12s ease-out;
}
.hdr-call svg { stroke: var(--navy); transition: stroke .25s var(--ease); }
.hdr-call:hover { background: var(--blue); }
.hdr-call:hover svg { stroke: var(--white); }
.hdr-call:active { transform: skewX(-10deg) scale(.94); }
.hdr-contact:focus-visible, .hdr-call:focus-visible { outline: 3px solid var(--blue-line); outline-offset: 3px; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--blue); color: var(--white); border: 0; border-radius: 4px;
  padding: 0 18px; min-height: 48px; font-size: 15px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .12s ease-out;
}
.menu-btn svg { stroke: var(--white); transition: stroke .18s ease-out; }
.menu-btn:hover { background: var(--white); color: var(--navy); }
.menu-btn:hover svg { stroke: var(--navy); }
/* Plus/kruisje draait een keer rond bij hover */
.menu-btn svg { transition: stroke .18s ease-out, transform .55s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .menu-btn:hover svg { transform: skewX(10deg) rotate(180deg); }
}

/* Knoppen met tekst: tekst wordt iets dikker bij hover (zonder dat de knop verspringt) */
.menu-btn__text, .hdr-contact__text, .chip, .filter button {
  -webkit-text-stroke: 0 currentColor;
  transition-property: background-color, color, -webkit-text-stroke-width;
  transition-duration: .2s; transition-timing-function: ease-out;
}
@media (hover: hover) {
  .menu-btn:hover .menu-btn__text, .hdr-contact:hover .hdr-contact__text,
  .chip:hover, .filter button:hover { -webkit-text-stroke-width: .5px; }
}
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

.menu-card {
  position: absolute; top: 88px; right: max(32px, calc((100% - var(--wrap)) / 2 + 32px));
  width: min(840px, calc(100% - 64px));
  background: var(--white); color: var(--ink); border-radius: 4px;
  box-shadow: 0 32px 64px -24px rgba(4,20,53,.5);
  padding: 48px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px;
}
.menu-card[hidden] { display: none; }
.menu-card__label { font-size: 15px; font-weight: 700; color: var(--blue); margin-bottom: 12px; display: block; }
.menu-card__links { display: flex; flex-direction: column; gap: 4px; }
.menu-l {
  position: relative; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: 32px; line-height: 1.1; min-height: 52px; display: flex; align-items: center;
  transition: color .18s ease-out;
}
.menu-dot {
  position: absolute; left: -22px; top: 50%; margin-top: -4px; width: 8px; height: 8px;
  background: var(--blue); opacity: 0; transform: translateX(-8px) skewX(-10deg);
  transition: opacity .18s ease-out, transform .2s ease-out;
}
.menu-l:hover { color: var(--blue); }
.menu-l:hover .menu-dot { opacity: 1; transform: translateX(0) skewX(-10deg); }
.menu-card__contact {
  display: flex; flex-direction: column; gap: 16px;
  padding-left: 40px; border-left: 1px solid var(--line);
}
.menu-card__contact p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.menu-card__contact .plain {
  color: var(--ink); font-weight: 700; font-size: 17px; text-decoration: none;
  min-height: 32px; display: inline-flex; align-items: center;
}
.menu-card__contact .plain:hover { color: var(--blue); }
.menu-card__contact .cta { gap: 14px; padding-right: 20px; font-size: 17px; }
.menu-card__cta { margin-top: auto; padding-top: 16px; }

.hero__body { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.hero__body { padding-top: 142px; }
.hero__body > .wrap { width: 100%; }
.hero__title-wrap { padding-top: 140px; }
.hero h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(56px, 6.6vw, 96px); line-height: .98; color: var(--white); max-width: 9em;
}
.hero__bottom {
  padding-bottom: 48px; display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.hero__intro { font-size: 17px; line-height: 1.5; color: var(--on-dark-2); max-width: 18em; }

/* Contactblokje */
/* Zwevende WhatsApp-knop rechtsonder */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 24px 8px 8px; border-radius: 4px;
  background: #25D366; color: var(--white); text-decoration: none;
  transform: skewX(-10deg);
  box-shadow: 0 16px 32px -14px rgba(4, 20, 53, .55);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), transform .12s ease-out;
  animation: waIn .6s var(--ease) .8s both;
}
.wa-float:hover { background: #1DA851; }
.wa-float:active { transform: skewX(-10deg) scale(.96); }
.wa-float:focus-visible { outline: 3px solid var(--blue-line); outline-offset: 3px; }
.wa-float__av {
  position: relative; flex: none; width: 56px; height: 56px; border-radius: 3px; overflow: hidden; background: #DDE2EC;
}
.wa-float__av img {
  position: absolute; width: 470%; max-width: none; height: auto; left: -185%; top: -45%;
  transform: skewX(10deg) scale(1.15); transform-origin: 50% 13.5%;
}
.wa-float__text { display: flex; flex-direction: column; gap: 2px; transform: skewX(10deg); line-height: 1.25; }
.wa-float__text strong { font-size: 16px; font-weight: 700; -webkit-text-stroke: 0 currentColor; transition: -webkit-text-stroke-width .2s ease-out; }
.wa-float__text span { font-size: 15px; font-weight: 500; }
@media (hover: hover) { .wa-float:hover .wa-float__text strong { -webkit-text-stroke-width: .5px; } }
@keyframes waIn { from { opacity: 0; transform: skewX(-10deg) translateY(16px); } to { opacity: 1; transform: skewX(-10deg); } }
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }

.chip-av {
  position: relative; display: inline-block; flex: none; width: 44px; height: 44px;
  border-radius: 4px; overflow: hidden; background: #DDE2EC;
}
.chip-av img {
  position: absolute; width: 470%; max-width: none; height: auto; left: -185%; top: -45%;
  transform: skewX(10deg) scale(1.15); transform-origin: 50% 13.5%;
}

/* ==========================================================================
   SECTIES
   ========================================================================== */
.section-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: 40px; line-height: 1;
}

/* Introductie */
.intro { background: var(--tint); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.intro__text {
  padding: 96px 64px 96px 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3;
  font-weight: 500; letter-spacing: -0.01em; max-width: 24em;
}
.intro__side {
  border-left: 1px solid var(--line-dash); padding: 96px 0 96px 40px;
  display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.5;
}
.intro__side strong { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 22px; }
.intro__side a { color: var(--ink); text-underline-offset: 3px; }

/* Diensten */
.services { padding: 120px 0; }
.services__head { margin-bottom: 24px; }
.services__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; height: 520px; }
.dcard {
  position: relative; display: block; border-radius: 4px; overflow: hidden;
  text-decoration: none; color: var(--ink); min-height: 340px;
}
.dcard__img { position: absolute; inset: 0; transition: transform .5s var(--ease); }
.dcard__img img { width: 100%; height: 100%; object-fit: cover; }
.dcard:hover .dcard__img { transform: scale(1.04); }
.dcard__panel {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  border-radius: 4px; padding: 16px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}
.dcard__panel--white { background: var(--white); padding: 20px; }
.dcard__panel--soft { background: var(--white); }
.dcard__panel--orange { background: var(--white); }
.dcard__panel--tint { background: var(--white); }
.dcard__text { display: flex; flex-direction: column; gap: 4px; }
.dcard__title { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-size: 20px; line-height: 1.1; }
.dcard__panel--white .dcard__title { font-size: 26px; line-height: 1.05; }
.dcard__desc { font-size: 14px; line-height: 1.4; }
.dcard__panel--white .dcard__desc { font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 26em; }
.dcard:hover .sq { background: var(--blue); border-color: var(--blue); }
.dcard:hover .sq svg { stroke: var(--white); }

/* Muis volgen (alleen dienstkaarten) */
.follow {
  --mx: 0; --my: 0; --d: 10px; --lift: 0px; --sc: 1;
  transform: perspective(1000px)
    translate3d(calc(var(--mx) * var(--d)), calc(var(--my) * var(--d) + var(--lift)), 0)
    scale(var(--sc)) rotateY(calc(var(--mx) * 3deg)) rotateX(calc(var(--my) * -3deg));
  transition: transform .5s var(--ease), box-shadow .3s ease-out;
}
.follow:hover { --lift: -6px; --sc: 1.02; box-shadow: 0 24px 48px -24px rgba(4,20,53,.45); }

/* Meer dan timmerwerk */
.extra { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.extra__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 80px; }
.extra__main .extra__label { font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--blue); margin-bottom: -8px; }
.extra__cta { margin-top: 8px; padding-left: 6px; }
.extra__main {
  padding: 96px 0;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
.extra__main h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-size: 36px; line-height: 1.08; max-width: 14em; }
.extra__main p { font-size: 18px; line-height: 1.65; color: var(--ink-2); max-width: 32em; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips__label { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.chips__more { font-size: 14px; color: var(--ink-3); }
.chip {
  background: var(--tint); border-radius: 2px; padding: 5px 10px; font-size: 14px; font-weight: 600;
  transition: background-color .18s ease-out, color .18s ease-out, -webkit-text-stroke-width .18s ease-out;
}
.chip:hover { background: var(--navy); color: var(--white); }
.extra__photo { padding: 48px 0; display: flex; }
.extra__photo div { position: relative; flex: 1 1 auto; border-radius: 4px; overflow: hidden; min-height: 380px; }
.extra__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* 10+ en kwaliteit */
.quality { background: var(--navy); color: var(--on-dark); }
.quality__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.quality__num { display: flex; flex-direction: column; gap: 16px; }
.quality__num span {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.05em;
  font-size: clamp(120px, 12vw, 176px); line-height: .85; color: var(--blue-line);
}
.quality__num p { font-size: 18px; line-height: 1.5; color: var(--on-dark-2); }
.quality__right { display: flex; flex-direction: column; gap: 24px; }
.quality__right h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; font-size: 28px; line-height: 1.15; color: var(--blue-line); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  background: var(--blue-soft); color: var(--ink); border-radius: 4px; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background-color .2s ease-out;
}
.tile:hover { background: #CDD7FF; }
.tile strong { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-size: 19px; line-height: 1.1; }
.tile span { display: flex; flex-wrap: wrap; gap: 6px; }
.tile em { font-style: normal; background: rgba(4,20,53,.12); border-radius: 2px; padding: 3px 9px; font-size: 13px; font-weight: 600; }

/* Statement */
.statement { border-bottom: 1px solid var(--line); }
.statement__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.statement__text {
  padding: 160px 64px 160px 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.25;
  font-weight: 600; letter-spacing: -0.02em; max-width: 22em;
}
.statement__side { border-left: 1px dashed var(--line-dash); }
.st-words { display: block; view-timeline-name: --stmt; }
.w { display: inline-block; }

/* Projecten */
.projects { padding: 120px 0; timeline-scope: --prs; }
.projects__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 8px; }
.filter { display: flex; gap: 28px; }
.filter button {
  position: relative; background: none; border: 0; padding: 0; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.filter button[aria-pressed="true"] { font-weight: 700; }
.filter button[aria-pressed="true"]::after {
  content: ''; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2px;
  background: var(--navy); transform: skewX(-10deg);
}
.projects__count { font-size: 15px; color: var(--ink-3); margin-bottom: 24px; }
.pr-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pcard {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .3s ease-out;
}
.pcard:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 48px -24px rgba(4,20,53,.45); }
.pcard[hidden] { display: none; }
.pcard__img { height: 320px; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__body { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 20px 22px; }
.pcard__body strong { display: block; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 20px; line-height: 1.2; }
.pcard__body small { display: block; font-size: 14px; font-weight: 600; color: var(--ink-3); margin-top: 4px; }
.pcard:hover .sq { background: var(--blue); border-color: var(--blue); }
.pcard:hover .sq svg { stroke: var(--white); }
.projects__nav { display: none; }

/* Voor wie */
.audience { background: var(--tint); padding: 128px 0 112px; }
.audience__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: end;
  margin-bottom: 56px;
}
.audience__head h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-size: 56px; line-height: 1; }
.audience__head p { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.aud-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.aud-card {
  background: var(--white); border-radius: 4px; padding: 40px 36px 44px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .4s var(--ease), box-shadow .3s ease-out;
}
.aud-card__num {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  width: 52px; height: 52px; margin-bottom: 16px; border-radius: 4px;
  background: var(--navy); color: var(--white);
  font-family: var(--display); font-weight: 800; font-size: 17px;
  transition: background-color .25s ease-out;
}
.aud-card h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 28px; line-height: 1.1; }
.aud-card p { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
@media (hover: hover) {
  .aud-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(4, 20, 53, .35); }
  .aud-card:hover .aud-card__num { background: var(--blue); }
}
.audience__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 40px; font-size: 17px; }
.audience__more strong { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 20px; }
.audience__more a { color: var(--ink); text-underline-offset: 3px; }

/* Accordeons */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details[open] { background: var(--white); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; }
.acc summary::-webkit-details-marker { display: none; }
.pm {
  width: 40px; height: 40px; flex: none; border: 1.5px solid var(--navy); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.pm svg { stroke: var(--navy); transition: stroke .25s var(--ease), transform .55s var(--ease); }
.pm .pm-v { transition: opacity .2s ease-out; }
details[open] .pm .pm-v { opacity: 0; }
.acc summary:hover .pm { background: var(--blue); border-color: var(--blue); }
.acc summary:hover .pm svg { stroke: var(--white); }
.acc--faq summary { justify-content: space-between; padding: 22px 0; font-size: 19px; font-weight: 700; }
.acc--faq p { padding: 0 64px 24px 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 46em; }

/* Werkwijze */
.process { background: var(--blue); color: var(--white); padding: 112px 0 120px; }
.process__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-bottom: 56px; }
.process__head h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(44px, 5vw, 64px); line-height: 1; }
.process__head p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 26em; }
.ww-steps { display: flex; flex-direction: column; gap: 20px; view-timeline-name: --ww; }
.ww-track { height: 3px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.ww-bar { height: 100%; background: var(--white); transform-origin: left center; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.step {
  background: var(--white); color: var(--ink); border-radius: 4px; padding: 28px 24px 32px;
  display: flex; flex-direction: column; gap: 16px; min-height: 260px;
}
.step__num {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 20px; border-radius: 4px;
  background: var(--tint); color: var(--blue);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.step:hover .step__num { background: var(--blue); color: var(--white); }
.step h3 { margin-top: 8px; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 21px; }
.step p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* CTA-kaart */
.cta-section { padding: 96px var(--gutter) 0; }
.cta-card {
  position: relative; border-radius: 4px; overflow: hidden; min-height: 540px;
  max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-end; padding: 48px;
}
.cta-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.cta-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(270deg, rgba(4, 20, 53, .55) 0%, rgba(4, 20, 53, 0) 50%);
}
.cta-card__content {
  position: relative; z-index: 2; width: min(440px, 100%); background: var(--white); border-radius: 4px; padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.cta-card__content h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-size: 36px; line-height: 1.05; }
.cta-card__content p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.cta-card__direct { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cta-card__direct span { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-right: auto; }

/* FAQ */
.faq { padding: 96px 0 120px; }
.faq__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
.faq__side { display: flex; flex-direction: column; gap: 16px; }
.faq__side h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 22px; }
.faq__side p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.faq__side a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.faq__note { margin-top: 20px; font-size: 14px; color: var(--ink-3); }

/* Footer */
.site-footer { background: var(--navy); padding: 32px; }
.footer-card {
  max-width: 1376px; margin: 0 auto; background: var(--white); border: 1px solid var(--line-soft);
  border-radius: 4px; box-shadow: 0 16px 40px -24px rgba(4,20,53,.25);
  padding: 64px 80px 32px; display: flex; flex-direction: column; gap: 48px;
}
.footer-card__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
.footer-card__brand { display: flex; flex-direction: column; gap: 24px; max-width: 440px; }
.footer-card__brand img { height: 48px; width: auto; align-self: flex-start; }
.footer-card__brand p { font-size: 16px; line-height: 1.6; color: var(--ink-3); }
.footer-card__icons { display: flex; gap: 8px; }
.footer-card__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 72px; }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col h2 { margin-bottom: 12px; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 17px; }
.foot-l {
  color: var(--ink-3); text-decoration: none; font-size: 15px; min-height: 32px;
  display: inline-flex; align-items: center; align-self: flex-start;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 4px) / 0 1.5px;
  transition: background-size .25s ease-out, color .18s ease-out;
}
.foot-l:hover { color: var(--ink); background-size: 100% 1.5px; }
.footer-card__bottom {
  border-top: 1px solid var(--line-soft); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-3);
}
.footer-card__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-card__legal a { color: var(--ink-3); text-underline-offset: 3px; font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
.footer-card__legal a:hover { color: var(--ink); }

/* ==========================================================================
   SCROLLANIMATIES (alleen in browsers die het ondersteunen)
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: riseIn linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .rise-s { animation: riseIn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes riseIn { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

    .w {
      opacity: .12; filter: blur(3px); transform: translateY(.25em);
      animation: wordIn linear both; animation-timeline: --stmt;
      animation-range: cover calc(17% + var(--i) * 1%) cover calc(23% + var(--i) * 1%);
    }
    @keyframes wordIn { to { opacity: 1; filter: none; transform: none; } }

    .step__num {
      animation: numOn linear both; animation-timeline: --ww;
      animation-range: cover calc(23% + var(--i) * 7%) cover calc(26% + var(--i) * 7%);
    }
    .ww-bar { transform: scaleX(0); animation: wwBar linear both; animation-timeline: --ww; animation-range: cover 20% cover 57%; }
    @keyframes wwBar { to { transform: scaleX(1); } }
  }
}
@keyframes numOn { to { background: var(--blue); color: var(--white); } }

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width: 1100px) {
  .cta-card { display: block; min-height: 0; padding: 0; background: var(--white); border: 1px solid var(--line-soft); }
  .cta-card::before { display: none; }
  .cta-card__img { position: static; height: 380px; }
  .cta-card__content { width: 100%; padding: 32px 32px 36px; }
  .audience__head { grid-template-columns: 1fr; }
  .aud-cards { grid-template-columns: 1fr; }
  .site-header__bar { grid-template-columns: 1fr auto; }
  .topbar__slogan { display: none; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; grid-auto-rows: 400px; }
  .extra__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
  .extra__main { padding: 72px 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-card { padding: 48px; }
  .footer-card__top { grid-template-columns: 1fr; gap: 40px; }
  .footer-card__cols { gap: 48px; }
}

/* ==========================================================================
   MOBIEL
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }

  /* Hero: effen donkerblauw met lijntekening */
  .hero { min-height: 0; background-image: none; }
  .hero__scrim { display: none; }
  .hero__mark { display: block; right: -150px; top: 110px; width: 380px; height: auto; opacity: .35; }
  .site-header__bar { padding-top: 16px; padding-bottom: 16px; }
  .site-header__logo img { height: 44px; }
  .menu-btn { padding: 0 16px; }
  .hdr-contact { display: none; }
  .hdr-call { display: inline-flex; }
  .site-header__actions { gap: 8px; }
  .hero__title-wrap { padding-top: 56px; }
  .hero__body { padding-top: 116px; }
  .topbar, .topbar__inner { max-height: 36px; height: 36px; }
  .topbar__inner { justify-content: center; }
  .topbar__usps { gap: 20px; }
  .topbar__usps li { font-size: 13px; }
  .topbar__usps li:nth-child(3), .topbar__slogan { display: none; }
  .site-header.is-stuck .topbar { max-height: 0; }
  .site-header { --bar-pl: 12px; --bar-pr: 10px; }
  .site-header.is-stuck .site-header__bar { margin-top: 8px; padding-top: 8px; padding-bottom: 8px; }
  .site-header.is-stuck .site-header__logo img { height: 40px; }
  .site-header .menu-card { max-height: calc(100dvh - 96px); overflow-y: auto; }
  .site-header.is-stuck .menu-card { margin: 8px 8px 0; }
  .hero h1 { font-size: 50px; }
  .hero__bottom { flex-direction: column; align-items: stretch; gap: 24px; padding-top: 24px; padding-bottom: 32px; }
  .hero__intro { max-width: 22em; }
  .wa-float { right: 12px; bottom: 12px; gap: 12px; padding: 6px 18px 6px 6px; }
  .wa-float__av { width: 46px; height: 46px; }
  .wa-float__text strong { font-size: 14px; }
  .wa-float__text span { font-size: 13px; }
  .chip-av { display: none; }

  .menu-card {
    position: static; width: auto; margin: 0 16px 16px; padding: 24px 20px;
    grid-template-columns: 1fr; gap: 16px;
    box-shadow: 0 24px 48px -20px rgba(4,20,53,.5);
  }
  .menu-card__label { font-size: 14px; margin-bottom: 8px; }
  .menu-l { font-size: 26px; min-height: 48px; padding-left: 18px; }
  .menu-dot { left: 0; }
  .menu-card__contact { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 12px; }
  .menu-card__contact p, .menu-card__contact .plain[href^="mailto"] { display: none; }
  .menu-card__contact .plain { min-height: 44px; font-size: 16px; }
  .menu-card__cta { margin: 0; padding: 0; }

  .intro__grid { grid-template-columns: 1fr; }
  .intro__text { padding: 56px 0 32px; font-size: 24px; line-height: 1.35; }
  .intro__side { border-left: 0; border-top: 1px solid var(--line-dash); padding: 24px 0 56px; font-size: 16px; }
  .intro__side strong { font-size: 20px; }

  .section-title { font-size: 36px; }
  .services { padding: 72px 0; }
  .services__head { margin-bottom: 12px; }
  .services__grid { grid-template-columns: 1fr; grid-auto-rows: 360px; }
  .dcard { min-height: 0; }
  .dcard__panel { left: 10px; right: 10px; bottom: 10px; padding: 14px; }
  .dcard__panel--white { padding: 14px; }
  .dcard__panel--white .dcard__title { font-size: 22px; }
  .dcard__panel--white .dcard__desc { font-size: 14px; color: var(--ink); }

  .extra__grid { grid-template-columns: 1fr; }
  .extra__grid { gap: 0; }
  .extra__main { padding: 56px 0; gap: 20px; }
  .extra__main h2 { font-size: 28px; line-height: 1.1; }
  .extra__main p { font-size: 16px; }
  .extra__photo { display: none; }
  .chips__label { display: none; }

  .quality__grid { grid-template-columns: 1fr; gap: 64px; padding-top: 96px; padding-bottom: 96px; }
  .quality__num span { font-size: 128px; }
  .quality__right h2 { font-size: 26px; }
  .tiles { grid-template-columns: 1fr; gap: 12px; }
  .tile { padding: 18px 20px; gap: 12px; }
  .tile strong { font-size: 20px; }

  .statement__grid { grid-template-columns: 1fr; }
  .statement__side { display: none; }
  .statement__text { padding: 96px 0; font-size: 28px; line-height: 1.28; }

  /* Projecten als slider */
  .projects { padding: 72px 0; }
  .projects__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 0; }
  .filter { flex-wrap: wrap; gap: 0 20px; }
  .projects__count { font-size: 14px; margin: 8px 0 0; }
  .pr-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    margin: 0 -16px; padding: 16px 16px 20px; scroll-padding-left: 16px;
    scroll-timeline: --prs x; scrollbar-width: none;
  }
  .pr-track::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 300px; scroll-snap-align: start; }
  .pcard:hover { transform: none; box-shadow: none; }
  .pcard__img { height: 220px; }
  .pcard__body { padding: 16px; gap: 12px; }
  .pcard__body strong { font-size: 19px; }
  .projects__nav { display: flex; align-items: center; gap: 16px; }
  .pr-progress { flex: 1 1 auto; height: 4px; background: var(--tint); border-radius: 2px; overflow: hidden; }
  .pr-bar { height: 100%; background: var(--blue); border-radius: 2px; transform-origin: left center; transform: scaleX(.2); }
  .projects__nav .sq-group { display: flex; gap: 10px; }

  .audience { padding: 72px 0; }
  .audience__head { margin-bottom: 32px; gap: 16px; }
  .audience__head h2 { font-size: 36px; }
  .audience__head p { font-size: 17px; }
  .aud-cards { gap: 12px; }
  .aud-card { padding: 28px 24px 32px; gap: 12px; }
  .aud-card__num { width: 44px; height: 44px; margin-bottom: 8px; font-size: 15px; }
  .aud-card h3 { font-size: 23px; }
  .aud-card p { font-size: 16px; }
  .audience__more { margin-top: 28px; }

  .process { padding: 80px 0; }
  .process__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .process__head h2 { font-size: 40px; }
  .process__head p { font-size: 17px; }
  .ww-track { display: none; }
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 20px; min-height: 0; }
  .step__num { grid-row: 1 / span 2; width: 48px; height: 48px; font-size: 18px; }
  .step h3 { margin: 0; font-size: 20px; }

  .cta-section { padding: 16px; }
  .cta-card::before { display: none; }
  .cta-card { display: block; min-height: 0; padding: 0; background: var(--white); border: 1px solid var(--line-soft); }
  .cta-card__img { position: static; height: 240px; }
  .cta-card__content { width: 100%; padding: 24px 20px 28px; gap: 16px; }
  .cta-card__content h2 { font-size: 28px; }

  .faq { padding: 56px 0 72px; }
  .faq__grid { grid-template-columns: 1fr; gap: 24px; }
  .faq__side h2 { font-size: 28px; }
  .acc--faq summary { padding: 18px 0; font-size: 17px; gap: 16px; }
  .acc--faq p { padding: 0 0 20px; font-size: 16px; }

  .site-footer { background: var(--light); padding: 16px; }
  .footer-card { padding: 32px 20px 20px; gap: 32px; box-shadow: 0 12px 32px -20px rgba(4,20,53,.25); }
  .footer-card__brand img { height: 52px; }
  .footer-card__brand p { font-size: 15px; }
  .footer-card__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .foot-l { min-height: 44px; }
  .footer-card__bottom { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; }
  .footer-card__legal { gap: 0 16px; }
  .footer-card__legal a { min-height: 44px; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .step__num { animation-timeline: view(); animation-range: cover 27% cover 33%; }
      .pcard { animation: prSlide linear both; animation-timeline: view(x); animation-range: cover 0% cover 100%; }
      @keyframes prSlide {
        0% { transform: scale(.9) translateX(24px); opacity: .45; }
        30%, 70% { transform: none; opacity: 1; }
        100% { transform: scale(.9) translateX(-24px); opacity: .45; }
      }
    }
  }
  @supports (animation-timeline: scroll()) {
    .pr-bar { animation: prBar linear both; animation-timeline: --prs; }
    @keyframes prBar { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
  }
}

/* ==========================================================================
   MINDER BEWEGING
   ========================================================================== */

/* ---------- Knoppen: één systeem (zelfde als Menu en Contact) ----------
   Hover: helderblauw vlak met wit icoon, icoon beweegt kort mee, tekst iets dikker.
   Klik: knop drukt kort in. */
.menu-btn:active, .hdr-call:active, .sq.btn-sk:active, .icn.btn-sk:active { transform: skewX(-10deg) scale(.94); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Pijlen schuiven in hun richting */
  .sq:hover svg, .dcard:hover .sq svg, .pcard:hover .sq svg { transform: skewX(10deg) translate(2px, -2px); }
  .sq[data-slide="-1"]:hover svg { transform: skewX(10deg) translateX(-3px); }
  .sq[data-slide="1"]:hover svg { transform: skewX(10deg) translateX(3px); }
  /* Telefoon gaat over, envelop wipt omhoog */
  a[href^="tel:"]:hover > svg, .hdr-call:hover svg { animation: hdrRing .7s var(--ease); }
  a[href^="mailto:"].icn:hover > svg, a[href^="mailto:"].sq:hover > svg { transform: skewX(10deg) translateY(-2px); }
  /* Plus/min draait een keer, net als de Menu-knop */
  .acc summary:hover .pm svg { transform: skewX(10deg) rotate(180deg); }
}
/* Klikbare tekst wordt iets dikker bij hover */
.acc summary { -webkit-text-stroke: 0 currentColor; transition: -webkit-text-stroke-width .2s ease-out; }
@media (hover: hover) {
  .acc summary:hover { -webkit-text-stroke-width: .5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .cta-run svg { animation: none; opacity: 1; }
  .cta:active { transform: skewX(-10deg); }
  .follow, .pcard:hover { transform: none !important; }
}