/* zwemschool-ouders: block-port van ReactBitsPro Blocks/social-proof-12 (fotokaarten met citaat) en cta-11
   (banner met productvenster). Tailwind-klassen vertaald naar gescopete CSS; kleuren alleen via --m-*-tokens.
   De whileHover-springs van de bron (y -4: stiffness 500 damping 25; scale 1,03/0,97: stiffness 550 damping 30)
   staan als linear()-curves met de uitgerekende duur; browsers zonder linear() krijgen de bezier ervoor. */
.msm-zwemschool-ouders{--zo-p:var(--m-primary,#ef6e4a);--zo-bg:var(--m-bg,#dfeff0);--zo-ink:var(--m-ink,#123b45);--zo-s:var(--m-surface,#f8ffff);--zo-mu:var(--m-muted,#53747b);--zo-a:var(--m-accent2,#2f7f8c);--zo-l:var(--m-line,#c2dcdf);--zo-ease:cubic-bezier(.22,1,.36,1);--zo-tw:cubic-bezier(.4,0,.2,1);position:relative;scroll-margin-top:112px;padding:48px 16px;background:var(--zo-s);color:var(--zo-ink);font-family:var(--m-font-body,"Noto Sans","Segoe UI",system-ui,sans-serif);font-size:16px;line-height:1.55}
.msm-zwemschool-ouders *{box-sizing:border-box}
.msm-zwemschool-ouders .zo-wrap{width:min(1400px,100%);margin:0 auto}

/* Kop (social-proof-12: kolom, vanaf 640 px rij met items-end en space-between, gap 24; tekstkolom gap 8; ronde donkere knop) */
.msm-zwemschool-ouders .zo-head{display:flex;flex-direction:column;gap:24px}
.msm-zwemschool-ouders .zo-head-main{display:flex;align-items:flex-start;gap:clamp(16px,3vw,32px);min-width:0}
.msm-zwemschool-ouders .zo-head-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.msm-zwemschool-ouders .zo-kicker{margin:0;color:var(--zo-mu);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.msm-zwemschool-ouders .zo-title{margin:0;font:700 30px/1.1 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif);letter-spacing:-.02em;color:var(--zo-ink)}
.msm-zwemschool-ouders .zo-intro{margin:0;color:var(--zo-mu);font-size:14px}
.msm-zwemschool-ouders .zo-all{align-self:flex-start;display:inline-flex;align-items:center;min-height:40px;padding:10px 20px;border-radius:999px;background:var(--zo-ink);color:var(--zo-s);font-size:14px;font-weight:500;text-decoration:none;transition:background-color .15s var(--zo-tw),transform .095s var(--zo-tw);transition:background-color .15s var(--zo-tw),transform .095s linear(0,0.004,0.016,0.034,0.059,0.088,0.121,0.158,0.197,0.239,0.282,0.326,0.37,0.415,0.46,0.503,0.546,0.588,0.629,0.668,0.705,0.741,0.774,0.806,1)}
.msm-zwemschool-ouders .zo-all:hover{background:color-mix(in srgb,var(--zo-ink) 86%,var(--zo-s));transform:scale(1.03)}
.msm-zwemschool-ouders .zo-all:active{transform:scale(.97)}
.msm-zwemschool-ouders .zo-all:focus-visible,.msm-zwemschool-ouders .zo-btn:focus-visible{outline:2px solid var(--zo-ink);outline-offset:2px}

/* De bal: host voor de gedeelde orbital-type-instantie; zonder canvas een stilstaande schijf met het woord */
.msm-zwemschool-ouders .zo-orb{position:relative;flex:0 0 auto;display:grid;place-items:center;width:140px;height:140px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--zo-a) 70%,var(--zo-s)),var(--zo-a) 55%,var(--zo-ink) 100%);isolation:isolate}
.msm-zwemschool-ouders .zo-orb-word{position:relative;z-index:1;color:var(--zo-s);font:700 17px/1 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif);letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.msm-zwemschool-ouders .zo-orb.is-live .zo-orb-word{display:none}
.msm-zwemschool-ouders .zo-orb.is-live{background:color-mix(in srgb,var(--zo-a) 92%,var(--zo-ink))}
.msm-zwemschool-ouders .zo-orb .orbital-type{position:absolute;inset:0;isolation:isolate;width:100%;height:100%;min-height:0;overflow:hidden}
.msm-zwemschool-ouders .zo-orb .orbital-type__content{position:relative;z-index:10;width:100%;height:100%}

