/* ------------------------------------------------------------------
   Fonts, lokaal gehost (sinds 2026-07-30)

   Waarom niet meer via Google Fonts:
   1. Die aanvraag blokkeerde de weergave 751 ms op elke pagina.
   2. Belangrijker: de aanvraag vroeg om 'Saira Condensed' in italic, en die
      variant bestaat daar niet. Google negeerde de hele familie stil, waardoor
      alle koppen maanden lang terugvielen op Manrope met een schuingetrokken
      schreefloos in plaats van het bedoelde condensed font.

   Saira Condensed heeft geen echte cursief. De schuinstand in de koppen blijft dus
   de synthetische van de browser (font-style:italic op een rechte snede), net zoals
   bij de oorspronkelijke opzet bedoeld was. De winst zit in de condensed vorm, die
   past bij het logo (tokens.md: vet, cursief, condensed schreefloos).
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/manrope-normal-400-800.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:'Saira Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/saira-condensed-normal-700.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:'Saira Condensed';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/saira-condensed-normal-800.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{
  --green:#7E9678;
  --green-d:#63795d;
  /* interactie-accent (knoppen/CTA) = het salie-huisstijlgroen */
  --accent:#7E9678;
  --accent-d:#63795d;
  --dark:#263434;
  --dark-2:#304242;
  --ink:#1c2626;
  --light:#E3E8E2;
  --paper:#f6f7f4;
  --white:#ffffff;
  --muted:#57634f;
  --line:#e4e8e1;
  --radius:6px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Saira Condensed','Manrope',sans-serif;font-style:italic;font-weight:800;letter-spacing:.01em;line-height:.98;text-transform:uppercase}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.accent{color:var(--green)}

/* ---------- micro-label (merk-eyebrow) ---------- */
.kicker{
  font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.82rem,2.6vw,1.02rem);line-height:1;
  color:var(--green);margin-bottom:14px;display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  padding:.85em 1.7em;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:.3s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(38,52,52,.20)}
