:root{
  --bg:#0A0A0A;
  --bg2:#111111;
  --bg3:#1a1a1a;
  --gold:#C9A84C;
  --gold-light:#E8C96D;
  --gold-pale:#f0dfa0;
  --white:#F5F2ED;
  --white2:#ffffff;
  --gray:#999;
  --gray2:#555;
  --line:rgba(201,168,76,0.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:'Manrope',sans-serif;font-weight:300;line-height:1.7;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

h1,h2,h3{font-family:'Fraunces',serif;font-weight:900;line-height:1.08}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.lead{font-size:18px;color:rgba(245,242,237,.85);font-weight:300}

/* NAV */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:all .3s}
header.scrolled{background:rgba(10,10,10,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:10px 0}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 32px}
.brand{display:flex;align-items:center;gap:0;text-decoration:none}
.brand-logo{height:50px;width:auto;transition:height .3s}
header.scrolled .brand-logo{height:40px}
.navlinks{display:flex;align-items:center;gap:36px;list-style:none}
.navlinks a{text-decoration:none;font-size:13px;font-weight:500;color:var(--white);opacity:.75;letter-spacing:.06em;transition:opacity .2s,color .2s}
.navlinks a:hover{opacity:1;color:var(--gold-light)}
.navlinks .cta{background:transparent;border:1px solid var(--gold);color:var(--gold-light);padding:10px 24px;border-radius:0;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px;opacity:1;transition:background .25s,color .25s}
.navlinks .cta:hover{background:var(--gold);color:var(--bg)}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.hamb span{width:24px;height:1px;background:var(--white)}
.mmenu{position:fixed;inset:0;background:rgba(10,10,10,.97);z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.mmenu.open{display:flex}
.mmenu a{color:var(--white);text-decoration:none;font-family:'Fraunces';font-size:30px;font-weight:700;transition:color .2s}
.mmenu a:hover{color:var(--gold-light)}
.mmenu .mclose{position:absolute;top:22px;right:28px;font-size:32px;color:var(--white);background:none;border:none;cursor:pointer}

/* HERO */
.hero{position:relative;height:100vh;min-height:700px;display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.25) 35%,rgba(10,10,10,.8) 100%)}
.hero-inner{position:relative;max-width:780px}
.hero h1{font-size:clamp(46px,7vw,92px);color:var(--white2);margin-bottom:6px}
.hero h1 em{color:var(--gold-light);font-style:italic;font-weight:500;display:block}
.hero-line{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:28px 0;width:0;animation:lineGrow 1.2s .8s forwards}
@keyframes lineGrow{to{width:280px}}
.hero .lead{max-width:540px;margin-bottom:36px;opacity:0;animation:fadeUp .8s 1s forwards}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .8s 1.2s forwards}
.hero .eyebrow{opacity:0;animation:fadeUp .8s .3s forwards}
.hero h1{opacity:0;animation:fadeUp .8s .5s forwards}
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeIn 1s 1.8s forwards}
.hero-scroll span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.scroll-arr{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold),transparent);animation:pulse 2s infinite}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:15px 36px;transition:all .25s}
.btn-gold{background:var(--gold);color:var(--bg)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-outline{border:1px solid rgba(245,242,237,.45);color:var(--white)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light)}

/* SECTIONS */
section{padding:100px 0}
.sec-head{max-width:620px;margin-bottom:52px}
h2{font-size:clamp(30px,4.5vw,54px)}
h2 em{color:var(--gold-light);font-style:italic;font-weight:500}
.sec-head p{margin-top:14px;color:var(--gray);font-size:16px}
.gold-rule{width:60px;height:1px;background:var(--gold);margin-bottom:28px}

/* SVC CARDS */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
.svc{position:relative;overflow:hidden;min-height:400px;display:flex;align-items:flex-end;text-decoration:none;color:var(--white)}
.svc.big{grid-column:span 2;min-height:360px}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.svc:hover img{transform:scale(1.06)}
.svc-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 25%,rgba(10,10,10,.92) 100%)}
.svc-body{position:relative;padding:36px 32px}
.svc-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px}
.svc h3{color:var(--white2);font-size:28px;margin-bottom:8px}
.svc p{font-size:14px;color:rgba(245,242,237,.7);max-width:420px}
.svc .arrow{margin-top:12px;font-size:13px;font-weight:700;color:var(--gold);display:inline-block}

/* ALT BLOCKS */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:100px}
.alt:last-child{margin-bottom:0}
.alt-img{overflow:hidden}
.alt-img img{width:100%;height:500px;object-fit:cover}
.alt.rev{direction:rtl}.alt.rev>*{direction:ltr}
.alt ul{list-style:none;margin:22px 0 28px}
.alt li{padding-left:26px;position:relative;margin-bottom:9px;color:var(--gray);font-size:15px}
.alt li::before{content:"";position:absolute;left:0;top:12px;width:16px;height:1px;background:var(--gold)}

