/* =========================================================
   S&P WebWorks — vormtaal "Zeeuws licht"

   Afgeleid van de plek, niet van een designsysteem: het Zeeuwse
   licht. Wit is de lucht, geel is de zon, en marineblauw komt er
   alleen bij als accent — de waterlijn, de silhouetten op de dijk,
   en één donkere band aan het eind. Letters en cijfers zijn zwart
   of wit.

   Bewust NIET gebruikt: monospace, gespatieerde uppercase
   labels, hairline-secties, één platte accentkleur.
   ========================================================= */

@view-transition { navigation: auto; }

:root{
  /* ── Hoofdkleuren: wit en geel ──────────────────────────
     Wit is het doek, geel is het licht. Blauw komt er alleen
     bij als accent: horizonlijnen, silhouetten, één donkere
     band aan het eind. Letters en cijfers zijn zwart of wit. */
  --wit:#ffffff;
  --wit-2:#fbfaf7;          /* gebroken wit voor afwisselende banden */
  --wit-3:#f4f2ed;

  /* Geel — vier stappen, zodat het zich als licht gedraagt */
  --geel-1:#fdf6d8; --geel-2:#f5d44f; --geel-3:#e3bd33; --geel-4:#a8871c;

  /* Blauw — accent, geen doek */
  --blauw:#010a44; --blauw-2:#16304d; --blauw-3:#2c4a6b;

  /* Letters en cijfers */
  --zwart:#111318;
  --zwart-70:rgba(17,19,24,.74);
  --zwart-50:rgba(17,19,24,.62);
  --pale:#ffffff;
  --pale-70:rgba(255,255,255,.8);
  --pale-45:rgba(255,255,255,.58);

  /* Oude namen blijven bestaan zodat één plek de kleur bepaalt */
  --ink:var(--zwart);
  --ink-70:var(--zwart-70);
  --ink-50:var(--zwart-50);
  --sky-1:var(--wit); --sky-2:var(--wit-2); --sky-3:var(--wit-3);
  --water-1:var(--geel-1); --water-2:var(--geel-2); --water-3:var(--blauw-3);
  --water-4:var(--blauw-2); --water-5:var(--blauw); --water-6:#00061c;
  --light-1:var(--geel-1); --light-2:var(--geel-2);
  --light-3:var(--geel-3); --light-4:var(--geel-4);
  --shore-1:var(--wit-2); --shore-2:var(--wit-3);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;

  --wrap:1280px; --pad:32px;
  /* Ruimer dan eerst: meer lucht tussen de banden */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:80px; --s7:128px; --s8:176px;

  --t-h1:clamp(2.7rem,6.4vw,5.6rem);
  --t-h2:clamp(1.9rem,3.6vw,3.2rem);
  --t-h3:clamp(1.15rem,1.5vw,1.4rem);
  --t-lead:clamp(1.06rem,1.2vw,1.26rem);

  --ease:cubic-bezier(.22,.68,.28,1);
  --spring:cubic-bezier(.2,.9,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--sky-1);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
h1,h2,h3{
  margin:0;font-family:var(--display);font-weight:600;
  line-height:1.05;letter-spacing:-.018em;font-variation-settings:"SOFT" 40;
}
:focus-visible{outline:3px solid var(--light-3);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--water-5);color:var(--pale);padding:var(--s2) var(--s3)}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ═══ Intro: het water zakt weg ═══════════════════════════ */
.dive{
  position:fixed;inset:0;z-index:150;pointer-events:none;
  background:var(--water-5);
  transform:translateY(0);
  animation:dive-out .95s var(--spring) forwards;
}
.dive span{
  position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,var(--light-4),var(--light-2) 40%,var(--light-1) 50%,var(--light-2) 60%,var(--light-4));
  box-shadow:0 0 30px 4px rgba(245,212,79,.55);
}
@keyframes dive-out{
  0%{transform:translateY(0)}
  100%{transform:translateY(-101%)}
}

