/* ==========================================================================
   Bluetek theme CSS — stamkaart v2.1 (G:\...\02 Huisstijl\Bluetek Stamkaart.dc.html)
   Basis: design/concept-D-synthese.html; beeldtaal volgens design/STAMKAART-TOKENS.md
   en het voorstel in design/voorstel-huisstijl-v2/.
   Kern: organisch vlak, technische lijn; één amber punt per beeld, op de lijn;
   per plek een eigen variant van kruis, stip en cirkel. Geen verlopen, geen
   schaduwen. Motion rustig (zie "SCROLL-LAAG" onderaan).
   ========================================================================== */

/* Lettertypen op de eigen server (geen verzoeken naar Google; zie privacybeleid).
   Hanken Grotesk (variabel) en Space Mono, SIL Open Font License: assets/fonts/OFL-*.txt. */
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/hanken-grotesk-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk'; font-style:italic; font-weight:100 900; font-display:swap; src:url(fonts/hanken-grotesk-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk'; font-style:italic; font-weight:100 900; font-display:swap; src:url(fonts/hanken-grotesk-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/space-mono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/space-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/space-mono-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/space-mono-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --petrol:#26586E;
  --petrol-donker:#1C4356;
  --petrol-licht:#7292A1;      /* woordmerk "tek" én lijnkleur van de detailtaal */
  --amber:#E5A13C;
  --amber-hover:#D4923A;       /* alleen als hover-toestand van de amber actieknop */
  --ijs:#D7E6EF;
  --wit:#F4F8FA;               /* gletsjerwit */
  --wit-puur:#FFFFFF;
  --lijn:#9DB4BE;              /* lijnblauw (45% petrol): fijne constructielijnen */
  --materiaal:#E4ECF1;         /* materiaalvlak */
  --materiaal-2:#EDF3F7;
  --body-var:#35516B;
  --secundair:#4E6478;
  --mono-sub:#6E89A0;
  --rand:#DAE7EF;
  --licht-petrol-a:#C6D8E4;
  --licht-petrol-b:#D7E6EF;
  --laag-licht:#C6D8E4;        /* dichte lagen in de doorsnede: iets donkerder dan ijs */
  --woordmerk-tek:var(--petrol-licht);
  --font-sans:'Hanken Grotesk','Segoe UI',Arial,sans-serif;
  --font-mono:'Space Mono','Segoe UI',monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Ankersprongen landen anders onder de sticky nav-balk. */
section[id]{scroll-margin-top:96px;}
body{
  margin:0;
  background:var(--wit);
  color:var(--petrol-donker);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--petrol); text-decoration:none;}
a:hover{color:var(--petrol-donker);}
img{max-width:100%; display:block;}
ul{margin:0; padding-left:20px;}

.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
.mono{font-family:var(--font-mono);}

h1,h2,h3{font-weight:800; line-height:1.15; margin:0;}
h2{font-size:clamp(30px,3.4vw,38px);}
h3{font-size:22px;}
p{margin:0 0 16px 0;}
p:last-child{margin-bottom:0;}

/* ---------- sectie-opener: amber punt (merk-amber) + mono-label ---------- */
.opener{display:flex; align-items:center; gap:10px;}
.opener .dot{width:9px; height:9px; border-radius:50%; background:var(--amber); flex-shrink:0;}
.opener .label{font-family:var(--font-mono); font-size:11px; letter-spacing:3px; color:var(--petrol); text-transform:uppercase;}
.opener.on-dark .label{color:var(--ijs);}

/* ---------- sectiekop met groot sectiecijfer ----------
   Het grote cijfer (01, 02 ...) staat achter de kop, zoals op de oude site.
   Op een getinte sectie in gletsjerwit, anders valt het weg tegen het ijs. */
.num-giant{
  font-family:var(--font-sans);
  font-weight:800;
  font-size:clamp(90px,12vw,190px);
  line-height:0.8;
  color:var(--ijs);
  letter-spacing:-4px;
  user-select:none;
  pointer-events:none;
}
section.tint .num-giant{color:var(--wit);}
.sec-head{position:relative; margin-bottom:48px;}
.sec-head .num-giant{position:absolute; top:-34px; left:-4px; z-index:0;}
.sec-head .sec-body{position:relative; z-index:1; padding-top:56px;}
.sec-head h2{margin:14px 0 0 0; max-width:680px;}
.sec-head p.intro{font-size:15.5px; line-height:1.75; color:var(--body-var); max-width:580px; margin:16px 0 0 0;}

section{padding:88px 0;}
section.tint{background:var(--ijs); border-radius:20px;}
section.tint .wrap{padding:64px 44px;}

/* ---------- knoppen ----------
   Op licht petrol gevuld; op petrol gletsjerwit; de actieknop van een blok mag
   amber (stamkaart v2.1, 10 Interactie). */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:700; font-size:14.5px;
  padding:13px 24px; border-radius:10px;
  background:var(--petrol); color:var(--wit);
  border:none; cursor:pointer;
}
.btn:hover{background:var(--petrol-donker); color:var(--wit);}
.btn.on-light{background:var(--wit); color:var(--petrol-donker);}
.btn.on-light:hover{background:var(--ijs); color:var(--petrol-donker);}
.btn.ghost{background:transparent; color:var(--wit); border:1.5px solid rgba(244,248,250,0.5);}
.btn.ghost:hover{background:rgba(244,248,250,0.12); color:var(--wit);}
.btn.amber{background:var(--amber); color:var(--petrol-donker);}
.btn.amber:hover{background:var(--amber-hover); color:var(--petrol-donker);}
.btn.on-light.ghost{color:var(--petrol-donker); border-color:var(--petrol-donker);}
.btn.on-light.ghost:hover{background:rgba(38,88,110,0.06);}
.btn:focus-visible,.link-arrow:focus-visible,a:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

.link-arrow{font-weight:700; font-size:14px; position:relative; padding-bottom:2px; white-space:nowrap;}
.link-arrow::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;}
.link-arrow:hover::after{transform:scaleX(1);}

/* ================= NAV ================= */
/* Geen backdrop-filter: die maakt van de balk het referentievlak voor
   position:fixed, waardoor het mobiele menu in een strook van de balkhoogte
   bleef hangen (ook live zo, gevonden 18-09). Zonder blur een effen achtergrond,
   anders schemert de pagina door de balk heen. */
