/* ============================================================================================
   HOME · lichte proef op de gedeelde basis (B105 punten 3 en 4, 04-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Alleen wat van deze pagina is: de hero (variant A, "Middelpunt"), het werk op het glas,
   de keuzebalk en de opmaak van de twaalf secties. Teksten en bedragen staan in index.html en zijn niet gewijzigd.
   ER IS GEEN LICHT BEELD: de hero toont de maquetteplaat (hm-plaat-a-d/-m.png), gemarkeerd "schema, geen beeld".
   Plaatfracties van de vogel (platen.json van de maquette, berekend):
     liggend: x 48,1-76,6 %, y 27,0-85,1 %      staand: x 25,8-74,1 %, y 42,3-94,8 %
   Twee standen van de hero:
     B  breed en liggend (min. 861 px breed, min. 600 px hoog, verhouding vanaf 5:4): kop links, vogel in het midden,
        werk op het glas rechtsboven, keuzebalk onderaan.
     S  al het andere (staand, liggend en laag, bijna vierkant): kop, plaat, werk en keuzebalk onder elkaar.
        Staand (zelfde voorwaarde als de <picture>-bron) vult kop plus plaat precies het eerste scherm.
   Eén linkerlijn: --hm-l (de lijn van het logo in de kopbalk) voor hero én secties.
   ============================================================================================ */

