/* ==========================================================================
   Schilders- en afwerkingsbedrijf Franse B.V.
   Twee homepagevoorstellen in één document.
   V1 "Het register"   — warm kalkvlak, Fraunces, ERM specialismen als staalkaart
   V2 "Onder de verf"  — kleurtrap in lagen, Archivo, kleurenonderzoek
   Alle tokens, klassen en id's zijn per versie genamespaced (v1- / v2-).
   Gedeelde bouwstenen dragen het voorvoegsel x-.
   ========================================================================== */

/* --- 1. Fonts ------------------------------------------------------------ */
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}

/* --- 2. Reset en basis --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.62;background:#efe9dd;color:#191b16;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul,fieldset{margin:0;}
ol,ul{padding:0;list-style:none;}
fieldset{border:0;padding:0;min-width:0;}
legend{padding:0;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
::selection{background:#1e3a2e;color:#efe9dd;}

/* --- 3. Gedeelde bouwstenen ---------------------------------------------- */
.x-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

.x-skip{position:absolute;left:8px;top:-64px;z-index:200;background:#1e3a2e;color:#efe9dd;padding:12px 18px;border-radius:2px;font-weight:600;text-decoration:none;transition:top .18s ease;}
.x-skip:focus{top:8px;}

/* Eén focusring, zonder specificiteitsgevecht. De dubbele ring (outline plus
   halo) blijft zichtbaar op zowel gevulde knoppen als op de pagina zelf. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ring,#191b16);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--ring-halo,rgba(239,233,221,.9));
  border-radius:2px;
}

/* Reveal. De verborgen staat bestaat alleen wanneer JS bevestigd heeft dat
   beweging gewenst is: zonder script en bij reduced motion is er niets te
   onthullen en staat alle inhoud er gewoon. */
.has-motion .x-rise{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);}
.has-motion .x-rise.is-in{opacity:1;transform:none;}

/* Menu. In de HTML staat het open, zodat het zonder JS een gewone gestapelde
   lijst is. Het script klapt het dicht en zet .has-js, pas dan wordt het een
   zwevende lade. De expliciete display:none is nodig omdat een dichte
   <details> met een zichtbaar kind wel rendert maar niet te betabben is. */
.x-nav{position:static;}
.x-nav>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.x-nav>summary::-webkit-details-marker{display:none;}
.x-nav-bars{display:grid;gap:3.5px;}
.x-nav-bars i{display:block;width:17px;height:2px;background:currentColor;}
.x-nav:not([open]) .x-nav-list{display:none;}
.x-nav-list{display:flex;flex-direction:column;gap:2px;padding:14px 0 6px;}
.has-js .x-nav[open] .x-nav-list{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;padding:12px;border-radius:14px;box-shadow:0 22px 50px rgba(24,26,20,.28);}
/* Zonder script staat het menu open en mag het geen zwevende lade zijn, want
   dan bedekt het de kop en is het niet weg te klikken. Het valt dan terug op
   een gewone gestapelde lijst op een eigen regel onder de kopregel. Het
   open- en dichtklappen zelf blijft werken, dat doet <details> zelf. */
html:not(.has-js) .x-nav{width:100%;order:9;margin-left:0;}
html:not(.has-js) .x-nav-list{background:none;border:0;padding:10px 0 2px;}

@media (min-width:960px){
  /* Let op de specificiteit: .x-nav>summary is (0,1,1), dus een kale
     .x-nav-toggle (0,1,0) verliest en de hamburger bleef op desktop staan. */
  .x-nav>.x-nav-toggle{display:none;}
  .x-nav:not([open]) .x-nav-list,
  .x-nav[open] .x-nav-list,
  .has-js .x-nav[open] .x-nav-list{position:static;display:flex;flex-direction:row;align-items:center;gap:clamp(14px,1.6vw,26px);padding:0;box-shadow:none;background:none;border:0;border-radius:0;}
}

/* --- 4. Versiewisselaar (gereedschap, staat buiten beide ontwerpen) ------- */
.vswitch{position:fixed;left:14px;bottom:14px;z-index:120;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:999px;background:rgba(20,22,16,.93);color:#f2efe6;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:.72rem;--ring:#f2efe6;--ring-halo:rgba(20,22,16,.95);}
.vswitch-label{letter-spacing:.13em;text-transform:uppercase;opacity:.72;font-weight:600;}
.vswitch-btn{cursor:pointer;border:1px solid rgba(242,239,230,.34);background:transparent;color:inherit;font-size:.74rem;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:999px;min-height:32px;}
.vswitch-btn[aria-pressed="true"]{background:#f2efe6;color:#15170f;border-color:#f2efe6;}
@media (max-width:420px){.vswitch{left:10px;bottom:10px;padding:5px 7px 5px 10px;}.vswitch-label{display:none;}}

[hidden]{display:none!important;}

/* Op een echt smal scherm moet de kopregel op één rij passen: logo, offerte en
   hamburger. Het woord "Menu" gaat eraf, de rest krimpt een stap. */
@media (max-width:520px){
  .v1-header-inner,.v2-header-inner{padding:10px 14px;gap:8px;}
  .v1-brand img{width:118px;}
  .v2-brand img{width:112px;}
  .x-nav-word{display:none;}
  .x-nav>summary{padding:11px 12px;}
  .v1-btn-sm,.v2-btn-sm{padding:8px 13px;font-size:.8rem;min-height:38px;}
}


/* ==========================================================================
   VERSIE 1 — HET REGISTER
   ========================================================================== */
.v1-root{
  --v1-kalk:#efe9dd;
  --v1-kalk-2:#f7f4ec;
  --v1-inkt:#191b16;
  --v1-gedempt:#575a4c;
  --v1-lijn:#d6cfbf;
  --v1-lijn-zacht:#e3ddcf;
  --v1-groen:#1e3a2e;
  --v1-groen-diep:#16291f;
  --v1-op-groen:#efe9dd;
  --v1-op-groen-gedempt:#a9bda9;
  --v1-goud:#6d5316;
  --v1-goud-deco:#a98a4a;
  --v1-op-inkt-gedempt:#9a9c8e;
  --ring:#191b16;
  --ring-halo:rgba(239,233,221,.95);
  background:var(--v1-kalk);
  color:var(--v1-inkt);
  font-family:"Inter",system-ui,sans-serif;
}
.v1-root section{scroll-margin-top:88px;}

/* -- typografie ----------------------------------------------------------- */
.v1-h1{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 90,"SOFT" 24,"WONK" 0;font-weight:600;font-size:clamp(1.85rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.018em;margin:0 0 20px;text-wrap:balance;}
.v1-h1-mark{position:relative;display:inline-block;white-space:nowrap;}
.v1-h1-mark::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.09em;height:.26em;background:var(--v1-goud-deco);opacity:.34;z-index:-1;transform:scaleX(0);transform-origin:left center;border-radius:2px;}
.has-motion .v1-h1-mark::after{transition:transform 1.1s cubic-bezier(.16,.84,.44,1) .35s;}
.v1-h1-mark.is-painted::after{transform:scaleX(1);}
.v1-h2{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 72,"SOFT" 20;font-weight:600;font-size:clamp(1.6rem,3.5vw,2.9rem);line-height:1.1;letter-spacing:-.014em;margin:0 0 18px;}
.v1-h2-sm{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 48,"SOFT" 20;font-weight:500;font-size:clamp(1.16rem,2.2vw,1.72rem);line-height:1.32;letter-spacing:-.008em;margin:0 0 26px;max-width:30ch;}
.v1-statement{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 120,"SOFT" 30;font-weight:600;font-size:clamp(2.15rem,7.4vw,5.6rem);line-height:.99;letter-spacing:-.028em;margin:0 0 34px;}
.v1-eyebrow{display:flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v1-goud);margin:0 0 16px;}
.v1-eyebrow-inv{color:#d9c896;}
.v1-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;border:1px solid currentColor;border-radius:2px;font-size:.68rem;letter-spacing:.06em;}
.v1-lead{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--v1-gedempt);max-width:46ch;margin:0 0 26px;}
.v1-kicker{font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--v1-gedempt);margin:0 0 18px;}

