/* ==========================================================================
   RocketUp Tuition - Variation 3 "Zoom"

   Reference: kiddzoom (Family B, Energetic/Tech-Forward), screenshots +
   brand guide supplied by Ethan. Structural language borrowed: split
   hero with a lead-capture card, organic blob decoration, colour-blocked
   section rhythm (bright -> white -> dark -> white -> CTA), squircle cards,
   oversized stat numerals.

   Ethan's explicit overrides for this variation:
   - Exactly two brand colours: blue and orange (kiddzoom's own navy+yellow
     is NOT reused). Both are drawn from the client's own extracted palette
     (--blue and --orange below), not invented.
   - New font pairing, distinct from Variations 1 and 2. Sofia Pro (kiddzoom's
     brand font) is not freely licensed, so Fredoka substitutes for display
     (same rounded-geometric register) and Nunito Sans for body.
   - Testimonials are real quotes extracted to plain text, not screenshot
     images - the raw WhatsApp mosaic approach from V1 is deliberately not
     reused here.
   - kiddzoom's 5-person fake-looking team grid is not reused: RocketUp has
     one real tutor, so the "team" section becomes a single tutor spotlight.
   - No stock photography and no invented mascot illustrations; the only
     photograph is Thomas's real portrait. Decoration is CSS blob shapes only.
   ========================================================================== */

