@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root{
  --paper:#FFFFFF;
  --paper-2:#F7F7F5;
  --paper-3:#F1F1EE;
  --accent:#EED818;
  --accent-soft:#FDF8D2;
  --accent-line:#E4DC9A;
  --accent-ink:#5C5200;
  --ink:#111111;
  --ink-2:#4A4A48;
  --ink-3:#6E6E6A;
  --line:#E2E2DE;
  --line-strong:#CFCFC9;
  --line-soft:#EDEDEA;
  --dark:#111111;
  --dark-2:#1B1B1A;
  --on-dark:#FFFFFF;
  --on-dark-muted:#B5B5B0;
  --dark-line:#2C2C2A;

  --serif:"Archivo","Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --pad:clamp(16px,5vw,40px);
  --section:clamp(40px,7vw,88px);
  --gap:clamp(20px,4vw,40px);
  --radius:4px;
  --radius-lg:6px;
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--sans); font-size:clamp(15px,1.1vw,16px); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:hidden;
}
img{display:block; max-width:100%;}
ul,ol{margin:0;}
a{color:var(--ink);}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.section{padding-top:var(--section); padding-bottom:var(--section);}
.band-2{background:var(--paper-2);}
.band-dark{background:var(--dark); color:var(--on-dark-muted);}
.band-accent{background:var(--accent); color:var(--ink);}
.stack{display:flex; flex-direction:column; gap:clamp(12px,2vw,18px);}
.stack-lg{display:flex; flex-direction:column; gap:clamp(18px,3vw,26px);}
.row{display:flex; flex-wrap:wrap; gap:clamp(8px,1.5vw,12px);}
.split{display:grid; grid-template-columns:1fr; gap:var(--gap); align-items:center;}
.split-top{align-items:start;}
.grid{display:grid; grid-template-columns:1fr; gap:clamp(12px,2vw,20px);}
@media (min-width:900px){
  .split{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
}
@media (min-width:640px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
}

.eyebrow{font-family:var(--sans); font-style:normal; font-size:clamp(11.5px,1vw,12.5px); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0;}
.eyebrow::before{content:""; display:inline-block; width:20px; height:2px; background:var(--accent); vertical-align:.32em; margin-right:9px;}
.band-dark .eyebrow{color:var(--on-dark);}
.band-accent .eyebrow{color:rgba(0,0,0,.72);}
.band-accent .eyebrow::before{background:var(--ink);}

h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:700;}
.h1{font-family:var(--serif); font-size:clamp(31px,6.8vw,64px); line-height:1.04; letter-spacing:-.025em; font-weight:700; max-width:20ch; text-wrap:balance;}
.h1 em{font-style:normal; font-weight:700;}
.h2{font-family:var(--serif); font-size:clamp(24px,4.2vw,40px); line-height:1.1; letter-spacing:-.02em; font-weight:700; max-width:26ch;}
.h2 em{font-style:normal;}
.h3{font-family:var(--serif); font-size:clamp(18px,2.2vw,22px); line-height:1.25; font-weight:600; letter-spacing:-.01em;}
.h4{font-family:var(--sans); font-size:clamp(16px,1.6vw,18px); line-height:1.35; font-weight:600;}
.band-dark .h1,.band-dark .h2,.band-dark .h3,.band-dark .h4{color:var(--on-dark);}
.lead{font-size:clamp(16px,1.8vw,20px); line-height:1.5; color:var(--ink-2); max-width:30ch; margin:0;}
.band-dark .lead{color:var(--on-dark-muted);}
.p{font-size:clamp(15px,1.2vw,16.5px); line-height:1.72; max-width:52ch; margin:0;}
.small{font-size:clamp(14px,1.05vw,15.5px); line-height:1.6; margin:0;}
.meta{font-size:clamp(13px,1vw,14px); line-height:1.5; color:var(--ink-3); margin:0;}
.note-accent{font-size:clamp(13.5px,1.05vw,15px); line-height:1.5; color:var(--ink); font-weight:600; margin:0; padding:12px 16px; background:var(--accent-soft); border:1px solid var(--accent-line); border-left:3px solid var(--accent); border-radius:var(--radius);}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:clamp(46px,7vw,52px);
  padding:0 clamp(18px,3.4vw,28px);
  border:1px solid transparent; border-radius:3px;
  font-family:var(--sans); font-size:clamp(14px,1.1vw,15px); font-weight:600; line-height:1;
  letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn--dark{background:var(--ink); color:var(--paper);}