.nav-outer{position:sticky; top:0; z-index:60; background:var(--wit); border-bottom:1px solid var(--rand);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 40px; max-width:1200px; margin:0 auto;}
.logo{font-weight:800; font-size:24px; line-height:1; white-space:nowrap; display:inline-flex; align-items:center;}
.logo svg{display:block; height:26px; width:auto;}
.logo .blue{color:var(--petrol-donker);}
.logo .tek{color:var(--woordmerk-tek);}
.logo .dot{color:var(--amber);}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links > ul{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.nav-links li{position:relative;}
.nav-links a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--petrol-donker); padding-bottom:3px; border-bottom:1.5px solid transparent;
}
.nav-links a:hover{border-bottom-color:var(--amber); color:var(--petrol-donker);}
/* Contact-knop in de nav: petrol met witte tekst. De amber actieknop hoort bij
   de CTA-blokken; twee amber knoppen tegelijk in beeld verliezen hun betekenis. */
.nav-links .btn{font-family:var(--font-sans); padding:10px 20px; letter-spacing:0; text-transform:none;}
.nav-links a.btn{color:var(--wit);}
.nav-links a.btn:hover{color:var(--wit); background:var(--petrol-donker); border-bottom-color:transparent;}
.burger{display:none; background:none; border:none; cursor:pointer; padding:4px;}
.burger span{display:block; width:22px; height:2px; background:var(--petrol-donker); margin:5px 0; transition:transform .2s ease, opacity .2s ease;}
.nav-close{display:none;}

@media (max-width:1000px){
  .nav{padding:16px 24px;}
  .nav-links{gap:20px;}
  .nav-links > ul{gap:20px;}
  .nav-links a{letter-spacing:1.2px;}
  .nav-links .btn{padding:9px 16px;}
}

/* Specialismen-dropdown: fototegels zonder verloop. De foto staat boven, het
   label in een zacht blok eronder (stamkaart 10: geen tekst op foto's). */
.nav-links .sub-menu{display:none;}
@media (min-width:761px){
  .nav-links li.menu-item-has-children{position:relative;}
  .nav-links .sub-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    display:none; list-style:none; margin:0; padding:14px; gap:10px; flex-wrap:wrap;
    background:var(--ijs); border-radius:16px; min-width:440px;
  }
  .nav-links li.menu-item-has-children:hover .sub-menu,
  .nav-links li.menu-item-has-children:focus-within .sub-menu{display:flex;}
  .nav-links .sub-menu li{flex:1 1 120px;}
  .nav-links .sub-menu a{
    display:flex; align-items:flex-end; min-height:132px; border-radius:12px; padding:0 12px 11px;
    color:var(--petrol-donker); background-color:var(--wit-puur);
    background-size:100% 88px; background-repeat:no-repeat; background-position:top center;
    border-bottom:none; text-transform:uppercase;
  }
  .nav-links .sub-menu a:hover{color:var(--petrol);}
  .nav-links .sub-menu a[href*="/specialismen/clt/"]{background-image:url(menu-clt.jpg);}
  .nav-links .sub-menu a[href*="/specialismen/natuursteen/"]{background-image:url(menu-natuursteen.jpg);}
  .nav-links .sub-menu a[href*="/specialismen/hsb/"]{background-image:url(menu-hsb.jpg);}
}

/* ================= HERO =================
   Stamkaart v2.1, 06 variant A2: contourvlak + intersection. Lijnen op
   rechtermarge (48px) en basislijn van de kicker; punt op de kruising. */
.hero-section{padding:28px 0 0 0;}
.hero{background:var(--petrol); border-radius:20px; position:relative; overflow:hidden;}
.hero-contour{position:absolute; top:-130px; right:-90px; width:400px; height:300px;
  background:rgba(215,230,239,0.12); border-radius:58% 42% 55% 45% / 52% 60% 40% 48%;}
.hero-construct{position:absolute; top:0; right:0; pointer-events:none;}
.hero-construct--d{width:400px; height:180px;}
.hero-construct--m{display:none; width:180px; height:130px;}
.hero-construct line{stroke:rgba(215,230,239,0.5); stroke-width:1.2;}
.hero-construct .boog{fill:none; stroke:rgba(215,230,239,0.4); stroke-width:1.2; stroke-dasharray:6 5;}
.hero-construct .punt{fill:var(--amber);}

