/* ============================================================
   MathsWithMrD — GCSE Maths Summer Camp
   ============================================================ */

:root{
  --ink:      #0F2742;
  --ink-soft: #4E6280;
  --blue:     #2F6BFF;
  --blue-deep:#1741B6;
  --yellow:   #FFC64B;
  --yellow-dk:#EDAF2A;

  --cream: #FFF6E9;
  --mint:  #E1F2E9;
  --sky:   #E9F1FF;
  --white: #FFFFFF;

  --radius:   28px;
  --radius-lg:48px;
  --shadow:   0 10px 30px rgba(15,39,66,.07);
  --shadow-lg:0 22px 50px rgba(15,39,66,.12);

  --wrap: 1120px;
  --pad:  clamp(64px, 8vw, 110px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  /* clip (not hidden) so the decorative hero blob can bleed past the
     edge without creating a horizontal scrollbar or breaking the sticky nav */
  overflow-x:clip;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

/* ---------- Type ---------- */
h1,h2,h3{ line-height:1.15; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem,5.6vw,4rem); font-weight:800; }
h2{ font-size:clamp(1.85rem,3.6vw,2.85rem); }
h3{ font-size:1.16rem; font-weight:700; }
p{ margin:0 0 1rem; }

.lede{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--ink-soft); max-width:52ch; }
.sub{ color:var(--ink-soft); max-width:56ch; font-size:1.02rem; }
.center{ text-align:center; }
.center.sub, .sub.center{ margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top:2.6rem; }

