/* =========================
   1. TOKENS & THEME
   ========================= */

:root {
  color-scheme: light dark;

  /* ---- Greys ---- */
  --g-900: #424446;
  --g-700: #343a40;
  --g-500: #6c757d;
  --g-300: #dee2e6;
  --g-100: #f6f7f9;

  /* ---- Brand reds ---- */
  --red-700: #b32639;          /* primary brand red */
  --red-900: #b32639;          /* slightly deeper (you used same) */

  /* Canonical brand tokens */
  --brand:       var(--red-700);
  --brand-700:   var(--red-700);
  --brand-hover: var(--red-900);
  --brand-underline: color-mix(in oklab, var(--brand) 100%, black 12%);

  /* ---- Surfaces & text (light) ---- */
  --bg:       var(--g-100);
  --bg-soft:  #f1f3f7;
  --card:     #ffffff;
  --surface:  var(--card);   /* shim */
  --text:     var(--g-900);
  --muted:    var(--g-500);
  --line:     var(--g-300);

  --shadow: 0 8px 28px rgba(0, 0, 0, 0.12);

  /* ---- Layout ---- */
  --radius:   16px;
  --container: 1200px; /* desktop max, overridden naturally by padding */
  --pad: clamp(16px, 3vw, 28px);

  /* ---- Header (glass) ---- */
  --header-alpha: .52;
  --header-blur: 10px;
  --header-gap-bottom: 15px;

  --header-fill:   color-mix(in oklab, var(--card) 78%, transparent);
  --header-border: color-mix(in oklab, #000 6%, transparent);
  --header-underline: color-mix(in oklab, var(--brand) 88%, black 12%);

  /* ---- Map base tokens ---- */
  --map-stroke:       #9aa3af;
  --map-stroke-focus: var(--brand);

  /* ---- Werkgebied / NL map ---- */
  --nl-stroke:   #9aa3af;   /* generic NL outline */
  --work-stroke: #c4313a;   /* service area (Rotterdam / Nissewaard) */
  --glow-stroke: #ff6a6f;   /* halo + ±20 km ring */
  --glow-strong: rgba(255, 106, 111, 0.9);
  --glow-mid:    rgba(255, 106, 111, 0.6);
  --glow-soft:   rgba(255, 106, 111, 0.35);
  --glow-faint:  rgba(255, 106, 111, 0.2);

  /* ====================================
     Buttons: wipe colors
     ==================================== */
  --brand-red: #b32639;
  --brand-red-deeper: #8e1e2e;
  --brand-red-lighter: #d94b5c;

  --wa-green: #1c8a44;
  --wa-green-deeper: #145a2f;


  /* ====================================
     Header sizing / compact mode
     ==================================== */
  --header-pad-y: 14px;          /* top state padding */
  --header-pad-y-compact: 8px;   /* scrolled padding */
  --logo-h: 56px;                /* top logo height */
  --logo-h-compact: 44px;        /* scrolled logo height */

  /* Solid header fill (when .is-solid is added) */
  --header-solid: color-mix(in oklab, var(--card) 96%, transparent);

  /* Reserve space so CTAs don't sit under theme toggle */
  --toggle-space: 56px;

  /* ====================================
     Diensten: icons
     ==================================== */
  --icon-size: 28px;
  --svc-icon-dur: .35s;
  --icon-box: 28px;    /* fixed layout box for icon */
  --icon-pct: 100%;     /* SVG size inside box */

  /* ====================================
     Diensten: text palette (light)
     ==================================== */
  --svc-title: #0f172a;   /* headings inside cards */
  --svc-body:  #374151;   /* paragraph & list text */
  --svc-muted: #6b7280;   /* tiny/secondary */
  --svc-link:  color-mix(in oklab, var(--brand) 88%, black 12%);
  --svc-bullet:#6b7280;
}


:root[data-theme="dark"] {
  /* Dark surfaces */
  --bg:       #0e1116;
  --bg-soft:  #10141b;
  --card:     #151a23;
  --surface:  var(--card);

  /* Dark text */
  --text:   #e8edf5;
  --muted:  #a2adbd;
  --line:   #232c39;

  /* Dark shadow */
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.52);

  /* Dark map */
  --map-stroke:       #3a4757;
  --map-stroke-focus: #e05b63;

  /* Dark Werkgebied / NL map */
  --nl-stroke:   #3a4757;
  --work-stroke: #e05b63;
  --glow-strong: rgba(224, 91, 99, 0.95);
  --glow-mid:    rgba(224, 91, 99, 0.7);
  --glow-soft:   rgba(224, 91, 99, 0.45);
  --glow-faint:  rgba(224, 91, 99, 0.25);

  /* Dark Werkwijze / rail */
  --rail-ring:   #747a87;   /* softer halo ring on dark */
  --rail-ghost:  var(--brand);

  /* Dark header glass */
  --header-fill:   color-mix(in oklab, var(--card) 75%, transparent);
  --header-border: color-mix(in oklab, #000 30%, transparent);

  /* Solid header in dark mode */
  --header-solid: color-mix(in oklab, var(--card) 92%, transparent);

  /* Diensten: text palette (dark) */
  --svc-title: #ffffff;
  --svc-body:  #cfd6e2;
  --svc-muted: #5878a7;
  --svc-link:  color-mix(in oklab, var(--brand) 85%, white 15%);
  --svc-bullet:#95989c;
}




/* =========================
   2. BASE & RESETS
   ========================= */

/* Box sizing across everything */

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

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  scroll-padding-top: clamp(84px, 10vw, 118px);
  scroll-behavior: smooth;

  /* Prevent mobile text scaling inconsistencies */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Font rendering consistency */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;

  background: var(--bg);
  color: var(--text);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Links */
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

/* Media defaults (SAFE version – leaves SVG alone) */
img,
picture,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.svg-defs-hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Form elements inherit typography */
button,
input,
textarea,
select {
  font: inherit;
}

/* Layout container */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Anchor offsets for fixed header */
#diensten,
#gallery,
#werkgebied,
#werkwijze,
#reviews,
#contact,
#svc-deuren,
#svc-kozijn,
#svc-turnkey {
  scroll-margin-top: clamp(84px, 10vw, 118px);
}

/* ===== Header ===== */
.header { 
  position:sticky; top:0; z-index:1000; 
  backdrop-filter: saturate(160%) blur(var(--header-blur));
  -webkit-backdrop-filter: saturate(160%) blur(var(--header-blur));
}
.header .brand {
  display: flex;
  align-items: center;
  gap: 12px;              /* sane gap */
  flex: 0 0 auto;         /* logo never shrinks */
}


.main-nav a{ font-weight: 700; color: var(--text); }
.header .main-nav{ margin-bottom: var(--header-gap-bottom); }
.header{
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.header-row{
  transition: padding .22s ease;
}

.header .logo{
  transition: max-height .22s ease;
}

.header .main-nav > ul{ display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none; }
.header .main-nav > ul > li > a{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-radius:10px; }
.header .main-nav >ul > li > a:hover{ background: rgba(227,20,28,.06); }
.header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; pointer-events:none; background: var(--brand-underline); }
.header.is-solid{ background:#fff; border-bottom-color:rgba(0,0,0,.08); box-shadow:0 8px 24px rgba(0,0,0,.08); }
/* --- Header Layout --- */
.header-row {
  display: flex;
  align-items: center;         /* Vertically centers Logo vs Actions */ 
  flex-wrap: nowrap;           /* PREVENTS the diagonal wrapping */
  gap: 20px;
  justify-content: space-between;
}

/* --- Actions (Buttons + Toggle) --- */
.actions {
  display: flex;
  align-items: center;         /* Vertically centers Buttons vs Toggle */
  gap: clamp(0.4rem, 1.5vw, 0.75rem);                   /* Consistent spacing */
  flex-shrink: 0;
  min-width: 0;
  padding-right: env(safe-area-inset-right);
  margin-left: auto;
}


.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink: 1;          /* ALLOW shrink */
  min-width: 0;            /* REQUIRED for flex to work */
  max-width: 40%;
  flex: 0 1 auto;
  margin-left: 0;
}
.brand a{ display:inline-flex; align-items:center; }
.logo {
  height: auto;
  max-height: var(--logo-h);
  display: block;
  width: clamp(90px, 22vw, 150px);
  max-width: 100%;
}


.header .actions #theme-toggle{ order:99; }
/* Global override for the toggle */
#theme-toggle {
  position: relative;       /* REQUIRED for icon positioning */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  padding: 0;

  border-radius: 9999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  cursor: pointer;
  flex-shrink: 0;
  color: var(--brand); /* drives SVG stroke via currentColor */
  margin-right: clamp(8px, 3vw, 16px);
  flex: 0 0 auto;
}


.header .actions{
  display:flex;           /* <-- add this */
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  justify-content: flex-start;
}


/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--g-300);
  background:#fff; color:var(--g-900); box-shadow:var(--shadow); font-weight:600;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  white-space: nowrap;
  font-size: clamp(12px, 2.8vw, 14px);
  line-height: 1.2;
  min-height: 36px;
  min-width: max-content;
  padding-inline: clamp(10px, 3vw, 14px);
}
.btn.primary{ background:var(--brand); color:#fff; border-color:transparent; }
.btn.primary:not([data-wipe]):hover{ background:var(--brand-hover); }
.btn.outline{ background:transparent; color:var(--g-700); }
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.16); }

/* =========================
   HERO CTA BUTTON STABILITY
   ========================= */

.hero .btn {
  flex-shrink: 0;              /* NEVER shrink */
  font-size: 14px;             /* lock readable size */
  padding: 12px 16px;          /* stable tap target */
  min-height: 44px;            /* mobile accessibility */
}

/* ===== Hero ===== */
.hero{
  background:
    radial-gradient(110% 75% at 50% 0%, rgba(227,20,28,.10) 0%, rgba(227,20,28,0) 55%),
    var(--bg);
  padding: clamp(20px,4vw,52px);
  border-top: 0;
}
.hero-logo{ display:none; }
.hero .container{
  display:grid;
  gap:14px;
}
.hero-kicker{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  padding:0;
  border:0;
  background:none;
  color:color-mix(in oklab, var(--brand) 72%, var(--text) 28%);
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.11em;
  line-height:1.2;
  text-transform:uppercase;
}

.hero-kicker::before{
  content:"";
  width:30px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    color-mix(in oklab, var(--brand) 88%, white 12%),
    color-mix(in oklab, var(--brand) 52%, transparent)
  );
}