.btn--dark:hover{background:var(--accent); color:var(--ink);}
.btn--accent{background:var(--accent); color:var(--ink); border-color:var(--accent);}
.btn--accent:hover{background:var(--ink); color:var(--accent);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn--ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn--ghost-dark{background:transparent; color:var(--on-dark); border-color:var(--dark-line);}
.btn--ghost-dark:hover{background:var(--on-dark); color:var(--ink);}
.btn--full{width:100%;}

/* header */
.hdr{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.hdr__bar{max-width:var(--max); margin:0 auto; padding:clamp(8px,1.4vw,12px) var(--pad); display:flex; align-items:center; gap:clamp(8px,1.8vw,24px);}
.hdr__logo{flex:none; display:block;}
.hdr__logo img{height:clamp(26px,4.6vw,34px); width:auto;}
.nav{display:none; align-items:center; gap:clamp(16px,2.4vw,28px); margin-left:auto; font-size:clamp(14px,1.1vw,16px);}
.nav a{color:var(--ink-3); text-decoration:none; white-space:nowrap;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink); font-weight:700; box-shadow:inset 0 -3px 0 var(--accent);}
.hdr__cta{flex:none; margin-left:auto; width:auto; min-height:38px; padding:0 clamp(12px,2vw,18px); font-size:clamp(13px,1vw,14px);}
.burger{
  flex:none; width:44px; height:44px; padding:0; margin-left:0;
  display:grid; grid-auto-rows:2px; align-content:center; justify-items:center; gap:5px;
  background:transparent; border:1px solid var(--line); border-radius:3px; cursor:pointer;
}
.burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;}
.menu{display:none; flex-direction:column; padding:4px var(--pad) 18px; max-width:var(--max); margin:0 auto; border-top:1px solid var(--line-soft);}
.menu[data-open="true"]{display:flex;}
.menu a{font-size:clamp(16px,4.4vw,17px); font-weight:600; color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line-soft); min-height:44px;}
.menu a[aria-current="page"]{font-weight:600;}
.menu a.btn{border-bottom:0; margin-top:14px; justify-content:center;}
@media (min-width:900px){
  .nav{display:flex;}
  .hdr__cta{margin-left:0;}
  .burger{display:none;}
  .menu{display:none !important;}
}

/* hero */
.hero__media{width:100%; height:clamp(200px,44vw,460px); object-fit:cover; border-radius:var(--radius);}

/* marquee stats */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(14px,2.4vw,22px) 0; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee__track{display:flex; width:max-content; gap:clamp(28px,5vw,64px); animation:marquee 70s linear infinite;}
.marquee__item{display:flex; align-items:baseline; gap:10px; white-space:nowrap;}
.marquee__num{font-family:var(--serif); font-size:clamp(22px,3.2vw,34px); font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ink);}
.marquee__label{font-size:clamp(13px,1.1vw,15px); color:var(--ink-3);}
.marquee__dot{align-self:center; width:8px; height:2px; background:var(--accent);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none;} }

