/* ==========================================================================
   DE SPANJEVERHUIZERS — Design System
   Inspired by: Lightship (warm cream canvas, pill geometry, full-bleed
   photography, ghost buttons) + Aker (light-weight monumental type,
   hairline structure, single terracotta accent, section labels).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Surfaces — warm Spanish limewash */
  --canvas:#faf6ef;
  --canvas-2:#f3ece0;
  --paper:#ffffff;

  /* Ink — warm near-black */
  --ink:#100e0c;
  --ink-70:#4a453e;
  --ink-45:#6b655c;
  --ink-25:#877f72;

  /* Structure */
  --hairline:#e3dbcc;
  --hairline-strong:#cdc3b1;

  /* Accent — Spanish roof tile. Sole chromatic accent. */
  --terracotta:#b75928;
  --terracotta-text:#a34a1e;
  --terracotta-wash:#f6e7dd;

  /* Dark panel — olive shade */
  --olive:#1b1f17;
  --olive-2:#262b20;
  --olive-line:#3c4234;

  /* Geometry */
  --r-card:20px;
  --r-pill:100px;
  --maxw:1380px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --section:clamp(5rem,11vw,10rem);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* Type */
  --sans:"DM Sans","Söhne",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip i.p.v. hidden: hidden maakt van body een scrollcontainer en dan werkt position:sticky nergens */
  overflow-x:hidden;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

::selection{background:var(--terracotta);color:#fff}

/* Custom scrollbar — small craft detail */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--canvas-2)}
::-webkit-scrollbar-thumb{background:var(--hairline-strong);border:3px solid var(--canvas-2);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:var(--terracotta)}
html{scrollbar-color:var(--hairline-strong) var(--canvas-2);scrollbar-width:thin}

:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:#e8a882}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:0 0 var(--r-card) 0}
.skip:focus{left:0}

/* ---------- 3. Layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.bleed{width:100%;position:relative}

/* ---------- 4. Type ---------- */
.display{
  font-size:clamp(2.6rem,6.4vw,6.5rem);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.042em;
}
.h2{
  font-size:clamp(2.1rem,4.7vw,4rem);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.035em;
}
.h3{
  font-size:clamp(1.3rem,1.9vw,1.7rem);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.022em;
}
.h4{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;line-height:1.35}

.label{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-45);
  line-height:1;
}
.label--dark{color:#9aa090}

.lead{
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.15vw,1.7rem);
  line-height:1.5;
  letter-spacing:-.012em;
  font-weight:400;
  color:var(--ink);
  text-wrap:pretty;
}
.body{color:var(--ink-70);max-width:56ch;text-wrap:pretty}
.body--sm{font-size:.9375rem;line-height:1.6}
.muted{color:var(--ink-45)}
.accent{color:var(--terracotta-text)}