.hero h1{
  margin:0;
  max-width:19ch;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.08;
  letter-spacing:-0.018em;
  text-wrap:balance;
}
.hero h1 span{
  color:color-mix(in oklab, var(--brand) 85%, var(--text) 15%);
}
.hero .sub{
  margin:0;
  max-width:66ch;
  color: color-mix(in oklab, var(--text) 80%, var(--muted) 20%);
  font-size:clamp(16px,2vw,18px);
}
.hero-trust{
  list-style:none;
  margin:2px 0 2px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hero-trust li{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--line) 85%, var(--brand) 15%);
  background:color-mix(in oklab, var(--card) 92%, var(--brand) 8%);
  color:color-mix(in oklab, var(--text) 82%, var(--muted) 18%);
  font-size:0.89rem;
  line-height:1.2;
}
.hero-trust li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  margin-right:8px;
  flex:0 0 auto;
  background:color-mix(in oklab, var(--brand) 85%, white 15%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== Sections ===== */
.section{ padding:28px 0 clamp(28px,5vw,54px); }
.section-title{ margin:.2rem 0 1rem; padding-left:10px; border-left:4px solid var(--brand); }

/* ===== Bottom offerte CTA ===== */
.bottom-offerte{
  padding-top: clamp(30px, 5vw, 62px);   /* keep distance from Werkwijze tooltip area */
  padding-bottom: clamp(30px, 5vw, 52px);
}

.bottom-offerte__inner{
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.bottom-offerte__kicker{
  margin: 0;
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  font-weight: 760;
  color: color-mix(in oklab, var(--brand) 64%, var(--text) 36%);
  letter-spacing: .01em;
}

.bottom-offerte__copy{
  margin: 0.7rem auto 0;
  max-width: 58ch;
  color: color-mix(in oklab, var(--text) 78%, var(--muted) 22%);
  line-height: 1.5;
}

.bottom-offerte__cta-wrap{
  margin-top: clamp(38px, 6vw, 72px); /* keep it lower than tooltips */
  display: grid;
  place-items: center;
}

.bottom-offerte__btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(240px, 50%, 450px); /* ~50% of the Werkwijze line width (900px max) */
  min-height: 56px;
  padding: 0.95rem 1.4rem;
  border: 1px solid color-mix(in oklab, var(--brand) 74%, #fff 26%);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  background: linear-gradient(
    138deg,
    color-mix(in oklab, var(--brand) 88%, #fff 12%),
    color-mix(in oklab, var(--brand-hover) 78%, #000 22%)
  );
  color: #fff;
  font-weight: 760;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(179, 54, 67, 0.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}

.bottom-offerte__btn::before{
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.35) 48%,
    transparent 62%
  );
  transform: translateX(-145%);
  transition: transform .62s cubic-bezier(.2,.72,.2,1);
}

.bottom-offerte__btn > span{
  position: relative;
  z-index: 1;
}

.bottom-offerte__btn:hover,
.bottom-offerte__btn:focus-visible{
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 34px rgba(179, 54, 67, 0.34);
  filter: saturate(1.06) brightness(1.03);
}

.bottom-offerte__btn:hover::before,
.bottom-offerte__btn:focus-visible::before{
  transform: translateX(145%);
}

.bottom-offerte__btn:active{
  color: #fff;
  transform: translateY(1px) scale(0.992);
  box-shadow: 0 8px 16px rgba(179, 54, 67, 0.24);
  filter: saturate(0.98) brightness(0.98);
}

:root[data-theme="dark"] .bottom-offerte__btn{
  border-color: color-mix(in oklab, var(--brand) 58%, #fff 42%);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
}

@media (max-width: 720px){
  .bottom-offerte{
    padding-top: clamp(34px, 10vw, 66px);
  }

  .bottom-offerte__cta-wrap{
    margin-top: clamp(30px, 9vw, 48px);
  }

  .bottom-offerte__btn{
    width: min(100%, 360px);
    min-height: 54px;
  }
}

/* ===== Layout grid ===== */
.main-grid{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }

.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }


/* ===== Services ===== */
.services-col .service{
  position:relative; overflow:hidden;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 18px 14px 22px; margin-bottom:14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.services-col .service::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:4px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition: transform .22s ease, background-color .18s ease;
}
.services-col .service:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.14); }
.services-col .service:hover::after{ transform:scaleY(1); background:var(--brand-hover); }
.svc-head{ display:flex; align-items:center; gap:10px; }
.svc-ico{ font-size:22px; line-height:1; }
.services-col .service h3{ margin:0; font-size:1.05rem; color:var(--g-900); }
.services-col .service p{ margin:6px 0 8px; color:var(--g-700); }
.svc-list{ margin:0; padding-left:18px; color:var(--muted); }
.svc-list li{ margin:2px 0; }

/* Diensten refinement (design pass) */
.services-col{
  display:grid;
  gap:14px;
  align-content:start;
}
.services-intro{
  margin:0 0 2px;
  color:color-mix(in oklab, var(--text) 74%, var(--muted) 26%);
  line-height:1.45;
  max-width:62ch;
}
.gallery-intro{
  margin:0 0 10px;
  color:color-mix(in oklab, var(--text) 74%, var(--muted) 26%);
  line-height:1.45;
  max-width:62ch;
}
.services-col .service{
  margin-bottom:0;
  display:grid;
  gap:10px;
  padding:18px 20px 16px 22px;
}
.services-col .service > p{
  margin:0;
}
.services-col .svc-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.services-col .svc-head h3{
  font-size:1.1rem;
  letter-spacing:0.01em;
}
.svc-badge{
  margin-left:2px;
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--brand) 26%, var(--line) 74%);
  background:color-mix(in oklab, var(--brand) 8%, var(--card) 92%);
  color:color-mix(in oklab, var(--brand) 78%, var(--text) 22%);
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  line-height:1;
}
.svc-list{
  margin:2px 0 0;
}
.svc-list li{
  margin:4px 0;
}

/* ===== Slider foundation ===== */
.slider{ position:relative; }
.slider-track{ display:flex; }

/* ===== Gallery (peeking) ===== */
.gallery-col{ 
  --peek:32px; --peek-bias:0px; --gap:12px; --gallery-h:420px;
  --pl: calc(var(--peek) + var(--peek-bias)); --pr: var(--peek);
  position:relative; z-index:2;
}
.gallery-col .slider{ overflow:hidden; position:relative; }
.gallery-col .slider-track{
  gap:var(--gap); transform:translateX(0); transition:transform 360ms ease; will-change:transform;
  display:flex; margin-left:var(--pl); margin-right:var(--pr);
}

.slide-card{
  flex:0 0 100%; max-height:100%;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  border-radius:14px; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: var(--gallery-h); box-sizing:border-box;
  cursor: zoom-in;
}

.slide-card:hover{
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  border-color: var(--brand-red);
}

.slide-card>img{ display:block; width:100%; flex:1 1 auto; object-fit:cover; object-position:center; height:calc(100% - 36px); }
.slide-card figcaption{
  margin:0; padding:0 8px; font-size:.95rem; color:var(--g-700); height:36px;
  display:flex; align-items:center; background:#fff; justify-content:center; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.slide-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition: transform .22s ease, background-color .18s ease;
}
.slide-card:hover::after{ transform:scaleX(1); background:var(--brand-hover); }
.slide-card, .slide-card img, .slide-card figcaption, .gallery-col figure{ margin:0; padding:0; }

/* Gallery swipe hint (mobile) */
.gallery-swipe-hint{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  transition: opacity 320ms ease;
}

.gallery-swipe-hint::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 12, 18, 0.58) 0%,
    rgba(8, 12, 18, 0.4) 48%,
    rgba(8, 12, 18, 0.12) 72%,
    rgba(8, 12, 18, 0) 100%
  );
}

.gallery-swipe-hint__content{
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
  padding-inline: 18px;
}

.gallery-swipe-hint__text{
  font-size: clamp(0.85rem, 2.6vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f8fafc;
  text-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.gallery-swipe-hint__icons{
  display: flex;
  align-items: center;
  gap: 18px;
}

.gallery-swipe-hint__arrow{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent);
  background: rgba(15, 23, 42, 0.35);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    0 0 18px color-mix(in oklab, var(--brand) 45%, transparent);
  color: color-mix(in oklab, var(--brand) 85%, #fff 15%);
  --nudge: 5px;
  animation: galleryNudge 1.8s ease-in-out infinite;
}

.gallery-swipe-hint__arrow[data-dir="left"]{ --nudge: -5px; }

.gallery-swipe-hint__arrow svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-swipe-hint.is-hidden{
  opacity: 0;
}

@keyframes galleryNudge{
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(var(--nudge)); }
}


/* arrows */
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; padding:0; margin:0; border-radius:50%;
  border:1px solid var(--g-300); background:#fff;
  display:flex; place-items:center; line-height:0; font-size:0; box-sizing:border-box;
  transition: box-shadow .2s ease, border-color .2s ease; color:var(--g-700);
  align-items:center; justify-content:center; z-index:5;
}


