/* ===== GDS Bouwsystemen — gedeelde stijlen ===== */
:root{
  --blauw:#0069b4; --blauw-donker:#004a80; --blauw-licht:#7cc0ea;
  --ink:#17212c; --grijs:#5a6472; --bg:#fff; --bg-soft:#f4f6f8; --lijn:#e3e8ee;
  --radius:16px; --schaduw:0 12px 34px rgba(13,38,61,.09); --schaduw-xl:0 30px 70px rgba(13,38,61,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;line-height:1.1;letter-spacing:-.025em}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{width:min(1240px,92%);margin-inline:auto}
section{padding:104px 0}
.label{display:inline-flex;align-items:center;gap:12px;font:700 12px/1 'Archivo';letter-spacing:.2em;text-transform:uppercase;color:var(--blauw);margin-bottom:20px}
.label::before{content:"";width:32px;height:2px;background:var(--blauw)}
.h2{font-size:clamp(30px,4.2vw,48px);font-weight:800;margin-bottom:18px;text-wrap:balance}
.lead{color:var(--grijs);font-size:17.5px;max-width:700px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--blauw);color:#fff!important;font:700 14.5px 'Archivo';padding:16px 30px;border-radius:999px;transition:.3s;box-shadow:0 10px 26px rgba(0,105,180,.35);border:0;cursor:pointer}
.btn:hover{background:var(--blauw-donker);transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.75);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.outline{background:#fff;color:var(--blauw)!important;border:2px solid var(--blauw);box-shadow:none}
/* Fade alleen actief mét JS — zonder JS is alles direct zichtbaar */
html.js .fade{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
html.js .fade.in{opacity:1;transform:none}

/* Header */
header{position:fixed;inset:0 0 auto;z-index:100;transition:.35s}
header .bar{display:flex;align-items:center;justify-content:space-between;height:88px}
header.scrolled,header.vast{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--lijn)}
header.scrolled .bar,header.vast .bar{height:72px}
.logo img{height:46px;width:auto}
nav.desktop{display:flex;gap:30px;align-items:center}
nav.desktop a{font:600 14px 'Archivo';color:#fff;opacity:.92;transition:.25s;position:relative}
nav.desktop a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:currentColor;transition:.3s}
nav.desktop a:hover{opacity:1}nav.desktop a:hover::after{width:100%}
nav.desktop a.actief{opacity:1}nav.desktop a.actief::after{width:100%}
header.scrolled nav.desktop a,header.vast nav.desktop a{color:var(--ink)}
nav.desktop .btn{color:#fff!important;padding:12px 24px}
.burger{display:none;background:none;border:0;cursor:pointer;z-index:120}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.3s}
header.scrolled .burger span,header.vast .burger span,.burger.open span{background:var(--ink)}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobiel{position:fixed;inset:0;background:#0b1c2c;z-index:110;display:flex;flex-direction:column;justify-content:center;padding:0 8%;gap:6px;transform:translateX(100%);transition:.45s cubic-bezier(.7,0,.2,1)}
.mobiel.open{transform:none}
.mobiel a{font:700 clamp(26px,6vw,36px) 'Archivo';color:#fff;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobiel .btn{margin-top:26px;align-self:flex-start}

/* Hero (home) */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:0}
.hero .foto{position:absolute;inset:0}
.hero .foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:hz 16s ease-out forwards}
@keyframes hz{to{transform:scale(1)}}
.hero .laag{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,31,.6),rgba(7,18,31,.18) 45%,rgba(7,18,31,.86))}
.hero .inhoud{position:relative;width:min(1240px,92%);margin:0 auto;padding:200px 0 92px}
.hero h1{font-size:clamp(40px,6.8vw,82px);font-weight:900;max-width:14ch;margin:20px 0 22px;text-wrap:balance}
.hero p{font-size:clamp(16px,1.7vw,20px);max-width:54ch;color:rgba(255,255,255,.88)}
.hero .ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.hero .meta{display:flex;gap:44px;margin-top:70px;padding-top:30px;border-top:1px solid rgba(255,255,255,.22);flex-wrap:wrap}
.hero .meta b{display:block;font:800 24px 'Archivo'}
.hero .meta span{font-size:13px;color:rgba(255,255,255,.72)}

