/* Degene die – huisstijl
   Neutraal antraciet/staalgrijs met één signaalkleur: saffraan helder.
   Lettertype: Inter, zelf gehost (geen Google Fonts, dus geen tracking). */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --antraciet: #23272b;
  --antraciet-licht: #2f3439;
  --staal: #8a939b;
  --staal-licht: #e6e8ea;
  --papier: #f6f6f4;
  --vlak: #f7f5f1;  /* lichte secties: gebroken wit met een vleug warm */
  --lijn: #e2ded6;  /* dunne lijn tussen secties */
  --tekst: #23272b;
  --signaal: #f7b32b; /* saffraan helder */

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breedte: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--papier);
}

.wrap {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 1.25rem;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 1rem; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); max-width: 48rem; }
h3 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }

a { color: inherit; }

/* "Degene die" als terugkerend begin van de zin (donkerder grijs: leesbaar op wit en lichtgrijs) */
.lead-in { color: #5f676e; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--antraciet);
  color: #fff;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}
.logo {
  font-weight: 800;
  font-size: 1.35rem;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.logo-accent { color: var(--signaal); }
.nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.nav a {
  text-decoration: none;
  color: var(--staal-licht);
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.nav a:hover { color: #fff; }
.nav a.actief { color: #fff; border-bottom-color: var(--signaal); }

/* Subitem onder "Over" (klapt uit bij aanwijzen of toetsenbordfocus) */
.nav-groep { position: relative; display: inline-flex; }
.nav-groep > a::after { content: " \25BE"; font-size: 0.75em; color: var(--staal); }
.submenu {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  padding-top: 0.6rem;          /* brug, zodat het menu niet wegvalt */
  display: none;
  z-index: 20;
}
.submenu a {
  display: block;
  white-space: nowrap;
  background: var(--antraciet);
  padding: 0.6rem 0.9rem;
  border-top: 2px solid var(--signaal);
}
.nav-groep:hover .submenu,
.nav-groep:focus-within .submenu { display: block; }
/* Touchscreen: menu alleen open via tikken (script.js), niet via blijvende focus of hover */
@media (hover: none) {
  .nav-groep:hover .submenu,
  .nav-groep:focus-within .submenu { display: none; }
  .nav-groep.open .submenu { display: block; }
}
.submenu a + a { border-top: 1px solid #3a4046; }
.submenu a[aria-current="page"] { color: #fff; }

/* Tweede balk op dienstpagina's: in welke dienst ben je */
.subbalk { background: var(--antraciet-licht); border-top: 1px solid #3a4046; }
.subbalk-inner {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.subbalk a {
  padding: 0.6rem 0;
  font-size: 0.85rem;
  color: var(--staal-licht);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.subbalk a:hover { color: #fff; }
.subbalk a[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: var(--signaal); }
.subpagina .section { scroll-margin-top: 6.5rem; }   /* hogere header */

/* Kruimelpad op subpagina's */
.kruimel { margin: 0 0 1rem; font-size: 0.85rem; color: var(--staal); }
.kruimel a { color: var(--staal-licht); }

/* Doorlink onder Over */
.meer { margin: 1.75rem 0 0; font-weight: 700; }
.meer a {
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 3px solid var(--signaal);
}
.meer a::after { content: " \2192"; }

/* Opening */
.hero {
  background: var(--antraciet);
  color: #fff;
  padding: 6rem 0 7rem;
  border-bottom: 8px solid var(--signaal);
}
.hero .lead-in { color: var(--staal); }
.typ-cursor {
  color: var(--signaal);
  margin-left: 0.04em;
  animation: knipper 1s steps(1) infinite;
}
@keyframes knipper { 50% { opacity: 0; } }

/* Klacht van de klant boven de titel (wisselt mee, script.js) */
.klacht {
  min-height: 1.6em;
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  color: var(--staal-licht);
  transition: opacity 0.4s;
}
.klacht.weg { opacity: 0; }
.klacht::before { content: "\201C"; color: var(--signaal); margin-right: 0.1em; }
.klacht::after { content: "\201D"; color: var(--signaal); margin-left: 0.05em; }

/* Opening hoofdpagina: wisselende titel, dienstknoppen, foto met "Wie ben ik" */
.opening-vol {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 4rem);
  min-height: calc(100svh - 4rem);
  padding-block: 4rem;
}
.opening-vol .wrap { width: 100%; }
.opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.42fr);   /* foto groeit mee met de breedte */
  gap: 3.5rem;
  align-items: end;           /* dienstknoppen en "Wie ben ik" op één lijn */
}
.opening-figuur { margin: 0; }
.opening-foto { display: block; width: 100%; height: auto; }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.knop {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: 2px solid var(--signaal);
  transition: background 0.25s, color 0.25s;
}
.knop:hover { background: rgba(247, 179, 43, 0.15); }
.knop.actief { background: var(--signaal); color: var(--antraciet); }
.knop-wie::after { content: " \2193"; }
.opening-figuur .knop-wie { display: block; text-align: center; margin-top: 0.75rem; }
@media (max-width: 52rem) {
  .opening-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .opening-figuur { max-width: 20rem; }
}
@media (max-width: 40rem) {
  .knoppen { display: grid; grid-template-columns: 1fr; }
  .knop { text-align: center; padding: 0.75rem 0.5rem; font-size: 0.95rem; }
}
.hero-sub {
  font-size: 1.2rem;
  color: var(--staal-licht);
  max-width: 38rem;
  margin: 0 0 2rem;
}

.button {
  display: inline-block;
  background: var(--signaal);
  color: var(--antraciet);
  font-weight: 700;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: 2px;
}
.button:hover { filter: brightness(1.08); }

/* Secties */
/* Ritme: wit en gebroken wit om en om, met een dunne lijn ertussen; alleen opening en footer zijn donker */
.section { padding: 5rem 0; background: #fff; scroll-margin-top: 4rem; } /* niet onder het menu verdwijnen */
.section-alt { background: var(--vlak); }
.section + .section { border-top: 1px solid var(--lijn); }
/* Witte blokken op een gebroken witte sectie: zachte schaduw, anders vallen ze weg */
.section-alt .card,
.section-alt .step,
.section-alt .andere-dienst { background: #fff; box-shadow: 0 1px 3px rgba(35, 39, 43, 0.08); }

/* Slotzin: afsluiting van een sectie, met saffraan streepje ervoor */
.slot {
  margin: 2.5rem 0 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 4px solid var(--signaal);
  max-width: 40rem;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--staal);
  margin: 0 0 0.75rem;
}
.intro { max-width: 40rem; font-size: 1.1rem; }

/* Herkenning */
.symptoms {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  max-width: 44rem;
}
.symptoms li {
  padding: 1rem 0 1rem 1.75rem;
  border-top: 1px solid #d3d6d9;
  position: relative;
}
.symptoms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 0.75rem;
  height: 2px;
  background: var(--staal);
}

.symptoms li:last-child { border-bottom: 1px solid #d3d6d9; }

/* Diensten */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 1.75rem;
  border-top: 3px solid var(--signaal);
}
.card p { color: #454c53; margin: 0 0 0.9rem; }
/* Dienstkaarten op de hoofdpagina: label, kop, tekst en voet staan in alle kaarten op dezelfde hoogte */
#diensten .cards { grid-auto-rows: auto; }
#diensten .card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}
#diensten .card-voet { align-self: end; }
#diensten .resultaat { flex-direction: column; align-items: flex-start; }   /* toelichting altijd onder het blok */
.card .resultaat-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--staal);
}

/* Onderkant van een dienstkaart: resultaat en doorlink */
.card-voet { margin-top: auto; padding-top: 0.5rem; }
.card-voet .meer { margin: 0.75rem 0 0; }

/* Resultaat: de oplossing springt eruit */
.resultaat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-top: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #454c53;
}
.resultaat b {
  background: var(--signaal);
  color: var(--antraciet);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding: 0 0.3em;
  font-variant-numeric: tabular-nums;
}

/* Kaarten op een witte sectie (praktijkvoorbeelden op dienstpagina's) */
.cards-licht .card { background: var(--papier); }
/* Titel, saffraan blok en tekst in alle praktijkkaarten op dezelfde hoogte */
.cards-licht { grid-auto-rows: auto; }
.cards-licht .card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.cards-licht .card .resultaat { align-self: start; flex-direction: column; align-items: flex-start; }
.cards-licht .card h3 { margin-bottom: 0.4rem; }
.cards-licht .card .resultaat { margin-bottom: 1rem; }

/* Onderregel in de opening met saffraan streep ervoor */
.hero-sub-streep {
  max-width: none;
  padding-left: 1.1rem;
  border-left: 4px solid var(--signaal);
}

/* Tekst die na een slotzin verder gaat */
.na-slot { margin-top: 2.5rem; }

/* Oproep tot contact onderaan een dienstpagina */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 3rem;
  padding: 1.75rem 2rem;
  background: var(--antraciet);
  color: #fff;
  border-left: 6px solid var(--signaal);
}
.cta-vraag {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Hoe ik werk: algemene principes */
.principes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.principe { background: var(--papier); padding: 1.5rem; border-top: 3px solid var(--signaal); }
.principe h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.principe p { margin: 0; color: #454c53; }

/* Andere diensten (onderaan dienstpagina's) */
.andere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}
.andere-dienst {
  display: block;
  background: #fff;
  padding: 1.5rem 1.75rem;
  border-top: 3px solid var(--signaal);
  text-decoration: none;
  color: var(--tekst);
}
.andere-dienst .card-label {
  display: block;
  font-size: 0.8rem;
  color: var(--staal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.andere-kop { display: block; font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.andere-kop::after { content: " \2192"; }
.andere-dienst:hover .andere-kop {
  text-decoration: underline;
  text-decoration-color: var(--signaal);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.card .card-label {
  font-size: 0.8rem;
  color: var(--staal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

/* Werkwijze */
.steps {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
}
.step {
  background: var(--papier);
  padding: 1.5rem;
  border-top: 3px solid var(--signaal);
}
.step-rand { border-top-color: var(--staal); }   /* fase buiten de kern van de dienst */
.step p { margin: 0; }
.step p + p { margin-top: 0.75rem; }
.step-nr {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--staal);
  margin-bottom: 0.5rem;
}

/* Over */
.about {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  grid-template-areas: ". kop" "foto tekst";
  column-gap: 3rem;
}
.about-rechts {
  grid-template-columns: 1fr minmax(12rem, 20rem);
  grid-template-areas: "kop ." "tekst foto";
}
/* Kop boven de tekst; de foto staat naast de lopende tekst en is even hoog */
.about .about-text { display: contents; }
.about .about-kop { grid-area: kop; }
.about .about-body { grid-area: tekst; }
.about .about-body > :first-child { margin-top: 0; }
.about .about-body > :last-child { margin-bottom: 0; }
.about-photo { display: block; width: 100%; height: auto; }
.about > .about-photo { grid-area: foto; height: 0; min-height: 100%; object-fit: cover; }   /* hoogte volgt de tekst, niet de foto */
@media (max-width: 48rem) {
  .about, .about-rechts { grid-template-columns: 1fr; grid-template-areas: "kop" "foto" "tekst"; row-gap: 1.5rem; }
  .about > .about-photo { max-width: 18rem; height: auto; min-height: 0; }
}
.about-text h2 { max-width: 44rem; }
/* Bij Over: "Degene die" als saffraan label */
.about-text h2 .lead-in {
  color: var(--tekst);
  background: var(--signaal);
  padding: 0 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.about-text p { max-width: 44rem; }

/* Contact */
.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: 2rem;
  font-size: 1.4rem;
  font-weight: 700;
}
.contact-lines a {
  text-decoration: none;
  border-bottom: 3px solid var(--signaal);
}

.slot a { color: inherit; text-decoration-color: var(--signaal); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* Afsluiting: spiegelbeeld van de opening (streep boven in plaats van onder) */
.finale {
  background: var(--antraciet);
  color: #fff;
  padding: 5rem 0 5.5rem;
  border-top: 8px solid var(--signaal);
}
.finale-zin {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.finale .lead-in { color: var(--staal); }

/* Footer */
.site-footer {
  background: #1a1d20;
  color: var(--staal);
  font-size: 0.9rem;
  padding: 1.5rem 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Mobiel */
@media (max-width: 40rem) {
  .hero { padding: 4rem 0 5rem; }
  .section { padding: 3.5rem 0; }
  /* Header op telefoon: logo en menu op één regel */
  .header-inner { flex-wrap: nowrap; gap: 0.75rem; min-height: 3.5rem; }
  .logo { font-size: 1.1rem; white-space: nowrap; }
  .nav { gap: 0.75rem; flex-wrap: nowrap; }
  .nav a { font-size: 0.85rem; white-space: nowrap; }
  /* Dienstenbalk niet op telefoon: het uitklapmenu onder Diensten is genoeg */
  .subbalk { display: none; }
  .subpagina .section { scroll-margin-top: 4rem; }
}
@media (max-width: 22.5rem) {
  .header-inner { gap: 0.5rem; }
  .logo { font-size: 1rem; }
  .nav { gap: 0.6rem; }
  .nav a { font-size: 0.8rem; }
}