.slider .nav:hover{ border-color:var(--brand); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.gallery-col .dots{ display:none; }
.gallery-col .nav.prev{ left: calc(var(--pl) - 21px); }
.gallery-col .nav.next{ right: calc(var(--pr) - 21px); }

.hero, main, .footer, .float-wa { position:relative; z-index:1; }

/* ===== Old process cards (kept for other sections if needed) ===== */
.process{ margin-top:24px; }
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; counter-reset:step; }
.steps li{
  list-style:none; position:relative; padding:16px 14px 14px; border-radius:14px;
  background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.steps li::before{
  counter-increment:step; content:counter(step); position:absolute; top:-10px; left:14px;
  width:24px; height:24px; border-radius:999px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-weight:800; box-shadow:0 6px 16px rgba(227,20,28,.25);
}
.steps h3{ margin:6px 0 4px; font-size:1.02rem; }
.steps p{ margin:0; color:#6b7280; font-size:.95rem; line-height:1.45; }


/* ===== Service area (old) ===== */
.service-area{
  padding:18px 0 6px; margin-top:18px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(227,20,28,.06), transparent 60%);
  text-align:center;
}
.service-area__title{ font-weight:700; color:#222; margin:0 0 6px; }
.service-area__sub{ color:#6b7280; margin:6px 0 0; font-size:.95rem; }

/* ===== Reviews carousel ===== */
.reviews-section .section-title{ text-align:center; border-left:0; padding-left:0; margin:.4rem 0 .4rem; }
.reviews-section .section-title::after{
  content:""; display:block; width:72px; height:3px; margin:10px auto 0; background:var(--brand); border-radius:2px;
}
.reviews-section{
  --reviews-gap:12px;
  --reviews-peek:24px;
  --reviews-card-w-desktop:clamp(440px,45vw,560px);
  --reviews-control-size:48px;
  --reviews-control-offset:-10px;
  --reviews-control-color:#b33643;
  --reviews-control-color-hover:#932b37;
}
.reviews-intro{
  margin:0 auto 1rem;
  max-width:56ch;
  text-align:center;
  color:var(--muted);
}
.reviews-carousel{ position:relative; }
.reviews-viewport{
  position:relative;
  width:min(100%, calc(var(--reviews-card-w-desktop) + (var(--reviews-peek) * 2)));
  margin-inline:auto;
  overflow:hidden;
  border-radius:16px;
}
.reviews-track{
  display:flex;
  gap:var(--reviews-gap);
  padding-inline:var(--reviews-peek);
  transition:transform 420ms ease;
  will-change:transform;
  touch-action:pan-y;
}
.reviews-card{
  flex:0 0 var(--reviews-card-w-desktop);
  max-width:var(--reviews-card-w-desktop);
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#fff;
  padding:22px 24px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  text-align:center;
  min-height:136px;
  position:relative;
  overflow:hidden;
}
.reviews-quote{
  margin:0 0 10px;
  line-height:1.5;
  font-size:1.05rem;
  color:var(--g-900);
}
.reviews-author{
  margin:0;
  color:var(--g-600,#5f6b76);
  font-weight:600;
}
.reviews-control{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:var(--reviews-control-size);
  height:var(--reviews-control-size);
  border:0;
  background:transparent;
  color:var(--reviews-control-color);
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  z-index:4;
  transition:color .2s ease, opacity .2s ease, transform .2s ease;
}
.reviews-control__icon{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.reviews-control--prev{
  left:calc(50% - (var(--reviews-card-w-desktop) / 2) + var(--reviews-control-offset));
}
.reviews-control--next{
  right:calc(50% - (var(--reviews-card-w-desktop) / 2) + var(--reviews-control-offset));
}
.reviews-control:hover,
.reviews-control:focus-visible{
  color:var(--reviews-control-color-hover);
  transform:translateY(-50%) scale(1.03);
}
.reviews-control:focus-visible{
  outline:2px solid color-mix(in oklab, var(--reviews-control-color) 65%, #fff 35%);
  outline-offset:2px;
  border-radius:8px;
}
.reviews-control:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.reviews-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding-bottom:8px;
}
.reviews-dot{
  width:10px;
  height:10px;
  border:0;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  background:color-mix(in oklab, var(--brand) 22%, var(--line) 78%);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent);
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.reviews-dot:hover{ transform:scale(1.08); }
.reviews-dot.is-active,
.reviews-dot[aria-current="true"]{
  background:var(--brand);
  transform:scale(1.26);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand) 42%, transparent),
    0 0 12px color-mix(in oklab, var(--brand) 36%, transparent);
}

.gallery-col .slider::before, .gallery-col .slider::after{ content:none; }
/* transparent edge masks */
.gallery-col .slider{
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pl), #000 calc(100% - var(--pr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--pl), #000 calc(100% - var(--pr)), transparent 100%);
}
.stars{ --rating:5; --size:18px; --gap:3px; --empty:#e5e7eb; --fill:var(--brand); position:relative; display:inline-block; font-size:var(--size); line-height:1; letter-spacing:var(--gap); margin-bottom:10px; }
.stars::before, .stars::after{ content:"★★★★★"; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
.stars::before{ color:var(--empty); }
.stars::after{ color:var(--fill); position:absolute; inset:0; width:calc((var(--rating)/5)*100%); overflow:hidden; }
.reviews-card .stars{ display:inline-block; }

/* ===== Footer & floating WA ===== */
.footer{
  margin-top: clamp(42px, 6vw, 72px);
  color:#e9edf2;
  background:
    radial-gradient(120% 180% at 0% -10%, rgba(179, 38, 57, 0.28), rgba(179, 38, 57, 0) 45%),
    linear-gradient(180deg, #0f141a 0%, #070a0e 100%);
  border-top:1px solid rgba(255, 255, 255, 0.08);
}

.foot{
  padding: clamp(28px, 4vw, 44px) var(--pad);
  display:grid;
  grid-template-columns:minmax(240px, 1.35fr) repeat(3, minmax(180px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  align-items:start;
}

.foot-col{
  min-width:0;
  font-size:15px;
  line-height:1.55;
  color:rgba(233, 237, 242, 0.84);
}

.foot-title{
  margin:0 0 12px;
  font-size:0.98rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#fff;
  font-weight:700;
}

.foot-brand .foot-title{
  font-size:1.25rem;
  letter-spacing:0.01em;
  text-transform:none;
  margin-bottom:10px;
}

.foot-sub{
  margin:0 0 12px;
  max-width:30ch;
  color:rgba(233, 237, 242, 0.84);
}

.foot-meta{
  margin:0;
  color:rgba(233, 237, 242, 0.7);
  font-size:0.94rem;
}

.footer a{
  color:#f4f7fb;
  text-decoration:none;
  transition:color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.footer a:hover,
.footer a:focus-visible{
  color:#fff;
}

.foot-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.foot-nav{
  display:grid;
  gap:8px;
}

.foot-nav a,
.foot-list a,
.foot-legal a{
  width:fit-content;
}

.foot-nav a:hover,
.foot-nav a:focus-visible,
.foot-list a:hover,
.foot-list a:focus-visible,
.foot-legal a:hover,
.foot-legal a:focus-visible{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.foot-legal{
  display:grid;
  align-content:start;
  gap:8px;
}

.foot-legal a{
  color:rgba(244, 247, 251, 0.9);
}

.foot-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--brand) 50%, white 25%);
  background:color-mix(in oklab, var(--brand) 32%, black 68%);
  font-weight:700;
  line-height:1.1;
}

.foot-cta:hover,
.foot-cta:focus-visible{
  background:color-mix(in oklab, var(--brand) 45%, black 55%);
  border-color:color-mix(in oklab, var(--brand) 70%, white 12%);
}

.foot-bottom{
  border-top:1px solid rgba(255, 255, 255, 0.1);
  background:rgba(0, 0, 0, 0.24);
}

.foot-bottom-inner{
  padding:13px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:rgba(233, 237, 242, 0.7);
}

.foot-bottom-inner a{
  color:rgba(244, 247, 251, 0.86);
  font-weight:600;
}



.float-wa{ position:fixed; right:16px; bottom:16px; z-index:999; display:inline-flex; align-items:center; padding:12px 16px; border-radius:999px; background:var(--brand); color:#fff; box-shadow:var(--shadow); font-weight:700; }

.btn[data-wipe]{
  position: relative;
  z-index: 0;
  isolation: isolate;
  transition: border-color .22s ease,
              transform .08s ease,
              color .22s ease .08s; /* slight delay so text never flashes */
}

.btn[data-wipe]::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-color, var(--brand-red));
  transform: scaleX(0);               /* left → right */
  transform-origin: left center;
  transition: transform .28s ease;
  z-index: -1;                        /* under the label */
}

.btn[data-wipe]:hover::before,
.btn[data-wipe]:focus-visible::before{
  transform: scaleX(1);
}

.btn[data-wipe]:hover,
.btn[data-wipe]:focus-visible{
  color: #fff;
  border-color: var(--fill-color);
}

/* Defaults by variant */
.btn.primary[data-wipe]{ --fill-color: var(--brand-red-deeper); }
.btn:not(.primary)[data-wipe]{ --fill-color: var(--brand-red-lighter); }

/* Make sure hero hover doesn’t instantly flip the background */
.hero .btn.primary[data-wipe]:hover,
.hero .btn.primary[data-wipe]:focus-visible{
  background-color: var(--brand-red);
}
.hero .btn:not(.primary)[data-wipe]:hover,
.hero .btn:not(.primary)[data-wipe]:focus-visible{
  background-color: #fff;
}


/* Seamless wipe: use clip-path instead of transform for any data-wipe button */
.btn[data-wipe]{ overflow: hidden; }

.btn[data-wipe]::before{
  /* stop using transform-based wipe: */
  transform: none !important;
  transform-origin: initial !important;

  /* new wipe with clip-path (no subpixel seam) */
  clip-path: inset(0 100% 0 0);
  transition: clip-path .28s ease !important;
}

.btn[data-wipe]:hover::before,
.btn[data-wipe]:focus-visible::before{
  clip-path: inset(0 0 0 0);
}

.hero .btn.outline{ background:#fff; } /* keeps the wipe sitting on white */

.header{
  /* you already have sticky/blur; just add transitions so it feels smooth */
  transition:
    background-color .22s ease,
    border-color .22s ease,
    backdrop-filter .22s ease,
    -webkit-backdrop-filter .22s ease;
}

.header .container {
  padding-right: max(12px, env(safe-area-inset-right));
}

/* shrink the row padding (auto height header = no overflow issues) */
.header-row{
  padding-block: var(--header-pad-y);
  transition: padding .22s ease;
}

/* shrink the actual logo image */
.header .logo{                 /* matches your <img class="logo"> */
  height: var(--logo-h);
  width: auto;
  transition: height .22s ease;
}

/* compact state (toggled on <body>) */
body.header-compact .header-row{
  padding-block: var(--header-pad-y-compact);
}
body.header-compact .header .logo{
  height: var(--logo-h-compact);
}

/* Compact state: keep colors theme-aware, only subtle boost */
body.header-compact .header{
  background: var(--header-fill);          /* stay glassy, not hard white */
  border-bottom-color: var(--header-border);
  /* optional: slightly stronger shadow, or just keep var(--shadow) */
  box-shadow: var(--shadow);
}

.services-col .svc-ico{
  color: var(--g-700); /* stroke color at rest */
  transition:
    background-color var(--svc-icon-dur) ease,
    color var(--svc-icon-dur) ease,
    transform .28s ease,
    box-shadow var(--svc-icon-dur) ease;
}

/* Diensten icon — SVG glow only (no background box) */
.service:hover .svc-ico svg,
.service:focus-within .svc-ico svg{
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand) 70%, transparent))
          drop-shadow(0 0 12px color-mix(in oklab, var(--brand) 40%, transparent));
}


/* Stronger but tasteful hover */
.service:hover .svc-ico,
.service:focus-within .svc-ico{
  color: var(--brand);           /* svg stroke switches to brand red */
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.services-col .svc-head{
  display:flex; align-items:center; gap:10px;
  min-height: var(--icon-box);      /* row height tied to fixed box */
}

.services-col .svc-ico{
  width: var(--icon-box);
  height: var(--icon-box);
  flex: 0 0 var(--icon-box);
  display:inline-grid;
  place-items:center;
  line-height:0;                    /* kills extra line-height expansion */
}

.services-col .svc-ico svg{
  width: var(--icon-pct);
  height: var(--icon-pct);
  display:block;
}

/* Optional: keep title from adding extra height */
.services-col .svc-head h3{ margin:0; line-height:1.1; }

/* Only the plank’s fill turns black; hover/background stays brand red */
.services-col .svc-ico.plinten{
  --icon-accent: #000; /* fills that rect */
  color: #000;         /* makes strokes black */
}

/* Plinten: black at rest -> brand red on hover (wins the cascade) */
.services-col .svc-ico.plinten { color: #000; }

.service:hover .svc-ico.plinten,
.service:focus-within .svc-ico.plinten {
  color: var(--brand);
}

/* === FINAL: Gallery arrows — mask chevron + ::after red wipe (no conflicts) === */

/* keep overlay positioning */
.gallery-col .nav{ position: absolute !important; }

/* crisp chevron colored by currentColor (white on hover) */
.gallery-col .nav::before{
  content:"";
  display:block;
  width:14px; height:14px;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gallery-col .nav.prev::before{ transform: scaleX(-1); }

/* red fill lives in ::after (so ::before is free for the chevron) */
.gallery-col .nav[data-wipe]{ overflow:hidden; isolation:isolate; }
.gallery-col .nav[data-wipe]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background: var(--red-700);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .25s ease;
}
.gallery-col .nav[data-wipe]:hover::after,
.gallery-col .nav[data-wipe]:focus-visible::after{
  clip-path: inset(0 0 0 0);
}
.gallery-col .nav[data-wipe]:hover,
.gallery-col .nav[data-wipe]:focus-visible{
  color:#fff;                    /* chevron turns white */
  border-color: var(--red-700);
}

/* keep the generic wipe for OTHER gallery elements, not the arrows */
.gallery-col [data-wipe]:not(.nav){ position:relative; overflow:hidden; isolation:isolate; }
.gallery-col [data-wipe]:not(.nav)::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background: var(--red-700);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .25s ease;
}
.gallery-col [data-wipe]:not(.nav):hover::before,
.gallery-col [data-wipe]:not(.nav):focus-visible::before{
  clip-path: inset(0 0 0 0);
}

/* Put this once near your Gallery section */
.gallery-col{
  /* ...your existing vars... */
  --nav-size: 42px;   /* <— circle size (42 → 48 or 52) */
  --chev-size: 32px;  /* <— chevron size inside the circle (14 → 16–18) */
}

/* Use the vars */
.gallery-col .slider .nav{
  width: var(--nav-size);
  height: var(--nav-size);
}

/* Keep arrows centered on the peeking edges */
.gallery-col .nav.prev{ left: calc(var(--pl) - (var(--nav-size) / 2)); }
.gallery-col .nav.next{ right: calc(var(--pr) - (var(--nav-size) / 2)); }

/* Chevron size */
.gallery-col .nav::before{
  width: var(--chev-size);
  height: var(--chev-size);
}

/* Keep the chevron above the red wipe */
.gallery-col .nav::before{
  position: relative;
  z-index: 1;     /* chevron over ::after */
}

/* Sync the color flip with the wipe so there’s no white-on-white flash */
.slider .nav{
  transition: box-shadow .2s ease, border-color .2s ease, color .22s ease .08s;
}
/* (you already turn color:#fff on hover here) */

/* Base wipe (no direction) — keep your existing ::after block */



/* Direction: next = left→right */
.gallery-col .nav.next[data-wipe]::after{
  /* inset: top right bottom left */
  clip-path: inset(0 100% 0 0);
}

/* Direction: prev = right→left */
.gallery-col .nav.prev[data-wipe]::after{
  clip-path: inset(0 0 0 100%);
}

/* Hover (both end fully revealed already in your CSS) */
.gallery-col .nav[data-wipe]:hover::after,
.gallery-col .nav[data-wipe]:focus-visible::after{
  clip-path: inset(0 0 0 0);
}

/* while animating, ignore clicks + soften the arrows */
.slider.is-busy .nav{ pointer-events:none; opacity:.7; }

/* When sliding, grey out & block arrows so kids don't spam-click */
.slider.is-busy [data-prev],
.slider.is-busy [data-next]{
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.7);
}

/* The rail is a single row */
[data-track]{ display: flex; will-change: transform; }

/* Gallery keeps one-card viewport width unless overridden by media rules */
.gallery-col [data-track] > *{ flex: 0 0 100%; }

/* --- Werkgebied Section --- */
.werkgebied {
  padding: 6rem 0 5rem;
  text-align: center;
}

.werkgebied .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.werkgebied .h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.werkgebied .subtle {
  color: var(--text-muted, #666);
  margin-bottom: 3rem;
}

/* --- Maps layout --- */
.werkgebied__maps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4rem;
}

.map-item {
  flex: 0 1 460px;
}

.map-item svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}




/* === WERKGEBIED — SECTION SPACING & HEADING ========================= */

.werkgebied {
  margin-top: clamp(8px, 1.5vw, 20px);
  padding-top: 0;
}

.section.diensten {
  padding-bottom: clamp(12px, 2vw, 24px);
}

/* Kill default top margin on headings inside Werkgebied */
.werkgebied h1,
.werkgebied h2 {
  margin-top: 0;
}

/* Optional small gap between title and any lead/subtitle */
.werkgebied .section-lead,
.werkgebied p.section-subtitle {
  margin-top: 6px;
}

/* If you want the old subtitle hidden, keep this */
.werkgebied .subtle {
  display: none;
}

/* Underline accent for Werkgebied heading */
.werkgebied h2 {
  position: relative;
  display: inline-block;
  margin-inline: auto;
  padding-bottom: .5rem;
}
.werkgebied h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 95px;
  height: 3px;
  background: var(--brand, #b32639);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(179, 38, 57, .15);
}

/* Small gap between subtitle and map */
.werkgebied__maps {
  margin-top: 15px;
}

/* === WERKGEBIED — MAP LAYOUT & SIZE ================================= */

.werkgebied .container {
  max-width: 1600px;         /* give the map room */
}

/* Center the whole map block */
.werkgebied__maps {
  display: grid;
  justify-items: center;
  gap: 2rem;
}

/* Map item centers its contents */
.werkgebied__maps .map-item {
  display: grid;
  justify-items: center;
  width: 100%;
}

/* Make the NL map big on desktop */
.werkgebied .map-item svg,
.werkgebied-svg {
  max-width: none;                    /* remove old 420px cap */
  width: clamp(1200px, 78vw, 1600px); /* ≈ your “huge” version */
  height: auto;
  display: block;
  margin-inline: auto;
}


/* Keep the zoom group efficient */
.werkgebied-svg #vp {
  will-change: transform;
}

/* Slightly thicker stroke on active regions (Rotterdam/Nissewaard) */
.werkgebied-svg .active path,
.werkgebied-svg .active {
  stroke-width: 2.4;
}

/* === WERKGEBIED — TAGS / CHIPS UNDER THE MAP ======================== */

/* Primary row of chips */
.werkgebied-tags {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin: 10px auto 0;
  width: max-content;        /* shrink to content, then center */
}

/* Secondary row sits closer to the first */
.werkgebied-tags--secondary {
  margin-top: .5rem;
}

/* Core chip style */
.tag {
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .9rem;
  background: #fff;
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover state */
.tag:hover {
  background: #f9fafb;
}

/* Ghost / informational tags (non-clickable) */
.tag--ghost {
  color: #6b7280;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  pointer-events: none;
}


/* ——— Werkgebied: soft edge-fade so zoom never looks “cut off” ——— */
.map-fade-x,
.map-fade-y { display:block; }

/* Horizontal fade (left/right) */
.map-fade-x{
  --fade-x: clamp(24px, 5vw, 80px); /* tweak to taste */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-x),
    #000 calc(100% - var(--fade-x)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-x),
    #000 calc(100% - var(--fade-x)),
    transparent 100%
  );
}