.hm{--hm-l:calc(var(--edge) - 12px);--hm-kolommen:minmax(0,5fr) minmax(0,6fr);--hm-gat:clamp(32px,5vw,88px);background:#f2ece0;color:var(--nx-inkt)}
@media (max-width:860px){.hm{--hm-l:var(--pad)}}
.hm :is(section,[id]){scroll-margin-top:calc(var(--header-h) + 20px)}
.hm .kw{font:inherit;color:inherit}

/* ---------------------------------------------------------------- status (eerlijk label bij elk werk) */
.status{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:1.1em;white-space:nowrap;
  font:500 .8125rem/1.2 var(--sans);letter-spacing:.03em;color:var(--nx-navy);background:rgba(255,253,248,.82);box-shadow:inset 0 0 0 1px rgba(104,74,16,.42)}
.status--live::before{content:"";width:7px;height:7px;border-radius:50%;background:#0a7a72}

/* gemarkeerde plaats waar een licht beeld ontbreekt: geen beeld, geen suggestie van beeld */
.hm-plek{display:grid;place-items:center;border:1px dashed rgba(104,74,16,.5);border-radius:14px;background:linear-gradient(140deg,rgba(255,253,248,.72),rgba(176,224,222,.2))}
.hm-plek span{padding:0 6px;text-align:center}
.hm-plek span,.hm-schema{font:500 .6875rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--nx-tekst-zacht)}
.hm-schema{position:absolute;z-index:4;right:12px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(255,253,248,.88);box-shadow:inset 0 0 0 1px rgba(104,74,16,.3)}

/* ---------------------------------------------------------------- hero, gedeeld */
.hm-hero{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;background:#d6e8f4;padding-top:calc(var(--header-h) + 20px)}
.hm-scherm{display:flex;flex-direction:column}
.hm-stage{position:relative;order:2;z-index:0;pointer-events:none;background:#d6e8f4}
.hm-stage picture{display:block;width:100%;height:100%}
.hm-plaat{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.hm-kop{position:relative;order:1;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;padding:0 var(--hm-l) 22px}
.hm-kop>*{min-width:0;max-width:100%}
.opening-merk{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 18px;font:500 .875rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#16423e}
.opening-merk .merknaam{font:500 1.0625rem/1 var(--brand);letter-spacing:.2em;color:var(--nx-inkt-diep)}
.merk-sep{width:28px;height:1px;background:rgba(8,127,123,.6)}
.hm-hero h1{font:400 clamp(48px,calc(1.1rem + 4vw),132px)/1 var(--serif);letter-spacing:-.008em;color:var(--nx-inkt-diep);text-wrap:balance}
.opening-sub{margin-top:18px;max-width:23em;font:400 clamp(1.0625rem,1.1vw,1.5rem)/1.45 var(--sans);color:var(--nx-inkt);text-wrap:pretty}
.opening-acties{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;margin-top:26px}
.opening-cta{min-height:56px;padding-inline:30px 24px;justify-content:space-between;gap:22px}
.opening-acties .tekstlink{font-size:1rem}

/* het werk op het glas: het scherm en zijn label zijn één glazen vlak; het werk is een echt pagina-element */
.hm-werk{z-index:2;padding:10px 10px 2px}
.scherm{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:19px;background:var(--nx-ivoor-licht);box-shadow:0 0 0 1px rgba(11,44,41,.14)}
.scherm picture{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.scherm picture.is-actief{opacity:1}
.scherm img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.scherm-onder{margin:0}
.scherm-case{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:48px;padding:6px 36px 6px 4px;border-radius:14px;font:500 1rem/1.2 var(--sans);color:var(--nx-inkt);text-decoration:none}
.scherm-case .scherm-naam{min-width:0;overflow-wrap:break-word}
.scherm-case .arr{position:absolute;right:8px;top:calc(50% - 10px);width:20px;height:20px;color:#087f7b;transition:transform var(--t-hover) var(--ease)}
.scherm-case:active{opacity:.62}
.scherm-case:focus-visible{outline-offset:0}

/* keuzebalk: drie ingangen, geen kaarten */
.keuzebalk{z-index:2;display:inline-flex;align-items:center;gap:2px;padding:5px;align-self:center}
.keuzebalk a{display:inline-flex;align-items:center;min-height:48px;padding:0 clamp(14px,1.2vw,26px);border-radius:999px;font:400 1rem/1.2 var(--sans);letter-spacing:.01em;color:var(--nx-inkt);text-decoration:none;white-space:nowrap;transition:background-color var(--t-hover) var(--ease)}
.keuzebalk a:active{background:rgba(214,236,238,.7);transition-duration:0s}
.keuzebalk a:focus-visible{border-radius:999px;outline-offset:0}
.kb-lijn{width:22px;height:1px;flex:none;background:rgba(8,127,123,.5)}

@media (hover:hover) and (pointer:fine){
  .scherm-case:hover .arr{transform:translateX(3px)}
  .scherm-case:hover .scherm-naam{text-decoration:underline;text-decoration-color:rgba(177,130,67,.85);text-underline-offset:5px}
  .keuzebalk a:hover{background:rgba(255,255,255,.55)}
  .keuzebalk a:active{background:rgba(214,236,238,.7)}        /* indrukken na aanwijzen: de drukregel wint (les basis ronde 2) */
}

/* ---------------------------------------------------------------- S · onder elkaar (staand, laag of bijna vierkant) */
@media (max-width:860px),(max-height:599.98px),(max-aspect-ratio:1249/1000){
  /* ronde 2: kop, knop en tekstlink staan in een eigen rustige ivoren zone; het beeld begint eronder en loopt bovenaan zacht uit */
  .hm-hero{background:#f7f3ec}
  .hm-stage{aspect-ratio:16/9;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px);mask-image:linear-gradient(180deg,transparent 0,#000 24px)}
  .hm-plaat{object-position:62% 50%}
  .opening-cta{max-width:28rem}
  /* de keuzebalk ligt onder de plaat, dus niet over beeld: een rustig ivoren vlak, geen glas. Ronde 3: zij breekt af op de
     breedte van haar inhoud (flex-wrap) en steekt bij een grote letterinstelling nooit uit */
  html .hm-hero .keuzebalk.glas{margin:18px auto 26px;max-width:calc(100% - 2 * var(--hm-l) + 12px);flex-wrap:wrap;justify-content:center;background:var(--nx-ivoor-licht);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 0 0 1px var(--nx-goud-lijn)}
  html .hm-hero .keuzebalk.glas::before,html .hm-hero .keuzebalk.glas::after{display:none}
  .hm-hero h1{font-size:clamp(42px,calc(.9rem + 7.6vw),72px)}
}
/* smaller dan een tablet: onder de plaat ligt geen beeld; het werkvlak is hier een rustig ivoren vlak, geen glas (keuring basis, punt 4) */
/* de em-grenzen gelden alleen binnen de opmaak "onder elkaar": bij een grote letterinstelling (200 %) groeit het label en staat het werk ook op een tablet onder de plaat, niet over de vogel */
@media (max-width:739.98px),(max-width:46.24em) and (max-width:860px),(max-width:46.24em) and (max-height:599.98px),(max-width:46.24em) and (max-aspect-ratio:1249/1000){
  html .hm-hero .hm-werk.glas{margin:22px var(--hm-l) 0;max-width:36rem;background:var(--nx-ivoor-licht);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:24px;
    box-shadow:0 0 0 1px var(--nx-goud-lijn),0 22px 36px -28px rgba(11,44,41,.4)}
  html .hm-hero .hm-werk.glas::before,html .hm-hero .hm-werk.glas::after{display:none}
}
/* ronde 3 · tablet en liggende telefoon in de opmaak "onder elkaar" (vanaf 740 px breed): het werk staat als glas OVER het beeld,
   rechtsboven in de lucht naast de vogel, zoals op desktop. Geen ivoren vlak links met een lege helft ernaast. De keuzebalk blijft
   onder de plaat (daar ligt de sleep; glas hoort niet over de vogel). */
@media (min-width:740px) and (min-width:46.25em) and (max-width:860px),(min-width:740px) and (min-width:46.25em) and (max-height:599.98px),(min-width:740px) and (min-width:46.25em) and (max-aspect-ratio:1249/1000){
  .hm-hero{display:grid;grid-template-columns:minmax(0,1fr)}
  .hm-scherm{display:contents}
  .hm-kop{grid-area:1 / 1}
  .hm-stage{grid-area:2 / 1}
  .hm-werk{grid-area:2 / 1;align-self:start;justify-self:end;width:clamp(250px,27vw,300px);margin:clamp(28px,3.4vw,44px) var(--hm-l) 0 0}
  .keuzebalk{grid-area:3 / 1;justify-self:center}
}
/* ronde 3 · liggende telefoon en laag venster (vanaf 740 px breed, lager dan 600 px): het werk staat NAAST de kop, in de lege rechterhelft van
   het eerste scherm, als ivoren vlak (daar ligt geen beeld achter, dus geen glas). De plaat eronder blijft vrij: de hele vogel zonder paneel. */
@media (min-width:740px) and (min-width:46.25em) and (max-height:599.98px) and (min-aspect-ratio:1/1){
  .hm-hero{grid-template-columns:minmax(0,1fr) auto}
  .hm-stage{grid-area:2 / 1 / 3 / 3}
  .keuzebalk{grid-area:3 / 1 / 4 / 3}
  html .hm-hero .hm-werk.glas{grid-area:1 / 2;align-self:start;justify-self:end;width:clamp(250px,30vw,300px);margin:24px var(--hm-l) 14px 0;background:var(--nx-ivoor-licht);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:24px;
    box-shadow:0 0 0 1px var(--nx-goud-lijn),0 22px 36px -28px rgba(11,44,41,.4)}
  html .hm-hero .hm-werk.glas::before,html .hm-hero .hm-werk.glas::after{display:none}
}
/* ronde 3 · liggende telefoon en lage vensters in deze opmaak: een kleinere kop en minder wit, zodat het beeld in het eerste scherm begint */
@media (max-height:599.98px) and (min-aspect-ratio:1/1){
  .hm-hero{padding-top:calc(var(--header-h) + 12px)}
  .hm-hero h1{font-size:clamp(38px,calc(.9rem + 8svh),56px)}
  .opening-merk{margin-bottom:10px}
  .opening-sub{margin-top:10px}
  .opening-acties{margin-top:14px}
  .hm-kop{padding-bottom:14px}
}
/* staand: kop plus plaat vullen precies het eerste scherm; de plaat toont haar onderste 60 % (vogel en treden),
   de rustige lucht erboven schuift achter de kop */
/* staand en breder dan een telefoon (tablet): de liggende plaat als hogere band over de volle breedte; de hele vogel blijft in het eerste scherm */
@media (min-width:600px) and (max-aspect-ratio:1/1){
  .hm-stage{aspect-ratio:4/3}
}
/* telefoon staand (zelfde voorwaarde als de <picture>-bron): de staande plaat. Zij vult altijd de volle breedte (hoogte minstens
   177,78vw), dus haar zijranden vallen buiten beeld; het podium snijdt haar af en toont haar onderste 63 % (vogel en treden).
   Kop plus plaat vullen het eerste scherm. */
@media (max-width:599.98px) and (max-aspect-ratio:1/1){
  .hm-scherm{min-height:calc(100svh - var(--header-h) - 20px)}
  .hm-stage{aspect-ratio:auto;flex:1 1 auto;min-height:112vw;background:none;overflow:clip}
  .hm-stage picture{display:contents}
  .hm-plaat{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:auto;height:max(177.78vw,calc(100% / .63));aspect-ratio:9/16;object-fit:fill}
  .opening-cta{width:100%;max-width:none}
}
@media (max-width:520px){
  .kb-pre{display:none}
  .keuzebalk a{padding:0 13px;font-size:.9375rem}
  .kb-lijn{width:8px}
  .opening-merk{position:relative;gap:0;margin-bottom:12px;font-size:.8125rem;letter-spacing:.16em}
  .opening-merk .merknaam{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* zoals de bron: op een smal scherm alleen voor de schermlezer (het woordmerk staat erboven in de kopbalk) */
  .opening-merk .merk-sep{display:none}
  .opening-sub{margin-top:12px}
  .opening-acties{margin-top:18px;gap:4px 30px}
}

@media (max-width:400px){.keuzebalk a{padding:0 9px}.kb-lijn{width:6px}}
/* telefoon op zoom 200 %: niets steekt buiten het scherm */
@media (max-width:300px){
  .opening-cta,.check-cta{padding-inline:16px 12px;gap:8px;overflow-wrap:anywhere}
}
/* de omslag staat in em: wie de letter groter instelt krijgt een keuzebalk die afbreekt in plaats van een die uitsteekt */
@media (max-width:21em),(max-width:36em) and (min-width:520.02px){
  html .hm-hero .keuzebalk.glas{flex-wrap:wrap;justify-content:center;border-radius:24px}
  .kb-lijn{display:none}
}
/* ronde 3 · grote letter op een smal scherm: de knoptekst breekt af in plaats van het scherm breder te maken */
@media (max-width:21em){
  .opening-cta,.check-cta{white-space:normal;padding-inline:16px 12px;gap:8px;overflow-wrap:anywhere}
  .opening-merk{letter-spacing:.08em;overflow-wrap:anywhere}
  .hm .tekstlink{max-width:100%;white-space:normal;overflow-wrap:anywhere}
}
/* ronde 3: het statuslabel breekt alleen af als de letter groot is ingesteld ten opzichte van het scherm (omslag in em) */
@media (max-width:30em){.status{white-space:normal}}

/* ---------------------------------------------------------------- B · breed en liggend */
@media (min-width:861px) and (min-height:600px) and (min-aspect-ratio:5/4){
  .hm-hero{
    --ph:max(100svh,660px,56.25vw);            /* plaathoogte volgt het eerste scherm; breder dan 16:9 volgt de breedte */
    --pw:calc(var(--ph) * 16 / 9);             /* de plaat staat altijd in haar eigen verhouding */
    --top:calc(var(--header-h) + clamp(24px,4.5svh,56px));
    --op:max(0px,calc((var(--ph) - 100svh) * .3));   /* ronde 3: is de plaat hoger dan het scherm (laag, breed venster), dan schuift zij voor 30 % van het verschil omhoog; lucht boven de vogel is er genoeg */
    justify-content:center;min-height:calc(var(--ph) - var(--op));padding:var(--top) var(--hm-l) clamp(110px,14svh,150px)}
  .hm-scherm{display:contents}
  .hm-stage{position:absolute;order:0;top:calc(-1 * var(--op));left:calc(50% - var(--pw) / 2);width:var(--pw);height:var(--ph);background:#d6e8f4}
  .hm-plaat{object-fit:fill}
  .hm-schema{right:calc(var(--pw) / 2 - 50vw + var(--hm-l));bottom:76px}
  .hm-kop{padding:0;max-width:min(620px,34vw)}
  .opening-merk{margin-bottom:22px}
  @media (max-width:1180px){.merk-sep{display:none}.opening-merk{gap:6px 14px}}
  .opening-sub{margin-top:22px}
  .opening-acties{margin-top:32px}
  .hm-werk{position:absolute;right:var(--hm-l);top:var(--top);width:min(clamp(250px,27vw,470px),max(250px,50svh))}   /* ronde 3: op een laag venster volgt het paneel de hoogte (ademruimte tot de vogel) */
  .keuzebalk{position:absolute;left:0;right:0;bottom:clamp(24px,4svh,48px);width:fit-content;max-width:calc(100% - 2 * var(--hm-l));margin-inline:auto}   /* ronde 3: gecentreerd over de volle breedte, zodat zij bij een grote letter niet op de halve breedte afbreekt */
  /* overgang van scène naar marmer */
  .hm-hero::after{content:"";position:absolute;inset:auto 0 0;height:64px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(247,243,236,0),#f7f3ec)}
}

/* ---------------------------------------------------------------- vloer: secties */
.hm-vloer{padding-bottom:clamp(72px,8vw,128px)}
.hm .nx-sectie,.hm-dienst{padding-inline:var(--hm-l)}
/* ronde 3: koppen, bedragen en serif-namen worden nooit kleiner dan een vaste verhouding tot de ingestelde letter (max(…, x rem)).
   Bij de standaardletter van 16 px verandert er niets; bij 200 % blijft een kop groter dan de lopende tekst. */
.hm-vloer h2{font-size:max(clamp(34px,3.5vw,56px),1.5rem)}
.hm-vloer h3{font-size:max(clamp(21px,1.6vw,25px),1.3rem)}
.hm-vloer .eyebrow{margin-bottom:16px;flex-wrap:wrap;row-gap:6px;overflow-wrap:anywhere}   /* bij een grote letter breekt de bovenregel af in plaats van uit te steken */
.hm-vloer .nx-lead{margin:0}
.hm-vloer .klein{display:block;font:400 .875rem/1.5 var(--sans);color:var(--nx-tekst-zacht)}
.prijsregel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:22px 0 8px;max-width:44em}
.prijsregel .vanaf,.prijsregel .per{font:400 1rem/1 var(--sans);color:var(--nx-tekst)}
.prijsregel .bedrag{font:400 max(clamp(34px,2.6vw,48px),1.5rem)/1 var(--serif);color:var(--nx-navy)}
.prijsregel .btw{flex:0 0 100%;margin-top:6px;font:400 .875rem/1.45 var(--sans);color:var(--nx-tekst-zacht)}

/* drempel: grote kop links, toelichting en links rechts, op één linkerlijn (was gecentreerd) */
.hm-drempel{display:grid;grid-template-columns:var(--hm-kolommen);gap:20px var(--hm-gat);align-items:end;padding-top:clamp(64px,6.5vw,112px)}
.hm-drempel h2{max-width:12em}
.drempel-links{display:flex;flex-wrap:wrap;gap:4px 36px;margin-top:14px}

/* de drie diensten: één reeks onder de drempel; kleinere kop dan een hoofdstuk, dunne lijn ertussen, tekst steeds links */
.hm-dienst{position:relative;display:grid;grid-template-columns:var(--hm-kolommen);gap:clamp(28px,3vw,48px) var(--hm-gat);align-items:center;margin-top:clamp(44px,4.5vw,76px);padding-top:clamp(44px,4.5vw,76px)}
.hm-dienst::before{content:"";position:absolute;left:var(--hm-l);right:var(--hm-l);top:0;height:1px;background:linear-gradient(90deg,var(--nx-goud-lijn),rgba(176,138,69,.08))}
.hm-dienst h2{font-size:max(clamp(30px,2.7vw,44px),1.5rem);max-width:13em}
.hfd-kop{max-width:35rem}
.hfd-lead{margin-top:16px;max-width:32em;text-wrap:pretty}
.kenmerken{list-style:none;margin-top:18px;color:var(--nx-tekst)}
.cr-drie{margin-top:14px;font:500 .8125rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.cr-drie .punt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* het punt uit de tekst blijft voor de schermlezer; zichtbaar tekent de lijstregel hieronder het punt */
/* ronde 2: scheidingspunten staan nooit aan een regelrand. Elk onderdeel draagt zijn punt links van zich; de linkerstrook
   van de lijst is weggesneden, dus het punt van het eerste onderdeel op elke regel is onzichtbaar. */
/* ronde 3: de onderdelen staan als woorden in een lopende regel (inline-block) en de regel breekt evenwichtig af (text-wrap:balance):
   nooit één onderdeel alleen op de laatste regel. Browsers zonder text-wrap:balance breken af zoals in ronde 2. */
:is(.kenmerken,.cr-drie,.sb-pijlers,.labs-lijst){--punt:26px;display:block;margin-left:calc(-1 * var(--punt));clip-path:inset(0 0 0 var(--punt));text-wrap:balance}
:is(.kenmerken,.sb-pijlers,.labs-lijst)>*,.cr-drie>span:not(.punt){position:relative;display:inline-block;vertical-align:top;margin-block:2px;padding-left:var(--punt)}
:is(.kenmerken,.sb-pijlers,.labs-lijst)>*::before,.cr-drie>span:not(.punt)::before{content:"·";position:absolute;left:0;width:var(--punt);text-align:center;letter-spacing:0;color:var(--nx-goud)}

/* Website Build: het echte ontwerp in een licht venster; staat stil */
.browser{padding:10px;border-radius:20px;background:var(--nx-ivoor-licht);box-shadow:0 0 0 1px var(--nx-goud-lijn),0 30px 50px -36px rgba(11,44,41,.45)}
.browser-balk{display:flex;align-items:center;gap:7px;height:26px;padding:0 8px 6px}
.browser-balk i{width:8px;height:8px;border-radius:50%;background:rgba(11,44,41,.22)}
.browser-adres{flex:1;height:14px;margin-left:14px;border-radius:999px;background:rgba(11,44,41,.06);box-shadow:inset 0 0 0 1px rgba(11,44,41,.1)}
.browser-venster{aspect-ratio:16/10;overflow:hidden;border-radius:11px;background:#fff}
.browser-venster picture{display:block}
.browser-venster img{width:100%;height:auto}
.browser figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 4px 2px;font:500 .9375rem/1.3 var(--sans);color:var(--nx-navy)}
.wb-transformatie{grid-column:1 / -1;display:grid;grid-template-columns:var(--hm-kolommen);gap:20px var(--hm-gat);align-items:center}
.wb-transformatie .eyebrow{margin-bottom:12px}
.wb-transformatie__kop>p:not(.eyebrow){margin-top:12px;max-width:32em;text-wrap:pretty}
.overgangen{list-style:none;display:grid;border-top:1px solid var(--nx-goud-zacht)}
.overgangen li{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:center;gap:14px;min-height:52px;border-bottom:1px solid var(--nx-goud-zacht)}
.overgangen .van{color:var(--nx-tekst-zacht)}
.overgangen .naar{font:400 max(clamp(20px,1.4vw,26px),1.15rem)/1.15 var(--serif);color:var(--nx-navy)}
.overgangen .lijn{height:1px;background:linear-gradient(90deg,rgba(176,138,69,.15),var(--nx-goud),rgba(176,138,69,.15))}

/* Brand Space: tekst en staal links, de merktoepassing rechts */
.hm-dienst--bs{align-items:start}
.hm-dienst--bs .hfd-kop{grid-column:1;grid-row:1}
.hm-dienst--bs .specimen{grid-column:1;grid-row:2}
.hm-dienst--bs .bs-toepassing{grid-column:2;grid-row:1 / span 2;align-self:center}
.specimen{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:22px;border-top:1px solid var(--nx-goud-zacht)}
.specimen-label+*+.specimen-label{margin-top:12px}
.specimen-label{font:500 .75rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.specimen-type{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));align-items:baseline;gap:4px 36px}   /* elke letternaam recht onder haar eigen "Aa" */
.spec-serif{font:400 44px/1 var(--serif);color:var(--nx-navy)}
.spec-sans{font:400 38px/1 var(--sans);color:var(--nx-navy)}
.spec-nm{display:contents;font-size:.875rem;line-height:1.45;color:var(--nx-tekst-zacht)}
.spec-nm span{font-size:.875rem;color:var(--nx-tekst-zacht)}
.stalen{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 28px}   /* 2 x 2; vanaf 1400 px vier op een regel */
@media (min-width:1400px){.stalen{grid-template-columns:repeat(4,max-content);gap:10px 22px}}
.stalen li{display:flex;align-items:center;gap:9px;font-size:.9375rem;color:var(--nx-tekst)}
.staal{width:26px;height:26px;border-radius:50%;background:var(--staal);box-shadow:inset 0 0 0 1px rgba(11,44,41,.28)}
/* ronde 3 (B126): zolang het beeld van de merktoepassing ontbreekt staat de figuur met haar onderschrift uit; het staal neemt de rechterkolom */
@media (min-width:700px){
  .hm-dienst--bs[data-zonder-toepassing]{align-items:center}
  .hm-dienst--bs[data-zonder-toepassing] .specimen{grid-column:2;grid-row:1}
}
.bs-toepassing .hm-plek{aspect-ratio:16/10}
.bs-toepassing figcaption{margin-top:12px;font-size:.875rem;line-height:1.45;color:var(--nx-tekst-zacht)}

/* Creative: drie gelijke, rechte plaatsen op één lijn (waren drie scheve tegels), daaronder de drie pijlers als één rij */
.hm-dienst--cr{align-items:start}
.cr-details{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,18px)}
.cr-details .hm-plek{aspect-ratio:4/5}
.cr-details li>span{display:block;margin-top:10px;font:500 .75rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nx-tekst-zacht)}
.cr-productie-tekst{grid-column:1 / -1}
.creative-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--hm-gat);margin:0;border-top:1px solid var(--nx-goud-zacht)}
.creative-drie div{padding:16px 0 4px}
.creative-drie dt{font:400 max(clamp(21px,1.4vw,26px),1.15rem)/1.2 var(--serif);color:var(--nx-navy)}
.creative-drie dd{margin:4px 0 0;color:var(--nx-tekst)}

/* werk: hoofdstuk; rijen met dunne lijnen en een ruimer beeld van het werk zelf */
.cases-index,.systeemband{padding-top:clamp(84px,8.5vw,144px)}
.ci-kop{display:grid;grid-template-columns:var(--hm-kolommen);gap:16px var(--hm-gat);align-items:end}
.ci-kop .eyebrow{grid-column:1 / -1;margin:0}
.ci-lijst{list-style:none;margin:clamp(26px,3vw,44px) 0 22px;border-top:1px solid var(--nx-goud-zacht)}
.ci-lijst a{display:grid;grid-template-columns:clamp(150px,15vw,236px) minmax(0,1fr) minmax(0,1.15fr) auto 24px;align-items:center;gap:clamp(16px,2vw,40px);padding:16px 0;border-bottom:1px solid var(--nx-goud-zacht);color:inherit;text-decoration:none;transition:background-color var(--t-hover) var(--ease)}
.ci-lijst img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:10px;box-shadow:0 0 0 1px rgba(11,44,41,.14)}
.ci-nm{font:400 max(clamp(26px,2vw,38px),1.3rem)/1.1 var(--serif);color:var(--nx-navy)}
.ci-regel{color:var(--nx-tekst)}
.ci-lijst .arr{width:22px;height:22px;color:var(--nx-petrol);transition:transform var(--t-hover) var(--ease)}
.ci-lijst a:active{background:rgba(176,138,69,.14);transition-duration:0s}
.ci-lijst a:focus-visible{outline-offset:-2px;border-radius:10px;box-shadow:none}

/* werkwijze: het traject in één blik, daaronder twee rustige kolommen */
.sb-kop{display:grid;grid-template-columns:var(--hm-kolommen);gap:16px var(--hm-gat);align-items:end}
.sb-kop .eyebrow{grid-column:1 / -1;margin:0}
.sb-kop .tekstlink{grid-column:2;justify-self:start;margin-top:-4px}
.stappen{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,44px);margin-top:clamp(34px,3.6vw,56px)}
.stappen::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:linear-gradient(90deg,var(--nx-goud) 0,var(--nx-goud) 86%,rgba(176,138,69,0))}
.stappen li{position:relative;padding-top:42px}
.stappen li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:11px;transform:rotate(45deg);border:1px solid #8a6a2c;background:var(--nx-ivoor-licht)}
.stap-nr{font:400 .9375rem/1 var(--serif);color:var(--nx-goud-tekst)}
.stappen h3{margin-top:8px;font-size:max(clamp(24px,1.7vw,30px),1.3rem)}
.stappen p{margin-top:8px;color:var(--nx-tekst)}
.sb-regels{display:grid;grid-template-columns:var(--hm-kolommen);gap:40px var(--hm-gat);margin-top:clamp(52px,5vw,88px);padding-top:clamp(30px,3vw,48px);border-top:1px solid var(--nx-goud-zacht)}
.sb-regel h3{margin-bottom:16px;font-size:max(clamp(26px,2vw,36px),1.4rem)}
.sector-rij,.mog-lijst{list-style:none}
/* ronde 3: de vier sectorrijen zijn altijd gelijk opgebouwd: in een smalle kolom alle vier onder elkaar, in een brede alle vier naast elkaar */
.sb-regel{container-type:inline-size}
@container (max-width:22.5em){.sector-rij li{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start}}
.sector-rij li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 18px;padding:12px 0;border-bottom:1px solid var(--nx-goud-zacht)}
.sector-rij li:first-child,.mog-lijst li:first-child{border-top:1px solid var(--nx-goud-zacht)}
.sector-nm,.mog-lijst .nm{font:400 max(clamp(20px,1.3vw,24px),1.15rem)/1.2 var(--serif);color:var(--nx-navy)}
.sector-regel{color:var(--nx-tekst)}
.sb-pijlers{margin-bottom:12px;font:500 .8125rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-goud-tekst)}
@media (max-width:25em){.sb-pijlers{--punt:16px;letter-spacing:.08em}}          /* ronde 3: de drie pijlers passen op één regel; geen woord alleen */
@media (max-width:21.5em){.sb-pijlers{font-size:.75rem;letter-spacing:.05em}}
.mog-lijst li{border-bottom:1px solid var(--nx-goud-zacht)}
.mog-lijst li>a,.mog-lijst .mog-item{display:flex;align-items:baseline;gap:16px;min-height:48px;padding:11px 0;color:inherit;text-decoration:none}
.mog-lijst .nr{font:400 .9375rem/1 var(--serif);color:var(--nx-goud-tekst)}
.mog-lijst li>a .nm{text-decoration:underline;text-decoration-color:var(--nx-goud-lijn);text-decoration-thickness:1px;text-underline-offset:5px}
.mog-lijst li>a:active{opacity:.62}
.mog-lijst li>a:focus-visible{outline-offset:-2px;box-shadow:none}
.afspraken-regel{margin-top:18px;color:var(--nx-tekst)}
.afspraken-regel .tekstlink{display:flex;width:fit-content;max-width:100%;margin-block:8px 10px;padding-block:6px}   /* ronde 3: wit boven en onder, ook over twee regels */

/* Space Labs: één rustige band, klein gehouden */
.labs-band{padding-top:clamp(64px,6vw,104px)}
.labs-tekst{display:grid;grid-template-columns:var(--hm-kolommen);gap:16px var(--hm-gat);align-items:start;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--nx-goud-zacht);border-bottom:1px solid var(--nx-goud-zacht)}
.labs-band h2{font-size:max(clamp(26px,2.3vw,38px),1.5rem);max-width:12em}
.labs-lijst{list-style:none;margin-top:14px;font:400 max(clamp(19px,1.25vw,23px),1.15rem)/1.5 var(--serif);color:var(--nx-navy)}
.labs-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 6px}

