/* ---------- fonts ----------

   Self-hosted, vendored from _lib/fonts. Replaces the Google CDN link, which
   was the page's only third-party font request. Archivo Black was vendored
   while self-hosting buitenspoor; Archivo itself was vendored here, as the
   variable wght 100-900 file rather than the two static instances Google was
   serving for 600 and 700. One 34K file instead of two, and any weight between
   is now reachable without another request.

   font-display: block on the display face, swap on text. The loader owns the
   first seconds anyway, so there is no first paint to protect on the display
   face, and swapping a fallback grotesque in and out under a 2.35cqw logo
   reflows the hero. Body text should never wait on a font, hence swap there. */
@font-face{
  font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:block;
  src:url('assets/fonts/archivo-black-v23-latin-regular.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:block;
  src:url('assets/fonts/archivo-black-v23-latin-ext-regular.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:100%; font-display:swap;
  src:url('assets/fonts/archivo-v25-latin-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:100%; font-display:swap;
  src:url('assets/fonts/archivo-v25-latin-ext-variable.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/space-mono-v17-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/space-mono-v17-latin-700.woff2') format('woff2');
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,li,form{margin:0}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

:root{
  --paper:#dbdad9; --paper2:#e0e0de; --ink:#0f1010; --volt:#d0e014;
  --shock:#e2186f; --white:#f4f3f1; --greyb:#3a3d3e; --grey-t:#8a8d8e; --grey-lift:#b9bcbd; --shock-t:#e6367f; --grey-ink:#5a5d5e;
  /* --grey-t is a grey for INK grounds. On the paper it measures 2.39:1, which
     is not a near miss, it is unreadable, and the archive index labels were set
     in it. --grey-ink is the paper-ground twin at 4.76:1. Two greys, each named
     for the ground it belongs on, is cheaper to keep right than one grey plus a
     rule about where not to use it. */
  /* --shock-t is --shock for TEXT ON INK only, nothing else. The sampled pink
     on the sampled black measures 4.17:1, just under the 4.5 AA floor, and the
     usual escape is closed here: WCAG large text needs 18.66px AT BOLD, and
     Archivo Black is nominally weight 400, so a display face at 19px still
     counts as normal text. Fixing it by size would mean resizing type inside a
     traced comp. Lifting the green channel to #e6367f measures 4.77:1, moves no
     geometry at all, and reads as the same pink; a photocopied zine carrying
     two nearly-equal inks is if anything more correct. Panels, fills and
     borders keep --shock. */
  --font-display:'Archivo Black',sans-serif;
  --font-mono:'Space Mono',monospace;
  --font-sans:'Archivo',sans-serif;
}

body{
  background:var(--paper) url("assets/paper-tile.webp");
  font-family:var(--font-sans);
  color:var(--ink);
  overflow-x:hidden;
}

.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}

:focus-visible{outline:2px solid var(--shock);outline-offset:2px}

::selection{background:var(--volt);color:var(--ink)}

/* ============================================================ */
/* SECTION: hero */
/* ============================================================ */
#top.comp--hero{
  position:relative;
  aspect-ratio:2688/1520;
  container-type:inline-size;
  background:var(--paper) url(assets/paper-tile.webp);
  overflow:hidden;
}
#top .g{position:absolute; left:var(--l); top:var(--t); width:var(--w); height:var(--h)}

/* ---------- logo ---------- */
#top .hero-logo{display:flex; flex-direction:column; justify-content:flex-start; text-decoration:none; color:var(--ink); width:max-content !important}
#top .hero-logo__l1{font-family:var(--font-display); font-size:2.35cqw; line-height:.82; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap}
#top .hero-logo__l2{font-family:var(--font-sans); font-weight:700; font-size:.88cqw; line-height:1; letter-spacing:.5em; text-transform:uppercase; margin-top:.1cqw}
#top .o-bolt{position:relative; display:inline-block}
#top .o-bolt__svg{position:absolute; left:50%; top:50%; width:55%; height:55%; transform:translate(-50%,-52%); fill:var(--ink)}

/* ---------- nav ---------- */
#top .hero-nav{display:flex; justify-content:space-between; align-items:center}
#top .hero-nav a{font-family:var(--font-sans); font-weight:700; font-size:.85cqw; letter-spacing:.08em; color:var(--ink); text-decoration:none; white-space:nowrap}
#top .hero-nav a:hover{color:var(--shock)}

/* ---------- offerte btn ---------- */
#top .hero-offerte{
  z-index:3; display:flex; align-items:center; justify-content:center; gap:.7cqw;
  background:var(--volt); color:var(--ink); text-decoration:none;
  font-family:var(--font-mono); font-weight:700; font-size:.87cqw; letter-spacing:.06em;
  text-transform:uppercase; transition:background .15s,color .15s;
}
/* .87cqw, not .95: at the original size a centred label runs into the pinned
   arrow — the block is only ~208px wide at 1440. */
/* the arrow is pinned rather than laid out, so the label centres on the whole
   button. Reserving flow space for it either pushed the text off-centre
   (margin-left:auto) or, with a mirrored spacer, left too little room and the
   label wrapped to two lines. text-indent cancels the trailing letter-space so
   the word block sits optically centred, not .06em left. */
#top .hero-offerte > span{text-align:center; text-indent:.06em}
#top .hero-offerte .arr-diag{position:absolute; right:.45cqw; top:50%; transform:translateY(-50%); width:1.1cqw; height:1.1cqw}
#top .hero-offerte:hover{background:var(--ink); color:var(--volt)}

/* ---------- menu panel ---------- */
#top .hero-menu{
  z-index:3; background:var(--ink); border:0; cursor:pointer; padding:0;
  display:block; text-align:left;
}
#top .hero-menu__label{
  position:absolute; left:30%; top:25%; color:var(--white);
  font-family:var(--font-sans); font-weight:700; font-size:.95cqw; letter-spacing:.12em; text-transform:uppercase;
}
#top .hero-menu__plus{
  position:absolute; right:15%; top:18%; color:var(--shock);
  font-family:var(--font-display); font-size:2.1cqw; line-height:1; display:inline-block;
  transition:transform .2s ease;
}
#top .hero-menu:hover .hero-menu__plus{transform:rotate(90deg)}

/* ---------- stamp ---------- */
#top .hero-stamp{z-index:2; border-radius:50%; overflow:hidden; animation:hero-stamp-spin 24s linear infinite}
@keyframes hero-stamp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#top .hero-stamp{animation-play-state:paused}}
#top.is-reduced .hero-stamp{animation-play-state:paused}

/* ---------- crops ---------- */
#top .hero-crop{z-index:1; display:block; object-fit:contain}
#top .hero-barcode{z-index:3}
#top .hero-swash{mix-blend-mode:multiply; clip-path:inset(0 0 0 64%); filter:brightness(1.35)}
#top .hero-collage{object-fit:cover}
#top .hero-kitchen{z-index:3; object-fit:cover}

/* ---------- subline ---------- */
#top .hero-subline{
  z-index:2; margin:0; font-family:var(--font-mono); font-weight:700; font-size:1.05cqw;
  line-height:1.55; color:var(--ink); text-transform:uppercase;
}

/* ---------- panels shared ---------- */
#top .hero-panel{z-index:2}