.btn-primary:hover{background:var(--accent-d);box-shadow:0 10px 26px rgba(38,52,52,.26);transform:translateY(-1px)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-line{border-color:var(--line);color:var(--dark);background:#fff}
.btn-line:hover{border-color:var(--green);color:var(--green)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- nav (rustig & luxe) ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:.4s var(--ease);padding:28px 0;
}
header.scrolled{background:rgba(24,34,34,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between}
.nav .brand{position:relative;z-index:110;display:inline-flex}
.nav .logo{height:27px;transition:.4s var(--ease)}
header.scrolled .nav .logo{height:23px}
.nav ul{display:flex;align-items:center;gap:48px;list-style:none}
.nav ul a{
  color:rgba(255,255,255,.7);font-weight:400;font-size:.9rem;letter-spacing:.03em;
  position:relative;padding:6px 1px;transition:color .3s var(--ease);
}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav ul a:hover,.nav ul a.current{color:#fff}
.nav ul a:hover::after,.nav ul a.current::after{transform:scaleX(1)}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;position:relative;z-index:110;padding:6px}
.burger span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
.nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  color:#fff;overflow:hidden;
  background:linear-gradient(90deg,rgba(16,24,24,.93) 0%,rgba(18,26,26,.82) 45%,rgba(18,26,26,.66) 100%),
             linear-gradient(180deg,rgba(20,29,29,.42) 0%,rgba(22,31,31,.30) 28%,rgba(14,21,21,.84) 100%),
             url('hero.jpg') center/cover no-repeat;
  background:linear-gradient(90deg,rgba(16,24,24,.93) 0%,rgba(18,26,26,.82) 45%,rgba(18,26,26,.66) 100%),
             linear-gradient(180deg,rgba(20,29,29,.42) 0%,rgba(22,31,31,.30) 28%,rgba(14,21,21,.84) 100%),
             image-set(url('hero.webp') type('image/webp'), url('hero.jpg') type('image/jpeg')) center/cover no-repeat;
}
.hero-inner{position:relative;z-index:2;padding-top:150px;padding-bottom:100px}
.hero .kicker{color:rgba(255,255,255,.85)}
.hero h1{font-size:clamp(2.9rem,8.5vw,6.8rem);max-width:15ch}
.hero h1 .line2{color:var(--green);display:block}
.hero p.lead{font-size:clamp(1.05rem,1.8vw,1.28rem);max-width:50ch;margin:28px 0 40px;color:rgba(255,255,255,.88);line-height:1.6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-usps{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);
  margin-top:80px;padding-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
}
.hero-usp .ui{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.hero-usp b{display:block;font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;font-size:1.4rem;text-transform:uppercase;color:#fff;margin-bottom:4px}
.hero-usp span{font-size:.92rem;color:rgba(255,255,255,.68);line-height:1.5}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  position:relative;background:var(--dark);color:#fff;
  padding:170px 0 84px;overflow:hidden;
}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 85% 0%,rgba(126,150,120,.22),transparent 55%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .kicker{color:rgba(255,255,255,.85)}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:18ch}
.page-hero p{margin-top:22px;max-width:56ch;font-size:1.1rem;color:rgba(255,255,255,.8)}

/* ---------- merkenbalk (marquee) ---------- */
.marquee{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden}
.marquee .lbl{display:block;text-align:center;font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--muted);margin-bottom:20px}
.marquee-track{display:flex;align-items:center;width:max-content;animation:scroll-x 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .item{display:flex;align-items:center;justify-content:center;height:60px;padding:0 44px;flex:0 0 auto}
.marquee-track .item img{width:auto;max-width:180px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:opacity .35s var(--ease),filter .35s var(--ease)}
.marquee-track .item:hover img{filter:grayscale(0);opacity:1}
.marquee-track .item img[data-l="craft"]{filter:grayscale(1) brightness(.65)}
.marquee-track .item:hover img[data-l="craft"]{filter:grayscale(0) brightness(1)}
/* per-logo optische balans (verschillende verhoudingen) */
.marquee-track .item img[data-l="blaklader"]{max-height:38px}
.marquee-track .item img[data-l="tricorp"]{max-height:54px}
.marquee-track .item img[data-l="printer"]{max-height:28px}
.marquee-track .item img[data-l="clique"]{max-height:42px}
.marquee-track .item img[data-l="craft"]{max-height:34px}
.marquee-track .item img[data-l="cutterbuck"]{max-height:19px;max-width:210px}
.marquee-track .item img[data-l="herock"]{max-height:34px}
.marquee-track .item img[data-l="unitedicon"]{max-height:30px}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  /* geen animatie = geen scroll, dus de dubbele (aria-hidden) set niet tonen */
  .marquee-track .item[aria-hidden="true"]{display:none}
}

/* ---------- section base ---------- */
section{position:relative}
.pad{padding:120px 0}
.sec-head{max-width:640px;margin-bottom:64px}
.sec-head h2{font-size:clamp(2.3rem,4.6vw,3.6rem);color:var(--dark)}
.sec-head p{margin-top:20px;font-size:1.08rem;color:var(--muted)}

/* ---------- teaser (home) ---------- */
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.teaser img{border-radius:var(--radius);width:100%;height:520px;object-fit:cover}
.teaser h2{font-size:clamp(2.1rem,4vw,3.1rem);color:var(--dark);margin-bottom:24px;max-width:16ch}
.teaser p{color:#41503f;margin-bottom:18px;font-size:1.05rem}
.teaser .btn{margin-top:12px}

/* ---------- custom / op klantwens ---------- */
.custom-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}
.custom-shot{position:relative;border-radius:var(--radius);overflow:hidden}
.custom-shot img{width:100%;height:600px;object-fit:cover;object-position:center 34%}
.custom-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:46px 24px 18px;
  color:rgba(255,255,255,.95);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;
  background:linear-gradient(transparent,rgba(20,28,28,.85));
}
.custom .txt h2{font-size:clamp(2.1rem,4vw,3.1rem);color:var(--dark);margin-bottom:24px;max-width:15ch}
.custom .txt p{color:#41503f;margin-bottom:18px;font-size:1.05rem}
.custom-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 32px}
.custom-tags li{
  font-size:.85rem;font-weight:600;color:var(--dark);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:8px 16px;
}

/* ---------- recent werk / vertrouwd door ---------- */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px 48px;margin-bottom:44px;flex-wrap:wrap}
.work-head .htxt{max-width:34ch}
.work-head h2{font-size:clamp(2rem,3.4vw,2.7rem);color:var(--dark);margin-top:8px;max-width:22ch}
.work-head .btn{flex:0 0 auto}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.work-item{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--dark)}
.work-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.work-item:hover img{transform:scale(1.05)}
.work-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;color:#fff;
  font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.18rem;line-height:1;
  background:linear-gradient(to top,rgba(24,34,34,.9),rgba(24,34,34,.35) 55%,transparent)}

