/*
Theme Name: De Graaf Groep
Theme URI: https://example.com/
Author: De Graaf Groep
Description: Professioneel WordPress-thema voor De Graaf Groep.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: de-graaf-groep
*/

:root{--gold:#c8a55a;--gold2:#dfc27c;--black:#171717;--dark:#202020;--gray:#f4f4f2;--text:#343434;--white:#fff;--max:1240px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--text);line-height:1.7;background:#fff}
h1,h2,h3,h4{font-family:Poppins,Arial,sans-serif;line-height:1.12}
a{text-decoration:none;color:inherit}
.wrap{width:min(92%,var(--max));margin:auto}
.section{padding:120px 0}
.header{position:fixed;z-index:20;top:0;left:0;width:100%;transition:.3s}
.header.scrolled{background:#171717ee;box-shadow:0 8px 30px #0002}
.nav{height:92px;display:flex;align-items:center;gap:38px}
.brand{margin-right:auto}.brand img{width:150px;height:auto;display:block}
.nav nav{display:flex;gap:32px;color:#fff;font-size:14px;font-weight:600}
.nav nav a:hover{color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:55px;padding:0 27px;border:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.25s}
.gold{background:var(--gold);color:#fff}.gold:hover{background:var(--gold2);transform:translateY(-2px)}
.outline{border:1px solid #fff9;color:#fff}.outline:hover{background:#fff;color:#171717}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;color:#fff;overflow:hidden;background:linear-gradient(135deg,#303030,#151515)}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 75% 40%,#c8a55a22,transparent 35%)}
.hero-bg:after{content:"DE GRAAF GROEP";position:absolute;right:5%;bottom:12%;font:800 clamp(50px,11vw,180px)/.8 Poppins;color:#fff06;letter-spacing:-.08em}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#000c,#0007 45%,#0002)}
.hero-content{position:relative;padding-top:70px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gold);margin-bottom:20px}.eyebrow.dark{color:#9c7c38}
.hero h1{font-size:clamp(50px,7vw,92px);letter-spacing:-.05em;max-width:850px}.hero h1 span,h2 span{color:var(--gold)}
.hero p{max-width:650px;margin:28px 0 38px;color:#fffd;font-size:18px}.actions{display:flex;gap:14px}
.scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.2em;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.7}.scroll span{height:42px;width:1px;background:var(--gold)}
h2{font-size:clamp(42px,5vw,68px);letter-spacing:-.045em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.lead{font-size:17px}.lead p+p{margin-top:18px}.under{display:inline-block;margin-top:25px;border-bottom:2px solid var(--gold);font-weight:700}
.gray{background:var(--gray)}.heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:58px}.heading>p{max-width:420px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.card{min-height:400px;position:relative;overflow:hidden;color:#fff;background:#242424;padding:34px;display:flex;align-items:end}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#444,#181818);transition:.6s}.card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000d,#0001 65%)}.card:hover:before{transform:scale(1.06)}.card>div{position:relative;z-index:1}.card small{color:var(--gold);font-weight:800}.card h3{font-size:29px;margin:8px 0}.card p{max-width:520px;color:#fffb}.wide{grid-column:span 2}
.stats{padding:80px 0;background:#171717;color:#fff}.statgrid{display:grid;grid-template-columns:repeat(4,1fr)}.stat{text-align:center;border-right:1px solid #fff2}.stat:last-child{border:0}.stat strong{font:800 60px/1 Poppins}.stat strong span{color:var(--gold)}.stat small{display:block;margin-top:9px;color:#fff8}
.projectgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}.project{overflow:hidden}.project:first-child{grid-row:span 2}.pimage{min-height:280px;background:linear-gradient(135deg,#535353,#202020);transition:.6s}.project:first-child .pimage{min-height:620px}.project:hover .pimage{transform:scale(1.025)}.ptext{padding:22px 0}.ptext small{color:var(--gold);font-weight:800;letter-spacing:.15em}.ptext h3{font-size:27px;margin:5px 0}
.center{text-align:center;margin-bottom:55px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.steps>div{background:#fff;padding:34px;min-height:220px}.steps b{font:800 34px Poppins;color:var(--gold)}.steps h3{margin:18px 0 9px}
.cta{padding:100px 0;background:#202020;color:#fff}.ctainner{display:flex;align-items:center;justify-content:space-between;gap:50px}.cta h2{font-size:clamp(40px,5vw,65px)}.cta p{margin-top:18px;color:#fff9}
.phone{display:block;margin-top:28px;font:700 30px Poppins}.contact form{display:flex;flex-direction:column;gap:16px}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}input,textarea,select{width:100%;border:1px solid #0001;background:var(--gray);padding:17px;font:15px Inter;outline:0}input:focus,textarea:focus,select:focus{border-color:var(--gold)}textarea{resize:vertical}
footer{background:#111;color:#fff;padding-top:75px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:55px;padding-bottom:65px}.foot img{width:150px;margin-bottom:18px}.foot p{max-width:300px;color:#fff7}.foot h4{color:var(--gold);margin-bottom:17px}.foot a{display:block;color:#fff9;margin:6px 0}.foot a:hover{color:var(--gold)}.bottom{border-top:1px solid #fff1;padding:22px 0;color:#fff6;font-size:12px}.bottom .wrap{display:flex;justify-content:space-between}
.whatsapp{position:fixed;right:22px;bottom:22px;z-index:30;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#168c4a;color:#fff;font-weight:800;box-shadow:0 10px 30px #0004}
.burger{display:none;background:none;border:0}.burger i{display:block;width:27px;height:2px;background:#fff;margin:6px}
@media(max-width:900px){.nav nav{display:none}.nav nav.open{display:flex;position:absolute;top:92px;left:0;right:0;padding:28px;flex-direction:column;background:#171717}.burger{display:block}.nav-cta{display:none}.split,.cards,.projectgrid,.foot{grid-template-columns:1fr}.wide{grid-column:auto}.statgrid,.steps{grid-template-columns:1fr 1fr}.project:first-child{grid-row:auto}.project:first-child .pimage{min-height:400px}.ctainner{flex-direction:column;align-items:flex-start}.section{padding:85px 0}}
@media(max-width:600px){.nav{height:78px}.brand img{width:125px}.hero h1{font-size:48px}.hero p{font-size:16px}.actions{flex-direction:column;align-items:stretch}.heading{display:block}.heading>p{margin-top:18px}.statgrid,.steps,.formrow{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid #fff1;padding:20px}.stat:last-child{border-bottom:0}.foot{gap:35px}.bottom .wrap{flex-direction:column;gap:8px}}