/* -- knoppen -------------------------------------------------------------- */
.v1-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:999px;font-size:.94rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;}
.v1-btn-sm{min-height:40px;padding:9px 18px;font-size:.86rem;}
.v1-btn-solid{background:var(--v1-groen);color:var(--v1-op-groen);--ring:#efe9dd;--ring-halo:rgba(30,58,46,.95);}
.v1-btn-solid:hover{background:var(--v1-groen-diep);transform:translateY(-1px);}
.v1-btn-ghost{border-color:var(--v1-inkt);color:var(--v1-inkt);}
.v1-btn-ghost:hover{background:var(--v1-inkt);color:var(--v1-kalk);}
.v1-btn-light{background:var(--v1-kalk);color:var(--v1-inkt);--ring:#191b16;--ring-halo:rgba(239,233,221,.95);}
.v1-btn-light:hover{background:#fff;}
.v1-btn-ghost-inv{border-color:rgba(239,233,221,.55);color:var(--v1-kalk);}
.v1-btn-ghost-inv:hover{background:rgba(239,233,221,.12);}
.v1-btn-arrow{transition:transform .22s;}
.v1-btn:hover .v1-btn-arrow{transform:translateX(4px);}

/* -- header --------------------------------------------------------------- */
.v1-header{position:sticky;top:0;z-index:80;background:rgba(239,233,221,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--v1-lijn);}
.v1-header-inner{position:relative;max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
.v1-brand{flex:0 0 auto;display:flex;align-items:center;padding:6px 0;}
.v1-brand img{width:clamp(132px,17vw,178px);height:auto;}
.v1-nav{margin-left:auto;--ring:#191b16;}
.v1-nav>summary{border:1px solid var(--v1-lijn);color:var(--v1-inkt);}
.v1-nav-list{background:var(--v1-kalk-2);border:1px solid var(--v1-lijn);}
.v1-nav-list a{text-decoration:none;color:var(--v1-inkt);font-size:.92rem;font-weight:500;padding:11px 12px;border-radius:8px;display:block;}
.v1-nav-list a:hover{background:rgba(30,58,46,.08);}
.v1-header-cta{display:none;margin-left:auto;align-items:center;gap:14px;}
.v1-tel{text-decoration:none;font-size:.88rem;font-weight:600;white-space:nowrap;padding:9px 2px;}
.v1-tel:hover{color:var(--v1-groen);}
@media (min-width:960px){
  .v1-nav{margin-left:clamp(16px,3vw,44px);}
  .v1-nav-list a{font-size:.9rem;padding:10px 2px;border-radius:0;border-bottom:1px solid transparent;}
  .v1-nav-list a:hover{background:none;border-bottom-color:var(--v1-groen);}
  .v1-header-cta{display:flex;}
}
@media (max-width:959px){
  .v1-header-cta{display:flex;margin-left:0;}
  .v1-tel{display:none;}
  .v1-nav{margin-left:auto;order:3;}
  .v1-header-cta{order:2;}
}

/* -- 01 hero -------------------------------------------------------------- */
.v1-hero{position:relative;padding-bottom:clamp(40px,6vw,76px);}
.v1-hero-media{position:relative;}
.v1-hero-media img{width:100%;height:clamp(230px,44vw,520px);object-fit:cover;}
.v1-hero-body{position:relative;max-width:1240px;margin:0 auto;padding:0 20px;}
.v1-hero-panel{position:relative;z-index:3;margin-top:clamp(-58px,-5vw,-30px);width:min(660px,100%);background:var(--v1-kalk-2);border:1px solid var(--v1-lijn);padding:clamp(22px,3.4vw,44px);box-shadow:0 26px 60px rgba(25,27,22,.14);}
.v1-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0;}
.v1-hero-inset{position:absolute;z-index:4;right:20px;top:clamp(-96px,-9vw,-52px);width:clamp(108px,17vw,208px);border:6px solid var(--v1-kalk-2);box-shadow:0 18px 40px rgba(25,27,22,.26);margin:0;}
.v1-hero-inset img{width:100%;height:auto;}
.v1-hero-seal{position:relative;z-index:3;display:inline-flex;align-items:center;gap:14px;margin-top:20px;padding:12px 20px;background:#fff;border:1px solid var(--v1-lijn);max-width:100%;}
.v1-hero-seal img{width:clamp(84px,11vw,116px);height:auto;}
.v1-hero-seal p{margin:0;font-size:.76rem;font-weight:500;letter-spacing:.02em;color:var(--v1-gedempt);}
.v1-ticks{display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,56px);margin-top:clamp(26px,3.6vw,46px);padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--v1-lijn);}
.v1-ticks li{display:flex;flex-direction:column;gap:2px;min-width:0;}
.v1-ticks strong{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 60,"SOFT" 20;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:600;line-height:1;letter-spacing:-.02em;}
.v1-ticks span{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--v1-gedempt);}
/* Op smal scherm zat de inzet over de eerste regel van de kicker heen. Hij
   staat nu vrijwel volledig boven het paneel, en de kicker houdt daarnaast
   zelf ruimte vrij zodat er nooit letters onder verdwijnen. */
@media (max-width:899px){
  .v1-hero-inset{top:clamp(-118px,-22vw,-76px);}
  .v1-hero-panel .v1-kicker{padding-right:112px;}
}
@media (min-width:900px){
  .v1-hero-panel{margin-top:clamp(-150px,-11vw,-90px);}
  /* de inzet blijft boven in beeld en snijdt de onderrand van de foto */
  .v1-hero-inset{top:clamp(-130px,-9vw,-64px);bottom:auto;right:clamp(24px,7vw,110px);}
}

/* -- 02 manifest ---------------------------------------------------------- */
.v1-manifest{background:var(--v1-groen);color:var(--v1-op-groen);--ring:#efe9dd;--ring-halo:rgba(30,58,46,.95);padding:clamp(56px,8vw,120px) 0;}
.v1-manifest-inner{max-width:1240px;margin:0 auto;padding:0 20px;}
.v1-manifest-cols{display:grid;gap:clamp(18px,2.6vw,44px);grid-template-columns:1fr;max-width:960px;color:var(--v1-op-groen-gedempt);}
.v1-manifest-cols p{margin:0;}
.v1-manifest-facts{display:grid;gap:clamp(18px,2.4vw,34px);grid-template-columns:1fr;margin-top:clamp(34px,4.4vw,58px);padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(239,233,221,.24);}
.v1-manifest-facts dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v1-op-groen-gedempt);margin-bottom:6px;}
.v1-manifest-facts dd{margin:0;font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 20;font-size:clamp(1.02rem,1.6vw,1.32rem);line-height:1.28;}
@media (min-width:760px){.v1-manifest-cols{grid-template-columns:1fr 1fr;}.v1-manifest-facts{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* -- 03 register (staalkaart) --------------------------------------------- */
.v1-register{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,120px) 20px;}
.v1-register-head{display:grid;gap:clamp(16px,2.6vw,48px);grid-template-columns:1fr;align-items:end;margin-bottom:clamp(30px,4vw,54px);}
.v1-register-intro{color:var(--v1-gedempt);display:grid;gap:14px;}
.v1-register-intro p{margin:0;}
.v1-register-check a{color:var(--v1-goud);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;}
.v1-register-check a span{display:inline-block;margin-left:6px;transition:transform .2s;}
.v1-register-check a:hover span{transform:translateX(4px);}
.v1-swatches{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:1fr;}
.v1-swatch{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;min-height:96px;padding:18px 20px;background:var(--v1-kalk-2);border:1px solid var(--v1-lijn);isolation:isolate;}
.v1-swatch-fill{position:absolute;inset:0;z-index:-1;background:var(--sw);transform:scaleX(0);transform-origin:left center;opacity:.16;}
.has-motion .v1-swatch-fill{transition:transform .85s cubic-bezier(.16,.84,.44,1),opacity .3s;}
.has-motion .v1-swatch.is-in .v1-swatch-fill{transform:scaleX(1);}
.v1-swatch:not(.is-in) .v1-swatch-fill{transform:scaleX(1);}
.has-motion .v1-swatch:not(.is-in) .v1-swatch-fill{transform:scaleX(0);}
.v1-swatch:hover .v1-swatch-fill{opacity:.3;transform:scaleX(1);}
.v1-swatch-no{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--sw);display:grid;place-items:center;font-size:.7rem;font-weight:700;letter-spacing:.04em;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.v1-swatch-name{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 30,"SOFT" 20;font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:600;line-height:1.22;letter-spacing:-.008em;min-width:0;}
.v1-register-foot{margin-top:clamp(24px,3vw,38px);max-width:62ch;color:var(--v1-gedempt);font-size:.95rem;}
@media (min-width:560px){.v1-swatches{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1000px){
  .v1-swatches{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* Kop links onderaan, toelichting rechts ernaast. Met de drie kinderen in
     bronvolgorde belandde de h2 rechtsboven en bleef er een groot gat rechts
     onder; expliciet plaatsen haalt dat gat weg. */
  .v1-register-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .v1-register-head .v1-eyebrow{grid-column:1;grid-row:1;margin-bottom:0;align-self:end;}
  .v1-register-head .v1-h2{grid-column:1;grid-row:2;margin:0;align-self:end;}
  .v1-register-intro{grid-column:2;grid-row:1 / span 2;align-self:end;}
}

/* -- 04 diensten ---------------------------------------------------------- */
.v1-diensten{max-width:1240px;margin:0 auto;padding:0 20px clamp(56px,8vw,120px);display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr;}
.v1-diensten-aside p:last-child{margin-top:22px;}
.v1-diensten-note{color:var(--v1-gedempt);max-width:34ch;margin:0;}
.v1-dienstlijst{display:grid;gap:0;border-top:1px solid var(--v1-lijn);}
.v1-dienstlijst li{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(14px,2vw,28px);row-gap:6px;padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--v1-lijn);align-items:start;}
.v1-dienst-no{font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--v1-goud);padding-top:.42em;grid-row:1 / span 2;}
.v1-dienstlijst h3{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 36,"SOFT" 20;font-size:clamp(1.1rem,1.8vw,1.42rem);font-weight:600;line-height:1.22;letter-spacing:-.01em;margin:0;min-width:0;}
.v1-dienstlijst p{margin:0;color:var(--v1-gedempt);font-size:.96rem;max-width:56ch;min-width:0;}
@media (min-width:900px){.v1-diensten{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);}.v1-diensten-aside{position:sticky;top:104px;align-self:start;}}

/* -- 05 werk (mozaïek) ---------------------------------------------------- */
.v1-werk{background:var(--v1-kalk-2);border-top:1px solid var(--v1-lijn);border-bottom:1px solid var(--v1-lijn);padding:clamp(56px,8vw,120px) 0;}
.v1-werk-head{max-width:1240px;margin:0 auto clamp(28px,3.6vw,48px);padding:0 20px;}
.v1-mosaic{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;gap:clamp(14px,1.8vw,26px);}
.v1-mosaic-band{display:grid;gap:clamp(14px,1.8vw,26px);grid-template-columns:1fr;}
.v1-tile{margin:0;min-width:0;}
.v1-tile img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;}
.v1-tile figcaption{margin-top:10px;font-size:.82rem;line-height:1.45;color:var(--v1-gedempt);}
@media (min-width:820px){
  /* Elke kolom krijgt een fr gelijk aan de beeldverhouding van zijn eigen foto,
     zodat een rij met ongelijke verhoudingen vanzelf op één onderlijn uitkomt. */
  .v1-mosaic-band-a{grid-template-columns:1.7778fr .75fr 1.3333fr;}
  .v1-mosaic-band-b{grid-template-columns:.75fr 1.7778fr .75fr;}
  .v1-mosaic-band-b{margin-top:clamp(0px,2vw,26px);}
}

