/* Brunoos — site.css · tokens volgen Brunoos Design System v1.0 */
/* Jost (SIL Open Font License, zie assets/fonts/OFL-Jost.txt) — zelf gehost, geen Google Fonts */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/jost-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format('woff2')}

:root{
  color-scheme: light;
  --navy:#15273E;          /* PANTONE 539 C — woordmerk */
  --navy-diep:#0D1A2B;     /* voet, diepste vlak */
  --goud:#C28521;          /* PANTONE 871 C, vlak — accent op donker */
  --goud-licht:#E0AE45;    /* goud als tekst op navy */
  --goud-tekst:#8C5E12;    /* goud als tekst op licht (≥4,5:1) */
  --papier:#F6F3EC;        /* tweede vlak */
  --wit:#FFFFFF;
  --inkt:#15273E;          /* koppen en lopende tekst */
  --inkt-zacht:#4B5869;    /* lead, toelichting */
  --nevel:#B9C1CC;         /* zachte tekst op navy */
  --lijn:#DAD5CA;          /* haarlijn op licht */
  --lijn-donker:#2C3D55;   /* haarlijn op navy */
  --font:'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --wrap:1040px;
  --gutter:24px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:112px;
  --radius:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--font);font-weight:400;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 var(--s2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.naar-inhoud{position:absolute;left:-9999px}
.naar-inhoud:focus{left:var(--s2);top:var(--s2);z-index:50;background:var(--wit);padding:var(--s1) var(--s2)}
:focus-visible{outline:2px solid var(--goud);outline-offset:3px}

/* Kopbalk */
.kop{position:sticky;top:0;z-index:20;background:var(--navy);border-bottom:1px solid var(--lijn-donker)}
.kop__binnen{display:flex;align-items:center;justify-content:space-between;height:76px}
.kop__logo img{width:112px;height:auto}
.menu{display:flex;align-items:center;gap:var(--s4)}
.menu a{color:var(--nevel);text-decoration:none;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.menu a:hover{color:var(--wit)}
.menu__idee{font:inherit;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--goud-licht);border:0;border-radius:var(--radius);padding:10px 16px;cursor:pointer}
.menu__idee:hover{background:var(--wit)}

/* Spatielabel — echo van het IDEEËNFABRIEK-spatiëren */
.spatie{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--goud-tekst);font-weight:500;margin-bottom:var(--s3)}
.spatie .nr{display:inline-block;margin-right:var(--s2);color:var(--inkt-zacht);font-weight:400}

/* Held */
.held{background:var(--navy);color:var(--wit);padding:var(--s6) 0 calc(var(--s6) + var(--s2))}
.held .spatie{color:var(--goud-licht)}
.held__titel{font-weight:300;font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.01em;margin:0 0 var(--s4)}
.held__titel em{font-style:italic;color:var(--goud-licht)}
.held__lead{font-size:20px;line-height:1.6;color:var(--nevel);font-weight:300;margin:0}

/* Secties */
.sectie{padding:var(--s6) 0;border-top:1px solid var(--lijn)}
.sectie.is-papier{background:var(--papier)}
.sectie__kop{font-weight:300;font-size:clamp(28px,3.6vw,42px);line-height:1.15;margin:0 0 var(--s3);letter-spacing:-.005em}
.sectie__lead{font-size:20px;line-height:1.6;color:var(--inkt-zacht);font-weight:300;margin-bottom:var(--s5)}
.sectie.is-donker{background:var(--navy);color:var(--wit);border-top:0}
.sectie.is-donker .spatie{color:var(--goud-licht)}
.sectie.is-donker .spatie .nr{color:var(--nevel)}
.sectie.is-donker .sectie__lead{color:var(--nevel)}

/* Drie thesispunten */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);border-top:1px solid var(--navy);padding-top:var(--s3)}
.drie__kop{font-weight:500;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s1)}
.drie__item p:last-child{color:var(--inkt-zacht);margin:0}

/* Portefeuillelijst */
.lijst{list-style:none;margin:0 0 var(--s5);padding:0;border-top:1px solid var(--navy)}
.lijst__rij{display:grid;grid-template-columns:220px 1fr 200px;gap:var(--s2) var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--lijn);align-items:baseline}
.lijst__naam{font-size:22px;font-weight:400}
.lijst__wat{color:var(--inkt-zacht)}
.lijst__status{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-tekst);font-weight:500}
.lijst__link{grid-column:2;font-size:15px;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--goud);justify-self:start;padding-bottom:1px}
.lijst__link:hover{color:var(--goud-tekst)}
.tussenkop{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--inkt-zacht);font-weight:500;margin-bottom:var(--s2)}
.lijst.is-verkenning{border-top-color:var(--lijn);margin-bottom:0}
.lijst.is-verkenning .lijst__rij{grid-template-columns:320px 1fr}
.lijst.is-verkenning .lijst__naam{font-size:18px}