/* Vertical fade (top/bottom) */
.map-fade-y{
  --fade-y: clamp(18px, 4vw, 64px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-y),
    #000 calc(100% - var(--fade-y)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-y),
    #000 calc(100% - var(--fade-y)),
    transparent 100%
  );
}

/* Keep your big, center-aligned map sizing */
.map-fade-x .werkgebied-svg{
  width: clamp(1200px, 78vw, 1600px);
  height: auto;
  display: block;
  margin-inline: auto;
}

.header{
  background: var(--header-fill);
  border-bottom: 1px solid var(--header-border);
}
.header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background: var(--header-underline);
  pointer-events:none;
}

/* === Make Diensten match Gallery surface (themed, not white) === */
.services-col .service{
  background: var(--card) !important;          /* same as .slide-card */
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.services-col .service:hover{
  border-color: color-mix(in oklab, var(--brand) 18%, var(--line)) !important;
}

/* Gallery caption: no white slab, use themed card surface */
.slide-card figcaption{
  background: var(--card) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--line) !important;
}

/* ================= HEADER: Night-mode toggle = pills ==================== */
/* Same visual recipe as "Bel direct" / "WhatsApp" */
.header .actions #theme-toggle{
  /* size matches your header pills */
  --h: 36px;
  height: var(--h);
  min-width: var(--h);
  padding: 0 12px;
  border-radius: 9999px;

  /* pill surface */
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  vertical-align: middle;

  /* motion */
  transition: transform .15s ease, box-shadow .15s ease,
              border-color .2s ease, background-color .2s ease;
}

/* keep it aligned with the CTAs and never wrap */
.header .actions #theme-toggle{ margin:0; }
.header .actions{ gap:10px; flex-wrap:nowrap; }

/* hover/focus */
.header .actions #theme-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  background: color-mix(in oklab, var(--card) 92%, var(--brand) 8%);
  border-color: color-mix(in oklab, var(--line) 80%, var(--brand) 20%);
}
.header .actions #theme-toggle:focus-visible{
  outline: 3px solid #7dd3fc;
  outline-offset: 2px;
}

/* compact header: subtly shrink like the other pills */
body.header-compact .header .actions #theme-toggle{ transform: scale(.96); }

/* ================= HEADER: CTA buttons (Bel direct / WhatsApp) ==================== */
.header .actions a.btn{
  /* match your toggle pill styling */
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);

  /* kill underline from global a:hover rule */
  text-decoration: none;
}

.header .actions a.btn:hover,
.header .actions a.btn:focus-visible{
  text-decoration: none;
}

/* Bel direct (tel) — neutral glass + brand-red wipe */
.header .actions a.btn[href^="tel:"]{
  border-color: color-mix(in oklab, var(--brand) 28%, var(--line));
}

/* make the wipe a bit richer than the default “non-primary” */
.header .actions a.btn[href^="tel:"][data-wipe]{
  --fill-color: var(--brand-red);
}

/* WhatsApp — solid WA green + deeper green wipe */
.header .actions a.btn[href^="https://wa.me"]{
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: #ffffff;
}