.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:start;
  padding:60px 48px 48px 48px; position:relative;
}
.hero-kicker{font-family:var(--font-mono); font-size:11px; line-height:14px; letter-spacing:3px; color:var(--licht-petrol-b); margin:0 0 22px 0; text-transform:uppercase;}
.hero h1{font-size:clamp(34px,4.2vw,50px); line-height:1.1; font-weight:800; margin:0 0 18px 0; color:var(--wit);}
.hero h1 .end-dot{color:var(--amber);}
.hero p.sub{font-family:var(--font-sans); font-size:17px; line-height:1.6; color:var(--licht-petrol-b); max-width:480px; margin:0 0 28px 0;}
.hero-ctas{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.hero-image{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; margin-top:44px;}
.hero-image img{width:100%; height:100%; object-fit:cover;}

/* ---------- maatlat als overgang (tolerance) ----------
   Basislijn met hoofdstrepen (per 600) en fijne tussenstrepen (per 200), in
   lijnblauw; labels klein onder de lijn. */
.ruler-wrap{padding:26px 0 4px 0;}
.ruler{display:flex; align-items:flex-end; gap:0; border-bottom:1px solid var(--lijn);}
.ruler .tick{flex:1; position:relative; height:9px; border-left:1px solid var(--lijn);}
.ruler .tick:last-child{border-right:1px solid var(--lijn);}
.ruler .tick::before, .ruler .tick::after{content:""; position:absolute; bottom:0; width:1px; height:4px; background:var(--lijn);}
.ruler .tick::before{left:33.333%;}
.ruler .tick::after{left:66.666%;}
.ruler .tick span{position:absolute; top:15px; left:5px; font-family:var(--font-mono); font-size:8.5px; letter-spacing:1px; color:var(--mono-sub);}

/* ---------- intro ---------- */
.intro-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.intro-grid .num-giant{position:relative; margin-bottom:-22px;}
.intro-grid h2{position:relative; font-size:clamp(27px,3.2vw,34px);}
.intro-grid .body-col{padding-top:6px;}
.intro-grid .body-col p{font-size:15.5px; line-height:1.75; color:var(--body-var); margin:0 0 16px 0;}

/* ================= SPECIALISMEN — de doorsnede (Layer) =================
   Stamkaart v2.1, 06 Layer + 05 Material/Pattern: elke dichte laag toont zijn
   materiaal als patroon (in een uitsnede); één amber punt op de maatlat. */
.doorsnede-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
.doorsnede-hint{font-family:var(--font-mono); font-size:10px; letter-spacing:3px; color:var(--secundair); text-transform:uppercase;}
.doorsnede-nav{display:flex; gap:8px;}
.dn-btn{
  width:38px; height:38px; border-radius:10px; border:1.5px solid var(--petrol);
  background:transparent; color:var(--petrol); font-size:15px; line-height:1;
  cursor:pointer; font-family:var(--font-mono);
}
.dn-btn:hover{background:var(--petrol); color:var(--wit);}
.dn-btn:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

.doorsnede{display:flex; height:420px; border-radius:18px; overflow:hidden; gap:3px;}
.laag{
  position:relative; flex:1; min-width:92px; cursor:pointer; overflow:hidden;
  background-color:var(--laag-licht); background-repeat:repeat;
  transition:flex-grow .38s cubic-bezier(.4,0,.2,1);
}
/* Kleur volgt de toestand: de dichte lagen licht (iets donkerder dan ijs), de
   actieve laag petrol. Het materiaal blijft per laag herkenbaar als patroon:
   CLT-lamellen, natuursteenplaten in halfsteens verband, HSB-stijlen met
   arcering (lichte lijnen op petrol in de actieve strook). */
.laag--clt{background-image:url(detail/pat-clt-licht.svg);}
.laag--natuursteen{background-image:url(detail/pat-natuursteen-licht.svg);}
.laag--hsb{background-image:url(detail/pat-hsb-licht.svg);}
.laag.active{flex-grow:7; background-color:var(--petrol); background-image:none;}
.laag.active .laag-label{background-color:var(--petrol);}
.laag--clt.active .laag-label{background-image:url(detail/pat-clt-donker.svg);}
.laag--natuursteen.active .laag-label{background-image:url(detail/pat-natuursteen-donker.svg);}
.laag--hsb.active .laag-label{background-image:url(detail/pat-hsb-donker.svg);}
.laag:not(.active):hover{outline:1.5px solid var(--petrol); outline-offset:-1.5px; flex-grow:1.25;}
.laag:focus-visible{outline:2px solid var(--amber); outline-offset:-2px;}
@keyframes laag-adem{0%,100%{flex-grow:1;} 50%{flex-grow:1.25;}}
.doorsnede.ademt .laag:not(.active){animation:laag-adem 1.1s ease-in-out 1;}

.laag-chip{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:2;
  background:var(--wit-puur); color:var(--petrol-donker);
  font-family:var(--font-mono); font-size:10px; letter-spacing:1px; font-weight:700;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.laag.active .laag-chip{left:16px; transform:none; top:16px;}
.laag-chevron{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-mono); font-size:13px; color:var(--petrol);
  background:var(--wit-puur); border-radius:999px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease;
}
.laag:not(.active):hover .laag-chevron{transform:translateX(-50%) translateY(-3px);}
.laag.active .laag-chevron{display:none;}
.laag-label{
  position:absolute; left:0; top:0; bottom:0; width:78px;
  display:flex; align-items:center; justify-content:center;
  background-repeat:repeat;
}
.laag:not(.active) .laag-label{background:none;}
.laag-label span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-mono); font-size:11px; letter-spacing:3px; color:var(--petrol-donker);
  background:var(--laag-licht); border-radius:999px; padding:14px 6px;
  white-space:nowrap; transition:color .2s ease;
}
.laag.active .laag-label span{background:var(--petrol); color:var(--wit); font-weight:700;}
.laag-content{
  position:absolute; left:78px; right:0; top:0; bottom:0; padding:52px 30px 26px 30px;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:28px; align-items:center;
  opacity:0; transform:translateY(8px); transition:opacity .28s ease .1s, transform .28s ease .1s;
}
.laag.active .laag-content{opacity:1; transform:translateY(0);}
.laag-content .lc-photo{border-radius:12px; overflow:hidden; aspect-ratio:4/3; max-height:290px;}
.laag-content .lc-photo img{width:100%; height:100%; object-fit:cover;}
.laag-content .lc-code{font-family:var(--font-mono); font-size:10.5px; letter-spacing:2px; color:var(--petrol); margin-bottom:8px;}
.laag-content h3{color:var(--petrol-donker); font-size:clamp(20px,2.2vw,26px); margin-bottom:10px;}
.laag-content p{color:var(--body-var); font-size:14px; line-height:1.65; max-width:420px; margin-bottom:14px;}
.laag-content .lc-link{color:var(--petrol); font-size:13px; font-weight:700;}
.laag.active .laag-content .lc-code{color:var(--ijs);}
.laag.active .laag-content h3{color:var(--wit);}
.laag.active .laag-content p{color:var(--licht-petrol-a);}
.laag.active .laag-content .lc-link{color:var(--wit);}

.doorsnede-ruler{display:flex; margin-top:14px; gap:3px;}
.dr-seg{flex:1; position:relative; padding-top:10px; border-top:1px solid var(--petrol-licht); transition:flex-grow .38s cubic-bezier(.4,0,.2,1);}
.dr-seg::before{content:""; position:absolute; top:-5px; left:0; width:1px; height:9px; background:var(--petrol-licht);}
.dr-seg.wide{flex-grow:7;}
.dr-seg.wide::after{content:""; position:absolute; top:-1.5px; left:0; right:0; height:2px; background:var(--petrol);}
.dr-seg span{font-family:var(--font-mono); font-size:9.5px; letter-spacing:1px; color:var(--secundair); padding-left:8px; transition:color .2s ease;}
.dr-seg.wide span{color:var(--petrol-donker); font-weight:700;}
.dr-dot{display:none; position:absolute; top:-6.5px; right:-7px; width:12px; height:12px; border-radius:50%; background:var(--amber); z-index:2;}
.dr-seg.wide .dr-dot{display:block;}
.dr-seg.wide:last-child .dr-dot{right:auto; left:-7px;}

