/* ================================================================
   STEEL VISION — stijlblad
   Bestand: style.css
   ================================================================

   INHOUDSOPGAVE
   ─────────────────────────────────────────────────
   1.  KLEUREN & VARIABELEN    ← pas hier kleuren aan
   2.  RESET & BASIS
   3.  SCROLLBAR
   4.  ANIMATIES & OVERGANGEN
   5.  NAVIGATIE
   6.  KNOPPEN
   7.  GEDEELDE STIJLEN (.sec, .mw, .ey, h2, p)
   8.  PAGE HERO (subpagina's)
   9.  TICKER (bewegende tekstregel)
   10. STATS BALK (100%, 0x, B2B, Oneindig)
   11. USP GRID (4 blokken naast tekst)
   12. SERVICE TEGELS (homepage diensten)
   13. GALLERIJ
   14. PROJECT KAARTEN
   15. PROCES STAPPEN
   16. QUOTE BAND
   17. CONTACT FORMULIER & INFO
   18. FAQ
   19. OVER ONS pagina (team, waarden)
   20. RENDER GRID (3D renders)
   21. FOOTER
   22. HERO (homepage)
   23. HOME ABOUT BLOK
   24. RESPONSIVE (tablet & mobiel)
   ─────────────────────────────────────────────────
*/


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#060606;--dark:#0e0e0e;--steel:#161616;--mid:#202020;
  --border:rgba(255,255,255,0.055);--gold:#c8912a;--gold-light:#dfa83c;
  --gold-dim:rgba(200,145,42,0.1);--white:#f3f1ed;--muted:rgba(243,241,237,0.55);--gray:#6a6a6a;
}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;background:var(--black);color:var(--white);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--black)}::-webkit-scrollbar-thumb{background:var(--gold)}

/* PAGE TRANSITIONS */
#app{opacity:1;transition:opacity .25s ease}
#app.fade{opacity:0}

/* REVEAL */
.rv{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ═══ NAV ═══ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;height:72px;
  background:rgba(6,6,6,0.88);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
#nav.solid{background:rgba(6,6,6,0.98);border-color:rgba(200,145,42,0.15)}
.nav-logo{display:flex;align-items:center;cursor:pointer}
.nav-logo img{height:42px;width:auto;object-fit:contain;mix-blend-mode:lighten;filter:brightness(1.1)}
.nav-ul{display:flex;align-items:center;gap:6px;list-style:none}
.nav-ul li a,.nav-ul li span{
  display:inline-flex;align-items:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--gray);transition:color .2s;padding:8px 14px;cursor:pointer;
}
.nav-ul li a:hover,.nav-ul li span:hover{color:var(--white)}
.nav-ul li span.active{color:var(--white)}
.nav-cta{
  background:var(--gold)!important;color:var(--black)!important;
  padding:10px 22px!important;font-weight:700!important;
  transition:background .2s!important;border-radius:0;
}
.nav-cta:hover{background:var(--gold-light)!important}
/* Dropdown */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-menu{
  display:none;position:absolute;top:100%;left:0;
  background:rgba(6,6,6,0.98);border:1px solid var(--border);
  border-top:2px solid var(--gold);min-width:200px;
  padding:8px 0;
}
.nav-dd:hover .nav-dd-menu{display:block}
.nav-dd-menu a{
  display:block;padding:11px 20px;
  font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--gray);
  transition:color .2s,background .2s;cursor:pointer;
}
.nav-dd-menu a:hover{color:var(--gold);background:var(--steel)}
.dd-arrow{font-size:11px;margin-left:4px;opacity:.5;vertical-align:middle;line-height:1}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px}
.burger span{display:block;width:22px;height:1.5px;background:var(--white);transition:.3s}
.burger.x span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
.mob-nav{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;background:var(--black);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.mob-nav.open{display:flex}
.mob-nav a{font-family:'Bebas Neue',sans-serif;font-size:44px;letter-spacing:4px;color:var(--white);transition:color .2s;cursor:pointer}
.mob-nav a:hover,.mob-nav a.g{color:var(--gold)}

/* ═══ SHARED ═══ */
.sec{padding:120px 52px}.sec-sm{padding:80px 52px}
.mw{max-width:1380px;margin:0 auto}
.ey{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:18px}
h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,5.5vw,76px);letter-spacing:1px;text-transform:uppercase;line-height:.95}
h3{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
p{font-weight:300;line-height:1.82;color:var(--muted);font-size:21px}
.btn{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:16px 38px;transition:all .22s;cursor:pointer;border:none}
.btn-g{background:var(--gold);color:var(--black)}.btn-g:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--white);border:1px solid rgba(243,241,237,.25)}.btn-o:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-dk{background:var(--black);color:var(--white)}.btn-dk:hover{background:#111;transform:translateY(-2px)}

/* PAGE HERO (sub-pages) */
.page-hero{
  padding:160px 52px 80px;background:var(--dark);
  border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
}
.page-hero-bg{
  position:absolute;inset:0;opacity:.07;
  background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 1px,transparent 32px);
}
.page-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(56px,8vw,110px);letter-spacing:2px;line-height:.9;margin-bottom:20px}
.page-hero p{font-size:22px;max-width:580px}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gray)}
.breadcrumb span{color:var(--gold);cursor:pointer;transition:color .2s}.breadcrumb span:hover{color:var(--white)}
.breadcrumb i{opacity:.3}

