/* ============================================================
   Micmaa's Klusbedrijf
   Systeem afgeleid van havenconstructions.com.au: een grotesk in
   een gewicht, drie procent marge, twaalf kolommen, geen kaarten,
   geen ronde hoeken, geen schaduwen. Kleur is die van Micmaa's:
   ink #303030, koperbruin #907060, taupe #C8B8A8, papier #F8F8F8.
   ============================================================ */

@font-face{
  font-family:'Geist';
  src:url('assets/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* kleur */
  --paper:#F8F8F8;
  --white:#FFFFFF;
  --grey:#F1EFEC;
  --ink:#303030;
  --ink-2:rgba(48,48,48,.72);
  --brand:#907060;          /* het logobruin, voor grote vlakken en display */
  --brand-deep:#7A5C48;     /* zelfde familie, diep genoeg voor witte tekst 6.1:1 */
  --tint:#C8B8A8;
  --line:rgba(48,48,48,.16);
  --line-inv:rgba(255,255,255,.28);

  /* raster */
  --pad:clamp(14px, 3.05vw, 44px);
  --gutter:clamp(14px, 2.2vw, 32px);
  --maxw:1920px;
  --nav-h:84px;

  /* type */
  --t-xs:13px;
  --t-s:clamp(14px, .3vw + 13px, 15px);
  --t-b:clamp(16px, .35vw + 14.6px, 18px);
  --t-l:clamp(19px, .9vw + 15px, 26px);
  --t-h:clamp(30px, 3.1vw + 10px, 60px);
  --t-q:clamp(24px, 2.4vw + 10px, 48px);

  /* ritme */
  --sec:clamp(72px, 9vw, 168px);

  /* de drie curves van de referentie, gemeten uit haar eigen custom properties.
     e-out is de lange uitloop, e-el de strakke wipe, e de zachte hover */
  --e-out:cubic-bezier(.19,1,.22,1);
  --e-el:cubic-bezier(.65,0,0,1);
  --e:cubic-bezier(.14,.9,.34,.94);
}

*,*::before,*::after{box-sizing:border-box}
/* display:flex of :grid verslaat de UA-regel voor [hidden], en dan staat er
   een knop op het scherm die er niet hoort te zijn */
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-b); line-height:1.478; font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure,blockquote,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
section[id],footer[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:14px 20px
}
.skip:focus{left:0}

/* de twee paden staan een keer in het document en worden met <use> opgehaald */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mk{width:100%;height:auto;display:block}

/* ---------------------------------------------- raster */
.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  width:100%; max-width:var(--maxw); margin-inline:auto;
}
.col-3{grid-column:span 12}
.col-4{grid-column:span 12}
.col-5{grid-column:span 12}
.col-6{grid-column:span 12}
.col-7{grid-column:span 12}

.sec{
  padding-inline:var(--pad); padding-block:var(--sec);
  max-width:var(--maxw); margin-inline:auto;
}
.rule{border:0;border-top:1px solid var(--line);margin:clamp(20px,2.4vw,38px) 0 clamp(24px,3vw,52px)}

/* ---------------------------------------------- type */
.h2{
  font-size:var(--t-h); line-height:1.02; letter-spacing:-.038em;
  font-weight:400; text-wrap:balance;
}
.h2--wide{max-width:18ch}
.lead{font-size:var(--t-l);line-height:1.42;letter-spacing:-.018em;max-width:46ch}
.lead + .lead{margin-top:1.1em}

/* het vierkantje uit de referentie, hier in het merkbruin */
.dot{
  position:relative; display:inline-block; text-indent:20px;
  font-size:var(--t-s); line-height:1.5;
}
.dot > .dot__sq{text-indent:0}
.dot__sq{
  position:absolute; left:1px; top:.72em; width:9px; height:9px;
  background:var(--brand); transform:translateY(-50%);
}
.dot--pad{margin-top:22px}

/* het woord-voor-woord masker. Het masker krijgt onderaan lucht, anders
   snijdt overflow:hidden de staarten van de g en de j af */
.w-mask{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.16em; margin-bottom:-.16em;
  text-indent:0;  /* een inline-block is een blokcontainer, dus hij erft de
                     inspringing van .dot en zet die voor elk woord opnieuw */
}
.w-word{display:inline-block;will-change:transform}

/* ---------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--pad); pointer-events:none;
}
.nav > *{pointer-events:auto}
.nav__mark{display:block;line-height:0}
.nav__logo{display:block;width:auto;height:clamp(26px,2.2vw,34px)}
.nav__logo--w{display:none}
.nav__cta{
  font-size:var(--t-s); position:relative; padding-block:6px;
}
.nav__cta span{position:relative}
.nav__cta span::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.nav__cta:hover span::after{transform:scaleX(1);transform-origin:left}

/* de voet draagt zijn eigen volledige navigatie, telefoonnummer en adres, dus
   de vaste balk trekt zich terug zodra het bruine veld binnenkomt. Omkeren was
   het alternatief en dat kan hier niet: de voet is lager dan het scherm, dus op
   de laagste scrollpositie staat de balk nog altijd op een strook papier en
   zou witte tekst op wit uitkomen */