/* waarwij */
#top .hero-waarwij{background:var(--ink); padding:1.1cqw 1.4cqw; display:flex; flex-direction:column}
#top .hero-waarwij__head{position:relative; margin-bottom:.3cqw; flex-shrink:0}
#top .hero-waarwij__head h2{
  margin:0; font-family:var(--font-display); font-size:1.28cqw; line-height:1.08; color:var(--shock-t); text-transform:uppercase;
}
#top .hero-waarwij .arr-pink{position:absolute; right:0; top:.1cqw; width:5cqw; color:var(--shock)}
/* padding-right 1.8cqw, and it is not a spacing choice. The panel runs to
   27.94cqw and the kitchen crop starts at 24.95cqw, so the right 3cqw of this
   panel sits under a photo. The row text is left aligned and clears it, but the
   "+" markers are pushed to the right edge by space-between and land entirely
   underneath: five glyphs of dead ink, 35/35 sample points covered.

   3cqw is measured, not chosen. The waarwij panel ends at 27.94cqw and carries
   1.4cqw of its own padding, so its content runs to 26.54cqw, while the
   .hero-recentwerk panel starts at 23.74cqw and paints over everything past
   that. The usable frame is 2.8cqw narrower than the box, which is pitfall 40.
   The first attempt reserved 1.8cqw against the kitchen crop at 24.95cqw and
   still measured 35/35: the crop was never the occluder, the neighbouring panel
   was. Pulling the markers inboard leaves the collage layering, which is the
   design, exactly as it was. */
#top .hero-waarwij__list{list-style:none; margin:0; padding:0 3cqw 0 0; flex-shrink:0}
#top .hero-waarwij__list li{
  display:flex; justify-content:space-between; align-items:center; border-top:1px solid #333;
  padding:.4cqw 0; font-family:var(--font-mono); font-weight:700; font-size:.78cqw; line-height:1.1; color:var(--white); text-transform:uppercase;
}
#top .hero-waarwij__list li .plus{color:var(--volt)}
#top .hero-waarwij__cta{
  margin-top:auto; padding-top:.5cqw; display:flex; align-items:center; gap:.6cqw; text-decoration:none;
  font-family:var(--font-mono); font-weight:700; font-size:.8cqw; color:var(--shock-t); text-transform:uppercase;
}
#top .hero-waarwij__cta .arr-pink{width:3.6cqw}

/* recentwerk */
#top .hero-recentwerk{background:var(--volt); display:flex; flex-direction:column}
#top .hero-recentwerk__head{
  display:flex; align-items:center; justify-content:space-between; padding:.55cqw 1.2cqw;
}
#top .hero-recentwerk__head h2{
  margin:0; font-family:var(--font-display); font-size:1.1cqw; line-height:1; color:var(--ink); text-transform:uppercase;
}
#top .hero-recentwerk__nav{display:flex; gap:.8cqw}
#top .hero-recentwerk__nav button{
  background:transparent; border:0; cursor:pointer; color:var(--ink); font-family:var(--font-mono);
  font-size:1.15cqw; line-height:1; padding:0; transition:transform .15s ease;
}
#top .hero-recentwerk__nav button:hover{transform:translateX(2px)}
#top .hero-recentwerk__nav button:first-child:hover{transform:translateX(-2px)}
#top .hero-recentwerk__spacer{flex:1}
#top .hero-recentwerk__caption{padding:0 1.2cqw .9cqw}
#top .hero-recentwerk__title{margin:0; font-family:var(--font-display); font-size:.95cqw; color:var(--ink); text-transform:uppercase}
#top .hero-recentwerk__sub{margin:.2cqw 0 0; font-family:var(--font-mono); font-weight:700; font-size:.72cqw; color:var(--ink); text-transform:uppercase}
#top .hero-recentwerk__plus{
  z-index:4; border-radius:50%; background:var(--shock); border:0; cursor:pointer;
  color:var(--white); font-family:var(--font-sans); font-size:1.6cqw; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}

/* hulp */
#top .hero-hulp{
  z-index:3; background:var(--shock); padding:1.6cqw 1.8cqw; display:flex; flex-direction:column; gap:.55cqw; position:relative;
}
#top .hero-hulp__kicker{margin:0; font-family:var(--font-mono); font-weight:700; font-size:.9cqw; color:var(--volt); text-transform:uppercase}
#top .hero-hulp__title{margin:0; font-family:var(--font-display); font-size:2.05cqw; color:var(--white); text-transform:uppercase}
#top .hero-hulp__tel{
  display:inline-block; align-self:flex-start; background:var(--ink); color:var(--white); text-decoration:none;
  font-family:var(--font-mono); font-weight:700; font-size:1.85cqw; padding:.5cqw .9cqw;
}
#top .hero-hulp__sub{margin:0; font-family:var(--font-mono); font-weight:700; font-size:.8cqw; color:var(--white); text-transform:uppercase}
#top .hero-hulp .arr-volt{position:absolute; right:1.8cqw; bottom:1.4cqw; width:7cqw; color:var(--volt)}

/* bottom bar */
#top .hero-bar{z-index:2; background:var(--ink); display:flex; align-items:center}
#top .hero-bar__msg{
  margin:0; padding-left:1.6cqw; font-family:var(--font-display); font-size:1.32cqw; color:var(--white); text-transform:uppercase;
}
#top .hero-bar__msg .shock{color:var(--shock-t)}
#top .hero-bar__form{display:contents}
#top .hero-bar__input{
  z-index:3; background:transparent; border:1px solid var(--greyb); color:var(--white);
  font-family:var(--font-mono); font-size:.8cqw; padding-left:1cqw; text-transform:uppercase;
}
#top .hero-bar__input::placeholder{color:var(--grey-t)}
#top .hero-bar__submit{
  z-index:3; background:var(--volt); color:var(--ink); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5cqw;
  font-family:var(--font-mono); font-weight:700; font-size:.82cqw; text-transform:uppercase;
  transition:background .15s,color .15s;
}
#top .hero-bar__submit .arr-small{width:.9cqw; height:.9cqw}
#top .hero-bar__submit:hover{background:var(--ink); color:var(--volt)}
#top .hero-bar__socials{
  z-index:3; display:flex; flex-direction:column; justify-content:center; gap:0; padding-left:1cqw;
  border-left:1px solid var(--white);
}
#top .hero-bar__socials a{
  font-family:var(--font-mono); font-weight:700; font-size:.68cqw; line-height:1.9; color:var(--white); text-decoration:none;
}
#top .hero-bar__socials a:hover{color:var(--volt)}

/* arrows generic */
#top .arr-long{display:block}
#top .arr-diag{display:block}

