/* ─────────────────────────────────────────────────────────────
   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; }
  .nav-burger { display: block; }
  .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); }
  /* De satellieten hangen aan een ring die in 240 seconden ronddraait, dus welk
     label onderaan staat wisselt. Het laagste punt van die baan lag 17px onder
     het vak van .orbit en dus in de partnerstrip; op een stilstaand beeld valt
     dat niet op, na een halve minuut wel.
     Let op de zoom: die verkleint ook deze marge. 40px hier komt op het scherm
     neer op 40 x .58 = 23px, net genoeg voor die 17px plus wat lucht. Verander
     je de zoomfactor, reken dit getal dan mee om. Overschrijding en marge
     schalen allebei mee, dus de verhouding blijft kloppen; de ophogingen in de
     twee blokken hieronder houden alleen het gat op het scherm gelijk.

     LET OP DE BREEDTE. Het vak van .orbit is 560px, maar de vijf satellieten
     staan op left: calc(50% +/- 243px) met width: 160px en margin-left: -80px.
     Ze steken er dus 43px aan weerskanten buiten uit: wat je ziet is 646px
     breed, wat de layout denkt is 560px. Daardoor centreert margin: auto het
     vak en niet het beeld, en knipt header.hero met overflow-x: hidden weg wat
     er rechts uitvalt -- zonder schuifbalk, dus een overflowcontrole ziet het
     niet. Reken een zoomfactor daarom altijd op 646 en niet op 560. */
  .orbit { zoom: .58; transform: none; margin: 18px auto 40px; }
  footer ul { gap: 4px; }
  footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
  .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%; }
}

/* Onder 400px past de orbit niet meer. Zie de uitleg bij .orbit hierboven: het
   beeld is 646px breed, dus op .58 komt het neer op 375px, terwijl een venster
   van 360px na de wrap-padding (2 x 22px) maar 316px overhoudt. Gemeten voor
   deze wijziging: op 360px viel er 12px van het rechterlabel weg, op 320px
   52px, en links 3px. Afgeknipt, niet schuifbaar, want header.hero staat op
   overflow-x: hidden.

   Twee stappen, elk uitgerekend op de smalste breedte die hij bedient:
     646 x .46 = 297px  past in de 316px van een 360px-venster
     646 x .40 = 258px  past in de 276px van een 320px-venster
   De tweede stap is er niet voor oude telefoons maar voor WCAG 1.4.10, dat
   vraagt dat de inhoud op 320px zonder verlies leesbaar blijft. */
@media (max-width: 400px) {
  .orbit { zoom: .46; margin: 23px auto 50px; }
}
@media (max-width: 345px) {
  .orbit { zoom: .40; margin: 26px auto 58px; }
}

/* 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);
  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; } }