/* ============ The Annexe Project — cinematic scroll site ============ */
:root{
  --ink:#16272d;          /* charcoal blue */
  --ink-2:#0f3f4a;        /* deep premium teal */
  --paper:#f4f7f8;        /* ice grey */
  --white:#ffffff;
  --aqua:#e9f4f5;         /* pale aqua */
  --silver:#c7cdd1;       /* chrome silver */
  --blue:#0b6f78;         /* dental teal — interactive */
  --blue-soft:#a9d3d7;    /* light teal tint for dark backgrounds */
  --teal-mid:#52888d;     /* current colour — accents on dark */
  --accent:#0b6f78;       /* dental teal CTA */
  --accent-deep:#08565e;
  --text:#1c2b31;
  --muted:#51666c;
  --muted-light:#9fb9bd;
  --line:rgba(22,39,45,.12);
  --line-light:rgba(255,255,255,.14);
  --radius:18px;
  --font-display:'Anton',sans-serif;
  --font-serif:'Fraunces',serif;
  --font-body:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--font-body);color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
::selection{background:var(--blue);color:var(--white)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--teal-mid);border-radius:99px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

/* film grain */
.grain{position:fixed;inset:-100%;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(3%,-12%)}50%{transform:translate(-7%,6%)}70%{transform:translate(9%,3%)}90%{transform:translate(-4%,10%)}}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  padding:.95rem 1.7rem;border-radius:999px;border:2px solid transparent;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4),background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn--accent{background:var(--accent);color:var(--white);box-shadow:0 14px 30px -14px rgba(11,111,120,.6)}
.btn--accent:hover{background:#0d8791;box-shadow:0 18px 36px -14px rgba(11,111,120,.7)}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--line-light)}
.btn--ghost:hover{border-color:var(--white)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:#1b2b4a}
.btn--sm{padding:.6rem 1.15rem;font-size:.85rem}
.btn--whatsapp{background:#25d366;color:#06301a}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.link{font-weight:600;color:var(--blue);text-decoration:none}
.link:hover{text-decoration:underline}

/* ============ nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:2rem;
  padding:.8rem clamp(1rem,4vw,3rem);transition:background .35s,box-shadow .35s,color .35s;color:var(--ink)}
.nav.is-solid{background:rgba(22,39,45,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-light);color:var(--white)}
.nav__brand img{height:44px;width:auto;transition:filter .35s}
.nav.is-solid .nav__brand img{filter:invert(1) hue-rotate(180deg)}
.nav .btn--ghost{color:var(--ink);border-color:rgba(22,39,45,.3)}
.nav .btn--ghost:hover{border-color:var(--ink)}
.nav.is-solid .btn--ghost{color:var(--white);border-color:var(--line-light)}
.nav.is-solid .btn--ghost:hover{border-color:var(--white)}
.nav__burger span{background:currentColor}
.nav__links{display:flex;gap:1.6rem;margin-left:auto}
.nav__links a{font-size:.9rem;font-weight:600;text-decoration:none;opacity:.85;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__cta{display:flex;gap:.6rem}
.nav__burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:7px;align-items:center}
.nav__burger span{display:block;width:26px;height:2px;background:currentColor;transition:transform .3s}
.mobilemenu{position:fixed;inset:0;z-index:990;background:var(--ink);display:none;flex-direction:column;gap:.1rem;
  padding:6rem 2rem 2.5rem;color:var(--white);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobilemenu a{font-size:1.3rem;font-weight:700;text-decoration:none}
.mobilemenu a:not(.btn){display:block;padding:.5rem 0}
.mobilemenu .btn{margin-top:1.1rem}
/* parents navigate directly now — drop the misleading "expand" chevron */
#mobilemenu .menu-item-has-children > a::after{display:none!important}
/* Sub-items are ALWAYS visible in the mobile menu — no tap-to-expand.
   An inline stylesheet from the old site collapses them (height:0) and only reopens
   them with a JS class that proved unreliable on iOS, so we out-specify it here. */
#mobilemenu .menu-item-has-children > .sub-menu{
  height:auto!important;max-height:none!important;overflow:visible!important;opacity:1!important;
  display:flex!important;flex-direction:column;gap:0!important;
  margin:.1rem 0 .55rem!important;padding:.15rem 0 .15rem .95rem!important;
  border-left:2px solid rgba(255,255,255,.22)!important;transition:none!important}
#mobilemenu .menu-item-has-children > .sub-menu > li > a{
  font-size:1rem!important;font-weight:600!important;opacity:.78!important;
  padding:.42rem 0!important;letter-spacing:.01em}
#mobilemenu .menu-item-has-children > .sub-menu > li > a:hover{opacity:1!important}
.mobilemenu.is-open{display:flex}

/* ============ hero ============ */
/* Hero: a single screen with the clip looping on its own — no scroll-scrub, no pin. */
.hero{height:100svh;min-height:600px;position:relative;background:var(--aqua)}
.hero__pin{position:relative;top:auto;height:100%;overflow:hidden}
.hero__canvas{display:none} /* retired: the frame-sequence scrub is replaced by the looping video */
.hero__shade{position:absolute;inset:0;background:
  linear-gradient(98deg,rgba(244,247,248,.92) 6%,rgba(244,247,248,.55) 34%,transparent 60%),
  linear-gradient(to top,rgba(244,247,248,.96) 0%,rgba(244,247,248,.45) 30%,transparent 56%)}
.hero__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;padding:clamp(5.2rem,12vh,7.5rem) clamp(1.2rem,6vw,6rem) clamp(2.2rem,5vh,3.5rem);
  color:var(--ink)}