.header .actions a.btn[href^="https://wa.me"][data-wipe]{
  --fill-color: var(--wa-green-deeper);
}


/* icon swap (emoji or svg spans you already have) */
#theme-toggle .icon-sun,
#theme-toggle .icon-moon{
  font-size: 18px;
  line-height: 1;
  transition: opacity .2s ease, transform .2s ease;
}
#theme-toggle .icon-sun{ opacity: 1; transform: scale(1); }
#theme-toggle .icon-moon{ opacity: 0; transform: scale(.85) rotate(-20deg); }

:root[data-theme="dark"] #theme-toggle .icon-sun{ opacity: 0; transform: scale(.85) rotate(20deg); }
:root[data-theme="dark"] #theme-toggle .icon-moon{ opacity: 1; transform: scale(1); }

/* if a text label exists inside the toggle, hide it for an icon-only pill */
#theme-toggle .label{ display:none; }

/* Base header glass (already have this; keep here to win if needed) */
.header{
  background: var(--header-fill);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: saturate(160%) blur(var(--header-blur));
  -webkit-backdrop-filter: saturate(160%) blur(var(--header-blur));
}

/* When your JS adds .is-solid on scroll, stay themed — not white */
.header.is-solid{
  background: var(--header-solid) !important;
  border-bottom-color: var(--header-border) !important;
  box-shadow: var(--shadow) !important;
}

/* Header bottom strip replaces the old 3px underline */
.header::after{
  content:none !important;
}

.header-trust{
  --trust-item-gap: 12px;
  position: relative;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand) 92%, #fff 8%) 0%,
      color-mix(in oklab, var(--brand) 90%, #000 10%) 100%
    );
  border-top: 1px solid color-mix(in oklab, var(--brand) 80%, #000 20%);
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 82%, #000 18%);
  min-height: 28px;
  display: flex;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

.header-trust::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.22) 26%,
      transparent 52%
    );
}

.header-trust__viewport{
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.header-trust__marquee{
  --trust-gap: var(--trust-item-gap);
  display: flex;
  align-items: center;
  gap: var(--trust-gap);
  width: max-content;
  min-width: 100%;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

.header-trust__line{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--trust-item-gap);
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.15;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: 0.01em;
}

.header-trust__item{
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.header-trust__dot{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  opacity: 1;
}

:root[data-theme="dark"] .header-trust__line{
  color: #11131a;
}

:root[data-theme="dark"] .header-trust__dot{
  background: rgba(17,19,26,0.78);
}

.header-trust:not(.is-overflowing) .header-trust__dot--loop{
  display: none;
}

.header-trust:not(.is-overflowing) .header-trust__marquee{
  justify-content: center;
}

.header-trust.is-overflowing .header-trust__marquee{
  justify-content: flex-start;
  animation: header-trust-scroll var(--trust-duration, 18s) linear infinite;
}

.header-trust.is-overflowing:hover .header-trust__marquee,
.header-trust.is-overflowing:focus-within .header-trust__marquee{
  animation-play-state: paused;
}

@keyframes header-trust-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--trust-distance))); }
}

@media (prefers-reduced-motion: reduce){
  .header-trust.is-overflowing .header-trust__marquee{
    animation: none;
  }
}

/* Apply only inside the diensten cards */
.services-col .service .svc-head h3,
.services-col .service h3{
  color: var(--svc-title) !important;
}

.services-col .service p,
.services-col .service li,
.services-col .service .desc,
.services-col .service .text{
  color: var(--svc-body) !important;
}

.services-col .service small,
.services-col .service .muted{
  color: var(--svc-muted) !important;
}

.services-col .service a{
  color: var(--svc-link);
  text-decoration-color: currentColor;
}
.services-col .service a:hover{
  text-decoration-thickness: .12em;
}

.services-col .service li::marker{
  color: var(--svc-bullet);
}

/* ================= Diensten: kill the blue ================== */

/* 1) Dark mode link color inside cards = muted, brand-tinted */
:root[data-theme="dark"] .services-col .service a{
  color: color-mix(in oklab, var(--text) 86%, var(--brand) 14%);
  text-decoration-color: color-mix(in oklab, var(--brand) 55%, currentColor 45%);
}
:root[data-theme="dark"] .services-col .service a:hover{
  color: color-mix(in oklab, var(--text) 92%, var(--brand) 8%);
  text-decoration-thickness: .12em;
}

/* 2) Selection highlight inside Diensten = soft brand wash, not blue */
.services-col ::selection{
  background: color-mix(in oklab, var(--brand) 26%, #000 74%);
  color: #fff;
}
:root:not([data-theme="dark"]) .services-col ::selection{
  background: color-mix(in oklab, var(--brand) 18%, #fff 82%);
  color: #111;
}
/* Gallery caption = same text color as Diensten body/link palette */
.slide-card figcaption{
  color: var(--svc-body) !important;          /* matches diensten body text */
}

.slide-card figcaption a{
  color: var(--svc-link) !important;          /* matches diensten link color */
  text-decoration-color: currentColor;
}
.slide-card figcaption a:hover{
  text-decoration-thickness: .12em;
}

/* 2) Only the municipalities you serve in red (not the whole #vp group) */
.werkgebied-svg #Rotterdam,
.werkgebied-svg #Nissewaard,
.werkgebied-svg #Rotterdam path,
.werkgebied-svg #Nissewaard path{
  stroke: var(--work-stroke) !important;
  stroke-width: 2px;
}

/* Werkgebied pills = match diensten cards in dark mode */
:root[data-theme="dark"] .werkgebied .tag{
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--svc-body);              /* readable, same palette as cards */
  box-shadow: var(--shadow);
}



/* subtle hover that mirrors your header pill hover */
:root[data-theme="dark"] .werkgebied .tag:hover{
  background: color-mix(in oklab, var(--card) 92%, var(--brand) 8%);
  border-color: color-mix(in oklab, var(--line) 80%, var(--brand) 20%);
}

/* “ghost” chips (e.g. ±20 km) — softer text */
:root[data-theme="dark"] .werkgebied .tag--ghost{
  background: color-mix(in oklab, var(--card) 92%, transparent);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Reviews = match diensten cards in dark mode */
:root[data-theme="dark"] .reviews-card{
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--svc-body);
  box-shadow: var(--shadow);
}

/* body & author text tones */
:root[data-theme="dark"] .reviews-quote{ color: var(--svc-body); }
:root[data-theme="dark"] .reviews-author{ color: var(--svc-muted); }

/* stars contrast on dark */
:root[data-theme="dark"] .reviews-card .stars{
  --empty: color-mix(in oklab, var(--line) 70%, #000 30%);
  --fill: var(--brand);
}

:root[data-theme="dark"] .reviews-control{
  color: color-mix(in oklab, var(--reviews-control-color) 82%, #fff 18%);
}

:root[data-theme="dark"] .reviews-control:hover,
:root[data-theme="dark"] .reviews-control:focus-visible{
  color: color-mix(in oklab, var(--reviews-control-color) 70%, #fff 30%);
}

/* === FINAL OVERRIDE: Werkgebied palette ============================== */
:root{
  --nl-stroke: #9aa3af;
  --work-stroke: #c4313a;
}
:root[data-theme="dark"]{
  --nl-stroke: #3a4757;
  --work-stroke: #e05b63;
}

/* Base NL outline (grey) — exclude the two focus municipalities */
.werkgebied-svg #vp :not(#Rotterdam):not(#Nissewaard) path{
  fill: none;
  stroke: var(--nl-stroke);
  vector-effect: non-scaling-stroke;
  stroke-width: 1.35;
}

/* (optional) smoothness on the focused regions in general */
.werkgebied-svg #Rotterdam,
.werkgebied-svg #Nissewaard{
  transition: filter .18s ease, stroke-width .18s ease;
}

/* === On-map caption (big, bold, dashed accent) ======================= */
/* Make the map container a positioning context */
.werkgebied .map-item{ position: relative; }

/* Overlay label, centered over the SVG area */
.werkgebied-caption{
  position: absolute;
  /* ~14% from the top looks good with your current map framing; tweak 10–20% */
  top: 1%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  pointer-events: none;

  /* Big, bold, spaced */
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(32px, 7vw, 112px);
  line-height: 1.02;

  /* Brand color + soft glow so it stays readable on the map */
  color: var(--work-stroke);
  text-shadow:
    0 2px 8px rgba(0,0,0,.35),
    0 0 24px color-mix(in oklab, var(--work-stroke) 30%, transparent);

  /* Fade in/out */
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 2; /* above the SVG, below any fixed headers */
}

/* Dashed underline under the word */
.werkgebied-caption::after{
  content: "";
  display: block;
  height: 0;
  width: clamp(300px, 60vw, 820px);
  margin: clamp(6px, .8vw, 12px) auto 0;
  border-bottom: 4px none currentColor;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.werkgebied-caption.on{ opacity: 1; }

/* two icons sit on top of each other and cross-fade */
#theme-toggle .icon{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transition: opacity .2s ease, transform .2s ease;
}


/* light mode -> show SUN */
:root:not([data-theme="dark"]) #theme-toggle .sun{ opacity:1; transform: scale(1); }
/* dark mode -> show MOON (match brand accent color) */
:root[data-theme="dark"] #theme-toggle{
  color: var(--work-stroke);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--work-stroke) 20%, transparent) inset;
}
:root[data-theme="dark"] #theme-toggle .moon{ opacity:1; transform: scale(1); }

/* click pulse */
#theme-toggle .pulse{
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  border: 2px solid var(--work-stroke);
}
#theme-toggle.pulse-on .pulse{
  animation: tgPulse 420ms ease;
}
@keyframes tgPulse{
  0%   { opacity:.55; transform: scale(.9); }
  100% { opacity:0;   transform: scale(1.25); }
}


/* anchor */
.werkgebied .map-item { position: relative; }

/* === FINAL WERKGEBIED CAPTION STYLING === */
#wg-caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: start center;
  padding-top: 2%; /* raise caption */
  pointer-events: none;
  z-index: 5;
}

#wg-caption .wg-caption__main {
  display: block;
  font-size: clamp(36px, 7vw, 84px);
  font-weight: 900;                  /* restores thickness */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--work-stroke, #c4313a); /* strong red tone */
  text-shadow: 0 0 12px rgba(196,49,58,0.6); /* brightness */
  line-height: 1.1;
  position: relative;
}

#wg-caption.is-radius .wg-caption__main {
  font-size: clamp(30px, 6vw, 72px);
}

/* underline */
#wg-caption .wg-caption__main::after {
  content: "";
  display: block;
  width: 80%;
  margin: 6px auto 0;
  border-bottom: 4px solid currentColor;
}