/* -- 06 werkplaats -------------------------------------------------------- */
.v1-werkplaats{position:relative;max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,120px) 20px;display:grid;gap:clamp(24px,3vw,0px);grid-template-columns:1fr;}
.v1-werkplaats-media img{width:100%;height:clamp(220px,40vw,500px);object-fit:cover;}
.v1-werkplaats-panel{background:var(--v1-kalk-2);border:1px solid var(--v1-lijn);padding:clamp(24px,3.4vw,46px);}
.v1-werkplaats-panel p{margin:0 0 16px;color:var(--v1-gedempt);}
.v1-werkplaats-list{display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--v1-lijn);}
.v1-werkplaats-list li{position:relative;padding-left:24px;font-size:.94rem;font-weight:500;}
.v1-werkplaats-list li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--v1-goud-deco);}
.v1-werkplaats-inset{display:none;}
@media (min-width:900px){
  .v1-werkplaats{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;}
  .v1-werkplaats-media{grid-column:1 / span 8;grid-row:1;}
  .v1-werkplaats-panel{grid-column:6 / span 7;grid-row:1;margin-top:clamp(60px,8vw,120px);z-index:2;box-shadow:0 26px 60px rgba(25,27,22,.16);}
  .v1-werkplaats-inset{display:block;grid-column:1 / span 3;grid-row:1;margin:0;align-self:end;z-index:3;border:6px solid var(--v1-kalk);box-shadow:0 18px 40px rgba(25,27,22,.24);transform:translateY(46px);}
}