@media (max-width:860px){
  .doorsnede{flex-direction:column; height:auto;}
  .laag{min-height:64px; flex:none;}
  .laag.active{flex-grow:0; min-height:0;}
  .laag:not(.active):hover{flex-grow:0;}
  .doorsnede.ademt .laag:not(.active){animation:none;}
  .laag-chip{top:50%; left:16px; transform:translateY(-50%);}
  .laag.active .laag-chip{top:20px; left:16px; transform:none;}
  .laag-chevron{bottom:auto; top:50%; right:14px; left:auto; transform:translateY(-50%) rotate(90deg);}
  .laag:not(.active):hover .laag-chevron{transform:translateY(-50%) rotate(90deg);}
  .laag-label{width:100%; height:64px; position:relative;}
  .laag-label span{writing-mode:horizontal-tb; transform:none; padding:6px 14px;}
  /* Mobiel: de actieve laag groeit mee met de inhoud (geen scrollvakje in de
     laag), zodat "Lees meer" gewoon in de pagina staat. */
  .laag-content{position:relative; left:auto; top:auto; bottom:auto; padding:22px 20px 24px 20px; grid-template-columns:1fr; gap:14px; align-items:start; overflow:visible;}
  .laag-content .lc-photo{aspect-ratio:auto; height:130px; max-height:130px;}
  .laag:not(.active) .laag-content{display:none;}
  .doorsnede-ruler{display:none;}
}

/* ---------- tekst + beeld ---------- */
.partner-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center;}
.partner-grid.img-left{grid-template-columns:1.05fr 0.95fr;}
.partner-grid.img-left .partner-image{order:-1;}
.partner-text .num-giant{font-size:100px; margin-bottom:-12px;}
.partner-text h2{margin:6px 0 18px 0;}
.partner-text p{font-size:15px; line-height:1.75; color:var(--body-var); margin:0 0 16px 0;}
.partner-image{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:5/4;}
.partner-image img{width:100%; height:100%; object-fit:cover;}
@media (max-width:860px){ .partner-grid{grid-template-columns:1fr !important;} .partner-grid .partner-image{order:-1;} }

/* ---------- cijfers ----------
   Foto (eigen beeld, afgerond blok) naast een petrol blok. De cijfers staan
   tussen maatlijnen boven een maatlat; de amber punt markeert op de maatlat
   waar het laatste cijfer begint. Het derde cijfer is het amber accent. */
.stats-wrap{position:relative; display:grid; grid-template-columns:0.8fr 1.2fr; gap:16px; align-items:stretch;}
.stats-wrap > img{position:static; display:block; width:100%; height:100%; min-height:300px; object-fit:cover; border-radius:20px;}
.stats-wrap > p, .stats-scrim{display:none;}
.stats-wrap.no-photo{grid-template-columns:1fr;}
.stats-inner{position:relative; overflow:hidden; background:var(--petrol); border-radius:20px; padding:44px 44px 76px; display:flex; flex-direction:column; gap:30px;}
.stats-inner::before{content:""; position:absolute; top:-110px; right:-80px; width:320px; height:250px; background:rgba(215,230,239,0.12); border-radius:58% 42% 55% 45% / 52% 60% 40% 48%;}
.stats-inner::after{content:""; position:absolute; left:44px; right:44px; bottom:38px; height:12px; background:url(detail/stats-maatlat.svg) no-repeat; background-size:100% 12px;}
.stats-inner > *{position:relative;}
.stats-wrap .opener .label{color:var(--ijs);}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:static;}
.stats-row::after{content:""; position:absolute; bottom:32px; left:calc(44px + (100% - 88px) * 2 / 3); width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--amber);}
.stat-tile{background:none; border-radius:0; padding:6px 20px 4px; border-left:1px solid rgba(215,230,239,0.35); display:flex; flex-direction:column; gap:10px;}
.stat-tile .num{font-size:clamp(40px,4.6vw,58px); font-weight:800; line-height:1; color:var(--wit);}
.stat-tile.amber .num{color:var(--amber);}
.stat-tile .label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:2px; color:var(--ijs);}
.stat-tile .label .exp{font-family:var(--font-sans); font-size:1.3em; font-weight:700; letter-spacing:0; line-height:0; margin-left:1px;}
@media (max-width:860px){
  .stats-wrap{grid-template-columns:1fr;}
  .stats-wrap > img{min-height:0; height:200px;}
  .stats-inner{padding:32px 24px 64px;}
  .stats-inner::after{left:24px; right:24px; bottom:30px;}
  .stats-row{grid-template-columns:1fr; gap:18px;}
  .stats-row::after{bottom:24px; left:calc(24px + (100% - 48px) * 2 / 3);}
  .stat-tile{border-left:none; border-top:1px solid rgba(215,230,239,0.35); padding:14px 0 0;}
}

/* ---------- kaarten ----------
   Zacht blok zonder contourvlak (stamkaart 07 regel 4). Op een witte sectie
   krijgt de kaart het materiaalvlak, zodat hij altijd zichtbaar is. */
.kb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.kb-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.kb-card{background:var(--materiaal); border-radius:18px; padding:32px 30px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;}
section.tint .kb-card{background:var(--wit);}
.kb-card .kb-blob{display:none;}
/* Merkteken op de kaart (stamkaart 05/06, klein en stil): een maatstreep op de
   bovenrand met het kaartnummer eronder, als maatvoering op een tekening. Geen
   patroon en geen chip; de kaart blijft een rustig zacht blok. Niet in
   Projectfeiten, dat blok heeft de stempelvorm. */
.kb-grid{counter-reset:kaart;}
section:not(.is-projectfeiten) .kb-card{counter-increment:kaart; padding-top:48px;}
section:not(.is-projectfeiten) .kb-card::before{
  content:counter(kaart, decimal-leading-zero); position:absolute; top:21px; left:30px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:2px; color:var(--petrol);
}
section:not(.is-projectfeiten) .kb-card::after{
  content:""; position:absolute; top:0; left:30px; width:1px; height:12px; background:var(--lijn);
}
.kb-card .bt-cardnum{position:relative; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--petrol);}
.kb-card h3{position:relative;}
.kb-card p{position:relative; font-size:14.5px; line-height:1.65; color:var(--body-var); margin:0;}
.kb-card .link-arrow{position:relative; color:var(--petrol); margin-top:6px; align-self:flex-start;}
@media (max-width:860px){ .kb-grid, .kb-grid.cols-2{grid-template-columns:1fr;} }