/* airco block */
.airco{background:var(--accent-soft); border:1px solid var(--accent-line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:clamp(20px,4vw,48px);}
.airco__steps{list-style:none; padding:0; display:flex; flex-direction:column;}
.airco__steps li{display:flex; gap:clamp(10px,2vw,16px); padding:clamp(10px,1.8vw,14px) 0; border-top:1px solid var(--accent-line); font-size:clamp(15px,1.2vw,16.5px);}
.airco__steps li:last-child{border-bottom:1px solid var(--accent-line);}
.airco__steps i{font-family:var(--sans); font-style:normal; font-weight:700; font-size:12.5px; letter-spacing:.08em; color:var(--ink-3); min-width:28px; padding-top:2px;}

/* cards */
.card{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:clamp(20px,3vw,30px); display:flex; flex-direction:column; gap:10px;}
.card--dark{background:var(--dark-2); border-color:var(--dark-line); border-top-color:var(--accent);}
.card p{margin:0; font-size:clamp(14px,1.1vw,15.5px); line-height:1.62;}
.card--accent{background:var(--paper-2); border-top-color:var(--accent);}

/* lists */
.rules{list-style:none; padding:0; display:flex; flex-direction:column;}
.rules li{padding:clamp(13px,1.8vw,18px) 0; border-top:1px solid var(--line); font-size:clamp(15px,1.2vw,16.5px); line-height:1.62;}
.rules li:last-child{border-bottom:1px solid var(--line);}
.band-dark .rules li{border-color:var(--dark-line);}
.chips{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:clamp(6px,1.2vw,8px);}
.chips li{background:var(--paper); border:1px solid var(--line); border-radius:2px; padding:clamp(7px,1.2vw,9px) clamp(12px,2vw,15px); font-size:clamp(13px,1vw,14px); font-weight:600; color:var(--ink);}

/* table */
.table{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper);}
.table__row{display:grid; grid-template-columns:1fr; gap:6px; padding:clamp(16px,2.6vw,22px) clamp(16px,3vw,28px); border-bottom:1px solid var(--line-soft);}
.table__row:last-child{border-bottom:0;}
.table__head{display:none;}
.table__name{font-size:clamp(15.5px,1.2vw,17px); font-weight:600; color:var(--ink);}
.table__desc{font-size:clamp(14px,1.05vw,15px); line-height:1.6; margin:4px 0 0;}
.table__price{font-family:var(--sans); font-size:clamp(16px,1.3vw,18px); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.table__row--free{background:var(--paper-2); box-shadow:inset 3px 0 0 var(--accent);}
@media (min-width:700px){
  .table__row{grid-template-columns:1.7fr 1fr; gap:20px; align-items:start;}
  .table__head{display:grid; background:var(--paper-2); border-bottom:1px solid var(--line);}
}

/* contact rows */
.rows{display:flex; flex-direction:column;}
.rows__row{display:grid; grid-template-columns:1fr; gap:4px; padding:clamp(14px,2.2vw,20px) 0; border-top:1px solid var(--line);}
.rows__row:last-child{border-bottom:1px solid var(--line);}
@media (min-width:620px){ .rows__row{grid-template-columns:minmax(150px,.6fr) 1fr; gap:16px;} }
.rows__key{font-family:var(--sans); font-size:clamp(11.5px,1vw,12.5px); font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);}
.rows__val{font-size:clamp(15px,1.2vw,16.5px); color:var(--ink);}