/* ---------- mobile stack ---------- */
@media (max-width:999px){
  #top.comp--hero{aspect-ratio:auto; display:flex; flex-direction:column; padding:6vw 5vw 8vw}
  #top .g{position:static; width:auto; height:auto; left:auto; top:auto}
  #top .hero-crop{max-width:100%; height:auto; width:auto; margin:3vw 0}
  #top .hero-logo,#top .hero-nav,#top .hero-offerte,#top .hero-menu{width:auto}
  #top .hero-logo__l1{font-size:8vw}
  #top .hero-logo__l2{font-size:2.8vw}
  #top .hero-nav{gap:4vw; flex-wrap:wrap}
  #top .hero-nav a{font-size:3.2vw}
  /* position:relative because .g drops to static here — without it the pinned
     arrow escapes to the nearest positioned ancestor. Wider inset so the
     centred label can't run under it at the bigger mobile type size. */
  #top .hero-offerte{position:relative; font-size:3.4vw; padding:3vw 9vw; gap:2vw}
  #top .hero-offerte .arr-diag{right:4vw; width:4.2vw; height:4.2vw}
  #top .hero-menu{width:100%; padding:4vw; display:flex; align-items:center; justify-content:space-between; margin-top:3vw}
  #top .hero-menu__label,#top .hero-menu__plus{position:static}
  #top .hero-menu__label{font-size:3.4vw}
  #top .hero-menu__plus{font-size:7vw}
  #top .hero-stamp{width:22vw; height:auto; margin:4vw 0}
  #top .hero-crop.hl1,#top .hero-crop.hl2,#top .hero-crop.hl3{width:100%; max-width:100%}
  #top .hero-crop.hl1{clip-path:inset(0 0 0 12%)}
  #top .hero-lightning,#top .hero-ink{display:none}
  #top .hero-subline{font-size:3.4vw; width:auto}
  #top .hero-swash{width:20vw}
  #top .hero-collage{width:100%; height:auto; margin:5vw 0; aspect-ratio:1290/942; object-fit:cover; object-position:top}
  #top .hero-waarwij,#top .hero-recentwerk,#top .hero-hulp{width:100%; margin:3vw 0; padding:6vw}
  #top .hero-waarwij__head h2{font-size:5.5vw}
  #top .hero-waarwij .arr-pink{width:14vw}
  #top .hero-waarwij__list li{font-size:3.4vw; padding:2.5vw 0}
  #top .hero-waarwij__cta{font-size:3.4vw}
  #top .hero-waarwij__cta .arr-pink{width:10vw}
  #top .hero-recentwerk__head h2{font-size:5vw}
  #top .hero-recentwerk__nav button{font-size:5vw}
  #top .hero-recentwerk__spacer{display:none}
  #top .hero-recentwerk__title{font-size:4vw}
  #top .hero-recentwerk__sub{font-size:3vw}
  #top .hero-recentwerk__plus{position:static; width:12vw; height:12vw; font-size:6vw; margin-top:-8vw; margin-left:auto; margin-right:4vw}
  #top .hero-hulp__kicker{font-size:3.4vw}
  #top .hero-hulp__title{font-size:7vw}
  #top .hero-hulp__tel{font-size:5.5vw}
  #top .hero-hulp__sub{font-size:3vw}
  #top .hero-hulp .arr-volt{position:static; width:24vw; margin-top:2vw}
  #top .hero-bar{width:100%; flex-direction:column; align-items:flex-start; gap:4vw; padding:6vw; margin-top:3vw}
  #top .hero-bar__msg{font-size:5vw; padding-left:0}
  #top .hero-bar__form{display:flex; width:100%; gap:3vw}
  #top .hero-bar__input{flex:1; font-size:3.4vw; padding:3vw}
  #top .hero-bar__submit{font-size:3.4vw; padding:3vw 5vw}
  #top .hero-bar__socials{border-left:0; height:auto; flex-direction:row; gap:4vw; padding-left:0}
  #top .hero-bar__socials a{font-size:3vw; line-height:1.2}
}

/* ============================================================ */
/* SECTION: marquee-diensten */
/* ============================================================ */
/* -- S2 marquee -- */
.marquee {
  background: var(--ink);
  padding: .9em 0;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: .6em;
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: .6em;
  font-family: var(--font-display);
  color: var(--volt);
  font-size: clamp(18px, 2.2vw, 44px);
  letter-spacing: .02em;
}
.marquee .bolt {
  width: .7em;
  height: .7em;
  fill: var(--shock);
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* -- S3 diensten (poster wall / evidence board archetype) -- */
#diensten {
  position: relative;
  z-index: 2;
  background: var(--paper) url("assets/paper-tile.webp") repeat;
  padding-block: clamp(90px, 11vw, 170px) clamp(26px, 2.6vw, 44px);
}
#diensten .diensten__inner {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
  position: relative;
}
#diensten .diensten__header {
  position: relative;
  max-width: 1600px;
}
#diensten .diensten__kicker {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--shock);
  font-size: clamp(13px, 1vw, 19px);
  letter-spacing: .12em;
  margin: 0 0 .6em;
}
#diensten .diensten__kicker-swash {
  position: absolute;
  left: 100%;
  top: 50%;
  width: clamp(90px, 8vw, 150px);
  height: auto;
  margin-left: clamp(10px, 1vw, 18px);
  transform: translateY(-50%) rotate(-2deg);
  clip-path: inset(0 0 0 68%);
  mix-blend-mode: multiply;
  filter: brightness(1.35);
  pointer-events: none;
}
#diensten .diensten__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(40px, 6.4vw, 118px);
  line-height: .92;
  margin: 0;
  transform: rotate(-2deg);
  transform-origin: left top;
}
#diensten .diensten__sub {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(14px, 1.1vw, 20px);
  max-width: 52ch;
  line-height: 1.5;
  margin: 1.1em 0 0;
  transform: rotate(-1deg);
  transform-origin: left top;
}
#diensten .diensten__lightning {
  position: absolute;
  top: calc(-1 * clamp(90px, 11vw, 170px) - clamp(20px, 2vw, 40px));
  right: clamp(2%, 7vw, 11%);
  width: clamp(90px, 8.6vw, 164px);
  height: auto;
  transform: rotate(10deg);
  mix-blend-mode: multiply;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 767px) {
  #diensten .diensten__lightning { display: none; }
}

/* ---- DEVICE 1: de groepenkast -------------------------------------------

   Reads as a piece of hardware bolted onto the page, not as a widget: a dark
   steel plate with a DIN rail, and the breakers sitting on it. The lever is the
   only part that moves, because that is the only part that moves on a real one.

   The lit/dark state of the six wall cards is driven from here through
   [data-powered] on .diensten__wall, so the wall is a readout of the box. */
#diensten .kast {
  position: relative;
  z-index: 3;
  margin: clamp(28px, 4vw, 56px) 0 clamp(24px, 3.5vw, 44px);
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--ink);
  /* two hard shadows, no blur: this is printed hardware, not a soft card */
  box-shadow: 8px 8px 0 var(--volt), 16px 16px 0 rgba(15, 16, 16, .18);
  padding: clamp(16px, 2.2vw, 26px);
}

#diensten .kast__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 22px;
  border-bottom: 1px solid rgba(244, 243, 241, .18);
  padding-bottom: clamp(12px, 1.6vw, 18px);
}

#diensten .kast__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: .01em;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
}
#diensten .kast__hint {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(9.5px, .82vw, 11.5px);
  letter-spacing: .12em;
  color: var(--grey-t);
}

#diensten .kast__meter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

#diensten .kast__bar {
  width: clamp(90px, 12vw, 190px);
  height: 10px;
  background: rgba(244, 243, 241, .14);
  overflow: hidden;
  flex: 0 0 auto;
}
#diensten .kast__fill {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--volt);
  transform-origin: left center;
  transition: width .32s cubic-bezier(.22, .61, .36, 1), background-color .18s linear;
}
/* over the limit the bar goes pink before the main breaker actually drops */
#diensten .kast.is-over .kast__fill { background: var(--shock); }