/* subcaption */
#wg-caption .wg-caption__sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--work-stroke, #c4313a);
  text-shadow: 0 0 8px rgba(196,49,58,0.6);
  opacity: 0.95;
}

/* ===== Werkgebied buttons (pills) ===== */
.werkgebied__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.wg-help {
  margin: 0.85rem auto 0;
  max-width: 58ch;
  text-align: center;
  line-height: 1.45;
  font-size: clamp(0.86rem, 1.2vw, 0.97rem);
  color: var(--muted);
}

.wg-help a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.wg-help a:hover,
.wg-help a:focus-visible {
  text-decoration: underline;
}

/* Werkgebied pills – dark glass look */
.wg-btn.pill {
  border-radius: 9999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;

  /* dark glass base */
  background: rgba(15, 23, 42, 0.65);               /* slate-ish */
  border: 1px solid rgba(148, 163, 184, 0.35);      /* soft border */
  color: var(--text-2);

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(15, 23, 42, 0.6);                /* subtle inner ring */

  transform: translateZ(0);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.18s ease;
}

.wg-btn.pill:hover,
.wg-btn.pill.active {
  background: rgba(15, 23, 42, 0.9);
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
  color: var(--brand);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.75),
    0 0 12px color-mix(in oklab, var(--brand) 40%, transparent);
  transform: translateY(-1px);
}

/* keep your focus ring */
.wg-btn.pill:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.map-zoom-wrap {
  display: inline-block;
  transform-origin: center center;
  will-change: transform;
}


.map-zoom-wrap, .werkgebied-svg {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.werkgebied-svg #Rotterdam path,
.werkgebied-svg #Nissewaard path{
  fill: none;
  stroke: var(--work-stroke);
  vector-effect: non-scaling-stroke;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Base NL outline (grey) — exclude the two focus municipalities */
.werkgebied-svg #vp :not(#Rotterdam):not(#Nissewaard) path{
  stroke-width: 1.2px; /* was 1.35 */
}

/* === Werkgebied: ±20 km dashed ring =================================== */
.werkgebied-svg .wg-radius{
  fill: none;
  stroke: var(--glow-stroke, var(--work-stroke));
  stroke-width: 2.8px;                 /* 2.5–3px spec */
  stroke-dasharray: 10 8;               /* dashed look */
  vector-effect: non-scaling-stroke;    /* stays crisp on zoom */
  opacity: 0;                           /* hidden by default */
  transition: opacity 280ms ease;       /* smooth fade in/out */
  mix-blend-mode: screen;               /* pleasant bloom on dark */
  pointer-events: none;                 /* purely visual */
}

/* visible state */
.werkgebied-svg .wg-radius.on{ opacity: 1; }

/* main caption word */
#wg-caption .wg-caption__main{
  display: inline-block;         /* shrink-wrap to the word */
  position: relative;
}

/* the underline */
#wg-caption .wg-caption__main::after{
  content: "";
  display: block;
  height: 0;                     /* we only need a border line */
  border-bottom: 4px solid currentColor;
  margin: 6px auto 0;

  /* Base the underline on the word width, then scale it */
  width: 100%;
  transform: scaleX(var(--uline, .8));   /* default = 80% of word */
  transform-origin: center;
  transition: transform 220ms ease;      /* smooth when captions change */
}

/* generic reset must NOT include our id */
.werkgebied-svg path:not(#wg-radius-hull):not(.wg-radius){
  fill: none;
  stroke: var(--nl-stroke);
  vector-effect: non-scaling-stroke;
  stroke-dasharray: none;
  filter: none;
}

/* single dashed hull with built-in glow */
.werkgebied-svg #wg-radius-hull{
  stroke: var(--glow-stroke, #ff6a6f) !important;
  stroke-width: 3;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;                            /* hidden by default */
  transition: opacity 260ms ease;
  pointer-events: none;

  /* red halo directly on the dashed path */
  filter:
    drop-shadow(0 0 2px  var(--glow-stroke, #ff6a6f))
    drop-shadow(0 0 6px  var(--glow-stroke, #ff6a6f))
    drop-shadow(0 0 12px var(--glow-stroke, #ff6a6f));
  mix-blend-mode: screen;                 /* optional */
}

/* show + marching */
.werkgebied-svg #wg-radius-hull.on{ opacity: 1; }
@keyframes wgDash { to { stroke-dashoffset: -180; } }
.werkgebied-svg #wg-radius-hull.marching{
  animation: wgDash 14s linear infinite;
}


/* soft red glow on the dashed hull */
.werkgebied-svg #wg-radius-hull.glow {
  filter:
    drop-shadow(0 0 3px  rgba(255,106,111,0.8))
    drop-shadow(0 0 10px rgba(255,106,111,0.95))
    drop-shadow(0 0 22px rgba(255,106,111,1)) !important;
  mix-blend-mode: screen; /* optional */
}

/* === HARD OVERRIDE: Werkgebied glow + hover === */

/* make sure the hit area is always hoverable */
.werkgebied-svg .glow-hit {
  fill: #000;
  fill-opacity: 0.001;       /* invisible but hoverable */
  pointer-events: all !important;
  cursor: pointer;
}

/* base cursor on actual regions too */
.werkgebied-svg #Rotterdam,
.werkgebied-svg #Nissewaard {
  cursor: pointer;
}

/* glow layer that JS clones (#Rotterdam-glowlayer, #Nissewaard-glowlayer) */
.werkgebied-svg .glow-layer,
.werkgebied-svg .glow-layer path {
  fill: none !important;
  stroke: var(--glow-stroke) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.8px;

  opacity: 0;
  filter: url(#wg-glow-red) !important;
  mix-blend-mode: normal;
  pointer-events: none;
  transition: opacity 260ms ease;
}

/* when JS adds .glow-on, actually show the halo */
.werkgebied-svg .glow-layer.glow-on,
.werkgebied-svg .glow-layer.glow-on path {
  opacity: 1 !important;
}

/* boost the main outline too, so the glow reads on hover + auto captions */
.werkgebied-svg .wg-active {
  stroke: var(--glow-stroke) !important;
  stroke-width: 1.8px !important;
  filter: url(#wg-glow-red) !important;
}

/* Make sure our custom hit-rects behave as invisible buttons */
.werkgebied-svg .wg-hit-rect {
  fill: #000;
  fill-opacity: 0.001;
  pointer-events: all;
  cursor: pointer;
}

/* Make the whole municipality area clickable, not just the stroke */
.werkgebied-svg #Rotterdam,
.werkgebied-svg #Nissewaard {
  pointer-events: bounding-box;
  cursor: pointer;
}

/* Werkgebied: restore centered layout & vertical spacing */
.werkgebied {
  text-align: center;
  padding: 6rem 0 5rem;   /* big window like the second screenshot */
  margin-top: 0;          /* remove the tiny clamp margin we added earlier */
}

.werkgebied .container {
  max-width: 1600px;      /* keep the big-map container width */
  margin: 0 auto;
  padding: 0 2rem;        /* same side padding as old layout */
}



/* ============================================================
   WERKGEBIED PILLS — LIGHT MODE (FINAL WORKING VERSION)
   ============================================================ */
:root:not([data-theme="dark"]) .wg-btn.pill {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

:root:not([data-theme="dark"]) .wg-btn.pill:hover {
  background: #fde8ea !important;
  border-color: #f5b5b9 !important;
  color: #b91c1c !important;
}

/* ===========================
   Lightbox overlay
   ========================== */
body.no-scroll-lightbox{
  overflow: hidden;
}

/* Backdrop */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.lightbox.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Content */
.lightbox__figure{
  max-width: min(96vw, 1200px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lightbox__img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  object-fit: contain;
}

/* Theme-aware border */
:root[data-theme="dark"] .lightbox__img{
  border: 1px solid rgba(255,255,255,.08);
}
:root:not([data-theme="dark"]) .lightbox__img{
  border: 1px solid rgba(0,0,0,.06);
}

.lightbox__caption{
  color: #f9fafb;
  font-size: .9rem;
  text-align: center;
}

/* Controls */
.lightbox__close,
.lightbox__nav{
  position: absolute;
  background: rgba(17,24,39,.9);
  border: none;
  color: #f9fafb;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font-size: 1.4rem;
}

.lightbox__close{
  top: 20px;
  right: 20px;
}

.lightbox__nav--prev{
  left: 32px;
}

.lightbox__nav--next{
  right: 32px;
}



.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}


.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}
.lightbox {
  background: rgba(0,0,0,0.88);
}

.lightbox__caption {
  margin-top: 10px;
  opacity: 0.85;
  font-size: 0.85rem;
}


/* ===== Werkwijze timeline (visual-only) ===== */
.werkwijze-section .section-title {
  text-align: center;
}

.werkwijze-section .section-title::after {
  content: "";
  display: block;
  width: 74px;
  height: 3px;
  margin: 0.6rem auto 0;
  background: var(--brand);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 42, 42, 0.6);
}

.werkwijze-hint {
  display: none;
  margin: 0.26rem auto 0.08rem;
  max-width: 34ch;
  text-align: center;
  color: color-mix(in oklab, var(--brand) 70%, var(--text) 30%);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  line-height: 1.25;
  opacity: 0.9;
}


.werkwijze-section .werkwijze-timeline {
  position: relative;
  display: grid;
  place-items: center;
  margin-inline: auto;
  padding-block: 2.5rem;
  width: 100%;
  max-width: 980px;
}

.werkwijze-section .werkwijze-svg {
  position: relative;
  display: block;
  width: min(100%, 900px);
  height: auto;
  z-index: 0;
  pointer-events: none;

  /* soft left/right fade */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
}

/* dashed track — thinner & pushed visually behind */
.werkwijze-section .werkwijze-track {
  fill: none;
  stroke: rgba(255, 42, 42, 0.22);
  stroke-width: 2;
  stroke-dasharray: 10 12;
}

/* solid glowing line — dominant */
.werkwijze-section .werkwijze-fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 5;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 3px rgba(255, 42, 42, 0.55));
}




/* approximate positions along the path (no JS) */
.werkwijze-section .werkwijze-dot:nth-of-type(1) { left: 20%; }
.werkwijze-section .werkwijze-dot:nth-of-type(2) { left: 39%; }
.werkwijze-section .werkwijze-dot:nth-of-type(3) { left: 60%; }
.werkwijze-section .werkwijze-dot:nth-of-type(4) { left: 80%; }

/* Vertical alignment per dot to match curve */
.werkwijze-section .werkwijze-dot:nth-of-type(1) { top: 43%; }
.werkwijze-section .werkwijze-dot:nth-of-type(2) { top: 59%; }
.werkwijze-section .werkwijze-dot:nth-of-type(3) { top: 29%; }
.werkwijze-section .werkwijze-dot:nth-of-type(4) { top: 34%; }



/* Tooltips (still hidden by [hidden]) */
.werkwijze-section .werkwijze-tooltip {
  position: absolute;
  left: 50%;
  top: calc(50% - 46px);
  transform: translate(-50%, -100%);
  max-width: min(92vw, 360px);
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 42, 42, 0.35);
  background: linear-gradient(180deg, rgba(18, 18, 22, 0.75), rgba(14, 14, 18, 0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(255, 42, 42, 0.25);
  color: inherit;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  font-size: 0.95rem;
}

.werkwijze-section .werkwijze-tooltip:not([hidden]) {
  pointer-events: auto;
  opacity: 1;
}



.werkwijze-section .werkwijze-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: linear-gradient(180deg, rgba(18, 18, 22, 0.8), rgba(14, 14, 18, 0.75));
  border-left: 1px solid rgba(255, 42, 42, 0.35);
  border-bottom: 1px solid rgba(255, 42, 42, 0.35);
  transform-origin: center;
  rotate: 45deg;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  margin-left: -1px;
}
.werkwijze-tooltip[data-position="top"]::after {
  bottom: -5px;
}
.werkwijze-tooltip[data-position="bottom"]::after {
  top: -5px;
}



/* Werkwijze title must NOT inherit section left accent */
.werkwijze-section .section-title {
  border-left: 0;
  padding-left: 0;
}

/* === WERKWIJZE — SECTION SPACING (Concept 1) === */
.werkwijze-section {
  padding-bottom: clamp(56px, 8vw, 96px);
}

.werkwijze-section .werkwijze-timeline {
  margin-top: clamp(56px, 5vh, 96px);
}



.werkwijze-tooltip {
  z-index: 5;
}


/* Kill any accidental text inside dots (numbers, counters, etc.) */
.werkwijze-dot {
  font-size: 0;
  color: transparent;
}

/* ===== Werkwijze Dot — Precision Core (Final) ===== */
.werkwijze-dot {
  --ww-dot-scale: 1;
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;

  background: #c62828; /* clean, solid red */
  border: none;       /* 🔥 removes muted overlay */

  box-sizing: border-box;
  padding: 0;
  margin: 0;

  display: block;
  cursor: pointer;
  touch-action: manipulation;
  transform: scale(var(--ww-dot-scale));
  transform-origin: center center;

  transition:
    transform 0.28s ease,
    background-color 0.28s ease;
}

.werkwijze-dot .ww-dot-label {
  display: none;
}



body.light-mode .werkwijze-dot {
  border-color: rgba(0, 0, 0, 0.35);
}

body.light-mode .werkwijze-dot::after {
  border-color: rgba(255, 255, 255, 0.8);
}


.werkwijze-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;

  border: 2px solid rgba(0, 0, 0, 0.4);
  opacity: 0.3;
  transform: scale(0.85);

  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    box-shadow 0.35s ease;

  pointer-events: none;
}