/* form */
.form{background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:clamp(18px,3.4vw,32px); display:flex; flex-direction:column; gap:clamp(14px,2vw,20px);}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:clamp(14px,1.05vw,15px); font-weight:600; color:var(--ink);}
.field input,.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:3px; padding:12px 14px; min-height:48px;
}
.field textarea{min-height:clamp(100px,20vw,140px); resize:vertical;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(238,216,24,.45);}
.status{display:none; font-size:14px; line-height:1.6; color:#2F7A3E; margin:0;}
.status[data-visible="true"]{display:block;}

/* ---------- werkgebiedkaart ---------- */
.map{width:100%; margin:0; display:flex; flex-direction:column; gap:12px;}
.map__card{
  position:relative; width:100%;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(10px,2vw,18px);
}
.map__frame{position:relative; width:100%; aspect-ratio:4/5;}
@media (min-width:560px){ .map__frame{aspect-ratio:1/1;} }
@media (min-width:900px){ .map__frame{aspect-ratio:5/4;} }
.map__canvas{position:absolute; inset:0; overflow:hidden;}
.map__canvas svg{display:block; width:100%; height:100%;}

.map-nl__shape{fill:var(--paper-3); fill-rule:evenodd; stroke:none; pointer-events:none;}
.map-inset{pointer-events:none;}
.map-inset__plate{fill:#fff; stroke:var(--line);}
.map-inset__land{fill:var(--paper-3); fill-rule:evenodd; stroke:none;}
.map-inset__area{fill:var(--accent); fill-rule:evenodd; stroke:none;}
.map-inset__pin{fill:var(--ink);}
.map-inset__label{font-family:var(--sans); font-size:8.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; fill:var(--ink-3);}
.map-context__shape{fill:var(--paper-3); fill-rule:evenodd; stroke:var(--paper-2); stroke-width:.8; vector-effect:non-scaling-stroke; pointer-events:none;}
.map-area__shape{fill:var(--accent); fill-rule:evenodd; stroke:var(--paper-2); stroke-width:.8; vector-effect:non-scaling-stroke; opacity:.62; transition:opacity 160ms ease;}
.map-area__shape.is-active{opacity:.95;}
.map-area__outline{fill:none; stroke:var(--ink); stroke-width:1; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none;}

.map-marker{cursor:pointer; transition:opacity 160ms ease;}
.map-marker__hit{fill:transparent;}
.map-marker__dot{fill:var(--ink); stroke:var(--paper-2); stroke-width:1.2; transition:r 140ms ease, fill 140ms ease;}
.map-marker--primary .map-marker__dot{fill:var(--accent); stroke:var(--ink); stroke-width:2;}
.map-marker__pulse{fill:none; stroke:var(--accent-ink); stroke-width:1.2; pointer-events:none;}
.map-marker__glow{pointer-events:none;}
.map-marker__label{font-family:var(--sans); font-size:9.5px; fill:var(--ink-3); paint-order:stroke; stroke:var(--paper-2); stroke-width:3px; stroke-linejoin:round; pointer-events:none; transition:fill 140ms ease;}
.map-marker--primary .map-marker__label{font-size:12.5px; font-weight:700; fill:var(--ink);}
.map-marker.is-dimmed{opacity:.45;}
.map-marker.is-active .map-marker__dot{fill:var(--accent); stroke:var(--ink); stroke-width:2; r:6.5;}
.map-marker--primary.is-active .map-marker__dot{r:9.5;}
.map-marker.is-active .map-marker__label{fill:var(--ink); font-weight:700;}
.map-marker.is-selected .map-marker__dot{stroke-width:2.4;}
.map-marker:focus-visible{outline:none;}
.map-marker:focus-visible .map-marker__dot{stroke:var(--accent-ink); stroke-width:3;}

.map__tooltip{
  position:absolute; left:0; top:0; z-index:2; pointer-events:none;
  min-width:132px; max-width:min(190px,58%);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:10px 14px; box-shadow:0 6px 20px rgba(17,17,17,.08);
  opacity:0; transition:opacity 140ms ease;
}
.map__tooltip[data-open="true"]{opacity:1;}
.map__tooltip b{display:block; font-size:14px; color:var(--ink);}
.map__tooltip span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px;}
.map__legend{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.map__legend span{display:inline-flex; align-items:center; gap:7px; font-size:clamp(12.5px,1vw,13.5px); color:var(--ink-3);}
.map__legend i{width:10px; height:10px; border-radius:50%; background:var(--accent); border:1.5px solid var(--ink);}
.map__legend i.sec{width:7px; height:7px; background:var(--ink); border:0;}
.map__legend i.area{width:14px; height:10px; border-radius:2px; background:var(--accent); opacity:.62; border:1px solid var(--line-strong);}

/* plaats-pillen (twee-weg met de kaart) */
.pills{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:clamp(6px,1.2vw,8px);}
.pill{
  font-family:var(--sans); font-size:clamp(13px,1vw,14px); font-weight:600; letter-spacing:.01em; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:clamp(8px,1.4vw,10px) clamp(13px,2vw,17px); min-height:40px;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  transition:background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.pill:hover{border-color:var(--ink);}
.pill.is-active{background:var(--paper-2); border-color:var(--ink);}
.pill[aria-pressed="true"]{background:var(--accent); border-color:var(--ink); font-weight:700;}
.pill[aria-pressed="true"]::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ink);}
.pill--primary{font-weight:700; box-shadow:inset 3px 0 0 var(--accent);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

@media (prefers-reduced-motion:reduce){
  .map-marker,.map-area__shape,.map__tooltip,.pill{transition:none;}
}

/* footer */
.ftr{background:var(--dark); color:var(--on-dark-muted);}
.ftr__grid{max-width:var(--max); margin:0 auto; padding:clamp(32px,5vw,60px) var(--pad) clamp(20px,3vw,28px); display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,32px);}
@media (min-width:700px){ .ftr__grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));} }
.ftr h2{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); font-family:var(--sans); font-weight:600;}
.ftr p,.ftr span{font-size:clamp(14px,1.05vw,15px); line-height:1.6;}
.ftr a{color:var(--on-dark-muted); text-decoration:none;}
.ftr a:hover{color:var(--accent);}
.ftr__col{display:flex; flex-direction:column; gap:10px;}
.ftr__logo{width:160px; height:auto; max-width:60%; align-self:flex-start; object-fit:contain;}
.ftr__tel{font-family:var(--serif); font-size:clamp(19px,2.2vw,23px); font-weight:700; letter-spacing:-.01em; color:#fff !important;}
.ftr__bottom{max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(26px,4vw,40px);}
.ftr__bottom-in{padding-top:18px; border-top:1px solid var(--dark-line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; font-size:13px;}

/* whatsapp fab */
.fab{position:fixed; right:clamp(12px,3vw,26px); bottom:clamp(12px,3vw,26px); z-index:45; width:clamp(50px,12vw,58px); height:clamp(50px,12vw,58px); border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.2); font-size:clamp(21px,5vw,25px);}

.skip{position:absolute; left:-9999px;}
.skip:focus{left:16px; top:16px; z-index:60; background:var(--accent); color:var(--ink); padding:12px 16px; border-radius:3px;}

.hide-mobile{display:none;}
@media (min-width:900px){ .hide-mobile{display:block;} }

/* mobile (same breakpoint as the hamburger): yellow CTAs, black while pressed */
@media (max-width:899px){
  .btn--dark{background:var(--accent); color:var(--ink);}
  .btn--dark:active{background:var(--ink); color:var(--accent);}
  .btn--accent:active{background:var(--ink); color:var(--accent);}
  .btn--ghost{background:transparent; border-color:var(--ink); color:var(--ink);}
  .btn--ghost:active{background:var(--ink); color:var(--accent);}
  .btn--ghost-dark{background:var(--accent); color:var(--ink); border-color:var(--accent);}
  .btn--ghost-dark:active{background:var(--ink); color:var(--accent);}
  .row > .btn{flex:1 1 100%;}
  .menu .btn{width:100%;}
  .hdr__cta{flex:none; width:auto;}
}

/* ---------- aankondiging airco (één component, alle pagina's) ---------- */
.ann{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));}
.ann__backdrop{position:absolute; inset:0; background:rgba(17,17,17,.45); opacity:0; transition:opacity 300ms ease-out;}
.ann[data-open="true"] .ann__backdrop{opacity:1;}