/* ---------- stappen ----------
   Volgorde als maatlijn: elke stap begint met een maatstreep op een doorlopende
   lijn in lijnblauw; de amber punt markeert de laatste stap. Geen streepje
   naast het cijfer. */
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:0; row-gap:44px;}
.step-item{position:relative; border-top:1px solid var(--lijn); padding:22px 32px 0 0;}
.step-item::before{content:""; position:absolute; left:0; top:-11px; width:1px; height:11px; background:var(--lijn);}
.step-item:last-child::after{content:""; position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; background:var(--amber); transform:translate(-50%,-50%);}
.step-item .step-nr{font-family:var(--font-sans); font-weight:400; font-size:30px; line-height:1; color:var(--petrol-donker); margin-bottom:12px;}
.step-item h3{margin-bottom:10px; font-size:20px;}
.step-item p{font-size:14.5px; line-height:1.65; color:var(--body-var); margin:0;}
@media (max-width:860px){ .steps-grid{grid-template-columns:1fr; row-gap:34px;} .step-item{padding-right:0;} }

/* ---------- projecten grid ---------- */
.proj-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:32px;}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.proj-grid.two-col{grid-template-columns:repeat(2,1fr);}
.proj-card{position:relative; display:block; color:var(--petrol-donker);}
.proj-card:hover{color:var(--petrol-donker);}
.proj-image{border-radius:14px; overflow:hidden; aspect-ratio:4/3; position:relative; background:var(--materiaal);}
.proj-image img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.proj-card:hover .proj-image img{transform:scale(1.03);}
.proj-name{font-size:17px; font-weight:800; margin-top:14px;}
.proj-card:hover .proj-name{color:var(--petrol);}
.proj-stamp{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin-top:10px; font-size:13px; line-height:1.4; color:var(--body-var);}
.proj-stamp dt{font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; color:var(--secundair); padding-top:2px; text-transform:uppercase;}
.proj-stamp dd{margin:0;}
.proj-foot{display:flex; justify-content:flex-end; margin-top:40px;}
@media (max-width:860px){
  .proj-grid, .proj-grid.two-col{grid-template-columns:1fr;}
}

/* ---------- CTA-blok ("stempel") ----------
   Contourvlak blijft; de lijn-echo en de losse punt vervallen. De constructie
   is per plek een eigen variant (stamkaart v2.1, 06 + 10), als achtergrond uit
   assets/detail/. Ontworpen op 360×200 met 52px marge = de padding van het blok;
   mobiel geschaald naar 34px marge. De actieknop is amber. */
section.cta-section{margin-top:88px;}
@media (max-width:860px){ section.cta-section{margin-top:60px;} }
.stempel{background:var(--petrol); border-radius:20px; padding:52px; position:relative; overflow:hidden; color:var(--wit);}
.stempel-blob{position:absolute; top:-96px; right:-72px; width:290px; height:230px; background:rgba(215,230,239,0.12); border-radius:58% 42% 55% 45% / 52% 60% 40% 48%;}
.stempel-blob-echo, .stempel-dot{display:none;}
.stempel::after{
  content:""; position:absolute; top:0; right:0; width:360px; height:200px; z-index:0; pointer-events:none;
  background:url(detail/cta-boog.svg) no-repeat right top; background-size:360px 200px;
}
.bt-slug-contact .stempel::after{background-image:url(detail/cta-deurslag.svg);}
.bt-slug-werken-bij .stempel::after{background-image:url(detail/cta-t.svg);}
.bt-slug-clt .stempel::after{background-image:url(detail/cta-layer.svg);}
.bt-slug-natuursteen .stempel::after{background-image:url(detail/cta-voegkruis.svg);}
.bt-slug-hsb .stempel::after{background-image:url(detail/cta-stijlregel.svg);}
.bt-type-project .stempel::after{background-image:url(detail/cta-stramien.svg);}
.stempel-main{display:grid; grid-template-columns:1.4fr 0.6fr; gap:32px; align-items:end; margin-top:26px; position:relative; z-index:1;}
.stempel-main h2{color:var(--wit); margin-bottom:12px;}
.stempel-main p{font-size:15px; line-height:1.7; color:var(--licht-petrol-b); max-width:480px; margin:0;}
.stempel-cta{display:flex; justify-content:flex-end;}
@media (max-width:860px){
  .stempel{padding:34px;}
  .stempel::after{width:235px; height:131px; background-size:235px 131px;}
  .stempel-blob{top:-70px; right:-60px; width:200px; height:160px;}
  .stempel-main{grid-template-columns:1fr; margin-top:64px;}
  .stempel-cta{justify-content:flex-start; margin-top:20px;}
}

/* ---------- citaat ---------- */
.bt-quote{border-left:3px solid var(--petrol); margin:0; padding-left:24px; font-size:22px; line-height:1.4; font-style:italic;}
.bt-quote-author{margin-top:16px; font-weight:500; font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--secundair); text-transform:uppercase;}