/* -- 07 opdrachtgevers ---------------------------------------------------- */
.v1-quotes{background:var(--v1-groen);color:var(--v1-op-groen);--ring:#efe9dd;--ring-halo:rgba(30,58,46,.95);padding:clamp(56px,8vw,120px) 0;}
.v1-quotes-head{max-width:1240px;margin:0 auto clamp(26px,3.4vw,44px);padding:0 20px;}
.v1-quotes-head .v1-eyebrow{color:#d9c896;}
.v1-quotes-wall{max-width:1240px;margin:0 auto;padding:0 20px;columns:1;column-gap:clamp(14px,1.8vw,24px);}
.v1-quote{break-inside:avoid;margin:0 0 clamp(14px,1.8vw,24px);padding:clamp(20px,2.4vw,30px);border:1px solid rgba(239,233,221,.22);background:rgba(239,233,221,.045);}
.v1-quote blockquote p{margin:0;font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 24,"SOFT" 24;font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.44;letter-spacing:-.004em;}
.v1-quote figcaption{margin-top:16px;padding-top:14px;border-top:1px solid rgba(239,233,221,.22);font-size:.82rem;font-weight:600;letter-spacing:.04em;}
.v1-quote figcaption span{display:block;font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:var(--v1-op-groen-gedempt);margin-top:3px;}
@media (min-width:680px){.v1-quotes-wall{columns:2;}}
@media (min-width:1060px){.v1-quotes-wall{columns:3;}}

/* -- 08 voor wie ---------------------------------------------------------- */
.v1-voorwie{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,110px) 20px;}
.v1-voorwie-inner{border-top:2px solid var(--v1-inkt);padding-top:clamp(22px,3vw,36px);}
.v1-tags{display:flex;flex-wrap:wrap;gap:8px;}
.v1-tags li{max-width:100%;padding:9px 17px;border:1px solid var(--v1-lijn);border-radius:999px;background:var(--v1-kalk-2);font-size:.88rem;font-weight:500;}

/* -- 09 vacature ---------------------------------------------------------- */
.v1-vacature{background:var(--v1-inkt);color:var(--v1-kalk);--ring:#efe9dd;--ring-halo:rgba(25,27,22,.95);padding:clamp(52px,7vw,96px) 20px;display:grid;gap:clamp(26px,3.4vw,56px);grid-template-columns:1fr;max-width:1240px;margin:0 auto;}
.v1-vacature-copy p{margin:0 0 20px;color:var(--v1-op-inkt-gedempt);max-width:52ch;}
.v1-vacature-actions{display:flex;flex-wrap:wrap;gap:12px;}
.v1-vacature-terms{display:grid;gap:0;align-content:start;border-top:1px solid rgba(239,233,221,.22);}
.v1-vacature-terms li{padding:14px 0;border-bottom:1px solid rgba(239,233,221,.22);font-size:.94rem;color:var(--v1-op-inkt-gedempt);}
.v1-vacature-terms strong{color:var(--v1-kalk);font-weight:600;}
@media (min-width:900px){.v1-vacature{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;}}

/* -- 10 offerte ----------------------------------------------------------- */
.v1-offerte{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,120px) 20px;display:grid;gap:clamp(26px,3.4vw,56px);grid-template-columns:1fr;align-items:start;}
.v1-offerte-note{color:var(--v1-gedempt);max-width:48ch;margin:0 0 26px;}
.v1-form{display:grid;gap:16px;}
.v1-field-row{display:grid;gap:16px;grid-template-columns:1fr;}
.v1-field{display:grid;gap:6px;margin:0;min-width:0;}
.v1-field label,.v1-fieldset legend{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--v1-gedempt);}
.v1-field input,.v1-field select,.v1-field textarea{width:100%;min-width:0;padding:13px 14px;background:var(--v1-kalk-2);border:1px solid var(--v1-lijn);border-radius:2px;font-size:.98rem;}
.v1-field textarea{resize:vertical;}
.v1-field input:hover,.v1-field select:hover,.v1-field textarea:hover{border-color:var(--v1-gedempt);}
.v1-fieldset legend{margin-bottom:10px;}
.v1-checks{display:flex;flex-wrap:wrap;gap:8px;}
.v1-checks label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 15px;border:1px solid var(--v1-lijn);border-radius:999px;background:var(--v1-kalk-2);font-size:.9rem;cursor:pointer;max-width:100%;}
.v1-checks input{accent-color:var(--v1-groen);width:16px;height:16px;}
.v1-checks label:hover{border-color:var(--v1-groen);}
.v1-form-actions{margin:6px 0 0;}
.v1-form-help{margin:0;font-size:.88rem;color:var(--v1-gedempt);}
.v1-form-help a{color:var(--v1-goud);font-weight:600;}
.v1-offerte-card{background:var(--v1-groen);color:var(--v1-op-groen);--ring:#efe9dd;--ring-halo:rgba(30,58,46,.95);padding:clamp(20px,2.4vw,28px);}
.v1-offerte-photo{width:100%;height:clamp(200px,32vw,300px);object-fit:cover;object-position:50% 34%;margin-bottom:24px;}
.v1-contact{display:grid;gap:18px;}
.v1-contact dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v1-op-groen-gedempt);margin-bottom:4px;}
.v1-contact dd{margin:0;font-size:1.02rem;line-height:1.5;}
.v1-contact a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(239,233,221,.45);}
.v1-contact a:hover{border-bottom-color:currentColor;}
.v1-offerte-socials{display:flex;gap:14px;margin:24px 0 0;padding-top:14px;border-top:1px solid rgba(239,233,221,.24);font-size:.86rem;font-weight:600;}
.v1-offerte-socials a{color:var(--v1-op-groen);text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(239,233,221,.45);}
@media (min-width:560px){.v1-field-row{grid-template-columns:1fr 1fr;}}
@media (min-width:900px){.v1-offerte{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);}}