/* ═══ Header ══════════════════════════════════════════════ */
/* Witte header met zwarte letters; geel alleen op de telefoonknop */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--wit);color:var(--zwart);
  border-bottom:1px solid rgba(17,19,24,.14);
  view-transition-name:hdr;
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:78px}
.hdr__logo img{height:38px;width:auto}
.hdr__nav{display:flex;align-items:center;gap:var(--s4);font-size:1rem}
.hdr__nav a{
  position:relative;padding:8px 0;color:var(--zwart-70);
  white-space:nowrap;flex:0 0 auto;transition:color .2s var(--ease);
}
.hdr__nav a:hover{color:var(--zwart)}
.hdr__nav a[aria-current="page"]{color:var(--zwart)}
.hdr__nav a:not(.hdr__call)::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;
  background:var(--geel-2);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--spring);
}
.hdr__nav a:hover:not(.hdr__call)::after,
.hdr__nav a[aria-current="page"]:not(.hdr__call)::after{transform:scaleX(1)}
.hdr__nav a.hdr__call{
  color:var(--zwart);background:var(--geel-2);
  padding:12px var(--s3);border-radius:2px;font-weight:500;
  transition:background .2s var(--ease),transform .2s var(--spring);
}
.hdr__nav a.hdr__call:hover{background:var(--geel-3);transform:translateY(-2px)}

.burger{
  display:none;width:48px;height:48px;padding:0;background:none;
  border:1px solid rgba(17,19,24,.28);cursor:pointer;place-items:center;gap:5px;border-radius:2px;
}
.burger span{display:block;width:20px;height:2px;background:var(--zwart);transition:transform .24s var(--spring)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ═══ Banden ══════════════════════════════════════════════ */
.band{position:relative;padding-block:var(--s7);isolation:isolate}

/* De luchtband is een zonsondergang in geel: helder wit bovenin, vol
   zonlicht bij de horizon. Geen blauw meer in het doek. */
.band--sky{
  background:linear-gradient(180deg,
    var(--wit) 0%, #fefdfa 30%, var(--geel-1) 72%, #fbe9a4 100%);
  overflow:hidden;
}
/* Tekst boven de zon. .zon staat absoluut op z-index 0 en schilderde anders
   over de statische inhoud heen: de prijsregel op /installateurs/ en
   /webshops/ verbleekte daar tot onder de contrastnorm. Zelfde oplossing
   als .lamp > .wrap bij de donkere banden. */
.band--sky > .wrap{position:relative;z-index:2}
.band--shore{background:var(--wit-2)}
.band--shallow{background:linear-gradient(180deg,var(--wit-2),var(--geel-1))}

/* ── Laagstaande zon ─────────────────────────────────────── */
.zon{position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none;z-index:0}
.zon span{
  position:absolute;left:66%;bottom:52px;
  width:clamp(190px,22vw,320px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    rgba(253,246,214,.85) 0%,
    rgba(247,214,124,.62) 34%,
    rgba(245,212,79,.24) 54%,
    transparent 70%);
  filter:blur(6px);
}
/* Gloed van de zon over de hele lucht */
.zon::after{
  content:"";position:absolute;left:34%;bottom:-14%;
  width:82%;aspect-ratio:1.5;
  background:radial-gradient(ellipse at 50% 100%,rgba(247,205,140,.32),transparent 70%);
}

/* ── Meeuwen ─────────────────────────────────────────────── */
.meeuwen{position:absolute;inset:0;pointer-events:none;z-index:1;color:rgba(17,19,24,.34)}
.meeuw{position:absolute;will-change:transform}
.meeuw--0{left:14%;top:16%;transform:scale(.85);animation:zweef-a 19s ease-in-out infinite alternate}
.meeuw--1{left:30%;top:9%;transform:scale(.6);animation:zweef-b 26s ease-in-out infinite alternate}
.meeuw--2{left:52%;top:20%;transform:scale(.45);animation:zweef-a 33s ease-in-out infinite alternate}
@keyframes zweef-a{to{transform:translate(70px,-26px) scale(.9)}}
@keyframes zweef-b{to{transform:translate(-56px,20px) scale(.65)}}

/* ── Dijkrand met molen op de horizon ────────────────────── */
.skyline{
  position:absolute;left:0;right:0;bottom:100%;z-index:3;
  display:flex;align-items:flex-end;justify-content:flex-end;gap:clamp(20px,5vw,70px);
  padding-inline:clamp(16px,6vw,90px);
  color:var(--water-5);opacity:.42;
  pointer-events:none;
}
.skyline svg{display:block;fill:currentColor;flex:0 0 auto}
.dijkrand{width:clamp(180px,26vw,320px);height:auto}
.molen{width:clamp(74px,9.5vw,108px);height:auto;margin-bottom:-2px}
.molen__wieken{transform-origin:60px 52px;animation:molen 14s linear infinite}
@keyframes molen{to{transform:rotate(360deg)}}
@media (max-width:640px){.dijkrand{display:none}}
/* De onderkant van deze band is bewust lichter dan --water-2: bij dat
   donkerdere blauw haalde marineblauwe tekst maar 3,7:1. Nu 5,7:1. */
.band--mid{background:var(--wit)}

/* Volle merkgeel met zwarte tekst: 13:1, ruim boven de norm.
   Wit op geel haalt maar 1,4:1 en komt hier dus nergens voor. */
.band--deep,.band--geel{background:var(--geel-2);color:var(--zwart)}
.band--geel-zacht{background:var(--geel-1);color:var(--zwart)}

/* Blauw als accent: één donkere band en de afsluiter */
.band--blauw{background:linear-gradient(180deg,var(--blauw-2),var(--blauw));color:var(--pale)}
.band--deepest{background:linear-gradient(180deg,var(--blauw),var(--water-6));color:var(--pale)}

/* ── Horizon: bewegende golven + gouden lichtlijn ────────── */
.horizon{position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;z-index:2}
.horizon__c{display:block;width:100%;height:100%}
/* De horizon is nu blauw: dat is het accent, en op wit en geel is een
   gele lijn onzichtbaar. De gele gloed erboven blijft het licht. */
.horizon__line{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--blauw),var(--blauw-3) 30%,var(--blauw-2) 50%,var(--blauw-3) 70%,var(--blauw));
  box-shadow:0 -10px 26px 2px rgba(245,212,79,.55);
}