.nav{transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease}
.nav--out{
  transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility 0s linear .5s;
}
.nav--out > *{pointer-events:none}
/* ---------------------------------------------- menu, de pil is het menu

   Geen schermvullende overlay. Het is één element in drie toestanden, zoals
   op de referentie: dicht een grijze balk van 320, bij hover verbreedt hij
   naar 420 en kleurt hij bruin, open blijft hij bruin en groeit hij naar
   beneden uit tot een paneel. Wat de toestand doet is de clip-path, niet de
   hoogte, dus er wordt niets herberekend en de rijen liggen al op hun plek. */
/* de pil hangt in het midden van de balk, niet in het midden van de ruimte
   tussen logo en knop: hij staat los van de flexverdeling */
/* alleen de knop en het geopende paneel vangen klikken. Het omhulsel is breed
   en het paneel is dicht 663px hoog maar geklipt; zonder dit lag er een
   onzichtbaar vlak over de Offerte-link en over de hero eronder */
.nav__menu{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  z-index:2; width:min(420px,46vw); height:var(--nav-h);
  pointer-events:none;
}
.nav__menu .pill__btn{pointer-events:auto}
.pill{
  position:absolute; top:calc(50% - 32px); left:50%;
  translate:-50% 0;
  width:100%; max-width:320px;
  background:var(--grey); color:var(--ink);
  clip-path:inset(12px 0 calc(100% - 52px) 0 round 8px);
  transition:
    clip-path 1s var(--e-out),
    max-width 1.4s var(--e-out),
    background-color 1s var(--e-out),
    color 1s var(--e-out);
}
.pill:hover,.pill.is-open{max-width:420px;background:var(--brand-deep);color:var(--white)}
.pill.is-open{clip-path:inset(12px 0 0 0 round 8px)}

.pill__btn{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; height:64px; padding:0 18px;
  font:inherit; font-size:var(--t-s); color:inherit;
  background:none; border:0; cursor:pointer; text-align:left;
}
.pill__b{display:flex;flex-direction:column;gap:7px;width:clamp(38px,4vw,60px)}
.pill__b i{
  display:block; height:1px; background:currentColor;
  transition:transform .8s var(--e-out);
}
/* de kruising van de referentie is bewust ondiep, twaalf graden, geen 45 */
.pill.is-open .pill__b i:first-child{transform:translateY(4px) rotate(12deg)}
.pill.is-open .pill__b i:last-child{transform:translateY(-4px) rotate(-12deg)}

/* dicht is het paneel wel aanwezig maar geklipt, dus het mag geen klikken
   opvangen boven de hero die eronder ligt */
.pill__panel{padding:6px 18px 20px;visibility:hidden;pointer-events:none}
.pill.is-open .pill__panel{visibility:visible;pointer-events:auto}
.mrow{list-style:none;margin:0;padding:0}
.mrow li{
  position:relative;
  transform:translate3d(0,30px,0); opacity:0;
  transition:transform .9s var(--e-out),opacity .5s ease;
}
/* de haarlijn veegt vanaf links binnen, per rij vier honderdste later */
.mrow li + li::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--white); opacity:.1;
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-el);
}
.pill.is-open .mrow li{transform:none;opacity:1}
.pill.is-open .mrow li + li::before{transform:scaleX(1)}
.mrow li:nth-child(2){transition-delay:.04s}
.mrow li:nth-child(3){transition-delay:.08s}
.mrow li:nth-child(4){transition-delay:.12s}
.mrow li:nth-child(5){transition-delay:.16s}
.mrow li:nth-child(6){transition-delay:.2s}
.mrow li:nth-child(2)::before{transition-delay:.04s}
.mrow li:nth-child(3)::before{transition-delay:.08s}
.mrow li:nth-child(4)::before{transition-delay:.12s}
.mrow li:nth-child(5)::before{transition-delay:.16s}
.mrow li:nth-child(6)::before{transition-delay:.2s}

.mlink{
  position:relative; display:block; padding-block:28px;
  font-size:var(--t-b); color:var(--white);
  transform:translate3d(0,50px,0);
  transition:transform 1s var(--e-out);
}
.pill.is-open .mlink{transform:none}
.mrow li:nth-child(2) .mlink{transition-delay:.04s}
.mrow li:nth-child(3) .mlink{transition-delay:.08s}
.mrow li:nth-child(4) .mlink{transition-delay:.12s}
.mrow li:nth-child(5) .mlink{transition-delay:.16s}
.mrow li:nth-child(6) .mlink{transition-delay:.2s}
/* hover: het woord schuift 22 naar rechts en op de vrijgekomen plek klapt
   een vierkantje van zeven open, van gekanteld en nul naar recht en vol */
.mlink__sq{
  position:absolute; left:0; top:calc(50% - 1px);
  width:7px; height:7px; background:var(--white);
  transform:translate3d(0,-50%,0) rotate(-45deg) scale(0);
  transition:transform .4s ease;
}
.mlink__t{display:block;transition:transform .4s ease}
.mlink:hover .mlink__sq,.mlink:focus-visible .mlink__sq{
  transform:translate3d(0,-50%,0) rotate(0) scale(1);
  transition:transform 1s var(--e);
}
.mlink:hover .mlink__t,.mlink:focus-visible .mlink__t{
  transform:translateX(22px); transition:transform 1s var(--e);
}