/* websitecheck: de ene nadrukkelijke uitnodiging; grotere kop, eigen lichte waterzweem, de gevulde knop */
.hm .check{margin-top:clamp(64px,6vw,104px);padding-block:clamp(56px,6vw,96px);background:linear-gradient(100deg,rgba(255,253,248,.78) 0%,rgba(190,232,232,.5) 100%);box-shadow:inset 0 1px 0 var(--nx-goud-zacht),inset 0 -1px 0 var(--nx-goud-zacht)}
.check-tekst{display:grid;grid-template-columns:var(--hm-kolommen);gap:20px var(--hm-gat);align-items:center}
.check h2{font-size:max(clamp(40px,4.6vw,76px),1.7rem)}
.check-cta{margin-top:22px;min-height:56px;padding-inline:30px 24px;gap:22px}

/* koppelingen en vragen: naast elkaar; de logo's op het marmer, in rijen met een dunne lijn, zonder kaart */
.hm .contact{display:grid;grid-template-columns:var(--hm-kolommen);gap:56px var(--hm-gat);align-items:start;padding-top:clamp(64px,6vw,104px)}.contact h2{font-size:max(clamp(26px,2.3vw,38px),1.5rem)}
.kop-rij{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;margin-top:22px;border-top:1px solid var(--nx-goud-zacht)}
.kop-rij li{display:flex;align-items:center;gap:10px;min-height:54px;border-bottom:1px solid var(--nx-goud-zacht);font:500 .9375rem/1.2 var(--sans);color:var(--nx-navy)}
.kop-rij img{width:26px;height:26px;object-fit:contain;flex:none}
@media (max-width:1100px){.kop-rij li:last-child:nth-child(odd){grid-column:1 / -1}}   /* ronde 3: bij twee kolommen loopt de lijn onder het negende logo over de volle breedte */
.kop-rij li:first-child img{width:72px;height:34px;border-radius:6px}
.koppelingen .klein{margin-top:14px}
.faq details{border-bottom:1px solid var(--nx-goud-zacht)}
.faq details:first-of-type{margin-top:22px;border-top:1px solid var(--nx-goud-zacht)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:60px;padding:12px 2px;cursor:pointer;list-style:none;font:400 max(clamp(20px,1.4vw,25px),1.15rem)/1.25 var(--serif);color:var(--nx-navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border-right:1.5px solid #8a6a2c;border-bottom:1.5px solid #8a6a2c;transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--t-terug) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq summary:active{opacity:.62}
.faq details p{margin:0 0 20px;max-width:56ch;line-height:1.6;color:var(--nx-tekst)}

/* slot: rustig einde; het gesprek is de tweede handeling (omrande knop), de websitecheck blijft de gevulde */
.hm .slot{padding-top:clamp(84px,8.5vw,144px)}
.slot-tekst{display:grid;grid-template-columns:var(--hm-kolommen);gap:0 var(--hm-gat);align-items:start}
.slot-tekst>:is(.slot-act,.eyebrow,h2){grid-column:1}
.slot-tekst>:is(.slot-sub,.besliskamer,.slot-acties){grid-column:2}
.slot-tekst>.slot-act{grid-row:1}.slot-tekst>.eyebrow{grid-row:2}.slot-tekst>h2{grid-row:3 / span 3}
.slot-tekst>.slot-sub{grid-row:3}.slot-tekst>.besliskamer{grid-row:4}.slot-tekst>.slot-acties{grid-row:5}
.slot-act{margin-bottom:14px;font:500 .8125rem/1 var(--brand);letter-spacing:.34em;color:var(--nx-goud-tekst)}
.slot-sub{margin-top:6px!important}
.besliskamer{margin-top:24px;padding-left:18px;border-left:1px solid var(--nx-goud)}
.bk-nm{font:400 max(clamp(20px,1.4vw,25px),1.15rem)/1.2 var(--serif);color:var(--nx-navy)}
.bk-regel{margin-top:4px;color:var(--nx-tekst-zacht)}
.slot-acties{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 32px;margin-top:28px}
.cta-mail{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.slot-acties>.tekstlink{min-height:52px}
/* op het marmer ligt geen beeld achter de knop: een ivoren knop met een dunne petrol rand in plaats van helder glas */
.hm-knop-tweede{--kn-tekst:var(--nx-petrol);--kn-bg:var(--nx-ivoor-licht);--kn-schaduw:inset 0 0 0 1px rgba(10,74,70,.6),0 10px 18px -14px rgba(11,44,41,.4);font-weight:600}
.hm-knop-tweede::before,.hm-knop-tweede::after{display:none}

@media (hover:hover) and (pointer:fine){
  .ci-lijst a:hover{background:linear-gradient(90deg,rgba(176,138,69,.1),rgba(176,138,69,0) 70%)}
  .ci-lijst a:active{background:rgba(176,138,69,.14)}
  .ci-lijst a:hover .arr{transform:translateX(3px)}
  .mog-lijst li>a:hover .nm{text-decoration-color:#8a6a2c;text-decoration-thickness:2px}
  .faq summary:hover{color:var(--nx-petrol)}
  .hm-knop-tweede:hover{--kn-bg:#fff;--kn-schaduw:inset 0 0 0 1px rgba(10,74,70,.9),0 16px 24px -14px rgba(11,44,41,.5)}
}
/* uitklapper: alleen de inhoud komt op in dekking (160 ms); geen hoogte-animatie */
@media (prefers-reduced-motion:no-preference){
  html:not(.beweging-uit) .faq details[open]>p{animation:nx-op var(--t-op) ease-out}
}

/* ---------------------------------------------------------------- smal: één kolom */
@media (max-width:699.98px){
  .hm{--hm-kolommen:minmax(0,1fr)}
  .hm-drempel,.cases-index,.systeemband,.hm .slot{padding-top:64px}
  .hm-dienst{margin-top:44px;padding-top:44px;gap:26px}
  .hm-dienst--bs :is(.hfd-kop,.specimen,.bs-toepassing){grid-column:auto;grid-row:auto}
  .sb-kop .tekstlink{grid-column:auto;margin-top:0}
  .creative-drie{grid-template-columns:minmax(0,1fr)}
  .creative-drie div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 18px;padding:12px 0;border-bottom:1px solid var(--nx-goud-zacht)}
  .creative-drie dd{margin:0}
  .ci-lijst a{grid-template-columns:104px minmax(0,1fr) 22px;grid-template-areas:"b n p" "b r p" "b s p";gap:2px 14px;align-items:center}
  .ci-lijst img{grid-area:b}.ci-nm{grid-area:n;font-size:1.5rem}.ci-regel{grid-area:r;font-size:.9375rem}.ci-lijst .status{grid-area:s;justify-self:start;margin-top:6px}.ci-lijst .arr{grid-area:p}
  /* ronde 3: op de smalste telefoons past het statuslabel niet naast het beeld; het staat dan op een eigen regel onder beeld en tekst, bij alle drie de rijen gelijk */
  @media (max-width:419.98px){
    .ci-lijst a{grid-template-areas:"b n p" "b r p" "s s p"}
    .ci-lijst img{align-self:start}
    .ci-lijst .status{margin-top:10px}
  }
  /* het traject als verticale lijn met ruitjes */
  .stappen{grid-template-columns:minmax(0,1fr);gap:0;margin-top:28px}
  .stappen::before{left:5px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:var(--nx-goud)}
  .stappen li{padding:0 0 22px 32px}
  .stappen li::before{top:5px}
  .stappen h3{margin-top:4px}
  .sb-regels{margin-top:40px}
  .labs-band,.hm .contact{padding-top:56px}
  .hm .check{margin-top:56px;padding-block:52px}
  .check-cta{width:100%;justify-content:space-between}
  .kop-rij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slot-tekst>*{grid-column:1!important;grid-row:auto!important}
  .slot-sub{margin-top:16px!important}
  .slot-acties{flex-direction:column;gap:10px}
  .cta-mail,.hm-knop-tweede{width:100%}
  .hm-knop-tweede{justify-content:space-between}
}
@media (max-width:1100px) and (min-width:700px){
  .stappen{gap:20px}
  .kop-rij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ci-lijst a{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) 24px;grid-template-areas:"b n r p" "b n s p"}
  .ci-lijst img{grid-area:b}.ci-nm{grid-area:n}.ci-regel{grid-area:r;align-self:end}.ci-lijst .status{grid-area:s;justify-self:start;align-self:start}.ci-lijst .arr{grid-area:p}
}

/* grote letterinstelling op een smal scherm (omslag in em): niets steekt uit, lijsten gaan naar één kolom */
.hm-vloer :is(li,p,dt,dd,h2,h3,figcaption,summary),.hm-vloer li>span{min-width:0;overflow-wrap:break-word}
@media (max-width:21em){
  .specimen,.kop-rij,.specimen-type,.stalen{grid-template-columns:minmax(0,1fr)}
  .spec-serif{grid-row:1}.spec-nm span:first-child{grid-row:2}.spec-sans{grid-row:3}.spec-nm span:last-child{grid-row:4}
  .cr-details{grid-template-columns:minmax(0,1fr)}
  .cr-details .hm-plek{aspect-ratio:16/9}
  .ci-lijst a{grid-template-columns:minmax(0,1fr) 22px;grid-template-areas:"b p" "n p" "r p" "s p"}
  .sector-rij li{flex-direction:column}
}

/* ronde 2: de proefband zweeft niet meer mee over de inhoud en staat niet boven het werkpaneel (alleen proefkopie) */
.proefbadge{position:absolute;left:var(--edge);right:auto;top:calc(var(--header-h) + 6px)}
/* ronde 3: in de opmaak "onder elkaar" staat de proefband rechts onder de kopbalk, vrij van de merkregel (alleen proefkopie) */
@media (max-width:860px),(max-height:599.98px),(max-aspect-ratio:1249/1000){.proefbadge{left:auto;right:max(20px,calc(var(--edge) - 12px))}}
@media (max-width:860px){.proefbadge{top:calc(var(--header-h) + 2px)}}
/* ronde 2: footer op tussenbreedten: geen eenzaam laatste woord op een tweede regel (ook voorstel voor de basis) */
/* ronde 3: de footer staat op de linkerlijn van de pagina (de lijn van het logo; was 12 px naar rechts). Voorstel voor de basis. */
@media (min-width:861px){
  .site-footer{padding-inline:calc(var(--edge) - 12px)}
  .site-footer::before{left:calc(var(--edge) - 12px);right:calc(var(--edge) - 12px)}
}
/* ronde 3: bij een grote letter op een smal scherm breekt het e-mailadres in de footer af in plaats van het scherm breder te maken (voorstel voor de basis) */
.site-footer .legal>*{max-width:100%;min-width:0;overflow-wrap:anywhere}
/* ronde 3: op tabletbreedte staan de gegevens in de footer in evenwichtige regels; het jaartal staat niet alleen */
@media (min-width:600px) and (max-width:860px){
  .site-footer .legal{display:block;font-size:.875rem;text-wrap:balance}
  .site-footer .legal>*{margin-right:20px}
  .site-footer .legal>:last-child{margin-right:0}
}
@media (min-width:861px) and (max-width:1279.98px){
  .site-footer{gap:28px 28px}
  .site-footer nav{gap:4px 18px}
  .site-footer .legal{gap:0 18px;font-size:.875rem}
}

/* ---------------------------------------------------------------- terugval */
@media (prefers-contrast:more){
  .status{box-shadow:inset 0 0 0 2px #131d33}
  .hm-plek{border-color:#131d33}
}
@media (forced-colors:active){
  .scherm picture{transition:none}
  .hm-knop-tweede{border:1px solid CanvasText}
}