/* ─────────────────────────────────────────────────────────────
   HappiMeds - Responsive
   De gedeelde breekpunten (1020, 900, 640 en 560 pixels), daarna scroll-reveal
   en de slogan onder het logo; die hebben allebei hun eigen mediaquery.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  /* top: 100% in plaats van een vaste 66px. Die 66 was de hoogte van een oudere
     navigatiebalk; die is nu 100px, waardoor het uitklapmenu 34px over de balk
     heen viel en het logo half afdekte. Met top: 100% hangt het paneel altijd
     precies onder nav.sitenav, ook als die hoogte later weer verandert.
     Absolute in plaats van fixed kan, want nav.sitenav is zelf al fixed en is
     daarmee het blok waar dit tegenaan wordt gepositioneerd. */
  .navlinks {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: white; border-bottom: 1px solid var(--line); padding: 18px 22px 22px; gap: 16px;
    display: none;
  }
  .navlinks.openmenu { display: flex; }
  .navlinks a:not(.btn) { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 2px; }
  .navlinks a.btn { justify-content: center; padding: 13px 22px; }
  /* De pil in de balk (nav-cta-mini) is op deze breedtes altijd zichtbaar, dus
     dezelfde knop onderin het menu is dubbel. Alleen op de contactpagina, waar
     de pil verborgen is, blijft de (witte) menuknop staan. */
  body:not([data-page="contact"]) .navlinks a.btn { display: none; }
  .nav-burger { display: block; }
  nav.sitenav .wrap { gap: 12px; }
  .nav-cta-mini { display: inline-flex; margin-left: auto; padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
  .cards:has(> .card:nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
  .cards > .card:nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 22px; }
  section { padding: 64px 0; }.cards, .cards.cols3, .steps, .split, .split.rev, .cta-card, .band, .prose-grid, .cards:has(> .card:nth-child(3):last-child){ grid-template-columns: 1fr; }
  .resgrid { grid-template-columns: 1fr; }
  .impact-stats { grid-template-columns: repeat(2, 1fr); }
  .budiyu-strip { grid-template-columns: 1fr; gap: 28px; }
  .bphone-col { order: 2; margin-top: 10px; }
  .pmock { --pmk: .34; }
  .pm-flat { height: calc(1240px * .34); }

  .sdk-split .sdk-visual { transform: none; }
  .impact-quote { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .impact-quote .qlogo { width: 140px; }
  .evalpanel { padding: 36px 28px; }
  .adv-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); text-align: center; }
.advisorbox { margin-top: 44px; padding-top: 38px; }
  .org-children { grid-template-columns: 1fr 1fr; }
  .org-parent { flex-direction: column; gap: 8px; text-align: center; padding: 18px 20px; }
  .partnergrid { grid-template-columns: 1fr; gap: 30px; }
  .resgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-branches { display: none; }
  .resflow .resgrid { margin-top: 30px; }
  .rescard { aspect-ratio: auto; }
  .exlist { grid-template-columns: 1fr; }
  .exlist.rows .exline { grid-template-columns: 1fr; gap: 12px; }
  .exlist.rows .exline-head { border-bottom: 1px dashed var(--line-blue); padding-bottom: 16px; margin-bottom: 6px; }
  .exlist.rows .xsteps { grid-template-columns: 1fr; }
  .exlist.rows .xresult { grid-column: 1; }
  footer .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding-top: 124px; background-size: auto, 900px auto, 24px 24px, auto, auto; background-position: 0 0, right -80px bottom -60px, 0 0, 0 0, 0 0; }
  .cta-card { padding: 44px 30px; }
  .band { padding: 30px 26px; }
  .impact-quote .qphoto { width: 150px; height: auto; }
}
@media (max-width: 1020px) {
  .navlinks a:not(.btn) { min-height: 44px; padding: 8px 2px; }
}
@media (max-width: 640px) {
  .exlist { grid-template-columns: minmax(0, 1fr); }
  .exline { min-width: 0; }
  .resgrid { grid-template-columns: minmax(0, 1fr); }
  .rescard { min-width: 0; min-height: 0; }
  .rescard h3 { min-height: 0; }
  .res-head { flex-wrap: wrap; }
  .res-chip { white-space: normal; }
  .org-children { grid-template-columns: minmax(0, 1fr); }
  /* Op een telefoon is het figuur onleesbaar (labels van ~8px) en maakt het het
     eerste scherm ruim 400px langer; sinds 2026-09-03 staat het daar uit. Tussen
     640 en 1200px schaalt het mee, zie 2-nav-hero.css. */
  .orbit { display: none; }
  footer ul { gap: 4px; }
  footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .org-child { min-width: 0; }
  .advisor .adv-name, .advisor .adv-role { white-space: normal; text-align: center; }
  .netlink { overflow-wrap: anywhere; }
  body[data-page="over"] .hero.sub .split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(32px, 9vw, 38px); }
  .impact-stats { grid-template-columns: 1fr 1fr; gap: 18px; }
  .stats { gap: 18px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .cta-actions .btn { width: 100%; }
}