.mfoot{
  padding-top:20px; margin-top:4px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-s); color:rgba(255,255,255,.85);
  opacity:0; transform:translate3d(0,24px,0);
  transition:opacity .5s ease,transform .9s var(--e-out);
}
.pill.is-open .mfoot{opacity:1;transform:none;transition-delay:.24s}
.mfoot p{margin:0 0 4px}
.mfoot__a{color:inherit}
.mfoot__ar{display:inline-block;margin-left:6px;transition:transform .4s var(--e-out)}
.mfoot__a:hover .mfoot__ar{transform:translate(3px,-3px)}

/* ---------------------------------------------- intro */
.intro{
  position:fixed; inset:0; z-index:90; background:var(--brand);
  display:flex; align-items:flex-end; padding:0 var(--pad);
  clip-path:inset(0 0 0 0); pointer-events:none; color:var(--white);
}
/* het wordmark van de opening staat op de plek waar het wordmark van de hero
   eronder staat, anders springt het op het moment dat het veld wegveegt */
.intro__mark{width:100%;color:var(--white);padding-bottom:calc(2.1vw + 150px)}
.intro__band{display:block;overflow:hidden}
.intro__mark svg{width:100%;height:auto;display:block}
.intro__meta{
  position:absolute; left:var(--pad); right:var(--pad); top:calc(var(--nav-h)/2);
  transform:translateY(-50%);
  display:flex; justify-content:space-between;
  font-size:var(--t-s); text-transform:uppercase; letter-spacing:.06em;
}
.intro__meta span{display:inline-block}
/* de streep onderin loopt van links naar rechts vol terwijl het veld staat:
   een opening zonder tijdsaanduiding voelt als een pagina die vastloopt */
.intro__rail{
  position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) + 18px);
  height:1px; background:var(--line-inv);
}
.intro__rail span{
  display:block; height:100%; width:100%; background:var(--white);
  transform:scaleX(0); transform-origin:left;
}
.intro.is-gone{display:none}

/* ---------------------------------------------- hero */
.hero{padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto}
.hero__top{
  display:grid; place-items:end end;
  height:max(100svh - 19.2vw - 150px, 200px);
  /* de onderrand van de invulzin lag tegen de apostrof van het wordmark aan,
     dus er staat nu een regelhoogte lucht tussen */
  padding:var(--nav-h) 0 clamp(28px,3.4vw,64px);
}
.hero__sub{max-width:38ch;text-align:left}
.hero__mark{margin:0;color:var(--brand)}
.hero__svg{display:block}
.hero__svg svg{width:100%;height:auto;display:block}
.hero__meta{
  display:flex; justify-content:space-between;
  font-size:var(--t-s); text-transform:uppercase; letter-spacing:.06em;
  margin:14px 0 clamp(24px,3vw,48px);
}
/* de foto staat bij binnenkomst binnen de paginamarge en loopt pas vol als je
   scrollt. Gemeten op de referentie: 44px links, 59px rechts bij scrollY 0,
   nul zodra het kader de bovenrand haalt, met een uitloop die vooraan snel is */
.hero__media{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:min(100svh,900px); overflow:hidden;
  --hero-inset:var(--pad);
  clip-path:inset(0px var(--hero-inset) 0px var(--hero-inset));
}
/* de foto komt niet ingezoomd tot rust maar rijst in zijn eigen venster
   omhoog, een halve beeldhoogte, precies zoals de referentie het doet. Het
   venster klipt, dus er schuift niets over de sectie eronder */
.hero__mediaIn{width:100%;height:100%;will-change:transform}
.hero__mediaIn picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------- offerte, apparaat 1 */
.offerte{padding-block:clamp(56px,7vw,120px) var(--sec)}
.offerte__lead{margin-top:18px;color:var(--ink-2);max-width:34ch}
.offerte__bel{margin-top:26px;font-size:var(--t-s)}
.offerte__bel a{border-bottom:1px solid var(--brand);padding-bottom:2px}

/* Het formulier stond in een witte kaart met een rand. Dat is precies wat de
   referentie nergens doet: geen kaarten, geen gevulde vlakken, alleen haarlijnen
   op het papier. De stap zelf is nu de kop van het blok, op displaygrootte, want
   dan is de vraag het grootste op het scherm in plaats van de doos eromheen. */
.wiz{position:relative}
.wiz__head{position:relative;padding-bottom:clamp(18px,2vw,28px)}
.wiz__count{
  font-size:var(--t-s); display:flex; gap:6px; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.06em;
}
/* het logobruin haalt op papier 3.75 en dit is kleine tekst, dus de diepe
   variant; #907060 blijft voor het grote display en de niet-tekstmarkeringen */
.wiz__count span:first-child{color:var(--brand-deep)}
.wiz__label{
  font-size:var(--t-h); line-height:1.02; letter-spacing:-.038em;
  margin-top:clamp(8px,1vw,16px);
}
.wiz__rail{position:relative;height:2px;background:var(--line);margin-top:clamp(20px,2.4vw,34px)}
.wiz__fill{
  position:absolute; inset:0 auto 0 0; width:25%; background:var(--brand);
  transform-origin:left;
}

