/* ============================================================
   MANAGEMENT RESULTANTS — mr-stijl.css
   Petrol als basis, brons-goud uitsluitend als beloning.
   Poppins (interface) × Playfair Display (verhaal).
   ============================================================ */
:root{
  --petrol:        #1d4e50;
  --petrol-deep:   #0e2c2e;
  --petrol-night:  #081b1c;
  --petrol-mist:   #6f9496;
  --zilver:        #c6d0d3;
  --brass:         #b19b5a;
  --brass-light:   #d4c28a;
  --paper:         #f5f2ea;
  --paper-warm:    #efe9dc;
  --lijn:          #ddd6c4;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins',sans-serif;
  background:var(--paper);
  color:var(--petrol-deep);
  line-height:1.7;
  font-weight:300;
}

/* ---------- Typografie ---------- */
h1,h2,h3,.serif{ font-family:'Playfair Display',serif; font-weight:500; line-height:1.2; color:var(--petrol); }
h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); text-wrap:balance; }
h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:1.2rem; text-wrap:balance; }
h3{ font-size:1.25rem; margin-bottom:.6rem; }
em{ font-style:italic; color:var(--brass); }
strong{ font-weight:600; }
.eyebrow{
  font-size:.76rem; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--brass); margin-bottom:1rem;
}
p + p{ margin-top:1em; }

/* ---------- Navigatie ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.5rem,5vw,4rem);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled{ background:rgba(245,242,234,.94); box-shadow:0 1px 0 var(--lijn); backdrop-filter:blur(8px); }
.nav:not(.is-scrolled) .nav-naam,
.nav:not(.is-scrolled) .nav-links a{ color:#fff; }
.nav:not(.is-scrolled) .nav-links a:hover{ color:var(--brass-light); }
.nav:not(.is-scrolled) .merk-vlak{ fill:#fff; }
.nav:not(.is-scrolled) .knop{ color:#fff; }
.nav-logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nav-naam{ font-family:'Playfair Display',serif; font-size:1.05rem; line-height:1.12; color:var(--petrol); letter-spacing:.01em; }
.nav-naam .m{ font-weight:500; display:block; }
.nav-naam .r{ font-weight:600; display:block; }
.merk-vlak{ fill:var(--petrol); transition:fill .3s ease; }
.nav-links{ display:flex; gap:clamp(1rem,3vw,2.4rem); align-items:center; }
.nav-links a{
  color:var(--petrol); text-decoration:none; font-size:.86rem;
  font-weight:400; letter-spacing:.04em; transition:color .25s ease;
}
.nav-links a:hover{ color:var(--brass); }
.nav-links .knop{ padding:.55rem 1.3rem; }
@media (max-width:760px){ .nav-links a:not(.knop){ display:none; } }


/* ---------- Taalwissel ---------- */
.nav-taal{ display:inline-flex; line-height:0; opacity:.85; transition:opacity .25s ease, transform .25s ease; }
.nav-taal:hover{ opacity:1; transform:translateY(-1px); }
.nav-taal svg{ display:block; border-radius:2px; box-shadow:0 0 0 1px rgba(120,130,130,.45); }

/* ---------- Knoppen ---------- */
.knop{
  display:inline-block; padding:.9rem 2.1rem;
  border:1px solid var(--brass); color:var(--petrol);
  text-decoration:none; font-size:.84rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s ease, color .3s ease;
}
.knop:hover{ background:var(--brass); color:var(--petrol-night); }
.knop--vol{ background:var(--brass); color:var(--petrol-night); }
.knop--vol:hover{ background:var(--brass-light); border-color:var(--brass-light); }
.knop--licht{ color:var(--paper); }