/* ── Caustisch licht op de diepe banden ──────────────────── */
.caustics{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.caustics::before,.caustics::after{
  content:"";position:absolute;width:64%;aspect-ratio:1;border-radius:50%;
  filter:blur(72px);opacity:.17;
}
.caustics::before{background:var(--light-2);left:-12%;top:-24%;animation:float-a 23s ease-in-out infinite alternate}
.caustics::after{background:var(--light-1);right:-14%;bottom:-26%;animation:float-b 29s ease-in-out infinite alternate}
@keyframes float-a{to{transform:translate(26%,18%) scale(1.14)}}
@keyframes float-b{to{transform:translate(-22%,-16%) scale(1.1)}}

/* ── Duiklamp: licht volgt de cursor ─────────────────────── */
.lamp::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(245,212,79,.16),transparent 72%);
}
.lamp.on::after{opacity:1}
.lamp > .wrap{position:relative;z-index:2}

/* ═══ Tekst die als waterlijn opkomt ══════════════════════ */
.rise{display:block}
.rise__w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.rise__w > span{
  display:inline-block;transform:translateY(108%);
  transition:transform .8s var(--spring);transition-delay:calc(var(--i) * 55ms);
}
.rise.in .rise__w > span{transform:none}

/* ═══ Buttons ═════════════════════════════════════════════ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 var(--s5);border-radius:2px;
  font-family:var(--sans);font-weight:500;font-size:1rem;
  border:1.5px solid currentColor;cursor:pointer;
  transition:transform .22s var(--spring),background .22s var(--ease),color .22s var(--ease);
}
.btn > span,.btn{z-index:0}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(245,212,79,.35),transparent 70%);
  opacity:0;transition:opacity .3s var(--ease);
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{opacity:1}
.btn--solid{background:var(--water-5);color:var(--pale);border-color:var(--water-5)}
.btn--out{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--out:hover{background:var(--ink);color:var(--pale)}
.btn--light{background:var(--light-2);color:var(--water-5);border-color:var(--light-2)}
.btn--ghost{background:transparent;color:var(--pale);border-color:var(--pale-45)}
.btn--ghost:hover{background:var(--pale);color:var(--water-5)}

/* ═══ Hero ════════════════════════════════════════════════ */
.hero{padding-block:var(--s8) var(--s7)}
.hero__in{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s6);align-items:center}
.hero__where{display:flex;align-items:center;gap:12px;color:var(--ink-50);font-size:1.05rem;margin-bottom:var(--s3)}
.hero__where::before{content:"";width:52px;height:2px;background:var(--light-3)}
.hero__h1{font-size:var(--t-h1);max-width:15ch;margin-bottom:var(--s4);font-weight:600}
.hero__lead{font-size:var(--t-lead);color:var(--ink-70);max-width:46ch;margin-bottom:var(--s5)}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.hero__facts{
  display:grid;grid-template-columns:repeat(4,auto);gap:var(--s5);
  border-top:2px solid rgba(17,19,24,.18);padding-top:var(--s3);justify-content:start;
}
.hero__facts dt{color:var(--ink-50);font-size:.92rem}
.hero__facts dd{margin:0;font-family:var(--display);font-size:1.55rem;font-weight:700;line-height:1.1}