/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Alleen zolang de animatie nog moet komen; daarna geeft de browser de laag
   weer vrij. Op de home stonden anders dertig elementen permanent op een
   eigen laag. */
.reveal:not(.reveal-in) { will-change: opacity, transform; }
.reveal.reveal-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .faq-item .body p { opacity: 1; transform: none; transition: none; }
}

/* Nav slogan onder logo */
nav.sitenav .logo-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
nav.sitenav .lslogan { font-size: 14.5px; font-weight: 600; color: var(--muted); margin-top: 3px; letter-spacing: 0; }
nav.sitenav .lslogan b { color: var(--blue-text); }
@media (max-width: 700px) { nav.sitenav .lslogan { display: none; } }

/* Op een telefoon past de CTA-pil alleen naast het beeldmerk; de woordnaam gaat
   dan uit, het ronde beeldmerk blijft de herkenning. Staat onder de regel
   "Nav slogan onder logo" hierboven, die .logo-txt op flex zet: gelijke
   specificiteit, dus de laatste wint. */
@media (max-width: 560px) {
  nav.sitenav .logo-txt { display: none; }
  .nav-cta-mini { font-size: 13px; padding: 9px 13px; }
}
@media (max-width: 360px) {
  /* Op de smalste telefoons (320-360px) knijpt de rij anders het beeldmerk ovaal. */
  nav.sitenav .wrap { gap: 8px; }
  nav.sitenav .logo img { flex-shrink: 0; }
  .nav-cta-mini { font-size: 12.5px; padding: 8px 11px; }
}


/* ── Over ons: correcties uit de critique (4 september 2026) ──────────────── */

@media (max-width: 900px) {
  /* De hero bleef twee kolommen tot 640px. Op 700px stond er 956px lege kolom
     naast een tekstkolom van 355px met 33 tekens per regel. */
  body[data-page="over"] .hero.sub .split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  body[data-page="over"] .hero-side { align-self: stretch; }
}

@media (max-width: 700px) {
  /* Drie alinea's van 20px leverden op een telefoon 33 tekens per regel op. */
  .hero .lede { font-size: 17px; line-height: 1.6; }
  /* Op Over ons hebben alle drie de alinea's dezelfde maat; op een telefoon één
     stap terug, zodat de regellengte klopt. */
  body[data-page="over"] .hero .lede,
  body[data-page="over"] .hero .hero-body { font-size: 16px; line-height: 1.7; }
}

@media (max-width: 640px) {
  /* Het organogram werd één kolom, maar de knooppunten bleven op de horizontale
     lijn gericht: ze landden 37px hoger, midden in het webadres van de vestiging
     erboven. Nu loopt de stippellijn verticaal en staan de knooppunten ernaast. */
  .org-children { border-left: 2px dashed rgba(5,63,92,.20); margin-left: 12px; padding: 0 0 0 28px; gap: 26px; }
  .org-children::before { display: none; }
  .org-child { align-items: flex-start; text-align: left; padding: 0; }
  .org-child::before { top: 26px; left: -35px; transform: none; }
  .org-child .netlogo { margin-bottom: 8px; }

  /* De adviseurs braken af in ongelijke, verschillend uitgelijnde rijen. Nu vijf
     regels onder elkaar, dezelfde vorm als de lijst in de hero. */
  /* body[data-page] ervoor, want 7-paginas.css zet .advisor op een rij en laadt
     na dit bestand; zonder die extra specificiteit wint de rij alsnog. */
  body[data-page="over"] .advisorgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  body[data-page="over"] .advisor { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); }
  body[data-page="over"] .advisor:last-child { border-bottom: 0; }
  body[data-page="over"] .advisor .adv-name, body[data-page="over"] .advisor .adv-role { white-space: normal; text-align: left; }
  body[data-page="over"] .advisor .adv-li-icn { margin-top: 4px; }
}