/* TICKER */
.ticker{background:var(--gold);overflow:hidden;white-space:nowrap;padding:13px 0}
.ticker-t{display:inline-block;animation:tick 28s linear infinite}
.ticker-t span{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--black);padding:0 36px}
.ticker-t span::after{content:'◆';margin-left:36px;opacity:.35}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}
.stat{padding:44px 36px;text-align:center;border-right:1px solid var(--border);transition:background .3s}
.stat:last-child{border-right:none}
.stat:hover{background:var(--steel)}
.sn{font-family:'Bebas Neue',sans-serif;font-size:54px;color:var(--gold);line-height:1;display:block}
.sl{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray);margin-top:5px;display:block}

/* USP GRID */
.usp-g{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.usp{background:var(--steel);padding:26px 22px;display:flex;align-items:flex-start;gap:14px;transition:background .2s}
.usp:hover{background:var(--mid)}
.ui{width:38px;height:38px;background:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ui svg{width:18px;height:18px;fill:var(--black)}
.ut h4{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--white);margin-bottom:4px}
.ut p{font-size:23px;line-height:1.6;color:var(--gray)}

/* SERVICE CARDS */
.svc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.svc{position:relative;overflow:hidden;height:420px;display:flex;align-items:flex-end;cursor:pointer}
.svc-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s ease}
.svc:hover .svc-bg{transform:scale(1.07)}
.svc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.95) 0%,rgba(6,6,6,.35) 55%,rgba(6,6,6,.1) 100%);transition:background .3s}
.svc:hover .svc-ov{background:linear-gradient(to top,rgba(6,6,6,.98) 0%,rgba(6,6,6,.55) 65%,rgba(6,6,6,.2) 100%)}
.svc-num{position:absolute;top:20px;right:22px;font-family:'Bebas Neue',sans-serif;font-size:80px;color:rgba(200,145,42,.1);line-height:1;z-index:1}
.svc-c{position:relative;z-index:2;padding:28px 26px;width:100%}
.svc-tag{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:7px;display:block}
.svc-c h3{font-size:24px;margin-bottom:9px}
.svc-c p{font-size:23px;line-height:1.65;max-width:280px}
.svc-arr{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateY(8px);transition:all .3s}
.svc:hover .svc-arr{opacity:1;transform:none}

/* GALLERY GRID */
.gal-g{columns:3;column-gap:3px;gap:3px}
.gi{position:relative;overflow:hidden;background:var(--steel);break-inside:avoid;margin-bottom:3px;display:inline-block;width:100%}
.gi:nth-child(1){}
.gi:nth-child(2){}
.gi:nth-child(3){}
.gi:nth-child(4){}
.gi:nth-child(5){}
.gi:nth-child(6){}
.gi img{width:100%;height:auto;display:block;object-fit:unset;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.gi:hover img{transform:scale(1.06)}
.gi-lbl{position:absolute;bottom:0;left:0;right:0;padding:20px 18px 16px;background:linear-gradient(to top,rgba(6,6,6,.92),transparent);font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:0;transition:opacity .3s}
.gi:hover .gi-lbl{opacity:1}
.gi-tag{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--black);font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 10px}
.gi-ontwerp{background:var(--mid);display:flex;align-items:center;justify-content:center}
.gi-ontwerp img{object-fit:contain!important;padding:16px}