/* De foto's staan er zoals ze zijn: geen filter, geen blendmodes, geen
   crop. De beeldverhouding volgt het bestand, zodat er niets afvalt. */
.hero__fig{margin:0}
.hero__fig-in,.portret__in{position:relative;display:block;overflow:hidden}
.hero__fig-in img,.portret__in img{width:100%;height:auto;display:block}
.hero__fig{position:relative}
.hero__fig::after{
  content:"";position:absolute;left:0;right:0;bottom:2.4rem;height:3px;
  background:var(--light-2);box-shadow:0 0 22px 3px rgba(245,212,79,.5);
}
.hero__fig figcaption{padding-top:var(--s2);color:var(--ink-50);font-size:.95rem}

/* ═══ Subpagina-hero ══════════════════════════════════════ */
.page-hero{padding-block:var(--s8) var(--s7)}
.eyebrow-plain{color:var(--ink-50);font-size:1.05rem;margin-bottom:var(--s2)}
.page-hero__h1{font-size:var(--t-h1);max-width:20ch;margin-bottom:var(--s4);font-weight:600}
.page-hero__lead{font-size:var(--t-lead);color:var(--ink-70);max-width:56ch}

/* ═══ Bandkop ═════════════════════════════════════════════ */
.bh{max-width:62ch;margin-bottom:var(--s6)}
.bh h2{font-size:var(--t-h2);margin-bottom:var(--s3)}
.bh p{font-size:var(--t-lead);color:var(--ink-70);max-width:54ch}
.bh--light p{color:var(--pale-70)}
/* Op geel wordt "licht" alsnog zwart: wit op geel haalt 1,35:1. */
.band--deep .bh--light p,.band--geel .bh--light p,
.band--deep .bh--light h2,.band--geel .bh--light h2{color:var(--zwart-70)}
.band--deep .bh--light h2,.band--geel .bh--light h2{color:var(--zwart)}

/* ═══ Projectkaarten: elk een eigen landschap ═════════════ */
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
.pj a{display:flex;flex-direction:column;height:100%;transition:transform .34s var(--spring)}
/* De monitor staat op een landschap in de kleuren van die klant:
   lichtste tint als lucht, accent als zon en horizon, donkerste als water. */
.pj__scape{
  display:block;position:relative;overflow:hidden;aspect-ratio:4/3;
  background:var(--pale);
}
.pj__sky{position:absolute;inset:0;background:linear-gradient(180deg,#fff,var(--pale))}
.pj__sun{
  position:absolute;left:78%;top:22%;width:20%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--light);opacity:.4;filter:blur(3px);
  transition:top .5s var(--spring),opacity .5s var(--ease);
}
.pj__line{
  position:absolute;left:0;right:0;top:84%;height:3px;z-index:1;
  background:var(--light);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--light) 60%,transparent);
  transition:top .5s var(--spring);
}
.pj__water{
  position:absolute;inset:84% 0 0 0;z-index:0;
  background:linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--deep) 68%,#000));
  transition:top .5s var(--spring);
}
/* Het nummer ligt op het water van de klant, en dat water is per klant een
   andere kleur. Een schaduw houdt het leesbaar bij elk palet. */