.step{display:none;padding-top:26px}
.step.is-on{display:block}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:block}
.chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.chip span{
  display:block; padding:14px 20px; min-height:50px; line-height:22px;
  border:1px solid var(--line); font-size:var(--t-b);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.chip:hover span{border-color:var(--ink)}
.chip input:checked + span{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--white)}
.chip input:focus-visible + span{outline:2px solid var(--brand);outline-offset:3px}

.fields{display:grid;gap:0}
.fields--2{grid-template-columns:1fr}
.f{position:relative;display:block}
.f__in{
  width:100%; border:0; border-bottom:1px solid var(--line);
  background:transparent; font:inherit; color:var(--ink);
  padding:30px 0 12px; border-radius:0;
  transition:border-color .3s ease;
}
.f__in:hover{border-bottom-color:var(--ink)}
.f__in:focus{outline:0;border-bottom-color:var(--brand)}
.f__lb{
  position:absolute; left:0; top:30px; color:var(--ink-2);
  pointer-events:none; transform-origin:left top;
  transition:transform .32s cubic-bezier(.22,1,.36,1),color .32s ease;
}
.f__in:focus + .f__lb,
.f__in:not(:placeholder-shown) + .f__lb{transform:translateY(-24px) scale(.82);color:var(--ink-2)}
.f__in:focus + .f__lb{color:var(--brand-deep)}
.f--area .f__in{resize:vertical;min-height:132px}
.f--area .f__lb{max-width:90%}

.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.opt span{
  display:block;padding:11px 16px;min-height:44px;line-height:22px;
  border:1px solid var(--line);font-size:var(--t-s);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:3px}

.wiz__hint{margin-top:16px;font-size:var(--t-s);color:var(--ink-2)}
.wiz__sum{margin-top:28px;border-top:1px solid var(--line);padding-top:18px;font-size:var(--t-s)}
.wiz__sum dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.wiz__sum dt{color:var(--ink-2)}
.wiz__sum dd{margin:0}

.wiz__err{
  margin-top:20px;border-left:3px solid var(--brand);
  padding:10px 14px;background:var(--grey);font-size:var(--t-s);
}
.wiz__foot{display:flex;align-items:center;gap:18px;margin-top:34px}
.wiz__done{padding:8px 0}
.wiz__doneH{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em;margin-bottom:12px}
.wiz__done a{border-bottom:1px solid var(--brand)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 30px; background:var(--brand-deep); color:var(--white);
  font-size:var(--t-s); position:relative; overflow:hidden;
}
.btn span,.btn{z-index:0}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .45s cubic-bezier(.22,1,.36,1); z-index:-1;
}
.btn:hover::before{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);margin-top:26px}
.btn--ghost:hover{color:var(--paper)}
.lnk{font-size:var(--t-s);color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px}
.lnk:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------------------------------------------- schaalsectie */
.scale{position:relative;height:260svh}
.scale__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
.scale__w{
  position:absolute; letter-spacing:-.035em; line-height:1.04; text-align:center;
  will-change:transform;
}
/* de vier woorden staan aan de randen van het beeld, niet op elkaar in het
   midden, anders liggen ze vanaf het begin onder de foto */
.scale__w--t,.scale__w--b{
  font-size:var(--t-s); text-transform:uppercase; letter-spacing:.06em;
  left:var(--pad); right:var(--pad);
}
.scale__w--t{top:13svh}
.scale__w--b{bottom:13svh}
/* de rustpositie ligt 150px binnen de marge, want de foto duwt de twee
   zijwoorden precies die 150 naar buiten en dan staan ze op de marge, net als
   op de referentie. De woorden boven en onder blijven staan waar ze staan */
.scale__w--l,.scale__w--r{
  font-size:clamp(24px, 2.1vw + 6px, 42px); line-height:1.06;
  top:50%; margin-top:-.53em; max-width:26vw;
}
.scale__w--l{left:calc(var(--pad) + 150px);text-align:left}
.scale__w--r{right:calc(var(--pad) + 150px);text-align:right}
/* de foto begint als een vierkant midden op het scherm en groeit naar de volle
   breedte. Dat is een verhoudingswissel, geen schaal, dus het kader zelf wordt
   breder en het beeld hersnijdt met object-fit in plaats van uit te rekken */