/* PROJECT CARDS */
.proj-g{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.proj-card{position:relative;overflow:hidden;background:var(--steel);cursor:pointer;transition:transform .3s}
.proj-card:hover{transform:translateY(-4px)}
.proj-img{width:100%;height:280px;object-fit:cover;transition:transform .55s ease}
.proj-card:hover .proj-img{transform:scale(1.05)}
.proj-info{padding:24px}
.proj-cat{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.proj-info h3{font-size:20px;margin-bottom:8px;color:var(--white)}
.proj-info p{font-size:23px;line-height:1.65}
.proj-arrow{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}

/* PROCESS STEPS */
.proc-g{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.proc-g::after{content:'';position:absolute;top:40px;left:12%;right:12%;height:1px;background:linear-gradient(to right,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 18px}
.step-ring{width:80px;height:80px;border-radius:50%;border:2px solid var(--gold);background:var(--black);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--gold);margin-bottom:30px;position:relative;z-index:1;flex-shrink:0;transition:background .3s,transform .3s}
.step:hover .step-ring{background:var(--gold-dim);transform:scale(1.05)}
.step h3{font-size:22px;margin-bottom:12px}
.step p{font-size:23px;line-height:1.75}

/* QUOTE BAND */
.quote-band{background:var(--gold);padding:70px 52px;text-align:center}
.quote-band blockquote{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4.5vw,60px);letter-spacing:2px;text-transform:uppercase;color:var(--black);max-width:900px;margin:0 auto 18px;line-height:1.05}
.quote-band cite{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:rgba(0,0,0,.5);font-style:normal}

/* CONTACT */
.con-g{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.ci-list{display:flex;flex-direction:column;gap:18px}
.ci{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--steel);border-left:3px solid var(--gold);transition:background .2s}
.ci:hover{background:var(--mid)}
.ci-icon{width:38px;height:38px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-icon svg{width:17px;height:17px;fill:var(--gold)}
.ci-t label{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:3px}
.ci-t a,.ci-t span{font-size:23px;color:var(--white);font-weight:300;line-height:1.6;transition:color .2s}
.ci-t a:hover{color:var(--gold)}
.con-form{display:flex;flex-direction:column;gap:13px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fg{display:flex;flex-direction:column;gap:7px}
.fg label{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray)}
.fg input,.fg select,.fg textarea{background:var(--steel);border:1px solid var(--border);color:var(--white);font-family:'Barlow',sans-serif;font-size:23px;font-weight:300;padding:13px 15px;outline:none;transition:border-color .2s;width:100%;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold)}
.fg select{appearance:none;cursor:pointer}
.fg option{background:var(--steel)}
.form-sub{align-self:flex-start;background:var(--gold);color:var(--black);font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:16px 40px;border:none;cursor:pointer;transition:all .2s}
.form-sub:hover{background:var(--gold-light);transform:translateY(-2px)}
#fok{display:none;color:var(--gold);font-family:'Barlow Condensed',sans-serif;font-size:21px;letter-spacing:1px;margin-top:4px}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:24px 0;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--white);transition:color .2s}
.faq-q:hover{color:var(--gold)}
.faq-icon{width:28px;height:28px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--gold);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s}
.faq-item.open .faq-a{max-height:200px;padding-bottom:20px}
.faq-a p{font-size:21px;line-height:1.8}

/* ABOUT PAGE SPECIFICS */
.team-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.team-card{background:var(--steel);overflow:hidden;transition:background .2s}
.team-card:hover{background:var(--mid)}
.team-img{width:100%;height:300px;object-fit:cover;object-position:top;filter:grayscale(20%)}
.team-info{padding:24px}
.team-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--white);margin-bottom:4px}
.team-role{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.team-info p{font-size:23px;line-height:1.7}

/* VALUE BOXES */
.val-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:60px}
.val{background:var(--steel);padding:40px 32px;border-top:3px solid var(--gold);transition:background .3s}
.val:hover{background:var(--mid)}
.val-icon{font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--gold);line-height:1;margin-bottom:16px}
.val h3{font-size:20px;margin-bottom:12px}
.val p{font-size:23px;line-height:1.75}