.ann__dialog{
  position:relative; z-index:1; width:100%; max-width:560px; max-height:calc(100vh - 32px);
  overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:0 22px 60px rgba(17,17,17,.22);
  opacity:0; transform:translateY(20px) scale(.98);
  transition:opacity 320ms ease-out, transform 320ms ease-out;
}
.ann[data-open="true"] .ann__dialog{opacity:1; transform:translateY(0) scale(1);}
.ann[data-open="false"] .ann__dialog{opacity:0; transform:translateY(10px) scale(.99);}

.ann__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; display:grid; place-items:center; padding:0;
  background:rgba(255,255,255,.94); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:3px; cursor:pointer;
  transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ann__close:hover{background:var(--accent); border-color:var(--ink);}

.ann__media{width:100%; height:clamp(200px,48vw,300px); object-fit:cover; object-position:50% 34%; border-radius:0;}
.ann__body{padding:clamp(20px,4vw,32px); display:flex; flex-direction:column; gap:clamp(10px,2vw,14px);}
.ann__title{max-width:22ch;}
.ann__text{max-width:44ch;}
.ann__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.ann__cta{white-space:nowrap;}
.ann__later{
  min-height:44px; padding:0 12px; background:transparent; border:0; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
  transition:color 140ms ease;
}
.ann__later:hover{color:var(--ink);}
.ann__close:focus-visible,.ann__cta:focus-visible,.ann__later:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