/* Section header block */
.sec-head{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-bottom:clamp(3rem,6vw,5.5rem)}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end}
}
.sec-head__label{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.sec-head__label::after{content:"";flex:1;height:1px;background:var(--hairline);max-width:5rem}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:#faf6ef;
  display:inline-flex;align-items:center;gap:.65rem;
  padding:1rem 1.75rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  border-radius:var(--r-pill);
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.btn:hover{--btn-bg:var(--terracotta);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__arrow{transition:transform .5s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--light{--btn-bg:transparent;--btn-fg:#fff;border-color:rgba(255,255,255,.5)}
.btn--light:hover{--btn-bg:#fff;--btn-fg:var(--ink);border-color:#fff}
.btn--accent{--btn-bg:var(--terracotta);--btn-fg:#fff}
.btn--accent:hover{--btn-bg:#fff;--btn-fg:var(--ink);border-color:#fff}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--hairline-strong)}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--canvas);border-color:var(--ink)}

/* Text-arrow button — the default per both reference systems */
.tbtn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.9375rem;font-weight:500;letter-spacing:-.008em;
  padding-block:.35rem;
  position:relative;
  transition:color .4s var(--ease);
}
.tbtn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease);
}
.tbtn:hover{color:var(--terracotta-text)}
.tbtn:hover::after{transform:scaleX(1);transform-origin:left}
.tbtn svg{transition:transform .5s var(--ease)}
.tbtn:hover svg{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:1.15rem;
  transition:transform .6s var(--ease),background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
  color:#fff;
}
.hdr__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
}
.hdr--solid{
  background:rgba(250,246,239,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--hairline);
  color:var(--ink);
  padding-block:.85rem;
}
.hdr--hidden{transform:translateY(-101%)}

.wordmark{
  grid-column:2;justify-self:center;
  font-size:clamp(.78rem,1.15vw,.92rem);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.wordmark span{color:var(--terracotta)}
.hdr:not(.hdr--solid) .wordmark span{color:#e79b6d}

.nav{display:none;gap:2rem;align-items:center}
.nav--r{justify-self:end}
@media (min-width:1060px){.nav{display:flex}}
.nav a{
  font-size:.875rem;font-weight:400;letter-spacing:-.005em;
  position:relative;padding-block:.3rem;opacity:.85;
  transition:opacity .4s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* Specificity has to beat `.nav a` for padding and opacity. */
.nav a.nav__cta{
  border:1px solid currentColor;border-radius:var(--r-pill);
  padding:.55rem 1.15rem;opacity:1;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.nav a.nav__cta::after{display:none}
.nav a.nav__cta:hover{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.hdr:not(.hdr--solid) .nav a.nav__cta:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Burger */
.burger{
  grid-column:3;justify-self:end;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;align-items:flex-end;
  background:none;border:0;cursor:pointer;
}
@media (min-width:1060px){.burger{display:none}}
.burger span{display:block;height:1.5px;width:22px;background:currentColor;transition:transform .5s var(--ease),opacity .3s var(--ease),width .5s var(--ease)}
.burger span:nth-child(2){width:15px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:22px}

/* Mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:99;
  background:var(--canvas);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.mmenu[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible}
.mmenu a{
  display:block;padding-block:.7rem;
  font-size:clamp(2rem,9vw,3.25rem);font-weight:300;letter-spacing:-.04em;line-height:1.1;
  border-bottom:1px solid var(--hairline);
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s var(--ease);
}
.mmenu a:hover{color:var(--terracotta-text)}
.mmenu[data-open="true"] a{opacity:1;transform:none}
.mmenu[data-open="true"] a:nth-child(1){transition-delay:.16s}
.mmenu[data-open="true"] a:nth-child(2){transition-delay:.22s}
.mmenu[data-open="true"] a:nth-child(3){transition-delay:.28s}
.mmenu[data-open="true"] a:nth-child(4){transition-delay:.34s}
.mmenu[data-open="true"] a:nth-child(5){transition-delay:.4s}
.mmenu__foot{margin-top:2.5rem;display:grid;gap:.4rem}

/* ---------- 7. Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%;animation:kb 26s var(--ease-io) forwards}
@keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none}}
/* Okt 2026 (feedback Jan: beeld te donker). Geen deken meer over de hele foto:
   het verloop zit alleen linksonder, waar de tekst staat. Bovenkant en rechts
   blijven vrij zodat de wagens op volle sterkte te zien zijn. De leesbaarheid
   komt van een zachte tekstschaduw in plaats van extra zwart. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 75% 65% at 0% 100%,rgba(10,8,6,.62) 0%,rgba(10,8,6,.34) 45%,rgba(10,8,6,0) 75%),
    linear-gradient(to top,rgba(10,8,6,.42) 0%,rgba(10,8,6,.12) 32%,rgba(10,8,6,0) 50%);
}
.hero__media{filter:brightness(1.06) saturate(1.08)}
.hero__body{text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.35)}
/* Mobiel staat de tekst over het midden van het beeld; daar blijft wat meer
   dekking onderin nodig, maar de bovenste helft blijft licht. */
@media (max-width:640px){
  .hero__scrim{
    background:
      linear-gradient(to top,
        rgba(10,8,6,.78) 0%,
        rgba(10,8,6,.6) 30%,
        rgba(10,8,6,.3) 55%,
        rgba(10,8,6,.06) 75%,
        rgba(10,8,6,.12) 100%);
  }
}
.hero__body{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter) clamp(2.5rem,5vw,4rem)}
.hero__eyebrow{display:flex;align-items:center;gap:.85rem;color:#fff;margin-bottom:clamp(.75rem,1.3vw,1.05rem)}
.hero__eyebrow::before{content:"";width:clamp(1.5rem,4vw,3.5rem);height:1px;background:rgba(255,255,255,.6)}
.hero h1{margin-bottom:clamp(.9rem,1.55vw,1.3rem);text-wrap:balance}
.hero h1 .l2{display:block;color:rgba(255,255,255,.9)}
.hero h1.hero__title{font-size:clamp(2.3rem,5vw,5.25rem);line-height:1}
.hero .hero__eyebrow{font-size:.8125rem;letter-spacing:.14em}
.hero .hero__sub{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:#fff}
/* Eén duidelijke offerteknop in de hero; de menuknop verschijnt pas als de
   hero uit beeld is (feedback Jan: twee knoppen op hetzelfde scherm). */
.btn--xl{padding:1.2rem 2.2rem;font-size:1.0625rem;font-weight:600;box-shadow:0 10px 30px -10px rgba(183,89,40,.75);text-shadow:none}
body:has([data-hero-cta]) .hdr:not(.hdr--solid) .nav a.nav__cta{opacity:0;pointer-events:none}

/* "Dé" draagt de claim: zwaar tegen de lichte rest, met een streep die zich
   na het laden intekent. Zalm i.p.v. terracotta — terracotta haalt op deze
   donkere ondergrond de 3:1 voor grafische elementen niet. */
.hero h1 .the{position:relative;display:inline-block;font-weight:600}
/* De twee letters komen als een golf omhoog: gestaggerd, met een lichte
   doorzwaai. Alleen translate/opacity, dus geen layout shift op de regel. */
.hero h1 .the > span{
  display:inline-block;
  animation:theWave .85s cubic-bezier(.34,1.5,.64,1) both;
}
.hero h1 .the > span:nth-child(1){animation-delay:.12s}
.hero h1 .the > span:nth-child(2){animation-delay:.24s}
@keyframes theWave{
  from{opacity:0;transform:translateY(.45em)}
  60%{opacity:1}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .the > span{animation:none}
}
.hero h1 .the::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;
  height:.055em;min-height:3px;background:#e79b6d;border-radius:100px;
  transform:scaleX(0);transform-origin:left;
  animation:theRule 1s var(--ease) .75s forwards;
}
@keyframes theRule{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .hero h1 .the::after{animation:none;transform:scaleX(1)}
}
@media (min-width:900px){.hero h1 .l2{margin-left:clamp(3rem,14vw,15rem)}}
.hero__row{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:end}
@media (min-width:900px){.hero__row{grid-template-columns:minmax(0,1fr) minmax(0,30rem)}}
.hero__sub{color:rgba(255,255,255,.88);max-width:44ch;font-size:1.0625rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:center}
.hero__meta{
  margin-top:clamp(1.15rem,1.9vw,1.6rem);padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;
  color:rgba(255,255,255,.78);
  font-size:.875rem;
}
.hero__meta span{display:flex;align-items:center;gap:.6rem}
.hero__meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--terracotta)}

/* ---------- 8. Stat strip ---------- */
.stats{border-bottom:1px solid var(--hairline)}
/* Kernbelofte direct onder de banner; stond eerst in de banner zelf, maar liep daar door de vrachtwagens in de video. */
.stats__intro{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(1rem,2vw,1.5rem);text-align:center}
.stats__lead{font-size:clamp(1.5rem,3vw,2.375rem);font-weight:400;letter-spacing:-.025em;line-height:1.15;color:var(--ink);text-wrap:balance}
.stats__slogan{margin-top:.6rem;font-size:clamp(1.05rem,1.5vw,1.25rem);font-style:italic;color:var(--terracotta-text)}
.hero__row--solo{grid-template-columns:1fr !important}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.stats__grid{grid-template-columns:repeat(4,1fr)}}
.stat{padding:clamp(2rem,4vw,3.25rem) clamp(1rem,2.5vw,2rem);border-top:1px solid var(--hairline)}
.stat+.stat{border-left:1px solid var(--hairline)}
@media (max-width:859px){.stat:nth-child(odd){border-left:0}}
.stat__n{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:300;letter-spacing:-.04em;line-height:1;margin-bottom:.7rem}
/* Titels lopen soms over twee regels: allemaal even hoog maken en onderaan
   uitlijnen, zodat de omschrijvingen op dezelfde lijn beginnen. */
.stat__n{min-height:2em;display:flex;align-items:flex-end}
.stat__t{font-size:.875rem;color:var(--ink-45);line-height:1.45;max-width:20ch}

/* ---------- 9. Manifesto ---------- */
.mani{display:grid;gap:clamp(2.5rem,6vw,5rem)}
@media (min-width:960px){.mani{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.mani__text{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.mani__media img{width:100%;border-radius:var(--r-card);aspect-ratio:4/5;object-fit:cover}
@media (min-width:960px){.mani__media{margin-top:clamp(2rem,5vw,4.5rem)}}
.mani__cap{margin-top:1.1rem;font-size:.8125rem;color:var(--ink-45);letter-spacing:-.005em}

/* ---------- 10. Services ---------- */
.svcs{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:820px){
  .svcs{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}
  .svc:nth-child(even){margin-top:clamp(3rem,7vw,7rem)}
}
.svc__media{overflow:hidden;border-radius:var(--r-card);margin-bottom:1.75rem}
.svc__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.1s var(--ease)}
.svc:hover .svc__media img{transform:scale(1.045)}
.svc h3{margin-bottom:.85rem}
.svc p{color:var(--ink-70);max-width:46ch;margin-bottom:1.1rem}

/* ---------- 11. Process ---------- */
.steps{border-top:1px solid var(--hairline)}
.step{
  border-bottom:1px solid var(--hairline);
  display:grid;gap:.5rem 2.5rem;
  padding-block:clamp(1.75rem,3.5vw,2.75rem);
  transition:background .5s var(--ease);
}
@media (min-width:820px){.step{grid-template-columns:5.5rem minmax(0,20rem) minmax(0,1fr);align-items:baseline}}
.step:hover{background:var(--canvas-2)}
.step__n{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:300;letter-spacing:-.04em;color:var(--ink-25);line-height:1;transition:color .5s var(--ease)}
.step:hover .step__n{color:var(--terracotta)}
.step p{color:var(--ink-70);max-width:52ch}

/* ---------- 12. Full-bleed break ---------- */
.break{position:relative;min-height:clamp(24rem,72vh,42rem);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.break>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Tuned against break-kustweg.jpg — bright sea and sky, so the lower band
   needs real weight to carry white text. */
.break__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(10,8,6,.88) 0%,
    rgba(10,8,6,.80) 22%,
    rgba(10,8,6,.68) 42%,
    rgba(10,8,6,.44) 58%,
    rgba(10,8,6,.18) 74%,
    rgba(10,8,6,.30) 100%);
}
.break__body{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter) clamp(2.5rem,5vw,4rem)}
.break h2{max-width:18ch;margin-bottom:1.1rem;text-wrap:balance}
.break p{color:rgba(255,255,255,.86);max-width:46ch}

/* Het "Spanje-moment": groter en stiller dan een gewone break, want dit is
   de emotionele belofte en niet zomaar een tussenbeeld. */
.break--tall{min-height:clamp(30rem,86vh,50rem)}
/* Altea is een wit dorp: fel op de plek waar de kop staat. Naast de ramp van
   onderen dus ook een verloop van links, zodat de zee en de daken rechts
   onaangetast blijven. Waarden nagerekend tegen de echte pixels. */
.break--tall .break__scrim{
  background:
    linear-gradient(to top,
      rgba(10,8,6,.90) 0%,
      rgba(10,8,6,.82) 22%,
      rgba(10,8,6,.68) 42%,
      rgba(10,8,6,.44) 58%,
      rgba(10,8,6,.18) 74%,
      rgba(10,8,6,.26) 100%),
    linear-gradient(to right,rgba(10,8,6,.55) 0%,rgba(10,8,6,0) 70%);
}
.break--tall .break__body{padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.break--tall h2{max-width:none;margin-bottom:1.4rem}
.break__l2{display:block;color:rgba(255,255,255,.78)}
@media (min-width:900px){.break__l2{margin-left:clamp(3rem,11vw,11rem)}}

/* ---------- 13. Destinations ---------- */
.dests{display:grid;gap:clamp(1.75rem,3vw,2.75rem)}
@media (min-width:700px){.dests{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.dests{grid-template-columns:repeat(3,1fr)}}
/* Kustpagina's: twee kaarten naar de andere kusten, ook op breed scherm naast elkaar. */
@media (min-width:1060px){.dests--2{grid-template-columns:repeat(2,1fr)}}
.dest{display:block;position:relative;border-radius:var(--r-card);overflow:hidden;isolation:isolate;color:#fff}
.dest img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.dest::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,10,8,.8),rgba(12,10,8,.05) 62%)}
.dest:hover img{transform:scale(1.055)}
/* Kaarten die naar een bestemmingspagina linken: pijltje als klik-signaal, ook op touch (geen hover). */
a.dest .dest__name::after{content:"\2192";display:inline-block;margin-left:.45em;font-weight:300;transition:transform .5s var(--ease)}
a.dest:hover .dest__name::after{transform:translateX(5px)}

/* ---------- Mobiele beeldverhoudingen ----------
   Op telefoonbreedte staat elke kaart in één kolom. Een 4:5-crop kost dan
   335x419px per beeld; met zes bestemmingen en vier dienstblokken loopt dat op
   tot enkele schermen aan puur beeld. Liggend crop houdt dezelfde compositie
   maar maakt de lijst weer scanbaar. Desktop blijft staand. */
@media (max-width:699px){
  .dest img{aspect-ratio:4/3}
  .mani__media img{aspect-ratio:4/3}
  /* De kaart is nu lager, waardoor naam + plaatsen + badge boven de donkere
     zone van het standaardverloop uitkwamen en over de lucht kwamen te staan.
     Hier loopt de dekking daarom hoger door. */
  .dest::after{background:linear-gradient(to top,rgba(12,10,8,.9),rgba(12,10,8,.62) 42%,rgba(12,10,8,.12) 78%)}
}
.dest__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(1.25rem,2.5vw,1.75rem)}
.dest__name{font-size:clamp(1.35rem,2vw,1.6rem);font-weight:400;letter-spacing:-.025em;margin-bottom:.35rem}
.dest__places{font-size:.875rem;color:rgba(255,255,255,.78);margin-bottom:.9rem}
.dest__meta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);
  padding:.4rem .85rem;
}
.dests__note{margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}

/* ---------- 14. Testimonials ---------- */
.quotes{display:grid;gap:clamp(2rem,3.5vw,3rem)}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{border-top:1px solid var(--ink);padding-top:1.75rem;display:flex;flex-direction:column;gap:1.5rem}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;letter-spacing:-.012em;text-wrap:pretty}
.quote figcaption{margin-top:auto;font-size:.875rem;color:var(--ink-45)}
.quote figcaption b{display:block;color:var(--ink);font-weight:500;margin-bottom:.15rem}

/* ---------- 15. FAQ ---------- */
.faq{border-top:1px solid var(--hairline)}
.fitem{border-bottom:1px solid var(--hairline)}
.fq{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
  padding-block:clamp(1.35rem,2.4vw,1.85rem);
  font-size:clamp(1.05rem,1.55vw,1.3rem);font-weight:400;letter-spacing:-.022em;line-height:1.35;
  transition:color .4s var(--ease);
}
.fq:hover{color:var(--terracotta-text)}
.fq__icon{position:relative;flex:0 0 auto;width:16px;height:16px;margin-top:.45rem}
.fq__icon::before,.fq__icon::after{content:"";position:absolute;background:currentColor;transition:transform .55s var(--ease),opacity .4s var(--ease)}
.fq__icon::before{top:7.25px;left:0;right:0;height:1.5px}
.fq__icon::after{top:0;left:7.25px;width:1.5px;height:16px}
.fq[aria-expanded="true"] .fq__icon::after{transform:rotate(90deg);opacity:0}
.fa{overflow:hidden;height:0;transition:height .6s var(--ease)}
.fa__inner{padding-bottom:clamp(1.35rem,2.4vw,1.85rem);padding-right:clamp(0rem,8vw,6rem)}
.fa p{color:var(--ink-70);max-width:62ch}

/* ---------- 16. Quote / CTA ---------- */
.cta{background:var(--olive);color:#f2efe7}
.cta__grid{display:grid}
@media (min-width:980px){.cta__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}}
.cta__media{position:relative;min-height:20rem}
.cta__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Het formulier is lang; zonder sticky werd de foto ruim 3000px hoog opgeblazen en wazig.
   Op desktop blijft de foto schermhoog in beeld terwijl men door het formulier scrolt. */
@media (min-width:980px){.cta__media img{position:sticky;inset:auto;top:0;height:100vh;height:100svh}}
.cta__panel{padding:clamp(3rem,7vw,6rem) var(--gutter)}
@media (min-width:980px){.cta__panel{padding-inline:clamp(2.5rem,5vw,5rem)}}
.cta h2{color:#fff;margin-block:1.5rem 1.25rem;max-width:16ch;text-wrap:balance}
.cta__intro{color:#b9bdaf;max-width:46ch;margin-bottom:clamp(2rem,4vw,3rem)}

/* Form */
.form{display:grid;gap:1.1rem}
.f2{display:grid;gap:1.1rem}
@media (min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.45rem}
.field>label{font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#9aa090}
.ctrl{
  width:100%;
  background:transparent;color:#fff;
  border:1px solid var(--olive-line);
  border-radius:var(--r-pill);
  padding:.95rem 1.35rem;
  font-size:.9375rem;
  transition:border-color .4s var(--ease),background .4s var(--ease);
  appearance:none;
}
textarea.ctrl{border-radius:22px;resize:vertical;min-height:6.5rem;font-family:inherit}
.ctrl::placeholder{color:#8a9080}
.ctrl:hover{border-color:#4e5544}
.ctrl:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.045)}
.ctrl:focus-visible{outline:2px solid #e8a882;outline-offset:2px}
select.ctrl{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239aa090' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.35rem center;padding-right:3rem;cursor:pointer;
}
select.ctrl option{background:#262b20;color:#fff}
.err{font-size:.8125rem;color:#e8a882;display:none;padding-left:1.35rem}
.field[data-invalid="true"] .ctrl{border-color:#e8a882}
.field[data-invalid="true"] .err{display:block}
/* Algemene verzendfout: alleen tonen als de JS het hidden-attribuut weghaalt.
   Stond eerder inline op display:block, waardoor hij altijd zichtbaar was. */
#form-error:not([hidden]){display:block}
.form__foot{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:.6rem}
.form .btn{--btn-bg:#fff;--btn-fg:#1b1f17;border-color:#fff}
.form .btn:hover{--btn-bg:var(--terracotta);--btn-fg:#fff;border-color:var(--terracotta)}
.form__note{font-size:.8125rem;color:#9aa090;max-width:32ch}
.form__ok{display:none;border:1px solid var(--olive-line);border-radius:22px;padding:1.75rem}
.form__ok p{color:#b9bdaf;font-size:.9375rem;margin-top:.5rem}
[data-sent="true"] .form{display:none}
[data-sent="true"] .form__ok{display:block}

/* ---------- 17. Footer ---------- */
.ftr{background:var(--canvas);padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:2rem}
.ftr__mark{
  font-size:clamp(2.25rem,9.5vw,8.5rem);font-weight:300;letter-spacing:-.05em;line-height:.9;
  padding-bottom:clamp(2rem,5vw,3.5rem);border-bottom:1px solid var(--hairline);
}
.ftr__mark span{color:var(--terracotta)}
.ftr__mark:has(+ .ftr__slogan){border-bottom:0;padding-bottom:.9rem}
.ftr__slogan{font-size:clamp(1.05rem,1.6vw,1.375rem);color:var(--ink-70);padding-bottom:clamp(2rem,5vw,3.5rem);border-bottom:1px solid var(--hairline)}
.hero__slogan{display:inline-block;margin-top:.35rem;font-style:italic;opacity:.92}
.ftr__cols{display:grid;gap:clamp(2rem,4vw,3rem);padding-block:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:560px){.ftr__cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ftr__cols{grid-template-columns:repeat(5,1fr)}}
.ftr__col h4{margin-bottom:1.1rem}
.ftr__col a,.ftr__col p{display:block;font-size:.9375rem;color:var(--ink-70);padding-block:.2rem}
.ftr__col a{transition:color .35s var(--ease)}
/* Op telefoon haalden deze links 31px hoogte; dat is krap om te raken.
   Moet ná de regel hierboven staan, anders wint die met gelijke specificiteit. */
@media (max-width:699px){.ftr__col a{padding-block:.55rem}}
.ftr__col a:hover{color:var(--terracotta-text)}
.ftr__legal{border-top:1px solid var(--hairline);padding-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;font-size:.8125rem;color:var(--ink-45)}

/* ---------- 18. Scroll reveal ----------
   Gated on .js so content is never hidden if the script fails to load. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.09s}
.js .rv[data-d="2"]{transition-delay:.18s}
.js .rv[data-d="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 19. Brand lockup ---------- */
.brand{display:inline-flex;align-items:center;gap:.7rem;grid-column:2;justify-self:center}
.brand__mark{
  width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  transition:width .5s var(--ease),height .5s var(--ease);
  background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}
.hdr--solid .brand__mark{box-shadow:0 0 0 1px var(--hairline);width:42px;height:42px}
.brand__name{
  font-size:clamp(.82rem,1.25vw,1.05rem);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.brand__name span{color:var(--terracotta)}
.hdr:not(.hdr--solid) .brand__name span{color:#e79b6d}
@media (max-width:520px){.brand__name{display:none}}

/* ---------- 20. Video hero ---------- */
.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease-io);
}
.hero__media video.is-active{opacity:1}
.hero__media .hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Poster stays underneath as the first paint and the reduced-motion fallback. */
.hero--video .hero__media img{z-index:0}
.hero--video .hero__media video{z-index:1}

/* ---------- 21. Page hero (subpages) ---------- */
.phero{position:relative;padding-top:clamp(8rem,16vw,12rem);padding-bottom:clamp(3rem,7vw,5.5rem);overflow:hidden;color:#fff}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,8,6,.86),rgba(10,8,6,.55) 55%,rgba(10,8,6,.62))}
.phero__body{position:relative;z-index:2}
.phero h1{max-width:16ch;margin-block:1.1rem;text-wrap:balance}
.phero p{color:rgba(255,255,255,.88);max-width:52ch}
.crumbs{display:flex;gap:.6rem;align-items:center;color:rgba(255,255,255,.72);font-size:.8125rem}
.crumbs a:hover{color:#fff;text-decoration:underline}

/* ---------- 22. Reviews ---------- */
.rev-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-bottom:clamp(2rem,4vw,3rem)}
.rev-score{display:flex;align-items:center;gap:.9rem}
.rev-score__g{width:26px;height:26px;flex:0 0 auto}
.rev-score__n{font-size:1.5rem;font-weight:300;letter-spacing:-.03em}
.stars{display:inline-flex;gap:2px}
.stars svg{width:14px;height:14px;fill:var(--terracotta)}
.revs{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
@media (min-width:700px){.revs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(1.35rem,2.4vw,1.75rem);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.rev:hover{border-color:var(--hairline-strong);transform:translateY(-3px)}
.rev__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.rev__q{font-family:var(--serif);font-size:1rem;line-height:1.6;letter-spacing:-.008em;color:var(--ink);text-wrap:pretty}
.rev__foot{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--hairline);display:flex;align-items:center;gap:.75rem}
.rev__av{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:var(--terracotta-wash);color:var(--terracotta-text);
  display:grid;place-items:center;font-size:.875rem;font-weight:500;
}
.rev__who b{display:block;font-size:.9375rem;font-weight:500;letter-spacing:-.01em}
.rev__who span{font-size:.75rem;color:var(--ink-45)}

/* ---------- 23. Gallery ---------- */
/* Uniform 4:5 — the client's own photos are all shot portrait (3:4), so one
   consistent ratio crops them barely at all. No bento spans: mixed ratios on
   this source material read as an accident, not a composition. */
.gal{display:grid;gap:clamp(.75rem,1.5vw,1.15rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal button{
  display:block;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r-card);overflow:hidden;position:relative;
  background:var(--canvas-2);
}
.gal img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.gal button::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,8,6,.32),rgba(10,8,6,0) 45%);
  opacity:0;transition:opacity .6s var(--ease);
}
.gal button:hover img{transform:scale(1.05)}
.gal button:hover::after{opacity:1}
.lb{
  position:fixed;inset:0;z-index:150;display:none;place-items:center;
  background:rgba(10,8,6,.93);padding:clamp(1rem,4vw,3rem);
}
.lb[data-open="true"]{display:grid}
.lb img{max-width:100%;max-height:78vh;border-radius:var(--r-card);object-fit:contain;margin-inline:auto}
.lb__fig{margin:0;max-width:min(100%,70rem);display:grid;gap:.9rem;justify-items:center}
.lb__cap{display:flex;gap:1.5rem;justify-content:space-between;width:100%;color:rgba(255,255,255,.8);font-size:.875rem}
.lb__n{font-variant-numeric:tabular-nums;white-space:nowrap}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(10,8,6,.45);color:#fff;cursor:pointer;font-size:2rem;line-height:1;
  display:grid;place-items:center;padding-bottom:.2rem;transition:background .35s var(--ease);
}
.lb__nav:hover{background:rgba(255,255,255,.18)}
.lb__nav--prev{left:clamp(.5rem,2vw,2rem)}
.lb__nav--next{right:clamp(.5rem,2vw,2rem)}
.lb__all{
  position:absolute;top:clamp(1rem,3vw,2rem);left:clamp(1rem,3vw,2rem);
  border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill);background:none;color:#fff;
  padding:.6rem 1.1rem;font-size:.875rem;cursor:pointer;transition:background .35s var(--ease);
}
.lb__all:hover{background:rgba(255,255,255,.14)}
@media (max-width:620px){.lb__nav{top:auto;bottom:1rem;transform:none;width:46px;height:46px}}
.gal__more{margin-top:clamp(1.5rem,3vw,2.25rem);display:flex;justify-content:center}
/* Overzicht met alle foto's */
.gov{position:fixed;inset:0;z-index:140;display:none;flex-direction:column;background:var(--canvas);overflow-y:auto;overscroll-behavior:contain}
.gov[data-open="true"]{display:flex}
.gov__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--gutter);background:rgba(250,246,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.gov .gov__x{position:static;color:var(--ink);border-color:var(--hairline-strong)}
.gov .gov__x:hover{background:var(--canvas-2)}
.gov__grid{display:grid;gap:clamp(.6rem,1.2vw,1rem);grid-template-columns:repeat(2,1fr);padding:clamp(1rem,3vw,2rem) var(--gutter) 3rem;max-width:var(--maxw);width:100%;margin-inline:auto}
@media (min-width:700px){.gov__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.gov__grid{grid-template-columns:repeat(4,1fr)}}
.gov__grid button{display:block;padding:0;border:0;background:var(--canvas-2);border-radius:14px;overflow:hidden;cursor:zoom-in}
.gov__grid img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .8s var(--ease)}
.gov__grid button:hover img{transform:scale(1.05)}
.lb__x{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:none;color:#fff;cursor:pointer;font-size:1.25rem;line-height:1;
  transition:background .35s var(--ease);
}
.lb__x:hover{background:rgba(255,255,255,.14)}

/* ---------- 24. Tools: shared shell ---------- */
.tool{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--paper);overflow:hidden}
.tool__head{
  padding:clamp(1.35rem,2.6vw,2rem);border-bottom:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-start;justify-content:space-between;
}
.tool__head h2,.tool__head h3{margin-bottom:.4rem}
.tool__body{padding:clamp(1.1rem,2.4vw,1.75rem)}

/* ---------- 25. Checklist ---------- */
.cl-prog{display:flex;align-items:center;gap:1rem;min-width:15rem}
.cl-prog__bar{flex:1;height:4px;border-radius:100px;background:var(--hairline);overflow:hidden}
.cl-prog__fill{display:block;height:100%;width:0;background:var(--terracotta);border-radius:100px;transition:width .6s var(--ease)}
.cl-prog__n{font-size:.8125rem;color:var(--ink-45);white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-group+.cl-group{margin-top:clamp(1.5rem,3vw,2.25rem)}
.cl-group__h{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.9rem}
.cl-group__h h3{font-size:1.0625rem;font-weight:500;letter-spacing:-.012em}
.cl-group__h span{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-text)}
.cl-item{display:flex;gap:.9rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--hairline);cursor:pointer}
.cl-item:first-of-type{border-top:0}
.cl-item input{
  appearance:none;flex:0 0 auto;width:19px;height:19px;margin-top:.15rem;
  border:1px solid var(--hairline-strong);border-radius:5px;background:var(--paper);
  cursor:pointer;position:relative;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.cl-item input:checked{background:var(--terracotta);border-color:var(--terracotta)}
.cl-item input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}
.cl-item span{font-size:.9375rem;line-height:1.5;color:var(--ink-70);transition:color .3s var(--ease),opacity .3s var(--ease)}
.cl-item input:checked+span{opacity:.5;text-decoration:line-through}

/* ---------- 26. Volume calculator ---------- */
.calc{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:980px){.calc{grid-template-columns:minmax(0,1fr) 21rem;align-items:start}}
.cat{border-bottom:1px solid var(--hairline)}
.cat__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.05rem 0;font-size:1rem;font-weight:400;letter-spacing:-.015em;
  transition:color .35s var(--ease);
}
.cat__btn:hover{color:var(--terracotta-text)}
.cat__m3{font-size:.8125rem;color:var(--ink-45);font-variant-numeric:tabular-nums;margin-left:auto}
.cat__m3[data-filled="true"]{color:var(--terracotta-text)}
.cat__chev{flex:0 0 auto;width:11px;height:11px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .5s var(--ease)}
.cat__btn[aria-expanded="true"] .cat__chev{transform:rotate(225deg) translate(-2px,-2px)}
.cat__panel{overflow:hidden;height:0;transition:height .55s var(--ease)}
.cat__inner{padding-bottom:1.1rem}
.ci{display:flex;align-items:center;gap:1rem;padding:.45rem 0}
.ci__label{flex:1;font-size:.9375rem;color:var(--ink-70)}
.ci__vol{font-size:.75rem;color:var(--ink-45);font-variant-numeric:tabular-nums;white-space:nowrap}
.qty{display:inline-flex;align-items:center;gap:.15rem;border:1px solid var(--hairline);border-radius:var(--r-pill);padding:2px}
.qty button{
  width:28px;height:28px;border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--ink-70);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.qty button:hover{background:var(--canvas-2);color:var(--ink)}
.qty input{
  width:34px;text-align:center;border:0;background:none;
  font-size:.875rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none}

.sum{
  border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--canvas-2);padding:clamp(1.35rem,2.4vw,1.75rem);
}
@media (min-width:980px){.sum{position:sticky;top:6.5rem}}
.sum__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.5rem 0}
.sum__row+.sum__row{border-top:1px solid var(--hairline)}
.sum__k{font-size:.875rem;color:var(--ink-45)}
.sum__v{font-size:1.5rem;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sum__v--big{font-size:2.1rem}
.sum__note{font-size:.75rem;line-height:1.5;color:var(--ink-45);margin-top:1rem}
.sum .btn{width:100%;justify-content:center;margin-top:1.15rem}
.sum__reset{display:block;width:100%;text-align:center;margin-top:.7rem;background:none;border:0;cursor:pointer;font-size:.8125rem;color:var(--ink-45);transition:color .3s var(--ease)}
.sum__reset:hover{color:var(--terracotta-text)}

/* ---------- 27. Tool cards (Handige tools index) ---------- */
.tcards{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
@media (min-width:820px){.tcards{grid-template-columns:repeat(2,1fr)}}
.tcard{
  display:flex;flex-direction:column;gap:1rem;
  border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.25rem);background:var(--paper);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.tcard:hover{border-color:var(--hairline-strong);transform:translateY(-3px)}
.tcard__ico{width:30px;height:30px;color:var(--terracotta)}
.tcard p{color:var(--ink-70);flex:1}

/* ---------- 29. Zwevende acties (WhatsApp + sticky CTA) ----------
   Deze laag zweeft over foto's heen, dus hier wél een zachte schaduw —
   zonder scheiding vallen ze weg tegen een lichte achtergrond. */
.fab{
  position:fixed;bottom:clamp(1rem,2.5vw,1.75rem);z-index:90;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border-radius:var(--r-pill);
  padding:0 1.2rem;min-height:46px;
  font-size:.875rem;font-weight:500;letter-spacing:-.01em;line-height:1;
  box-shadow:0 6px 24px rgba(10,8,6,.18);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),
             background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.fab.is-in{opacity:1;transform:none;pointer-events:auto}
.fab:hover{box-shadow:0 10px 30px rgba(10,8,6,.24)}
.fab svg{flex:0 0 auto}

.fab--wa{left:clamp(1rem,2.5vw,1.75rem);background:#25d366;color:#07270f}
.fab--wa:hover{background:#1fbb58}
.fab--cta{right:clamp(1rem,2.5vw,1.75rem);background:var(--ink);color:var(--canvas)}
.fab--cta:hover{background:var(--terracotta);color:#fff}
.fab--cta .btn__arrow{transition:transform .5s var(--ease)}
.fab--cta:hover .btn__arrow{transform:translateX(4px)}

/* Op smalle schermen zou het label van de twee knoppen elkaar raken:
   WhatsApp valt terug op een rond icoon. */
@media (max-width:620px){
  .fab--wa{padding:0;width:46px;min-height:46px;border-radius:50%}
  .fab--wa .fab__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .fab{transition:opacity .01ms,background .01ms,color .01ms}
}

/* ---------- 28. Nav active state ---------- */
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.mmenu a[aria-current="page"]{color:var(--terracotta-text)}


/* ---------- 26. Blog ----------
   Kaarten volgen hetzelfde ritme als .svc: liggend beeld boven, dan meta,
   titel en samenvatting. Op telefoon één kolom, zoals de rest van de site. */
.posts{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:700px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.posts{grid-template-columns:repeat(2,1fr);gap:clamp(2.5rem,4vw,4rem)}}
.posts--2{grid-template-columns:1fr}
@media (min-width:700px){.posts--2{grid-template-columns:repeat(2,1fr)}}

.post__link{display:block;color:inherit}
.post__media{display:block;overflow:hidden;border-radius:var(--r-card);margin-bottom:1.4rem;background:var(--canvas-2)}
.post__media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.post__link:hover .post__media img{transform:scale(1.045)}
.post__meta{display:flex;align-items:center;gap:.9rem;margin-bottom:.7rem;font-size:.8125rem;color:var(--ink-45)}
.post__cat{display:inline-flex;align-items:center;padding:.25rem .7rem;border-radius:var(--r-pill);background:var(--terracotta-wash);color:var(--terracotta-text);font-weight:500;letter-spacing:.01em}
.post__title{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:400;letter-spacing:-.025em;line-height:1.2;margin-bottom:.7rem;text-wrap:balance}
.post__link:hover .post__title{color:var(--terracotta-text)}
.post__excerpt{display:block;color:var(--ink-70);margin-bottom:1.1rem;max-width:46ch}

/* ---------- 27. Artikel ----------
   Eén smalle kolom: leesbaarheid gaat hier voor op de bredere sectiegrid. */
.artikel{max-width:38rem;margin-inline:auto}
.artikel__meta{display:flex;gap:.7rem;color:rgba(255,255,255,.75);font-size:.875rem;margin-top:1.1rem}
.artikel__intro{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.55;color:var(--ink);margin-bottom:2.5rem}
.artikel h2{font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:400;letter-spacing:-.025em;line-height:1.22;margin:2.8rem 0 1rem;text-wrap:balance}
.artikel p{color:var(--ink-70);margin-bottom:1.1rem;line-height:1.72}
.artikel a:not(.btn):not(.tbtn){color:var(--terracotta-text);text-decoration:underline;text-underline-offset:.18em}
.artikel__faq{margin-top:1.5rem}

/* ---------- 28. Lees ook-carrousel ----------
   Native scroll met snap: op telefoon veegbaar zonder extra code, en als de
   JS niet draait blijft het een gewone scrollbare rij in plaats van kapot. */
.lees{position:relative}
.lees__track{display:flex;gap:clamp(1.25rem,2.5vw,2rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.5rem;
  scrollbar-width:none;-ms-overflow-style:none}
.lees__track::-webkit-scrollbar{display:none}
.lees__item{flex:0 0 min(85%,26rem);scroll-snap-align:start}
/* Bewust net te breed voor drie naast elkaar: de vierde rand die half
   zichtbaar blijft, laat zien dat er meer is en geeft de carrousel iets om
   te schuiven. Precies passend maken zou de beweging wegnemen. */
@media (min-width:900px){.lees__item{flex:0 0 min(27rem,40%)}}
.lees__dots[hidden]{display:none}
.lees__dots{display:flex;gap:.5rem;justify-content:center;margin-top:clamp(1.5rem,3vw,2.25rem)}
.lees__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--hairline-strong);cursor:pointer;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.lees__dot[aria-selected="true"]{background:var(--terracotta);transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){.lees__track{scroll-behavior:auto}}

/* ---------- 29. Bestemmingspagina's: de streek in beeld ----------
   Drie herkenbare plekken per regio, elk met één feit. Op telefoon een
   veegbare rij in plaats van drie beelden onder elkaar (zie de mobiele
   beeldverhoudingen hierboven: gestapeld kost dat al snel twee schermen). */
.streek{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:.25rem;
  scrollbar-width:none}
.streek::-webkit-scrollbar{display:none}
@media (min-width:820px){.streek{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);margin-inline:0;padding-inline:0;overflow:visible}}
.streek__item{scroll-snap-align:start;margin:0}
.streek__media{border-radius:var(--r-card);overflow:hidden}
.streek__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (min-width:820px){.streek__media img{aspect-ratio:4/5}}
.streek__item:hover .streek__media img{transform:scale(1.04)}
.streek__item figcaption{margin-top:1rem;font-size:.9375rem;color:var(--ink-70);line-height:1.55;max-width:34ch}
.streek__item figcaption strong{display:block;font-weight:500;color:var(--ink);letter-spacing:-.01em;margin-bottom:.2rem}
.streek__hint{margin-top:.75rem;font-size:.8125rem;color:var(--ink-45)}
@media (min-width:820px){.streek__hint{display:none}}

/* ---------- 30. Sticky offertebalk op bestemmingspagina's ----------
   Vervangt daar de twee losse zwevende knoppen: één balk met de regio erin,
   bellen, WhatsApp en de offerte. Verschijnt na de paginakop en trekt zich
   terug zodra het offerteformulier zelf in beeld is. */
.rbar{
  position:fixed;z-index:90;left:50%;bottom:clamp(.75rem,2vw,1.5rem);
  width:min(calc(100% - 1.5rem),44rem);
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .55rem .55rem 1.4rem;
  background:var(--olive);color:#fff;border:1px solid var(--olive-line);border-radius:var(--r-pill);
  box-shadow:0 14px 40px rgba(10,8,6,.28);
  opacity:0;transform:translate(-50%,calc(100% + 2rem));pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.rbar.is-in{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.rbar__txt{flex:1;min-width:0;line-height:1.3}
.rbar__txt strong{display:block;font-weight:500;font-size:.9375rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar__txt span{display:block;font-size:.8125rem;color:#b9bdb0}
.rbar__ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--olive-line);color:#fff;transition:background .4s var(--ease),border-color .4s var(--ease)}
.rbar__ico:hover{background:var(--olive-2);border-color:#5a6150}
.rbar__ico--wa{background:#25d366;border-color:#25d366;color:#07270f}
.rbar__ico--wa:hover{background:#1fbb58;border-color:#1fbb58}
.rbar__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:0 1.35rem;border-radius:var(--r-pill);
  background:var(--terracotta);color:#fff;font-weight:500;font-size:.9375rem;white-space:nowrap;transition:background .4s var(--ease)}
.rbar__cta:hover{background:#9c4a1f}
.rbar__cta .btn__arrow{transition:transform .5s var(--ease)}
.rbar__cta:hover .btn__arrow{transform:translateX(4px)}
.rbar :focus-visible{outline-color:#e8a882}
/* Telefoon: geen tekstblok, de offerteknop neemt de ruimte. */
@media (max-width:599px){
  .rbar{padding:.45rem;gap:.45rem}
  .rbar__txt{display:none}
  .rbar__cta{flex:1;justify-content:center}
}
/* Ruimte onder de footer zodat de balk de laatste regels niet afdekt. */
.has-rbar .ftr{padding-bottom:6rem}
@media (prefers-reduced-motion:reduce){.rbar{transition:opacity .01ms}}

/* ---------- 31. Volumeveld + calculator-pop-up in het offerteformulier ----------
   Zelfde idee als bij Berg en den Breems: volume invullen, of uitrekenen in
   een venster bovenop het formulier. Nooit doorsturen naar de toolspagina:
   wie de offerte verlaat, komt vaak niet terug. */
.field__opt{text-transform:none;letter-spacing:0;font-weight:400;color:#7d8373}
.vol{display:flex;gap:.6rem;align-items:stretch}
.vol .ctrl{flex:1;min-width:0}
.vol__btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  padding:0 1.15rem;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(232,168,130,.1);color:#e8a882;border:1px solid rgba(232,168,130,.45);
  font-size:.875rem;font-weight:500;white-space:nowrap;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.vol__btn:hover{background:#e8a882;color:#1b1f17;border-color:#e8a882}
.vol__btn[hidden]{display:none}
@media (max-width:420px){.vol{flex-direction:column}.vol__btn{justify-content:center;min-height:46px}}

.vcalc{
  width:min(44rem,calc(100% - 2rem));max-height:min(88vh,52rem);
  padding:0;border:0;border-radius:var(--r-card);
  background:var(--canvas);color:var(--ink);
  box-shadow:0 30px 80px rgba(10,8,6,.35);
  display:none;flex-direction:column;overflow:hidden;
}
.vcalc[open]{display:flex;animation:vcalc-in .5s var(--ease)}
.vcalc::backdrop{background:rgba(16,14,12,.62);backdrop-filter:blur(3px)}
@keyframes vcalc-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.vcalc__head{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;padding:1.5rem clamp(1.25rem,3vw,2rem) 1.1rem;border-bottom:1px solid var(--hairline)}
.vcalc__head .label{margin-bottom:.5rem}
.vcalc__sub{font-size:.875rem;color:var(--ink-45);margin-top:.4rem;max-width:44ch}
.vcalc__x{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline);background:var(--paper);cursor:pointer;font-size:1.4rem;line-height:1;color:var(--ink-70);transition:background .3s var(--ease),color .3s var(--ease)}
.vcalc__x:hover{background:var(--ink);color:#fff}
.vcalc__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(1.25rem,3vw,2rem);background:var(--paper)}
.vcalc__body .cat:last-child{border-bottom:0}
.vcalc__foot{display:flex;flex-wrap:wrap;gap:.9rem 1.25rem;align-items:center;justify-content:space-between;padding:1rem clamp(1.25rem,3vw,2rem);border-top:1px solid var(--hairline);background:var(--canvas-2)}
.vcalc__tot{display:flex;align-items:baseline;gap:.7rem}
.vcalc__tot strong{font-size:1.65rem;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vcalc__n{font-size:.8125rem;color:var(--ink-45)}
.vcalc__foot .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.vcalc :focus-visible{outline-color:var(--terracotta)}
/* Staat binnen de donkere offertesectie: kleuren expliciet terugzetten. */
.vcalc .h3{color:var(--ink)}
.vcalc .label{color:var(--ink-45)}
.vcalc-open{overflow:hidden}
/* Telefoon: venster vult het scherm, knop over de volle breedte. */
@media (max-width:599px){
  .vcalc{inset:0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .vcalc__foot .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.vcalc[open]{animation:none}}

/* Variant B: tekst in de lucht boven de wagens, zodat beeld en tekst elkaar
   niet overlappen. Het verloop zit dan bovenaan in plaats van onderaan. */
.hero--top{justify-content:flex-start}
.hero--top .hero__body{padding-top:clamp(7.5rem,13vh,10rem);padding-bottom:0}
.hero--top .hero__scrim{
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%,rgba(10,8,6,.34) 0%,rgba(10,8,6,.12) 55%,rgba(10,8,6,0) 75%),
    linear-gradient(to bottom,rgba(10,8,6,.52) 0%,rgba(10,8,6,.36) 28%,rgba(10,8,6,.1) 50%,rgba(10,8,6,0) 62%);
}
.hero--top .hero__row{align-items:center}
@media (max-width:640px){
  .hero--top .hero__scrim{background:linear-gradient(to bottom,rgba(10,8,6,.7) 0%,rgba(10,8,6,.58) 45%,rgba(10,8,6,.18) 70%,rgba(10,8,6,0) 85%)}
}

/* ---------- 32. Offerteformulier, lichte versie (okt 2026) ----------
   Feedback Jan: witte achtergrond met donkere tekst leest prettiger, zeker nu
   het formulier langer is. De sectie zelf blijft olijf met de foto ernaast;
   alleen het paneel met het formulier wordt licht. */
.cta .cta__panel{background:var(--paper);color:var(--ink)}
.cta .cta__panel .label--dark{color:var(--ink-45)}
.cta .cta__panel h2{color:var(--ink)}
.cta .cta__panel .cta__intro{color:var(--ink-70)}
.cta__panel :focus-visible{outline-color:var(--terracotta)}
.cta__panel .field>label,.cta__panel .fset legend{color:var(--ink-70)}
.cta__panel .ctrl{color:var(--ink);background:var(--paper);border-color:var(--hairline-strong)}
.cta__panel .ctrl::placeholder{color:var(--ink-25)}
.cta__panel .ctrl:hover{border-color:var(--ink-25)}
.cta__panel .ctrl:focus{border-color:var(--ink);background:var(--paper)}
.cta__panel .ctrl:focus-visible{outline-color:var(--terracotta)}
.cta__panel select.ctrl option{background:var(--paper);color:var(--ink)}
.cta__panel .err{color:#b3261e}
.cta__panel .field[data-invalid="true"] .ctrl{border-color:#b3261e}
.cta__panel .field__opt{color:var(--ink-45)}
.cta__panel .form .btn{--btn-bg:var(--terracotta);--btn-fg:#fff;border-color:var(--terracotta);padding:1.1rem 2rem;font-size:1rem;font-weight:600}
.cta__panel .form .btn:hover{--btn-bg:var(--ink);--btn-fg:#fff;border-color:var(--ink)}
.cta__panel .form__note{color:var(--ink-45)}
.cta__panel a[href^="tel:"]{color:var(--terracotta-text)}
.cta__panel .form__ok{border-color:var(--hairline)}
.cta__panel .form__ok p{color:var(--ink-70)}
.cta__panel .vol__btn{background:var(--terracotta-wash);color:var(--terracotta-text);border-color:#e9c5ae}
.cta__panel .vol__btn:hover{background:var(--terracotta);color:#fff;border-color:var(--terracotta)}

.form{gap:0}
.fstep{display:grid;gap:1.1rem;padding-block:1.75rem;border-top:1px solid var(--hairline)}
.fstep:first-of-type{border-top:0;padding-top:0}
.fstep__t{display:flex;align-items:center;gap:.75rem;font-size:1.125rem;font-weight:500;letter-spacing:-.015em}
.fstep__t span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--terracotta-wash);color:var(--terracotta-text);font-size:.8125rem;font-weight:600}
.fset{border:0;padding:0;margin:0;min-width:0}
.fset legend{font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.6rem;padding:0}
.fset legend .field__opt{text-transform:none;letter-spacing:0}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{position:relative;display:inline-flex;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1rem;border:1px solid var(--hairline-strong);border-radius:var(--r-pill);
  font-size:.875rem;line-height:1.35;color:var(--ink-70);background:var(--paper);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.opt span::before{content:"";flex:0 0 auto;width:14px;height:14px;border:1.5px solid var(--ink-25);border-radius:4px;transition:inherit}
.opt input[type="radio"]+span::before{border-radius:50%}
.opt:hover span{border-color:var(--ink-25)}
.opt input:checked+span{background:var(--terracotta-wash);border-color:var(--terracotta);color:var(--ink)}
.opt input:checked+span::before{background:var(--terracotta);border-color:var(--terracotta);box-shadow:inset 0 0 0 2px var(--terracotta-wash)}
.opt input:focus-visible+span{outline:2px solid var(--terracotta);outline-offset:2px}
.field--sub{margin-top:.75rem;max-width:16rem}
.field--sub[hidden]{display:none}
.field__hint{font-size:.8125rem;color:var(--terracotta-text);margin-top:.1rem}
.field__hint[hidden]{display:none}