.pj__idx{
  position:absolute;left:14px;bottom:9px;z-index:4;
  font-family:var(--display);font-size:1.3rem;font-weight:700;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* ── Monitor met de echte hero van die site ──────────────── */
.mock{
  position:absolute;z-index:3;left:7.5%;right:7.5%;top:9%;
  border-radius:7px 7px 2px 2px;overflow:hidden;background:#fff;
  box-shadow:
    0 16px 30px -12px rgba(1,10,68,.45),
    0 38px 56px -28px rgba(1,10,68,.4);
  transition:transform .45s var(--spring),box-shadow .45s var(--ease);
}
.mock__bar{
  display:flex;align-items:center;gap:5px;
  height:26px;padding-inline:10px;
  background:#e9edf1;border-bottom:1px solid rgba(17,19,24,.12);
}
.mock__bar i{width:7px;height:7px;border-radius:50%;background:rgba(17,19,24,.24);flex:0 0 auto}
.mock__url{
  flex:1;margin-left:8px;padding:2px 9px;border-radius:20px;
  background:#fff;color:rgba(17,19,24,.55);
  font-size:.62rem;line-height:1.55;text-align:left;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.mock__shot{
  display:block;width:100%;height:auto;
  aspect-ratio:760/430;object-fit:cover;object-position:50% 0;
}
.pj a:hover{transform:translateY(-7px)}
.pj a:hover .pj__line,.pj a:hover .pj__water{top:74%}
.pj a:hover .pj__sun{top:15%;opacity:.62}
.pj a:hover .mock{
  transform:translateY(-9px) scale(1.015);
  box-shadow:0 26px 42px -12px rgba(1,10,68,.5),0 56px 76px -32px rgba(1,10,68,.45);
}

.pj__body{display:flex;flex-direction:column;gap:6px;padding-top:var(--s3);flex:1}
.pj__name{font-family:var(--display);font-size:var(--t-h3);font-weight:600;line-height:1.16}
.pj__meta{color:var(--ink-50);font-size:.94rem}
.pj__txt{color:var(--ink-70);padding-top:6px}
.pj__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  margin-top:auto;padding-top:var(--s3);flex-wrap:wrap;
}
.pj__pak{color:var(--ink-50);font-size:.9rem}
.pj__go{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--light-3);
  text-decoration-thickness:2px;text-underline-offset:4px;font-weight:500;
}
.pj__go i{font-style:normal;display:inline-block;transition:transform .25s var(--spring)}
.pj a:hover .pj__go i{transform:translateX(5px)}

.mid-cta{margin-top:var(--s6);text-align:center}
.note{margin-top:var(--s6);max-width:66ch;color:var(--ink-70)}
.note--dark{color:var(--ink-70);margin-top:var(--s5)}

/* ═══ Stappen ═════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.steps li{position:relative;padding-top:var(--s5);border-top:2px solid rgba(17,19,24,.16)}
.steps li::before{
  content:"";position:absolute;top:-2px;left:0;width:38%;height:2px;background:var(--light-3);
}
.steps__d{
  display:block;font-family:var(--display);font-size:2.4rem;font-weight:700;
  color:var(--zwart-50);line-height:1;margin-bottom:var(--s2);
}
.steps h3{font-size:var(--t-h3);margin-bottom:var(--s2)}
.steps p{color:var(--ink-70);max-width:38ch}

/* ═══ Pakketten ═══════════════════════════════════════════ */
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch}
.pk{
  background:var(--pale);border:2px solid transparent;border-radius:3px;
  padding:var(--s5) var(--s4) var(--s4);
  display:flex;flex-direction:column;gap:var(--s1);position:relative;
  box-shadow:0 26px 50px -34px rgba(1,10,68,.55);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease);
}
.pk:hover{transform:translateY(-5px);box-shadow:0 34px 60px -32px rgba(1,10,68,.6)}
.pk--pick{border-color:var(--water-5);padding-top:calc(var(--s5) + 28px)}
.pk__flag{
  position:absolute;top:0;left:0;right:0;background:var(--light-2);color:var(--water-5);
  text-align:center;padding:8px var(--s2);font-weight:500;font-size:.92rem;
}
.pk__diepte{color:var(--ink-50);font-size:.9rem}
.pk h3{font-size:1.7rem;font-family:var(--display);font-weight:700}
.pk__voor{color:var(--ink-50)}
.pk__prijs{
  font-family:var(--display);font-weight:700;font-size:clamp(2.7rem,3.8vw,3.5rem);
  line-height:1;padding-block:var(--s3) var(--s1);display:flex;align-items:baseline;gap:4px;
}
.pk__prijs span{font-size:.36em;font-weight:400}
.pk__prijs em{font-family:var(--sans);font-size:.24em;font-style:normal;font-weight:400;color:var(--ink-50);margin-left:6px}
.pk ul{
  display:grid;gap:10px;padding-block:var(--s3);margin-block:var(--s2);
  border-top:1px solid rgba(17,19,24,.14);border-bottom:1px solid rgba(17,19,24,.14);
  color:var(--ink-70);
}
.pk li{position:relative;padding-left:24px}
.pk li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:2px;background:var(--light-3)}
.pk .btn{margin-top:auto;align-self:stretch}