/* PROJECTS */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.proj{position:relative;overflow:hidden;text-decoration:none;color:var(--white)}
.proj-img{aspect-ratio:4/3;overflow:hidden}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;filter:brightness(.85)}
.proj:hover .proj-img img{transform:scale(1.05);filter:brightness(1)}
.proj-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.85),transparent 50%);opacity:0;transition:opacity .4s}
.proj:hover .proj-ov{opacity:1}
.proj-info{position:absolute;bottom:0;left:0;right:0;padding:24px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.proj:hover .proj-info{opacity:1;transform:none}
.proj-tag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);font-weight:700}
.proj h3{font-size:18px;margin-top:4px}

/* CTA BAND */
.band{background:var(--gold);color:var(--bg);text-align:center;padding:80px 0}
.band h2{color:var(--bg);max-width:680px;margin:0 auto 14px}
.band p{color:rgba(10,10,10,.65);max-width:480px;margin:0 auto 28px;font-size:16px}
.btn-dark{background:var(--bg);color:var(--gold-light)}
.btn-dark:hover{background:var(--bg2)}

/* PAGE HEADER */
.phead{padding:150px 0 80px;background:var(--bg2);border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(40px,6vw,76px);max-width:800px}
.phead h1 em{color:var(--gold-light);font-style:italic;font-weight:500}
.phead p{color:var(--gray);max-width:540px;margin-top:16px;font-size:17px}
.crumb{font-size:13px;color:var(--gray2);margin-bottom:18px}
.crumb a{color:var(--gold);text-decoration:none}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.cinfo .citem{padding:22px 0;border-bottom:1px solid var(--line)}
.cinfo .citem:last-child{border-bottom:none}
.cinfo .cl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px}
.cinfo .cv{font-family:'Fraunces';font-size:22px;font-weight:600}
.cinfo .cv a{text-decoration:none}.cinfo .cv a:hover{color:var(--gold-light)}
.cform{background:var(--bg2);padding:36px;border:1px solid var(--line)}
.cform .fg{margin-bottom:18px}
.cform label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.cform input,.cform select,.cform textarea{width:100%;background:var(--bg);border:1px solid rgba(201,168,76,.2);padding:13px 16px;font-family:'Manrope';font-size:15px;color:var(--white);outline:none;transition:border .2s;border-radius:0;-webkit-appearance:none}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--gold)}
.cform textarea{min-height:110px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform button{width:100%;margin-top:6px}

/* FOOTER */
footer{background:var(--bg);border-top:1px solid var(--line);padding:60px 0 30px}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-bottom:40px}
.fcol h4{font-family:'Fraunces';font-size:17px;margin-bottom:14px;font-weight:700}
.fcol a{color:var(--gray);text-decoration:none;display:block;margin-bottom:8px;font-size:14px}
.fcol a:hover{color:var(--gold-light)}
.fbrand-logo{height:52px;margin-bottom:14px}
.fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--gray2)}
.fbot a{color:var(--gray2);text-decoration:none}.fbot a:hover{color:var(--gold-light)}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.blog-card{background:var(--bg2);border:1px solid var(--line);overflow:hidden;text-decoration:none;color:var(--white);transition:border-color .3s,transform .3s}
.blog-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.blog-body{padding:28px 24px}
.blog-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.blog-card h3{font-size:20px;margin-bottom:10px;line-height:1.3}
.blog-card p{font-size:14px;color:var(--gray);line-height:1.7}
.blog-meta{font-size:12px;color:var(--gray2);margin-top:14px}
/* article */
.article{max-width:760px;margin:0 auto}
.article h2{font-size:28px;margin:44px 0 16px}
.article h3{font-size:22px;margin:32px 0 12px}
.article p{color:var(--gray);margin-bottom:18px;line-height:1.9;font-size:16px}
.article ul{margin:14px 0 24px 18px;color:var(--gray)}
.article li{margin-bottom:8px;font-size:15px}
.article strong{color:var(--white);font-weight:600}

/* REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.vis{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:900px){
  .navlinks{display:none}.hamb{display:flex}
  section{padding:66px 0}
  .svc-grid{grid-template-columns:1fr}.svc.big{grid-column:span 1}
  .alt{grid-template-columns:1fr;gap:28px}.alt.rev{direction:ltr}
  .alt-img img{height:280px}
  .proj-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .fcols{grid-template-columns:1fr;gap:28px}
  .blog-grid{grid-template-columns:1fr}
  .phead{padding:110px 0 50px}
  .frow{grid-template-columns:1fr}
  .hero{min-height:600px}
}

/* Waarden grid mobile fix */
@media(max-width:700px){
  .waarden-grid{grid-template-columns:1fr 1fr !important}
}

/* Waarden grid - responsive fix */
.waarden-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:900px){
  .waarden-grid{grid-template-columns:1fr 1fr}
  .waarden-grid > div{border-left:none !important;border-top:1px solid var(--line);padding:28px 16px !important}
}
@media(max-width:520px){
  .waarden-grid{grid-template-columns:1fr}
}