/* -- footer --------------------------------------------------------------- */
.v1-footer{background:#141610;color:var(--v1-kalk);--ring:#efe9dd;--ring-halo:rgba(20,22,16,.95);padding:clamp(44px,6vw,76px) 20px 76px;}
.v1-footer-inner{max-width:1240px;margin:0 auto;display:grid;gap:clamp(26px,3vw,44px);grid-template-columns:1fr;}
.v1-footer-brand img{width:172px;height:auto;margin-bottom:18px;}
.v1-footer-brand p{margin:0;font-size:.92rem;color:var(--v1-op-inkt-gedempt);}
.v1-footer-nav{display:flex;flex-direction:column;gap:4px;}
.v1-footer-nav a{color:var(--v1-kalk);text-decoration:none;font-size:.94rem;width:fit-content;padding:5px 0;border-bottom:1px solid transparent;}
.v1-footer-nav a:hover{border-bottom-color:var(--v1-kalk);}
.v1-footer-contact{display:flex;flex-direction:column;gap:4px;}
.v1-footer-contact a{color:var(--v1-kalk);text-decoration:none;font-size:1.02rem;font-weight:600;width:fit-content;padding:5px 0;border-bottom:1px solid rgba(239,233,221,.4);}
.v1-footer-credit{max-width:1240px;margin:clamp(30px,4vw,52px) auto 0;padding-top:22px;border-top:1px solid rgba(239,233,221,.2);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.84rem;color:var(--v1-op-inkt-gedempt);}
.v1-footer-credit a{color:var(--v1-kalk);font-weight:600;}
@media (min-width:760px){.v1-footer-inner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}}


/* ==========================================================================
   VERSIE 2 — ONDER DE VERF
   ========================================================================== */
.v2-root{
  --v2-inkt:#15170f;
  --v2-kalk:#f4f1ea;
  --v2-op-inkt:#f4f1ea;
  --v2-op-inkt-gedempt:#9a9c8e;
  --v2-l1:#f4f1ea;      --v2-l1-tekst:#15170f;  --v2-l1-gedempt:#57594b;
  --v2-l2:#e2caa0;      --v2-l2-tekst:#15170f;  --v2-l2-gedempt:#4a4636;
  --v2-l3:#9c3b28;      --v2-l3-tekst:#f9f2ef;  --v2-l3-gedempt:#f0ddd6;
  --v2-l4:#20372a;      --v2-l4-tekst:#f4f1ea;  --v2-l4-gedempt:#aec1ae;
  --v2-l5:#c3b8a4;      --v2-l5-tekst:#15170f;  --v2-l5-gedempt:#41402f;
  --v2-l6:#2c3a70;      --v2-l6-tekst:#f4f1ea;  --v2-l6-gedempt:#bcc4de;
  --v2-l7:#15170f;      --v2-l7-tekst:#f4f1ea;  --v2-l7-gedempt:#9a9c8e;
  --ring:#f4f1ea;
  --ring-halo:rgba(21,23,15,.95);
  background:var(--v2-inkt);
  color:var(--v2-op-inkt);
  font-family:"Inter",system-ui,sans-serif;
}
.v2-root section{scroll-margin-top:86px;}

/* -- typografie ----------------------------------------------------------- */
.v2-h1{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(1.72rem,6.6vw,4.5rem);line-height:.96;letter-spacing:-.028em;text-transform:uppercase;margin:0 0 24px;display:grid;justify-items:start;gap:2px;}
.v2-h1-l{display:block;}
.v2-h1-over{background:var(--v2-inkt);box-shadow:0 0 0 .18em var(--v2-inkt);}
.v2-h2{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(1.62rem,4.6vw,3.3rem);line-height:1.02;letter-spacing:-.026em;text-transform:uppercase;margin:0 0 22px;}
.v2-kicker{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-op-inkt-gedempt);margin:0 0 20px;}
.v2-lead{font-size:clamp(1rem,1.4vw,1.14rem);color:var(--v2-op-inkt-gedempt);max-width:44ch;margin:0 0 28px;}
.v2-laaglabel{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px;}
.v2-laaglabel span[aria-hidden]{padding:5px 9px;border:1px solid currentColor;border-radius:2px;letter-spacing:.1em;}
.v2-laaglead{font-size:clamp(1rem,1.4vw,1.12rem);max-width:56ch;margin:0 0 clamp(28px,3.6vw,46px);}

