/* =========================================================================
   Houthakker Professional Services — 4.0
   Pure-CSS parallax one-pager. Geen runtime-dependencies.

   Opbouw:
   1. Merkpalet & tokens
   2. Reset & basis
   3. Parallax-mechaniek (perspective + translateZ)
   4. Panelen & per-sectie backdrops
   5. Hero
   6. Content-kaarten & typografie
   7. Diagrammen (schatkaart + placeholders)
   8. Footer
   9. Zij-navigatie (dotnav)
   10. Responsive
   11. Toegankelijkheid: prefers-reduced-motion (parallax uit)
   ========================================================================= */

/* ---------- 1. Merkpalet & tokens ---------- */
:root {
  --green-900: #14532d;   /* basis donkergroen (strepen) */
  --green-800: #166534;   /* strepen-accent */
  --green-700: #1b7a40;
  --green:     #009970;    /* primair accent */
  --blue:      #3d5a7a;    /* secundair accent */
  --blue-900:  #2a3f56;
  --ink:       #333333;    /* tekstkleur */
  --grey:      #ababab;
  --card:      #d9d9d9;    /* contentkaart */
  --white:     #ffffff;

  --maxw: 720px;           /* breedte contentkaart */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Parallax-diepte. De ratio z/perspective bepaalt de snelheid van een laag. */
  --persp: 10px;
}

/* ---------- 2. Reset & basis ---------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--green-900);
  /* Vaste basislaag (scrollt niet — de scroller is .scroll-root):
     verticale groene strepen + diepte-schaduw boven/onder. De schaduw is
     hierdoor stilstaand en schijnt door de transparante hero/contact-panelen. */
  background-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.05) 45%,
      rgba(0, 0, 0, 0.38) 100%),
    repeating-linear-gradient(
      90deg,
      var(--green-900) 0px,
      var(--green-900) 40px,
      var(--green-800) 40px,
      var(--green-800) 80px
    );
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); font-weight: 600; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* ---------- 3. Parallax-mechaniek ----------
   De volledige pagina scrollt binnen .scroll-root. Door perspective op de
   scroller te zetten en achtergrondlagen via translateZ naar achteren te
   duwen, bewegen die lagen trager dan de voorgrond: parallax, zonder JS.
   De transforms staan onder @media (prefers-reduced-motion: no-preference)
   zodat de site zonder beweging gewoon netjes stapelt (zie sectie 11). */
.scroll-root {
  position: relative;
  z-index: 1;
  /* De hele pagina scrollt hierbinnen, zodat de body-strepen als vaste
     basislaag blijven staan. Tegelijk de scroll-container voor scroll-snap. */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Per-paneel scrollen (scroll-snap) — pure CSS. Alleen op schermen die groot
   genoeg zijn; op smalle/lage schermen scrollt de gestapelde inhoud vrij. */
@media (min-width: 880px) and (min-height: 560px) {
  .scroll-root { scroll-snap-type: y mandatory; }
  .panel { scroll-snap-align: start; scroll-snap-stop: always; }
}

.panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 12vh 24px;
  overflow: hidden;            /* geschaalde bg-lagen netjes clippen */
}

.panel__bg,
.panel__mid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.panel__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Diepte-overlay boven elke backdrop: leesbaarheid + signature schaduw. */
.panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.05) 45%,
    rgba(0, 0, 0, 0.35) 100%);
}

/* ---------- 4. Per-sectie backdrops ----------
   Allemaal in de groene familie met accent-toetsen, zodat het strepen-motief
   terugkomt en de secties tóch onderscheidend zijn. */

/* Hero & Contact: transparant -> de vaste body-laag (strepen + schaduw)
   schijnt erdoorheen en blijft daardoor stilstaan bij het scrollen. Veilig
   nu de buurpanelen (2 en 4) egale, ondoorzichtige kleuren zijn, dus er lekt
   geen geschaalde backdrop meer door. De eigen (meescrollende) diepte-overlay
   zetten we hier uit; die komt nu van de body. */
.panel__bg--hero,
.panel__bg--contact {
  background: transparent;
}
.panel__bg--hero::after,
.panel__bg--contact::after {
  display: none;
}