/* ---------- FAQ ---------- */
.bt-accordion .bt-acc-item{border-bottom:1px solid var(--rand); padding:8px 0;}
.bt-accordion summary{cursor:pointer; font-weight:700; font-size:16px; padding:14px 4px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.bt-accordion summary::-webkit-details-marker{display:none;}
.bt-accordion summary::after{content:'+'; color:var(--petrol); font-size:20px; font-weight:700;}
.bt-accordion details[open] summary::after{content:'–';}
.bt-accordion .bt-acc-body{padding:0 4px 18px; font-size:14.5px; line-height:1.7; color:var(--body-var);}

/* ---------- team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.team-card{position:relative; border-radius:16px; overflow:hidden; min-height:320px; background-color:var(--petrol); background-size:cover; background-position:center;}
.team-namebar{position:absolute; left:0; right:0; bottom:0; z-index:1; background:rgba(28,67,86,.72); padding:9px 16px;}
.team-namebar h5{color:var(--wit); font-size:15px; margin:0;}
.team-info{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  background:rgba(28,67,86,.9); padding:16px 16px 14px;
  opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease;}
.team-card:hover .team-info,.team-card:focus-within .team-info{opacity:1; transform:none;}
@media (hover:none){ .team-info{opacity:1; transform:none;} }
.team-info h5{color:var(--wit); margin:0 0 4px; font-size:15px;}
.team-info p{color:var(--licht-petrol-b); font-size:13px; margin:0;}
@media (max-width:860px){ .team-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- contact + formulier ---------- */
.contact-info p{font-size:14.5px; line-height:1.8; margin-bottom:14px;}
.bt-form{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.bt-form .full{grid-column:1/-1;}
.bt-form label{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--secundair); margin-bottom:8px;}
.bt-form input[type=text],.bt-form input[type=email],.bt-form input[type=tel],.bt-form select,.bt-form textarea{
  width:100%; border:1.5px solid var(--rand); border-radius:10px; padding:12px 14px;
  font-family:var(--font-sans); font-size:14.5px; color:var(--petrol-donker); background:var(--wit-puur);
}
.bt-form input:focus,.bt-form select:focus,.bt-form textarea:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:var(--petrol);}
.bt-form textarea{min-height:120px; resize:vertical;}
.bt-form .checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--body-var);}
.bt-form .checkbox-row input{margin-top:3px;}
.bt-form .hp-field{position:absolute; left:-9999px; opacity:0;}
.bt-form-msg{padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:14px;}
.bt-form-msg.success{background:#e4f4ee; color:#1c4356;}
.bt-form-msg.error{background:#fbe6e0; color:#7a2b16;}

/* ---------- projectgalerij + lightbox ---------- */
.project-gallery-sec{padding-bottom:24px;}
.project-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;}
.pg-item{display:block; border-radius:14px; overflow:hidden; aspect-ratio:4/3; cursor:zoom-in; background:var(--ijs);}
.pg-item img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.pg-item:hover img{transform:scale(1.045);}
.bt-lightbox{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(28,67,86,.94); padding:5vh 5vw; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;}
.bt-lightbox.open{opacity:1; visibility:visible; pointer-events:auto;}
.bt-lightbox img{max-width:90vw; max-height:90vh; border-radius:12px;}
.bt-lb-btn{position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer;
  width:48px; height:48px; border-radius:999px; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;}
.bt-lb-btn:hover{background:rgba(255,255,255,.28);}
.bt-lb-close{top:20px; right:24px;}
.bt-lb-prev{left:16px; top:50%; transform:translateY(-50%);}
.bt-lb-next{right:16px; top:50%; transform:translateY(-50%);}
@media (max-width:640px){ .bt-lb-prev{left:8px;} .bt-lb-next{right:8px;} }

.wp-block-image img{border-radius:14px;}
.wp-block-image figcaption,figcaption.wp-element-caption{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--body-var); margin-top:8px;}
.wp-block-gallery{gap:16px;}

/* ---------- 404: "Deze aansluiting klopt niet." (06 variant D2) ---------- */
.nf-section{padding:28px 0 60px;}
.nf-block{position:relative; overflow:hidden; background:var(--ijs); border-radius:20px; padding:120px 56px 64px; min-height:440px;}
.nf-construct{position:absolute; top:0; right:0; width:420px; height:260px; pointer-events:none;}
.nf-construct line{stroke:var(--petrol); stroke-width:1.5;}
.nf-construct .hulp{stroke:var(--petrol-licht); stroke-width:1; stroke-dasharray:3 3;}
.nf-construct text{font-family:var(--font-mono); font-size:12px; fill:var(--petrol-donker);}
.nf-construct .punt{fill:var(--amber);}
.nf-text{position:relative; max-width:560px;}
.nf-text h1{font-size:clamp(32px,4vw,46px); margin:16px 0 14px;}
.nf-text p{font-size:16px; line-height:1.65; color:var(--body-var);}
.nf-ctas{display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:26px;}
@media (max-width:860px){
  .nf-block{padding:170px 24px 40px;}
  .nf-construct{width:280px; height:173px;}
}

/* ---------- footer: zacht ijsvlak met klein kruis in de hoek ----------
   Stamkaart v2.1, 08 regel 8: monogram, amber balkje en contactblok; de hoek
   draagt een detailfragment, hier met de amber punt. Lijnen op de rechtermarge
   van .wrap en de basislijn van de kolomkoppen. */
footer{position:relative; overflow:hidden; background:var(--ijs); color:var(--petrol-donker); padding:56px 0 40px 0;}
footer .wrap{position:relative;}
.footer-top{position:relative; display:grid; grid-template-columns:1.5fr 0.8fr 0.8fr 0.8fr; gap:40px;}
.footer-brief-card{
  position:relative;
  display:grid; grid-template-columns:44px 2px 1fr; column-gap:14px; row-gap:8px; align-items:center;
  max-width:390px;
}
.footer-monogram{grid-row:1/3; width:44px; height:44px; border-radius:50%; overflow:hidden; line-height:0;}
.footer-amberbar{grid-row:1/3; align-self:stretch; width:2px; background:var(--amber); border-radius:2px;}
.footer-slogan{grid-column:3; font-style:italic; font-weight:700; color:var(--petrol); font-size:15px;}
.footer-addr{grid-column:3; font-size:11px; letter-spacing:1.3px; line-height:1.85; color:var(--secundair);}
.footer-col h4{font-family:var(--font-mono); font-size:10px; line-height:12px; letter-spacing:2px; color:var(--secundair); margin:0 0 16px 0; text-transform:uppercase; font-weight:400;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col a{display:block; color:var(--petrol); font-size:14px; margin-bottom:10px; border-bottom:1.5px solid transparent; width:fit-content; padding-bottom:1px;}
.footer-col a:hover{color:var(--petrol-donker); border-bottom-color:var(--amber);}
.footer-bottom{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  margin-top:48px; padding-top:24px; border-top:1px solid var(--lijn);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; color:var(--secundair);
  flex-wrap:wrap; gap:12px;
}
/* Basislijn boven de voetregel als maatlijn: maatstreep aan het begin, lijn
   loopt door tot de rand van het vlak, amber bolletje op de rechtermarge. */
.footer-bottom::before{content:""; position:absolute; left:0; top:-10px; width:1px; height:10px; background:var(--lijn);}
.footer-bottom::after{content:""; position:absolute; left:100%; top:-1px; width:100vw; height:1px; background:var(--lijn);}
.footer-punt{position:absolute; right:0; top:-1px; width:11px; height:11px; border-radius:50%; background:var(--amber); transform:translate(50%,-50%);}
.footer-legal a{color:inherit; border-bottom:1.5px solid transparent; padding-bottom:1px;}
.footer-legal a:hover{color:var(--petrol-donker); border-bottom-color:var(--amber);}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr 1fr; gap:28px;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .footer-brief-card{max-width:270px;}
  .footer-addr .sep{display:block; height:0; overflow:hidden;}
  .footer-col{display:none;}
}