/* -- knoppen -------------------------------------------------------------- */
.v2-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:2px;font-size:.94rem;font-weight:700;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;}
.v2-btn-sm{min-height:40px;padding:9px 17px;font-size:.85rem;}
.v2-btn-solid{background:var(--v2-kalk);color:var(--v2-inkt);--ring:#15170f;--ring-halo:rgba(244,241,234,.95);}
.v2-btn-solid:hover{background:#fff;transform:translateY(-1px);}
.v2-btn-ghost{border-color:rgba(244,241,234,.5);color:var(--v2-kalk);}
.v2-btn-ghost:hover{background:rgba(244,241,234,.12);}
.v2-btn-outline{border-color:currentColor;color:inherit;}
.v2-btn-outline:hover{background:rgba(21,23,15,.1);}
.v2-btn-arrow{transition:transform .22s;}
.v2-btn:hover .v2-btn-arrow{transform:translateX(4px);}

/* -- header --------------------------------------------------------------- */
.v2-header{position:sticky;top:0;z-index:80;background:rgba(21,23,15,.93);backdrop-filter:blur(10px);border-bottom:1px solid rgba(244,241,234,.16);}
.v2-header-inner{position:relative;max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.v2-brand{flex:0 0 auto;display:flex;align-items:center;padding:6px 0;}
.v2-brand img{width:clamp(126px,16vw,168px);height:auto;}
.v2-nav{margin-left:auto;}
.v2-nav>summary{border:1px solid rgba(244,241,234,.34);color:var(--v2-kalk);}
.v2-nav-list{background:#1c1e15;border:1px solid rgba(244,241,234,.18);}
.v2-nav-list a{display:block;text-decoration:none;color:var(--v2-kalk);font-size:.9rem;font-weight:500;padding:11px 12px;border-radius:2px;}
.v2-nav-list a span{color:var(--v2-op-inkt-gedempt);font-size:.74rem;font-weight:700;letter-spacing:.08em;margin-right:6px;}
.v2-nav-list a:hover{background:rgba(244,241,234,.1);}
@media (min-width:960px){
  .v2-nav{margin-left:clamp(14px,2.4vw,36px);}
  .v2-nav-list a{padding:10px 0;font-size:.85rem;border-bottom:1px solid transparent;border-radius:0;}
  .v2-nav-list a:hover{background:none;border-bottom-color:var(--v2-kalk);}
  .v2-nav-list a span{display:none;}
}
@media (max-width:959px){.v2-nav{order:3;}.v2-btn-sm.v2-btn-solid{order:2;margin-left:auto;}}

/* -- spine (kleurtrap, decoratief) ---------------------------------------- */
.v2-spine{display:none;}
@media (min-width:1420px){
  /* pas tonen wanneer de inhoudskolom echt een linkermarge overhoudt */
  .v2-spine{display:flex;position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:70;flex-direction:column;align-items:center;gap:12px;pointer-events:none;}
  .v2-spine-label{writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--v2-op-inkt-gedempt);mix-blend-mode:difference;}
  .v2-spine-stack{display:flex;flex-direction:column;gap:3px;padding:6px;border-radius:999px;background:rgba(21,23,15,.5);backdrop-filter:blur(6px);}
  .v2-spine-stack li{width:9px;height:22px;border-radius:2px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);opacity:.42;transition:opacity .3s,height .3s;}
  .v2-spine-stack li.is-here{opacity:1;height:38px;}
}

/* -- hero ----------------------------------------------------------------- */
.v2-hero{position:relative;background:var(--v2-inkt);overflow:hidden;}
.v2-hero-grid{position:relative;max-width:1280px;margin:0 auto;padding:clamp(34px,5vw,70px) 20px clamp(44px,6vw,86px);}
.v2-hero-copy{position:relative;z-index:3;max-width:640px;}
.v2-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0;}
.v2-hero-photo{position:relative;margin:clamp(26px,4vw,0px) 0 0;}
.v2-hero-photo img{width:100%;height:clamp(300px,64vw,560px);object-fit:cover;}
.v2-hero-chip{position:relative;z-index:4;display:flex;align-items:center;gap:12px;margin-top:14px;padding:11px 16px;background:var(--v2-kalk);color:var(--v2-inkt);font-size:.76rem;font-weight:600;line-height:1.35;max-width:100%;}
.v2-hero-chip img{width:92px;height:auto;}
.v2-chipstack{display:flex;gap:3px;flex:0 0 auto;}
.v2-chipstack i{display:block;width:11px;height:26px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);}
@media (min-width:900px){
  /* De rechterkolom loopt door tot de rand van het scherm: alleen links wordt
     uitgelijnd op de inhoudskolom, rechts is er geen padding meer. */
  .v2-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);column-gap:56px;align-items:center;min-height:min(88vh,880px);
    padding:clamp(40px,5vw,80px) 0 clamp(40px,5vw,80px) max(20px,calc((100vw - 1280px) / 2 + 20px));max-width:none;}
  .v2-hero-copy{grid-column:1;grid-row:1;max-width:none;}
  /* negatieve verticale marges heffen de padding van de sectie op, zodat de
     foto van boven tot onder doorloopt in plaats van als kaart te staan */
  .v2-hero-photo{grid-column:2;grid-row:1;align-self:stretch;margin:calc(-1 * clamp(40px,5vw,80px)) 0;}
  .v2-hero-photo img{height:100%;min-height:520px;}
  /* De laatste twee kopregels lijnen rechts uit op de tekstkolom en steken er
     dan met een vaste marge overheen, de kolomtussenruimte van 56px plus 40px.
     Zo is de kruising even groot op elke breedte, in plaats van weg te lopen
     zodra de kolom meegroeit. Het blok draagt zijn eigen inktvlak, dus het
     contrast hangt nergens van de foto af. */
  .v2-h1-over{position:relative;z-index:5;justify-self:end;margin-right:-96px;}
  .v2-hero-chip-erm{position:absolute;z-index:6;right:clamp(20px,3vw,44px);top:clamp(40px,6vw,90px);margin:0;}
  .v2-hero-chip-stack{position:relative;z-index:6;grid-column:2;grid-row:1;align-self:end;justify-self:start;margin:0 0 clamp(26px,3.4vw,52px) clamp(-56px,-3vw,-30px);max-width:290px;}
}