/* ═══ Diensten ════════════════════════════════════════════ */
/* Op de gele band is alles zwart: wit op geel haalt de norm niet. */
.svc > div{
  display:grid;grid-template-columns:3fr 6fr 2.6fr;gap:var(--s4);align-items:baseline;
  padding-block:var(--s4);border-bottom:1px solid rgba(17,19,24,.2);
}
.svc > div:first-child{border-top:2px solid var(--zwart)}
.svc dt{font-family:var(--display);font-size:var(--t-h3);font-weight:600}
.svc dd{margin:0;color:var(--zwart-70)}
.svc__p{text-align:right;font-weight:700;white-space:nowrap;color:var(--zwart)}

/* Dezelfde lijst op een lichte band */
.svc--zwart > div{border-bottom-color:rgba(17,19,24,.16)}
.svc--zwart .svc__p{color:var(--zwart-50)}

/* En op de blauwe accentband: wit */
.band--blauw .svc > div,.band--deepest .svc > div{border-bottom-color:rgba(255,255,255,.2)}
.band--blauw .svc > div:first-child{border-top-color:rgba(255,255,255,.5)}
.band--blauw .svc dd{color:var(--pale-70)}
.band--blauw .svc__p{color:var(--geel-2)}

/* ═══ Pijlers (over mij, webshops) ════════════════════════ */
.pijlers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.pijlers--3{grid-template-columns:repeat(3,1fr)}
.pijlers li{border-top:2px solid var(--zwart);padding-top:var(--s3);position:relative}
.pijlers li::before{
  content:"";position:absolute;top:-2px;left:0;width:34%;height:4px;background:var(--geel-2);
}
.pijlers__n{
  display:block;font-family:var(--display);font-size:1.35rem;font-weight:700;
  color:var(--zwart-50);margin-bottom:var(--s2);
}
.pijlers h3{font-size:var(--t-h3);margin-bottom:10px}
.pijlers p{color:var(--ink-70)}

/* ═══ Split (over mij / contact) ══════════════════════════ */
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s6)}
.split__main h2{font-size:var(--t-h2);margin-block:var(--s5) var(--s3)}
.split__main h2:first-child{margin-top:0}
.split__main p{color:var(--ink-70);margin-bottom:var(--s3);max-width:62ch}
.split__main .lead-p{font-size:var(--t-lead);color:var(--ink)}
.portret{margin:0 0 var(--s4)}
.mini > div,.contact-list > div{
  display:flex;justify-content:space-between;gap:var(--s2);
  padding-block:14px;border-bottom:1px solid rgba(17,19,24,.16);
}
.mini > div:first-child,.contact-list > div:first-child{border-top:2px solid rgba(17,19,24,.28)}
.mini dt,.contact-list dt{color:var(--ink-50)}
.mini dd,.contact-list dd{margin:0;font-weight:500;text-align:right}
.contact-list a{text-decoration:underline;text-decoration-color:var(--light-3);text-decoration-thickness:2px;text-underline-offset:3px}