/* ---------- algemeen responsive ---------- */
@media (max-width:860px){
  .wrap{padding:0 22px;}
  section{padding:60px 0;}
  section.tint .wrap{padding:44px 22px;}
  .hero-grid{grid-template-columns:1fr; gap:0; padding:44px 24px 24px 24px;}
  .hero-construct--d{display:none;}
  .hero-construct--m{display:block;}
  .hero-contour{top:-90px; right:-70px; width:220px; height:170px;}
  .hero-kicker{max-width:calc(100% - 120px); font-size:10px; line-height:13px; letter-spacing:2.5px; margin-bottom:18px;}
  .hero h1{font-size:32px;}
  .hero p.sub{font-size:15.5px; margin-bottom:22px;}
  .hero-ctas{gap:12px;}
  .hero-image{margin-top:28px;}
  .ruler .tick:nth-child(2) span, .ruler .tick:nth-child(4) span{display:none;}
  .intro-grid{grid-template-columns:1fr; gap:10px;}
}

/* Mobiel hoofdmenu: hamburger links, logo gecentreerd. Het menu klapt uit
   onder de balk en is precies zo hoog als de items (niet schermvullend). De
   hamburger wordt een kruisje; sluiten kan ook met Escape, een menuklik, een
   klik ernaast of door te scrollen (zie bluetek.js initMenu). */
@media (max-width:760px){
  .nav{padding:16px 22px; position:relative; justify-content:flex-start;}
  .nav-links{display:none;}
  .burger{display:block; order:-1; flex:0 0 auto; position:relative; z-index:90;}
  .logo{flex:1 1 auto; justify-content:center; text-align:center;}
  .nav-links.mobile-open{
    display:block; position:absolute; top:100%; left:0; right:0; z-index:80;
    background:var(--wit); border-bottom:1px solid var(--rand);
    padding:4px 22px 22px; max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .nav-links.mobile-open > ul{flex-direction:column; align-items:flex-start; gap:0;}
  .nav-links.mobile-open li{width:100%;}
  .nav-links.mobile-open a{display:block; padding:11px 0; border-bottom:none; font-size:13px;}
  .nav-links .btn{margin-top:8px; display:inline-block; width:auto;}
  .nav-links.mobile-open a.btn{display:inline-flex; padding:11px 22px; margin-top:12px; font-size:14.5px;}
  .nav-links.mobile-open .nav-close{display:none;}
  body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.nav-open .burger span:nth-child(2){opacity:0;}
  body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ==========================================================================
   SCROLL-LAAG — rustige motion; content is zonder JS gewoon zichtbaar.
   ========================================================================== */
html.bt-js .rv{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
html.bt-js .rv.in-view{opacity:1; transform:none;}
html.bt-js .ruler{transform:scaleX(0); transform-origin:left center; transition:transform .7s ease;}
html.bt-js .ruler .tick span{opacity:0; transition:opacity .4s ease .6s;}
html.bt-js .ruler.drawn{transform:scaleX(1);}
html.bt-js .ruler.drawn .tick span{opacity:1;}
@media (prefers-reduced-motion: reduce){
  html.bt-js .rv{opacity:1; transform:none;}
  html.bt-js .ruler{transform:scaleX(1);}
  html.bt-js .ruler .tick span{opacity:1;}
}

/* ==========================================================================
   PROJECTEN (stamkaart v2.1): stempelregels op de projectkaart en het blok
   Projectfeiten in stempelvorm. Zie inc/detail.php.
   ========================================================================== */
.proj-kicker{margin-top:8px; font-size:10px; letter-spacing:2px; color:var(--secundair); text-transform:uppercase;}

/* ---------- Projectfeiten als tekeningstempel (09) ----------
   Hetzelfde blok als in wp-admin, alleen in stempelvorm (zie inc/detail.php). */
.chip-status{display:inline-block; background:var(--amber); color:var(--petrol-donker); font-size:9.5px; letter-spacing:1.5px; padding:5px 12px; border-radius:999px; text-transform:uppercase; white-space:nowrap;}
section.is-projectfeiten .kb-grid{position:relative; overflow:hidden; background:var(--ijs); border-radius:18px; padding:26px 30px 24px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 28px;}
.pf-top{grid-column:1/-1; display:flex; align-items:center; gap:14px; position:relative; padding-right:110px; min-height:22px;}
.pf-lb{font-size:9.5px; letter-spacing:2px; color:var(--secundair); text-transform:uppercase;}
.pf-construct{position:absolute; top:-26px; right:-30px; width:150px; height:100px; pointer-events:none;}
.pf-construct line{stroke:var(--petrol-licht); stroke-width:1.1;}
.pf-construct .boog{fill:none; stroke:var(--lijn); stroke-width:1.1; stroke-dasharray:4 3;}
section.is-projectfeiten .kb-card{background:none; border-radius:0; padding:0; gap:4px;}
section.is-projectfeiten .kb-card h3{font-family:var(--font-mono); font-size:9.5px; font-weight:400; letter-spacing:1.5px; text-transform:uppercase; color:var(--secundair);}
section.is-projectfeiten .kb-card p{font-size:15px; line-height:1.5; color:var(--petrol-donker);}
section.is-projectfeiten .kb-card.is-rol{grid-column:1/-1; order:99; background:var(--wit-puur); border-radius:12px; padding:12px 48px 12px 18px;}
section.is-projectfeiten .kb-card.is-rol::after{content:""; position:absolute; right:18px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--amber);}
@media (max-width:860px){
  section.is-projectfeiten .kb-grid{grid-template-columns:minmax(0,1fr); padding:22px 20px 20px; gap:16px;}
  .pf-top{padding-right:64px; flex-wrap:wrap; gap:8px;}
  .pf-construct{top:-22px; right:-20px; width:110px; height:73px;}
}

/* ---------- kleine correcties mobiel ---------- */
@media (max-width:860px){
  .hero-section.wrap{padding-top:16px;}
  .laag-chip{display:none;}
}

/* ---------- open vacatures ----------
   Staat er een vacature open, dan krijgt "Werken bij" in de nav een amber rand
   met het aantal in een bolletje op de hoek. Bewuste uitzondering op "amber is
   alleen de actieknop": dit is juist de actie die we willen uitlokken, en er
   staat er altijd maar één in beeld. Het aantal komt uit Instellingen →
   Algemeen (zie inc/vacatures.php); bij 0 verdwijnt rand, bolletje en regel. */
.bt-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

.nav-links li.menu-item-vacature > a{
  position:relative;
  border:1.5px solid var(--amber); border-radius:999px;
  padding:8px 16px 7px; color:var(--petrol-donker);
  transition:background .18s ease, color .18s ease;
}
.nav-links li.menu-item-vacature > a:hover{
  background:var(--amber); color:var(--petrol-donker); border-color:var(--amber);
}
.vac-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px; margin-left:8px;
  border-radius:999px; background:var(--amber); color:var(--petrol-donker);
  font-family:var(--font-mono); font-size:11px; line-height:1; letter-spacing:0;
  vertical-align:middle;
}
/* bolletje op de hoek van de knop, met een randje in de balkkleur zodat het
   er los op lijkt te liggen */
.nav-links li.menu-item-vacature > a .vac-badge{
  position:absolute; top:-13px; right:-9px; margin:0;
  border:2px solid var(--wit);
}

/* footer: bolletje achter de link plus een amber knopje eronder */
.footer-col .vac-regel{margin-top:10px;}
.footer-col .vac-regel a{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--amber); color:var(--petrol-donker);
  border-radius:999px; padding:7px 14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
}
.footer-col .vac-regel a:hover{background:var(--amber-hover); color:var(--petrol-donker);}