/* Pagina-banner (subpagina's) */
.banner{position:relative;color:#fff;padding:220px 0 90px;overflow:hidden}
.banner .foto{position:absolute;inset:-25% 0 0;height:125%;will-change:transform}
.banner .foto img{width:100%;height:100%;object-fit:cover}
.banner .laag{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,31,.72),rgba(7,18,31,.55) 55%,rgba(7,18,31,.85))}
.banner .wrap{position:relative}
.banner h1{font-size:clamp(36px,5.5vw,64px);font-weight:900;margin:18px 0 16px;text-wrap:balance}
.banner p{font-size:17px;max-width:60ch;color:rgba(255,255,255,.85)}
.crumbs{font:600 12px 'Archivo';letter-spacing:.14em;text-transform:uppercase;color:var(--blauw-licht)}
.crumbs a{opacity:.8}.crumbs a:hover{opacity:1}

/* Marquee */
.marquee{background:var(--blauw);color:#fff;padding:20px 0;overflow:hidden;white-space:nowrap}
.marquee .baan{display:inline-flex;gap:56px;animation:mq 34s linear infinite;padding-right:56px}
.marquee span{font:700 15px 'Archivo';letter-spacing:.06em;display:inline-flex;align-items:center;gap:56px}
.marquee span::after{content:"◆";font-size:9px;opacity:.6}
@keyframes mq{to{transform:translateX(-50%)}}

/* Segmenten */
.segment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.segment{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/4.6;box-shadow:var(--schaduw)}
.segment img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.6,.2,1)}
.segment:hover img{transform:scale(1.06)}
.segment .txt{position:absolute;inset:auto 0 0;padding:30px;background:linear-gradient(180deg,transparent,rgba(7,18,31,.9));color:#fff}
.segment .txt em{font:600 11px 'Archivo';letter-spacing:.16em;text-transform:uppercase;color:var(--blauw-licht);font-style:normal}
.segment h3{font-size:24px;margin:8px 0 6px}
.segment p{font-size:13.5px;color:rgba(255,255,255,.78)}

/* Projecten */
.projecten{background:var(--bg-soft)}
.proj-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{border:1px solid var(--lijn);background:#fff;padding:10px 20px;border-radius:999px;font:600 13px 'Archivo';color:var(--grijs);cursor:pointer;transition:.25s}
.filters button.actief,.filters button:hover{background:var(--blauw);border-color:var(--blauw);color:#fff}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px}
.kaart{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:#0b1c2c;box-shadow:var(--schaduw);grid-column:span 4;aspect-ratio:4/3.1}
.kaart.groot{grid-column:span 8;aspect-ratio:16/8.2}
.kaart img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.6,.2,1)}
.kaart:hover img{transform:scale(1.08)}
.kaart .info{position:absolute;inset:auto 0 0;padding:28px;background:linear-gradient(180deg,transparent,rgba(7,18,31,.9));color:#fff}
.kaart .tag{font:700 11px 'Archivo';letter-spacing:.15em;text-transform:uppercase;color:var(--blauw-licht)}
.kaart h3{font-size:21px;margin:7px 0 3px;color:#fff}
.kaart.groot h3{font-size:26px}
.kaart p{font-size:13.5px;color:rgba(255,255,255,.78)}
.kaart.verborgen{display:none}

/* Producten accordions */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px}
.product{border:1px solid var(--lijn);border-radius:var(--radius);background:#fff;overflow:hidden;transition:.3s}
.product:hover{box-shadow:var(--schaduw-xl);border-color:transparent}
.product button{width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 30px;cursor:pointer;text-align:left}
.product h3{font-size:19px}
.product .pijl{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(0,105,180,.09);color:var(--blauw);display:grid;place-items:center;font-size:18px;transition:.35s}
.product.open .pijl{transform:rotate(45deg);background:var(--blauw);color:#fff}
.product .body{max-height:0;overflow:hidden;transition:max-height .5s ease}
.product .body p{padding:0 30px 28px;color:var(--grijs);font-size:15px}
.product.klein{grid-column:span 2}
.product.klein .rij{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 30px 28px}
.product.klein .rij div{background:var(--bg-soft);border-radius:12px;padding:16px 18px;font:600 14px 'Archivo'}
/* Volledig open variant (producten-pagina, geen JS nodig) */
.product.statisch .body{max-height:none}
.product.statisch button{cursor:default}
.product.statisch .pijl{display:none}

/* Waarom */
.waarom{background:#0b1c2c;color:#fff;position:relative;overflow:hidden}
.waarom::before{content:"GDS";position:absolute;right:-2%;top:-12%;font:900 340px 'Archivo';color:rgba(255,255,255,.028);line-height:1;pointer-events:none}
.waarom .lead{color:rgba(255,255,255,.65)}
.waarom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.reden{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:34px 30px;transition:.35s}
.reden:hover{background:rgba(255,255,255,.09);transform:translateY(-5px)}
.reden b{font:800 32px 'Archivo';color:var(--blauw-licht);display:block;margin-bottom:12px}
.reden h3{font-size:18px;margin-bottom:8px;color:#fff}
.reden p{font-size:14px;color:rgba(255,255,255,.62)}

/* Split / Over */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.split .beeld{position:relative}
.split .beeld img{border-radius:var(--radius);aspect-ratio:4/4.2;object-fit:cover;width:100%;box-shadow:var(--schaduw-xl)}
.split .beeld .badge{position:absolute;left:-26px;bottom:34px;background:var(--blauw);color:#fff;border-radius:var(--radius);padding:22px 28px;box-shadow:var(--schaduw-xl)}
.split .beeld .badge b{font:800 34px 'Archivo';display:block}
.split .beeld .badge span{font-size:13px;opacity:.85}
.checks{margin-top:26px;display:grid;gap:13px}
.checks li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.checks li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:rgba(0,105,180,.1);color:var(--blauw);font-weight:800;display:grid;place-items:center;font-size:13px}

/* Erkenning */
.erkenning{padding:80px 0;background:var(--bg-soft)}
.erk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.erk{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:32px 28px;text-align:center;box-shadow:var(--schaduw)}
.erk b{font:800 20px 'Archivo';color:var(--blauw);display:block;margin:14px 0 6px}
.erk p{font-size:13.5px;color:var(--grijs)}
.erk .ic{width:54px;height:54px;margin:0 auto;border-radius:50%;background:rgba(0,105,180,.09);display:grid;place-items:center;font-size:24px}

/* Nieuws */
.nieuws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.n-item{border:1px solid var(--lijn);border-radius:var(--radius);padding:30px;background:#fff;transition:.3s;display:flex;flex-direction:column;gap:12px}
.n-item:hover{box-shadow:var(--schaduw-xl);transform:translateY(-4px);border-color:transparent}
.n-item time{font:700 12px 'Archivo';letter-spacing:.12em;text-transform:uppercase;color:var(--blauw)}
.n-item h3{font-size:17.5px;line-height:1.35}

/* Project-detail */
.detail-info{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.detail-info div{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:22px}
.detail-info b{font:700 12px 'Archivo';letter-spacing:.12em;text-transform:uppercase;color:var(--blauw);display:block;margin-bottom:6px}
.galerij{display:grid;grid-template-columns:2fr 1fr;gap:22px;margin-top:22px}
.galerij img{border-radius:var(--radius);object-fit:cover;width:100%;height:100%;box-shadow:var(--schaduw)}
.galerij .plx{will-change:transform}
.galerij .kolom{display:grid;gap:22px}
.proza{max-width:760px;font-size:16.5px;color:var(--ink)}
.proza p{margin-bottom:18px;color:var(--grijs)}

/* Contact */
.contact{background:linear-gradient(125deg,var(--blauw),var(--blauw-donker));color:#fff}
.contact .split{align-items:start}
.contact h2{font-size:clamp(30px,4.4vw,50px);font-weight:900;margin-bottom:18px;text-wrap:balance}
.contact p{color:rgba(255,255,255,.85)}
.c-blok{margin-top:30px;display:grid;gap:16px}
.c-blok a,.c-blok div{display:flex;gap:14px;align-items:center;font-size:15.5px;color:#fff}
.c-blok .ic{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
form.vlak{background:#fff;border-radius:var(--radius);padding:36px;color:var(--ink);box-shadow:var(--schaduw-xl)}
form.vlak h3{font-size:20px;margin-bottom:20px}
.f-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,textarea{width:100%;border:1px solid var(--lijn);border-radius:10px;padding:14px 16px;font:15px 'Inter';margin-bottom:14px;transition:.25s;background:#fbfcfd}
input:focus,textarea:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(0,105,180,.12);background:#fff}
textarea{min-height:120px;resize:vertical}
form.vlak .btn{width:100%;justify-content:center}
.kaart-embed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw);margin-top:52px}
.kaart-embed iframe{width:100%;height:420px;border:0;display:block}

/* Footer */
footer{background:#081624;color:#aeb9c4;padding:70px 0 30px;font-size:14px}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
footer h4{color:#fff;font-size:13px;margin-bottom:18px;letter-spacing:.1em;text-transform:uppercase}
footer a{display:block;padding:5px 0;transition:.25s}
footer a:hover{color:#fff}
.foot img{height:48px;margin-bottom:18px}
.copy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:13px;color:#7d8a96}

@media(max-width:1024px){
 .segment-grid,.waarom-grid,.nieuws-grid{grid-template-columns:1fr 1fr}
 .erk-grid,.detail-info{grid-template-columns:repeat(2,1fr)}
 .foot{grid-template-columns:1fr 1fr}
 .kaart,.kaart.groot{grid-column:span 6;aspect-ratio:4/3}
}
@media(max-width:820px){
 section{padding:76px 0}
 nav.desktop{display:none}.burger{display:block}
 .split{grid-template-columns:1fr;gap:44px}
 .prod-grid{grid-template-columns:1fr}.product.klein{grid-column:span 1}
 .product.klein .rij{grid-template-columns:1fr 1fr}
 .split .beeld .badge{left:16px}
 .galerij{grid-template-columns:1fr}
}
@media(max-width:560px){
 .segment-grid,.waarom-grid,.nieuws-grid,.erk-grid,.detail-info{grid-template-columns:1fr}
 .kaart,.kaart.groot{grid-column:span 12;aspect-ratio:16/11}
 .f-rij{grid-template-columns:1fr}.foot{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Gutenberg editable homepage */
.gds-home .wp-block-cover__inner-container{width:100%;}
.gds-home .wp-block-button__link{border-radius:0;text-decoration:none;}
.gds-home .wp-block-image{margin:0;}
.gds-home .segment-grid,.gds-home .waarom-grid,.gds-home .erk-grid{display:grid;}
.gds-home .segment-grid{grid-template-columns:repeat(3,1fr);gap:22px;}
.gds-home .segment-grid .wp-block-column{margin:0;}
.gds-home .segment-grid .wp-block-image img{width:100%;height:360px;object-fit:cover;}
.gds-home .hero-tekst{max-width:760px;}
@media(max-width:800px){.gds-home .segment-grid{grid-template-columns:1fr;}.gds-home .segment-grid .wp-block-image img{height:280px;}}