/* pandfix — gedeelde mobiele verbeteringen.
   Gelinkt NA de inline <style> in elke pagina, dus overschrijft waar nodig.
   Eén bestand = mobiel fix je één keer voor de hele site. */

@media (max-width:760px){
  /* Card-row widgets → horizontale slider i.p.v. op elkaar gestapeld */
  .svc-grid,.revs,.gallery{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding:2px 18px 18px;
    margin:0 -18px;                 /* edge-bleed: voelt als echte carrousel */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .svc-grid::-webkit-scrollbar,
  .revs::-webkit-scrollbar,
  .gallery::-webkit-scrollbar{display:none}
  .svc-grid>*,.revs>*,.gallery>*{
    flex:0 0 84%;
    max-width:320px;
    scroll-snap-align:start;
  }

  /* Hero — meer ademruimte op mobiel */
  .hero-in{padding:54px 0 58px !important}

  /* Mobiele robuustheid */
  html,body{overflow-x:hidden}      /* nooit horizontale schuif-bug */
  img{max-width:100%;height:auto}   /* afbeeldingen nooit buiten beeld */
}

/* Extra-klein scherm: kaarten net iets breder zodat de volgende "gluurt" */
@media (max-width:420px){
  .svc-grid>*,.revs>*,.gallery>*{flex-basis:88%}
}

/* ───── Ronde 2: uit parallelle mobiel-audit (5 paginatypes) ───── */
@media (max-width:760px){
  /* Koppen niet te fors op smal scherm */
  .sec-head h2{font-size:1.6rem}
  .split h2,.ctaband h2{font-size:1.55rem}
  /* Topbar ontvolken — past niet op de 38px-balk */
  .topbar{height:auto}
  .topbar .wrap{height:auto;justify-content:center;text-align:center;padding:6px 22px;row-gap:2px}
  .topbar .l{display:none}
  /* Stat-balk: nette 2-per-rij i.p.v. geperst */
  .statbar .wrap{gap:8px 6px;padding:20px 14px}
  .statbar .st{flex:1 1 42%;max-width:none}
  .statbar .st+.st::before{display:none}
  .statbar .sv{font-size:1.4rem}
  /* Spoed-strip onder elkaar i.p.v. gecentreerde halve regels */
  .strip .wrap{flex-direction:column;align-items:flex-start;text-align:left;gap:10px}
  /* CTA-band: comfortabele padding + knoppen vol-breed */
  .ctaband{padding:34px 22px}
  .ctaband .hero-btns{flex-direction:column}
  .ctaband .hero-btns .btn{width:100%;justify-content:center}
  /* Footer-links groter tikbaar (≥44px rij) */
  footer a{padding:8px 0}
  /* Flowline-SVG niet uitgerekt/lomp */
  .flow-link svg{height:34px}
  /* Formulier: 16px tegen iOS-inzoomen + minder benauwde kaart */
  .qfield,select.qfield,textarea.qfield{font-size:16px}
  .ci-form{padding:22px 18px}
}
@media (max-width:420px){
  .hero h1,.sig-hero h1{font-size:1.7rem;letter-spacing:-.02em}
  .sec-head h2{font-size:1.45rem}
}

/* Oude-hero-pagina's: hero-in netjes in 1180-container i.p.v. flush-left (alle viewports) */
.hero>.hero-in{max-width:1180px!important;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px;box-sizing:border-box}

/* ───── Geanimeerd 4-blokjes-logo: subtiele kleur-shimmer (staggered) ───── */
@keyframes mkW{0%,100%{fill:#0E5F8F}50%{fill:#2b8cff}}
@keyframes mkV{0%,100%{fill:#E8502E}50%{fill:#ff7a4d}}
@keyframes mkG{0%,100%{fill:#F5A623}50%{fill:#ffce5e}}
@keyframes mkE{0%,100%{fill:#13A89A}50%{fill:#2fd6c4}}
.mk rect{transform-box:fill-box;transform-origin:center}
.mk rect:nth-of-type(1){animation:mkW 3.4s ease-in-out infinite}
.mk rect:nth-of-type(2){animation:mkV 3.4s ease-in-out .55s infinite}
.mk rect:nth-of-type(3){animation:mkG 3.4s ease-in-out 1.1s infinite}
.mk rect:nth-of-type(4){animation:mkE 3.4s ease-in-out 1.65s infinite}
.brand:hover .mk rect{animation-duration:1.4s}
@media(prefers-reduced-motion:reduce){.mk rect{animation:none}}

/* ───── Mobiele header-iconen + hero-padding ───── */
.tb-wa{color:#25D366;display:inline-flex;align-items:center}
@media (max-width:760px){
  .sig-in{padding-left:18px!important;padding-right:18px!important}
  .page-hero .wrap{padding-left:18px!important;padding-right:18px!important}
  .topbar .star,.topbar .tb-txt,.ph-num{display:none}
  .topbar .r{gap:18px;justify-content:center}
}

/* ───── Mobiele topbar definitief: alleen telefoon- + WA-icoon ───── */
@media (max-width:760px){
  .topbar .l{display:none!important}
  .topbar .star,.topbar .tb-txt,.ph-num{display:none!important}
  .topbar .wrap{justify-content:center!important;gap:20px!important;flex-wrap:nowrap!important}
  .topbar .r{display:flex!important;gap:20px!important;justify-content:center!important}
  .topbar .r a{padding:4px}
}

/* exp-dienstkaarten: alleen de grote brand-Lottie (verberg dubbele badge) */
.exp .c .ic{display:none}