/* hero van Werken bij: zolang er een vacature open staat is de eerste knop
   ("Bekijk de vacature") de actieknop van de pagina, dus amber */
.bt-vacature-open.bt-slug-werken-bij .hero-ctas .btn.on-light{background:var(--amber); color:var(--petrol-donker);}
.bt-vacature-open.bt-slug-werken-bij .hero-ctas .btn.on-light:hover{background:var(--amber-hover); color:var(--petrol-donker);}

@media (max-width:760px){
  .nav-links.mobile-open li.menu-item-vacature > a{
    display:inline-flex; align-items:center; width:auto; padding:9px 16px; margin:8px 0;
  }
  .nav-links li.menu-item-vacature > a .vac-badge{position:static; margin-left:10px; border:none;}
}

/* ---------- vacatureblok op Werken bij ----------
   Petrol vlak met amber bovenrand: het enige donkere blok tussen de lichte
   secties, zodat de vacature niet wegvalt. Labels bovenaan, daaronder de drie
   kolommen rol / meebrengen / krijgen met amber opsommingspunten. */
section.vacature{background:var(--petrol-donker); border-top:4px solid var(--amber); border-radius:20px; color:var(--wit);}
section.vacature .wrap{padding:64px 44px;}
section.vacature h2,
section.vacature h3{color:var(--wit);}
section.vacature .num-giant{color:rgba(244,248,250,0.08);}
section.vacature .opener .label{color:var(--amber);}
section.vacature .opener .dot{background:var(--amber);}
section.vacature .partner-text p{color:var(--ijs);}
section.vacature .partner-text a:not(.btn){color:var(--amber);}
section.vacature .btn{background:var(--amber); color:var(--petrol-donker);}
section.vacature .btn:hover{background:var(--amber-hover); color:var(--petrol-donker);}

.vac-pills{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 20px 0; padding:0;}
.vac-pills li{
  background:transparent; color:var(--wit); border:1px solid rgba(244,248,250,0.45);
  border-radius:999px; padding:5px 13px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
}
.vac-pills li:first-child{background:var(--amber); color:var(--petrol-donker); border-color:var(--amber);}

.vac-blokken{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  margin-top:48px; padding-top:40px; border-top:1px solid rgba(244,248,250,0.18);
}
.vac-blok h3{font-size:16px; margin:0 0 14px 0;}
.vac-blok ul{list-style:none; margin:0; padding:0;}
.vac-blok li{
  position:relative; padding-left:18px; margin:0 0 11px 0;
  font-size:14.5px; line-height:1.6; color:var(--ijs);
}
.vac-blok li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--amber);
}
@media (max-width:860px){
  .vac-blokken{grid-template-columns:1fr; gap:28px; margin-top:36px; padding-top:30px;}
  section.vacature .wrap{padding:48px 26px;}
}

/* ---------- projectcollage op /projecten/ ----------
   Twee rijen in één horizontaal spoor (grid-auto-flow: column vult eerst de
   kolom, dus foto 1 linksboven, foto 2 eronder). Tegels zijn niet klikbaar:
   deze projecten hebben geen detailpagina. Beheer: metabox op de pagina
   Projecten, zie inc/collage.php. */
.bt-collage{position:relative; margin-top:40px;}
.bt-collage-spoor{
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(2, auto);
  grid-auto-columns:264px; gap:30px 22px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  padding:4px 2px 8px; scrollbar-width:none; -ms-overflow-style:none;
}
.bt-collage-spoor::-webkit-scrollbar{display:none;}
.bt-collage-spoor:focus-visible{outline:2px solid var(--amber); outline-offset:6px; border-radius:12px;}
.bt-collage-tegel{scroll-snap-align:start; margin:0;}
.bt-collage-foto{
  display:block; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  background:var(--materiaal); border:1px solid var(--rand);
}
.bt-collage-foto img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.bt-collage-tegel:hover .bt-collage-foto img{transform:scale(1.045);}
.bt-collage-naam{margin-top:13px; font-size:14.5px; font-weight:700; line-height:1.35; color:var(--petrol-donker);}

/* pijlen: rustig, net buiten de tegels, vervagen aan het einde van het spoor */
.bt-collage-nav{
  position:absolute; top:calc(50% - 22px); z-index:2;
  width:44px; height:44px; border-radius:999px;
  background:var(--wit-puur); border:1px solid var(--rand); color:var(--petrol-donker);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(28,67,86,0.10);
  transition:opacity .25s ease, background .2s ease;
}
.bt-collage-nav:hover{background:var(--ijs);}
.bt-collage-nav.prev{left:-22px;}
.bt-collage-nav.next{right:-22px;}
.bt-collage-nav[disabled]{opacity:0; pointer-events:none;}
.bt-collage-nav svg{width:17px; height:17px;}

.bt-collage-info{
  display:inline-flex; align-items:center; gap:9px; margin:18px 0 0 0;
  color:var(--mono-sub); font-family:var(--font-mono); font-size:11px;
  letter-spacing:1.4px; text-transform:uppercase;
}
.bt-collage-info svg{width:15px; height:15px; color:var(--amber); flex:none;}

@media (max-width:860px){
  .bt-collage-spoor{grid-auto-columns:208px; gap:24px 16px;}
  .bt-collage-nav{display:none;}
  .bt-collage-naam{font-size:13.5px;}
}
@media (prefers-reduced-motion:reduce){
  .bt-collage-spoor{scroll-behavior:auto;}
  .bt-collage-foto img{transition:none;}
}