/* Fotokaarten (social-proof-12: raster mt 32/40, gap 20/24, twee kolommen vanaf 768 px en drie vanaf 1024 px voor drie reacties;
   kaart rounded-2xl overflow hidden op --m-ink, 3:4 en 4:3 vanaf 640 px, beeld inset 0 met schaal 1,05 bij hover in 0,3 s,
   verloop naar rechtsonder 70/30/60 % en onderste helft 80 % naar 0; inhoud p 20/28 tussen kop en citaat verdeeld) */
.msm-zwemschool-ouders .zo-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:32px 0 0;padding:0;list-style:none}
.msm-zwemschool-ouders .zo-cell{min-width:0;display:flex}
.msm-zwemschool-ouders .zo-card{position:relative;flex:1;margin:0;border-radius:16px;overflow:hidden;background:var(--zo-ink);aspect-ratio:3/4;isolation:isolate;transition:transform .285s var(--zo-ease);transition:transform .285s linear(0,0.032,0.114,0.229,0.361,0.498,0.63,0.751,0.856,0.942,1.01,1.06,1.093,1.113,1.12,1.118,1.11,1.097,1.081,1.065,1.049,1.034,1.021,1.009,1)}
.msm-zwemschool-ouders .zo-card:hover{transform:translateY(-4px)}
.msm-zwemschool-ouders .zo-obj{position:absolute;inset:0;display:block;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--zo-a) 55%,var(--zo-ink)),var(--zo-ink) 75%)}
.msm-zwemschool-ouders .zo-obj img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .3s var(--zo-tw)}
.msm-zwemschool-ouders .zo-card:hover .zo-obj img{transform:scale(1.05)}
.msm-zwemschool-ouders .zo-shade{position:absolute;inset:0;background:linear-gradient(to bottom right,color-mix(in srgb,var(--zo-ink) 70%,transparent),color-mix(in srgb,var(--zo-ink) 30%,transparent),color-mix(in srgb,var(--zo-ink) 60%,transparent))}
.msm-zwemschool-ouders .zo-shade-foot{position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(to top,color-mix(in srgb,var(--zo-ink) 80%,transparent),transparent)}
.msm-zwemschool-ouders .zo-card-in{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:20px}
.msm-zwemschool-ouders .zo-top{display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.msm-zwemschool-ouders .zo-cat{order:-1;margin:0 0 4px;color:rgba(255,255,255,.85);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.msm-zwemschool-ouders .zo-name{display:flex;flex-direction:column;gap:2px;color:#fff;font:700 18px/1.3 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif)}
.msm-zwemschool-ouders .zo-role{color:rgba(255,255,255,.85);font:400 11px/1.4 var(--m-font-body,"Noto Sans","Segoe UI",system-ui,sans-serif)}
.msm-zwemschool-ouders .zo-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.msm-zwemschool-ouders .zo-quote{margin:0;padding:0;min-width:0}
.msm-zwemschool-ouders .zo-quote p{margin:0;max-width:384px;color:#fff;font-size:14px;font-weight:500;line-height:1.375;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.msm-zwemschool-ouders .zo-badge{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(255,255,255,.15);color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background-color .15s var(--zo-tw),border-color .15s var(--zo-tw),color .15s var(--zo-tw)}
.msm-zwemschool-ouders .zo-badge svg{width:12px;height:12px}
.msm-zwemschool-ouders .zo-card:hover .zo-badge{background:#fff;border-color:#fff;color:var(--zo-ink)}

/* Banner (cta-11: rounded-3xl, rand, --m-bg, lichte vlek rechtsboven, raster 1,05fr / 0,95fr vanaf lg) */
.msm-zwemschool-ouders .zo-banner{position:relative;overflow:hidden;margin-top:clamp(56px,7vw,96px);border:1px solid var(--zo-l);border-radius:24px;background:var(--zo-bg)}
.msm-zwemschool-ouders .zo-blob{position:absolute;top:-128px;right:8%;width:384px;height:384px;border-radius:50%;background:rgba(255,255,255,.8);filter:blur(64px);pointer-events:none}
.msm-zwemschool-ouders .zo-banner-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.msm-zwemschool-ouders .zo-banner-copy{max-width:576px;padding:48px 24px 8px}
.msm-zwemschool-ouders .zo-banner-kicker{margin:0;color:var(--zo-mu);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.msm-zwemschool-ouders .zo-banner-title{margin:20px 0 0;font:700 clamp(30px,4vw,48px)/1.08 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif);letter-spacing:-.02em;color:var(--zo-ink)}
.msm-zwemschool-ouders .zo-banner-text{margin:20px 0 0;max-width:512px;color:var(--zo-mu);font-size:clamp(16px,1.3vw,18px);line-height:1.6}
.msm-zwemschool-ouders .zo-actions{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.msm-zwemschool-ouders .zo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:14px 28px;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;transition:background-color .2s var(--zo-ease),transform .2s var(--zo-ease)}
.msm-zwemschool-ouders .zo-btn:active{transform:scale(.98)}
.msm-zwemschool-ouders .zo-btn--fill{background:var(--zo-p);color:#fff}
.msm-zwemschool-ouders .zo-btn--fill:hover{background:color-mix(in srgb,var(--zo-p) 85%,var(--zo-ink))}
.msm-zwemschool-ouders .zo-btn--line{border:1px solid color-mix(in srgb,var(--zo-mu) 45%,var(--zo-l));color:var(--zo-ink)}
.msm-zwemschool-ouders .zo-btn--line:hover{background:var(--zo-s)}
.msm-zwemschool-ouders .zo-arrow{display:inline-flex;transition:transform .2s var(--zo-ease)}
.msm-zwemschool-ouders .zo-arrow svg{width:16px;height:16px}
.msm-zwemschool-ouders .zo-btn--fill:hover .zo-arrow{transform:translateX(3px)}
.msm-zwemschool-ouders .zo-facts{margin:24px 0 0;color:var(--zo-mu);font-size:14px}

/* Productvenster: steekt van onderaf uit de banner (rounded-t-2xl, geen onderrand, schaduw), echo erachter */
.msm-zwemschool-ouders .zo-banner-side{display:flex;align-items:flex-end;justify-content:center;padding:40px 24px 0}
.msm-zwemschool-ouders .zo-stack{position:relative;width:100%;max-width:448px}
.msm-zwemschool-ouders .zo-echo{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--zo-l) 80%,transparent);border-radius:16px;background:rgba(255,255,255,.6);transform:translateY(-22px) scale(.96)}
.msm-zwemschool-ouders .zo-track{position:relative;padding:24px 24px 8px;border:1px solid var(--zo-l);border-bottom:0;border-radius:16px 16px 0 0;background:var(--zo-s);box-shadow:0 25px 50px -12px color-mix(in srgb,var(--zo-ink) 12%,transparent)}
.msm-zwemschool-ouders .zo-track-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.msm-zwemschool-ouders .zo-track-label{color:var(--zo-mu);font-size:14px}
.msm-zwemschool-ouders .zo-pill{padding:4px 10px;border:1px solid var(--zo-l);border-radius:999px;color:var(--zo-mu);font-size:12px;font-weight:600;white-space:nowrap}
.msm-zwemschool-ouders .zo-track-name{margin:12px 0 0;font:700 clamp(32px,3.5vw,44px)/1.1 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif);letter-spacing:-.02em;color:var(--zo-ink);font-variant-numeric:tabular-nums}
.msm-zwemschool-ouders .zo-track-sub{margin:8px 0 0;color:var(--zo-mu);font-size:14px}
.msm-zwemschool-ouders .zo-track-next{margin-top:24px;padding:12px;border-radius:12px;background:var(--zo-ink);color:var(--zo-s);font-size:14px;font-weight:600;text-align:center}
.msm-zwemschool-ouders .zo-track-rows{margin:24px 0 0;padding:0;list-style:none}
.msm-zwemschool-ouders .zo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid color-mix(in srgb,var(--zo-l) 60%,transparent)}
.msm-zwemschool-ouders .zo-row-main{display:flex;flex-direction:column;min-width:0}
.msm-zwemschool-ouders .zo-row-label{font-size:14px;font-weight:600;color:var(--zo-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msm-zwemschool-ouders .zo-row-meta{font-size:12px;color:var(--zo-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msm-zwemschool-ouders .zo-row-end{display:flex;flex-shrink:0;align-items:center;gap:12px}
.msm-zwemschool-ouders .zo-status{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--zo-bg) 70%,var(--zo-s));color:var(--zo-mu);font-size:12px;font-weight:600}
.msm-zwemschool-ouders .zo-status--done{background:color-mix(in srgb,var(--zo-a) 16%,var(--zo-s));color:var(--zo-a)}

@media (min-width:640px){
  .msm-zwemschool-ouders{padding:64px 24px}
  .msm-zwemschool-ouders .zo-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .msm-zwemschool-ouders .zo-all{align-self:auto}
  .msm-zwemschool-ouders .zo-title{font-size:36px}
  .msm-zwemschool-ouders .zo-intro{font-size:16px}
  .msm-zwemschool-ouders .zo-cards{gap:24px;margin-top:40px}
  .msm-zwemschool-ouders .zo-card{aspect-ratio:4/3}
  .msm-zwemschool-ouders .zo-obj img{object-fit:cover;object-position:50% 35%}
  .msm-zwemschool-ouders .zo-card-in{padding:28px}
  .msm-zwemschool-ouders .zo-cat{font-size:12px}
  .msm-zwemschool-ouders .zo-name{font-size:24px}
  .msm-zwemschool-ouders .zo-role{font-size:12px}
  .msm-zwemschool-ouders .zo-quote p{font-size:18px}
  .msm-zwemschool-ouders .zo-badge{width:48px;height:48px}
  .msm-zwemschool-ouders .zo-badge svg{width:16px;height:16px}
  .msm-zwemschool-ouders .zo-actions{flex-direction:row}
  .msm-zwemschool-ouders .zo-btn{width:auto}
  .msm-zwemschool-ouders .zo-banner-copy{padding:64px 40px 8px}
  .msm-zwemschool-ouders .zo-banner-side{padding:40px 40px 0}
  .msm-zwemschool-ouders .zo-track{padding:32px 32px 12px}
}
@media (min-width:768px){
  .msm-zwemschool-ouders .zo-title{font-size:48px}
  .msm-zwemschool-ouders .zo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .msm-zwemschool-ouders{padding-left:32px;padding-right:32px}
  .msm-zwemschool-ouders .zo-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .msm-zwemschool-ouders .zo-banner-grid{grid-template-columns:1.05fr .95fr;gap:32px}
  .msm-zwemschool-ouders .zo-banner-copy{padding:80px 0 80px 64px}
  .msm-zwemschool-ouders .zo-banner-side{justify-content:flex-end;padding:64px 64px 0 40px}
}
@media (max-width:767px){
  .msm-zwemschool-ouders .zo-orb{width:96px;height:96px}
  .msm-zwemschool-ouders .zo-orb-word{font-size:12px}
  .msm-zwemschool-ouders .zo-row-label,.msm-zwemschool-ouders .zo-row-meta{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .msm-zwemschool-ouders .zo-all,.msm-zwemschool-ouders .zo-card,.msm-zwemschool-ouders .zo-obj img,.msm-zwemschool-ouders .zo-badge,.msm-zwemschool-ouders .zo-btn,.msm-zwemschool-ouders .zo-arrow,.msm-zwemschool-ouders .zo-orb-word{transition:none}
  .msm-zwemschool-ouders .zo-card:hover{transform:none}
  .msm-zwemschool-ouders .zo-card:hover .zo-obj img{transform:none}
  .msm-zwemschool-ouders .zo-all:hover,.msm-zwemschool-ouders .zo-btn:active,.msm-zwemschool-ouders .zo-all:active{transform:none}
  .msm-zwemschool-ouders .zo-btn--fill:hover .zo-arrow{transform:none}
}