/* Kaartje: geen echte kaart, wel de waterlijn van Zeeland */
.kaartje{
  position:relative;margin-top:var(--s4);height:170px;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-2),var(--sky-3));
}
.kaartje__label{
  position:absolute;left:var(--s3);top:var(--s3);z-index:2;
  font-family:var(--display);font-size:1.5rem;font-weight:700;
}
.kaartje__water{
  position:absolute;left:-10%;right:-10%;bottom:-30px;height:96px;
  background:var(--water-4);border-radius:44% 56% 0 0/28px 34px 0 0;
}
.kaartje::after{
  content:"";position:absolute;left:0;right:0;bottom:63px;height:3px;
  background:var(--light-2);box-shadow:0 0 18px 2px rgba(245,212,79,.5);
}

/* ═══ FAQ ═════════════════════════════════════════════════ */
.faq{display:grid;gap:0;max-width:76ch}
.faq details{border-bottom:1px solid rgba(17,19,24,.18)}
.faq details:first-child{border-top:2px solid rgba(17,19,24,.28)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:var(--s3);
  font-family:var(--display);font-size:var(--t-h3);font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:14px;height:14px;flex:0 0 auto;
  border-right:2px solid var(--light-4);border-bottom:2px solid var(--light-4);
  transform:rotate(45deg) translateY(-3px);transition:transform .28s var(--spring);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{color:var(--ink-70);padding-bottom:var(--s4);max-width:64ch}

/* ═══ Formulier ═══════════════════════════════════════════ */
.form{max-width:44rem}
.form__row{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--s3)}
.form__two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.form label{font-weight:500}
.form label span{font-weight:400;color:var(--ink-50)}
.form input,.form select,.form textarea{
  font:inherit;color:inherit;background:var(--pale);
  border:1.5px solid rgba(17,19,24,.26);border-radius:2px;
  padding:14px var(--s2);min-height:52px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.form textarea{min-height:auto;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--water-5);
  box-shadow:0 0 0 3px rgba(245,212,79,.4);
}
.form button{margin-top:var(--s2)}
.form__note{
  margin-top:var(--s3);color:var(--ink-70);font-size:.95rem;
  border-left:3px solid var(--light-3);padding-left:var(--s2);max-width:52ch;
}

/* ═══ CTA ═════════════════════════════════════════════════ */
.cta__in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:end}
.cta__h2{font-size:var(--t-h2);margin-bottom:var(--s3)}
.cta p{color:var(--pale-70);font-size:var(--t-lead);max-width:46ch}
.cta__acts{display:grid;gap:var(--s2);justify-items:start}
.cta__note{font-size:.95rem;margin-top:6px}

/* ═══ Webshoppagina ═══════════════════════════════════════ */

/* Prijs op aanvraag, als blok in plaats van als bedrag */
.prijs-blok{
  display:grid;gap:6px;margin-top:var(--s5);
  border-left:5px solid var(--geel-2);padding:var(--s3) 0 var(--s3) var(--s4);
  max-width:52ch;
}
.prijs-blok__k{color:var(--zwart-50)}
.prijs-blok__v{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:700;line-height:1.05}
.prijs-blok__t{color:var(--zwart-70)}

/* Aanvinklijst van wat er wordt ingericht */
.check{display:grid;gap:12px;margin-block:var(--s4) var(--s3);max-width:56ch}
.check li{position:relative;padding-left:38px;color:var(--zwart-70)}
.check li::before{
  content:"";position:absolute;left:0;top:.18em;
  width:22px;height:12px;
  border-left:3px solid var(--zwart);border-bottom:3px solid var(--zwart);
  transform:rotate(-45deg) scale(.86);transform-origin:center;
}
.na-lijst{color:var(--zwart-70);max-width:52ch;margin-top:var(--s3)}
.split__h2{font-size:var(--t-h3);margin-bottom:var(--s3)}

/* Valkuilen op de blauwe accentband */
.valkuilen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.valkuilen li{border-top:2px solid rgba(255,255,255,.45);padding-top:var(--s3);position:relative}
.valkuilen li::before{
  content:"";position:absolute;top:-2px;left:0;width:34%;height:4px;background:var(--geel-2);
}
.valkuilen__n{
  display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;
  color:var(--geel-2);margin-bottom:var(--s2);
}
.valkuilen h3{font-size:var(--t-h3);margin-bottom:10px}
.valkuilen p{color:var(--pale-70)}