/* -- lagen (gedeelde opmaak) ---------------------------------------------- */
.v2-laag{padding:clamp(56px,8vw,120px) 20px;}
.v2-laag>*{max-width:1180px;margin-left:auto;margin-right:auto;}
.v2-laag1{background:var(--v2-l1);color:var(--v2-l1-tekst);--ring:#15170f;--ring-halo:rgba(244,241,234,.95);}
.v2-laag2{background:var(--v2-l2);color:var(--v2-l2-tekst);--ring:#15170f;--ring-halo:rgba(226,202,160,.95);}
.v2-laag3{background:var(--v2-l3);color:var(--v2-l3-tekst);--ring:#f9f2ef;--ring-halo:rgba(156,59,40,.95);}
.v2-laag4{background:var(--v2-l4);color:var(--v2-l4-tekst);--ring:#f4f1ea;--ring-halo:rgba(32,55,42,.95);}
.v2-laag5{background:var(--v2-l5);color:var(--v2-l5-tekst);--ring:#15170f;--ring-halo:rgba(195,184,164,.95);}
.v2-laag6{background:var(--v2-l6);color:var(--v2-l6-tekst);--ring:#f4f1ea;--ring-halo:rgba(44,58,112,.95);}
.v2-laag7{background:var(--v2-l7);color:var(--v2-l7-tekst);--ring:#f4f1ea;--ring-halo:rgba(21,23,15,.95);}
.v2-laag1 .v2-laaglead,.v2-laag1 .v2-laaglabel{color:var(--v2-l1-gedempt);}
.v2-laag2 .v2-laaglabel{color:var(--v2-l2-gedempt);}
.v2-laag3 .v2-laaglabel{color:var(--v2-l3-gedempt);}
.v2-laag4 .v2-laaglabel{color:var(--v2-l4-gedempt);}
.v2-laag5 .v2-laaglabel{color:var(--v2-l5-gedempt);}
.v2-laag6 .v2-laaglabel{color:var(--v2-l6-gedempt);}
.v2-laag7 .v2-laaglabel{color:var(--v2-l7-gedempt);}

/* -- laag 01 ledger ------------------------------------------------------- */
.v2-ledger{border-top:2px solid currentColor;}
.v2-ledger li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;padding:clamp(15px,2vw,22px) 0;border-bottom:1px solid rgba(21,23,15,.18);align-items:baseline;}
.v2-ledger-no{font-size:.76rem;font-weight:800;letter-spacing:.1em;color:var(--v2-l1-gedempt);}
.v2-ledger-name{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:clamp(1.02rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.014em;min-width:0;}
.v2-ledger-note{grid-column:2;font-size:.88rem;color:var(--v2-l1-gedempt);min-width:0;}
@media (min-width:760px){
  .v2-ledger li{grid-template-columns:auto minmax(0,1.1fr) minmax(0,.9fr);align-items:center;}
  .v2-ledger-note{grid-column:auto;text-align:right;}
}

/* -- laag 02 kleurtrap (volledig CSS, werkt zonder JS) -------------------- */
.v2-trap{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:start;}
.v2-trap-copy p{margin:0 0 16px;color:var(--v2-l2-gedempt);max-width:52ch;}
.v2-trap-lead{font-size:clamp(1.04rem,1.6vw,1.24rem);color:var(--v2-l2-tekst)!important;font-weight:500;}
.v2-trap-cta{margin-top:24px!important;}
.v2-trap-set{position:relative;}
.v2-trap-set legend{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-l2-gedempt);margin-bottom:16px;max-width:34ch;}
.v2-trap-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.v2-trap-labels{display:grid;gap:6px;}
.v2-trap-labels label{display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 14px;background:rgba(255,255,255,.34);border:1px solid rgba(21,23,15,.2);cursor:pointer;transition:background .2s,border-color .2s,transform .2s;}
.v2-trap-labels label:hover{background:rgba(255,255,255,.6);}
.v2-trap-sw{flex:0 0 auto;width:30px;height:30px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);}
.v2-trap-txt{font-size:.9rem;line-height:1.4;min-width:0;}
.v2-trap-txt b{display:block;font-weight:700;}
.v2-trap-vis{display:none;}
@media (min-width:640px){
  .v2-trap-vis{display:flex;flex-direction:column;margin-top:22px;border:1px solid rgba(21,23,15,.22);background:rgba(255,255,255,.3);padding:14px;gap:0;}
  .v2-trap-band{display:block;height:26px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:height .35s cubic-bezier(.16,.84,.44,1),opacity .35s;}
  .v2-trap-edge{display:block;height:16px;background:repeating-linear-gradient(90deg,#8a7a63 0 7px,#a3937c 7px 14px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);}
}
/* Vijf expliciete standen: alles boven de gekozen laag wordt weggenomen. */
#v2-trap-5:checked~.v2-trap-vis .v2-trap-band[data-i="5"]{height:56px;}
#v2-trap-4:checked~.v2-trap-vis .v2-trap-band[data-i="5"]{height:5px;opacity:.3;}
#v2-trap-4:checked~.v2-trap-vis .v2-trap-band[data-i="4"]{height:56px;}
#v2-trap-3:checked~.v2-trap-vis .v2-trap-band[data-i="5"],
#v2-trap-3:checked~.v2-trap-vis .v2-trap-band[data-i="4"]{height:5px;opacity:.3;}
#v2-trap-3:checked~.v2-trap-vis .v2-trap-band[data-i="3"]{height:56px;}
#v2-trap-2:checked~.v2-trap-vis .v2-trap-band[data-i="5"],
#v2-trap-2:checked~.v2-trap-vis .v2-trap-band[data-i="4"],
#v2-trap-2:checked~.v2-trap-vis .v2-trap-band[data-i="3"]{height:5px;opacity:.3;}
#v2-trap-2:checked~.v2-trap-vis .v2-trap-band[data-i="2"]{height:56px;}
#v2-trap-1:checked~.v2-trap-vis .v2-trap-band[data-i="5"],
#v2-trap-1:checked~.v2-trap-vis .v2-trap-band[data-i="4"],
#v2-trap-1:checked~.v2-trap-vis .v2-trap-band[data-i="3"],
#v2-trap-1:checked~.v2-trap-vis .v2-trap-band[data-i="2"]{height:5px;opacity:.3;}
#v2-trap-1:checked~.v2-trap-vis .v2-trap-band[data-i="1"]{height:72px;}
#v2-trap-5:checked~.v2-trap-labels label[for="v2-trap-5"],
#v2-trap-4:checked~.v2-trap-labels label[for="v2-trap-4"],
#v2-trap-3:checked~.v2-trap-labels label[for="v2-trap-3"],
#v2-trap-2:checked~.v2-trap-labels label[for="v2-trap-2"],
#v2-trap-1:checked~.v2-trap-labels label[for="v2-trap-1"]{background:var(--v2-inkt);color:var(--v2-kalk);border-color:var(--v2-inkt);transform:translateX(6px);}
#v2-trap-5:focus-visible~.v2-trap-labels label[for="v2-trap-5"],
#v2-trap-4:focus-visible~.v2-trap-labels label[for="v2-trap-4"],
#v2-trap-3:focus-visible~.v2-trap-labels label[for="v2-trap-3"],
#v2-trap-2:focus-visible~.v2-trap-labels label[for="v2-trap-2"],
#v2-trap-1:focus-visible~.v2-trap-labels label[for="v2-trap-1"]{outline:2px solid var(--v2-inkt);outline-offset:2px;box-shadow:0 0 0 5px rgba(226,202,160,.95);}
.v2-trap-caption{margin:14px 0 0;font-size:.8rem;line-height:1.45;color:var(--v2-l2-gedempt);max-width:40ch;}
@media (min-width:900px){.v2-trap{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);}}

/* -- laag 03 records ------------------------------------------------------ */
.v2-records{display:grid;gap:0;border-top:1px solid rgba(249,242,239,.32);}
.v2-record{display:grid;gap:6px;grid-template-columns:1fr;padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid rgba(249,242,239,.32);}
.v2-record-place{margin:0;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-l3-gedempt);}
.v2-record-title{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:clamp(1.14rem,2.2vw,1.66rem);line-height:1.18;letter-spacing:-.018em;margin:0;min-width:0;}
.v2-record-body{margin:0;color:var(--v2-l3-gedempt);font-size:.96rem;max-width:60ch;min-width:0;}
.v2-record-figure{margin:clamp(30px,4vw,50px) 0 0;}
.v2-record-figure img{width:100%;height:auto;}
.v2-record-figure figcaption{margin-top:10px;font-size:.82rem;color:var(--v2-l3-gedempt);}
@media (min-width:820px){
  .v2-record{grid-template-columns:minmax(0,.28fr) minmax(0,.72fr);column-gap:clamp(20px,3vw,44px);}
  .v2-record-place{grid-row:1;grid-column:1;padding-top:.5em;}
  .v2-record-title{grid-row:1;grid-column:2;}
  .v2-record-body{grid-row:2;grid-column:2;margin-top:6px;}
}

/* -- laag 04 triptiek ----------------------------------------------------- */
.v2-triptych{display:grid;gap:clamp(14px,2vw,26px);grid-template-columns:1fr;align-items:end;}
.v2-triptych figure{margin:0;min-width:0;}
.v2-triptych img{width:100%;height:auto;}
.v2-triptych figcaption{margin-top:10px;font-size:.82rem;color:var(--v2-l4-gedempt);}
.v2-triptych-note{margin:clamp(28px,3.4vw,44px) 0 0;max-width:62ch;color:var(--v2-l4-gedempt);font-size:.98rem;}
@media (min-width:800px){
  /* fr gelijk aan de beeldverhouding, zodat de drie ongelijke formaten vanzelf
     dezelfde hoogte krijgen en op één onderlijn uitkomen */
  .v2-triptych{grid-template-columns:1.25fr .7fr .7fr;}
}

/* -- laag 05 bedrijf ------------------------------------------------------ */
.v2-bedrijf{display:grid;gap:clamp(26px,3.4vw,48px);grid-template-columns:1fr;}
.v2-bedrijf-copy p{margin:0 0 16px;color:var(--v2-l5-gedempt);max-width:52ch;}
.v2-stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-top:26px;padding-top:22px;border-top:1px solid rgba(21,23,15,.24);}
.v2-stats dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-l5-gedempt);margin-bottom:3px;}
.v2-stats dd{margin:0;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:clamp(.98rem,1.5vw,1.16rem);line-height:1.24;}
.v2-bedrijf-erm{background:var(--v2-inkt);color:var(--v2-kalk);--ring:#f4f1ea;--ring-halo:rgba(21,23,15,.95);padding:clamp(22px,2.6vw,32px);align-self:start;}
.v2-bedrijf-erm h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:1.05rem;margin:0 0 10px;}
.v2-bedrijf-erm p{margin:0 0 16px;font-size:.9rem;color:var(--v2-op-inkt-gedempt);}
.v2-specs{display:flex;flex-wrap:wrap;gap:7px;}
.v2-specs li{max-width:100%;padding:6px 12px;border:1px solid rgba(244,241,234,.32);font-size:.8rem;font-weight:500;}
.v2-erm-link{margin-top:18px!important;}
.v2-erm-link a{color:var(--v2-kalk);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;}
.v2-erm-link a span{display:inline-block;margin-left:6px;transition:transform .2s;}
.v2-erm-link a:hover span{transform:translateX(4px);}
.v2-bedrijf-photo{margin:0;}
/* Op volle breedte werd deze 16:9 opname een enorm blok met vooral een
   achterhoofd erin. Een bredere uitsnede, iets naar onderen, houdt het
   bedrijfslogo op de kleding in beeld. */
.v2-bedrijf-photo img{width:100%;height:auto;aspect-ratio:2.6/1;object-fit:cover;object-position:50% 58%;}
@media (min-width:900px){
  .v2-bedrijf{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
  .v2-bedrijf-photo{grid-column:1 / -1;}
}

/* -- laag 06 kaartendek --------------------------------------------------- */
.v2-deck{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr;}
.v2-card{margin:0;padding:clamp(20px,2.4vw,30px);background:rgba(244,241,234,.07);border:1px solid rgba(244,241,234,.24);min-width:0;}
.v2-card blockquote p{margin:0;font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.52;}
.v2-card figcaption{margin-top:16px;padding-top:14px;border-top:1px solid rgba(244,241,234,.24);font-size:.82rem;color:var(--v2-l6-gedempt);}
.v2-card figcaption b{display:block;color:var(--v2-l6-tekst);font-weight:700;font-size:.9rem;}
@media (min-width:700px){
  .v2-deck{grid-template-columns:repeat(2,minmax(0,1fr));}
  .v2-card:nth-child(1){grid-column:span 2;}
  .v2-card:nth-child(1) blockquote p{font-size:clamp(1.1rem,1.9vw,1.42rem);line-height:1.4;}
}
@media (min-width:1040px){
  .v2-deck{grid-template-columns:repeat(3,minmax(0,1fr));}
  .v2-card:nth-child(1){grid-column:span 3;}
  .v2-card:nth-child(2),.v2-card:nth-child(3){transform:translateY(-8px);}
}

/* -- laag 07 offerte ------------------------------------------------------ */
.v2-slot{display:grid;gap:clamp(26px,3.4vw,52px);grid-template-columns:1fr;align-items:start;}
.v2-form{display:grid;gap:15px;}
.v2-form-note{margin:0;color:var(--v2-l7-gedempt);max-width:50ch;}
.v2-field-row{display:grid;gap:15px;grid-template-columns:1fr;}
.v2-field{display:grid;gap:6px;margin:0;min-width:0;}
.v2-field label{font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--v2-l7-gedempt);}
.v2-field input,.v2-field select,.v2-field textarea{width:100%;min-width:0;padding:13px 14px;background:rgba(244,241,234,.07);border:1px solid rgba(244,241,234,.3);border-radius:2px;color:var(--v2-kalk);font-size:.98rem;}
.v2-field textarea{resize:vertical;}
.v2-field input:hover,.v2-field select:hover,.v2-field textarea:hover{border-color:rgba(244,241,234,.6);}
.v2-field option{color:#15170f;}
.v2-form-actions{margin:6px 0 0;}
.v2-form-help{margin:0;font-size:.88rem;color:var(--v2-l7-gedempt);}
.v2-form-help a{color:var(--v2-kalk);font-weight:600;}
.v2-slot-side{display:grid;gap:clamp(22px,2.6vw,32px);}
.v2-contact{display:grid;gap:16px;}
.v2-contact dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-l7-gedempt);margin-bottom:4px;}
.v2-contact dd{margin:0;font-size:1rem;line-height:1.5;}
.v2-contact a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,241,234,.42);}
.v2-vacature{border:1px solid rgba(244,241,234,.26);padding:clamp(20px,2.4vw,26px);}
.v2-vacature h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:-.01em;margin:0 0 10px;}
.v2-vacature p{margin:0 0 16px;font-size:.9rem;color:var(--v2-l7-gedempt);}
.v2-vacature p:last-child{margin:0;}
@media (min-width:560px){.v2-field-row{grid-template-columns:1fr 1fr;}}
@media (min-width:900px){.v2-slot{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);}}