/* ---------- Secties ---------- */
.sectie{ padding:clamp(4rem,9vw,7.5rem) clamp(1.5rem,7vw,7rem); }
.sectie--smal{ max-width:56rem; margin:0 auto; }
.sectie--donker{ background:var(--petrol-deep); color:var(--paper); }
.sectie--donker h2,.sectie--donker h3{ color:var(--paper); }
.sectie--donker p{ color:#c9d6d6; }
.sectie--warm{ background:var(--paper-warm); }
.kop-blok{ max-width:44rem; margin-bottom:3rem; }
.kop-blok p{ color:#4a6b6c; }
.sectie--donker .kop-blok p{ color:#c9d6d6; }

/* ---------- Kolommen / kaarten ---------- */
.kolommen{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.stap{ border-top:2px solid var(--brass); padding-top:1.4rem; }
.stap .stap-nr{
  font-family:'Playfair Display',serif; font-style:italic;
  color:var(--brass); font-size:1.1rem; display:block; margin-bottom:.4rem;
}
.stap p{ font-size:.95rem; color:#4a6b6c; }
.sectie--donker .stap p{ color:#c9d6d6; }

/* ---------- De formule ---------- */
.formule{
  text-align:center;
  padding:clamp(4rem,9vw,7rem) clamp(1.5rem,7vw,7rem);
  background:var(--petrol-night);
}
.formule .eyebrow{ margin-bottom:2rem; }
.formule-regel{
  font-family:'Playfair Display',serif; font-weight:500;
  font-size:clamp(1.25rem,3.4vw,2.4rem); color:var(--paper);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.4em .55em; line-height:1.4;
}
.formule-regel .is{ color:var(--zilver); font-size:.8em; }
.formule-regel .maal{ color:var(--brass); font-style:italic; font-size:.85em; }
.formule-regel .term{ border-bottom:1px solid rgba(177,155,90,.4); padding-bottom:.1em; }
.formule-uitleg{
  max-width:38rem; margin:2.2rem auto 0; color:var(--zilver);
  font-size:.95rem;
}
.formule-uitleg em{ color:var(--brass-light); }

/* ---------- Cases ---------- */
.case{
  border:1px solid var(--lijn); background:#fff;
  padding:2.4rem; display:flex; flex-direction:column; gap:1rem;
}
.case .resultaat{
  font-family:'Playfair Display',serif; font-size:2rem; color:var(--petrol);
}
.case .resultaat span{ color:var(--brass); }
.case p{ font-size:.94rem; color:#4a6b6c; }
.case .case-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--petrol-mist); }

/* ---------- CTA-blok ---------- */
.cta-blok{ text-align:center; }
.cta-blok h2{ margin-bottom:.8rem; }
.cta-blok p{ max-width:34rem; margin:0 auto 2.2rem; }
.cta-acties{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta-bel{
  display:block; margin-top:1.6rem; font-size:.9rem; color:var(--petrol-mist);
}
.cta-bel a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--brass); }
.sectie--donker .cta-bel a:hover{ color:var(--brass-light); }


/* ---------- Formulier ---------- */
.formulier{ max-width:34rem; }
.formulier label{ display:block; font-size:.8rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--petrol); margin:1.4rem 0 .4rem; }
.formulier input, .formulier textarea{
  width:100%; padding:.8rem 1rem; font:inherit; color:var(--petrol-deep);
  background:#fff; border:1px solid var(--lijn); border-radius:0;
}
.formulier input:focus, .formulier textarea:focus{ outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass); }
.formulier textarea{ min-height:7rem; resize:vertical; }
.formulier .verplicht{ color:var(--brass); }
.formulier button{ margin-top:1.8rem; cursor:pointer; background:var(--brass); border:1px solid var(--brass); }
.formulier .hint{ font-size:.82rem; color:var(--petrol-mist); margin-top:1rem; }
.veld-hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ---------- Footer ---------- */
.footer{
  background:var(--petrol-night); color:var(--petrol-mist);
  padding:2.6rem clamp(1.5rem,7vw,7rem);
  display:flex; flex-wrap:wrap; gap:1.5rem 3rem;
  justify-content:space-between; align-items:center; font-size:.82rem;
}
.footer a{ color:var(--petrol-mist); text-decoration:none; }
.footer a:hover{ color:var(--brass-light); }
.footer nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }

/* ---------- Paginakop (subpagina's) ---------- */
.pagina-kop{
  padding:clamp(8rem,16vw,11rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5rem);
  background:var(--petrol-deep);
}
.pagina-kop h1{ color:var(--paper); max-width:15em; }
.pagina-kop .intro{ color:#c9d6d6; max-width:40rem; margin-top:1.4rem; }

/* ---------- Toegankelijkheid ---------- */
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}