@media (min-width:620px){
  .ann__actions{flex-direction:row; align-items:center; gap:16px;}
  .ann__later{padding:0 4px;}
}
@media (max-width:899px){
  .ann__actions .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .ann__backdrop,.ann__dialog{transition:opacity 160ms linear;}
  .ann__dialog{transform:none !important;}
}

/* ---------- beweging ---------- */
@keyframes rp-rise{from{opacity:0; transform:translateY(18px);}to{opacity:1; transform:none;}}
@keyframes rp-pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(238,216,24,.85);}
  70%{box-shadow:0 0 0 10px rgba(238,216,24,0);}
  100%{box-shadow:0 0 0 0 rgba(238,216,24,0);}
}
@keyframes rp-sweep{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* alleen verbergen als JS de reveal daadwerkelijk aanzet */
.js-reveal [data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.js-reveal [data-reveal].is-in{opacity:1; transform:none;}
.js-reveal [data-reveal]:nth-child(2){transition-delay:.06s;}
.js-reveal [data-reveal]:nth-child(3){transition-delay:.12s;}
.js-reveal [data-reveal]:nth-child(4){transition-delay:.18s;}

/* pulserende bullets in de opsommingen */
.rules li{position:relative; padding-left:30px;}
.rules li::before{
  content:""; position:absolute; left:2px; top:calc(clamp(13px,1.8vw,18px) + .55em);
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  border:1px solid var(--ink);
}
.rules li.is-in::before{animation:rp-pulse-dot 2.6s ease-out infinite;}
.rules li:nth-child(2).is-in::before{animation-delay:.5s;}
.rules li:nth-child(3).is-in::before{animation-delay:1s;}
.rules li:nth-child(4).is-in::before{animation-delay:1.5s;}
.rules li:nth-child(5).is-in::before{animation-delay:2s;}

/* stap-nummers in het airco-blok krijgen dezelfde puls */
.airco__steps li{position:relative;}
.airco__steps i{position:relative; display:inline-flex; align-items:center; gap:7px;}
.airco__steps i::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); border:1px solid var(--ink);
}
.airco__steps li.is-in i::before{animation:rp-pulse-dot 2.6s ease-out infinite;}
.airco__steps li:nth-child(2).is-in i::before{animation-delay:.5s;}
.airco__steps li:nth-child(3).is-in i::before{animation-delay:1s;}
.airco__steps li:nth-child(4).is-in i::before{animation-delay:1.5s;}

/* kaarten: subtiele lift + gele kopregel die inschuift */
.card{position:relative; transition:transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease, border-color 200ms ease;}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(17,17,17,.07); border-color:var(--line-strong);}
.card--dark:hover{border-color:var(--dark-line); box-shadow:0 12px 28px rgba(0,0,0,.3);}
.card.is-in::after{
  content:""; position:absolute; left:-1px; right:-1px; top:-3px; height:3px;
  background:var(--accent); transform-origin:left; animation:rp-sweep .6s cubic-bezier(.2,.7,.2,1) both;
}

/* knoppen: iets tastbaarder */
.btn{transition:background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}

/* rijen in de prijstabel en contactrijen lichten rustig op */
.table__row{transition:background 160ms ease;}
.table__row:not(.table__head):hover{background:var(--paper-2);}

/* eyebrow-streepje groeit mee bij binnenkomst */
.eyebrow::before{transform-origin:left;}
[data-reveal].is-in .eyebrow::before,.eyebrow.is-in::before{animation:rp-sweep .6s cubic-bezier(.2,.7,.2,1) .1s both;}

/* pillen */
.pill{transition:background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;}
.pill:hover{transform:translateY(-1px);}

@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1; transform:none; transition:none;}
  .rules li::before,.airco__steps i::before{animation:none !important;}
  .card,.btn,.pill{transition:none;}
  .card:hover,.btn:hover,.pill:hover{transform:none;}
  .card.is-in::after{animation:none;}
}