.werkwijze-dot[aria-expanded="true"] {
  --ww-dot-scale: 1.18;
  background: #e53935;       /* not neon, fits brand */
}

.werkwijze-dot[aria-expanded="true"]::after {
  opacity: 1;
  transform: scale(1);

  box-shadow:
    0 0 10px rgba(229, 57, 53, 0.45),
    0 0 22px rgba(229, 57, 53, 0.25);
}

.werkwijze-tooltip strong{
  color: #c4313a;           /* brand-aligned red */
  font-weight: 800;
  margin-bottom: 0.25rem;
  display: block;
  letter-spacing: 0.01em;

  /* soft premium glow */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.25),
    0 0 10px rgba(255, 79, 90, 0.38),
    0 0 22px rgba(196, 49, 58, 0.18);
}

.werkwijze-section .werkwijze-tooltip ul {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.24rem;
}

.werkwijze-section .werkwijze-tooltip li {
  position: relative;
  padding-left: 0.72rem;
  line-height: inherit;
}

.werkwijze-section .werkwijze-tooltip li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.62;
}


/* ===== Light-mode tooltip (works with :root[data-theme]) ===== */
:root:not([data-theme="dark"]) .werkwijze-section .werkwijze-tooltip{
  background: rgba(255, 255, 255, 0.92);
  color: #1f2933;

  border: 1px solid rgba(0, 0, 0, 0.10);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.14),
    0 0 16px rgba(196, 49, 58, 0.12);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:root:not([data-theme="dark"]) .werkwijze-section .werkwijze-tooltip::after{
  background: rgba(255, 255, 255, 0.92);
  border-left: 1px solid rgba(0, 0, 0, 0.10);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  filter: none;
}

/* Light mode: halo must be white */
:root:not([data-theme="dark"]) .werkwijze-dot::after{
  border-color: rgba(255, 255, 255, 0.85);
  opacity: 0.45; /* slightly more visible on light backgrounds */
}

@media (min-width: 769px) {
  .werkwijze-section .werkwijze-dot {
    --ww-desk-branch-len: clamp(20px, 2.2vw, 30px);
    --ww-desk-branch-gap: 4px;
    --ww-desk-label-gap: 8px;
    --ww-desk-offset: calc(var(--ww-desk-branch-len) + var(--ww-desk-branch-gap) + var(--ww-desk-label-gap));
  }

  .werkwijze-section .werkwijze-dot .ww-dot-label {
    display: block;
    position: absolute;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    color: color-mix(in oklab, var(--brand) 84%, var(--text) 16%);
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 8px color-mix(in oklab, var(--brand) 26%, transparent);
    opacity: 1;
    transition: opacity 180ms ease;
    pointer-events: none;
  }

  .werkwijze-section .werkwijze-dot::before {
    content: "";
    position: absolute;
    left: calc(50% + 4px);
    width: clamp(14px, 1.8vw, 20px);
    height: var(--ww-desk-branch-len);
    transform: translateX(-50%);
    opacity: 0.9;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='M10 2 C18 8 18 22 10 28' fill='none' stroke='%23c4313a' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 4'/%3E%3C/svg%3E");
  }

  .werkwijze-section .werkwijze-dot[data-lane="top"] .ww-dot-label {
    bottom: calc(100% + var(--ww-desk-offset));
    text-align: center;
  }

  .werkwijze-section .werkwijze-dot[data-lane="top"]::before {
    bottom: calc(100% + var(--ww-desk-branch-gap));
    transform: translateX(-50%) scaleY(-1);
  }

  .werkwijze-section .werkwijze-dot[data-lane="bottom"] .ww-dot-label {
    top: calc(100% + var(--ww-desk-offset));
    text-align: center;
  }

  .werkwijze-section .werkwijze-dot[data-lane="bottom"]::before {
    top: calc(100% + var(--ww-desk-branch-gap));
  }

  .werkwijze-section .werkwijze-dot[aria-expanded="true"] .ww-dot-label,
  .werkwijze-section .werkwijze-dot[aria-expanded="true"]::before {
    opacity: 0;
  }
}


/* ===============================
   PHONE (≤425px) — HEADER + HERO ONLY
   NOTE: No global .btn rules here. Scope everything.
   =============================== */
@media (max-width: 425px) {

  /* ---------- HEADER (scoped) ---------- */
  .header .container { padding-inline: 10px; }

  .header .brand { flex: 0 0 auto; }

  .header .logo { height: 44px; }

  .header .actions { gap: 8px; flex-shrink: 0; }

  .header .btn {
    padding: 7px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .header-trust{
    --trust-item-gap: 10px;
    min-height: 26px;
  }

  .header-trust__marquee{
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .header-trust__line{
    font-size: 11.5px;
  }

  #theme-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  /* Keep compact state from growing the logo on small phones */
  body.header-compact .header .logo {
    height: 44px;
  }

  /* ---------- HERO (scoped) ---------- */
  .hero .container { gap: 12px; }
  .hero-kicker { font-size: 0.74rem; }
  .hero h1 { max-width: none; font-size: clamp(28px, 8vw, 40px); }
  .hero .sub { font-size: 1rem; }
  .hero-trust { gap: 6px; }
  .hero-trust li { width: 100%; }
  .hero .cta-row { flex-direction: column; align-items: stretch; }

  .hero .cta-row .btn {
    width: 100%;
    justify-content: center;

    /* “words fill the button” on ~375px */
    font-size: clamp(15px, 4.4vw, 17px);
    line-height: 1.05;
    font-weight: 700;
    min-height: 48px;
    padding-block: 12px;
    padding-inline: 16px;
  }
}

/* ===============================
   SMALL PHONES (≤360px) — HEADER ONLY
   =============================== */
@media (max-width: 360px) {
  .header .container { padding-inline: 8px; }

  .header .logo { height: 40px; }

  .header .actions { gap: 6px; }

  .header .btn {
    padding: 6px 8px;
    font-size: 11.5px;
  }

  #theme-toggle {
    width: 28px;
    height: 28px;
    padding: 0;
  }

  .header-trust{
    --trust-item-gap: 9px;
    min-height: 25px;
  }

  .header-trust__line{
    font-size: 11px;
  }

  /* Prevent compact-mode logo jump at this breakpoint */
  body.header-compact .header .logo {
    height: 40px;
  }
}

/* ===============================
   TINY PHONES (≤320px) — HEADER + HERO ONLY
   =============================== */
@media (max-width: 320px) {

  /* ---------- HEADER (scoped) ---------- */
  .header .logo { height: 36px; }

  .header .actions { gap: 4px; }

  .header .btn {
    padding: 6px 8px;
    font-size: 11px;
  }

  #theme-toggle {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-left: 2px;
  }

  .header-trust{
    --trust-item-gap: 8px;
    min-height: 24px;
  }

  .header-trust__line{
    font-size: 10.5px;
  }

  /* Tiny phones: compact mode must stay the same size as initial header */
  body.header-compact .header .logo {
    height: 36px;
  }

  body.header-compact .header .actions #theme-toggle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    transform: none;
  }

  .header .container {
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* ---------- HERO (scoped) ---------- */
  .hero .cta-row .btn {
    /* “words fill the button” on 320px */
    font-size: 16px;
    min-height: 46px;
    padding-block: 11px;
  }
}


/* ===============================
   MOBILE REFINEMENTS — Werkwijze / Werkgebied / Reviews / Footer
   =============================== */