#diensten .kast__read {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .06em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
#diensten .kast__amp {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1;
  color: var(--volt);
  /* tabular so the number does not shuffle the row as it counts */
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
  text-align: right;
}
#diensten .kast__unit { font-size: clamp(11px, 1vw, 14px); color: var(--volt); }
#diensten .kast__max { font-size: clamp(9.5px, .82vw, 11.5px); color: var(--grey-t); }
#diensten .kast__state {
  font-size: clamp(9.5px, .82vw, 11.5px);
  letter-spacing: .12em;
  padding: 3px 8px;
  background: var(--volt);
  color: var(--ink);
}
#diensten .kast.is-over .kast__amp,
#diensten .kast.is-over .kast__unit { color: var(--shock); }
#diensten .kast.is-over .kast__state { background: var(--shock); color: var(--white); }

/* tripped: the whole plate reads dead for a moment */
#diensten .kast.is-tripped { box-shadow: 8px 8px 0 var(--shock), 16px 16px 0 rgba(15, 16, 16, .18); }
#diensten .kast.is-tripped .kast__state { background: var(--shock); color: var(--white); }

#diensten .kast__rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(14px, 1.8vw, 22px);
  /* the DIN rail the breakers clip onto */
  padding-top: clamp(12px, 1.5vw, 18px);
  background:
    linear-gradient(var(--greyb), var(--greyb)) left top / 100% 4px no-repeat;
}

#diensten .brk {
  -webkit-appearance: none; appearance: none;
  background: var(--greyb);
  border: 0;
  border-top: 3px solid var(--grey-t);
  padding: clamp(9px, 1.1vw, 14px) clamp(7px, .8vw, 11px) clamp(10px, 1.2vw, 15px);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 6px;
  align-content: start;
  color: var(--white);
  transition: background-color .18s linear, border-color .18s linear;
}
#diensten .brk:hover { background: #45494a; }
#diensten .brk:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
#diensten .brk.is-on { background: #2b2e2e; border-top-color: var(--volt); }
#diensten .brk--gen.is-on { border-top-color: var(--shock); }

/* the lever: the one moving part. Down is off, up is on. */
#diensten .brk__lever {
  display: block;
  width: 100%;
  height: clamp(20px, 2.4vw, 30px);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
#diensten .brk__lever::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 42%;
  bottom: 6%;
  background: var(--grey-t);
  transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), background-color .16s linear;
}
#diensten .brk.is-on .brk__lever::after {
  transform: translateY(-118%);
  background: var(--volt);
}
#diensten .brk--gen.is-on .brk__lever::after { background: var(--shock); }

/* --grey-lift, not --grey-t: the breaker body is #3a3d3e when the group is off,
   and --grey-t on that is 3.28:1 at 11px. The number and the ampere reading are
   the two things the reader compares while operating the box, so they cannot be
   the least legible text on the page. #b9bcbd measures 5.74:1 on the off body
   and better on the on body, and still reads as unlit next to the volt-yellow
   an armed breaker switches to. */
#diensten .brk__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .1em;
  color: var(--grey-lift);
}
#diensten .brk.is-on .brk__num { color: var(--volt); }
#diensten .brk--gen.is-on .brk__num { color: var(--shock); }

#diensten .brk__name {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.02vw, 14px);
  line-height: 1.05;
  letter-spacing: .01em;
}
#diensten .brk__amp {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .06em;
  color: var(--grey-lift);
  font-variant-numeric: tabular-nums;
}

/* The wall as readout: a card whose group is off goes dark and steps back.
   Not display:none, because the wall's composition is the point; an unpowered
   card is still there, just not live. */
#diensten .d-card[data-live] { transition: filter .3s ease, opacity .3s ease; }
#diensten .d-card[data-live="0"] { filter: grayscale(1) brightness(.72); opacity: .55; }
#diensten .d-card[data-live="1"] { filter: none; opacity: 1; }

@media (max-width: 900px) {
  #diensten .kast__rail { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  #diensten .kast__rail { grid-template-columns: repeat(2, 1fr); }
  #diensten .kast { box-shadow: 5px 5px 0 var(--volt); }
}

@media (prefers-reduced-motion: reduce) {
  #diensten .kast__fill,
  #diensten .brk,
  #diensten .brk__lever::after,
  #diensten .d-card[data-live] { transition: none; }
}

/* ---- the poster wall ---- */
#diensten .diensten__wall {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(46px, 4.6vw, 84px);
  column-gap: clamp(10px, 1.6vw, 22px);
  row-gap: 0;
  margin-top: clamp(-28px, -2.6vw, -10px);
}

#diensten .d-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 30px);
  box-shadow: 0 10px 26px rgb(0 0 0 / .18);
}
#diensten .d-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#diensten .d-card__num {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 112px);
  line-height: .8;
}
#diensten .d-card__bolt {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  margin-top: .25em;
}
#diensten .d-card__title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.35vw, 24px);
  line-height: 1.05;
  margin: auto 0 0;
  text-transform: uppercase;
}
#diensten .d-card__body {
  font-family: var(--font-mono);
  font-size: clamp(12px, .9vw, 15.5px);
  line-height: 1.45;
  margin: .55em 0 0;
}

#diensten .d-card--ink { background: var(--ink); }
#diensten .d-card--ink .d-card__num { color: var(--volt); }
#diensten .d-card--ink .d-card__title { color: var(--white); }
#diensten .d-card--ink .d-card__body { color: var(--grey-t); }
#diensten .d-card--ink .d-card__bolt { fill: var(--shock); }

#diensten .d-card--volt { background: var(--volt); }
#diensten .d-card--volt .d-card__num,
#diensten .d-card--volt .d-card__title,
#diensten .d-card--volt .d-card__body { color: var(--ink); }
#diensten .d-card--volt .d-card__bolt { fill: var(--ink); }

#diensten .d-card--shock { background: var(--shock); }
#diensten .d-card--shock .d-card__num { color: var(--volt); }
#diensten .d-card--shock .d-card__title,
#diensten .d-card--shock .d-card__body { color: var(--white); }
#diensten .d-card--shock .d-card__bolt { fill: var(--volt); }

/* grid placement + rotation + overlap per card (desktop poster wall) -- tight, no dead zones */
@media (min-width: 1024px) {
  #diensten .d-card--01 { grid-column: 1 / 6; grid-row: 1 / 5; z-index: 5; transform: rotate(-.8deg); }
  #diensten .d-card--02 { grid-column: 9 / 13; grid-row: 1 / 5; z-index: 2; margin-top: clamp(20px, 2vw, 32px); transform: rotate(1.4deg); }
  #diensten .d-card--03 { grid-column: 1 / 6; grid-row: 5 / 9; z-index: 3; margin-top: -10px; transform: rotate(-2deg); }
  #diensten .d-card--04 { grid-column: 9 / 13; grid-row: 5 / 10; z-index: 4; margin-top: -8px; transform: rotate(.8deg); }
  #diensten .d-card--05 { grid-column: 1 / 6; grid-row: 9 / 13; z-index: 2; margin-top: clamp(24px, 2.4vw, 36px); transform: rotate(-1.6deg); }
  #diensten .d-card--06 { grid-column: 6 / 13; grid-row: 10 / 14; z-index: 3; margin-top: 6px; transform: rotate(.9deg); }
}