/* ═══ Ticker ══════════════════════════════════════════════ */
.ticker{
  overflow:hidden;background:var(--water-6);color:var(--pale-70);
  border-top:1px solid rgba(253,251,247,.14);padding-block:16px;
}
.ticker__row{display:flex;width:max-content;animation:marq 60s linear infinite;gap:0}
.ticker__row span{padding-inline:var(--s3);font-family:var(--display);font-size:1.05rem;white-space:nowrap}
.ticker__row i{color:var(--light-3);font-style:normal;font-size:.7rem;align-self:center}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ═══ Footer ══════════════════════════════════════════════ */
.ftr{background:var(--water-5);color:var(--pale);padding-block:var(--s6) var(--s4)}
.ftr__in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s5)}
.ftr__brand img{height:40px;width:auto;margin-bottom:var(--s3)}
.ftr__brand p{color:var(--pale-70);max-width:34ch}
.ftr__col h2{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--pale-45);margin-bottom:10px;letter-spacing:0}
.ftr__col p{color:var(--pale-70);line-height:1.9}
.ftr__col a{text-decoration:underline;text-decoration-color:var(--light-4);text-decoration-thickness:2px;text-underline-offset:3px}
.ftr__col a:hover{color:var(--light-2)}
.ftr__badge{grid-column:1/-1;margin-top:var(--s5)}
.ftr__badge a{display:inline-block;transition:transform .22s var(--spring),opacity .22s var(--ease);opacity:.9}
.ftr__badge a:hover{transform:translateY(-2px);opacity:1}
.ftr__badge img{width:170px;height:auto}
.ftr__legal{
  grid-column:1/-1;margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid rgba(253,251,247,.16);color:var(--pale-45);font-size:.92rem;
}

/* ═══ Reveal ══════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--spring)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1180px){
  .pj-grid{grid-template-columns:repeat(2,1fr)}
  .pijlers{grid-template-columns:repeat(2,1fr)}
  .ftr__in{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  :root{--pad:24px}
  .hero{padding-block:var(--s7) var(--s6)}
  .hero__in,.cta__in,.split{grid-template-columns:1fr;gap:var(--s5)}
  /* Geen crop op smallere schermen: de foto houdt zijn eigen verhouding */
  .hero__fig{max-width:420px}
  .pk-grid{grid-template-columns:1fr;max-width:520px}
  .steps{grid-template-columns:1fr}
  .steps p{max-width:60ch}
  .svc > div{grid-template-columns:1fr;gap:6px}
  .svc__p{text-align:left}
  .split__side{max-width:460px}
}
@media (max-width:768px){
  :root{--pad:20px}
  .band{padding-block:var(--s6)}
  .hero,.page-hero{padding-block:var(--s6)}
  .hdr__in{flex-wrap:wrap;padding-block:var(--s2);min-height:64px}
  .burger{display:grid}
  .hdr__nav{
    order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;transition:max-height .32s var(--ease);
  }
  .hdr__nav.open{max-height:420px;padding-bottom:var(--s2)}
  /* Header is wit, dus zwarte scheidingslijnen en een zwarte letter —
     geel op wit haalt maar 1,4:1. */
  .hdr__nav a{min-height:54px;display:flex;align-items:center;border-top:1px solid rgba(17,19,24,.14)}
  .hdr__nav a:not(.hdr__call)::after{display:none}
  .hdr__nav a.hdr__call{
    background:var(--geel-2);color:var(--zwart);
    justify-content:center;margin-top:var(--s2);border-radius:2px;
  }
  .hdr__nav a.hdr__call:hover{background:var(--geel-3);transform:none}
  .pj-grid,.pijlers,.form__two{grid-template-columns:1fr}
  .hero__facts{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
  .ftr__in{grid-template-columns:1fr;gap:var(--s4)}
  .horizon{height:44px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;
  }
  .dive{display:none}
  .rv{opacity:1;transform:none}
  .rise__w > span{transform:none}
  .ticker__row{animation:none}
  /* Molen en meeuwen staan stil, maar blijven staan */
  .molen__wieken,.meeuw{animation:none!important}
  @view-transition{navigation:none}
}