/* Achtergrond (paneel 3): dezelfde groene strepen als hero/contact, maar
   breder doordat dit paneel wél de parallax-scale (3x) behoudt. */
.panel__bg--achtergrond {
  background-color: var(--green-900);
  background-image:
    repeating-linear-gradient(90deg,
      var(--green-900) 0px, var(--green-900) 40px,
      var(--green-800) 40px, var(--green-800) 80px);
}
/* Geen diepte-overlay op paneel 3 (de donkere boven/onder-schaduw was storend). */
.panel__bg--achtergrond::after { display: none; }

/* (Panelen 2 en 4 hebben geen backdrop-laag meer: zij zijn full-screen met
   een egale kleur — zie sectie 6b.) */

/* ---------- 5. Hero ---------- */
.hero { text-align: center; gap: 0; }

/* h1 om het logo: visueel niets, behoudt de pagina-titel voor SEO/toegankelijkheid
   (de bedrijfsnaam staat in het logo + de alt-tekst). */
.hero__logo-wrap {
  margin: 0 0 32px;
  font-size: 0;
  line-height: 0;
}

/* Breed woordmerk-logo (1480×428) — schaalt mee met de schermbreedte. */
.hero__logo {
  width: clamp(280px, 58vw, 660px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
}

.hero__role {
  color: var(--green);
  font-size: clamp(15px, 2.2vw, 20px);
  font-weight: 600;
  margin-top: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.hero__tagline {
  color: rgba(255,255,255,0.92);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  max-width: 560px;
  margin: 22px auto 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Scroll-hint pijltje */
.hero__scroll {
  display: block;
  width: 28px;
  height: 46px;
  margin-top: 48px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  position: relative;
}
.hero__scroll span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: var(--white);
  border-radius: 2px;
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { opacity: 0; transform: translateY(0); }
  40%  { opacity: 1; }
  80%  { opacity: 0; transform: translateY(16px); }
  100% { opacity: 0; }
}

/* ---------- 6. Content-kaarten & typografie ---------- */
.card {
  width: 100%;
  max-width: var(--maxw);
  background: var(--card);
  border-radius: 2px;
  padding: 48px 60px 56px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 2px 4px rgba(0,0,0,0.05),
    0 12px 28px rgba(0,0,0,0.18),
    0 24px 48px rgba(0,0,0,0.18);
}

.card__eyebrow {
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

.card__title {
  color: var(--ink);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}

.card p {
  font-size: 14px;
  line-height: 1.75;
  padding: 8px 0;
}

.card p strong { color: var(--blue); }

.card__note {
  font-style: italic;
  color: #5a5a5a;
  border-left: 3px solid var(--green);
  padding-left: 16px !important;
  margin-top: 18px;
}

/* ---------- 6c. Visitekaartje (contact-paneel) ----------
   Een fysiek aandoend kaartje, gecentreerd op de groene strepen. */
.contact__lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  text-align: center;
  max-width: 540px;
  margin-bottom: 30px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Grote grijze contactkaart (zoals paneel 3): links cartoonportret,
   rechts het visitekaartje. */
.card--contact {
  max-width: 920px;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 52px);
}
.contact__photo {
  flex: 0 0 auto;
  margin: 0;
}
.contact__photo img {
  width: clamp(180px, 22vw, 280px);
  height: auto;
  border-radius: 12px;
  display: block;
}
.contact__card {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

@media (max-width: 700px) {
  .card--contact { flex-direction: column; gap: 28px; }
}

.vcard {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 20px 44px rgba(0, 0, 0, 0.32);
}

/* Groene streep-accent aan de linkerrand — knipoog naar de huisstijl. */
.vcard__edge {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-900) 100%);
}

.vcard__body {
  padding: 32px 36px 28px 46px;
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.vcard__info { flex: 1 1 auto; min-width: 0; }

/* Logo rechts uitgelijnd, iets groter. */
.vcard__logo {
  flex: 0 0 auto;
  width: 84px;
  height: auto;
  margin-left: auto;
}
.vcard__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.vcard__company {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  margin-top: 14px;   /* meer ruimte tussen naam en bedrijfsnaam */
}
.vcard__tagline {
  font-style: italic;
  color: #5a5a5a;
  font-size: 15px;
  margin: 4px 0 18px;  /* minder ruimte tussen bedrijfsnaam en slogan */
}
.vcard__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding-top: 16px;
  border-top: 1px solid #e3e3e3;
}
.vcard__contact a {
  color: var(--blue);
  border-bottom: 2px solid transparent;
}
.vcard__contact a:hover {
  text-decoration: none;
  border-bottom-color: var(--green);
}

/* ---------- 6b. Split-panelen (full-screen, egale kleur, tekst | diagram) ----------
   Paneel 2 (groen) en 4 (blauw): geen strepen, geen kaart. Tekst en diagram
   staan naast elkaar op brede schermen, onder elkaar op smalle. */
.panel--split {
  padding: 7vh 6vw;
}
.panel--green { background-color: var(--green-900); }
.panel--blue  { background-color: var(--blue); }

.split {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  /* Begrenst de hoogte tot het paneel, zodat lange tekst intern scrollt en
     elk paneel exact één scherm vult (essentieel voor strakke scroll-snap). */
  max-height: 86vh;
}
/* Paneel 4: diagram links, tekst rechts (ritme tussen de twee panelen). */
.split--reverse .split__text  { order: 2; }
.split--reverse .split__media { order: 1; }

/* Paneel 2: drieluik met drie niveaus (grid-areas).
   Hogere specificiteit (.panel--split .split--triple) zodat deze regels de
   algemene .split-layout overstemmen, ongeacht bronvolgorde. */
.panel--split .split--triple .split__head          { grid-area: head; }
.panel--split .split--triple .split__col--personal { grid-area: personal; min-height: 0; }
.panel--split .split--triple .split__media         { grid-area: media; }
.panel--split .split--triple .split__col--ppt      { grid-area: ppt; min-height: 0; }

/* Titel over de volle breedte, boven de kolommen (rij-afstand via grid-gap). */
.split__head { min-height: 0; }

/* Mobiel (< 700px): alles onder elkaar — titel, persoonlijk, diagram, PP&T. */
.panel--split .split--triple {
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "personal"
    "media"
    "ppt";
}

/* Tablet (700–1023px): titel boven; daaronder smalle persoonlijke kolom links,
   rechts het diagram bovenop de PP&T-uitleg (horizontaal gesplitst). */
@media (min-width: 700px) {
  .panel--split .split--triple {
    grid-template-columns: 0.8fr 1.25fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head     head"
      "personal media"
      "personal ppt";
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
  }
  .split--triple .split__media { align-self: center; }
}

/* Desktop (≥ 1024px): titel over de volle breedte, daaronder drie kolommen. */
@media (min-width: 1024px) {
  .panel--split .split--triple {
    grid-template-columns: 1fr 0.9fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head     head  head"
      "personal media ppt";
    max-width: 1320px;
    gap: clamp(26px, 2.6vw, 48px);
  }
}

.split__text {
  color: rgba(255, 255, 255, 0.92);
  max-height: 86vh;
  overflow-y: auto;          /* lange tekst scrollt binnen de kolom */
  padding-right: 12px;
  -webkit-overflow-scrolling: touch;
}
.split__text .eyebrow,
.split__head .eyebrow {
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.panel--green .split__text .eyebrow,
.panel--green .split__head .eyebrow { color: #d9d9d9; }  /* lichtgrijs op groen, beter leesbaar */
.split__title {
  color: var(--white);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 22px;
}
.split__text p {
  font-size: 15px;
  line-height: 1.7;
  padding: 7px 0;
}
.split__text strong { color: var(--white); font-weight: 700; }
.split__note {
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  border-left: 3px solid var(--green);
  padding-left: 16px !important;
  margin-top: 16px;
}

/* Slanke, discrete scrollbar voor de tekstkolom */
.split__text::-webkit-scrollbar { width: 6px; }
.split__text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 3px;
}
.split__text { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; }

.split__media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}
.split__media .diagram { margin: 0; }
.split__media .split__note { margin-top: 0; }

/* Mobiel-only diagram (paneel 4): standaard verborgen, alleen op smal getoond. */
.diagram--mobile { display: none; }

/* Stapelen + vrije flow op smalle/lage schermen (snap is daar uitgezet). */
@media (max-width: 879px) {
  .panel--split { padding: 9vh 20px; height: auto; }
  .split {
    grid-template-columns: 1fr;
    max-height: none;
    gap: 28px;
  }
  .split--reverse .split__text  { order: 1; }  /* tekst altijd eerst gestapeld */
  .split--reverse .split__media { order: 2; }
  .split__text { max-height: none; overflow: visible; padding-right: 0; }

  /* Paneel 4: diagram na de eerste alinea tonen, desktop-mediakolom verbergen. */
  #werkwijze .split__media { display: none; }
  #werkwijze .diagram--mobile { display: block; margin: 6px 0 14px; }
}

/* ---------- 7. Diagrammen ---------- */
.diagram {
  margin: 8px 0 24px;
  width: 100%;
}

/* Schatkaart */
.diagram--map {
  background: var(--white);
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.diagram--map img { border-radius: 2px; }
.diagram--map figcaption {
  font-size: 12px;
  color: var(--grey);
  text-align: center;
  font-style: italic;
  padding-top: 10px;
}

/* People · Process · Technology — transparante PNG, direct op de egale kleur. */
.diagram--ppt img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
}

/* Rollen-staafdiagram (paneel 3) — transparante PNG binnen de grijze kaart. */
.diagram--roles img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---------- 8. Footer ---------- */
.site-footer {
  margin-top: 28px;
  text-align: center;
}
.site-footer p {
  font-size: 12px;
  color: var(--green);
  text-shadow: 1px 1px var(--ink);
  padding: 2px 0;
}

/* ---------- 9. Zij-navigatie (dotnav) ---------- */
.dotnav {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 50;
}
.dotnav ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.dotnav a {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent;
  transition: background 0.25s, transform 0.25s;
  position: relative;
}
.dotnav a:hover { background: rgba(255,255,255,0.6); }
.dotnav a.is-active {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.25);
}
/* Label-tooltip bij hover */
.dotnav a::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  background: rgba(20,83,45,0.92);
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.dotnav a:hover::after { opacity: 1; }