#diensten .d-photo {
  position: relative;
  z-index: 6;
  background: var(--paper);
  padding: clamp(8px, .9vw, 14px) clamp(8px, .9vw, 14px) clamp(30px, 3vw, 48px);
  box-shadow: 0 16px 34px rgb(0 0 0 / .32);
}
#diensten .d-photo__frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink);
}
#diensten .d-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
#diensten .d-photo figcaption {
  position: absolute;
  left: clamp(8px, .9vw, 14px);
  bottom: clamp(8px, .9vw, 12px);
  max-width: calc(100% - 2 * clamp(8px, .9vw, 14px));
  width: max-content;
  background: var(--paper);
  padding: .28em .55em;
  box-shadow: 0 2px 6px rgb(0 0 0 / .25);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(10.5px, .78vw, 13.5px);
  letter-spacing: .05em;
  color: var(--ink);
  text-transform: uppercase;
}
#diensten .d-photo::before,
#diensten .d-photo::after {
  content: "";
  position: absolute;
  top: clamp(-10px, -1vw, -16px);
  width: clamp(46px, 4.6vw, 72px);
  height: clamp(18px, 1.8vw, 26px);
  background: rgb(219 218 217 / .85);
  box-shadow: 0 2px 4px rgb(0 0 0 / .15);
}
#diensten .d-photo::before { left: clamp(10px, 2vw, 22px); transform: rotate(-4deg); }
#diensten .d-photo::after { right: clamp(10px, 2vw, 22px); transform: rotate(3deg); }

@media (min-width: 1024px) {
  /* frame is a grid item stretched to its row span -- fill that height exactly
     instead of aspect-ratio (which can overflow the stretched box and cover
     whatever sits below it) */
  #diensten .d-photo { display: flex; flex-direction: column; }
  #diensten .d-photo__frame { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }

  #diensten .d-photo--werkbank {
    grid-column: 6 / 9; grid-row: 1 / 6; z-index: 6;
    margin-left: -12px;
    transform: rotate(2.4deg);
  }
  #diensten .d-photo--laadpaal {
    grid-column: 6 / 9; grid-row: 6 / 10; z-index: 6;
    margin-left: -12px;
    margin-top: clamp(24px, 2.2vw, 32px);
    transform: rotate(-2deg);
  }
}

#diensten .d-bolt-deco {
  position: relative;
  z-index: 7;
  width: clamp(28px, 2.4vw, 44px);
  height: auto;
  fill: var(--shock);
  align-self: center;
  justify-self: center;
}
@media (min-width: 1024px) {
  #diensten .d-bolt-deco { grid-column: 7 / 8; grid-row: 2 / 3; }
}
@media (max-width: 1023px) {
  #diensten .d-bolt-deco { display: none; }
}

/* mobile: stacked collage, keep rotations/overlaps but smaller, no overflow */
@media (max-width: 1023px) {
  #diensten .diensten__wall {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 4.4vw, 30px);
    margin-top: clamp(24px, 5vw, 40px);
  }
  #diensten .d-card,
  #diensten .d-photo {
    width: 100%;
    margin: 0 !important;
  }
  #diensten .d-card--01 { transform: rotate(-1deg); }
  #diensten .d-card--02 { transform: rotate(1deg); }
  #diensten .d-card--03 { transform: rotate(-1.4deg); margin-top: clamp(-14px, -3vw, -8px) !important; }
  #diensten .d-card--04 { transform: rotate(.6deg); }
  #diensten .d-card--05 { transform: rotate(-.8deg); }
  #diensten .d-card--06 { transform: rotate(.9deg); }
  #diensten .d-photo--werkbank { max-width: 72%; margin-inline: auto !important; transform: rotate(2.5deg) !important; }
  #diensten .d-photo--laadpaal { max-width: 60%; margin-inline: auto !important; transform: rotate(-2deg) !important; }
}

#diensten .diensten__cta {
  position: relative;
  z-index: 8;
  margin-top: clamp(56px, 6vw, 96px);
  margin-bottom: clamp(-150px, -12vw, -80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5em;
}
#diensten .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--volt);
  padding: 1em 1.9em;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 28px rgb(0 0 0 / .25);
  transition: background .2s ease, color .2s ease;
}
#diensten .btn-cta:hover {
  background: var(--ink);
  color: var(--volt);
}
#diensten .diensten__phone {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0;
}
#diensten .diensten__phone a {
  color: var(--ink);
  text-decoration: underline;
}

/* ============================================================ */
/* SECTION: projecten-overons */
/* ============================================================ */
/* ===== #projecten (evidence board archetype) ===== */
#projecten{
  background:var(--paper) url("assets/paper-tile.webp") repeat;
  color:var(--ink);
  padding-block:clamp(80px,10vw,160px) clamp(110px,11vw,180px);
  position:relative;
  z-index:1;
  isolation:isolate;
}
#projecten .wrap{
  max-width:1600px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,72px);
  position:relative;
}
#projecten .proj-header{margin-bottom:clamp(32px,5vw,72px);position:relative;}
#projecten .proj-kicker{
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--shock);font-size:clamp(12px,1vw,15px);
  margin:0 0 .6em;
}
#projecten .proj-title{
  font-family:var(--font-display);text-transform:uppercase;line-height:.9;
  font-size:clamp(42px,6.2vw,116px);margin:0;color:var(--ink);
  position:relative;z-index:2;
  transform:rotate(-1.4deg);
  transform-origin:left top;
}

/* ---- evidence board ---- */
#projecten .proj-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(10px,1.6vw,22px);
  margin-block:clamp(24px,3vw,44px) clamp(48px,5vw,88px);
}
#projecten .proj-item{ position:relative; }
#projecten .proj-bignum{
  position:absolute;
  font-family:var(--font-display);
  color:var(--ink);
  opacity:.1;
  line-height:.78;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
#projecten .proj-media{ position:relative; }
#projecten .proj-frame{
  position:relative;
  overflow:hidden;
  background:var(--ink);
}
#projecten .proj-frame img,
#projecten .proj-frame video{ display:block;width:100%;height:100%;object-fit:cover; }
#projecten .proj-media--mono .proj-frame img{ filter:grayscale(1) contrast(1.08); }

#projecten .proj-chip{
  position:absolute;
  z-index:6;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:0 10px 22px rgb(0 0 0 / .22);
  padding:.85em 1.1em;
  max-width:min(78%,320px);
}
#projecten .proj-chip .bolt{width:16px;height:16px;fill:var(--shock);display:block;margin-bottom:.5em;}
#projecten .proj-index{
  display:block;font-family:var(--font-mono);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(11px,.85vw,13px);color:var(--grey-ink);margin:0 0 .35em;
}
#projecten .proj-name{
  font-family:var(--font-display);text-transform:uppercase;line-height:.95;
  font-size:clamp(18px,1.7vw,30px);margin:0 0 .4em;color:var(--ink);
}
#projecten .proj-line{
  font-family:var(--font-mono);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:clamp(10.5px,.82vw,13px);
  color:var(--greyb);margin:0;
}

