/* ============ VARIABLES ============ */
:root{
  --black: #0a0505;
  --near-black: #050303;
  --maroon-900: #1c0006;
  --maroon-800: #2b0008;
  --maroon-700: #3a0010;
  --maroon-card: #33000d;
  --maroon-heading: #6b1029;
  --maroon-heading-2: #7a1533;
  --cream: #fdf6ee;
  --cream-2: #fff8f2;
  --pink: #e0245e;
  --pink-2: #c2185b;
  --pink-light: #ff8fb3;
  --gold: #f0e08c;
  --text-dark: #2a2323;
  --text-muted: #8a7b78;
  --text-light: #f6ecec;
  --text-light-muted: #d9c3c9;
  --border-cream: #efd9d4;
  --radius: 16px;
  --maxw: 1180px;
  font-size: 16px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--text-dark);
  background:var(--cream);
  overflow-x:clip; /* "hidden" here made <body> a scroll box, which stopped the header from sticking */
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;font-weight:700;}
p{margin:0;}
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
section{position:relative;}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:700;
  color:var(--maroon-heading);
  margin-bottom:10px;
}
.eyebrow-light{color:var(--pink-light);}

h2{
  font-size:2rem;
  color:#1c1414;
  margin-bottom:14px;
  letter-spacing:-.01em;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:14px 26px;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:linear-gradient(135deg,#ff5f96,var(--pink-2));
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(224,36,94,.65);
}
.btn-primary:hover{box-shadow:0 14px 28px -8px rgba(224,36,94,.8);}
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.btn-ghost .play-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
}
.btn-outline-sm{
  border-color:var(--pink);
  color:var(--pink);
  padding:10px 20px;
  font-size:.72rem;
}
.header-cta.btn-outline-sm{color:#fff;border-color:rgba(255,255,255,.5);}
.btn-block{width:100%;justify-content:center;}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(5,3,3,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:74px;
  gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-icon{width:32px;height:32px;color:#fff;flex:none;}
.brand-icon svg{width:100%;height:100%;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;color:#fff;}
.brand-text strong{font-size:1rem;letter-spacing:.02em;}
.brand-text small{font-size:.5rem;letter-spacing:.22em;color:#d8b9c2;}

.main-nav{display:flex;align-items:center;gap:28px;flex:1;justify-content:center;}
.main-nav a{
  font-size:.82rem;font-weight:500;color:#cfc3c3;
  position:relative;padding-bottom:6px;
}
.main-nav a.active{color:#fff;}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--pink);border-radius:2px;
}
.main-nav a:hover{color:#fff;}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{width:22px;height:2px;background:#fff;border-radius:2px;}

/* ============ HERO ============ */
.hero{
  background:
    radial-gradient(ellipse 700px 600px at 88% 55%, rgba(120,20,55,.35), transparent 65%),
    var(--near-black);
  color:#fff;
  padding:64px 0 40px;
  overflow:visible;
}
.hero-cave{
  position:absolute;left:0;top:0;bottom:0;width:30%;min-width:180px;
  overflow:hidden;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, #000 68%, transparent 100%);
  mask-image:linear-gradient(to right, #000 68%, transparent 100%);
}
.hero-cave img{width:100%;height:100%;object-fit:cover;object-position:left center;}
.hero-fx{position:absolute;inset:0;pointer-events:none;z-index:0;}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffd1e2;box-shadow:0 0 6px 1px rgba(255,209,226,.8);}
.s1{top:8%;left:63%;} .s2{top:14%;left:78%;} .s3{top:22%;left:70%;}
.s4{top:35%;left:88%;} .s5{top:50%;left:60%;} .s6{top:65%;left:82%;}
.s7{top:75%;left:68%;} .s8{top:5%;left:92%;}
.eq{position:absolute;font-family:Georgia,serif;font-style:italic;color:#f2a9c2;opacity:.8;font-size:1.1rem;}
.eq1{top:9%;right:6%;} .eq2{top:24%;right:3%;font-size:1rem;} .eq3{top:37%;right:8%;font-size:.95rem;display:flex;align-items:center;gap:4px;}
.eq4{top:11%;left:56%;font-size:.95rem;}
.frac{display:inline-flex;flex-direction:column;font-size:.7em;text-align:center;line-height:1.1;border-top:1px solid #f2a9c2;padding-top:1px;}
.wave{position:absolute;top:58%;right:2%;opacity:.8;}
.orbit-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px 3px rgba(224,36,94,.7);}
.o1{top:45%;right:14%;} .o2{top:70%;right:22%;width:4px;height:4px;}
.mini-icon{position:absolute;width:30px;height:30px;color:#f2a9c2;opacity:.8;}
.icon-atom{top:37%;left:55%;}
.topic-icon{position:absolute;width:46px;height:46px;color:#f2a9c2;opacity:.8;}
.topic-incline{top:6%;left:74%;}
.topic-circuit{top:51%;left:49%;}
.topic-magnet{top:72%;left:49%;}
.mini-galaxy{
  position:absolute;top:47%;right:5%;width:54px;height:54px;
  background:
    radial-gradient(ellipse 60% 22% at 50% 50%, rgba(255,255,255,.9), rgba(255,180,210,.5) 40%, transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(224,36,94,.9), rgba(120,20,60,.4) 45%, transparent 70%);
  border-radius:50%;
  transform:rotate(-25deg);
  filter:blur(.3px);
}
.mini-galaxy::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 18px 6px rgba(224,36,94,.35);
}

.hero-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  min-height:520px;
}
.hero-copy{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding-left:30%;
  width:100%;
}
.hero-wordmark{max-width:min(420px,100%);margin:0 auto 18px;}
.hero-tagline{
  font-size:1.3rem;font-weight:700;line-height:1.35;margin-bottom:26px;
}
.hl-gold{color:var(--gold);}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px;justify-content:center;}

.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr); /* equal columns, sized to the widest stat */
  border:1px solid rgba(224,36,94,.35);
  border-radius:14px;
  overflow:hidden;
  max-width:560px;
  margin:0 auto;
  background:rgba(60,5,20,.25);
}
.hero-stat{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 14px;min-width:0;
  border-right:1px solid rgba(224,36,94,.3);
  text-align:center;
}
.hero-stat:last-child{border-right:none;}
.hs-icon{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:rgba(224,36,94,.15);color:var(--pink);
  display:flex;align-items:center;justify-content:center;
}
.hs-icon svg{width:18px;height:18px;}
.hero-stat strong{display:block;font-size:1rem;}
.hero-stat em{display:block;font-style:normal;font-size:.68rem;color:#c9adb4;white-space:nowrap;}

.hero-photo{position:absolute;z-index:1;right:6%;bottom:0;width:34%;max-width:380px;}
.hero-photo img{
  width:100%;display:block;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.4));
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 72%, transparent 96%);
}

/* ============ ABOUT ============ */
.about{background:var(--cream);padding:70px 0;}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;}
.about-media{position:relative;}
.about-wordmark{
  height:56px;width:230px;margin-bottom:14px;
  background-color:var(--maroon-heading);
  -webkit-mask-image:url('../img/logo-wordmark-transparent.png');
  mask-image:url('../img/logo-wordmark-transparent.png');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
}
.about-photo{
  border-radius:var(--radius);
  overflow:hidden;
  max-width:340px;
  box-shadow:0 20px 40px -18px rgba(50,0,15,.35);
}
.about-card{
  background:var(--cream-2);
  border:1px solid var(--border-cream);
  border-radius:22px;
  padding:38px 40px;
}
.about-card h2{color:var(--maroon-heading);font-size:2.1rem;margin-bottom:16px;}
.about-text{color:#5a4d4c;line-height:1.7;font-size:.98rem;margin-bottom:22px;}
.script-line{
  font-family:'Caveat',cursive;
  font-size:1.5rem;
  color:var(--maroon-heading);
  font-weight:700;
}
.script-line .dot{color:var(--pink);margin:0 6px;}

/* ============ TEACHING METHOD ============ */
.teaching{background:var(--cream);padding:40px 0 80px;}
.teaching-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;}
.teaching-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:260px;}
.big-num{
  position:absolute;left:0;top:0;
  font-size:7rem;font-weight:800;color:#000;opacity:.05;line-height:1;
}
.sketch{width:100%;max-width:300px;position:relative;z-index:1;}
.teaching-copy h2{color:var(--maroon-heading);font-size:1.9rem;}
.teaching-copy p.eyebrow + h2 + p{color:#5a4d4c;line-height:1.7;margin-bottom:26px;max-width:480px;}

.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.method-card{
  background:var(--cream-2);
  border:1px solid var(--border-cream);
  border-radius:14px;
  padding:22px 12px;
  text-align:center;
}
.m-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#ffe1ec,#ffc7dc);
  color:var(--pink-2);margin-bottom:12px;
}
.m-icon svg{width:22px;height:22px;}
.method-card p{font-size:.8rem;color:#6b5c5a;line-height:1.4;}
.method-card strong{color:var(--text-dark);}

/* ============ OUR CLASSES ============ */
.classes{background:var(--cream);padding:20px 0 80px;}
.classes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px;}
.class-card{
  background:radial-gradient(ellipse at top, #4a0016, var(--maroon-card) 65%);
  border:1px solid #55051f;
  border-radius:18px;
  padding:34px 22px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.class-card::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(224,36,94,.45), transparent 70%);
}
.c-icon{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  color:#ffb8cf;margin-bottom:18px;
}
.c-icon svg{width:24px;height:24px;}
.class-card h3{position:relative;z-index:1;font-size:1.05rem;margin-bottom:8px;}
.class-card p{position:relative;z-index:1;font-size:.82rem;color:#e3b9c6;line-height:1.5;}

/* ============ SCHEDULE ============ */
.schedule{background:var(--cream);padding:20px 0 80px;}
.schedule-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px;}
.batch-card{
  background:var(--cream-2);
  border:1px solid var(--border-cream);
  border-radius:16px;
  padding:22px 16px;
  text-align:center;
}
.b-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:#ffe1ec;margin-bottom:12px;font-size:1rem;
}
.batch-card h4{font-size:.92rem;margin-bottom:8px;}
.batch-card p{font-size:.76rem;color:#7a6b69;line-height:1.5;margin-bottom:10px;}
.b-loc{font-size:.72rem;color:var(--pink-2);font-weight:600;}

/* ============ WHY CHOOSE ============ */
.why{
  background:
    radial-gradient(ellipse 700px 500px at 85% 20%, rgba(224,36,94,.18), transparent 60%),
    radial-gradient(ellipse 600px 500px at 10% 80%, rgba(224,36,94,.14), transparent 60%),
    linear-gradient(160deg, #22000a, #150006);
  padding:60px 0;
  text-align:center;
  color:#fff;
}
.why .eyebrow, .why h2{text-align:center;}
.why h2{color:#fff;margin-bottom:30px;font-size:1.8rem;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.why-card{
  border:1px solid rgba(224,36,94,.3);
  border-radius:16px;
  padding:22px 14px;
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.03);
  text-align:left;
}
.w-icon{
  width:46px;height:46px;flex:none;border-radius:50%;
  background:rgba(224,36,94,.18);color:var(--pink-light);
  display:flex;align-items:center;justify-content:center;
}
.w-icon svg{width:22px;height:22px;}
.why-card strong{display:block;font-size:1.3rem;}
.why-card em{font-style:normal;font-size:.72rem;color:#d9b7c0;}

/* ============ YOUTUBE ============ */
.yt{background:var(--cream);padding:80px 0;}
.yt-grid{display:grid;grid-template-columns:1fr 1.1fr .9fr;gap:34px;align-items:start;}
.yt-eyebrow{display:flex;align-items:center;gap:8px;color:var(--maroon-heading);}
.yt-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:5px;background:#e0245e;color:#fff;font-size:.6rem;
}
.yt-copy h2{color:#1c1414;font-size:1.7rem;}
.yt-copy p{color:#5a4d4c;line-height:1.6;margin-bottom:22px;max-width:340px;}

.yt-thumb{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/10;}
.yt-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.yt-thumb-a img{filter:saturate(1.3) contrast(1.1) brightness(.75) hue-rotate(-8deg);}
.yt-title-ov{
  position:absolute;left:16px;top:16px;color:#fff;font-weight:700;font-size:1.3rem;line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.yt-dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.75);color:#fff;font-size:.68rem;padding:2px 7px;border-radius:5px;}
.yt-caption{margin-top:12px;font-size:.82rem;color:#5a4d4c;}
.yt-caption strong{display:block;color:#1c1414;margin-bottom:2px;}

.yt-list-title{font-weight:600;color:#1c1414;margin-bottom:14px;font-size:.9rem;}
.yt-item{display:flex;gap:12px;margin-bottom:16px;align-items:center;}
.yt-item .yt-thumb{width:96px;aspect-ratio:16/10;flex:none;border-radius:8px;}
.yt-thumb-b img{filter:saturate(1.4) contrast(1.2) brightness(.7) hue-rotate(-15deg);}
.yt-thumb-c img{filter:saturate(1.6) contrast(1.15) brightness(.65) hue-rotate(190deg);}
.yt-thumb-d img{filter:saturate(1.7) contrast(1.15) brightness(.7) hue-rotate(260deg);}
.yt-dur.sm{font-size:.58rem;padding:1px 5px;right:5px;bottom:5px;}
.yt-topic{
  position:absolute;left:5px;top:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(253,246,238,.92);box-shadow:0 1px 4px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.yt-topic svg{width:15px;height:15px;}
.yt-item strong{
  display:block;font-size:.82rem;line-height:1.3;color:#1c1414;font-weight:600;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  transition:color .18s ease;
}
.yt-item small{color:#9a8b89;font-size:.7rem;}

/* Playable thumbnails */
.yt-thumb[data-video], .yt-item[data-video]{cursor:pointer;}
.yt-item[data-video]:hover strong{color:var(--pink-2);}
.yt-play{
  padding:0;border:0;background:none;cursor:pointer;line-height:0;border-radius:50%;
  transition:transform .2s ease, filter .2s ease;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
.yt-play svg{width:44px;height:44px;}
.yt-play-sm svg{width:24px;height:24px;}
.yt-thumb:hover .yt-play, .yt-item:hover .yt-play, .yt-play:focus-visible{transform:translate(-50%,-50%) scale(1.12);}
.yt-play:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.yt-thumb.is-playing{aspect-ratio:16/9;}
.yt-thumb.is-playing > :not(iframe){display:none;}
.yt-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Pop-up player for the smaller videos */
.yt-modal{
  width:100%;height:100%;max-width:100%;max-height:100%;
  margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;
}
.yt-modal::backdrop{background:rgba(14,0,5,.92);backdrop-filter:blur(6px);}
.yt-modal-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:64px 24px 32px;}
.yt-modal-box{width:min(100%, 1000px, calc((100vh - 170px) * 16 / 9));}
.yt-modal-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 30px 70px -20px rgba(0,0,0,.85);}
.yt-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt-modal-title{margin-top:14px;font-weight:600;font-size:.95rem;color:var(--text-light);}
.yt-modal-close{position:absolute;top:16px;right:16px;font-size:1.5rem;}

/* ============ TESTIMONIALS (section hidden for now) ============ */
.testimonials{
  background:linear-gradient(160deg, #22000a, #150006);
  padding:70px 0;color:#fff;
}
.test-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;}
.test-head h2{color:#fff;margin-bottom:0;font-size:1.7rem;}
.test-arrows{display:flex;gap:10px;}
.test-arrows button{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;color:#fff;cursor:pointer;font-size:1rem;
}
.test-arrows button:hover{background:rgba(224,36,94,.25);}

.test-viewport{overflow:hidden;}
.test-track{display:flex;gap:20px;}
.test-track .test-card{flex:1 1 0;min-width:0;}
.test-card{
  background:var(--cream-2);
  border-radius:18px;
  padding:26px;
  color:var(--text-dark);
}
.test-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#5a3d45;flex:none;font-size:.85rem;
}
.test-who{flex:1;line-height:1.3;}
.test-who strong{display:block;font-size:.9rem;}
.test-who small{color:#9a8b89;font-size:.72rem;}
.grade{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;color:#fff;flex:none;
}
.grade-a{background:var(--pink);}
.grade-b{background:#c2185b;}
.test-card p{font-size:.86rem;line-height:1.6;color:#5a4d4c;font-style:italic;}
.test-dots{display:flex;justify-content:center;gap:6px;margin-top:28px;}
.test-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;}
.test-dots span.active{background:var(--pink);width:20px;border-radius:4px;}

/* ============ STUDENT REVIEWS: HANDWRITTEN NOTES WALL ============ */
.notes-wall{
  --note-h:220px;
  --note-gap:34px;
  background:
    radial-gradient(ellipse 700px 420px at 88% 0%, rgba(224,36,94,.2), transparent 62%),
    radial-gradient(ellipse 600px 420px at 6% 100%, rgba(224,36,94,.14), transparent 62%),
    linear-gradient(160deg, #22000a, #150006);
  padding:70px 0 50px;
  color:#fff;
  overflow:hidden;
}
.nw-fx{position:absolute;inset:0;pointer-events:none;}
.nw-eq{position:absolute;font-family:Georgia,serif;font-style:italic;color:#f2a9c2;opacity:.2;font-size:1.15rem;}
.nw-eq1{top:5%;left:3%;}
.nw-eq2{top:10%;left:47%;font-size:1.3rem;}
.nw-eq3{bottom:5%;right:4%;}
.nw-atom{position:absolute;bottom:3%;left:3%;width:56px;height:56px;color:#f2a9c2;opacity:.16;}

.nw-head{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px 30px;flex-wrap:wrap;
}
.nw-head h2{color:#fff;font-size:1.7rem;margin-bottom:2px;}
.nw-script{font-family:'Caveat',cursive;font-size:1.6rem;font-weight:700;color:var(--gold);line-height:1.2;}
.nw-heart{color:var(--pink);}
.nw-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.nw-hint{font-size:.74rem;color:var(--text-light-muted);letter-spacing:.02em;}

.nw-rows{position:relative;z-index:1;margin-top:18px;}
.nw-row{
  overflow-x:auto;overflow-y:hidden;
  padding:26px 0 30px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.nw-row::-webkit-scrollbar{display:none;}
.nw-row + .nw-row{margin-top:-8px;}
.nw-row.is-ready{overflow:hidden;}
.nw-track{display:flex;width:max-content;}
.nw-set{
  display:flex;align-items:center;
  gap:var(--note-gap);
  padding:0 calc(var(--note-gap) / 2);
}
/* The set is cloned once by JS, so sliding by half the track loops seamlessly */
.nw-row.is-ready .nw-track{animation:nw-scroll var(--dur,240s) linear infinite;}
.nw-row-rev.is-ready .nw-track{animation-direction:reverse;}
.nw-row.is-ready:hover .nw-track,
.notes-wall.is-paused .nw-track{animation-play-state:paused;}
@keyframes nw-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* A taped-on paper note */
.note{
  --r:-2deg;--y:0px;--tr:-4deg;--tape:rgba(224,36,94,.6);
  position:relative;flex:none;
  padding:0;border:0;border-radius:4px;
  background:#e8ecf2;
  cursor:zoom-in;
  transform:rotate(var(--r)) translateY(var(--y));
  box-shadow:0 18px 30px -14px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.note img{display:block;height:var(--note-h);width:auto;max-width:none;border-radius:4px;}
.note::before{
  content:"";position:absolute;z-index:2;top:-11px;left:50%;
  width:78px;height:22px;
  transform:translateX(-50%) rotate(var(--tr));
  background-color:var(--tape);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, transparent 3px 7px);
  clip-path:polygon(0 12%,4% 0,96% 0,100% 14%,97% 50%,100% 86%,96% 100%,4% 100%,0 88%,3% 50%);
}
.note::after{
  content:"Read \2192";
  position:absolute;right:10px;bottom:10px;z-index:2;
  padding:5px 11px;border-radius:999px;
  background:var(--pink);color:#fff;
  font:700 .62rem/1 'Poppins',sans-serif;letter-spacing:.06em;
  opacity:0;transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
.note:nth-child(4n+2){--r:1.6deg;--y:7px;--tr:3deg;--tape:rgba(240,224,140,.72);}
.note:nth-child(4n+3){--r:-1deg;--y:-5px;--tr:-2deg;--tape:rgba(253,246,238,.6);}
.note:nth-child(4n+4){--r:2.4deg;--y:3px;--tr:5deg;--tape:rgba(255,143,179,.62);}
.note:hover,.note:focus-visible{
  z-index:3;
  transform:rotate(0) translateY(-8px) scale(1.05);
  box-shadow:0 26px 44px -16px rgba(224,36,94,.55), 0 4px 10px rgba(0,0,0,.4);
}
.note:hover::after,.note:focus-visible::after{opacity:1;transform:none;}
.note:focus-visible{outline:3px solid var(--pink-light);outline-offset:4px;}

/* Full-size reader */
.nw-lightbox{
  width:100%;height:100%;max-width:100%;max-height:100%;
  margin:0;padding:0;border:0;
  background:transparent;color:#fff;overflow:hidden;
}
.nw-lightbox::backdrop{background:rgba(14,0,5,.92);backdrop-filter:blur(6px);}
.nw-lb-stage{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;gap:22px;
  padding:60px 24px 28px;
}
.nw-lb-figure{
  --ar:.75;
  margin:0;
  width:min(calc(100vw - 190px), 1100px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.nw-lb-figure img{
  width:min(100%, calc((100vh - 150px) * var(--ar)));
  width:min(100%, calc((100dvh - 150px) * var(--ar)));
  aspect-ratio:var(--ar);height:auto;
  border-radius:6px;background:#e8ecf2;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85);
}
.nw-lb-figure img.is-in{animation:nw-pop .32s cubic-bezier(.2,.8,.2,1);}
@keyframes nw-pop{from{opacity:0;transform:scale(.96) rotate(-1deg);}to{opacity:1;transform:none;}}
.nw-lb-count{font-family:'Caveat',cursive;font-size:1.45rem;font-weight:700;color:var(--text-light-muted);}
.nw-lb-btn{
  flex:none;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);color:#fff;
  font-size:1.05rem;line-height:1;cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.nw-lb-btn:hover{background:rgba(224,36,94,.3);border-color:var(--pink);}
.nw-lb-btn:focus-visible{outline:2px solid var(--pink-light);outline-offset:3px;}
.nw-lb-close{position:absolute;top:16px;right:16px;font-size:1.5rem;}

@media (prefers-reduced-motion:reduce){
  .nw-row.is-ready{overflow-x:auto;}
  .nw-row.is-ready .nw-track{animation:none;}
  .nw-set[aria-hidden="true"]{display:none;}
  .note,.note::after{transition:none;}
  .nw-lb-figure img.is-in{animation:none;}
}

/* ============ FAQ ============ */
.faq{background:var(--cream);padding:80px 0;}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;}
.faq h2{color:#1c1414;font-size:1.7rem;}
.faq > .container > div:first-child p:last-child{color:#5a4d4c;line-height:1.6;max-width:300px;}

.faq-item{border-bottom:1px solid var(--border-cream);}
.faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:20px 4px;font-family:inherit;font-size:.92rem;font-weight:600;color:#1c1414;
  display:flex;justify-content:space-between;align-items:center;
}
.faq-q span{color:var(--pink);font-size:1.2rem;font-weight:400;transition:transform .2s ease;}
.faq-item.open .faq-q span{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a p{padding:0 4px 20px;color:#6b5c5a;font-size:.85rem;line-height:1.6;}

/* ============ CONTACT ============ */
.contact{
  background:linear-gradient(160deg, #1a0006, var(--near-black));
  padding:80px 0;color:#fff;
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.contact h2{color:#fff;font-size:1.9rem;margin-bottom:26px;}
.contact-line{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.ci-icon{
  width:42px;height:42px;flex:none;border-radius:50%;
  border:1px solid rgba(224,36,94,.4);color:var(--pink);
  display:flex;align-items:center;justify-content:center;
}
.ci-icon svg{width:18px;height:18px;}
.contact-line small{display:block;color:#c9adb4;font-size:.7rem;}
.contact-line strong{font-size:.95rem;}
.contact hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:26px 0;}
.socials{display:flex;gap:10px;margin-bottom:14px;}
.social{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  transition:background .2s ease, transform .2s ease;
}
.social:hover,.social:focus-visible{transform:translateY(-2px);}
.social.yt-c:hover,.social.yt-c:focus-visible{background:#e62117;}
.social.fb-c:hover,.social.fb-c:focus-visible{background:#1877f2;}
.social.wa-c:hover,.social.wa-c:focus-visible{background:#1fae54;}
.social:focus-visible{outline:2px solid var(--pink-light);outline-offset:3px;}
.follow-text{color:#c9adb4;font-size:.8rem;margin-bottom:16px;max-width:240px;}

.contact-form{
  background:#fff;border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.contact-form input,.contact-form textarea{
  width:100%;border:1px solid #eee0e0;border-radius:10px;
  padding:13px 16px;font-family:inherit;font-size:.85rem;color:#2a2323;background:#fcfafa;
  resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--pink-light);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-note{color:var(--pink-2);font-size:.8rem;text-align:center;}

/* ============ FOOTER ============ */
.site-footer{background:var(--near-black);color:#cfc3c3;padding-top:56px;}
.footer-grid{
  display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr 1.2fr;
  gap:24px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-title{color:#fff;font-weight:600;font-size:.85rem;margin-bottom:14px;}
.footer-col{display:flex;flex-direction:column;gap:10px;font-size:.82rem;}
.footer-col a:hover{color:#fff;}
.footer-script{
  font-family:'Caveat',cursive;font-size:1.4rem;color:#e9c9d2;text-align:right;
  align-self:center;line-height:1.3;
}
.footer-bottom{padding:22px 0;text-align:center;font-size:.78rem;color:#8a7b78;}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;justify-items:center;}
  .topic-icon,.eq4,.icon-atom{display:none;}
  .hero-photo{position:relative;right:auto;bottom:auto;width:auto;order:-1;max-width:280px;margin:0 auto;justify-self:center;}
  .hero-photo img{
    -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  }
  .hero-copy{padding-left:0;}
  .nw-eq1{display:none;}
  .about-grid,.teaching-grid,.contact-grid,.faq-grid{grid-template-columns:1fr;}
  .classes-grid{grid-template-columns:repeat(2,1fr);}
  .schedule-grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .why-card:last-child:nth-child(odd){grid-column:1 / -1;}
  .yt-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-script{text-align:left;grid-column:1/-1;}
}
@media (max-width:720px){
  .main-nav{
    position:fixed;top:74px;left:0;right:0;
    background:rgba(5,3,3,.98);
    flex-direction:column;padding:20px 24px;gap:0;
    transform:translateY(-130%);opacity:0;
    transition:all .25s ease;
  }
  .main-nav.open{transform:translateY(0);opacity:1;}
  .main-nav a{width:100%;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
  .method-grid{grid-template-columns:repeat(2,1fr);}
  .classes-grid,.schedule-grid,.why-grid{grid-template-columns:1fr;}
  .test-track .test-card{flex:0 0 100%;}
  .notes-wall{--note-h:170px;--note-gap:24px;padding:56px 0 36px;}
  .nw-head-side{align-items:flex-start;}
  .nw-eq2,.nw-eq1{display:none;}
  .nw-row{padding:20px 0 24px;}
  .nw-row{-webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);}
  .nw-lb-stage{padding:60px 12px 92px;}
  .nw-lb-figure{width:calc(100vw - 24px);}
  .nw-lb-figure img{
    width:min(100%, calc((100vh - 210px) * var(--ar)));
    width:min(100%, calc((100dvh - 210px) * var(--ar)));
  }
  .nw-lb-prev,.nw-lb-next{position:absolute;bottom:24px;}
  .nw-lb-prev{left:calc(50% - 62px);}
  .nw-lb-next{right:calc(50% - 62px);}
  .form-row{grid-template-columns:1fr;}
  h2{font-size:1.6rem;}
  .hero-stats{flex-direction:column;}
  .hero-stat{border-right:none;border-bottom:1px solid rgba(224,36,94,.3);}
  .hero-stat:last-child{border-bottom:none;}
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */

/* ---------- Scroll reveal: elements with data-reveal ("js" class is set in <head>) ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js [data-reveal="left"]{transform:translate3d(-56px,0,0);}
.js [data-reveal="right"]{transform:translate3d(56px,0,0);}
.js [data-reveal="zoom"]{transform:scale(.9);}
.js [data-reveal="flip"]{transform:perspective(900px) rotateX(24deg) translate3d(0,40px,0);transform-origin:50% 0;}
.js [data-reveal].is-in{opacity:1;transform:none;}

/* Headings rise word by word */
.js [data-reveal="words"]{opacity:1;transform:none;}
.js [data-reveal="words"]:not(.is-split){opacity:0;}
[data-reveal="words"] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em;}
.js [data-reveal="words"] .w > span{
  display:inline-block;
  transform:translate3d(0,112%,0);
  transition:transform .85s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 90ms + var(--wi,0) * 80ms);
}
.js [data-reveal="words"].is-in .w > span{transform:none;}

/* Handwritten lines write themselves in, left to right */
.js [data-reveal="write"]{
  opacity:1;transform:none;
  clip-path:inset(-20% 100% -20% 0);
  transition:clip-path 1.9s cubic-bezier(.65,0,.35,1) .35s;
}
.js [data-reveal="write"].is-in{clip-path:inset(-20% -8% -20% 0);}

/* ---------- Hero: entrance ---------- */
@keyframes a-rise{from{opacity:0;transform:translate3d(0,28px,0);}to{opacity:1;transform:none;}}
@keyframes a-fade{from{opacity:0;}to{opacity:1;}}
@keyframes a-wordmark{from{opacity:0;transform:scale(.9);filter:blur(10px);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes a-photo{from{opacity:0;transform:translate3d(0,70px,0) scale(.97);}to{opacity:1;transform:none;}}
.hero-cave{animation:a-fade 1.6s ease backwards;}
.hero-fx{animation:a-fade 2s ease .5s backwards;}
.hero-wordmark{animation:a-wordmark 1.1s cubic-bezier(.2,.8,.2,1) .15s backwards;}
.hero-tagline{animation:a-rise .9s cubic-bezier(.2,.8,.2,1) .5s backwards;}
.hero-actions{animation:a-rise .9s cubic-bezier(.2,.8,.2,1) .65s backwards;}
.hero-stats{animation:a-rise .9s cubic-bezier(.2,.8,.2,1) .8s backwards;}
.hero-photo img{animation:a-photo 1.3s cubic-bezier(.2,.8,.2,1) .25s backwards;}
.hero-stat strong,.why-card strong{font-variant-numeric:tabular-nums;}

/* Gold shimmer across "First Principles" */
@keyframes a-shimmer{0%{background-position:100% 0;}55%,100%{background-position:0 0;}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl-gold{
    background:linear-gradient(100deg, var(--gold) 0%, var(--gold) 40%, #fffbe0 50%, var(--gold) 60%, var(--gold) 100%);
    background-size:250% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:a-shimmer 5s ease-in-out 1.6s infinite;
  }
}

/* ---------- Hero: living physics doodles ---------- */
@keyframes a-twinkle{0%,100%{opacity:.3;transform:scale(.6);}50%{opacity:1;transform:scale(1.3);}}
@keyframes a-float{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-12px,0);}}
@keyframes a-float-tilt{0%,100%{transform:translate3d(0,0,0) rotate(0);}50%{transform:translate3d(0,-14px,0) rotate(7deg);}}
@keyframes a-spin{to{transform:rotate(360deg);}}
@keyframes a-galaxy{from{transform:rotate(-25deg);}to{transform:rotate(335deg);}}
@keyframes a-orbit{from{transform:rotate(0) translateX(18px) rotate(0);}to{transform:rotate(360deg) translateX(18px) rotate(-360deg);}}
@keyframes a-wave{to{transform:translateX(-60px);}}

.star{animation:a-twinkle 3.4s ease-in-out infinite;}
.s2{animation-duration:2.7s;animation-delay:-1.1s;}
.s3{animation-duration:4.1s;animation-delay:-2s;}
.s4{animation-duration:3s;animation-delay:-.4s;}
.s5{animation-duration:3.8s;animation-delay:-2.6s;}
.s6{animation-duration:2.9s;animation-delay:-1.7s;}
.s7{animation-duration:4.4s;animation-delay:-.9s;}
.s8{animation-duration:3.2s;animation-delay:-2.2s;}
.eq{animation:a-float 6.5s ease-in-out infinite;}
.eq2{animation-duration:8s;animation-delay:-3s;}
.eq3{animation-duration:7.2s;animation-delay:-1.5s;}
.eq4{animation-duration:9s;animation-delay:-4s;}
.topic-icon{animation:a-float-tilt 9s ease-in-out infinite;}
.topic-circuit{animation-delay:-3s;}
.topic-magnet{animation-duration:10s;animation-delay:-6s;}
.icon-atom{animation:a-spin 16s linear infinite;}
.mini-galaxy{animation:a-galaxy 36s linear infinite;}
.o1{animation:a-orbit 7s linear infinite;}
.o2{animation:a-orbit 11s linear infinite reverse;}
.wave path{animation:a-wave 2.8s linear infinite;}

/* Doodles drift with the mouse (depth = how far) and the layer lags behind on scroll */
.hero-fx{translate:0 calc(var(--hs,0) * .35px);}
.hero-fx > *{
  translate:calc(var(--mx,0) * var(--depth,10) * -1px) calc(var(--my,0) * var(--depth,10) * -1px);
  transition:translate .9s cubic-bezier(.2,.8,.2,1);
}
.eq1{--depth:22;} .eq2{--depth:30;} .eq3{--depth:16;} .eq4{--depth:26;}
.star{--depth:8;} .topic-icon{--depth:34;} .mini-galaxy{--depth:20;}
.wave{--depth:14;} .orbit-dot{--depth:24;} .icon-atom{--depth:28;}
[data-parallax]{translate:0 calc(var(--py,0) * 1px);}

/* ---------- Header ---------- */
@keyframes a-logo{from{opacity:0;transform:rotate(-180deg) scale(.6);}to{opacity:1;transform:none;}}
.brand-icon svg{transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.site-header .brand-icon svg{animation:a-logo 1.2s cubic-bezier(.2,.8,.2,1) .1s backwards;}
.brand:hover .brand-icon svg{transform:rotate(180deg);}
.main-nav a::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:rgba(255,255,255,.4);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.main-nav a:hover::before{transform:scaleX(1);}
.main-nav a.active::before{display:none;}
.nav-toggle span{transition:transform .3s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Buttons ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate;}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform:translateX(-120%);transition:transform .75s ease;
}
.btn-primary:hover::after{transform:translateX(120%);}
.btn > span[aria-hidden="true"]:not([class]),.sb-arrow{display:inline-block;transition:transform .25s ease;}
.btn:hover > span[aria-hidden="true"]:not([class]),.send-btn:hover .sb-arrow{transform:translateX(4px);}

/* ---------- Cards ---------- */
@keyframes a-pop{0%{transform:scale(1);}40%{transform:scale(1.18) rotate(-8deg);}70%{transform:scale(.95) rotate(4deg);}100%{transform:scale(1);}}
.method-card,.batch-card{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;}
.method-card:hover,.batch-card:hover{transform:translateY(-6px);box-shadow:0 18px 30px -18px rgba(140,31,60,.4);border-color:#f2b8cb;}
.why-card{transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;}
.why-card:hover{transform:translateY(-5px);border-color:rgba(224,36,94,.7);background:rgba(224,36,94,.08);}
.method-card:hover .m-icon,.batch-card:hover .b-icon,.why-card:hover .w-icon{animation:a-pop .6s cubic-bezier(.2,.8,.2,1);}

.class-card{transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;}
.class-card:hover{transform:translateY(-8px);box-shadow:0 26px 40px -22px rgba(224,36,94,.6);border-color:#86163a;}
.class-card::before{transition:left .3s ease-out, top .3s ease-out, transform .3s ease-out;}
.class-card.is-tracking::before{left:var(--gx);top:var(--gy);transform:translate(-50%,-50%);}
.c-icon{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.class-card:hover .c-icon{transform:rotate(-10deg) scale(1.08);}

.about-photo img{transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.about-photo:hover img{transform:scale(1.05);}

/* ---------- Teaching sketch: orbits draw themselves, electrons orbit ---------- */
@keyframes a-nucleus{0%,100%{transform:scale(1);}50%{transform:scale(1.2);}}
.sketch.is-ready .draw{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1) calc(var(--d,0) * .14s);
}
.sketch.is-drawn .draw{stroke-dashoffset:0;}
.sketch.is-ready .sk-fade{opacity:0;transition:opacity .9s ease calc(1s + var(--d,0) * .2s);}
.sketch.is-drawn .sk-fade{opacity:1;}
.sketch .nucleus{transform-box:fill-box;transform-origin:center;animation:a-nucleus 2.6s ease-in-out infinite;}
.sketch .sk-eq{animation:a-float 7s ease-in-out infinite;}
.sketch .sk-eq + .sk-eq{animation-duration:8.5s;animation-delay:-3s;}
.sketch .sk-eq + .sk-eq + .sk-eq{animation-duration:6s;animation-delay:-1.5s;}

/* ---------- YouTube ---------- */
@keyframes a-ping{0%{box-shadow:0 0 0 0 rgba(224,36,94,.65);}100%{box-shadow:0 0 0 22px rgba(224,36,94,0);}}
.yt-thumb img{transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.yt-thumb[data-video]:hover img,.yt-item:hover .yt-thumb img{transform:scale(1.06);}
.yt-thumb-a .yt-play::before{content:"";position:absolute;inset:2px;border-radius:50%;animation:a-ping 2.2s cubic-bezier(.2,.8,.2,1) infinite;}

/* ---------- FAQ + contact ---------- */
.faq-item.open .faq-a p{animation:a-rise .45s cubic-bezier(.2,.8,.2,1) backwards;}
.contact-form input,.contact-form textarea{transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.contact-form input:focus,.contact-form textarea:focus{background:#fff;box-shadow:0 0 0 4px rgba(255,143,179,.2);}

/* ---------- Contact form: "Send Message" → WhatsApp ---------- */
.contact-form{position:relative;}
.form-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:-4px;font-size:.72rem;color:#8a7b78;text-align:center;
}
.form-hint svg{flex:none;}
.form-note a{color:var(--pink-2);font-weight:600;text-decoration:underline;}

/* The button stacks its three states in one spot and slides between them */
.send-btn{display:grid;place-items:center;min-height:50px;}
.send-btn > span.sb-state{
  grid-area:1/1;display:inline-flex;align-items:center;gap:10px;
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.send-btn > span.sb-busy,.send-btn > span.sb-done{opacity:0;transform:translateY(130%);}
.send-btn.is-busy > span.sb-idle,.send-btn.is-done > span.sb-idle{opacity:0;transform:translateY(-130%);}
.send-btn.is-busy > span.sb-busy{opacity:1;transform:none;}
.send-btn.is-done > span.sb-busy{opacity:0;transform:translateY(-130%);}
.send-btn.is-done > span.sb-done{opacity:1;transform:none;}
.send-btn.is-busy,.send-btn.is-done{cursor:progress;transform:none;}

/* Preparing: a spinning atom, bouncing dots, light sweeps, progress line fills */
@keyframes sb-sweep{from{transform:translateX(-120%);}to{transform:translateX(120%);}}
@keyframes sb-dot{0%,80%,100%{transform:translateY(0);opacity:.35;}40%{transform:translateY(-4px);opacity:1;}}
.sb-atom{width:22px;height:22px;animation:a-spin 1.1s linear infinite;}
.sb-nucleus{transform-box:fill-box;transform-origin:center;animation:a-nucleus .9s ease-in-out infinite;}
.sb-dots{display:inline-flex;gap:3px;margin-left:2px;}
.sb-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:sb-dot 1s ease-in-out infinite;}
.sb-dots i:nth-child(2){animation-delay:.15s;}
.sb-dots i:nth-child(3){animation-delay:.3s;}
.send-btn.is-busy::after{animation:sb-sweep 1.1s linear infinite;}
.sb-progress{
  position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:rgba(255,255,255,.85);
  transform:scaleX(0);transform-origin:left;
}
.send-btn.is-busy .sb-progress{transform:scaleX(1);transition:transform 1.5s cubic-bezier(.4,0,.2,1);}
.send-btn.is-done .sb-progress{transform:scaleX(1);opacity:0;transition:opacity .4s ease;}

/* Ready: WhatsApp green, a tick that draws itself */
.send-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#34d877,#179648);
  opacity:0;transition:opacity .45s ease;
}
.send-btn.is-done::before{opacity:1;}
.send-btn.is-done{box-shadow:0 12px 26px -8px rgba(31,174,84,.7);}
.sb-check{
  width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;
}
.send-btn.is-done .sb-check{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease .2s;}

/* Fields dim while the message is prepared */
.contact-form.is-sending input,.contact-form.is-sending textarea{opacity:.55;transition:opacity .3s ease;}

/* The WhatsApp bubble flies off on a projectile arc (x is steady, y rises then falls) */
@keyframes wa-x{from{transform:translateX(0);}to{transform:translateX(150px);}}
@keyframes wa-y{
  0%{transform:translateY(0) scale(.5) rotate(0);animation-timing-function:cubic-bezier(.2,.65,.4,1);}
  50%{transform:translateY(-130px) scale(1.15) rotate(-12deg);animation-timing-function:cubic-bezier(.6,0,.8,.35);}
  100%{transform:translateY(-40px) scale(.75) rotate(10deg);}
}
@keyframes wa-fade{0%{opacity:0;}10%,70%{opacity:1;}100%{opacity:0;}}
.wa-fly{position:absolute;z-index:5;width:36px;height:36px;pointer-events:none;animation:wa-x 1s linear forwards;}
.wa-fly-y{display:block;width:100%;height:100%;animation:wa-y 1s forwards;}
.wa-fly svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:wa-fade 1s forwards;}

/* ---------- Back to top: the ring fills as you scroll ---------- */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(22,0,8,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.6);
  opacity:0;transform:translateY(18px) scale(.8);pointer-events:none;visibility:hidden;
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), background .25s ease, visibility 0s linear .45s;
}
.to-top.is-visible{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), background .25s ease, visibility 0s;
}
.to-top:hover{background:var(--pink-2);}
.to-top:focus-visible{outline:2px solid var(--pink-light);outline-offset:3px;}
.to-top svg{display:block;width:100%;height:100%;}
.tt-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2.4;}
.tt-progress{
  fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--progress,0) * 100);
  transform:rotate(-90deg);transform-origin:24px 24px;
}
.tt-orbit{transform:rotate(calc(var(--progress,0) * 360deg));transform-origin:24px 24px;}
.tt-dot{fill:#fff;}
.tt-arrow{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;}
.to-top:hover .tt-arrow{transform:translateY(-2px);}
.to-top:hover .tt-progress{stroke:#fff;}

@media (max-width:720px){
  .to-top{right:16px;bottom:16px;width:46px;height:46px;}
  .main-nav.open a{animation:a-rise .45s cubic-bezier(.2,.8,.2,1) backwards;}
  .main-nav.open a:nth-child(2){animation-delay:.05s;}
  .main-nav.open a:nth-child(3){animation-delay:.1s;}
  .main-nav.open a:nth-child(4){animation-delay:.15s;}
  .main-nav.open a:nth-child(5){animation-delay:.2s;}
  .main-nav.open a:nth-child(6){animation-delay:.25s;}
}

/* ---------- Reduced motion: keep everything still and visible ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js [data-reveal],.js [data-reveal] .w > span{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}
  .hero-cave,.hero-fx,.hero-wordmark,.hero-tagline,.hero-actions,.hero-stats,.hero-photo img,
  .site-header .brand-icon svg,.hl-gold,.star,.eq,.topic-icon,.icon-atom,.mini-galaxy,.orbit-dot,.wave path,
  .sketch .nucleus,.sketch .sk-eq,.yt-thumb-a .yt-play::before,.faq-item.open .faq-a p,.main-nav.open a,
  .method-card:hover .m-icon,.batch-card:hover .b-icon,.why-card:hover .w-icon,
  .sb-atom,.sb-nucleus,.sb-dots i,.send-btn.is-busy::after{animation:none !important;}
  .hero-fx,.hero-fx > *,[data-parallax]{translate:none;}
  .sketch.is-ready .draw{stroke-dashoffset:0;transition:none;}
  .sketch.is-ready .sk-fade{opacity:1;transition:none;}
}

/* =====================================================================
   MOBILE POLISH
   ===================================================================== */
.nowrap{white-space:nowrap;}
.main-nav a{white-space:nowrap;}
@media (min-width:721px) and (max-width:1024px){
  .main-nav{gap:16px;}
  .main-nav a{font-size:.76rem;}
}
/* Anchor links land below the pinned header */
section[id]{scroll-margin-top:74px;}

@media (max-width:720px){
  /* Header: bigger menu button; closed menu can't be tabbed into */
  .nav-toggle{padding:12px 10px;margin-right:-10px;}
  .main-nav{visibility:hidden;}
  .main-nav.open{visibility:visible;}

  /* Hero: stats sit side by side; fewer doodles crowding the photo */
  .hero{padding:36px 0 40px;}
  .hero-inner{min-height:0;gap:18px;}
  .hero-wordmark{max-width:min(300px,100%);margin-bottom:14px;}
  .hero-tagline{font-size:1.15rem;margin-bottom:22px;}
  .hero-actions{margin-bottom:26px;gap:12px;}
  .hero-stats{width:100%;}
  .hero-stat{
    flex-direction:column;justify-content:flex-start;gap:6px;
    padding:14px 6px;text-align:center;
    border-bottom:none;border-right:1px solid rgba(224,36,94,.3);
  }
  .hero-stat:last-child{border-right:none;}
  .hs-icon{width:30px;height:30px;}
  .hs-icon svg{width:16px;height:16px;}
  .hero-stat strong{font-size:.95rem;}
  .hero-stat em{white-space:normal;font-size:.64rem;line-height:1.3;}
  .wave,.eq3,.o2{display:none;}

  /* About */
  .about{padding:56px 0 50px;}
  .about-grid{gap:28px;}
  .about-photo{max-width:none;}
  .about-card{padding:26px 22px;}
  .about-card h2{font-size:1.8rem;}

  /* Teaching method */
  .teaching{padding:20px 0 60px;}
  .teaching-grid{gap:20px;}
  .teaching-art{min-height:0;}
  .big-num{font-size:5rem;}

  /* Class types: compact rows (icon beside the text) */
  .classes,.schedule{padding-bottom:60px;}
  .classes-grid{gap:14px;margin-top:22px;}
  .class-card{
    display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;
    padding:20px 18px;
  }
  .class-card .c-icon{grid-row:span 2;margin:0;}
  .class-card h3{margin-bottom:4px;align-self:end;}
  .class-card p{align-self:start;}

  /* Batches and "why" stats: two per row */
  .schedule-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px;}
  .batch-card{padding:18px 10px;}
  .batch-card:last-child:nth-child(odd){grid-column:1 / -1;}
  .why{padding:52px 0;}
  .why h2{margin-bottom:24px;}
  .why-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .why-card{flex-direction:column;text-align:center;gap:10px;padding:18px 10px;}
  .why-card strong{font-size:1.2rem;}

  /* YouTube, FAQ, contact */
  .yt,.faq,.contact{padding:60px 0;}
  .yt-grid{gap:28px;}
  .faq-grid,.contact-grid{gap:30px;}
  .contact-form{padding:20px;}
  .contact-grid > *,.contact-line > div{min-width:0;}
  .contact-line strong{overflow-wrap:anywhere;}
  .social{width:40px;height:40px;}

  /* Footer: brand, then both link columns side by side, then socials and the script line */
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .footer-brand,.footer-grid > .footer-col:nth-child(4),.footer-script{grid-column:1 / -1;}
  .footer-col a{padding:5px 0;}
  .footer-script{font-size:1.25rem;}
  /* Room so the back-to-top button doesn't cover the copyright line */
  .footer-bottom{padding:22px 0 84px;}
}

@media (max-width:360px){
  .hero-actions .btn{padding:13px 20px;}
  .hero-stat{padding:12px 3px;}
  .hero-stat em{font-size:.6rem;}
  .schedule-grid,.why-grid{gap:10px;}
  .batch-card h4{font-size:.85rem;}
}