/* ---------- 10. Responsive ---------- */
@media (max-width: 768px) {
  .panel { padding: 10vh 18px; }
  .card { padding: 32px 26px 40px; }
  .card p { font-size: 15px; }
  .dotnav { right: 12px; }
}

@media (max-width: 420px) {
  .dotnav { display: none; }   /* op smalle schermen overbodig */
}

/* ---------- 11. Parallax inschakelen (alleen bij bewegingsvoorkeur) ----------
   Standaard (geen ondersteuning / reduced-motion): panelen stapelen normaal,
   backdrops liggen statisch achter de content. Hieronder zetten we de echte
   parallax aan: de scroller krijgt perspective en de lagen worden via
   translateZ + compenserende scale naar achteren geduwd. */
@media (prefers-reduced-motion: no-preference) {

  .scroll-root {
    perspective: var(--persp);
    perspective-origin: 0 0;
  }

  .panel { transform-style: preserve-3d; }

  /* Achtergrondlaag: ver naar achteren -> beweegt het traagst.
     scale = (persp + |z|) / persp = (10 + 20) / 10 = 3. Ruim oversized en
     vanuit het midden geschaald, zodat de randen nooit zichtbaar worden. */
  .panel__bg {
    transform: translateZ(-20px) scale(3);
  }

  /* Midden-laag (hero-vignet): halverwege -> beweegt op tussensnelheid.
     scale = (10 + 10) / 10 = 2 */
  .panel__mid {
    transform: translateZ(-10px) scale(2);
  }

  /* Hero & Contact zijn transparant (de vaste body-laag verzorgt strepen +
     schaduw), dus geen parallax-scale nodig op deze lege lagen. */
  .panel__bg--hero,
  .panel__bg--contact {
    transform: none;
  }
}

/* Reduced-motion: geen vloeiend scrollen, geen snap-sprongen, geen animatie. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-root { scroll-behavior: auto; scroll-snap-type: none; }
  .hero__scroll span { animation: none; }
}