@media(min-width:900px){
  #projecten .proj-item--01{ grid-column:1 / 8; grid-row:1; }
  #projecten .proj-bignum--01{
    top:clamp(-34px,-3.2vw,-12px); left:clamp(-12px,-1vw,4px);
    font-size:clamp(120px,13vw,220px);
  }
  #projecten .proj-media--01 .proj-frame{
    aspect-ratio:671/246; transform:rotate(-1deg);
    box-shadow:0 18px 40px rgb(0 0 0 / .28);
  }
  /* The chip sits INSIDE the photo, not hanging off its bottom edge. It used to
     hang at bottom:-26px, where .proj-item--03 (pulled up -24vw and carrying
     z-index 4) painted over it: 14 of 35 sample points on the project name and
     25 of 35 on the meta line. Raising the chip's z-index cannot fix that,
     because GSAP puts a transform on .proj-item--01 during the reveal and a
     transformed ancestor is a stacking context its children cannot escape. So
     the chip moves instead of the layers, and the collage is untouched. */
  #projecten .proj-chip--01{
    right:clamp(96px,9vw,180px); bottom:clamp(46px,4.4vw,80px);
    transform:rotate(1.4deg);
  }

  #projecten .proj-item--02{
    grid-column:7 / 12; grid-row:1;
    margin-top:clamp(22px,2.6vw,40px);
    z-index:3;
  }
  #projecten .proj-bignum--02{
    top:clamp(-26px,-2.4vw,-8px); right:clamp(-4px,0vw,6px);
    font-size:clamp(90px,9.4vw,160px);
  }
  #projecten .proj-media--02 .proj-frame{
    aspect-ratio:1; transform:rotate(2deg);
    box-shadow:0 18px 40px rgb(0 0 0 / .3);
    border:6px solid var(--paper);
  }
  #projecten .proj-chip--02{
    left:clamp(-18px,-1.6vw,2px); top:clamp(-18px,-1.6vw,-4px);
    transform:rotate(-2deg);
  }

  #projecten .proj-item--03{
    grid-column:3 / 9; grid-row:2;
    margin-top:clamp(-360px,-24vw,-230px);
    z-index:4;
  }
  #projecten .proj-bignum--03{
    bottom:clamp(-22px,-2vw,-6px); left:clamp(-16px,-1.4vw,-2px);
    font-size:clamp(70px,7vw,120px);
  }
  #projecten .proj-media--03{ max-width:62%; margin-left:auto; }
  #projecten .proj-media--03 .proj-frame{
    aspect-ratio:1; transform:rotate(2.4deg);
    box-shadow:0 14px 30px rgb(0 0 0 / .3);
  }
  #projecten .proj-chip--03{
    left:clamp(-16px,-1.4vw,0px); bottom:clamp(-20px,-1.8vw,-6px);
    transform:rotate(-1.6deg);
  }
}

@media(max-width:899px){
  #projecten .proj-board{
    display:flex;flex-direction:column;gap:clamp(56px,11vw,84px);
  }
  #projecten .proj-item{ width:100%; }
  #projecten .proj-bignum{ display:none; }
  #projecten .proj-media--01 .proj-frame{ aspect-ratio:671/246; transform:rotate(-1deg); }
  #projecten .proj-media--02{ max-width:70%; }
  #projecten .proj-media--02 .proj-frame{ aspect-ratio:1; transform:rotate(2deg); border:5px solid var(--paper); }
  #projecten .proj-media--03{ max-width:60%; margin-left:auto; }
  #projecten .proj-media--03 .proj-frame{ aspect-ratio:1; transform:rotate(2deg); }
  #projecten .proj-chip{ position:relative; margin-top:-2em; margin-left:1em; transform:none !important; max-width:80%; }
}

#projecten .proj-footnote{
  text-align:left;font-family:var(--font-mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(13px,1vw,16px);margin-top:clamp(30px,4vw,56px);
  color:var(--ink);
  transform:rotate(-.6deg);
}
#projecten .proj-footnote a{color:var(--shock);text-decoration:underline;text-underline-offset:3px;}

#projecten .proj-barcode{
  position:absolute;
  right:clamp(6px,2vw,30px);
  bottom:clamp(-64px,-5.6vw,-24px);
  width:clamp(140px,13vw,250px);
  height:auto;
  mix-blend-mode:multiply;
  pointer-events:none;
  transform:rotate(-4deg);
  z-index:5;
}
#projecten .proj-stamp{
  position:absolute;
  left:clamp(20px,6vw,110px);
  bottom:clamp(16%,20vw,26%);
  width:clamp(70px,9.5vw,150px);
  height:auto;
  border-radius:50%;
  overflow:hidden;
  z-index:3;
  animation:proj-stamp-spin 24s linear infinite;
}
@media(min-width:900px){
  #projecten .proj-stamp{ left:clamp(40px,7vw,130px); bottom:clamp(18%,22vw,28%); width:clamp(110px,10.5vw,170px); }
}
@keyframes proj-stamp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  #projecten .proj-stamp{ animation-play-state:paused; }
}
@media (max-width:767px){
  #projecten .proj-stamp{ display:none; }
}

/* ===== #overons ===== */
#overons{
  background:var(--ink);
  color:var(--white);
  padding-block:clamp(80px,10vw,170px);
  position:relative;
  overflow:hidden;
}
#overons .wrap{
  max-width:1600px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,72px);
}

#overons .overons-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(28px,4vw,72px);
  align-items:center;
}
@media(min-width:1000px){
  #overons .overons-grid{grid-template-columns:55fr 45fr;}
}

#overons .overons-kicker{
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--volt);font-size:clamp(12px,1vw,15px);
  margin:0 0 1em;
}
#overons .manifesto{
  font-family:var(--font-display);text-transform:uppercase;line-height:.98;
  font-size:clamp(38px,4.8vw,92px);color:var(--white);margin:0 0 .7em;
}
#overons .manifesto .wrd{display:inline-block;}
#overons .manifesto .w-volt{color:var(--volt);}
#overons .manifesto .w-shock{color:var(--shock);}

#overons .overons-body{
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--grey-t);
  font-size:clamp(14px,1.05vw,19px);line-height:1.7;
  max-width:38ch;margin:0;
}

#overons .overons-media{position:relative;}
#overons .v2-wrap{
  position:relative;aspect-ratio:1;border:3px solid var(--white);
  overflow:hidden;background:#000;
}
#overons .v2-wrap video{width:100%;height:100%;object-fit:cover;display:block;}

#overons .overons-swash{
  position:absolute;top:0;right:0;
  width:22%;height:auto;
  transform:translate(18%,-18%) rotate(-8deg);
  border:2px solid var(--white);
  mix-blend-mode:normal;
  z-index:2;
  pointer-events:none;
}

#overons .overons-stats{
  list-style:none;margin:clamp(40px,4vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,32px);
}
@media(min-width:700px){
  #overons .overons-stats{grid-template-columns:repeat(4,1fr);}
}
#overons .stat{
  display:flex;align-items:center;gap:.5em;
  border-top:1px solid var(--greyb);padding-top:1em;
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(13px,1vw,18px);color:var(--white);
  margin:0;
}
#overons .stat .bolt{width:14px;height:14px;fill:var(--volt);flex-shrink:0;}

/* ============================================================ */
/* SECTION: contact-footer */
/* ============================================================ */
/* ---------- #contact ---------- */
#contact {
  background: var(--shock);
  padding-block: clamp(80px, 10vw, 160px);
  overflow: hidden;
}

#contact .contact-inner {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 1000px) {
  #contact .contact-inner {
    grid-template-columns: 60% 40%;
    align-items: center;
  }
}

#contact .kicker {
  margin: 0 0 1em;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--volt);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(19px, 1.3vw, 21px);
}

#contact h2 {
  margin: 0 0 0.25em;
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(38px, 5vw, 96px);
  line-height: 0.95;
  text-transform: uppercase;
}