/* -- footer --------------------------------------------------------------- */
.v2-footer{background:#0e100a;color:var(--v2-kalk);--ring:#f4f1ea;--ring-halo:rgba(14,16,10,.95);padding:clamp(42px,6vw,72px) 20px 76px;}
.v2-footer-inner{max-width:1180px;margin:0 auto;display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr;align-items:start;}
.v2-footer-logo{width:164px;height:auto;}
.v2-footer-nav{display:flex;flex-direction:column;gap:4px;}
.v2-footer-nav a{color:var(--v2-kalk);text-decoration:none;font-size:.94rem;width:fit-content;padding:5px 0;border-bottom:1px solid transparent;}
.v2-footer-nav a:hover{border-bottom-color:var(--v2-kalk);}
.v2-footer-adres{margin:0;font-size:.92rem;color:var(--v2-op-inkt-gedempt);}
.v2-footer-adres a{color:var(--v2-kalk);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(244,241,234,.4);}
.v2-footer-credit{max-width:1180px;margin:clamp(28px,4vw,48px) auto 0;padding-top:22px;border-top:1px solid rgba(244,241,234,.18);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.84rem;color:var(--v2-op-inkt-gedempt);}
.v2-footer-credit a{color:var(--v2-kalk);font-weight:600;}
@media (min-width:760px){.v2-footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);}}