/* RENDER GRID */
.rend-g{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:280px;gap:3px}
.ritem{position:relative;overflow:hidden;background:var(--mid)}
.ritem:nth-child(1){grid-column:span 8}
.ritem:nth-child(2){grid-column:span 4;grid-row:span 2}
.ritem:nth-child(3){grid-column:span 4}
.ritem:nth-child(4){grid-column:span 4}
.ritem:nth-child(5){grid-column:span 4}
.ritem img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.ritem:hover img{transform:scale(1.05)}
.r-label{position:absolute;bottom:0;left:0;right:0;padding:20px 18px 16px;background:linear-gradient(to top,rgba(6,6,6,.92),transparent);font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:0;transition:opacity .3s}
.ritem:hover .r-label{opacity:1}
.r-badge{position:absolute;top:14px;left:14px;background:var(--gold);color:var(--black);font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 10px}

/* FOOTER */
footer{background:var(--black);border-top:1px solid var(--border);padding:68px 52px 32px}
.ft-g{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:52px;margin-bottom:52px;padding-bottom:52px;border-bottom:1px solid var(--border)}
.ft-logo{height:38px;width:auto;mix-blend-mode:lighten;filter:brightness(1.05);margin-bottom:18px}
.ft-brand p{font-size:23px;line-height:1.85;max-width:300px}
.ft-btw{display:inline-block;margin-top:18px;background:var(--steel);border:1px solid var(--border);font-family:'Barlow Condensed',sans-serif;font-size:22px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);padding:6px 13px}
.ft-col h5{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft-col ul li a{font-size:23px;color:var(--gray);font-weight:300;transition:color .2s;cursor:pointer}
.ft-col ul li a:hover{color:var(--white)}
.ft-bot{display:flex;justify-content:space-between;align-items:center}
.ft-bot p{font-size:23px;color:rgba(106,106,106,.5)}
.ft-bot a{color:var(--gold)}

/* HERO (home) */
#hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 52px 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.hero-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(6,6,6,.97) 0%,rgba(6,6,6,.82) 45%,rgba(6,6,6,.45) 100%)}
.hero-bg::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
.hero-line{position:absolute;left:52px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--gold) 30%,var(--gold) 70%,transparent);opacity:.35}
.hero-content{position:relative;z-index:2;padding-left:24px}
.hero-tag{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(200,145,42,.4);padding:7px 16px;margin-bottom:28px;font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);animation:fup .9s ease both}
.hero-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
#hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(72px,11vw,160px);line-height:.88;letter-spacing:2px;text-transform:uppercase;margin-bottom:32px;animation:fup .9s ease .15s both}
#hero h1 .g{color:var(--gold);display:block}
#hero h1 .thin{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:clamp(18px,2.5vw,32px);letter-spacing:8px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.hero-sub{font-size:24px;font-weight:300;line-height:1.8;color:var(--muted);max-width:480px;margin-bottom:48px;animation:fup .9s ease .3s both}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;animation:fup .9s ease .45s both}
.hero-scroll{position:absolute;right:52px;bottom:52px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;animation:fup .9s ease .6s both}
.scroll-line{width:1px;height:52px;background:linear-gradient(to bottom,var(--gold),transparent);animation:sal 2.2s ease-in-out infinite}
@keyframes sal{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}
.scroll-txt{font-family:'Barlow Condensed',sans-serif;font-size:23px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);writing-mode:vertical-rl}
@keyframes fup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* HOME ABOUT SNIPPET */
.home-about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.logo-display{background:var(--black);padding:56px 48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);position:relative;overflow:hidden}
.logo-display::before,.logo-display::after{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
.logo-display::before{top:0}.logo-display::after{bottom:0}
.logo-bg-lines{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 1px,transparent 28px)}
.logo-main-img{width:100%;max-width:360px;mix-blend-mode:lighten;filter:brightness(1.05);position:relative;z-index:1}