#contact .phone {
  display: block;
  margin: 0.2em 0 0.6em;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(34px, 6vw, 116px);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  word-break: break-word;
}

#contact .phone:hover {
  color: var(--volt);
}

#contact .microcopy {
  margin: 0 0 1.6em;
  max-width: 44ch;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
  font-size: clamp(19px, 1.3vw, 21px);
}

#contact .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2em;
}

/* Everything set in mono directly on the pink runs at 19px or larger, not for
   emphasis but because pink is a mid-luminance ground: white on --shock is
   4.12:1 and volt on --shock is 3.12:1, and neither clears the 4.5 AA floor for
   normal text at any weight. Bold mono at 18.66px and up counts as large text,
   where the floor drops to 3.0 and all of it passes. Darkening the pink was the
   other route and it is not available: --shock is sampled from the hero. */
#contact .btn-volt,
#contact .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.95em 1.7em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(19px, 1.3vw, 21px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#contact .btn-volt {
  background: var(--volt);
  color: var(--ink);
  border-color: var(--volt);
}

#contact .btn-volt:hover {
  background: var(--ink);
  color: var(--volt);
}

#contact .btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

#contact .btn-ghost:hover {
  background: var(--white);
  color: var(--shock);
}

#contact .contact-media {
  display: flex;
  justify-content: center;
}

#contact .polaroid {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0;
  transform: rotate(-4deg);
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.25);
}

#contact .polaroid img:not(.stamp) {
  display: block;
  width: 100%;
  height: auto;
}

#contact .polaroid .stamp {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 28%;
  height: auto;
  aspect-ratio: 174 / 177;
  border-radius: 50%;
  overflow: hidden;
  animation: contact-stamp-spin 24s linear infinite;
}

@keyframes contact-stamp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact .polaroid .stamp {
    animation-play-state: paused;
  }
}

#contact figcaption {
  margin-top: 0.8em;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(19px, 1.2vw, 20px);
}

/* ---- DEVICE 2: de tariefstrook -------------------------------------------

   Black plate on the pink section, same hardware language as the groepenkast:
   hard rectangles, two offset shadows with no blur, nothing rounded. It reads
   as a printed urenstaat stapled to the page rather than as a slider.

   The three bands are the three palette colours doing their job: volt = dag
   (cheapest, the brand colour, the hours you want), white = avond, shock = the
   night. Nothing is grey, so the strip is legible as a colour bar from across
   the room before you read a single number. */
#contact .strook-wrap {
  max-width: 1600px;
  margin: clamp(48px, 6vw, 90px) auto 0;
  padding-inline: clamp(20px, 4vw, 72px);
}

/* The plate is a real element carrying a real background, not a ::before.
   A pseudo-element would paint the same pixels, but every contrast reader
   walks ancestor backgrounds and would score this white-on-black type as
   white-on-pink at 1:1. Paint what you want measured. */
#contact .strook {
  position: relative;
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--volt), 16px 16px 0 rgba(15, 16, 16, .18);
  padding: clamp(16px, 2.2vw, 26px);
}

#contact .strook__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#contact .strook__label {
  margin: 0;
  font-family: var(--font-display);
  color: var(--shock);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(20px, 2.4vw, 38px);
}

#contact .strook__hint {
  display: block;
  margin-top: 0.7em;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--grey-t);
  letter-spacing: 0.08em;
  font-size: clamp(9.5px, .82vw, 11.5px);
}

/* the weekend switch: same lever grammar as a breaker, laid flat */
#contact .dagbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 14px;
  background: transparent;
  border: 2px solid var(--greyb);
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(10px, .85vw, 12.5px);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}

#contact .dagbtn__lever {
  width: 26px;
  height: 12px;
  background: var(--greyb);
  position: relative;
}

#contact .dagbtn__lever::after {
  content: '';
  position: absolute;
  inset: 0 50% 0 0;
  background: var(--white);
  transition: inset .18s cubic-bezier(.2, .7, .3, 1);
}

#contact .dagbtn[aria-checked="true"] { border-color: var(--shock); color: var(--shock); }
#contact .dagbtn[aria-checked="true"] .dagbtn__lever { background: var(--shock); }
#contact .dagbtn[aria-checked="true"] .dagbtn__lever::after { inset: 0 0 0 50%; }
#contact .dagbtn:hover { border-color: var(--volt); color: var(--volt); }
#contact .dagbtn:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }

#contact .strook__bar {
  position: relative;
  display: flex;
  gap: 2px;
  margin-top: clamp(18px, 2.4vw, 30px);
  height: clamp(42px, 4.6vw, 66px);
  cursor: ew-resize;
  /* the drag is horizontal and owns the gesture; without this a touch drag
     scrolls the page instead of moving the hand */
  touch-action: none;
}

#contact .strook__bar:focus-visible { outline: 3px solid var(--volt); outline-offset: 5px; }

#contact .strook__cell {
  flex: 1 1 0;
  background: var(--greyb);
  transition: background .22s, transform .22s cubic-bezier(.2, .7, .3, 1);
  transform-origin: bottom;
}

#contact .strook__cell[data-band="dag"]   { background: var(--volt); }
#contact .strook__cell[data-band="avond"] { background: var(--white); }
#contact .strook__cell[data-band="nacht"] { background: var(--shock); }
#contact .strook__cell.is-here { transform: scaleY(1.14); }

/* the hand is a hard bracket around the standing hour, not a knob */
#contact .strook__hand {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: calc((100% - 46px) / 24 + 6px);
  border: 3px solid var(--ink);
  outline: 2px solid var(--white);
  pointer-events: none;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1);
}

#contact .strook__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--grey-t);
  letter-spacing: 0.08em;
  font-size: clamp(9.5px, .82vw, 11.5px);
}

#contact .strook__read {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: clamp(16px, 2vw, 24px) 0 0;
}

#contact .strook__uur {
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1;
}

#contact .strook__band {
  padding: 5px 9px;
  background: var(--volt);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(10px, .85vw, 12.5px);
}

#contact .strook[data-band="avond"] .strook__band { background: var(--white); }
#contact .strook[data-band="nacht"] .strook__band { background: var(--shock); color: var(--white); }

#contact .strook__tarief {
  font-family: var(--font-display);
  color: var(--volt);
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1;
}

#contact .strook[data-band="nacht"] .strook__tarief { color: var(--shock); }

#contact .strook__unit {
  margin-left: -10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--grey-t);
  letter-spacing: 0.08em;
  font-size: clamp(11px, 1vw, 14px);
}

#contact .strook__extra {
  flex: 1 1 260px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.06em;
  line-height: 1.5;
  font-size: clamp(10.5px, .88vw, 13px);
}

@media (max-width: 700px) {
  #contact .strook__bar { height: 54px; gap: 1px; }
  #contact .strook__hand { width: calc((100% - 23px) / 24 + 6px); }
  #contact .strook { box-shadow: 5px 5px 0 var(--volt); }
}

@media (prefers-reduced-motion: reduce) {
  #contact .strook__cell,
  #contact .strook__hand,
  #contact .dagbtn__lever::after { transition: none; }
}

/* ---------- #footer ---------- */
#footer {
  background: var(--ink);
  padding-top: clamp(60px, 7vw, 120px);
  padding-bottom: 0;
  overflow: hidden;
}

#footer .footer-inner {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
}

