@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --navy: #15048B;
  --navy-deep: #0F0836;
  --amber: #FAB60D;
  --paper: #F7F5F0;
  --paper-dim: #EFECE4;
  --ink: #1B1B22;
  --slate: #63636F;
  --line: #D9D5CA;
  --radius: 3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  margin:0 0 .4em 0;
  line-height:1.1;
  font-weight:600;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em 0; max-width:62ch;}
a{color:inherit;}
img{max-width:100%; display:block;}
.container{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 28px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand img{height:44px; width:auto;}
.brand-text{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.15rem; color:var(--navy);}
.nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; color:var(--ink); font-weight:500; font-size:0.98rem;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{border-bottom-color:var(--amber);}
.nav-call{
  background:var(--navy); color:#fff !important; text-decoration:none;
  padding:10px 18px; border-radius:var(--radius); font-weight:600; font-size:0.95rem;
  border-bottom:none !important;
  white-space:nowrap;
}
.nav-call:hover{background:var(--navy-deep);}
.nav-toggle{display:none;}

@media (max-width:820px){
  .nav-links{
    position:fixed; inset:76px 0 auto 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-links.open{max-height:400px;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; width:100%; padding:16px 28px; border-bottom:1px solid var(--line);}
  .nav-call{margin:16px 28px;}
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:34px; height:26px; position:relative;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:var(--navy);
  }
  .nav-toggle::before{top:0;}
  .nav-toggle span{top:12px;}
  .nav-toggle::after{top:24px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:600; font-size:0.98rem;
  padding:14px 26px; border-radius:var(--radius); border:1.5px solid transparent;
}
.btn-amber{background:var(--amber); color:var(--navy-deep);}
.btn-amber:hover{background:#e6a608;}
.btn-ghost{border-color:rgba(255,255,255,0.5); color:#fff;}
.btn-ghost:hover{border-color:#fff;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-deep);}

/* ---------- Hero ---------- */
.hero{
  background:var(--navy-deep); color:#fff; position:relative; overflow:hidden;
}
.hero .container{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
  padding-top:76px; padding-bottom:76px; min-height:520px;
}
.hero-eyebrow{color:var(--amber); font-weight:600; margin-bottom:14px; font-size:1rem;}
.hero h1{font-size:clamp(2.1rem, 4vw, 3.2rem); color:#fff;}
.hero p.lead{color:#D8D5EA; font-size:1.15rem; max-width:46ch;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}
.hero-art{width:100%; height:100%; min-height:320px;}
@media (max-width:820px){
  .hero .container{grid-template-columns:1fr; padding-top:40px; padding-bottom:40px;}
  .hero-art{order:-1; min-height:220px;}
}

/* ---------- Section basics ---------- */
section{padding:88px 0;}
.section-head{max-width:56ch; margin-bottom:48px;}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.3rem); color:var(--navy);}
.section-head p{color:var(--slate); font-size:1.08rem;}

/* ---------- Fuse panel (services) ---------- */
.fuse-panel{
  background:var(--navy-deep);
  border-radius:6px;
  padding:6px 0;
}
.fuse-row{
  display:grid; grid-template-columns:64px 1fr auto;
  align-items:center; gap:24px;
  padding:28px 32px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  text-decoration:none; color:#fff;
}
.fuse-row:last-child{border-bottom:none;}
.fuse-switch{width:40px; height:64px; position:relative;}
.fuse-row h3{color:#fff; font-size:1.2rem; margin-bottom:6px;}
.fuse-row p{color:#C7C4DC; margin:0; font-size:0.98rem;}
.fuse-link{color:var(--amber); font-weight:600; font-size:0.95rem; white-space:nowrap; justify-self:end;}
@media (max-width:640px){
  .fuse-row{grid-template-columns:48px 1fr; row-gap:10px;}
  .fuse-link{grid-column:2; justify-self:start;}
}

/* ---------- Alternating detail rows (diensten page) ---------- */
.detail-row{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:56px 0; border-top:1px solid var(--line);
}
.detail-row:first-of-type{border-top:none;}
.detail-row.reverse .detail-copy{order:2;}
.detail-badge{
  width:56px; height:56px; border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.detail-copy h3{font-size:1.5rem; color:var(--navy);}
.detail-list{list-style:none; margin:18px 0 0 0; padding:0;}
.detail-list li{
  padding-left:26px; position:relative; margin-bottom:10px; color:var(--ink);
}
.detail-list li::before{
  content:""; position:absolute; left:0; top:9px; width:12px; height:2px; background:var(--amber);
}
.detail-visual{
  background:var(--paper-dim); border-radius:6px; min-height:260px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:820px){
  .detail-row, .detail-row.reverse{grid-template-columns:1fr;}
  .detail-row.reverse .detail-copy{order:0;}
  .detail-visual{order:-1;}
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--navy); color:#fff; border-radius:6px;
  padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-banner h2{color:#fff; font-size:1.7rem; margin-bottom:6px;}
.cta-banner p{color:#D8D5EA; margin:0;}

/* ---------- About page ---------- */
.about-hero{background:var(--paper-dim); padding:64px 0;}
.about-hero h1{color:var(--navy); font-size:clamp(1.9rem,3.5vw,2.6rem);}
.photo-frame{
  aspect-ratio:4/3; background:var(--paper-dim); border:1.5px dashed var(--line);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:var(--slate); font-size:0.95rem; text-align:center; padding:20px;
}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:20px;}
.values div h4{color:var(--navy); font-size:1.1rem;}
.values div p{color:var(--slate); font-size:0.98rem;}
@media (max-width:820px){.values{grid-template-columns:1fr;}}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.field{margin-bottom:20px;}
.field label{display:block; font-weight:600; margin-bottom:6px; font-size:0.95rem;}
.field input, .field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:'Work Sans', sans-serif; font-size:1rem; background:#fff; color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:2px solid var(--navy); outline-offset:1px;}
.field textarea{resize:vertical; min-height:130px;}
.info-card{background:var(--navy-deep); color:#fff; border-radius:6px; padding:36px;}
.info-card h3{color:#fff; font-size:1.2rem;}
.info-row{display:flex; gap:14px; margin-top:22px; align-items:flex-start;}
.info-row .label{color:var(--amber); font-weight:600; display:block; margin-bottom:2px; font-size:0.92rem;}
.info-row a{color:#fff; text-decoration:none; font-size:1.05rem;}
.info-row a:hover{text-decoration:underline;}
.area-list{margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.15); color:#C7C4DC; font-size:0.95rem;}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep); color:#C7C4DC; padding:56px 0 32px;}
footer .container{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
footer h4{color:#fff; font-size:1rem; margin-bottom:14px;}
footer .brand img{height:38px;}
footer .brand-text{color:#fff;}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:10px;}
footer a{text-decoration:none; color:#C7C4DC; font-size:0.95rem;}
footer a:hover{color:#fff;}
.footer-bottom{
  max-width:1140px; margin:40px auto 0; padding:24px 28px 0; border-top:1px solid rgba(255,255,255,0.12);
  font-size:0.85rem; color:#8B88A3;
}
@media (max-width:820px){footer .container{grid-template-columns:1fr; gap:28px;}}