.hl{ color:var(--blue); }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink-soft);
  margin:0 0 .9rem;
}
.light{ color:#fff; }
.eyebrow.light{ color:rgba(255,255,255,.72); }
.sub.light{ color:rgba(255,255,255,.82); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap-narrow{ max-width:780px; }

.band{
  position:relative;
  padding-block:var(--pad);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin-top:calc(var(--radius-lg) * -1);
  padding-top:calc(var(--pad) + var(--radius-lg));
}
.band:first-of-type{ margin-top:0; padding-top:calc(var(--pad) + 40px); border-radius:0; }

/* stack each band above the previous so the rounded top nests cleanly */
main .band:nth-of-type(1){ z-index:1; }
main .band:nth-of-type(2){ z-index:2; }
main .band:nth-of-type(3){ z-index:3; }
main .band:nth-of-type(4){ z-index:4; }
main .band:nth-of-type(5){ z-index:5; }
main .band:nth-of-type(6){ z-index:6; }
main .band:nth-of-type(7){ z-index:7; }
main .band:nth-of-type(8){ z-index:8; }
main .band:nth-of-type(9){ z-index:9; }
main .band:nth-of-type(10){ z-index:10; }

.band-cream{ background:var(--cream); }
.band-white{ background:var(--white); }
.band-mint { background:var(--mint); }
.band-sky  { background:var(--sky); }
.band-blue { background:var(--blue); color:#fff; }

section[id]{ scroll-margin-top:96px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.97rem;
  padding:.86rem 1.7rem;
  border-radius:999px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{ background:var(--yellow); color:var(--ink); box-shadow:0 8px 18px rgba(237,175,42,.35); }
.btn-primary:hover{ background:var(--yellow-dk); box-shadow:0 12px 24px rgba(237,175,42,.42); }

.btn-outline{ background:transparent; color:var(--ink); border-color:rgba(15,39,66,.18); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#1b3a5e; }

.btn-text{ color:var(--ink); padding:.86rem .4rem; font-weight:600; text-decoration:none; }
.btn-text:hover{ color:var(--blue); }

.btn-sm{ padding:.6rem 1.25rem; font-size:.9rem; }
.btn-lg{ padding:1.05rem 2.4rem; font-size:1.05rem; }
.block{ display:flex; width:100%; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  transition:box-shadow .2s ease;
}
.nav.scrolled{ box-shadow:0 4px 20px rgba(15,39,66,.08); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }

.logo{
  font-weight:800; font-size:1.22rem; letter-spacing:-.03em;
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:baseline;
}
.logo span{ color:var(--blue); }
.logo .dot{ width:7px; height:7px; border-radius:50%; background:var(--yellow); margin-left:3px; display:inline-block; }
.logo-light{ color:#fff; }
.logo-light span{ color:var(--yellow); }

.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
  color:var(--ink); text-decoration:none; font-size:.94rem; font-weight:500;
  transition:color .16s ease;
}
.nav-links a:hover{ color:var(--blue); }
.nav-links .nav-cta{ color:var(--ink); }

.burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:2rem 0 1.8rem; }

.hero-ticks{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; }
.hero-ticks li{
  font-size:.88rem; color:var(--ink-soft); font-weight:500;
  display:flex; align-items:center; gap:.45rem;
}
.hero-ticks li::before{
  content:""; width:16px; height:16px; flex:none; border-radius:50%;
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

.hero-visual{ position:relative; display:grid; place-items:center; min-height:400px; }

.blob{
  position:absolute; inset:auto; width:106%; aspect-ratio:1/.92;
  background:linear-gradient(150deg,#BFD7FF,#8FB6FF 55%,#6E9CFF);
  border-radius:58% 42% 46% 54% / 52% 48% 52% 48%;
  filter:blur(.2px);
  animation:morph 14s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{ border-radius:58% 42% 46% 54% / 52% 48% 52% 48%; }
  50%    { border-radius:44% 56% 58% 42% / 45% 55% 45% 55%; }
}

.card-schedule{
  --chip-off:-24px;            /* how far the chips hang off the card's edge */
  position:relative; z-index:2;
  background:#fff; border-radius:var(--radius);
  padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-lg);
  width:min(340px,100%);
}
.cs-head{
  display:flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.98rem; margin-bottom:1.1rem;
}
.cs-dot{ width:9px; height:9px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.16); }

.cs-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 0; border-top:1px solid rgba(15,39,66,.08);
}
.cs-time{ font-weight:600; font-size:.93rem; }
.cs-tier{ font-size:.78rem; font-weight:600; padding:.28rem .7rem; border-radius:999px; }
.tier-foundation{ background:var(--mint); color:#166534; }
.tier-higher{ background:var(--sky); color:var(--blue-deep); }

.cs-foot{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid rgba(15,39,66,.08);
  font-size:.82rem; color:var(--ink-soft); text-align:center;
}

.chip{
  position:absolute; z-index:3;
  width:52px; height:52px; display:grid; place-items:center;
  background:#fff; border-radius:16px;
  font-weight:700; font-size:1.1rem; color:var(--blue);
  box-shadow:var(--shadow);
  animation:float 5s ease-in-out infinite;
}
/* pinned to the card's corners, straddling its edge (--chip-off = overhang) */
.chip-1{ top:var(--chip-off);    left:var(--chip-off);  }
.chip-2{ bottom:var(--chip-off); left:var(--chip-off);  animation-delay:-1.6s; }
.chip-3{ top:var(--chip-off);    right:var(--chip-off); animation-delay:-3.2s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.badge-weeks{
  position:absolute; z-index:3; bottom:-18px; right:-18px;
  background:var(--yellow); color:var(--ink);
  padding:.55rem 1rem; border-radius:999px;
  font-size:.82rem; font-weight:600;
  box-shadow:var(--shadow);
}
.badge-weeks b{ font-size:1rem; }

/* ---------- Facts strip ---------- */
.strip{ --pad:clamp(44px,5vw,64px); }
.facts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
  margin-top:1.6rem;
}
.fact{
  background:#fff; border-radius:18px; padding:1rem 1.6rem;
  min-width:132px; text-align:center; box-shadow:var(--shadow);
}
.fact b{ display:block; font-size:1.7rem; font-weight:800; color:var(--blue); line-height:1.1; }
.fact span{ font-size:.82rem; color:var(--ink-soft); }

/* ---------- Cards ---------- */
.cards-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  margin-top:3rem;
}
.card{
  background:#fff; border-radius:var(--radius);
  padding:2rem 1.7rem; text-align:center;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,39,66,.05);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card p{ color:var(--ink-soft); font-size:.93rem; margin:0; }

.ico{
  width:56px; height:56px; margin:0 auto 1.1rem;
  display:grid; place-items:center;
  background:var(--sky); color:var(--blue);
  border-radius:18px;
}
.ico svg{ width:26px; height:26px; }

.card-plain{ text-align:left; }
.pill{
  display:inline-block; font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.3rem .7rem; border-radius:999px; margin-bottom:.9rem;
}
.pill-blue{ background:var(--sky); color:var(--blue-deep); }
.pill-mint{ background:var(--mint); color:#166534; }
.pill-yellow{ background:#FFF0CC; color:#8A6100; }

/* includes list */
.includes{
  list-style:none; padding:0; margin:3rem auto 0; max-width:820px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem 2rem;
}
.includes li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.95rem; font-weight:500;
}
.includes li::before{
  content:""; width:20px; height:20px; flex:none; margin-top:2px; border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- Timetable ---------- */
.tt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:3rem; }
.tt-card{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius);
  padding:2rem 1.8rem;
  backdrop-filter:blur(4px);
}
.tt-time{
  display:inline-block; background:var(--yellow); color:var(--ink);
  font-weight:700; font-size:.85rem;
  padding:.35rem .9rem; border-radius:999px; margin-bottom:1rem;
}
.tt-card h3{ color:#fff; font-size:1.35rem; }
.tt-card p{ color:rgba(255,255,255,.85); font-size:.94rem; margin:0; }
.tt-note{ text-align:center; margin-top:2rem; color:rgba(255,255,255,.8); font-size:.92rem; }

/* ---------- Pricing ---------- */
.price-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;
  max-width:800px; margin:3rem auto 0;
}
.price-card{
  background:#fff; border:2px solid rgba(15,39,66,.09);
  border-radius:var(--radius); padding:2.2rem 1.9rem;
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
}
.price-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.price-card.featured{ border-color:var(--blue); box-shadow:var(--shadow-lg); }

.tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.32rem .9rem; border-radius:999px; white-space:nowrap;
}
.price{ font-size:3.1rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
.price .cur{ font-size:1.5rem; font-weight:700; vertical-align:super; margin-right:2px; }
.price-sub{ color:var(--ink-soft); font-size:.9rem; margin:.4rem 0 1.4rem; }

.ticks{ list-style:none; padding:0; margin:0 0 1.8rem; display:grid; gap:.6rem; }
.ticks li{
  display:flex; align-items:flex-start; gap:.55rem;
  font-size:.92rem; color:var(--ink-soft);
}
.ticks li::before{
  content:""; width:18px; height:18px; flex:none; margin-top:2px; border-radius:50%;
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.price-card .btn{ margin-top:auto; }

.support-box{
  max-width:800px; margin:2.4rem auto 0;
  background:var(--cream); border-radius:var(--radius);
  padding:2rem 2rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.support-box h3{ margin-bottom:.4rem; }
.support-box p{ margin:0; color:var(--ink-soft); font-size:.94rem; max-width:52ch; }
.support-box .btn{ flex:none; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about-photo img,
.photo-ph{
  width:100%; aspect-ratio:1/1; border-radius:var(--radius);
  object-fit:cover; box-shadow:var(--shadow-lg);
}
.photo-ph{
  background:#fff; display:grid; place-content:center; gap:.6rem; justify-items:center;
  color:#B7C4D6; border:2px dashed rgba(15,39,66,.14);
}
.photo-ph svg{ width:64px; height:64px; }
.photo-ph span{ font-size:.85rem; font-weight:500; }
.about-copy h2{ margin-bottom:.2rem; }
.about-copy .lede{ color:var(--blue); font-weight:600; margin-bottom:1.4rem; }
.about-copy p{ color:var(--ink-soft); font-size:.98rem; }
.about-copy .btn{ margin-top:1.2rem; }

/* ---------- FAQ ---------- */
.faq{ margin-top:2.6rem; display:grid; gap:.8rem; }
.faq details{
  background:#fff; border-radius:18px; padding:0 1.5rem;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,39,66,.05);
}
.faq summary{
  list-style:none; cursor:pointer;
  padding:1.15rem 2rem 1.15rem 0;
  font-weight:600; font-size:1rem;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:0; top:50%;
  width:12px; height:12px; margin-top:-6px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq details p{
  margin:0; padding:0 0 1.3rem; color:var(--ink-soft); font-size:.94rem; max-width:62ch;
}

/* ---------- Final CTA ---------- */
.final .btn{ margin-top:1.6rem; }
.fineprint{ margin-top:1rem; font-size:.85rem; color:rgba(255,255,255,.75); }

/* ---------- Footer ---------- */
.footer{
  background:var(--ink); color:#fff;
  padding-block:3rem 2.4rem;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin-top:calc(var(--radius-lg) * -1);
  padding-top:calc(3rem + var(--radius-lg));
  position:relative; z-index:20;
}
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem; }
.footer-links a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:.9rem; }
.footer-links a:hover{ color:var(--yellow); }
.copy{ margin:0; font-size:.82rem; color:rgba(255,255,255,.5); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:940px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-actions, .hero-ticks{ justify-content:center; }
  .hero-visual{ order:-1; min-height:360px; padding-block:20px; }
  /* keep the blob hugging the card instead of stretching the full width */
  .blob{ width:min(106%,420px); }
  .about-grid{ grid-template-columns:1fr; text-align:center; }
  .about-photo{ max-width:300px; margin-inline:auto; }
  .about-copy .lede{ margin-inline:auto; }
  .cards-3{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .card-plain{ text-align:center; }
}

@media (max-width:760px){
  .nav-links{
    position:absolute; top:72px; left:0; right:0;
    background:#fff; flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem 24px 1.4rem;
    box-shadow:0 12px 24px rgba(15,39,66,.1);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.85rem 0; border-bottom:1px solid rgba(15,39,66,.07); }
  .nav-links .nav-cta{ margin-top:.9rem; border-bottom:0; justify-content:center; }
  .burger{ display:flex; }

  .tt-grid, .price-grid, .includes{ grid-template-columns:1fr; }
  .includes{ max-width:420px; }
  .support-box{ flex-direction:column; text-align:center; }
  .support-box p{ margin-inline:auto; }
}

/* Narrow screens: smaller chips, and less overhang so they stay on screen
   once the card grows to nearly the full viewport width. */
@media (max-width:480px){
  .chip{ width:44px; height:44px; font-size:1rem; border-radius:14px; }
  .card-schedule{ --chip-off:-16px; }
  .badge-weeks{ bottom:-14px; right:-14px; }
}

@media (max-width:420px){
  .facts{ gap:.6rem; }
  .fact{ min-width:104px; padding:.8rem 1rem; }
  .fact b{ font-size:1.4rem; }
  .btn{ width:100%; }
  .btn-text{ width:auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}