.scale__img{
  position:relative; overflow:hidden;
  width:min(44svh,44vw); height:min(44svh,44vw);
  will-change:width,height;
}
.scale__img img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------- diensten */
.srv{list-style:none}
.srv__i{border-bottom:1px solid var(--line)}
.srv__i a{
  display:grid; grid-template-columns:44px 1fr auto; align-items:baseline;
  gap:0 20px; padding:clamp(16px,1.6vw,24px) 0;
  transition:padding-left .5s cubic-bezier(.22,1,.36,1),color .3s ease;
}
.srv__i a:hover,.srv__i a:focus-visible{padding-left:16px;color:var(--brand-deep)}
.srv__n{font-size:var(--t-s);color:var(--ink-2)}
.srv__t{font-size:clamp(22px,2.2vw,38px);letter-spacing:-.035em;line-height:1.1}
.srv__d{grid-column:2;font-size:var(--t-s);color:var(--ink-2);margin-top:6px;max-width:52ch}
.srv__go{
  grid-row:1; grid-column:3; font-size:var(--t-s); color:var(--brand-deep);
  opacity:0; transform:translateX(-8px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.srv__i a:hover .srv__go,.srv__i a:focus-visible .srv__go{opacity:1;transform:none}

/* ---------------------------------------------- parallax in het kader

   Gemeten op de referentie: het kader klipt, en het beeld erin is exact 1.100
   keer zo hoog. Dat overschot is de hele reis. Het beeld hangt vijf procent
   boven de bovenrand en schuift naar vijf procent onder de onderrand, dus op
   geen enkele scrollpositie ontstaat er een gat. */
[data-px]{position:relative;display:block;overflow:hidden}
[data-px] img,[data-px] video{
  position:absolute; left:0; top:-5%; width:100%; height:110%;
  object-fit:cover; object-position:50% 50%; will-change:transform;
}

/* ---------------------------------------------- werk */
.work{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,110px)}
/* align-self:start is hier geen detail. Zonder dat rekt een rasteritem uit tot
   de hoogte van de hoogste buur, en omdat het bijschrift absoluut op bottom:0
   staat kwam de sluier dan onder de foto op het papier te liggen */
.work__c{position:relative;align-self:start}
/* het bijschrift ligt op de foto en komt bij hover van twee kanten binnen,
   de titel van links, het jaar van rechts, precies zoals de referentie het
   doet. Zonder hover, dus op aanraakschermen, staat het gewoon onder de foto */
.work__c figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:space-between; gap:16px;
  padding:clamp(52px,6vw,96px) clamp(14px,1.4vw,22px) clamp(14px,1.4vw,22px);
  font-size:var(--t-s); color:var(--white);
  overflow:hidden; pointer-events:none;
  /* een sluier onder de tekst, want wit op een willekeurige foto is geen
     leesbaarheid maar geluk. Hij komt met het bijschrift mee en is er dus
     niet als er niets te lezen valt */
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.3) 46%,rgba(0,0,0,0));
  opacity:0; transition:opacity .35s ease;
}
.work__c:hover figcaption,
.work__c:focus-within figcaption{opacity:1}
.work__c figcaption span{display:block;transition:transform .25s ease 50ms}
.work__c figcaption span:first-child{transform:translateX(calc(-100% - 24px))}
.work__c figcaption span:last-child{transform:translateX(calc(100% + 24px))}
.work__c:hover figcaption span,
.work__c:focus-within figcaption span{transform:translateX(0)}
.work__c picture::after{
  content:''; position:absolute; inset:0; z-index:1; background:#000;
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.work__c:hover picture::after,
.work__c:focus-within picture::after{opacity:.2}
.work__c picture{aspect-ratio:4/3}
.work__c--b picture,.work__c--e picture{aspect-ratio:3/4}

/* zonder muis is er geen hover om het bijschrift mee te onthullen, dus staat het
   er gewoon: kop links, jaartal rechts, in inkt onder de foto in plaats van wit
   op de foto. De twee zijden apart terugzetten is geen omhaal maar noodzaak:
   `.work__c figcaption span` is (0,1,3) en verliest van
   `.work__c figcaption span:first-child` op (0,2,2), ook binnen deze query.
   Zolang die reset niet aankwam stonden de spans 100% + 24px opzij vertaald,
   liep het document tot 509px breed op een scherm van 390, en schoof de
   Offerte-link daarmee volledig buiten beeld */
@media (hover:none){
  .work__c figcaption{
    position:static; padding:12px 0 0; color:var(--ink-2); overflow:visible;
    background:none; opacity:1;
  }
  .work__c figcaption span,
  .work__c figcaption span:first-child,
  .work__c figcaption span:last-child{transform:none}
}

/* ---------------------------------------------- reviews */
/* Dit blok was een witte pagina met een citaat erop en verder niets. Het is nu
   het enige gekleurde veld tussen de hero en de voet, in het diepe bruin, zodat
   de reviews een halte zijn in plaats van een alinea. */
.quote{
  padding:var(--sec) var(--pad);
  background:var(--brand-deep); color:var(--white);
  min-height:70svh; display:flex; flex-direction:column; justify-content:center;
}
.quote__b{display:none}
.quote__b.is-on{display:block}
/* het aanhalingsteken hangt niet meer aan de eerste regel maar staat als eigen
   teken boven het citaat, op displaygrootte, in taupe. Ingesprongen tekst met
   een absolute ::before ervoor bleef aan het eerste woord vastplakken */
/* de inline-doos van een glyph is hoger dan zijn regelhoogte, dus afknippen
   verbergt hem wel maar laat hem nog altijd over het citaat vallen. De maat
   staat daarom in em: regelhoogte .75 en .3em eronder houdt de doos vrij op
   elke breedte, en het teken zit toch in de bovenkant van zijn em-doos */
.quote__mk{
  font-size:clamp(64px,9vw,180px); line-height:.75; color:var(--tint);
  margin:0 0 .3em;
}
.quote__t{
  font-size:var(--t-q); line-height:1.14; letter-spacing:-.035em;
  /* in em, niet in ch: ch rekent met de body-grootte en dan wordt de kolom
     bij 48px display een strook van drie woorden breed */
  max-width:18.5em; margin:0;
}
/* taupe op het diepe bruin haalt 3.15 en dat is te weinig voor tekst op deze
   grootte. Het blijft dus wit met wat lucht erin, 5.1, en taupe doet alleen
   het aanhalingsteken en het vierkantje, allebei geen leestekst */
.quote__b footer{display:block;margin-top:clamp(28px,3vw,52px);color:rgba(255,255,255,.88)}
.quote .dot__sq{background:var(--tint)}
.quote__nav{display:flex;align-items:center;gap:22px;margin-top:clamp(36px,4vw,64px)}
.quote .lnk{color:rgba(255,255,255,.88);border-bottom-color:var(--line-inv)}
.quote .lnk:hover{color:var(--white);border-bottom-color:var(--white)}
.quote__c{font-size:var(--t-s);color:rgba(255,255,255,.88)}

/* ---------------------------------------------- werkwijze */
.steps{display:grid;grid-template-columns:1fr;gap:0}
.steps__i{border-bottom:1px solid var(--line);padding:clamp(20px,2.2vw,34px) 0}
.steps__n{font-size:var(--t-s);color:var(--brand-deep)}
.steps__t{font-size:clamp(20px,1.7vw,28px);letter-spacing:-.03em;margin-top:8px}
.steps__d{color:var(--ink-2);margin-top:8px;max-width:44ch}

/* ---------------------------------------------- zakelijk */
.zak__img picture{aspect-ratio:4/3}

/* ---------------------------------------------- faq */
.faq{list-style:none}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(18px,1.8vw,26px) 0; cursor:pointer; list-style:none;
  font-size:clamp(18px,1.3vw,22px); letter-spacing:-.02em;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary i{position:relative;width:16px;height:16px;flex:0 0 16px}
.faq__i summary i::before,.faq__i summary i::after{
  content:'';position:absolute;left:0;top:50%;width:16px;height:1px;background:var(--ink);
}
.faq__i summary i::after{transform:rotate(90deg);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.faq__i[open] summary i::after{transform:rotate(0)}
.faq__a{padding-bottom:clamp(18px,1.8vw,26px);max-width:64ch;color:var(--ink-2)}

/* ---------------------------------------------- footer */
.ftr{
  background:var(--brand-deep); color:var(--white);
  padding:var(--sec) var(--pad) clamp(18px,2vw,30px);
  max-width:var(--maxw); margin-inline:auto;
}
.ftr__row{display:grid;grid-template-columns:1fr;gap:52px}
.ftr__nav{display:flex;flex-direction:column;gap:8px;font-size:clamp(19px,1.4vw,24px);letter-spacing:-.025em}
.ftr__nav a{position:relative;width:max-content}
.ftr__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.ftr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.ftr__nap .dot__sq{background:var(--tint)}
.ftr__tel{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.03em;margin-top:12px}
.ftr__nap address{font-style:normal;margin-top:14px;color:rgba(255,255,255,.85)}
.ftr__kvk{margin-top:10px;font-size:var(--t-s);color:rgba(255,255,255,.85)}
.ftr__claim{
  margin-top:clamp(56px,7vw,120px); font-size:var(--t-l);
  letter-spacing:-.02em; color:rgba(255,255,255,.86);
}
.ftr__mark{margin-top:clamp(24px,3vw,48px);color:var(--white)}
.ftr__band{display:block;overflow:hidden}
.ftr__mark svg{width:100%;height:auto;display:block}
.ftr__base{
  display:flex;justify-content:space-between;gap:20px;margin-top:16px;
  font-size:var(--t-s);color:rgba(255,255,255,.85);
}

/* ---------------------------------------------- eigen cursor

   Een bruine schijf met een diagonale pijl, alleen boven de projectfoto's.
   Hij vervangt de systeemcursor daar volledig, want twee cursors naast elkaar
   is precies de rommel die de referentie vermijdt. */
.cur{
  position:fixed; top:0; left:0; z-index:250;
  width:64px; height:64px; margin:-32px 0 0 -32px;
  display:grid; place-items:center; color:var(--white);
  pointer-events:none; opacity:0;
  transition:opacity .3s ease;
}
/* de schaal zit op de kinderen, niet op .cur zelf: GSAP schrijft daar de
   positie in een inline transform en die zou een scale uit de klasse wissen */
.cur__d,.cur__a{transform:scale(.4);transition:transform .45s var(--e-out)}
.cur__d{
  position:absolute; inset:0; border-radius:50%;
  background:var(--brand-deep);
}
.cur__a{position:relative;width:26px;height:26px}
.cur.is-on{opacity:1}
.cur.is-on .cur__d,.cur.is-on .cur__a{transform:scale(1)}
.cur.is-on.is-down .cur__d,.cur.is-on.is-down .cur__a{transform:scale(.86)}
@media (hover:none){.cur{display:none}}
.work__c:hover{cursor:none}

/* ============================================================
   breder dan 768
   ============================================================ */
@media (min-width:768px){
  .fields--2{grid-template-columns:1fr 1fr;gap:0 var(--gutter)}
  .work{grid-template-columns:repeat(12,1fr);gap:clamp(40px,5vw,120px) var(--gutter)}
  .work__c--a{grid-column:1/8}
  .work__c--b{grid-column:9/13;margin-top:clamp(60px,9vw,180px)}
  .work__c--c{grid-column:2/7;margin-top:clamp(0px,2vw,40px)}
  .work__c--d{grid-column:8/13}
  .work__c--e{grid-column:1/6}
  .work__c--f{grid-column:7/13;margin-top:clamp(40px,7vw,140px)}
  .ftr__row{grid-template-columns:1fr 1fr}
  .ftr__nap{justify-self:end;text-align:left}
  .steps{grid-template-columns:repeat(2,1fr);column-gap:var(--gutter)}
  .steps__i:nth-child(-n+2){border-top:0}
}

/* ============================================================
   breder dan 1024, hier komt het raster van de referentie terug
   ============================================================ */
@media (min-width:1024px){
  .col-3{grid-column:span 3}
  .col-4{grid-column:span 4}
  .col-5{grid-column:span 5}
  .col-6{grid-column:span 6}
  .col-7{grid-column:span 7}
  /* start en eind allebei benoemen: grid-column-start alleen laat het eind op
     auto staan, en dan is de kolom één spoor breed in plaats van zeven */
  .col-7.col-push-1{grid-column:6/13}
  #over .col-6.col-push-1{grid-column:5/11}
  .zak .col-6.col-push-1{grid-column:7/13}

  /* de aanhaling begint op kolom vijf, niet aan de marge: dat laat het
     aanhalingsteken links hangen en geeft het citaat de plek van een uitspraak
     in plaats van die van een alinea */
  .quote__b,.quote__nav{margin-left:33.33%}

  /* geen liggende strook over de volle breedte maar een staand vlak dat op de
     tekstkolom staat: half zo breed, dus de witruimte links doet het werk */
  .over__img{margin:clamp(60px,7vw,130px) 0 0 33.33%;width:50%}
  .over__img picture{aspect-ratio:4/5}
  .srv__i a{grid-template-columns:64px 1fr 1fr auto;align-items:baseline}
  .srv__d{grid-column:3;grid-row:1;margin-top:0}
  .srv__go{grid-column:4}
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps__i{border-top:0}

}

/* onder 1024 heeft de hero geen ruimte voor de standfirst rechtsboven */
@media (max-width:1023px){
  /* de hero was 1537 hoog op een scherm van 844, en 412 daarvan was leeg
     ------------------------------------------------------------------
     Op 1440 duwt die vaste hoogte de invulzin naar beneden zodat het wordmark
     in de onderste helft van het scherm landt en de foto er net onder piept.
     Dat is een compositie voor een liggend scherm. Op 390 is er niets om te
     componeren: er past maar één kolom, de zin staat toch al boven het
     wordmark, en de hoogte doet dus alleen nog wat hij letterlijk zegt, 412px
     niets tussen de balk en de eerste regel tekst.

     Auto in plaats van een formule. Gemeten wordt de hero daarmee 1125 in
     plaats van 1537, en staat er bij het laden 563px foto op het scherm in
     plaats van niets. */
  .hero__top{place-items:end start;height:auto;padding:calc(var(--nav-h) + 26px) 0 20px}
  .hero__sub{max-width:34ch}
  .over__img{margin-top:44px}
  .over__img picture{aspect-ratio:4/5}
  /* het menu op telefoonformaat
     ------------------------------------------------------------------
     De referentie laat de pil hier vallen: op 390 is er geen pil meer maar
     een schermvullend vlak, 390x844, dat met clip-path inset(0 0 100%) naar
     inset(0) naar beneden openveegt. Dat mechanisme nemen we over, want een
     paneel van 320 breed dat uit een balk van 362 groeit is geen beweging.

     Twee dingen doen we bewust anders. Het woord "Menu" blijft staan waar de
     referentie een kale burger overhoudt: de doelgroep is 50-plus en drie
     streepjes zonder label is precies de plek waar die afhaakt. En de rijen
     beginnen op de paginamarge in plaats van op de 35px van de referentie,
     zodat ze uitlijnen met de rest van de pagina eronder.

     De knop verhuist naar rechts naast de offerte-link. Absoluut centreren
     kan hier niet: `translateX(-50%)` op de omhullende div maakt een
     containing block, en dan is het paneel eronder niet meer fixed maar
     hangt het aan een doos van 96px. */
  /* 84px balk voor een logo van 26 en een knop van 44 is een desktopmaat. De
     referentie houdt op 390 61px aan. 64 laat de knop met zijn 44 vrij staan
     en geeft twintig regelhoogtes aan leesruimte terug op een scherm dat er
     maar tien over heeft */
  :root{--nav-h:64px}
  .nav{gap:12px}
  .nav__mark{margin-right:auto}
  .nav__menu{
    position:static; order:3; width:auto; height:auto;
    transform:none; display:flex; align-items:center;
  }
  .pill{
    position:static; translate:none; width:auto; max-width:none;
    border-radius:8px; clip-path:none;
    transition:background-color .5s var(--e-out),color .5s var(--e-out);
  }
  .pill:hover{max-width:none;background:var(--grey);color:var(--ink)}
  /* clip-path hier expliciet uitzetten, ook in de open toestand: op desktop
     is die clip het mechanisme, hier klipt hij het paneel weg. Een clip-path
     op de knop klipt namelijk ook zijn afstammelingen, en het paneel is er
     daar een van, ook al is het position:fixed */
  .pill.is-open{
    max-width:none; clip-path:none;
    background:var(--brand-deep); color:var(--white);
  }
  .pill__btn{width:auto;height:44px;padding:0 14px;gap:12px}
  .pill__t{display:block}
  .pill__b{width:26px}

  .pill__panel{
    position:fixed; inset:0; z-index:-1;
    display:flex; flex-direction:column; justify-content:center;
    padding:calc(var(--nav-h) + 20px) var(--pad) 28px;
    background:var(--brand-deep);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .9s var(--e-out),visibility 0s linear .9s;
  }
  .pill.is-open .pill__panel{
    clip-path:inset(0 0 0 0);
    transition:clip-path .9s var(--e-out),visibility 0s;
  }
  /* de balk zelf staat straks op bruin, dus de inkt eroverheen moet mee */
  body.is-menu .nav__cta{color:var(--white)}
  body.is-menu .nav__logo{filter:brightness(0) invert(1)}
  .nav__cta{transition:color .5s var(--e-out)}
  .nav__logo{transition:filter .5s var(--e-out)}

  .mlink{padding-block:19px;font-size:20px}
  .mfoot{padding-top:24px;font-size:17px}
  .mfoot p{margin:0 0 10px}
  /* het schaalblok houdt twee zinnen in plaats van vier
     ------------------------------------------------------------------
     Op 1440 wijken de vier zinnen naar buiten terwijl het beeld groeit en
     blijven ze vrij tot f0.3. Op 390 is die vrije breedte er niet: gemeten
     staan de linker- en rechterzin al vanaf f0.15 onder de foto. Dat is
     precies de klacht van ronde 4 terug, en die is één keer eerder met een
     parameter beantwoord. Dus geen nieuwe timing maar een ander idee: op
     telefoonformaat draagt het blok alleen de boven- en onderzin, en die
     twee blijven de hele pin vrij omdat het beeld verticaal tussen ze in
     groeit. De zin die wegvalt staat voluit in de sectie eronder */
  .scale__w--l,.scale__w--r{display:none}
  .scale__w--t{top:9svh}
  .scale__w--b{bottom:9svh}

  /* parallax uit, zoals op de referentie
     ------------------------------------------------------------------
     Daar staat op 390 elk kader op mediaRatio 1.000 en transform none, waar
     desktop overal 1.100 doet. De reden om dat over te nemen is niet dat de
     referentie het doet: op een kader van 362 breed is tien procent
     overscan 36px beeld dat je weggooit voor een diepte-effect dat over die
     afstand niet te zien is, en het is meteen de duurste scroll-listener
     die er op een telefoon overblijft. Het kader zelf blijft, alleen de
     overmaat gaat eruit */
  [data-px] img,[data-px] video{top:0;height:100%}

  /* de hero loopt door tot de rand. De inzet-naar-volle-breedte op scroll is
     een desktopbeweging: over 11px aan weerszijden is er niets te zien */
  .hero__media{--hero-inset:0px;clip-path:none}

  /* vier van de zes werkfoto's staan op 4/3, dat is 272px hoog op een kolom
     van 362 en leest als een strook duimnagels. De referentie zet zijn
     kaarten op 0.76 staand; wij gaan naar 4/5, dicht genoeg bij die
     verhouding zonder zes beelden van 483 achter elkaar */
  .work__c picture,
  .work__c--b picture,
  .work__c--e picture{aspect-ratio:4/5}

  /* 30px op regelafstand 1.02 is een desktopwaarde die op twee regels tegen
     elkaar aan komt te staan */
  .h2{line-height:1.08}

  /* tapdoelen
     ------------------------------------------------------------------
     Gemeten op 390 zaten hier acht soorten aanraakbare elementen onder de
     44px: de offerte-link in de balk op 33, de footernavigatie op 28, de
     doorschakelknoppen bij de reviews op 25, telefoon en e-mail op 21 en 22.
     Dat is een lat die hier zwaarder weegt dan elders, want de doelgroep is
     50-plus en bellen is de conversie. De onderstreping schuift mee omhoog,
     anders komt hij op de rand van het opgerekte vlak te liggen in plaats
     van onder het woord */
  .nav__cta{padding-block:12px}
  .nav__cta span::after{bottom:-3px}
  .ftr__nav{gap:0}
  .ftr__nav a{display:block;padding-block:8px}
  .ftr__nav a::after{bottom:6px}
  .ftr__tel a{display:inline-block;padding-block:7px}
  [data-q-prev],[data-q-next]{padding-block:10px}
  .mfoot__a{display:inline-block;padding-block:11px}
  .mfoot p{margin:0}
  .nav__mark{padding-block:9px}
  .offerte__bel a,.ftr__nap p a{display:inline-block;padding-block:11px}
}

/* ============================================================
   minder beweging: geen travel, geen scrub, alles in de eindstand
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .intro{display:none}
  .scale{height:auto}
  .scale__stage{position:static;height:auto;padding-block:var(--sec)}
  .scale__img{width:100%;height:min(80svh,700px)}
  .hero__media{clip-path:none}
  .cur{display:none}
  .scale__w{position:static;transform:none;margin-bottom:14px}
  .w-word{transform:none!important;opacity:1!important}
}