#footer .wordmark-row {
  width: 100%;
  overflow: hidden;
}

#footer .fit {
  display: inline-block;
  transform-origin: left center;
}

#footer .wordmark-inner {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: var(--font-display);
  color: var(--white);
  text-transform: uppercase;
  line-height: 0.92;
  font-size: 11vw;
}

#footer .wordmark-inner .bolt {
  width: 0.75em;
  height: 0.75em;
  margin: 0 0.02em;
  fill: var(--volt);
}

#footer .footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(40px, 4vw, 72px);
}

@media (min-width: 560px) {
  #footer .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  #footer .footer-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

#footer .footer-col h3 {
  margin: 0 0 1.2em;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--shock-t);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(12px, 0.85vw, 15px);
}

#footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-col li {
  font-family: var(--font-mono);
  color: var(--grey-t);
  text-transform: uppercase;
  line-height: 2;
  font-size: clamp(13px, 0.95vw, 17px);
}

#footer .footer-col a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

#footer .footer-col a:hover {
  color: var(--volt);
}

#footer .legal-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8em 1.6em;
  margin-top: clamp(40px, 4vw, 72px);
  padding: 1.4em 0;
  border-top: 1px solid var(--greyb);
}

#footer .legal-bar p {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--grey-t);
  text-transform: uppercase;
  font-size: clamp(11px, 0.8vw, 14px);
  display: flex;
  align-items: center;
  gap: 0.3em;
}

#footer .legal-bar .bolt {
  width: 0.9em;
  height: 0.9em;
  fill: var(--volt);
}
/* ============================================================ */
/* LOADER — "spanning opbouwen"                                 */
/* a meterkast powering up: the bolt fills volt-yellow, the     */
/* readout climbs to 230V, then a short-circuit flash and the   */
/* black sheet snaps apart along a lightning seam               */
/* ============================================================ */
html.ldr-lock { overflow: hidden; }

.ldr {
  --y: 0%;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: transparent;
}

/* the two halves ARE the black — the loader itself is transparent so the
   page is behind them the moment they part. Oversized so their straight
   outer edges (and the glow on those edges) sit off-screen. */
.ldr__half {
  position: absolute;
  top: -6vh; bottom: -6vh; left: -8vw; right: -8vw;
  background: #0f1010;
  will-change: transform;
  /* transform only — the clip-path below must land instantly, not tween */
  transition: transform .8s cubic-bezier(.76, 0, .24, 1);
}
.ldr__half::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* arc flash: live current sits behind the sheet, so the tear opens onto
   volt yellow before it opens onto the page. (drop-shadow on the halves
   was the obvious move and silently renders nothing once the layers are
   composited — this is both visible and cheaper.) */
.ldr__arc {
  position: absolute;
  inset: 0;
  background: var(--volt);
  opacity: 0;
}
.ldr.is-split .ldr__arc { animation: ldr-arc .6s .06s linear forwards; }
@keyframes ldr-arc { from { opacity: 1; } to { opacity: 0; } }

/* the seam only exists at the moment it tears — clipping the halves any
   earlier leaves a hairline of the page showing down the middle */
.ldr.is-split .ldr__half--l {
  clip-path: polygon(0 0, 52% 0, 46% 13%, 55% 27%, 44% 41%, 53% 55%, 42% 69%, 51% 83%, 45% 100%, 0 100%);
  transform: translateX(-104%);
}
.ldr.is-split .ldr__half--r {
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 45% 100%, 51% 83%, 42% 69%, 53% 55%, 44% 41%, 55% 27%, 46% 13%);
  transform: translateX(104%);
}

/* ---- readout ---- */
.ldr__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 3.4vw, 48px);
  color: var(--white);
  pointer-events: none;
}
.ldr.is-split .ldr__body { opacity: 0; }

.ldr__top, .ldr__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex: 0 0 auto; }
.ldr__top { align-items: center; }

.ldr__wm {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.5vw, 20px);
  letter-spacing: .01em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.ldr__wm svg { width: .78em; height: .78em; fill: var(--volt); margin: 0 .06em; }

.ldr__state {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(9px, 1.05vw, 13px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--volt);
  white-space: nowrap;
}

/* poster composition: one oversized bolt, readout laid over it — the page's
   own collage logic rather than two objects politely sharing a row */
.ldr__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.ldr__read {
  position: absolute;
  left: 0;
  bottom: 4%;
  z-index: 2;
}

.ldr__volt {
  display: block;
  font-family: var(--font-display);
  font-size: min(19vw, 24vh);
  line-height: .82;
  letter-spacing: -.02em;
  color: var(--white);
}
.ldr__volt b { display: inline-block; width: .62em; text-align: center; font-weight: inherit; }
.ldr__volt i { font-style: normal; color: var(--volt); }

.ldr__sub {
  display: block;
  margin-top: clamp(8px, 1.2vw, 16px);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-t);
}

.ldr__boltwrap {
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: min(44vw, 72vh);
  height: min(44vw, 72vh);
}
.ldr__bolt { position: absolute; inset: 0; width: 100%; height: 100%; }
.ldr__bolt--ghost path { fill: none; stroke: var(--volt); stroke-width: .45; opacity: .28; }
.ldr__bolt--fill { clip-path: inset(calc(100% - var(--y)) 0 0 0); }
.ldr__bolt--fill path { fill: var(--volt); }
.ldr__bolt--fill { filter: drop-shadow(0 0 34px rgba(208, 224, 20, .35)); }

/* ---- meterkast checks + voltage gauge ---- */
.ldr__foot { flex-direction: column; align-items: stretch; gap: clamp(10px, 1.6vw, 18px); }

.ldr__checks { display: flex; flex-wrap: wrap; gap: clamp(12px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.ldr__checks li {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(8px, .95vw, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5c5f60;
}
.ldr__checks li i { width: .55em; height: .55em; background: #3a3d3e; border-radius: 50%; }
.ldr__checks li.on { color: var(--white); }
.ldr__checks li.on i { background: var(--volt); box-shadow: 0 0 9px 1px rgba(208, 224, 20, .8); }

.ldr__gauge { position: relative; height: clamp(8px, 1.1vw, 13px); background: #232626; overflow: hidden; }
.ldr__gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--y); background: var(--volt); }
.ldr__gauge-ticks {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(219, 218, 217, .3) 0 1px, transparent 1px 5%);
}
.ldr__scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-weight: 700; font-size: clamp(8px, .9vw, 11px); letter-spacing: .14em; color: #5c5f60; }

/* ---- power-up complete: the panel clears, then the sheet tears ----
   No flash. The whole readout fades out as one block and the tear begins
   the frame that fade lands, so there is no dead black beat between them —
   and the volt arc behind the halves supplies the only burst of colour. */
.ldr__body { transition: opacity .2s linear; }
.ldr.is-cut .ldr__body { opacity: 0; }

@media (max-width: 720px) {
  .ldr__boltwrap { left: 54%; width: min(74vw, 48vh); height: min(74vw, 48vh); }
  .ldr__volt { font-size: 26vw; }
  .ldr__read { bottom: 2%; }
  .ldr__checks li:nth-child(3) { display: none; }
}

/* motion is the whole point here — with it suppressed the loader has no
   reason to exist, so it never shows and the page renders straight away */
@media (prefers-reduced-motion: reduce) {
  .ldr { display: none !important; }
}