/* ---------- KMS / kledingportaal (donker contrastblok) ---------- */
.kms{background:var(--dark);color:#fff}
.kms-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.kms .kicker{color:#cbd9c4}
.kms-txt h2{font-size:clamp(2.1rem,4vw,3.1rem);color:#fff;margin:8px 0 22px;max-width:16ch}
.kms-txt p{color:rgba(255,255,255,.76);font-size:1.06rem;margin-bottom:30px;max-width:48ch}
.kms-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden}
.kms-list li{background:var(--dark);padding:32px 28px;display:flex;flex-direction:column;gap:16px;
  font-weight:600;font-size:1.06rem;color:#fff;transition:.3s var(--ease)}
.kms-list li:hover{background:var(--dark-2)}
.kms-list svg{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about img{border-radius:var(--radius);width:100%;height:600px;object-fit:cover}
.about h2{font-size:clamp(2.1rem,4vw,3.1rem);color:var(--dark);margin-bottom:24px;max-width:16ch}
.about p{color:#41503f;margin-bottom:18px;font-size:1.05rem}
.sig{margin-top:30px;font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;font-size:1.3rem;color:var(--dark);text-transform:uppercase}
.sig small{display:block;font-family:'Manrope';font-style:normal;font-weight:500;font-size:.85rem;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:2px}

/* ---------- services ---------- */
.services{background:var(--dark);color:#fff}
.services .sec-head h2{color:#fff}
.services .sec-head p{color:rgba(255,255,255,.68)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden}
.card{background:var(--dark);padding:44px 38px;transition:.3s var(--ease)}
.card:hover{background:var(--dark-2)}
.card .num{font-family:'Manrope';font-weight:600;font-size:.82rem;color:var(--green);letter-spacing:.14em}
.card h3{font-size:1.7rem;margin:18px 0 14px;color:#fff}
.card p{color:rgba(255,255,255,.7);font-size:1rem}

/* ---------- values ---------- */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:48px 40px}
.value .vi{width:46px;height:46px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.value .vi svg{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:1.6}
.value h3{font-size:1.35rem;color:var(--dark);margin-bottom:10px}
.value p{color:var(--muted);font-size:.98rem}

/* ---------- maatwerk / feature ---------- */
.feature{position:relative;background:var(--dark-2);color:#fff;overflow:hidden}
.feature .grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
.feature .txt{padding:120px 70px 120px 0}
.feature .kicker{color:var(--green)}
.feature h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:26px;max-width:18ch}
.feature p{color:rgba(255,255,255,.78);font-size:1.05rem;margin-bottom:18px;max-width:50ch}
.feature .imgcol{position:absolute;right:0;top:0;bottom:0;width:50%;min-height:560px}
.feature .imgcol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- process ---------- */
.process{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{background:#fff;padding:40px 36px;transition:.3s var(--ease)}
.step:hover{background:var(--paper)}
.step .n{font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;font-size:1rem;color:var(--green);letter-spacing:.1em}
.step h3{font-size:1.35rem;color:var(--dark);margin:14px 0 10px}
.step p{color:var(--muted);font-size:.96rem}

/* ---------- highlight band (welzijn) ---------- */
.band{background:var(--green);color:#fff;text-align:center}
.band .wrap{max-width:760px}
.band .kicker{color:#eef4ea}
.band h2{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:22px}
.band p{font-size:1.1rem;color:rgba(255,255,255,.92);margin-bottom:16px}
.band .pcts{display:flex;justify-content:center;gap:80px;margin:48px 0 12px;flex-wrap:wrap}
.band .pct b{font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;font-size:3.6rem;display:block;line-height:1}
.band .pct span{text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;opacity:.9;margin-top:6px;display:block}
.band .btn{margin-top:20px}

/* ---------- CTA band (home) ---------- */
.cta-band{background:var(--dark);color:#fff;text-align:center}
.cta-band .wrap{max-width:720px}
.cta-band h2{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:22px}
.cta-band p{font-size:1.1rem;color:rgba(255,255,255,.8);margin-bottom:32px}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- contact ---------- */
.contact{background:var(--dark);color:#fff}
.contact .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.contact h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:24px;max-width:16ch}
.contact p{color:rgba(255,255,255,.72);font-size:1.08rem;margin-bottom:34px;max-width:42ch}
.contact-cta{display:flex;gap:14px;flex-wrap:wrap}
.info{border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:12px 40px}
.info .row{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.info .row:last-child{border-bottom:0}
.info .row svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:3px}
.info .row b{display:block;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:5px}
.info .row a,.info .row span{color:rgba(255,255,255,.9);font-size:1rem}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:56px 0 40px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.foot img{height:28px;opacity:.9}
.foot .links{display:flex;gap:28px;font-size:.9rem}
.foot .links a:hover{color:var(--green)}
.foot small{font-size:.82rem;opacity:.6;width:100%;text-align:center;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);margin-top:28px}

/* ---------- mobiele sticky actiebalk (bel / offerte) ---------- */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(22,31,31,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.10);
}
.mobilebar a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1em;border-radius:var(--radius);font-weight:700;font-size:.95rem;
}
.mobilebar .mb-call{border:1px solid rgba(255,255,255,.30);color:#fff}
.mobilebar .mb-quote{background:var(--accent);color:#fff}
.mobilebar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.mobilebar{display:flex}body{padding-bottom:74px}}

/* ---------- reveal (progressive enhancement) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:.8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none}}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
  .feature .txt{padding:96px 48px 96px 0}
  .contact .grid{gap:48px}
}
@media(max-width:900px){
  /* mobiel menu: rustige full-screen overlay */
  .nav ul{
    position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    background:rgba(22,31,31,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:.4s var(--ease);z-index:105;
  }
  .nav.open ul{opacity:1;visibility:visible;transform:none}
  /* menu open: header mag géén containing-block vormen voor de fixed overlay
     (backdrop-filter op header.scrolled deed inset:0 anders binnen de header vallen) */
  header:has(.nav.open){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:0!important}
  .nav ul a{font-size:1.55rem;font-weight:500;color:#fff;padding:16px 24px}
  .nav ul a::after{display:none}
  .burger{display:flex}
  .pad{padding:84px 0}
  .teaser,.about,.contact .grid,.custom-grid,.kms-grid{grid-template-columns:1fr;gap:44px}
  .feature .grid{grid-template-columns:1fr}
  .about img,.teaser img{height:420px}
  .custom-shot img{height:440px}
  .about .imgwrap,.teaser .imgwrap{order:-1}
  .feature .txt{padding:72px 0}
  .feature .imgcol{position:relative;right:auto;top:auto;bottom:auto;width:100%;min-height:340px}
  .cards,.steps{grid-template-columns:1fr}
  .hero-usps{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
  .hero-usp .ui{width:22px;height:22px;margin-bottom:10px}
  .hero-usp b{font-size:1.1rem}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .band .pcts{gap:48px}
  .page-hero{padding:140px 0 64px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .hero-inner{padding-top:124px;padding-bottom:72px}
  .hero h1{font-size:clamp(2.5rem,11vw,3.5rem)}
  .hero p.lead{font-size:1.02rem;margin:22px 0 32px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-usps{grid-template-columns:1fr;gap:22px;margin-top:44px;padding-top:28px}
  .hero-usp b{font-size:1.25rem}
  .work-grid{gap:12px}
  .kms-list{grid-template-columns:1fr}
  .kms-list li{flex-direction:row;align-items:center;gap:14px;padding:22px 22px}
  .pad{padding:60px 0}
  .sec-head{margin-bottom:40px}
  .marquee-track .item{font-size:1.4rem;padding:0 24px}
  .band .pcts{gap:30px}
  .band .pct b{font-size:2.9rem}
  .page-hero{padding:116px 0 52px}
  .info{padding:6px 22px}
  .foot{justify-content:center;text-align:center}
  .foot .links{flex-wrap:wrap;justify-content:center;gap:14px 22px}
}

/* ---------- contactformulier ---------- */
.cform{margin-top:6px}
.cform .frow{display:flex;gap:16px}
.cform .ffield{flex:1;margin-bottom:16px;display:flex;flex-direction:column}
.cform label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:8px}
.cform input,.cform textarea{font-family:inherit;font-size:1rem;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:13px 15px;width:100%;transition:.25s var(--ease)}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(255,255,255,.45)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.10)}
.cform textarea{resize:vertical;min-height:112px}
.cform .btn{margin-top:6px}
.cform .fnote{color:rgba(255,255,255,.6);font-size:.85rem;margin-top:14px}
.cform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.cform .frow{flex-direction:column;gap:0}}

/* ---------- inspiratie / cases galerij ---------- */
.insp-intro{max-width:720px;margin:0 auto 56px;text-align:center}
.insp-intro .kicker{justify-content:center}
.insp-intro h2{font-size:clamp(2.1rem,4.4vw,3.4rem);color:var(--dark)}
.insp-intro p{margin-top:18px;font-size:1.08rem;color:var(--muted)}
.insp-grid{columns:3 300px;column-gap:20px}
.insp-item{position:relative;break-inside:avoid;margin:0 0 20px;border-radius:var(--radius);overflow:hidden;background:var(--dark);box-shadow:0 8px 30px rgba(38,52,52,.10)}
.insp-item img{width:100%;height:auto;transition:transform .7s var(--ease)}
.insp-item:hover img{transform:scale(1.05)}
.insp-cap{position:absolute;left:0;right:0;bottom:0;padding:52px 20px 18px;background:linear-gradient(to top,rgba(28,38,38,.85),rgba(28,38,38,.35) 55%,transparent);color:#fff}
.insp-cap b{display:block;font-family:'Saira Condensed','Manrope',sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:1.45rem;line-height:1}
.insp-cap span{display:block;margin-top:6px;font-size:.92rem;color:rgba(255,255,255,.82)}
@media(max-width:640px){.insp-grid{columns:2 150px;column-gap:14px}.insp-item{margin-bottom:14px}.insp-cap{padding:34px 14px 12px}.insp-cap b{font-size:1.1rem}.insp-cap span{font-size:.78rem}}