.hero__bottom{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:100%}
.hero__eyebrow{font-size:clamp(.8rem,1.4vw,1rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1rem;font-weight:600}
.hero__eyebrow em{font-family:var(--font-serif);text-transform:none;letter-spacing:0;
  font-size:1.15em;color:var(--teal-mid)}
.hero__title{font-family:var(--font-display);line-height:.92;letter-spacing:.01em;
  font-size:clamp(2.9rem,min(10.5vw,14vh),9.5rem);text-transform:uppercase;margin:0;
  text-shadow:0 2px 30px rgba(233,244,245,.6)}
.hero__line{display:block;overflow:hidden}
.hero__line--big{color:var(--blue)}
/* waving Singapore flag inline with the "established" line, sized to the text */
.hero__est{display:flex;align-items:center;gap:.6em}
.hero__flag{display:inline-block;width:1.55em;flex:0 0 auto;line-height:0;transform-origin:left center;
  filter:drop-shadow(0 2px 6px rgba(15,63,74,.25));animation:flagWave 2.6s ease-in-out infinite}
.hero__flag svg{width:100%;height:auto;border-radius:3px;display:block}
@keyframes flagWave{0%,100%{transform:rotate(0deg) skewY(0deg)}25%{transform:rotate(-2.2deg) skewY(2.4deg)}
  55%{transform:rotate(1.6deg) skewY(-2deg)}80%{transform:rotate(-1deg) skewY(1.2deg)}}
@media (prefers-reduced-motion:reduce){.hero__flag{animation:none}}
/* intro line under a section heading */
.section__sub{max-width:44rem;margin:-1.6rem 0 2rem;color:var(--muted);font-size:1rem;line-height:1.6}
/* the looping clip sits behind the shade + copy, filling the hero */
.hero__vidwrap{position:absolute;inset:0;z-index:0}
/* title block and CTA block always stack ABOVE the clip */
.hero__top,.hero__bottom{position:relative;z-index:2}
.hero__vid{width:100%;height:100%;object-fit:cover;display:block}
.hero__vidload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;background:linear-gradient(180deg,#EFF6F7,#E3F0F1);color:var(--teal);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;transition:opacity .55s ease}
.hero__vidload.is-hidden{opacity:0;pointer-events:none}
.hero__spinner{width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(11,111,120,.22);border-top-color:var(--teal);animation:heroSpin .8s linear infinite}
@keyframes heroSpin{to{transform:rotate(360deg)}}
.hero__shade{z-index:1}
.hero__content{z-index:2}
.hero__line .ch{display:inline-block;will-change:transform,opacity}
.hero__sub{max-width:31rem;font-size:clamp(.92rem,1.3vw,1.05rem);line-height:1.55;color:#22363d;margin:0;
  background:rgba(244,247,248,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:.75rem 1.05rem;border-radius:14px;border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 30px -18px rgba(15,63,74,.35)}
.hero__actions{display:flex;gap:.9rem;flex-wrap:wrap;margin:0}
.hero__actions .btn--ghost{color:var(--ink);border-color:rgba(22,39,45,.35)}
.hero__actions .btn--ghost:hover{border-color:var(--ink)}
.hero__tertiary{color:var(--blue);font-weight:600;font-size:.95rem;text-decoration:none}
.hero__tertiary:hover{color:var(--ink)}
.hero__scrollhint{position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:2.2rem;display:flex;flex-direction:column;
  align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--teal-mid)}
.hero__scrollhint span{width:1px;height:54px;background:linear-gradient(var(--blue),transparent);
  animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ marquee ============ */
.marquee{background:var(--ink-2);overflow:hidden;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);padding:.9rem 0}
.marquee__track{display:flex;align-items:center;gap:2.2rem;width:max-content;
  animation:marquee 36s linear infinite;will-change:transform}
.marquee__track span{font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem;
  letter-spacing:.06em;color:var(--aqua);white-space:nowrap}
.marquee__track i{color:var(--teal-mid);font-style:normal;font-size:.8rem}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ============ credibility bar ============ */
.credbar{background:var(--ink-2);color:var(--white);border-top:1px solid var(--line-light)}
.credbar__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;padding:1.6rem clamp(1rem,4vw,2rem)}
.credbar__item{display:flex;flex-direction:column;gap:.15rem;padding-left:1rem;border-left:2px solid var(--blue-soft)}
.credbar__item strong{font-size:1.02rem}
.credbar__item span{font-size:.82rem;color:var(--muted-light)}

/* ============ generic sections ============ */
.section{padding:clamp(4.5rem,10vw,8.5rem) 0;position:relative}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2rem)}
.wrap--narrow{max-width:860px}
.wrap--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.eyebrow{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;color:var(--blue);margin-bottom:.9rem}
.eyebrow--light{color:var(--blue-soft)}
.h2{font-family:var(--font-display);text-transform:uppercase;line-height:.95;letter-spacing:.01em;
  font-size:clamp(2.2rem,5.5vw,4.2rem);color:var(--ink);margin-bottom:2.6rem}
.h2--light{color:var(--white)}
.h2 .accent,.finale__title .accent{color:var(--accent)}
.h2--light .accent,.section--dark .accent,.finale .accent{color:var(--blue-soft)}
.kinetic .kword{display:inline-block;will-change:transform}
.section--dark{background:var(--ink);color:#c9d3e4}
.section--dark h3{color:var(--white)}
.section__more{margin-top:2.4rem;color:var(--muted);font-size:.95rem}
.section__more a{color:var(--blue);font-weight:600}
.section__more--light{color:var(--muted-light)}
.section__more--light a{color:var(--blue-soft)}
.reveal{opacity:0;transform:translateY(34px)}

/* ============ results ============ */
.section--results{background:var(--white)}
.results__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.nw{white-space:nowrap}
@media (max-width:1280px){
  .statcard{padding:1.35rem 1rem;gap:.55rem}
  .statcard__num{font-size:2.2rem}
  .statcard__what{font-size:.84rem}
  .statcard__meta{font-size:.66rem;letter-spacing:.04em}
}
@media (max-width:1150px){.results__grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}}
.statcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.statcard__num{font-family:var(--font-display);font-size:clamp(2.6rem,4vw,3.6rem);color:var(--blue);line-height:1}
.statcard__what{font-size:.95rem;line-height:1.5}
.statcard__meta{margin-top:auto;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ============ builder pinned panel ============ */
.builder{height:260vh;position:relative;background:var(--aqua)}
.builder__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.builder__canvas{position:absolute;inset:0;width:100%;height:100%}
.builder__shade{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(244,247,248,.5) 0%,transparent 26%)}
.builder__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(1rem,3vw,2.5rem);
  padding:1rem clamp(1.2rem,4vw,3rem) 1.1rem;
  background:rgba(244,247,248,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.6)}
.builder__bar .eyebrow{margin-bottom:.15rem;font-size:.9rem}
.builder__bar .h2{font-size:clamp(1.35rem,2.8vw,2.3rem);margin:0;line-height:1.05}
.builder__caption{font-size:clamp(1rem,1.35vw,1.2rem);color:var(--ink);font-weight:600;max-width:26rem;
  text-align:right;line-height:1.5;flex-shrink:0}

/* ============ courses ============ */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.2rem}
.chip{border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:.55rem 1.2rem;
  font-weight:600;font-size:.88rem;cursor:pointer;transition:all .2s;color:var(--muted)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--white)}