@media (max-width: 768px) {
  .werkwijze-hint {
    display: block;
  }

  /* DIENSTEN — full-width cards with small gutters */
  .main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .container.main-grid {
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
  }

  .section.diensten .container {
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
  }

  .services-col,
  .gallery-col {
    width: 100%;
    padding-inline: 0;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100vw;
    overflow-x: clip;
  }

  /* GALLERY - keep captions readable + enable swipe gestures */
  .gallery-col {
    --peek: 0px;
    --peek-bias: 0px;
  }

  .gallery-col .slider {
    touch-action: pan-y;
  }

  .gallery-col .slider-track {
    margin-left: 0;
    margin-right: 0;
  }

  .gallery-swipe-hint {
    display: grid;
  }

  .gallery-col .slider .nav {
    display: none;
  }

  .lightbox__nav {
    display: none;
  }

  .gallery-col .nav.prev {
    left: 8px;
  }

  .gallery-col .nav.next {
    right: 8px;
  }

  .slide-card > img {
    height: auto;
    min-height: 0;
  }

  .slide-card figcaption {
    height: auto;
    min-height: 44px;
    padding: 8px 12px 10px;
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    line-height: 1.25;
    overflow-wrap: anywhere;
    display: block;
  }

  .services-col .service {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 14px 16px;
    min-width: 0;
    margin-inline: auto;
  }

  .services-col .svc-head {
    min-width: 0;
    flex-wrap: wrap;
  }

  .services-col .svc-head h3 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .services-col .service p,
  .services-col .service li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .services-intro {
    font-size: 0.95rem;
  }

  .gallery-intro {
    font-size: 0.95rem;
  }

  .svc-badge {
    margin-left: 0;
  }

  /* WERKWIJZE — keep SVG animation with a native vertical timeline */
  .werkwijze-section .werkwijze-timeline {
    position: relative;
    display: block;
    width: min(100%, 460px);
    min-height: clamp(480px, 72vh, 640px);
    margin-top: clamp(12px, 2.6vh, 22px);
    margin-inline: auto;
    padding: 0.8rem clamp(12px, 4vw, 22px);
    overflow: visible;
  }

  .werkwijze-section .werkwijze-svg,
  .werkwijze-section .werkwijze-timeline svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: auto;
    max-height: 100%;
    max-width: none;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
  }

  .werkwijze-section .werkwijze-dot {
    position: absolute;
    transform: translate(-50%, -50%) scale(var(--ww-dot-scale, 1));
    z-index: 2;
  }

  .werkwijze-section .werkwijze-dot {
    --ww-branch-len: clamp(34px, 10.5vw, 44px);
    --ww-branch-gap: 4px;
    --ww-label-gap: 8px;
    --ww-branch-offset: calc(var(--ww-branch-len) + var(--ww-branch-gap) + var(--ww-label-gap));
  }

  .werkwijze-section .werkwijze-dot .ww-dot-label {
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    width: max-content;
    transform: translateY(-50%);
    color: color-mix(in oklab, var(--brand) 84%, var(--text) 16%);
    font-size: clamp(0.68rem, 2.8vw, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 8px color-mix(in oklab, var(--brand) 28%, transparent);
    opacity: 1;
    transition: opacity 180ms ease;
    pointer-events: none;
  }

  .werkwijze-section .werkwijze-dot::before {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    width: var(--ww-branch-len);
    height: clamp(12px, 3vw, 16px);
    transform: translateY(-50%);
    opacity: 0.92;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 16'%3E%3Cpath d='M2 8 C16 0 40 0 54 8' fill='none' stroke='%23c4313a' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 4'/%3E%3C/svg%3E");
  }

  .werkwijze-section .werkwijze-dot[data-side="right"] .ww-dot-label {
    left: calc(100% + var(--ww-branch-offset));
    text-align: left;
  }

  .werkwijze-section .werkwijze-dot[data-side="right"]::before {
    left: calc(100% + var(--ww-branch-gap));
  }

  .werkwijze-section .werkwijze-dot[data-side="left"] .ww-dot-label {
    right: calc(100% + var(--ww-branch-offset));
    text-align: right;
  }

  .werkwijze-section .werkwijze-dot[data-side="left"]::before {
    right: calc(100% + var(--ww-branch-gap));
  }

  .werkwijze-section .werkwijze-dot[aria-expanded="true"] .ww-dot-label {
    opacity: 0;
  }

  .werkwijze-section .werkwijze-dot[aria-expanded="true"]::before {
    opacity: 0;
  }

  .werkwijze-section .werkwijze-tooltip {
    width: clamp(160px, 54vw, 220px);
    max-width: clamp(160px, 54vw, 220px);
    padding: 0.58rem 0.68rem;
    font-size: 0.88rem;
    line-height: 1.35;
    white-space: normal;
  }

  .werkwijze-section .werkwijze-tooltip strong {
    font-size: 1em;
    line-height: 1.2;
  }

  .werkwijze-section .werkwijze-tooltip p {
    margin: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: pretty;
  }

  .werkwijze-section .werkwijze-tooltip[data-position="right"]::after,
  .werkwijze-section .werkwijze-tooltip[data-position="left"]::after {
    content: "";
    top: var(--ww-diamond-y, 50%);
    bottom: auto;
    width: 10px;
    height: 10px;
    margin-left: 0;
    transform: translateY(-50%);
    rotate: 45deg;
    border: 1px solid rgba(255, 42, 42, 0.35);
  }

  .werkwijze-section .werkwijze-tooltip[data-position="right"]::after {
    left: calc(var(--ww-diamond-outset, 7px) * -1);
    right: auto;
  }

  .werkwijze-section .werkwijze-tooltip[data-position="left"]::after {
    left: auto;
    right: calc(var(--ww-diamond-outset, 7px) * -1);
  }

  /* WERKGEBIED — tighter padding + fixed map viewport */
  .werkgebied {
    padding: 3.2rem 0 3rem;
  }

  .werkgebied .container {
    padding: 0 var(--pad);
  }

  .werkgebied__maps {
    gap: 1.5rem;
    margin-top: 10px;
  }

  .werkgebied__maps .map-item {
    width: 100%;
  }

  .map-zoom-wrap {
    display: grid;
    place-items: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
  }

  .werkgebied-svg {
    width: auto;
    height: 100%;
    max-width: none;
  }

  .werkgebied-tags {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .werkgebied__buttons {
    justify-content: center;
    gap: 0.6rem;
  }

  .wg-btn.pill {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
  }

  .werkgebied #wg-caption {
    padding-top: 1%;
    padding-inline: clamp(10px, 4vw, 22px);
    box-sizing: border-box;
    text-align: center;
  }

  .werkgebied #wg-caption .wg-caption__main {
    font-size: clamp(26px, 8.5vw, 46px);
    max-width: min(92vw, 520px);
    margin-inline: auto;
  }

  .werkgebied #wg-caption.is-radius .wg-caption__main {
    font-size: clamp(22px, 7.2vw, 38px);
  }

  .werkgebied #wg-caption .wg-caption__sub {
    font-size: clamp(12px, 3.2vw, 16px);
    letter-spacing: 0.02em;
    max-width: min(92vw, 680px);
    margin-inline: auto;
    line-height: 1.3;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  /* REVIEWS — isolated carousel */
  .reviews-section{
    --reviews-card-w-desktop: calc(100vw - (var(--pad) * 2));
    --reviews-peek: 0px;
    --reviews-control-size: 46px;
    --reviews-control-offset: -6px;
  }

  .reviews-track{
    gap: 0;
    padding-inline: 0;
  }

  .reviews-card{
    flex: 0 0 var(--reviews-card-w-desktop);
    max-width: var(--reviews-card-w-desktop);
  }

  .reviews-control__icon{
    width: 23px;
    height: 23px;
  }

  .reviews-dots{
    margin-top: 12px;
    padding-bottom: 12px;
  }

  /* FOOTER — stacked + tighter */
  .foot {
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
    padding: 24px var(--pad);
  }

  .foot-col {
    width: auto;
    text-align: left;
  }

  .foot-brand {
    grid-column: 1 / -1;
  }

  .foot-sub {
    max-width: none;
  }

  .foot-bottom-inner {
    padding: 11px var(--pad);
    font-size: 12.5px;
  }
}

@media (max-width: 425px) {
  /* DIENSTEN — tighter spacing */
  .services-col {
    padding-inline: 10px;
  }

  .services-col .service {
    padding: 12px 14px;
  }

  .services-intro {
    font-size: 0.92rem;
  }

  .gallery-intro {
    font-size: 0.92rem;
  }

  .svc-badge {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  /* WERKWIJZE — tighter vertical timeline */
  .werkwijze-section .werkwijze-timeline {
    min-height: clamp(440px, 70vh, 560px);
  }

  .werkwijze-section .werkwijze-svg { height: 100%; }

  .werkwijze-section .werkwijze-tooltip {
    width: clamp(150px, 58vw, 200px);
    max-width: clamp(150px, 58vw, 200px);
    padding: 0.52rem 0.62rem;
    font-size: 0.84rem;
  }

  /* WERKGEBIED — tighter viewport + caption */
  .werkgebied {
    padding: 2.6rem 0 2.5rem;
  }

  .map-zoom-wrap {
    height: 260px;
  }

  .werkgebied #wg-caption {
    padding-top: 0.5%;
  }

  .werkgebied #wg-caption .wg-caption__main {
    font-size: clamp(22px, 8.5vw, 36px);
  }

  .werkgebied #wg-caption.is-radius .wg-caption__main {
    font-size: clamp(20px, 7vw, 32px);
  }

  .werkgebied #wg-caption .wg-caption__sub {
    font-size: clamp(11px, 3vw, 14px);
  }

  .werkgebied__buttons {
    gap: 0.5rem;
  }

  .wg-btn.pill {
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
  }

  /* REVIEWS — compact controls */
  .reviews-section{
    --reviews-control-size: 46px;
    --reviews-control-offset: -6px;
  }

  .reviews-control__icon{
    width: 22px;
    height: 22px;
  }

  /* FOOTER — smaller type */
  .foot {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px var(--pad);
  }

  .foot-col {
    font-size: 14px;
    line-height: 1.5;
  }

  .foot-title {
    margin-bottom: 10px;
  }

  .foot-brand {
    grid-column: auto;
  }

  .foot-cta {
    width: 100%;
    margin-top: 12px;
  }

  .foot-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    padding: 10px var(--pad);
  }
}

/* ===== Offerte form ===== */
.offerte-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-block: clamp(6px, 1vw, 12px);
}

.offerte-form {
  display: grid;
  gap: 14px;
}

.offerte-form .offerte-field > label,
.offerte-form .offerte-checks > legend {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--text);
}

.offerte-form input:not([type="checkbox"]):not([type="radio"]),
.offerte-form select,
.offerte-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
}

.offerte-form textarea {
  min-height: 140px;
}

.offerte-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.offerte-form select:focus-visible,
.offerte-form textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}

.offerte-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.offerte-form .form-help {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .offerte-form .form-row {
    grid-template-columns: 1fr;
  }
}