@font-face{
  font-family:Fredoka;src:url('../assets/fonts/fredoka.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20AB,U+2113,U+2122;
}
@font-face{
  font-family:'Nunito Sans';src:url('../assets/fonts/nunitosans.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20AB,U+2113,U+2122;
}

:root{
  color-scheme:light;

  /* exactly two brand colours, both drawn from the client's own palette */
  --blue:#2a73da;       /* client's real "info" blue - PRIMARY here */
  --blue-dk:#0b3578;     /* client's real extended-palette navy - dark sections */
  --blue-pale:#eaf2fd;   /* tint of --blue, for alternating section washes */
  --blue-line:#cfe0f7;   /* tint of --blue, for hairlines on pale sections */
  --orange:#f45a2a;      /* client's real secondary orange - ACCENT/CTA here */
  --orange-dk:#cf4014;   /* hover shade of --orange */
  --orange-pale:#fde9e1; /* tint of --orange, for tier-card chips */

  /* neutrals: not counted as "colours", same as V1/V2's grays */
  --ink:#16213e;
  --ink-dim:#5b6478;
  --bg:#ffffff;
  --line:#e7ebf3;

  --r-card:24px;   /* squircle: kiddzoom's rounded-card language */
  --r-pill:999px;
  --r-ctl:12px;

  --wrap:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 'Nunito Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:Fredoka,system-ui,sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}
button{font:inherit}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:var(--r-ctl);
}

/* ------------------------------- blobs (the one decorative device) ------------------------------- */
.blob{position:absolute;pointer-events:none;z-index:0}
.sparkle{position:absolute;pointer-events:none;z-index:0;opacity:.7}
.cloud-bg{position:absolute;height:auto;color:#fff;opacity:.7;pointer-events:none;z-index:0}
.blob--sq{border-radius:38% 62% 61% 39%/45% 41% 59% 55%}
.blob--sq2{border-radius:62% 38% 42% 58%/38% 58% 42% 62%}

/* --------------------------------- buttons -------------------------------- */
.btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Fredoka,sans-serif;font-weight:600;font-size:15.5px;letter-spacing:0;
  text-decoration:none;white-space:nowrap;padding:15px 28px;border-radius:var(--r-pill);
  border:2px solid transparent;cursor:pointer;
  transition:background 160ms linear,color 160ms linear,border-color 160ms linear,transform 160ms var(--ease);
}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:translateY(1px)}
.btn--go{background:var(--orange);color:#fff}
.btn--go:hover{background:var(--orange-dk)}
.btn--blue{background:var(--blue-dk);color:#fff}
.btn--blue:hover{background:#092a5e}
.btn--line{background:#fff;color:var(--blue-dk);border-color:var(--blue-line)}
.btn--line:hover{border-color:var(--blue)}
.btn--sm{padding:11px 20px;font-size:14px}

/* --------------------------------- header -------------------------------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:26px;height:78px}
.logo{display:flex;align-items:baseline;gap:2px;text-decoration:none;font-family:Fredoka,sans-serif;flex:none}
.logo b{font-weight:600;font-size:22px;color:var(--ink)}
.logo i{font-style:normal;font-weight:700;font-size:22px;color:var(--orange)}
.nav{display:flex;gap:8px;margin-left:auto;align-items:center}
.nav a{
  font-family:Fredoka,sans-serif;font-weight:500;font-size:15.5px;text-decoration:none;
  color:var(--ink-dim);padding:10px 14px;border-radius:var(--r-pill);
  transition:color 160ms linear,background 160ms linear;
}
.nav a:hover{color:var(--blue-dk);background:var(--blue-pale)}
.nav a[aria-current=page]{color:var(--blue-dk);background:var(--blue-pale)}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:var(--r-ctl);padding:10px;color:var(--ink)}
.burger svg{width:22px;height:22px}

/* ---------------------------------- hero --------------------------------- */
.hero{position:relative;background:var(--blue-dk);overflow:hidden;padding:64px 0 84px}
/* solid fills only - a translucent blob over a differently-hued background
   blends into a third, unintended colour, which breaks the two-colour rule */
.hero .blob{background:var(--orange)}
.hero .blob:nth-child(1){width:340px;height:340px;top:-120px;right:-80px}
.hero .blob:nth-child(2){width:190px;height:190px;bottom:-70px;left:6%;background:var(--orange-dk)}

/* generated illustration (gpt-image-bridge) as a corner sticker on the card.
   Anchored to the card's own top-right corner rather than floated loose in
   the hero, so its position is verified-safe: it can only ever overlap the
   card's own padding margin, never the headline/form fields beneath it. */
.card__sticker{
  position:absolute;z-index:2;top:-34px;right:-28px;width:108px;height:108px;
  object-fit:contain;border-radius:22px;background:#fff;padding:8px;
  transform:rotate(8deg);box-shadow:0 12px 26px -10px rgba(1,20,60,.4);
}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero__kicker{
  display:inline-block;font-family:Fredoka,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.02em;color:var(--blue-dk);background:#fff;padding:8px 18px;border-radius:var(--r-pill);
  margin-bottom:22px;
}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);color:#fff;line-height:1.05;margin-bottom:20px;text-wrap:balance}
.hero h1 span{color:var(--ink);background:var(--orange);padding:0 10px;border-radius:14px;display:inline-block}
.hero__sub{font-size:19px;color:#eaf1ff;max-width:36ch;line-height:1.6;margin-bottom:0}
.hero__trust{
  display:inline-flex;align-items:center;gap:14px;margin-top:30px;text-decoration:none;
}
.hero__trust-avatars{display:flex}
.hero__trust-avatars img{
  width:36px;height:36px;border-radius:50%;border:3px solid var(--blue-dk);object-fit:cover;
  margin-left:-12px;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.hero__trust-avatars img:first-child{margin-left:0}
.hero__trust-text{font-size:14px;color:#eaf1ff;line-height:1.35}
.hero__trust-text b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:15px;color:#fff;letter-spacing:.02em}

.card{
  position:relative;z-index:1;background:#fff;border-radius:var(--r-card);
  padding:34px;box-shadow:0 18px 44px -18px rgba(11,53,120,.4);
  display:flex;flex-direction:column;justify-content:center;
}
.card h2{font-size:1.5rem;color:var(--blue-dk);margin-bottom:6px}
.card__sub{color:var(--ink-dim);font-size:15px;margin-bottom:22px}
.f{display:grid;gap:8px;margin-bottom:18px}
.f label{font-family:Fredoka,sans-serif;font-weight:500;font-size:14px;color:var(--ink)}
.f input,.f select{
  font:400 16px/1.5 'Nunito Sans',sans-serif;color:var(--ink);background:#fbfcff;
  border:1.5px solid var(--line);border-radius:var(--r-ctl);padding:13px 15px;width:100%;
  transition:border-color 160ms linear;
}
.f input::placeholder{color:#8b93a8}
.f input:focus,.f select:focus{border-color:var(--blue);outline:none}
.f__err{font-size:13px;color:var(--orange-dk);font-weight:600}
.f__err[hidden]{display:none}
.card__ok{margin-top:14px;padding:14px 16px;border-radius:var(--r-ctl);background:var(--blue-pale);color:var(--blue-dk);font-size:14.5px}
.card__ok[hidden]{display:none}

/* ------------------------------- section rhythm ------------------------------- */
/* overflow:hidden lives on the base rule (not just the dark/pale variants)
   so any section's decorative blob is contained, never bleeding its tint
   into the section above or below */
.sec{position:relative;padding:92px 0;overflow:hidden}
.sec--pale{background:var(--blue-pale)}
.sec--dark{background:var(--blue-dk);color:#fff}
/* a translucent orange over navy reads as an ambiguous third hue (muddy
   plum), so the dark section's highlight stays inside the blue family */
.sec--dark .blob{background:rgba(42,115,218,.35)}
.sec--dark .blob:nth-child(1){width:300px;height:300px;top:-90px;left:-90px}
.eyebrow{
  font-family:Fredoka,sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  color:var(--orange);margin-bottom:14px;
}
.eyebrow--dark{color:#ffb495}
.sec h2{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--blue-dk);margin-bottom:18px}
.sec--dark h2{color:#fff}
.sec__lede{font-size:18px;color:var(--ink-dim);max-width:60ch;margin-bottom:46px}
.sec--dark .sec__lede{color:#c7d4ec}

/* ----------------------------- approach / bullets ----------------------------- */
.approach{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.approach ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:18px}
.approach li{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.55}
.approach li img{width:42px;height:42px;flex:none;border-radius:12px}
.approach__act{display:flex;gap:16px;flex-wrap:wrap}
.approach__art{position:relative;height:360px}
.approach__art .blob{position:absolute}
.approach__art .b1{width:300px;height:300px;background:var(--blue-pale);top:6px;right:0}
/* transparent-background illustration (gpt-image-bridge) sits directly on the
   organic blob shape, no opaque image edge; the stat chip overlaps its own
   bottom-left corner rather than floating in the container's empty margin */
.approach__art-img{position:absolute;top:20px;right:14px;width:280px;height:280px;object-fit:contain}
.approach__art .stat-chip{
  position:absolute;right:210px;bottom:24px;background:#fff;border-radius:var(--r-card);
  padding:22px 26px;box-shadow:0 14px 30px -14px rgba(11,53,120,.3);z-index:1;
}
.approach__art .stat-chip b{display:block;font-family:Fredoka,sans-serif;font-size:2.2rem;color:var(--orange)}
.approach__art .stat-chip span{font-size:14px;color:var(--ink-dim)}

/* -------------------------------- class tiers -------------------------------- */
/* ------------------------------- tutor spotlight ------------------------------- */
.tutorspot{display:grid;grid-template-columns:auto 1fr;gap:52px;align-items:center;margin-top:48px}
.tutorspot__photo{position:relative;justify-self:start}
.tutorspot__photo .blob{position:absolute;width:250px;height:250px;top:-18px;left:-18px;background:var(--blue-pale);z-index:0}
.tutorspot__photo img{position:relative;z-index:1;display:block;width:220px;height:220px;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 20px 50px -18px rgba(11,53,120,.4)}
.tutorspot__body h3{font-size:1.8rem;color:var(--blue-dk);margin-bottom:12px}
.tutorspot__body>p{color:var(--ink-dim);font-size:17.5px;line-height:1.7;max-width:56ch;margin-bottom:30px}
.tutorspot__stats{display:flex;gap:40px;flex-wrap:wrap}
.tutorspot__stats b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:2.2rem;color:var(--orange)}
.tutorspot__stats span{font-size:14px;color:var(--ink-dim)}
@media (max-width:700px){
  .tutorspot{grid-template-columns:1fr;justify-items:center;text-align:center}
  .tutorspot__photo{justify-self:center}
  .tutorspot__stats{justify-content:center}
}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.tier__chip{
  display:inline-flex;align-self:flex-start;font-family:Fredoka,sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.02em;padding:6px 14px;border-radius:var(--r-pill);
}
.tier:nth-child(odd) .tier__chip{background:var(--orange-pale);color:var(--orange-dk)}
.tier:nth-child(even) .tier__chip{background:var(--blue-pale);color:var(--blue-dk)}
.tier h3{font-size:1.2rem;color:var(--ink)}
.tier__subj{font-size:14.5px;color:var(--ink-dim);line-height:1.5}
.tier__price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.tier__price b{display:block;font-family:Fredoka,sans-serif;font-size:1.7rem;color:var(--blue-dk)}
.tier__price b small{font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:13px;color:var(--ink-dim)}
.tier__price span{font-size:13px;color:var(--ink-dim)}
.tiers__foot{margin-top:38px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.tiers__foot p{color:var(--ink-dim);font-size:16px}

/* --------------------------- about / mission (dark) --------------------------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.about p{font-size:17.5px;line-height:1.7;color:#c7d4ec;max-width:56ch}
.about .eyebrow--dark{color:#ffb495}
.about p + p{margin-top:18px}
.about strong{color:#fff;font-weight:700}

.stats{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.18)}
.stat{padding:34px 24px 6px;border-right:1px solid rgba(255,255,255,.18)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:clamp(2.4rem,5vw,3.2rem);color:var(--orange)}
.stat span{display:block;margin-top:8px;font-size:15.5px;color:#c7d4ec;max-width:16em}


/* ------------------------------- testimonials ------------------------------- */
/* real quotes, extracted to plain text - no screenshot mosaic in this variation */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.q__clip{
  position:absolute;top:-15px;left:26px;width:26px;height:26px;transform:rotate(-10deg);z-index:2;
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 3px 3px rgba(11,53,120,.3));
}
.q__clip--orange{color:var(--orange)}
.q__clip--blue{color:var(--blue)}
.q__who{display:flex;align-items:center;gap:12px;margin-top:18px}
.q__avatar{
  flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Fredoka,sans-serif;font-weight:600;font-size:14px;color:#fff;
}
.q__avatar--orange{background:var(--orange)}
.q__avatar--blue{background:var(--blue)}
.q__mark{font-family:Fredoka,sans-serif;font-size:2.6rem;line-height:1;color:var(--orange);margin-bottom:6px}
.q blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
.q cite{display:block;font-style:normal;font-size:14px;color:var(--ink-dim)}
.q cite b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:15.5px;color:var(--blue-dk)}
.q__tag{
  display:inline-block;margin-top:12px;font-family:Fredoka,sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--blue-dk);background:var(--blue-pale);
  padding:5px 12px;border-radius:var(--r-pill);
}

/* --------------------------------- poly note --------------------------------- */
.poly{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:var(--blue-pale);border-radius:var(--r-card);padding:44px;margin-top:20px;
}
.poly h3{font-size:1.5rem;color:var(--blue-dk);margin-bottom:14px}
.poly p{font-size:17px;color:var(--ink-dim);line-height:1.6}
.poly__quote{font-family:Fredoka,sans-serif;font-size:1.3rem;color:var(--blue-dk);line-height:1.4}
.poly__quote cite{display:block;margin-top:14px;font-style:normal;font-size:14.5px;color:var(--ink-dim);font-family:'Nunito Sans',sans-serif;font-weight:400}

/* --------------------------------- contact --------------------------------- */
/* ---------------------------- google reviews ---------------------------- */
/* Restyled to sit close to the real Trustindex/Google widget embedded on the
   live site: centred rating header, then a row of review cards each carrying
   the reviewer's own real Google avatar, a relative date computed from the
   widget's real timestamp, and a verified-by-Google mark. */
.greviews{display:flex;flex-direction:column;align-items:center;gap:34px;position:relative;z-index:1}
.greviews__heading{text-align:center;max-width:680px}
.greviews__heading .eyebrow{margin-bottom:10px}
.greviews__heading h2{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--blue-dk);margin-bottom:12px;text-wrap:balance}
.greviews__heading .sec__lede{font-size:17px;margin:0 auto;color:var(--ink-dim)}
.greviews__badge{text-align:center}
.greviews__badge b{display:block;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:.02em;color:var(--ink)}
.greviews__stars{display:block;color:var(--orange);letter-spacing:3px;font-size:20px;margin:8px 0}
.greviews__badge p{font-size:14px;color:var(--ink-dim);margin-bottom:10px}
.greviews__badge p strong{color:var(--ink);font-weight:700}
.greviews__glogo{height:20px;width:auto;margin-inline:auto}

.greviews__strip{
  position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.greviews__rail{display:flex;gap:20px;width:max-content;will-change:transform}
.greviews__track{display:flex;flex:none;gap:20px;padding:4px 0 10px;align-items:stretch}
.greviews__strip .grev{
  flex:0 0 auto;width:300px;height:284px;min-height:0;box-sizing:border-box;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);padding:22px;
  box-shadow:0 14px 30px -18px rgba(11,53,120,.2);
  display:flex;flex-direction:column;
  transition:box-shadow 180ms ease,transform 180ms ease;
}
.greviews__strip:hover .grev{box-shadow:0 18px 34px -18px rgba(11,53,120,.28)}
.greviews__strip.is-static{overflow-x:auto;scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
.greviews__strip.is-static .greviews__rail{width:auto}
.greviews__strip.is-static .grev{scroll-snap-align:start}
.greviews__strip.is-static .greviews__track--dup{display:none}
.grev__top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.grev__avatar{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;background:var(--blue-pale)}
.grev__who{flex:1;min-width:0}
.grev__who b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grev__who span{display:block;font-size:12.5px;color:var(--ink-dim)}
.grev__gbadge{
  flex:none;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:Fredoka,sans-serif;font-weight:700;
  font-size:12px;color:#4285F4;
}
.greviews__strip .grev__stars{display:flex;align-items:center;gap:6px;color:var(--orange);letter-spacing:2px;font-size:15px;margin-bottom:10px}
.grev__verified{
  display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:9px;letter-spacing:0;
}
.grev__text{
  font-size:15px;line-height:1.55;color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.grev__text.is-open{display:block;max-height:116.25px;overflow-y:auto;padding-right:4px}
.grev__more{
  margin-top:auto;min-height:16px;
  background:none;border:0;padding:0;font:600 13px Fredoka,sans-serif;
  color:var(--blue);cursor:pointer;
}
.grev__more:hover{text-decoration:underline}
.greviews__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%}
.greviews__note{font-size:13px;color:var(--ink-dim)}
.greviews__verifiedby{
  font-family:Fredoka,sans-serif;font-weight:600;font-size:12.5px;color:#fff;background:#0f7a52;
  padding:8px 16px;border-radius:var(--r-pill);
}

/* ---------------------------------- map ---------------------------------- */
.map{margin-top:22px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:200px;border:0}

.cta{background:var(--orange);position:relative;overflow:hidden}
.cta .blob{background:rgba(255,255,255,.16)}
.cta .blob:nth-child(1){width:260px;height:260px;top:-100px;right:8%}
.cta__mascot{position:absolute;z-index:1;top:18px;left:4%;width:120px;height:auto;pointer-events:none}
@media (max-width:768px){.cta__mascot{display:none}}

/* extra decorative blobs on sections that previously had none, so the shape
   language established in the hero carries through the rest of the page */
#tiers .blob{background:#fff;opacity:.7}
#tiers .blob:nth-child(1){width:220px;height:220px;bottom:-90px;right:-70px}
#results .blob{background:#fff}
#results .blob:nth-child(1){width:240px;height:240px;bottom:-100px;right:-60px;opacity:.6}
#google-reviews .blob{background:#fff}
#google-reviews .blob:nth-child(1){width:220px;height:220px;top:-90px;left:-70px;opacity:.6}
.cta__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;padding:88px 0}
.cta__in--center{grid-template-columns:1fr;text-align:center;padding:70px 0}
.cta__in--center .cta__title,.cta__in--center .cta__lede{max-width:none;margin-inline:auto}
/* scoped to the class, not a bare "h2" descendant selector, so it cannot
   also repaint the nested white contact-form card's own h2 */
.cta__title{color:#fff;font-size:clamp(2rem,4vw,2.9rem);max-width:16ch;margin-bottom:18px}
.cta__lede{color:#fff0ea;font-size:18.5px;max-width:42ch;margin-bottom:34px}
.cta__list{margin:0;display:grid;gap:0}
.cta__list>div{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.3)}
.cta__list>div:last-child{border-bottom:1px solid rgba(255,255,255,.3)}
.cta__list svg{width:21px;height:21px;color:#fff;margin-top:3px}
.cta__list dt{font-family:Fredoka,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:#ffe4da}
.cta__list dd{margin:5px 0 0;font-size:17.5px;color:#fff}
.cta__list a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.cta__list a:hover{border-bottom-color:#fff}

/* --------------------------------- footer --------------------------------- */
.ft{background:var(--blue-dk);color:#c7d4ec;padding:60px 0 28px;font-size:15.5px}
.ft__in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px}
.ft strong{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:21px;color:#fff;margin-bottom:12px}
.ft h2{font-family:Fredoka,sans-serif;font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ft a{text-decoration:none}
.ft a:hover{color:#fff}
.ft__base{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:14px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* -------------------------------- responsive -------------------------------- */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:40px}
  .card{max-width:520px}
  .tiers{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .approach{grid-template-columns:1fr;gap:36px}
  .approach__art{display:none}
  .about{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.18)}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:26px 0 14px}
  .stat:last-child{border-bottom:0}
  .poly{grid-template-columns:1fr}
  .greviews__strip .grev{width:270px}
  .cta__in{grid-template-columns:1fr;gap:40px;padding:64px 0}
  .ft__in{grid-template-columns:1fr 1fr}
}
/* nav collapses to a burger a step earlier than the 768px content
   breakpoint: six real page links (including "Recommendations") stop
   fitting on one line before the rest of the layout needs to stack. */
@media (max-width:960px){
  .nav{display:none}
  .nav.open{
    display:grid;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);padding:12px 26px 20px;gap:2px;
    box-shadow:0 14px 30px -14px rgba(11,53,120,.2);
  }
  .nav.open a{padding:13px 4px;font-size:16px;border-radius:var(--r-ctl)}
  .burger{display:inline-flex}
  .hdr__in{position:relative}
}
@media (max-width:768px){
  body{font-size:16.5px}
  .hero{padding:44px 0 60px}
  .sec{padding:60px 0}
  .tiers{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .card{padding:26px}
  .ft__in{grid-template-columns:1fr;gap:32px}
}

/* ==========================================================================
   Inner pages: classes / about / results / recommendations / contact.
   Same tokens and section rhythm as the homepage above. New components
   only cover content shapes the homepage didn't need: a shorter page
   header, an FAQ accordion, a full rate table, and screenshot-proof grids.
   ========================================================================== */

/* ------------------------------- page hero ------------------------------- */
.pagehero{position:relative;background:var(--blue-dk);overflow:hidden;padding:56px 0 68px}
.pagehero .blob{background:var(--orange)}
.pagehero>.blob:nth-child(1){width:300px;height:300px;top:-130px;right:-70px}
.pagehero>.blob:nth-child(2){width:160px;height:160px;bottom:-80px;left:8%;background:var(--orange-dk)}
.pagehero__mascot{position:absolute;z-index:1;right:6%;bottom:-10px;width:180px;height:auto;pointer-events:none}
.pagehero__in{position:relative;z-index:1;max-width:66ch}
.pagehero__kicker{
  display:inline-block;font-family:Fredoka,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.02em;color:var(--blue-dk);background:#fff;padding:8px 18px;border-radius:var(--r-pill);
  margin-bottom:22px;
}
.pagehero h1{font-size:clamp(2rem,4.2vw,3.1rem);color:#fff;line-height:1.08;margin-bottom:16px;text-wrap:balance}
.pagehero__sub{font-size:18.5px;color:#eaf1ff;line-height:1.6;max-width:56ch}
.pagehero__act{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.pagehero h1 span{color:var(--ink);background:var(--orange);padding:0 10px;border-radius:14px;display:inline-block}

/* split page hero: intro copy + a photo, used on about.html */
.pagehero--split .pagehero__in{max-width:none;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.pagehero__photo{position:relative;justify-self:center}
.pagehero__photo .blob{position:absolute;width:270px;height:270px;top:-20px;right:-20px;background:var(--orange-dk);z-index:0}
.pagehero__photo img{position:relative;z-index:1;display:block;width:240px;height:240px;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 20px 50px -18px rgba(11,53,120,.5)}
@media (max-width:1080px){
  .pagehero--split .pagehero__in{grid-template-columns:1fr;text-align:center}
  .pagehero--split .pagehero__act{justify-content:center}
  .pagehero__photo{order:-1;margin-bottom:8px}
}

/* proven-results spotlight card, about.html */
.results-spot{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:38px;box-shadow:0 18px 44px -24px rgba(11,53,120,.24)}
.results-spot__grades{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.results-spot__grade{flex:1;min-width:170px;background:var(--orange-pale);border-radius:var(--r-card);padding:18px 22px}
.results-spot__grade b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.4rem;color:var(--orange-dk)}
.results-spot__grade span{font-size:13.5px;color:var(--ink-dim)}
.results-spot p{font-size:16.5px;color:var(--ink-dim);line-height:1.65}
.results-spot p+p{margin-top:14px}

/* stacked method groups (small-group tuition, exam technique), about.html */
.methodgroup+.methodgroup{margin-top:80px;padding-top:76px;border-top:1px solid var(--line)}
.methodgroup__head h3{font-size:1.3rem;color:var(--blue-dk);margin-bottom:8px}
.methodgroup__head p{color:var(--ink-dim);font-size:15.5px;max-width:62ch;margin-bottom:28px}

/* connected step timeline, contact.html motto section */
.journey{display:flex;gap:24px;margin-top:8px;position:relative}
.journey::before{content:"";position:absolute;top:32px;left:8%;right:8%;height:2px;background:var(--blue-line);z-index:0}
.journey__step{flex:1;text-align:center;position:relative;z-index:1}
.journey__badge{
  width:64px;height:64px;border-radius:50%;background:#fff;border:3px solid var(--orange);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  box-shadow:0 10px 24px -12px rgba(11,53,120,.3);
}
.journey__badge img{width:30px;height:30px;object-fit:contain;border-radius:8px}
.journey__step b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.2rem;color:var(--orange-dk);margin-bottom:8px}
.journey__step p{font-size:15px;color:var(--ink-dim);line-height:1.6;max-width:26ch;margin:0 auto}
@media (max-width:768px){.journey{flex-direction:column;gap:32px}.journey::before{display:none}}

/* simple checkmark list, about.html closing section */
.checklist{list-style:none;margin:0;display:grid;gap:16px;max-width:60ch}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.55;color:var(--ink-dim)}
.checklist li::before{content:"\2713";flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}

/* --------------------------------- FAQ ------------------------------------ */
/* two-column masonry: CSS columns fill column 1 top-to-bottom before
   starting column 2, so 7 items split 4/3 without any markup change. */
.faq{column-count:2;column-gap:22px;max-width:none}
.faq details{
  background:#fff;border-radius:var(--r-card);
  padding:6px 26px;margin-bottom:16px;break-inside:avoid;
  box-shadow:0 10px 24px -18px rgba(11,53,120,.16);
}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-family:Fredoka,sans-serif;font-weight:600;font-size:17px;color:var(--blue-dk);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:4px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform 200ms var(--ease),top 200ms var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg);top:19px}
.faq__a{margin:0 0 22px;color:var(--ink-dim);font-size:16px;line-height:1.7}
.faq__a p{margin:0}
.faq__a p+p{margin-top:10px}
.faq__a ul{margin:8px 0 0;padding-left:20px}
.faq__a li{margin-bottom:6px}

/* ------------------------------- rate table -------------------------------- */
.ratetable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;font-size:15.5px}
.ratetable th,.ratetable td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
.ratetable thead th{
  background:var(--blue-dk);color:#fff;font-family:Fredoka,sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.03em;text-transform:uppercase;
}
.ratetable tbody tr:last-child td{border-bottom:0}
.ratetable tbody tr:nth-child(even){background:var(--blue-pale)}
.ratetable td:nth-child(4),.ratetable td:nth-child(5){font-family:Fredoka,sans-serif;font-weight:600;color:var(--blue-dk)}
.ratetable__wrap{overflow-x:auto;border-radius:var(--r-card)}
.ratenote{margin-top:16px;font-size:14.5px;color:var(--ink-dim)}

/* ------------------------ subject-by-level cards, classes.html ------------------------ */
.subjectgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.subjectcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px;box-shadow:0 14px 30px -20px rgba(11,53,120,.2)}
/* the icon source images are a colour circle centred on a white square,
   same asset used bare (no extra badge) as .why__item elsewhere on this
   page; cropping to a circle removes that square's white edge. */
.subjectcard img{width:52px;height:52px;object-fit:cover;border-radius:50%;display:block;margin-bottom:18px}
.subjectcard h3{font-size:1.05rem;color:var(--blue-dk);margin-bottom:8px}
.subjectcard p{font-size:14.5px;color:var(--ink-dim);line-height:1.6}
@media (max-width:1080px){.subjectgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.subjectgrid{grid-template-columns:1fr}}

/* ------------------------------ subject cards ------------------------------ */
.subjects{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.subject{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.subject h3{font-size:1.1rem;color:var(--blue-dk);margin-bottom:8px}
.subject p{font-size:15.5px;color:var(--ink-dim);line-height:1.6}

/* photo variant of .subject, about.html */
.subject--img{padding:0;overflow:hidden}
.subject--img img{width:100%;height:150px;object-fit:cover;display:block}
.subject--img .subject__body{padding:20px 24px 26px}

/* photo-topped method cards with a curved transition, about.html */
.methodcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.methodcard{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:0 14px 30px -18px rgba(11,53,120,.25)}
.methodcard__photo{position:relative;height:170px;overflow:hidden}
.methodcard__photo img{width:100%;height:100%;object-fit:cover;display:block}
.methodcard__photo::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-1px;height:30px;background:#fff;
  border-radius:50% 50% 0 0/100% 100% 0 0;
}
.methodcard__body{padding:6px 22px 26px}
.methodcard__body h3{font-size:1.05rem;color:var(--blue-dk);margin-bottom:8px}
.methodcard__body p{font-size:15px;color:var(--ink-dim);line-height:1.6}
@media (max-width:960px){.methodcards{grid-template-columns:1fr}}

/* numbered connected-line steps, second method group on about.html - deliberately
   distinct from the photo-card grid above so the two groups don't read as one repeated block */
.methodsteps{display:flex;gap:32px;margin-top:8px;position:relative}
.methodsteps::before{content:"";position:absolute;top:27px;left:4%;right:4%;height:2px;background:var(--blue-line);z-index:0}
.methodstep{flex:1;position:relative;z-index:1}
.methodstep__num{
  width:54px;height:54px;border-radius:50%;background:var(--blue-dk);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:Fredoka,sans-serif;
  font-weight:600;font-size:1.3rem;margin-bottom:18px;box-shadow:0 10px 20px -10px rgba(11,53,120,.5);
}
.methodstep h3{font-size:1.1rem;color:var(--blue-dk);margin-bottom:8px}
.methodstep p{font-size:14.5px;color:var(--ink-dim);line-height:1.6;margin:0;max-width:32ch}
@media (max-width:768px){.methodsteps{flex-direction:column;gap:28px}.methodsteps::before{display:none}}

/* stats section with a decorative illustration to the right, about.html */
.statsrow{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.statsrow--left{grid-template-columns:auto 1fr}
.statsrow__art{width:260px;flex:none}
.statsrow__art img{width:100%;height:auto;display:block}
@media (max-width:1080px){
  .statsrow,.statsrow--left{grid-template-columns:1fr;text-align:center}
  .statsrow__art{width:200px;margin:0 auto}
}

/* -------------------------------- why-list ---------------------------------*/
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why__item{padding:24px}
.why__item img{width:48px;height:48px;border-radius:14px;margin-bottom:14px}
.why__item h3{font-size:1.05rem;color:var(--blue-dk);margin-bottom:8px}
.why__item p{font-size:15px;color:var(--ink-dim);line-height:1.6}

/* ---------------- "why choose" featured layout, classes.html ---------------- */
/* one technique promoted into a large dark panel, the other two as smaller
   supporting chips beside it - asymmetric on purpose, so this section doesn't
   read as a third identical card grid next to .subjectgrid and .ratetable. */
.whyfeature{display:grid;grid-template-columns:52% 1fr;gap:32px;align-items:stretch;margin-top:8px}
.whyfeature__main{background:var(--blue-dk);border-radius:var(--r-card);padding:36px 32px;color:#fff;display:flex;flex-direction:column}
.whyfeature__main h3{font-size:1.3rem;color:#fff;margin-bottom:10px}
.whyfeature__main p{font-size:15.5px;color:rgba(255,255,255,.88);line-height:1.65;margin:0 0 28px}
.whyfeature__art{width:80%;max-width:300px;height:auto;margin-top:auto;align-self:center;display:block}
.whyfeature__side{display:grid;gap:20px}
.whyfeature__chip{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:0 14px 30px -20px rgba(11,53,120,.2)}
/* explicit width+height (not just the img attributes) so flex's default
   stretch can't override height:auto and squash the circle into a sliver */
.whyfeature__chip img{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover}
.whyfeature__chip b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:1rem;color:var(--blue-dk);margin-bottom:6px}
.whyfeature__chip p{font-size:14px;color:var(--ink-dim);line-height:1.55;margin:0}
@media (max-width:900px){.whyfeature{grid-template-columns:1fr}}

/* -------------------------------- proof grid -------------------------------- */
.proof__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.proof__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(11,53,120,.28)}
.proof__card img{width:100%;height:auto;display:block;background:var(--blue-pale)}
.proof__cap{padding:14px 16px}
.proof__cap b{display:block;font-family:Fredoka,sans-serif;font-size:14.5px;color:var(--blue-dk);margin-bottom:3px}
.proof__cap span{display:block;font-size:13px;color:var(--ink-dim);line-height:1.4}

/* ------------------------------ recommendation cards ------------------------------ */
.reclist{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rec{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.rec p{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0}
.rec cite{display:block;margin-top:14px;font-style:normal;font-family:Fredoka,sans-serif;font-weight:600;font-size:14px;color:var(--blue-dk)}

@media (max-width:1080px){
  .subjects{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .reclist{grid-template-columns:1fr}
  .faq{column-count:1}
}
@media (max-width:768px){
  .pagehero{padding:40px 0 52px}
  .pagehero__mascot{display:none}
  .faq details{padding:4px 18px}
  .faq summary{padding:16px 30px 16px 0;font-size:16px}
  .ratetable{font-size:14px}
  .ratetable th,.ratetable td{padding:12px 12px}
  .proof__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ---------------------------- recommendation trio (3 explanation + proof, one row) ---------------------------- */
.recrows{display:flex;flex-direction:column;gap:28px}
.recrow{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);padding:32px;
  box-shadow:0 14px 30px -22px rgba(11,53,120,.18)}
.recrow .proof__card{margin:0}
.recrow__icon{width:56px;height:56px;border-radius:50%;margin-bottom:16px;display:block}
.recrow__banner{display:inline-block;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.15rem;
  color:var(--blue-dk);margin:0 0 14px;line-height:1.3}
.recrow__lede{font-size:15.5px;color:var(--ink-dim);line-height:1.6;margin:0 0 22px}
.recrow__sub{font-family:Fredoka,sans-serif;font-weight:600;color:var(--blue-dk);font-size:1rem;margin:0 0 12px}
.recrow ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.recrow li{font-size:15px;color:var(--ink-dim);line-height:1.55;padding-left:26px;position:relative}
.recrow li::before{content:'';position:absolute;left:0;top:6px;width:14px;height:14px;background:var(--orange);border-radius:50%}
.recrow li b{color:var(--ink);font-family:'Nunito Sans',sans-serif;font-weight:700}
@media (max-width:768px){.recrow{grid-template-columns:1fr;padding:24px}.recrow .proof__card{max-width:280px;margin:0 auto}}

/* ---------------------------- view-more reveal + autoplay carousel ---------------------------- */
.viewmore-wrap{text-align:center;margin-top:44px}
.recc-shelf{margin-top:36px}
.recc-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 4px 16px;scrollbar-width:none}
.recc-track::-webkit-scrollbar{display:none}
.recc-track .proof__card{flex:0 0 220px;scroll-snap-align:start}

/* ---------------------------- appreciation wall (infinite vertical testimonial columns) ---------------------------- */
.testiwall{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-height:760px;overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent)}
.testiwall__col{overflow:hidden}
.testiwall__col:hover .testiwall__track{animation-play-state:paused}
.testiwall__track{display:flex;flex-direction:column;gap:20px;animation:testiscroll 30s linear infinite}
.testiwall__col--rev .testiwall__track{animation-direction:reverse}
.testiwall__col--slow .testiwall__track{animation-duration:38s}
.testiwall__col--fast .testiwall__track{animation-duration:24s}
@keyframes testiscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.testicard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:0 0 22px;overflow:hidden;
  box-shadow:0 14px 30px -22px rgba(11,53,120,.22)}
.testicard__img{width:100%;height:auto;display:block;background:var(--blue-pale)}
.testicard blockquote{margin:16px 22px 20px;font-size:14.5px;line-height:1.6;color:var(--ink)}
@media (max-width:1080px){.testiwall{grid-template-columns:1fr 1fr}.testiwall__col--fast{display:none}}
@media (max-width:768px){.testiwall{grid-template-columns:1fr;max-height:620px}.testiwall__col--rev,.testiwall__col--slow{display:none}}
@media (prefers-reduced-motion:reduce){.testiwall__track{animation:none}.testiwall{max-height:none;overflow:visible;mask-image:none;-webkit-mask-image:none}.testiwall__col{display:contents}}

/* ---------------------------- story cards (real stories, on a dark section) ---------------------------- */
.storycards{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.storycard{flex:1 1 300px;max-width:340px;background:#fff;border-radius:var(--r-card);padding:30px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.45)}
.storycard__mark{display:block;width:40px;height:auto;color:var(--blue);margin-bottom:16px}
.storycard__stars{display:block;color:var(--orange);letter-spacing:3px;font-size:16px;margin-bottom:16px}
.storycard__quote{color:var(--ink-dim);font-size:15px;line-height:1.65;margin:0 0 22px}
.storycard__who{display:flex;align-items:center;gap:12px}
.storycard__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.storycard__name{font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink);font-size:15px;margin:0}
.storycard__role{font-size:13px;color:var(--ink-dim);margin:0}