.courses{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:980px;margin:0 auto}
.course{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.course:hover{transform:translateY(-5px);box-shadow:0 22px 44px -18px rgba(10,18,32,.28)}
.course.is-hidden{display:none}
.course__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.course__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.course:hover .course__media img{transform:scale(1.05)}
.tag{position:absolute;top:.8rem;left:.8rem;background:rgba(10,18,32,.82);color:var(--white);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:999px;backdrop-filter:blur(6px)}
.tag--online{border:1px solid rgba(157,184,255,.5)}
.course__body{padding:1.4rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
.course__body h3{font-size:1.18rem;color:var(--ink);line-height:1.3;min-height:2.6em}
.course__meta{display:flex;flex-direction:column;gap:.12rem;text-transform:none;letter-spacing:0;
  font-size:.88rem;color:var(--ink);font-weight:600;min-height:2.7em}
.course__for{font-size:.98rem;font-weight:800;color:var(--ink);line-height:1.25}
.course__tutor{font-size:.82rem;font-weight:600;color:var(--blue)}
.course__body>p{font-size:.93rem;line-height:1.55;color:var(--muted)}
.course__slots{margin-top:auto;background:var(--aqua);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.course__slots-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.course__slots-label{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:800}
.course__times{list-style:none;display:flex;flex-direction:column;gap:.32rem;margin:0;min-height:4.6em} /* 3 rows reserved: all four boxes identical */
.course__times li{display:flex;align-items:baseline;gap:.55rem;font-size:.92rem;color:var(--ink);font-weight:600}
.course__times li b{min-width:2.9rem;color:var(--blue);font-weight:800}
.course__tz{display:block;margin-top:.55rem;font-size:.7rem;color:var(--muted)}
.status{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px}
.status--open{background:#e2f6e9;color:#166534}
.status--limited{background:#fdeed3;color:#92500a}
.course__cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.6rem}

/* ============ why online ============ */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.why{border:1px solid var(--line-light);border-radius:var(--radius);padding:1.7rem 1.5rem;
  background:rgba(255,255,255,.03);transition:border-color .25s}
.why:hover{border-color:rgba(245,165,36,.5)}
.why__icon{display:inline-flex;font-size:1.5rem;color:var(--blue-soft);margin-bottom:.9rem}
.why h3{font-size:1.05rem;margin-bottom:.5rem}
.why p{font-size:.92rem;line-height:1.6;color:var(--muted-light)}

/* ============ steps ============ */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;counter-reset:step}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.5rem}
.step__num{font-family:var(--font-display);font-size:2.4rem;color:var(--accent);display:block;margin-bottom:.7rem}
.step h3{font-size:1.05rem;color:var(--ink);margin-bottom:.5rem}
.step p{font-size:.92rem;line-height:1.6;color:var(--muted)}

/* ============ demo laptop ============ */
.section--demo{background:var(--white)}
.ticklist{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin:1.6rem 0 2.2rem}
.ticklist li{padding-left:2rem;position:relative;line-height:1.55;color:var(--text)}
.ticklist li::before{content:"✓";position:absolute;left:0;top:0;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--accent);color:var(--white);font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.laptop{perspective:1200px}
.laptop__screen{background:#10262c;border-radius:14px 14px 0 0;border:1px solid #26505c;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(15,63,74,.5);transform:rotateX(4deg)}
.laptop__bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .9rem;background:#14303a;border-bottom:1px solid #26505c}
.laptop__bar span{width:10px;height:10px;border-radius:50%;background:#2e5a66}
.laptop__bar span:first-child{background:#e0564f}.laptop__bar span:nth-child(2){background:#e0a03f}.laptop__bar span:nth-child(3){background:#3fb96a}
.laptop__bar em{font-style:normal;font-size:.72rem;color:#8fb5bb;margin-left:.5rem}
.laptop__board{display:grid;grid-template-columns:1.7fr 1fr;min-height:300px}
.board__math{padding:1.4rem;display:flex;flex-direction:column;gap:1rem;justify-content:center;
  background:repeating-linear-gradient(#10262c 0 38px,#132b32 38px 39px)}
.mline{font-family:'Georgia',serif;color:#dcf0f2;font-size:clamp(.85rem,1.4vw,1.05rem)}
.mline--accent{color:#7fd0d6}
.mline--accent span{color:#8fb5bb;font-size:.78em}
.mline--dim{color:#5e7f86}
.board__side{border-left:1px solid #26505c;display:flex;flex-direction:column}
.board__tutor{aspect-ratio:4/3;overflow:hidden;position:relative}
.board__tutor img,.board__tutor video{width:100%;height:100%;object-fit:cover;object-position:top}
.board__sound{position:absolute;right:.55rem;bottom:.55rem;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(10,18,32,.65);backdrop-filter:blur(6px);
  color:var(--white);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s}
.board__sound:hover{transform:scale(1.1);background:rgba(10,18,32,.85)}
.board__livetag{position:absolute;left:.55rem;top:.55rem;font-size:.62rem;font-weight:800;letter-spacing:.09em;
  color:#ff5f56;background:rgba(10,18,32,.7);padding:.22rem .55rem;border-radius:999px;backdrop-filter:blur(6px)}
.board__chat{padding:.9rem;display:flex;flex-direction:column;gap:.55rem;font-size:.75rem;color:#c3dcdf}
.board__chat b{color:var(--blue-soft)}
.laptop__base{height:14px;background:linear-gradient(#2e5a66,#14303a);border-radius:0 0 16px 16px;transform:rotateX(4deg)}

/* ============ tutor ============ */
.section--tutor{background:var(--paper)}
.tutor__photo{position:relative}
.tutor__photo img{border-radius:var(--radius);box-shadow:0 30px 60px -25px rgba(10,18,32,.4)}
.tutor__photo figcaption{margin-top:.9rem;font-size:.9rem;color:var(--muted)}
.tutor__photo figcaption em{font-family:var(--font-serif);color:var(--ink);font-size:1.05rem}
/* standalone tutor page portrait */
.tutorpage__photo{float:right;width:min(320px,44%);margin:.35rem 0 1.4rem 2rem}
.tutorpage__photo img{width:100%;border-radius:var(--radius);box-shadow:0 30px 60px -25px rgba(10,18,32,.4);display:block}
@media (max-width:640px){.tutorpage__photo{float:none;width:100%;max-width:340px;margin:0 0 1.5rem}}
.tutor__copy p{line-height:1.7;margin-bottom:1.1rem;color:var(--text)}
.tutor__facts{list-style:none;margin:1.4rem 0;display:flex;flex-direction:column;gap:.5rem;
  border-left:3px solid var(--accent);padding-left:1.1rem;font-size:.93rem}

/* ============ stories ============ */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.story{border:1px solid var(--line-light);border-radius:var(--radius);padding:1.6rem 1.5rem;background:rgba(255,255,255,.03)}
.story__grade{font-family:var(--font-display);font-size:2.2rem;color:var(--blue-soft);margin-bottom:.7rem}
.story h3{font-size:1.05rem;margin-bottom:.25rem}
.story__meta{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-light);margin-bottom:.7rem}
.story>p:last-child{font-size:.93rem;line-height:1.55;color:#c9d3e4;font-style:italic}

/* ============ astro ============ */
.section--astro{background:var(--white)}
.astro__panel{display:flex;align-items:center;justify-content:center;min-height:380px;background:var(--ink);
  border-radius:var(--radius);position:relative;overflow:hidden}
.astro__orbit{position:relative;text-align:center;color:var(--white);padding:2rem}
.astro__planet{position:absolute;top:-30px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:var(--blue-soft);box-shadow:0 0 24px 4px rgba(82,136,141,.7);animation:orbit 7s linear infinite;transform-origin:50% 120px}
@keyframes orbit{to{transform:rotate(360deg)}}
.astro__ring{position:absolute;inset:-40px -60px;border:1px dashed rgba(169,211,215,.35);border-radius:50%}
.astro__formula{font-family:'Georgia',serif;font-size:clamp(1.4rem,2.6vw,2rem);color:#dcf0f2}
.astro__label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-light);margin-top:.6rem}

/* ============ resources ============ */
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-bottom:1.6rem}
.resource{display:flex;flex-direction:column;gap:.6rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.7rem 1.5rem;text-decoration:none;transition:transform .3s,box-shadow .3s}
.resource:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(10,18,32,.25)}
.resource h3{color:var(--ink);font-size:1.08rem}
.resource p{font-size:.92rem;color:var(--muted);line-height:1.55}
.resource span{margin-top:auto;color:var(--blue);font-weight:700;font-size:.9rem}
.leadmag{display:flex;gap:2rem;align-items:center;justify-content:space-between;background:var(--ink);
  color:var(--white);border-radius:var(--radius);padding:2rem clamp(1.4rem,3vw,2.6rem);flex-wrap:wrap}
.leadmag h3{font-size:1.25rem;margin-bottom:.4rem}
.leadmag p{color:var(--muted-light);font-size:.92rem;max-width:34rem}
.leadmag__form{display:flex;gap:.7rem;flex-wrap:wrap}
.leadmag__form input{padding:.9rem 1.2rem;border-radius:999px;border:1px solid var(--line-light);
  background:rgba(255,255,255,.07);color:var(--white);min-width:250px;font-size:.95rem}
.leadmag__form input::placeholder{color:var(--muted-light)}

/* ============ timetable ============ */
.section--timetable{background:var(--white)}
.tz-note{color:var(--muted);font-size:.92rem;margin:-1.4rem 0 1.8rem}
.ttable{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ttable__row{display:grid;grid-template-columns:2.2fr 1fr 1.4fr 1.4fr .9fr;gap:1rem;align-items:center;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line);font-size:.92rem;background:var(--white)}
.ttable__row:last-child{border-bottom:0}
.ttable__row--head{background:var(--ink);color:var(--white);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700}
.ttable__row:not(.ttable__row--head):hover{background:var(--paper)}
.onlinetag{font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);border:1px solid var(--blue);padding:.1rem .45rem;border-radius:999px;margin-left:.45rem}
.tz{color:var(--muted)}

/* ============ faq ============ */
.section--faq{background:var(--paper)}
.faq{display:flex;flex-direction:column;gap:.8rem}
.faq__item{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq__item summary{cursor:pointer;list-style:none;padding:1.15rem 1.4rem;font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--font-display);font-size:1.4rem;color:var(--accent);transition:transform .25s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{padding:0 1.4rem 1.25rem;line-height:1.65;color:var(--muted);font-size:.95rem}

/* ============ finale ============ */
.finale{background:var(--ink);color:var(--white);padding:clamp(5rem,12vw,9rem) 0;position:relative;overflow:hidden}
.finale::before{content:"∫";position:absolute;right:-2rem;top:-4rem;font-family:'Georgia',serif;
  font-size:34rem;color:rgba(169,211,215,.06);line-height:1}
.finale__title{font-family:var(--font-display);text-transform:uppercase;line-height:.95;
  font-size:clamp(3rem,9vw,7.5rem);margin-bottom:1.4rem}
.finale__title span{display:inline-block}
.finale__title .ch{display:inline-block}
.finale__sub{color:var(--muted-light);font-size:1.05rem;line-height:1.65;max-width:36rem;margin-bottom:2.6rem}
.trialform{background:rgba(255,255,255,.04);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.4rem)}
.trialform__step{display:none}
.trialform__step.is-active{display:block}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.5rem}
.fgrid label{display:flex;flex-direction:column;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--muted-light)}
.fgrid input,.fgrid select{padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line-light);
  background:rgba(255,255,255,.06);color:var(--white);font-size:.95rem;font-family:var(--font-body)}
.fgrid select option{color:var(--ink)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--muted-light);
  line-height:1.5;margin-bottom:1.4rem}
.consent input{margin-top:.2rem;accent-color:var(--accent)}
.trialform__actions{display:flex;gap:.9rem;flex-wrap:wrap}
.trialform__done{text-align:center;padding:2rem 0}
.trialform__done h3{font-size:1.6rem;margin-bottom:.7rem;color:var(--blue-soft)}
.trialform__done p{color:var(--muted-light);margin-bottom:1.6rem}
.finale__alt{display:flex;gap:1rem;margin-top:2rem;color:var(--muted-light);font-size:.95rem;flex-wrap:wrap}
.finale__alt a{color:var(--blue-soft);font-weight:600;text-decoration:none}
.finale__alt a:hover{color:var(--white)}

/* ============ footer ============ */
.footer{background:#0f1a1f;color:var(--muted-light);padding:4rem 0 2rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2.5rem;padding-bottom:3rem}
.footer__logo{height:48px;width:auto;filter:invert(1) hue-rotate(180deg);margin-bottom:1rem}
.footer p{font-size:.9rem;line-height:1.65;max-width:26rem}
.footer__addr{margin-top:.9rem;font-size:.82rem}
.footer h4{color:var(--white);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.footer nav{display:flex;flex-direction:column;gap:.55rem}
.footer nav a{font-size:.9rem;text-decoration:none;opacity:.8;transition:opacity .2s}
.footer nav a:hover{opacity:1;color:var(--white)}
.footer__legal{text-align:center;font-size:.78rem;border-top:1px solid rgba(255,255,255,.08);
  padding-top:1.6rem;max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem}

/* ============ sticky mobile bar ============ */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:950;display:none;background:rgba(10,18,32,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line-light);padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom))}
.stickybar__btn{flex:1;text-align:center;padding:.8rem .4rem;font-weight:700;font-size:.85rem;color:var(--white);
  text-decoration:none;border-radius:12px}
.stickybar__btn--accent{background:var(--accent);color:var(--white)}

/* ============ responsive ============ */
@media (max-width:1020px){
  .courses{grid-template-columns:repeat(2,1fr)}
  .whygrid,.stories,.resources{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .grain{display:none} /* drop the 3×-viewport noise layer on phones — imperceptible at 5%, saves GPU memory */
  /* mobile hero: the cinematic clip autoplays as a framed centrepiece (light, matches the video's own bg) */
  .hero{height:auto;background:var(--aqua)}
  .hero__pin{position:relative;height:auto;min-height:100svh;overflow:visible;
    background:linear-gradient(180deg,#F5F8F9 0%,#E9F4F5 52%,#DCEDEF 100%)}
  .hero__canvas,.hero__shade,.hero__scrollhint{display:none}
  .credbar__inner{grid-template-columns:1fr 1fr;gap:1.2rem}
  .wrap--split{grid-template-columns:1fr}
  .courses,.whygrid,.stories,.resources,.steps,.results__grid{grid-template-columns:1fr}
  .ttable__row{grid-template-columns:1fr;gap:.3rem;padding:1rem 1.2rem}
  .ttable__row--head{display:none}
  .ttable__row>span:nth-child(2){font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);font-weight:700}
  .fgrid{grid-template-columns:1fr}
  .stickybar{display:flex;gap:.5rem}
  .footer{padding-bottom:6.5rem}
  .finale::before{display:none}
  .builder__bar{flex-direction:column;align-items:flex-start;gap:.5rem;bottom:4.4rem;
    padding:.85rem 1.2rem 1rem}
  .builder__bar .h2{font-size:1.3rem}
  .builder__caption{text-align:left;font-size:.85rem;max-width:100%}
  /* content flows naturally (top → video → CTAs); keep it visible (desktop scroll-fade mis-triggers here) */
  .hero__content{position:relative;inset:auto;min-height:100svh;box-sizing:border-box;
    justify-content:space-between;gap:1rem;padding:5.6rem 1.15rem 5.8rem;color:var(--ink);
    opacity:1!important;transform:none!important;translate:none!important}
  .hero__title{font-size:clamp(2.3rem,12vw,3.3rem)}
  /* est line + flag stay on ONE row: size the text to the viewport so it never wraps */
  .hero .hero__est{white-space:nowrap;font-size:clamp(.58rem,2.45vw,.74rem);letter-spacing:.1em;gap:.5em}
  .hero .hero__est>span{white-space:nowrap}
  /* framed autoplay video — whole 16:9 frame visible, no crop */
  .hero__vidwrap{display:block;position:relative;width:100%;align-self:center;
    border-radius:18px;overflow:hidden;background:#E9F4F5;
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 24px 60px -30px rgba(15,63,74,.6),0 1px 0 rgba(255,255,255,.6) inset}
  .hero__vid{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#E9F4F5}
  .hero__vidload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.7rem;background:linear-gradient(180deg,#EFF6F7,#E3F0F1);
    color:var(--teal);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
    transition:opacity .55s ease}
  .hero__vidload.is-hidden{opacity:0;pointer-events:none}
  .hero__spinner{width:34px;height:34px;border-radius:50%;
    border:3px solid rgba(11,111,120,.22);border-top-color:var(--teal);animation:heroSpin .8s linear infinite}
  @keyframes heroSpin{to{transform:rotate(360deg)}}
  .hero__sub{font-size:.9rem;padding:.72rem .95rem;max-width:100%}
  .hero__bottom{gap:.8rem;width:100%}
  .hero__actions{width:100%;gap:.6rem;flex-wrap:nowrap}
  .hero__actions .btn{flex:1 1 50%;text-align:center;padding:.9rem .6rem;font-size:.86rem;white-space:normal}
  .hero__tertiary{font-size:.9rem}
  .chip{padding:.7rem 1.3rem}
  .marquee__track span{font-size:.9rem}
  .marquee__track{gap:1.6rem}
  .laptop__board{grid-template-columns:1fr}
  .board__side{border-left:0;border-top:1px solid #22304d;flex-direction:row}
  .board__tutor{width:40%;aspect-ratio:auto}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .astro__planet{animation:none}
  .reveal{opacity:1;transform:none}
}

/* ============ skip link (a11y) ============ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:var(--white);
  padding:.8rem 1.4rem;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* ============ desktop floating WhatsApp ============ */
.wa-float{position:fixed;right:1.4rem;bottom:1.4rem;z-index:940;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -8px rgba(18,140,66,.55);transition:transform .25s}
.wa-float:hover{transform:scale(1.1)}
@media (max-width:760px){.wa-float{display:none}}

/* ============ testimonials carousel ============ */
.storyslider{position:relative}
.stories{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.3rem;padding-bottom:.8rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 min(340px,82vw);scroll-snap-align:start}
.story__head{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
.story__face{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--teal-mid);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45);flex-shrink:0}
.story__head .story__grade{margin-bottom:0}
.storyslider__nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.storyslider__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-light);
  background:rgba(255,255,255,.06);color:var(--white);font-size:1.1rem;cursor:pointer;
  transition:background .2s,transform .2s}
.storyslider__btn:hover{background:var(--blue);transform:scale(1.06)}


/* ============ Version 3 client changes ============ */
.hero__kicker{font-size:clamp(.72rem,1.1vw,.85rem);letter-spacing:.34em;text-transform:uppercase;
  font-weight:700;color:var(--blue);margin-bottom:1rem}
.results__grid--3{grid-template-columns:repeat(3,1fr)}
.results__grid--3 .statcard{min-height:100%}
@media (max-width:820px){.results__grid--3{grid-template-columns:1fr}}
.builder__bar--solo{justify-content:center;text-align:center}
.builder__bar--solo .builder__heading{max-width:none}
.course__time{color:var(--ink);font-weight:800}

/* real lesson video player */
.lessonplayer{margin:0;display:flex;flex-direction:column;gap:1rem}
.lessonplayer__frame{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(15,63,74,.5);background:#000;aspect-ratio:4/3}
.lessonplayer__frame video{width:100%;height:100%;object-fit:cover;display:block}
.lessonplayer__live{position:absolute;top:.8rem;left:.8rem;font-size:.66rem;font-weight:800;
  letter-spacing:.08em;color:#fff;background:rgba(11,111,120,.9);padding:.28rem .7rem;
  border-radius:999px;backdrop-filter:blur(6px);pointer-events:none}
.lessonplayer__caption{font-size:.95rem;line-height:1.6;color:var(--text)}
.lessonplayer__caption strong{color:var(--ink)}
.lessonplayer__recap{display:block;margin-top:.6rem;font-family:'Georgia',serif;font-size:1.05rem;
  color:var(--blue);background:var(--aqua);border-left:3px solid var(--blue);
  padding:.6rem .9rem;border-radius:0 10px 10px 0}


/* ============ Version 4 client changes ============ */
.hero__est{font-family:var(--font-body);font-weight:700;font-size:clamp(.8rem,1.3vw,1rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal-mid);margin-top:.4rem}

/* courses: all 4 in one row */
.courses{grid-template-columns:repeat(4,1fr);max-width:none}
.courses .course__body h3{font-size:1.05rem}
@media (max-width:1100px){.courses{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto}}
@media (max-width:640px){.courses{grid-template-columns:1fr}}

/* testimonials back to static grid (client prefers over carousel) */
/* ===== Our Students page: full testimonial wall ===== */
.subpage--students{padding-top:0}
.ourstudents{padding-top:7.5rem;min-height:100vh}
.subpage__crumbs--light{color:var(--muted-light)}
.subpage__crumbs--light a{color:var(--blue-soft)}
.ourstudents__intro{max-width:44rem;color:#c9d3e4;font-size:1.02rem;line-height:1.65;margin:-1.4rem 0 1.8rem}
.filters--light{margin-bottom:2rem}
.filters--light .chip{background:rgba(255,255,255,.06);color:#dbe7e9;border:1px solid rgba(255,255,255,.16)}
.filters--light .chip.is-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.ourstudents__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;align-items:start}
.tcard{background:linear-gradient(150deg,rgba(15,63,74,.55),rgba(11,111,120,.28));border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:1.5rem 1.55rem;display:flex;flex-direction:column;gap:.9rem}
.tcard__head{display:flex;align-items:center;gap:1rem}
.tcard__face{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:top;flex:0 0 auto;
  border:3px solid #3fd0dd;box-shadow:0 0 0 5px rgba(63,208,221,.16),0 0 26px rgba(63,208,221,.5);
  transition:width .35s ease,height .35s ease,transform .35s ease}
.tcard:hover .tcard__face{transform:scale(1.05)}
.tcard.is-open .tcard__face{width:150px;height:150px}
.tcard__name{color:#fff;font-size:1.15rem;margin:0;line-height:1.2}
.tcard__meta{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#a9d3d7;margin:.25rem 0 0}
.tcard__quote{color:#dbeef0;font-size:.94rem;line-height:1.62;position:relative;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tcard__quote p{margin:0 0 .8em}
.tcard.is-open .tcard__quote{display:block;-webkit-line-clamp:none;overflow:visible}
.tcard__more{align-self:flex-start;background:none;border:1px solid rgba(255,255,255,.25);color:#7fd3da;
  font-weight:700;font-size:.8rem;letter-spacing:.05em;padding:.45rem 1rem;border-radius:999px;cursor:pointer;
  transition:border-color .25s,color .25s}
.tcard__more:hover{border-color:#7fd3da;color:#fff}
.ourstudents__cta{margin-top:3rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding-top:2rem}
.ourstudents__cta p{color:#fff;font-weight:700;font-size:1.1rem;margin-right:auto}
@media (max-width:860px){
  .ourstudents{padding-top:6rem}
  .tcard__face{width:92px;height:92px}
  .tcard.is-open .tcard__face{width:124px;height:124px}
  .ourstudents__grid{grid-template-columns:1fr}
  .filters--light{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.4rem}
}

/* ===== testimonial cards: circular photo + info panel, all equal size ===== */
.stories--grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:1.4rem;overflow:visible}
.stories--grid .story{flex:none;display:grid;grid-template-columns:150px 1fr;align-items:stretch;
  padding:0;border:none;border-radius:20px;overflow:hidden;background:transparent}
.story__photo{display:flex;align-items:center;justify-content:center;padding:1.1rem;
  background:radial-gradient(circle at 50% 42%,rgba(63,208,221,.16),transparent 68%),rgba(255,255,255,.04)}
.story__photo .story__face{width:116px;height:116px;border-radius:50%;object-fit:cover;object-position:top;
  border:3px solid #3fd0dd;box-shadow:0 0 0 5px rgba(63,208,221,.16),0 0 22px rgba(63,208,221,.5);margin:0}
.story__panel{background:linear-gradient(150deg,#0f3f4a 0%,#0b6f78 100%);color:#e7f5f6;
  padding:1.3rem 1.45rem;display:flex;flex-direction:column;justify-content:center;gap:.12rem}
.story__panel .story__grade{font-family:var(--font-display);font-size:2rem;line-height:1;color:#5fd6e2;margin:0 0 .4rem}
.story__name{font-size:1.12rem;color:#fff;margin:0;line-height:1.2}
.story__panel .story__meta{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#a9d3d7;margin:.18rem 0 .55rem}
.story__quote{font-size:.9rem;line-height:1.5;font-style:italic;color:#dbeef0;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:960px){.stories--grid{grid-template-columns:1fr}}
@media (max-width:480px){
  .stories--grid .story{grid-template-columns:1fr;text-align:center}
  .story__photo{padding:1.3rem 1rem .3rem}
  .story__panel{justify-content:flex-start}
  .story__quote{-webkit-line-clamp:5}
}

/* resource cards: handwriting preview image */
.resource{padding:0;overflow:hidden}
.resource__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--white)}
.resource__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.resource:hover .resource__img img{transform:scale(1.05)}
.resource h3{padding:1.1rem 1.4rem 0}
.resource>p{padding:0 1.4rem}
.resource__cta{padding:0 1.4rem 1.3rem}


/* ============ photo-backed stat cards ============ */
.statcard--photo{position:relative;overflow:hidden;border:none;aspect-ratio:1/1;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.7rem 1.5rem;color:#fff}
.statcard--photo .statcard__bg{position:absolute;inset:0;z-index:0}
.statcard--photo .statcard__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* neutral bottom scrim only — keeps the photo's true colours, no teal cast */
.statcard--photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,12,14,.74) 0%,rgba(8,12,14,.32) 34%,rgba(8,12,14,0) 58%)}
.statcard--photo>*{position:relative;z-index:2}
/* all text grouped at the bottom-left (cancel the base card's margin-top:auto on the meta) */
.statcard--photo .statcard__meta{margin-top:0;color:#d7dcde}
.statcard--photo .statcard__num{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.statcard--photo .statcard__what{color:#f2f5f6}
.statcard--photo .statcard__what strong{color:#fff}
@media (max-width:820px){.statcard--photo{aspect-ratio:1/1;min-height:0}}
/* steps: reserve two title lines so the 01–04 paragraphs start on the same row */
@media (min-width:861px){.step h3{min-height:2.6em;line-height:1.3}}
/* fees cards under the timetable */
.fees{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2rem}
.fee{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.35rem 1.5rem;display:flex;flex-direction:column;gap:.15rem;text-align:center}
.fee__level{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:800}
.fee__price{font-family:var(--font-display);font-size:2rem;color:var(--ink);line-height:1.1}
.fee__per{font-size:.82rem;color:var(--muted)}
@media (max-width:760px){.fees{grid-template-columns:1fr;gap:.8rem}}


/* ============ Inside-a-lesson 3-pane grid (video left · avatar top-right · steps bottom-right) ============ */
.lessonplayer__frame{position:relative}
/* the whole lesson block sits inside an iPad-style device shell */
.lessongrid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:.85rem;
  margin:1.8rem auto 0;align-items:stretch;height:min(66vh,580px);position:relative;
  border:14px solid #10181c;border-radius:36px;padding:12px;
  background:linear-gradient(135deg,#f2f7f8 0%,#e2eef0 55%,#d5e7ea 100%);
  box-shadow:0 0 0 2px #38444a,0 46px 90px -38px rgba(15,63,74,.6)}
.lessongrid::before{ /* front camera, top bezel */
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;
  background:#0a0f11;box-shadow:inset 0 0 2px 1px #2c3a40,0 0 0 2px rgba(255,255,255,.05);z-index:5}
.lessongrid::after{ /* soft glass sheen across the screen */
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;z-index:4;
  background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%)}
.lessongrid>*{min-width:0}
.lessongrid__video{grid-column:1;grid-row:1 / 3;aspect-ratio:auto;position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 12px 28px -16px rgba(15,63,74,.4);background:#fff;border:1px solid var(--line)}
/* contain (not cover): the whole whiteboard stays visible — no working cropped off; white bg blends any padding */
.lessongrid__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
/* full square avatar — fills the free height above the steps panel, centred in the column */
.lessongrid__avatar{grid-column:2;grid-row:1;height:100%;width:auto;max-width:100%;aspect-ratio:1/1;
  justify-self:center;object-fit:cover;object-position:top;
  border-radius:14px;border:2px solid var(--white);background:#eef5f6;
  box-shadow:0 10px 24px -12px rgba(15,63,74,.45)}
.lessongrid__steps{grid-column:2;grid-row:2}
.solvesteps{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.85);border-radius:14px;box-shadow:0 10px 24px -14px rgba(15,63,74,.35);
  padding:1rem 1.15rem;height:100%;min-height:0;overflow:auto} /* frosted card on the "screen" */
/* one-line section title on desktop */
@media (min-width:861px){
  #demo .h2{font-size:clamp(1.6rem,3.3vw,3rem);white-space:nowrap;margin-bottom:1.8rem}
}
/* solve-steps: compact one-step-at-a-time card, synced to the video
   (.solvesteps prefix outranks the base li rule further down) */
.solvesteps .solvesteps__list{position:relative;min-height:6.1em} /* room for the longer step 2 wording */
.solvesteps .solvesteps__list li{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.solvesteps .solvesteps__list li.is-current{opacity:1;transform:none;pointer-events:auto}
.solvesteps__nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.55rem}
.solvesteps__count{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.solvesteps__dots{display:flex;gap:.35rem}
.solvesteps__dot{width:24px;height:5px;border-radius:99px;background:rgba(11,111,120,.16);
  border:0;cursor:pointer;padding:0;transition:background .3s}
.solvesteps__dot.is-on{background:var(--blue)}
.solvesteps__dot:hover{background:var(--teal-mid)}
.demo__under{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;margin-top:1.6rem}
.ticklist--2col{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.6rem;margin:0;flex:1;min-width:min(100%,32rem)}
@media (max-width:860px){
  .lessongrid{grid-template-columns:1fr;grid-template-rows:none;gap:1.2rem;height:auto;max-height:none;
    border:none;border-radius:0;padding:0;background:none;box-shadow:none}
  .lessongrid::before,.lessongrid::after{display:none}
  .solvesteps{background:var(--aqua);border:1px solid var(--line)}
  /* the video sizes itself (no absolute-fill tricks — iOS Safari collapsed those to 0 height) */
  .lessongrid__video{grid-column:1;grid-row:auto;position:relative;aspect-ratio:auto;height:auto;
    border-radius:16px;border:1px solid rgba(15,63,74,.18);box-shadow:0 18px 44px -26px rgba(15,63,74,.5)}
  .lessongrid__video video{position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block}
  .lessongrid__avatar{display:none} /* hidden unless the JS docks it into the video card below */
  /* speaking avatar as a small picture-in-picture in the video's corner (video-call style) */
  .lessongrid__video .lessongrid__avatar{display:block;position:absolute;left:auto;top:auto;right:.5rem;bottom:.5rem;
    width:clamp(68px,22vw,92px);height:auto;aspect-ratio:1/1;object-fit:cover;object-position:top;
    border-radius:12px;border:2px solid #fff;box-shadow:0 8px 20px rgba(15,63,74,.4);z-index:3}
  .lessongrid__steps{grid-column:1;grid-row:auto}
  .ticklist--2col{grid-template-columns:1fr}
}
.solvesteps__title{font-weight:800;color:var(--ink);font-size:.9rem;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:.5rem}
.solvesteps__list{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:.4rem;margin:0}
.solvesteps__list li{counter-increment:step;position:relative;padding-left:1.7rem;font-size:.86rem;
  line-height:1.45;color:var(--text)}
.solvesteps__list li::before{content:counter(step);position:absolute;left:0;top:.05rem;width:1.2rem;height:1.2rem;
  border-radius:50%;background:var(--blue);color:#fff;font-size:.72rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.solvesteps__list b{color:var(--ink)}
.solvesteps__list em{font-family:'Georgia',serif;font-style:italic;color:var(--blue);white-space:nowrap}
@media (max-width:560px){
  .lessonplayer__foot{flex-direction:column}
  .lessonplayer__avatar{width:104px;height:104px}
}

/* ============ subpages (inherited pages: model solutions, blog, about) ============ */
.subpage{padding:7.5rem 0 5rem;background:var(--paper);min-height:70vh}
.subpage__crumbs{font-size:.85rem;color:var(--muted);margin-bottom:1.6rem}
.subpage__crumbs a{color:var(--blue);text-decoration:none;font-weight:600}
.subpage__crumbs a:hover{text-decoration:underline}
.subpage__title{font-family:var(--font-display);text-transform:uppercase;line-height:.95;
  font-size:clamp(2rem,5vw,3.4rem);color:var(--ink);margin-bottom:1.8rem}
.subpage__thumb img{border-radius:var(--radius);margin-bottom:1.8rem}
.entry{line-height:1.75;color:var(--text);font-size:1.02rem}
.entry p{margin-bottom:1.1rem}
.entry h2,.entry h3{color:var(--ink);margin:1.8rem 0 .8rem;line-height:1.25}
.entry h2{font-size:1.5rem}.entry h3{font-size:1.2rem}
.entry ul,.entry ol{margin:0 0 1.1rem 1.4rem}
.entry li{margin-bottom:.4rem}
.entry a{color:var(--blue);font-weight:600}
.entry img{border-radius:14px;margin:1.2rem 0}
.entry table{border-collapse:collapse;width:100%;margin:1.2rem 0}
.entry td,.entry th{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.entry th{background:var(--aqua);color:var(--ink)}
.entry blockquote{border-left:3px solid var(--blue);padding-left:1.1rem;color:var(--muted);
  font-style:italic;margin:1.2rem 0}
.entry embed,.entry iframe,.entry object{max-width:100%;border-radius:14px}
.subpage__children{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:2.2rem}
.reveal-static{opacity:1;transform:none}
.subpage__cta{margin-top:3.2rem;padding:1.8rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.subpage__cta p{font-weight:700;color:var(--ink);margin-right:auto}

/* WP menu items inside the top bar keep the flex layout */
.nav__links li,.mobilemenu li{display:contents;list-style:none}
.nav__links ul,.mobilemenu ul{display:contents}

/* ============ WP menus: top bar + hover dropdowns ============ */
.nav__links li{list-style:none;position:relative;display:flex;align-items:center}
.nav__links li > a{font-size:.9rem;font-weight:600;text-decoration:none;opacity:.85;transition:opacity .2s}
.nav__links li > a:hover{opacity:1}
.nav__links li.menu-item-has-children > a::after{content:" ▾";font-size:.7em;opacity:.7}
.nav__links .sub-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  flex-direction:column;gap:.1rem;min-width:240px;padding:.55rem;z-index:1100;
  background:rgba(22,39,45,.96);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;box-shadow:0 18px 40px -16px rgba(15,63,74,.5)}
.nav__links li:hover > .sub-menu,.nav__links li:focus-within > .sub-menu{display:flex}
.nav__links .sub-menu li{display:block}
.nav__links .sub-menu a{display:block;padding:.55rem .85rem;border-radius:9px;color:#fff;opacity:.9;
  font-size:.88rem;white-space:nowrap}
.nav__links .sub-menu a:hover{background:rgba(255,255,255,.1);opacity:1}
.mobilemenu li{list-style:none}
.mobilemenu ul{display:contents}
.mobilemenu .sub-menu{display:flex;flex-direction:column;gap:1rem;padding:.9rem 0 .2rem 1.2rem}
.mobilemenu .sub-menu a{font-size:1.05rem;opacity:.85}
/* ============ archive card grid (model solutions categories, blog) ============ */
.archgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.3rem;margin-top:2rem}
.archcard{display:flex;flex-direction:column;gap:.7rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem;text-decoration:none;transition:transform .3s,box-shadow .3s}
.archcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(15,63,74,.25)}
.archcard img{width:100%;height:180px;object-fit:cover;object-position:top;border-radius:10px}
.archcard__ph{display:flex;align-items:center;justify-content:center;height:180px;background:var(--aqua);
  border-radius:10px;font-size:3rem;color:var(--teal-mid);font-family:Georgia,serif}
.archcard h3{font-size:1rem;color:var(--ink);line-height:1.35;text-transform:uppercase;letter-spacing:.02em}
.archcard__more{margin-top:auto;color:var(--blue);font-weight:700;font-size:.9rem}
.archnav{margin-top:2.5rem}
.archnav .nav-links{display:flex;gap:.6rem;flex-wrap:wrap}
.archnav a,.archnav .current{padding:.5rem .95rem;border:1px solid var(--line);border-radius:9px;
  text-decoration:none;color:var(--ink);font-weight:600}
.archnav .current{background:var(--ink);color:var(--white)}

/* ============ nav fixes: no label wrap, admin-bar offset, earlier burger ============ */
.nav__links li > a{white-space:nowrap}
body.admin-bar .nav{top:32px}
body.admin-bar .mobilemenu{padding-top:8.5rem}
@media (max-width:1180px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}

/* coming-soon holding page */
.comingsoon__inner{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-top:2rem}
.comingsoon__copy{max-width:38rem;color:var(--text);font-size:1.05rem;line-height:1.7;margin-bottom:1rem}
.comingsoon__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem}
.comingsoon__ghost{color:var(--ink);border-color:rgba(22,39,45,.35)}
.comingsoon__note{font-size:.92rem;color:var(--muted)}
.comingsoon__note a{color:var(--blue);font-weight:600}

/* tuition landing pages */
.tl .subpage__crumbs{margin-bottom:1rem}
.tl__h1{margin-bottom:1rem}
.tl__sub{max-width:44rem;font-size:1.1rem;line-height:1.65;color:var(--text);margin-bottom:2.2rem}
.tl__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2.2rem;align-items:start}
.tl__stat{display:flex;align-items:center;gap:1rem;background:var(--aqua);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin-bottom:1.6rem}
.tl__statnum{font-family:var(--font-display);font-size:2.6rem;color:var(--blue);line-height:1}
.tl__stattext{font-size:.95rem;color:var(--text);line-height:1.4}
.tl__quotes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.8rem}
.tl__quote{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;margin:0}
.tl__quote p{font-style:italic;color:var(--text);font-size:.95rem;line-height:1.55;margin:0 0 .6rem}
.tl__quote cite{font-style:normal;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);font-weight:700}
.tl__morequotes{margin-top:1rem}
.tl__morequotes a{color:var(--blue);font-weight:700;text-decoration:none}
.tl__panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;position:sticky;top:6rem}
.tl__panelhead{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:800;margin:0 0 .6rem}
.tl__facts{display:flex;flex-direction:column;gap:.45rem;margin:0 0 1.1rem}
.tl__facts div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.tl__facts dt{color:var(--muted)}
.tl__facts dd{color:var(--ink);font-weight:700;margin:0;text-align:right}
.tl__panel .course__times{margin-bottom:.4rem}
.tl__cta{width:100%;margin-top:.7rem;text-align:center;justify-content:center}
.tl__faq{margin-top:3rem;max-width:52rem}
.tl__faqhead{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;color:var(--ink);margin-bottom:1.1rem}
.tl__others{margin-top:2.6rem}
.tl__otherlinks{display:flex;gap:.7rem;flex-wrap:wrap}
.tl__other{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.1rem;
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem;transition:border-color .25s,color .25s}
.tl__other:hover{border-color:var(--blue);color:var(--blue)}
@media (max-width:860px){
  .tl__grid{grid-template-columns:1fr}
  .tl__quotes{grid-template-columns:1fr}
  .tl__panel{position:static}
}