/* ==========================================================================
   Key Ventures B.V. — main.css
   Palet: Harbour Navy #0F2A4A · Key Blue #1C4E8C · Brass #C08F2C
   Type:  Montserrat (koppen, menu, knoppen) + Open Sans (lopende tekst)
   ========================================================================== */

:root{
  --navy:#0F2A4A;
  --navy-2:#173C6B;
  --key:#1C4E8C;
  --brass:#C08F2C;
  --brass-light:#C08F2C; /* gelijk aan --brass: één goudtint overal */
  --sand:#E7DDC7;
  --sand-2:#DCD0B4;
  --paper:#F8F6F1;
  --ink:#182028;
  --slate:#5F6B77;
  --line:rgba(15,42,74,.14);
  --line-dark:rgba(255,255,255,.16);
  --wrap:1200px;
  --header-h:104px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Open Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{font-family:'Montserrat',system-ui,sans-serif;font-weight:700;line-height:1.16;margin:0;letter-spacing:-.02em;}
h1{font-size:clamp(34px,5vw,58px);}
h2{font-size:clamp(27px,3.6vw,40px);}
h3{font-size:21px;}
h4{font-size:18px;}
p{margin:0 0 1em;max-width:68ch;font-size:17px;line-height:1.7;color:var(--slate);}
a{color:var(--key);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:200;background:#fff;padding:10px 16px;}

/* --- keyline: het terugkerende device ------------------------------------ */
.keyline{display:block;height:2px;width:64px;background:var(--brass);margin:0 0 26px;position:relative;}
.keyline::after{content:"";position:absolute;right:-14px;top:-3px;width:8px;height:8px;background:var(--brass);transform:rotate(45deg);}
.keyline--light{background:var(--brass);}
.keyline--light::after{background:var(--brass);}

/* --- header --------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;transition:background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-solid{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.08);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.logo{display:block;flex:0 0 auto;}
.logo img{width:270px;}
.nav{display:flex;gap:26px;}
.nav a{color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;letter-spacing:.005em;}
.nav a:hover{color:var(--brass);text-decoration:none;}
.nav a.active{color:var(--brass);}
.header-right{display:flex;align-items:center;gap:22px;}
.lang-switch{display:flex;gap:8px;font-size:14px;color:rgba(255,255,255,.6);}
.lang-switch a{color:#fff;}
.lang-switch a.active{color:var(--brass);}
.btn-cta{border:1px solid var(--brass);color:var(--brass);padding:10px 18px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14.5px;white-space:nowrap;}
.btn-cta:hover{background:var(--brass);color:var(--navy);text-decoration:none;}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:24px;line-height:1;padding:8px;cursor:pointer;}
.mobile-nav{display:none;position:fixed;top:var(--header-h);left:0;right:0;background:var(--navy);border-top:1px solid var(--line-dark);z-index:99;padding:18px 32px 26px;}
.mobile-nav.is-open{display:block;}
.mobile-nav a{display:block;font-family:'Montserrat',sans-serif;font-weight:700;color:#fff;padding:13px 0;border-bottom:1px solid var(--line-dark);}
.mobile-nav a:hover,.mobile-nav a:focus{color:var(--brass);text-decoration:none;}
.mobile-nav .lang-switch{padding-top:16px;}

/* --- hero ------------------------------------------------------------------ */
.hero{
  position:relative;background:var(--navy);color:#fff;
  padding:calc(var(--header-h) + 84px) 0 84px;
  background-size:cover;background-position:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,42,74,.94) 0%,rgba(15,42,74,.86) 48%,rgba(23,60,107,.62) 100%);
}
.hero > .wrap{position:relative;}
.hero--tall{padding:calc(var(--header-h) + 120px) 0 110px;}
.hero--short{padding:calc(var(--header-h) + 62px) 0 58px;}
.hero h1{color:#fff;max-width:17ch;}
.hero p{color:#fff;margin-top:22px;font-size:19px;max-width:56ch;}
.eyebrow{font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--brass);margin-bottom:22px;}
.btn-group{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.btn{display:inline-block;padding:14px 26px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:.005em;border:1px solid transparent;cursor:pointer;}
.btn--primary{background:var(--brass);color:var(--navy);}
.btn--primary:hover{background:var(--brass-light);text-decoration:none;}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;}
.btn--ghost:hover{border-color:#fff;text-decoration:none;}
.btn--dark{background:var(--navy);color:#fff;}
.btn--dark:hover{background:var(--key);text-decoration:none;}

/* --- stats ---------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark);margin-top:52px;}
.stats .stat{padding:22px 20px 0 0;}
.stat b{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:30px;color:var(--brass-light);line-height:1.2;}
.stat span{display:block;font-size:14px;color:rgba(255,255,255,.7);margin-top:4px;}

/* --- secties -------------------------------------------------------------- */
.section{padding:92px 0;}
.section--sand{background:var(--sand);}
.section--navy{background:var(--navy);color:#fff;}
.section--navy h2,.section--navy h3{color:#fff;}
.section--navy p{color:#fff;}
.section--tight{padding:64px 0;}
.section + .section{border-top:1px solid var(--line);}
.section--sand + .section,.section--navy + .section{border-top:0;}
.lead{font-size:17px;color:var(--slate);max-width:66ch;}
.section--navy .lead{color:#fff;}
.section h2 + .lead{margin-top:16px;}

/* --- kaarten -------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;}
.cards--four{grid-template-columns:repeat(4,1fr);}
.card{background:#fff;display:flex;flex-direction:column;}
.card-media{height:170px;background:var(--navy-2) center/cover no-repeat;}
.card-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.card-body h3{margin-bottom:9px;}
.card-body p{flex:1;}
.card-link{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--brass);margin-top:14px;}
.card-link:hover{color:var(--navy);text-decoration:none;}

/* --- split ---------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:44px;}
.split-media{aspect-ratio:4/3;background:var(--navy-2) center/cover no-repeat;}
.split-text h3{margin-bottom:10px;}

/* --- punten & stappen ------------------------------------------------------ */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:46px;}
.points--two{grid-template-columns:repeat(2,1fr);}
.point{border-top:2px solid var(--brass);padding-top:18px;}
.point h3{font-size:19px;margin-bottom:8px;}
.point p{margin:0;}
.section--navy .point p{color:#fff;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;}
.step{background:var(--paper);padding:26px 24px 30px;}
.step .n{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--brass);display:block;margin-bottom:10px;}
.step h3{font-size:18px;margin-bottom:8px;}
.step p{margin:0;}

/* --- lijsten -------------------------------------------------------------- */
.ticks{list-style:none;padding:0;margin:22px 0 0;max-width:66ch;}
.ticks li{position:relative;padding-left:26px;margin-bottom:11px;font-size:17px;line-height:1.7;color:var(--slate);}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;background:var(--brass);}

/* --- activiteitenblokken --------------------------------------------------- */
.activity{padding:76px 0;border-top:1px solid var(--line);}
.activity:first-of-type{border-top:0;}
.activity--sand{background:var(--sand);}
.activity .kicker{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--brass);margin-bottom:12px;}
.activity h2{margin-bottom:8px;}
.activity h3{color:var(--slate);font-family:'Open Sans',sans-serif;font-weight:600;font-size:17px;letter-spacing:0;margin-bottom:18px;}
.activity-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;}
.activity-media{aspect-ratio:3/2;background:var(--navy-2) center/cover no-repeat;}
.note{font-size:14.5px;color:var(--slate);border-left:2px solid var(--line);padding-left:16px;margin-top:22px;}

/* --- FAQ ------------------------------------------------------------------- */
.faq-group{margin-top:46px;}
.faq-group h3{margin-bottom:14px;}
.faq-item{border-top:1px solid var(--line);}
.faq-group .faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:0;text-align:left;font-family:'Montserrat',sans-serif;font-size:16.5px;font-weight:600;color:var(--ink);padding:19px 40px 19px 0;cursor:pointer;position:relative;}
.faq-q::after{content:"+";position:absolute;right:8px;top:16px;font-size:22px;color:var(--brass);line-height:1;}
.faq-item.is-open .faq-q::after{content:"–";}
.faq-a{display:none;padding:0 40px 22px 0;}
.faq-a p{margin:0;}
.faq-item.is-open .faq-a{display:block;}

/* --- CTA-band -------------------------------------------------------------- */
.cta-band{background:var(--navy);color:#fff;padding:78px 0;}
.cta-band h2{color:#fff;max-width:20ch;}
.cta-band p{color:#fff;margin-top:16px;}

/* --- formulier ------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;margin-top:44px;align-items:start;}
.form{background:#fff;border:1px solid var(--line);padding:32px;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:14.5px;color:var(--slate);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;font-family:'Open Sans',sans-serif;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:12px 14px;border-radius:0;
}
.field textarea{min-height:150px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--key);outline:none;box-shadow:0 0 0 3px rgba(28,78,140,.12);}
.hp{position:absolute;left:-9999px;}
.form-note{font-size:14px;color:var(--slate);margin-top:14px;}
.msg{padding:14px 18px;margin-bottom:24px;font-size:15.5px;}
.msg--ok{background:#EAF3EC;border-left:3px solid #1F6B4A;color:#1F4633;}
.msg--err{background:#F7EAEA;border-left:3px solid #8B2B2B;color:#5C2020;}
.details dt{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;margin-top:24px;}
.details dd{margin:5px 0 0;color:var(--slate);font-size:16px;}
.details dt:first-child{margin-top:0;}

/* --- legal ----------------------------------------------------------------- */
.legal{padding:calc(var(--header-h) + 64px) 0 84px;}
.legal h1{font-size:clamp(30px,4vw,44px);margin-bottom:10px;}
.legal .updated{color:var(--slate);font-size:15px;margin-bottom:34px;}
.legal h2{font-size:22px;margin:38px 0 10px;}
.legal p{color:var(--slate);}

/* --- footer ---------------------------------------------------------------- */
.site-footer{background:var(--navy);color:#fff;padding:66px 0 34px;font-size:15px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;}
.footer-col h4{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.02em;}
.footer-col a{color:#fff;display:block;padding:4px 0;}
.footer-col a:hover{color:var(--brass);text-decoration:none;}
.footer-brand img{width:320px;max-width:100%;margin-bottom:20px;}
.footer-brand p{font-size:16px;color:#fff;max-width:34ch;}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-dark);margin-top:48px;padding-top:22px;font-size:14px;color:#fff;}
.footer-bottom a{color:#fff;display:inline;}

/* --- responsive ------------------------------------------------------------ */
@media (max-width:1000px){
  .cards,.cards--four{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .points{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  :root{--header-h:94px;}
  .logo img{width:240px;}
  .nav,.header-right .lang-switch,.header-right .btn-cta{display:none;}
  .menu-toggle{display:block;}
  .site-header{background:var(--navy);}
  .hero,.hero--tall,.hero--short{padding-top:calc(var(--header-h) + 56px);padding-bottom:56px;}
  .section{padding:60px 0;}
  .activity{padding:52px 0;}
  .wrap,.header-inner{padding-left:20px;padding-right:20px;}
  .cards,.cards--four,.steps,.points,.split,.activity-grid,.contact-grid,.stats{grid-template-columns:1fr;}
  .split,.activity-grid,.contact-grid{gap:32px;}
  .stats .stat{padding:18px 0 0;border-top:1px solid var(--line-dark);}
  .stats{border-top:0;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}