/* RESPONSIVE */
@media(max-width:1100px){
  .home-about,.con-g{grid-template-columns:1fr;gap:52px}
  .svc-g,.proj-g,.team-g{grid-template-columns:1fr 1fr}
  .proc-g{grid-template-columns:1fr 1fr;gap:44px}
  .proc-g::after{display:none}
  .rend-g{grid-template-columns:repeat(6,1fr)}
  .ritem:nth-child(1){grid-column:span 6}
  .ritem:nth-child(2){grid-column:span 3;grid-row:span 1}
  .ritem:nth-child(3),.ritem:nth-child(4),.ritem:nth-child(5){grid-column:span 3}
  .gal-g{columns:2}
  .gi:nth-child(1){grid-column:span 6}
  .gi:nth-child(2),.gi:nth-child(3){grid-column:span 3}
  .gi:nth-child(4),.gi:nth-child(5),.gi:nth-child(6){grid-column:span 2}
  .ft-g{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .val-g{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  /* NAV */
  #nav{padding:0 18px;height:60px}
  .nav-ul{display:none}
  .burger{display:flex}
  .nav-logo img{height:34px}

  /* HERO */
  #hero{padding:100px 18px 60px;min-height:100svh;justify-content:flex-end;padding-bottom:80px}
  #hero h1{font-size:clamp(48px,14vw,72px);line-height:.92}
  .hero-tag{font-size:11px;letter-spacing:2px}
  .hero-sub{font-size:17px;margin-bottom:32px}
  .hero-btns{flex-direction:column;gap:12px;width:100%}
  .hero-btns .btn{width:100%;text-align:center;justify-content:center}
  .hero-scroll{display:none}

  /* SECTIONS */
  .sec,.sec-sm{padding:60px 18px}

  /* PAGE HERO */
  .page-hero{padding:100px 18px 50px}
  .page-hero h1{font-size:clamp(44px,12vw,80px)}
  .page-hero p{font-size:16px}
  .breadcrumb{font-size:11px}

  /* GRIDS → single column */
  .svc-g,.proj-g,.team-g,.val-g,.usp-g,.home-about,.con-g{grid-template-columns:1fr}
  .proc-g{grid-template-columns:1fr;gap:36px}
  .proc-g::after{display:none}

  /* SERVICE CARDS */
  .svc{height:320px}
  .svc rv d3{height:400px!important}
  .svc-c h3{font-size:22px}
  .svc-c p{font-size:15px}
  .svc-arr{opacity:1;transform:none}

  /* STATS */
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:28px 16px}
  .sn{font-size:42px}
  .sl{font-size:12px}

  /* GALLERY */
  .gal-g{columns:1}
  .gi:nth-child(1){grid-column:span 2;grid-row:span 1}
  .gi:nth-child(2),.gi:nth-child(3){grid-column:span 1}
  .gi:nth-child(4),.gi:nth-child(5),.gi:nth-child(6){grid-column:span 1}

  /* RENDERS */
  .rend-g{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .ritem:nth-child(1){grid-column:span 2}
  .ritem:nth-child(2){grid-column:span 2;grid-row:span 1}
  .ritem:nth-child(3),.ritem:nth-child(4),.ritem:nth-child(5){grid-column:span 1}

  /* TYPOGRAPHY */
  h2{font-size:clamp(34px,9vw,56px)}
  h3{font-size:19px}
  p{font-size:16px}
  .ey{font-size:11px;letter-spacing:3px}
  .btn{font-size:14px;padding:14px 28px}

  /* PROCESS STEPS */
  .step{padding:0 8px}
  .step-ring{width:64px;height:64px;font-size:22px;margin-bottom:20px}
  .step h3{font-size:16px}
  .step p{font-size:14px}

  /* QUOTE BAND */
  .quote-band{padding:40px 18px}
  .quote-band blockquote{font-size:clamp(22px,6vw,36px)}

  /* TICKER */
  .ticker-t span{font-size:13px;padding:0 20px}

  /* CONTACT */
  .fr{grid-template-columns:1fr}
  .fg input,.fg select,.fg textarea{font-size:16px}/* prevent iOS zoom */

  /* FOOTER */
  .ft-g{grid-template-columns:1fr;gap:28px}
  .ft-bot{flex-direction:column;gap:8px;text-align:center}
  .ft-brand p{font-size:15px}
  .ft-col ul li a{font-size:16px}

  /* PROJECT CARDS */
  .proj-img{height:220px}
  .proj-info{padding:18px}
  .proj-info h3{font-size:19px}

  /* FAQ */
  .faq-q{font-size:17px;padding:18px 0}

  /* USP */
  .usp{padding:20px 16px}
  .ut h4{font-size:16px}
  .ut p{font-size:15px}

  /* TEAM */
  .team-info p{font-size:15px}
  .team-name{font-size:20px}

  /* MOBILE NAV */
  .mob-nav a{font-size:36px}
  .mob-nav{gap:20px}
}
@media(max-width:400px){
  #hero h1{font-size:42px}
  h2{font-size:32px}
  .sec,.sec-sm{padding:48px 14px}
  .stat{padding:22px 10px}
  .sn{font-size:36px}
  .mob-nav a{font-size:28px}
  .svc{height:280px}
  .btn{padding:12px 22px;font-size:13px}
}
@media(max-width:768px){
  .svc-detail-g{grid-template-columns:1fr!important;gap:32px!important}
  .svc-detail-g > div:last-child{height:280px!important}
  /* Over ons verhaal */
  .about-g{grid-template-columns:1fr!important;gap:36px!important}
  /* Mini stats blokken */
  .mini-stats-g{grid-template-columns:1fr 1fr 1fr!important}
  /* Contact: verberg de rechter kolom niet, maak 1 kolom */
  .con-g{grid-template-columns:1fr!important;gap:40px!important}
  /* Formulier: 1 kolom */
  .fr{grid-template-columns:1fr!important}
  /* Section headers met knop: stapelen */
  .section-header{flex-direction:column;align-items:flex-start!important;gap:16px!important;margin-bottom:32px!important}
  .section-header .btn{width:100%;text-align:center}
  /* Val grid */
  .val-g{grid-template-columns:1fr!important}
  /* Logo display kleiner */
  .logo-display{min-height:160px}
  /* Hero btns stapelen */
  .hero-btns{display:flex!important;flex-direction:column!important;width:100%}
  .hero-btns .btn{width:100%!important;text-align:center}
  /* Proc steps 1 col */
  .proc-g{grid-template-columns:1fr!important;gap:36px!important}
  .proc-g::after{display:none}
  /* Step layout horizontaal op gsm */
  .step{flex-direction:row;text-align:left;align-items:flex-start;padding:0}
  .step-ring{margin-bottom:0;margin-right:20px;flex-shrink:0}
  /* Team */
  .team-g{grid-template-columns:1fr!important}
  /* Projecten grid 1 col */
  .proj-g{grid-template-columns:1fr!important}
  .proj-img{height:240px}
  /* Gallerij */
  .gal-g{grid-template-columns:1fr 1fr!important;grid-auto-rows:160px!important}
  .gi:nth-child(1){grid-column:span 2!important;grid-row:span 1!important}
  .gi:nth-child(2),.gi:nth-child(3){grid-column:span 1!important}
  .gi:nth-child(4),.gi:nth-child(5),.gi:nth-child(6){grid-column:span 1!important}
  /* Renders */
  .rend-g{grid-template-columns:1fr 1fr!important;grid-auto-rows:160px!important}
  .ritem:nth-child(1){grid-column:span 2!important}
  .ritem:nth-child(2){grid-column:span 2!important;grid-row:span 1!important}
  .ritem:nth-child(3),.ritem:nth-child(4),.ritem:nth-child(5){grid-column:span 1!important}
  /* Stats 2 kolommen */
  .stats{grid-template-columns:1fr 1fr!important}
  .stat:nth-child(2n){border-right:none}
  /* Footer */
  .ft-g{grid-template-columns:1fr!important;gap:28px!important}
  .ft-bot{flex-direction:column;gap:8px;text-align:center}
  /* USP */
  .usp-g{grid-template-columns:1fr!important}
}