/* Fasen */
.fasen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--lijn-donker)}
.fase{padding:var(--s3) var(--s3) 0 0}
.fase + .fase{padding-left:var(--s3);border-left:1px solid var(--lijn-donker)}
.fase__nr{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--goud-licht);font-weight:500;margin-bottom:var(--s1)}
.fase__kop{font-size:22px;font-weight:400;margin-bottom:var(--s1)}
.fase p:last-child{color:var(--nevel);margin:0}

/* Principes */
.principes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5);border-top:1px solid var(--navy)}
.principes li{display:grid;grid-template-columns:48px 1fr;padding:var(--s3) 0;border-bottom:1px solid var(--lijn)}
.principes__nr{font-size:14px;letter-spacing:.14em;color:var(--goud-tekst);font-weight:500;padding-top:4px}
.principes__kop{font-size:22px;font-weight:400;margin-bottom:var(--s1)}
.principes li p:last-child{color:var(--inkt-zacht);margin:0}

/* Contact */
.wie{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--lijn);font-size:16px;color:var(--inkt-zacht)}
.wie strong{color:var(--inkt);font-weight:500}
.contact__binnen{display:grid;grid-template-columns:1fr 280px;gap:var(--s5);align-items:start}
.contact .sectie__lead{margin-bottom:var(--s4)}
.adres{font-style:normal;display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--goud);padding-left:var(--s3);font-size:17px}
.adres__naam{font-weight:500}
.adres a{text-decoration:none;border-bottom:1px solid var(--goud);align-self:flex-start}

/* Knop */
.knop{font:inherit;font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;background:var(--navy);color:var(--wit);border:1px solid var(--navy);border-radius:var(--radius);padding:14px 24px;cursor:pointer}
.knop:hover{background:var(--navy-diep)}
.knop.is-licht{background:transparent;color:var(--navy)}
.knop.is-licht:hover{background:var(--papier)}

/* Voet */
.voet{background:var(--navy-diep);color:var(--nevel);font-size:14px;padding:var(--s4) 0}
.voet__binnen{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.voet__binnen img{width:96px}

/* Ideeënpopup */
.idee{border:0;border-radius:var(--radius);padding:0;width:min(560px,calc(100% - 32px));color:var(--inkt);box-shadow:0 30px 80px rgba(13,26,43,.35)}
.idee::backdrop{background:rgba(13,26,43,.72)}
.idee__form{position:relative;padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column}
.idee__sluit{position:absolute;top:12px;right:14px;background:none;border:0;font-size:30px;line-height:1;color:var(--inkt-zacht);cursor:pointer;padding:4px 8px}
.idee__kroon{width:44px;margin-bottom:var(--s2)}
.idee__kop{font-weight:300;font-size:32px;margin:0 0 var(--s1)}
.idee__uitleg{color:var(--inkt-zacht);font-size:16px;margin-bottom:var(--s3)}
.idee label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:6px}
.optioneel{text-transform:none;letter-spacing:0;font-weight:400;color:var(--inkt-zacht)}
.idee input,.idee textarea{font:inherit;font-size:17px;color:var(--inkt);border:1px solid var(--lijn);border-radius:var(--radius);padding:10px 12px;margin-bottom:var(--s3);background:var(--wit);resize:vertical}
.idee input:focus,.idee textarea:focus{border-color:var(--navy);outline:none}
.idee__knoppen{display:flex;gap:var(--s2);flex-wrap:wrap}
.idee__noot{font-size:14px;color:var(--inkt-zacht);margin:var(--s2) 0 0}

/* Smal */
@media (max-width:860px){
  :root{--s6:72px}
  .menu a{display:none}
  .drie,.fasen,.principes{grid-template-columns:1fr}
  .fase,.fase + .fase{padding:var(--s3) 0;border-left:0;border-bottom:1px solid var(--lijn-donker)}
  .lijst__rij,.lijst.is-verkenning .lijst__rij{grid-template-columns:1fr;gap:6px}
  .lijst__link{grid-column:1}
  .contact__binnen{grid-template-columns:1fr;gap:var(--s4)}
  .held__lead,.sectie__lead{font-size:18px}
}
@media (max-width:420px){
  :root{--gutter:16px}
  .kop__binnen{height:64px}
  .kop__logo img{width:92px}
  .menu__idee{padding:8px 12px;font-size:13px}
  .idee__form{padding:var(--s5) var(--s3) var(--s3)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}