/* =====================================================================
   ESANSKAR Robotics Academy — website v3 "Bright Classroom"
   Design: client-approved mockups (light edu-tech, rounded cards,
   pastel icon chips, handwriting marginalia)
   Structure: successabacus.com content rhythm
   ================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --white: oklch(1 0 0);
  --paper: oklch(0.99 0.004 250);
  --wash: oklch(0.975 0.012 250);
  --wash-2: oklch(0.965 0.018 265);

  --ink: oklch(0.33 0.12 262);          /* headline navy */
  --ink-soft: oklch(0.39 0.075 258);
  --body: oklch(0.43 0.035 258);
  --muted: oklch(0.52 0.03 258);
  --line: oklch(0.92 0.012 250);

  --blue: oklch(0.62 0.19 255);         /* primary */
  --blue-deep: oklch(0.52 0.18 258);
  --teal: oklch(0.68 0.11 215);
  --amber: oklch(0.80 0.15 72);
  --green: oklch(0.68 0.13 160);
  --violet: oklch(0.62 0.17 295);
  --pink: oklch(0.70 0.15 5);
  --orange: oklch(0.72 0.16 45);

  --t-blue: oklch(0.955 0.025 250);
  --t-green: oklch(0.955 0.03 160);
  --t-violet: oklch(0.955 0.025 295);
  --t-amber: oklch(0.96 0.035 80);
  --t-pink: oklch(0.955 0.025 5);
  --t-teal: oklch(0.955 0.03 215);

  --font-display: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
  --font-dev: 'Baloo 2', 'Nirmala UI', 'Mangal', sans-serif;

  --r-xs: 10px; --r-sm: 14px; --r: 20px; --r-lg: 28px; --r-xl: 36px;
  --sh-sm: 0 2px 10px oklch(0.45 0.08 258 / .07);
  --sh: 0 10px 30px oklch(0.45 0.08 258 / .10);
  --sh-lg: 0 20px 50px oklch(0.45 0.08 258 / .13);
  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --section: clamp(3rem, 6.5vw, 5.75rem);
  --nav-h: 76px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
/* Lenis drives the scroll itself; native smooth scrolling must stand down */
html.lenis,html.lenis body{height:auto}
html.lenis-smooth{scroll-behavior:auto !important}
html.lenis-stopped{overflow:hidden}
.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--font-body);font-size:clamp(.975rem,.98vw,1.05rem);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
/* an icon dropped into running text sizes to the text, never to the box */
h1 svg,h2 svg,h3 svg,h4 svg,p svg,li svg,b svg,td svg,th svg{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.12em}
a{color:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);margin:0;line-height:1.14;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.65rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.1vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.5rem)}
h4{font-size:1.05rem}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
::selection{background:oklch(0.62 0.19 255 / .18)}

.container{width:min(100% - 2*var(--gutter), var(--container));margin-inline:auto}
.container--wide{width:min(100% - 2*var(--gutter), 1400px)}
.sec{padding-block:var(--section);position:relative}
.sec--tight{padding-block:calc(var(--section)*.62)}
.sec--wash{background:linear-gradient(180deg,var(--white),var(--wash) 35%,var(--wash) 65%,var(--white))}
.sec--tint{background:var(--wash)}
.sec--blue{background:linear-gradient(135deg,oklch(0.97 0.02 250),oklch(0.965 0.028 270))}

/* ---------- 3. Type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:700;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.9rem}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--amber)}
.eyebrow--plain::before{display:none}
.lede{font-size:clamp(1rem,1.15vw,1.12rem);color:var(--body);max-width:62ch}
.hand{font-family:var(--font-hand);font-size:clamp(1.3rem,2vw,1.75rem);color:var(--blue-deep);line-height:1.15;display:inline-block}
.hand--amber{color:oklch(0.62 0.16 60)}
.dev{font-family:var(--font-dev);font-weight:600}
.t-blue{color:var(--blue)}.t-teal{color:var(--teal)}.t-amber{color:var(--amber)}
.t-ink{color:var(--ink)}.t-green{color:var(--green)}.t-violet{color:var(--violet)}
.muted{color:var(--muted)}
.sec-head{max-width:640px;margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--row{max-width:none;display:grid;gap:1.25rem;align-items:end}
@media (min-width:900px){.sec-head--row{grid-template-columns:minmax(0,1fr) auto}}
.sec-head p{margin-top:.75rem}

/* ---------- 4. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;padding:.8rem 1.5rem;border-radius:999px;border:2px solid transparent;font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s}
.btn svg{width:17px;height:17px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--blue);color:var(--white);box-shadow:0 8px 20px oklch(0.62 0.19 255 / .32)}
.btn--primary:hover{background:var(--blue-deep);box-shadow:0 14px 28px oklch(0.62 0.19 255 / .38)}
.btn--amber{background:var(--amber);color:oklch(0.3 0.09 70);box-shadow:0 8px 20px oklch(0.80 0.15 72 / .35)}
.btn--ghost{background:var(--white);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-sm)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--light{background:var(--white);color:var(--blue)}
.btn--outline-light{border-color:oklch(1 0 0 / .45);color:var(--white)}
.btn--outline-light:hover{background:oklch(1 0 0 / .12)}
.btn--sm{min-height:42px;padding:.55rem 1.1rem;font-size:.86rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.play{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:var(--white);margin-right:-.3rem}
.play svg{width:12px;height:12px}

/* ---------- 5. Cards & chips ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.25rem,2vw,1.75rem);box-shadow:var(--sh-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card--lift:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.card--flat{box-shadow:none}
.card--pad-lg{padding:clamp(1.5rem,2.8vw,2.4rem)}
.card--blue{background:var(--t-blue);border-color:oklch(0.9 0.035 250)}
.card--green{background:var(--t-green);border-color:oklch(0.9 0.04 160)}
.card--violet{background:var(--t-violet);border-color:oklch(0.9 0.035 295)}
.card--amber{background:var(--t-amber);border-color:oklch(0.91 0.05 80)}
.card--pink{background:var(--t-pink);border-color:oklch(0.9 0.035 5)}
.card--teal{background:var(--t-teal);border-color:oklch(0.9 0.04 215)}
.card h3{margin-bottom:.5rem;text-wrap:balance}
/* two cards side by side read as a pair, so their body copy starts on the
   same line even when one heading wraps and the other does not */
@media (min-width:720px){.grid--2 > .card h3,.grid--3 > .card h3{min-height:2.3em}}
.card > p:last-child{margin-bottom:0}

.ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none;margin-bottom:1rem}
.ico svg{width:25px;height:25px}
.ico--sm{width:42px;height:42px;border-radius:13px;margin-bottom:0}
.ico--sm svg{width:20px;height:20px}
.ico--blue{background:var(--t-blue);color:var(--blue)}
.ico--green{background:var(--t-green);color:oklch(0.55 0.13 160)}
.ico--violet{background:var(--t-violet);color:var(--violet)}
.ico--amber{background:var(--t-amber);color:oklch(0.65 0.14 62)}
.ico--pink{background:var(--t-pink);color:var(--pink)}
.ico--teal{background:var(--t-teal);color:oklch(0.58 0.11 215)}

.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:999px;background:var(--t-blue);color:var(--blue-deep);font-size:.76rem;font-weight:700;letter-spacing:.02em}
.pill svg{width:14px;height:14px}
.pill--amber{background:var(--t-amber);color:oklch(0.5 0.13 62)}
.pill--green{background:var(--t-green);color:oklch(0.48 0.12 160)}
.pill--violet{background:var(--t-violet);color:var(--violet)}
.pill--pink{background:var(--t-pink);color:oklch(0.52 0.16 5)}
.pill--white{background:var(--white);color:var(--ink);box-shadow:var(--sh-sm)}

.grid{display:grid;gap:clamp(1rem,1.8vw,1.5rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid--5{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}

.ticks{list-style:none;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.85rem;font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.18rem;width:20px;height:20px;border-radius:50%;background:var(--t-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318a06e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks--blue li::before{background-color:var(--t-blue);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7dfb' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.dots{list-style:none;display:grid;gap:.5rem}
.dots li{position:relative;padding-left:1.1rem;font-size:.93rem}
.dots li::before{content:"";position:absolute;left:0;top:.6rem;width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* ---------- 6. Navigation ---------- */
.nav{position:sticky;top:0;z-index:90;background:oklch(1 0 0 / .97);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:1rem;min-height:var(--nav-h)}
.nav__brand{display:flex;align-items:center;flex:none;text-decoration:none}
.nav__brand img{height:46px;width:auto}
@media (max-width:479px){.nav__brand img{height:38px}}
.nav__links{display:none;margin-inline:auto;align-items:center;gap:.2rem;list-style:none}
@media (min-width:1240px){.nav__links{display:flex}}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:.3rem;padding:.6rem .7rem;border-radius:10px;font-size:.9rem;font-weight:600;white-space:nowrap;color:var(--ink-soft);text-decoration:none;transition:color .2s}
.nav__link:hover{color:var(--blue)}
.nav__link::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.3rem;height:3px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--blue);background:var(--t-blue)}
.nav__drop{position:relative}
.nav__drop > .nav__link svg{width:13px;height:13px;transition:transform .25s}
.nav__drop:hover > .nav__link svg{transform:rotate(180deg)}
.nav__menu{position:absolute;left:0;top:100%;min-width:235px;padding:.5rem;margin:0;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s var(--ease)}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{display:block;padding:.55rem .7rem;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink-soft);text-decoration:none}
.nav__menu a:hover{background:var(--t-blue);color:var(--blue)}
.nav__right{display:flex;align-items:center;gap:.6rem;margin-left:auto}
@media (min-width:1240px){.nav__right{margin-left:0}}
.nav__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink-soft);cursor:pointer}
.nav__icon svg{width:18px;height:18px}
.nav__icon:hover{color:var(--blue);border-color:var(--blue)}
.nav__cta{display:none}
@media (min-width:600px){.nav__cta{display:inline-flex}}
.burger{display:grid;place-items:center;gap:4px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--white);cursor:pointer}
@media (min-width:1240px){.burger{display:none}}
.burger span{display:block;width:19px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger.is-on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--nav-h) 0 0;z-index:88;background:var(--white);padding:1.25rem var(--gutter) 2.5rem;overflow-y:auto;opacity:0;transform:translateY(-10px);visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.drawer.is-open{opacity:1;transform:none;visibility:visible}
@media (min-width:1240px){.drawer{display:none}}
.drawer a{display:block;padding:.85rem .25rem;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--ink);text-decoration:none}
.drawer a.sub{padding-left:1.25rem;font-size:.98rem;font-family:var(--font-body);color:var(--ink-soft)}
.drawer .btn{margin-top:1.5rem}
.search{position:fixed;inset:0;z-index:95;display:grid;place-items:start center;padding-top:18vh;background:oklch(0.33 0.12 262 / .35);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s}
.search.is-open{opacity:1;visibility:visible}
.search__box{width:min(100% - 2rem,620px);background:var(--white);border-radius:var(--r);padding:1.25rem;box-shadow:var(--sh-lg)}
.search__box input{width:100%;min-height:52px;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;color:var(--ink)}
.search__hits{list-style:none;margin-top:.75rem;max-height:46vh;overflow:auto}
.search__hits a{display:block;padding:.7rem .85rem;border-radius:10px;text-decoration:none;color:var(--ink-soft);font-weight:500}
.search__hits a:hover{background:var(--t-blue);color:var(--blue)}
.search__hits small{display:block;color:var(--muted);font-weight:400}

/* ---------- 7. Decorative blobs ---------- */
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;opacity:.75}
.blob--1{width:min(42vw,430px);aspect-ratio:1;background:radial-gradient(circle at 35% 35%,oklch(0.95 0.045 250),transparent 68%)}
.blob--2{width:min(32vw,330px);aspect-ratio:1;background:radial-gradient(circle at 60% 40%,oklch(0.96 0.045 80),transparent 68%)}
.blob--3{width:min(28vw,300px);aspect-ratio:1;background:radial-gradient(circle at 50% 50%,oklch(0.955 0.04 295),transparent 68%)}
.doodle{position:absolute;color:oklch(0.80 0.06 250);pointer-events:none;z-index:0}
.doodle svg{width:100%;height:auto}

/* ---------- 8. Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(170deg,oklch(0.985 0.012 250),oklch(0.97 0.022 262) 55%,var(--white))}
.hero__in{position:relative;z-index:2;display:grid;gap:clamp(2rem,4vw,3rem);align-items:center;padding-block:clamp(2.25rem,4.5vw,3.75rem) clamp(2.5rem,5vw,4rem)}
@media (min-width:980px){.hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,1.12fr)}}
.hero h1{margin-bottom:1rem}
.hero__kicker{display:block;margin-bottom:.4rem}
.hero__sub{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--ink);margin-bottom:.8rem}
.hero__art{position:relative}
.hero__art img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.hero__badge{position:absolute;right:clamp(.5rem,2vw,1.25rem);top:clamp(.5rem,2vw,1.25rem);display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;background:oklch(1 0 0 / .95);backdrop-filter:blur(6px);border-radius:999px;box-shadow:var(--sh)}
.hero__badge .ico{margin:0}
.hero__badge b{display:block;font-family:var(--font-display);font-size:1.02rem;color:var(--ink);line-height:1.1}
.hero__badge span{font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.hero__badge em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.hero--page{padding-block:0}
.hero--page .hero__in{padding-block:clamp(2rem,3.6vw,3rem)}
.hero--page h1{font-size:clamp(1.95rem,4vw,3.1rem)}
.hero__facts{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;margin-top:1.5rem}
.hero__fact{display:flex;align-items:center;gap:.55rem;font-size:.84rem;font-weight:600;color:var(--ink-soft);line-height:1.2}
.hero__fact em{display:block;font-style:normal;font-weight:400;font-size:.76rem;color:var(--muted)}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--blue)}

/* quick-link strip that straddles the hero */
.quicklinks{position:relative;z-index:3;margin-top:clamp(-1.5rem,-2vw,-2.5rem)}
.quicklinks__grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));background:var(--white);border-radius:var(--r-lg);padding:clamp(.9rem,1.4vw,1.1rem);box-shadow:var(--sh-lg)}
.ql{display:flex;flex-direction:column;gap:.45rem;padding:1rem;border-radius:var(--r-sm);text-decoration:none;transition:transform .3s var(--ease)}
.ql:hover{transform:translateY(-4px)}
.ql b{font-family:var(--font-display);font-size:1rem;color:var(--ink);font-weight:600}
.ql span{font-size:.8rem;color:var(--muted)}
.ql .arrow{align-self:flex-end;margin-top:.2rem;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:oklch(1 0 0 / .75)}
.ql .arrow svg{width:13px;height:13px}

/* ---------- 9. Stats ---------- */
.stats{display:grid;gap:clamp(.9rem,1.6vw,1.4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.stat{display:flex;align-items:center;gap:.9rem}
.stat__n{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--ink);line-height:1}
.stat__l{font-size:.85rem;color:var(--muted);line-height:1.25}
.stat-ribbon{background:var(--white);border-radius:var(--r-lg);padding:clamp(1.25rem,2.4vw,2rem);box-shadow:var(--sh);border:1px solid var(--line)}

/* ---------- 10. Programme / course cards ---------- */
.course{display:flex;flex-direction:column;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.course:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.course__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--wash)}
.course__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.course:hover .course__media img{transform:scale(1.05)}
.course__tag{position:absolute;left:.75rem;top:.75rem}
.course__body{display:flex;flex-direction:column;gap:.65rem;padding:1.25rem;flex:1}
.course__body h3{margin:0}
.course__tagline{font-weight:600;color:var(--blue);font-size:.92rem}
.course__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;padding-top:.35rem}
.course__meta .pill{font-size:.72rem;padding:.3rem .65rem}

/* filter tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.5rem,2.5vw,2.25rem)}
.tab{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink-soft);font:600 .88rem/1 var(--font-body);cursor:pointer;transition:all .25s var(--ease)}
.tab svg{width:16px;height:16px}
.tab:hover{border-color:var(--blue);color:var(--blue)}
.tab.is-on{background:var(--blue);border-color:var(--blue);color:var(--white);box-shadow:0 8px 18px oklch(0.62 0.19 255 / .3)}
[data-filter-item]{transition:opacity .3s,transform .3s}
[data-filter-item].is-hidden{display:none}

/* ---------- 11. Founder band ---------- */
.founder{display:grid;gap:clamp(1.5rem,3vw,2.75rem);align-items:center}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.founder__photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);background:var(--t-blue)}
.founder__photo img{width:100%}
.founder__badge{position:absolute;left:1rem;bottom:1rem;background:oklch(1 0 0 / .94);backdrop-filter:blur(6px);border-radius:var(--r-sm);padding:.7rem 1rem;box-shadow:var(--sh-sm)}
.founder__badge b{display:block;font-family:var(--font-display);color:var(--ink)}
.founder__badge span{font-size:.76rem;color:var(--blue);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.quote{position:relative;padding:clamp(1.25rem,2.4vw,2rem);background:var(--white);border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--line);font-family:var(--font-display);font-weight:400;font-size:clamp(1.02rem,1.45vw,1.22rem);line-height:1.55;color:var(--ink);margin:0 0 1.5rem}
.quote::before{content:"“";position:absolute;left:1rem;top:-.5rem;font-family:var(--font-display);font-size:4rem;color:var(--amber);line-height:1}
.quote p{padding-left:1.75rem}

/* ---------- 12. Timeline / process / awards ---------- */
.steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));counter-reset:step}
.step{position:relative;text-align:center;padding:1.25rem 1rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.step .ico{margin-inline:auto}
.step b{display:block;font-family:var(--font-display);color:var(--ink);margin-bottom:.3rem}
.step span{font-size:.84rem;color:var(--muted)}
.step__n{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--white);font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:30px;text-align:center;border:2px solid var(--white);box-shadow:0 4px 10px oklch(0.62 0.19 255 / .35)}

.timeline{position:relative;display:grid;gap:1rem;padding-left:1.75rem}
.timeline::before{content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(var(--t-blue),var(--line))}
.timeline li{position:relative;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.15rem;box-shadow:var(--sh-sm)}
.timeline li::before{content:"";position:absolute;left:-1.75rem;top:1.2rem;width:16px;height:16px;border-radius:50%;background:var(--white);border:4px solid var(--blue)}
.timeline b{display:block;font-family:var(--font-display);color:var(--ink)}
.timeline time{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;color:var(--blue);text-transform:uppercase}

/* ---------- 13. Events ---------- */
.event{display:flex;flex-direction:column;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.event:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.event__media{aspect-ratio:21/9;overflow:hidden}
.event__media img{width:100%;height:100%;object-fit:cover}
.event__body{display:flex;gap:1rem;padding:1.1rem 1.25rem 1.35rem;align-items:flex-start}
.date{flex:none;width:62px;border-radius:var(--r-xs);padding:.5rem .25rem;text-align:center;color:var(--white);line-height:1.1}
.date b{display:block;font-family:var(--font-display);font-size:1.3rem}
.date span{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.date--blue{background:var(--blue)}.date--green{background:var(--green)}.date--violet{background:var(--violet)}
.date--amber{background:var(--amber);color:oklch(0.3 0.09 70)}.date--pink{background:var(--pink)}.date--teal{background:var(--teal)}
.event h3{font-size:1.08rem;margin-bottom:.2rem}
.event__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.55rem;font-size:.78rem;color:var(--muted)}
.event__meta span{display:inline-flex;align-items:center;gap:.3rem}
.event__meta svg{width:13px;height:13px;color:var(--blue)}

/* ---------- 14. Gallery ---------- */
.gal{display:grid;gap:clamp(.75rem,1.4vw,1.1rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.gal figure{position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-sm);background:var(--wash)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:999px;background:var(--white);font-size:.76rem;font-weight:600;color:var(--ink);box-shadow:var(--sh-sm)}
.gal figcaption svg{width:14px;height:14px;color:var(--blue)}
.gal--tall figure:nth-child(4n+1) img{aspect-ratio:1}

/* ---------- 15. Tables, FAQ, forms ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white);box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:.85rem 1.1rem;text-align:left;font-size:.92rem;border-bottom:1px solid var(--line)}
th{background:var(--t-blue);font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.86rem;letter-spacing:.02em}
th[scope="row"]{width:38%;font-family:var(--font-body);font-weight:700;color:var(--ink)}
th[scope="row"] svg{color:var(--blue);margin-right:.55rem}
tbody tr:nth-child(even) td,tbody tr:nth-child(even) th[scope="row"]{background:oklch(0.975 0.008 250)}
tbody tr:hover td,tbody tr:hover th[scope="row"]{background:var(--t-blue)}
td a{color:var(--blue-deep);font-weight:600;text-decoration:none;border-bottom:1px solid oklch(0.62 0.19 255 / .35)}
td a:hover{text-decoration:underline;border-bottom-color:transparent}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}

.faq{display:grid;gap:.75rem}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;cursor:pointer;font-family:var(--font-display);font-weight:500;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--t-blue);color:var(--blue);font-size:1.1rem;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--blue);color:var(--white)}
.faq .faq__a{padding:0 1.25rem 1.15rem;font-size:.94rem}

.field{display:grid;gap:.4rem;margin-bottom:.9rem}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.field label .req{color:var(--pink)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);font:inherit;font-size:.95rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px oklch(0.62 0.19 255 / .12)}
.form-note{font-size:.82rem;color:var(--muted);margin-top:.6rem}
.form-ok{display:none;margin-top:.9rem;padding:.85rem 1rem;border-radius:var(--r-sm);background:var(--t-green);color:oklch(0.42 0.12 160);font-size:.9rem;font-weight:600}
.form-ok.is-on{display:block}

.contact-line{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px dashed var(--line)}
.contact-line:last-child{border-bottom:0}
.contact-line b{display:block;font-family:var(--font-display);color:var(--ink);font-weight:600;margin-bottom:.15rem}
.contact-line p{font-size:.92rem;margin:0}
.todo{display:inline-block;padding:.1rem .5rem;border-radius:6px;background:var(--t-amber);color:oklch(0.5 0.13 62);font-size:.8rem;font-weight:600;font-family:var(--font-body)}

/* ---------- 16. Marquee ---------- */
.marquee{overflow:hidden;background:var(--ink);color:var(--white);padding:.9rem 0}
.marquee__track{display:flex;gap:2.5rem;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:2.5rem;font-family:var(--font-display);font-weight:500;font-size:clamp(.9rem,1.2vw,1.05rem);white-space:nowrap}
.marquee__item::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 17. CTA band ---------- */
.band{position:relative;overflow:hidden;background:linear-gradient(135deg,oklch(0.46 0.17 260),oklch(0.38 0.14 268));color:var(--white);border-radius:var(--r-xl);padding:clamp(1.75rem,4vw,3.25rem)}
.band h2{color:var(--white);max-width:20ch}
.band p{color:oklch(0.93 0.02 250);max-width:52ch}
.band__in{position:relative;z-index:2;display:grid;gap:1.75rem;align-items:center}
@media (min-width:900px){.band__in{grid-template-columns:minmax(0,1.3fr) auto}}
.band::after{content:"";position:absolute;right:-60px;top:-70px;width:280px;height:280px;border-radius:50%;background:oklch(1 0 0 / .07)}
.band::before{content:"";position:absolute;left:-40px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:oklch(1 0 0 / .05)}

/* ---------- 18. Footer ---------- */
.footer{background:var(--ink);color:oklch(0.9 0.02 250);padding-top:clamp(2.75rem,5vw,4rem);margin-top:0}
.footer__top{display:grid;gap:2rem 2.5rem;padding-bottom:2.5rem;align-items:start}
@media (min-width:760px){.footer__top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.footer__top{grid-template-columns:1.6fr .9fr .9fr .9fr 1.3fr}}
/* the wordmark carries blue letters that vanish on the navy footer, so it sits
   on its own white panel instead of being recoloured */
.footer__logo{display:inline-block;padding:.95rem 1.3rem;background:var(--white);border-radius:var(--r);box-shadow:0 10px 26px oklch(0.18 0.06 262 / .45)}
.footer__logo img{width:min(100%,240px)}
.footer img{width:min(100%,250px)}
.footer h4{color:var(--white);font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.footer ul{list-style:none;display:grid;gap:.6rem}
.footer a{color:oklch(0.88 0.02 250);text-decoration:none;font-size:.93rem}
.footer a:hover{color:var(--amber)}
.footer__tag{font-family:var(--font-display);color:var(--white);font-size:1.05rem;margin-top:1rem}
.footer__dev{font-family:var(--font-dev);color:oklch(0.85 0.03 250);margin-top:.2rem}
.footer__social{display:flex;gap:.6rem;margin-top:1.25rem}
.footer__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:oklch(1 0 0 / .1);color:var(--white)}
.footer__social a:hover{background:var(--blue)}
.footer__social svg{width:17px;height:17px}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between;align-items:center;padding:1.25rem 0 1.75rem;border-top:1px solid oklch(1 0 0 / .12);font-size:.82rem;color:oklch(0.82 0.02 250)}

/* ---------- 19. Misc ---------- */
.totop{position:fixed;right:1rem;bottom:1rem;z-index:80;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--blue);color:var(--white);box-shadow:var(--sh);opacity:0;transform:translateY(14px);pointer-events:none;transition:all .3s var(--ease);cursor:pointer}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:19px;height:19px}
.split{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--wide-l{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .split--wide-r{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.sticky{position:sticky;top:calc(var(--nav-h) + 1.25rem)}
.stack{display:grid;gap:1rem}
.center{text-align:center}
.mt-lg{margin-top:clamp(1.5rem,3vw,2.5rem)}

/* reveal on scroll */
html.js [data-rise]{opacity:0;transform:translateY(22px)}
html.js [data-rise].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html.js [data-rise]{opacity:1;transform:none}
  .marquee__track{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* quick-link chips sit on tinted cards, so the icon tile goes white */
.ql .ico{background:var(--white);box-shadow:var(--sh-sm)}

/* grid and flex children default to min-width:auto, which lets a wide table
   (or a long word) push the whole page sideways on a phone */
.split > *,.grid > *,.quicklinks__grid > *,.stats > *,.steps > *{min-width:0}
.table-wrap{max-width:100%}

/* =====================================================================
   20. Motion layer
   Everything here animates transform/opacity only, and the whole block
   is switched off under prefers-reduced-motion (see the end of the file).
   ================================================================== */

/* ---------- keyframes ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes wipeIn{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(16px)}
                  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.6) rotate(-8deg)}60%{transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14px,-18px,0) scale(1.05)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes shine{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes countPop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes lineDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- scroll-triggered reveals ---------- */
html.js [data-anim]{opacity:0}
html.js [data-anim].in{opacity:1;animation:riseIn .72s var(--ease) both;animation-delay:var(--d,0ms)}
html.js [data-anim="left"].in{animation-name:fadeLeft}
html.js [data-anim="right"].in{animation-name:fadeRight}
html.js [data-anim="zoom"].in{animation-name:zoomIn}
html.js [data-anim="wipe"].in{animation-name:wipeIn;animation-duration:.9s}
html.js [data-anim="pop"].in{animation-name:popIn;animation-duration:.6s}

/* ---------- hero entrance ---------- */
html.js .hero__in > div > *{opacity:0}
html.js.ready .hero__in > div > *{opacity:1;animation:riseIn .8s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
html.js .hero__art{opacity:0}
html.js.ready .hero__art{opacity:1;animation:zoomIn .95s var(--ease) both;animation-delay:.18s}
.hero__art img{transition:transform .5s var(--ease)}
.hero__badge{animation:floaty 5.5s ease-in-out 1.6s infinite}

/* ---------- drifting background shapes + pointer parallax ---------- */
.blob{animation:drift 22s ease-in-out infinite}
.blob--2{animation-duration:28s;animation-direction:reverse}
.blob--3{animation-duration:34s}
@media (min-width:980px){
  .hero__art{transform:translate3d(calc(var(--px,0) * 10px), calc(var(--py,0) * 10px), 0)}
  html.js.ready .hero__art{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
  .hero .blob{transform:translate3d(calc(var(--px,0) * -22px), calc(var(--py,0) * -18px), 0)}
}

/* ---------- sticky nav: shadow + reading progress ---------- */
.nav{transition:box-shadow .3s var(--ease),background .3s}
.nav.is-stuck{box-shadow:0 6px 24px oklch(0.45 0.08 258 / .10)}
.nav__bar{position:absolute;left:0;bottom:-1px;height:3px;width:100%;transform:scaleX(var(--p,0));transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--teal),var(--amber));pointer-events:none}

/* ---------- component micro-interactions ---------- */
.card .ico,.ql .ico,.step .ico{transition:transform .4s var(--ease)}
.card--lift:hover .ico,.ql:hover .ico,.step:hover .ico{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.btn--primary,.btn--amber{position:relative;overflow:hidden}
.btn--primary::after,.btn--amber::after{content:"";position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,oklch(1 0 0 / .32),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.btn--primary:hover::after,.btn--amber:hover::after{animation:shine .9s ease-out}
.pill{transition:transform .25s var(--ease)}
.btn-row .pill:hover,.hero__facts .hero__fact:hover .ico{transform:translateY(-3px)}
.stat__n.is-done{animation:countPop .5s var(--ease)}
.gal figcaption{transition:transform .35s var(--ease),opacity .35s}
.gal figure:hover figcaption{transform:translateY(-3px)}
.course__tag{transition:transform .35s var(--ease)}
.course:hover .course__tag{transform:translateY(-3px) rotate(-2deg)}
.event:hover .date{animation:floaty 1.6s ease-in-out infinite}
.footer__social a{transition:transform .3s var(--ease),background .25s}
.footer__social a:hover{transform:translateY(-4px) rotate(-6deg)}
.tab{transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.tab:hover{transform:translateY(-2px)}

/* ---------- timeline line draws itself ---------- */
html.js .timeline::before{transform:scaleY(0);transform-origin:top}
html.js .timeline.in::before{animation:lineDraw 1.1s var(--ease) .15s both}

/* ---------- reduced motion: switch the whole layer off ---------- */
@media (prefers-reduced-motion:reduce){
  html.js [data-anim],html.js .hero__in > div > *,html.js .hero__art{opacity:1 !important;animation:none !important;transform:none !important}
  .blob,.hero__badge,.nav__bar,.btn--primary::after,.btn--amber::after{animation:none !important}
  html.js .timeline::before{transform:none}
}

/* =====================================================================
   21. Signature interactive pieces (ported from site v1 / v2, restyled)
   split-flap board · the Level Dial · the pinned Journey conveyor
   ================================================================== */

/* ---------- split-flap board ---------- */
.flap{display:inline-flex;gap:5px;padding:.55rem .75rem;background:var(--ink);border-radius:14px;box-shadow:var(--sh);vertical-align:middle}
.flap--static{font-family:var(--font-display);font-weight:600;color:var(--white);padding:.55rem 1rem;font-size:1.05rem}
.flap__cell{position:relative;width:.86em;height:1.25em;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,2.1vw,1.6rem);line-height:1.25em;text-align:center;color:var(--white);perspective:260px}
.flap__cell::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:oklch(0.2 0.05 262);z-index:6}
.flap__half{position:absolute;inset:0;display:block;border-radius:5px;background:oklch(0.40 0.11 262);backface-visibility:hidden}
.flap__half--top{clip-path:inset(0 0 50% 0)}
.flap__half--bottom{clip-path:inset(50% 0 0 0)}
.flap__leaf{position:absolute;inset:0;transform-origin:50% 50%;transform-style:preserve-3d;z-index:4}
.flap__leaf .flap__half--bottom{transform:rotateX(180deg)}
.flap__leaf.is-flipping{transition:transform .5s cubic-bezier(.65,0,.35,1);transform:rotateX(-180deg)}
.flap-line{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.7rem);color:var(--ink);font-weight:600}

/* ---------- the Level Dial ---------- */
.dial{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:clamp(1.25rem,2.6vw,2.25rem)}
.dial__head{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:flex-end}
.dial__readout{display:flex;align-items:flex-end;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:clamp(2.8rem,7vw,5rem);line-height:.9;color:var(--ink)}
.dial__readout small{font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:.6rem}
.dial__rail{position:relative;padding:1.5rem 0 .25rem}
.dial__track{position:absolute;left:0;right:0;top:calc(1.5rem + 18px);height:14px;border-radius:999px;background:var(--wash-2);overflow:hidden}
.dial__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .25s var(--ease)}
.range{position:relative;z-index:2;-webkit-appearance:none;appearance:none;width:100%;background:transparent;margin:0;cursor:pointer}
.range:focus{outline:none}
.range::-webkit-slider-runnable-track{height:50px;background:transparent}
.range::-moz-range-track{height:50px;background:transparent}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:50px;height:50px;margin-top:0;border-radius:50%;background:var(--white);border:3px solid var(--blue);box-shadow:0 8px 20px oklch(0.62 0.19 255 / .35);cursor:grab;transition:transform .2s var(--ease)}
.range::-moz-range-thumb{width:50px;height:50px;border-radius:50%;background:var(--white);border:3px solid var(--blue);box-shadow:0 8px 20px oklch(0.62 0.19 255 / .35);cursor:grab}
.range:active::-webkit-slider-thumb{transform:scale(.95);cursor:grabbing}
.range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--amber);outline-offset:3px}
.dial__ticks{display:flex;justify-content:space-between;padding:0 18px;margin-top:.35rem;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--muted)}
.dial__ticks span.is-on{color:var(--blue)}
.dial__stages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:1rem}
.dial__stages span{text-align:center;padding:.5rem .3rem;border-radius:999px;background:var(--wash);font-size:.74rem;font-weight:600;color:var(--muted);transition:background .3s,color .3s}
.dial__stages span.is-on{background:var(--blue);color:var(--white)}
.dial__out{display:grid;gap:1.25rem;margin-top:1.75rem}
@media (min-width:900px){.dial__out{grid-template-columns:minmax(0,5fr) minmax(0,4fr);align-items:start}}
.dial__name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;color:var(--ink);margin:.4rem 0 .6rem}
.swap{transition:opacity .22s var(--ease),transform .22s var(--ease)}
.swap.is-out{opacity:0;transform:translateY(8px)}
/* the dial fills these from JS; .chip is the v3 pill in list form */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .85rem;border-radius:999px;background:var(--white);color:var(--ink);border:1px solid var(--line);font-size:.82rem;font-weight:600;box-shadow:var(--sh-sm)}
.chip.is-new{animation:popIn .45s var(--ease) both;animation-delay:var(--d,0ms)}
.dial__hint{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.78rem;color:var(--muted)}
.dial__hint svg{width:16px;height:16px;color:var(--blue)}

/* ---------- Journey conveyor ---------- */
.journey{position:relative;overflow:hidden}
.journey__inner{padding-block:var(--section)}


.journey__track{display:grid;gap:1.1rem;list-style:none;margin:0;padding:0}
@media (min-width:720px){.journey__track{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .journey__track{display:flex;grid-template-columns:none;gap:1.25rem;overflow-x:auto;scroll-snap-type:x proximity;
    padding:.5rem calc(var(--gutter) * .5) 1.25rem;margin-inline:calc(var(--gutter) * -.5);
    scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
  .journey__track::-webkit-scrollbar{display:none}
  .journey__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
  .journey__track .station{flex:none;width:min(330px,26vw);scroll-snap-align:start}
}


.station{position:relative;display:grid;gap:.5rem;align-content:start;padding:1.4rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.station:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.station.is-on{border-color:oklch(0.80 0.06 250);box-shadow:var(--sh)}
.station.is-on .station__verb{color:var(--blue)}
.station__num{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.station__verb{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1;color:var(--ink)}
.station p{font-size:.92rem;margin:0}
.station .ico{margin-bottom:.2rem}
.journey__rail{position:relative;height:56px;margin-top:1.5rem}
.journey__line{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:999px;background:var(--wash-2);overflow:hidden}
.journey__progress{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--teal),var(--amber));transform:scaleX(0);transform-origin:left;transition:transform .2s linear}
.journey__bot{position:absolute;left:0;top:0;width:56px;height:56px;display:grid;place-items:center;transition:transform .2s linear}
.journey__bot img{width:52px;height:auto;filter:drop-shadow(0 6px 10px oklch(0.45 0.08 258 / .25))}
.journey__labels{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
@media (max-width:1023px){
  .journey__rail{display:none}
  .journey__labels{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dial__hint svg,.chip.is-new{animation:none}
  .journey--pinned .journey__inner{min-height:0}
}

/* Company contact details and longer founder name. */
.footer__contact{font-size:.9rem;overflow-wrap:anywhere}
.footer__contact p{line-height:1.5}
.footer__contact a{text-decoration:none}
.footer__contact a:hover{text-decoration:underline;color:var(--amber)}
.footer__contact p{margin:.35rem 0}

.founder__badge{max-width:calc(100% - 2rem)}

/* =====================================================================
   22. Editorial patterns (30 Oct)
   The page was reading as "a grid of pastel cards with an icon on top",
   over and over. These are quieter, typographic alternatives used where
   the content is a list of points rather than a set of choices.
   ================================================================== */

/* a numbered list that behaves like a two-column editorial table */
.points{display:grid;border-top:1px solid var(--line)}
@media (min-width:760px){.points{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,3.25rem)}}
.points li{display:grid;grid-template-columns:2.2rem 1fr;gap:.35rem 1rem;align-items:baseline;
  padding:1.05rem .25rem 1.05rem 0;border-bottom:1px solid var(--line);list-style:none}
.points .n{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--blue);letter-spacing:-.02em}
.points b{grid-column:2;font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--ink);line-height:1.25}
.points p{grid-column:2;margin:.25rem 0 0;font-size:.93rem;color:var(--body)}
.points--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* five quiet columns under a rule - used for the 5C method */
.fivec{display:grid;gap:clamp(1rem,2vw,1.75rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.fivec > div{padding-top:.9rem;border-top:3px solid var(--line)}
.fivec > div:nth-child(1){border-color:var(--amber)}
.fivec > div:nth-child(2){border-color:var(--pink)}
.fivec > div:nth-child(3){border-color:var(--blue)}
.fivec > div:nth-child(4){border-color:var(--green)}
.fivec > div:nth-child(5){border-color:var(--violet)}
.fivec b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:.3rem}
.fivec p{margin:0;font-size:.88rem}
.fivec .c{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* facts in a row, separated by rules instead of boxed in cards */
.factrow{display:grid;gap:clamp(1rem,2.4vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  padding:clamp(1.1rem,2vw,1.5rem) 0;border-block:1px solid var(--line)}
.factrow > div{padding-left:1rem;border-left:3px solid var(--t-blue)}
.factrow b{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1rem;margin-bottom:.15rem}
.factrow p{margin:0;font-size:.88rem}

/* the enrol panel, full width at the end of a course page */
.enrol{display:grid;gap:1.25rem;align-items:center;padding:clamp(1.4rem,3vw,2.25rem);
  background:var(--t-amber);border:1px solid oklch(0.91 0.05 80);border-radius:var(--r-lg)}
@media (min-width:860px){.enrol{grid-template-columns:minmax(0,1fr) auto}}
.enrol h3{margin-bottom:.35rem}
.enrol p{margin:0;max-width:52ch}
.enrol .btn-row{flex-wrap:nowrap}
@media (max-width:519px){.enrol .btn-row{flex-wrap:wrap}.enrol .btn{width:100%}}

/* The decorative blobs sit outside their section's box. Clip them on the
   section itself - clipping on <body> is what used to stop the header
   sticking - and never on a section that holds a sticky column. */
.sec:has(> .blob):not(:has(.sticky)),
.quicklinks:has(> .blob){overflow:clip}

/* If the browser is not animating (background tab, battery saver, an occluded
   window), a reveal that starts at opacity 0 would leave the page blank. The
   script below detects a frozen timeline and sets this class, which drops the
   whole reveal layer and shows everything immediately. */
html.no-reveal [data-anim],
html.no-reveal [data-rise],
html.no-reveal .hero__in > div > *,
html.no-reveal .hero__art{opacity:1 !important;animation:none !important;transform:none !important}

/* =====================================================================
   23. Review pass, 30 Oct (evening)
   ================================================================== */

/* A card in a sidebar was stretching to the height of the article beside
   it, which is where those tall empty amber panels came from. Cards size
   to their content; only the column is tall. */
.stack{align-content:start}
.stack > *{align-self:start}
aside.sticky{align-self:start}
.enrol{align-items:center}

/* Page heroes: each section of the site gets its own treatment instead of
   the same photo-right layout everywhere. */
.hero--plain{background:linear-gradient(180deg,var(--wash) 0%,var(--white) 100%)}
.hero--plain .hero__in{grid-template-columns:none;max-width:52rem}
.hero--plain h1{font-size:clamp(2.3rem,5.2vw,4rem)}
.hero--dark{background:linear-gradient(140deg,oklch(0.32 0.11 262),oklch(0.26 0.1 266) 60%,oklch(0.3 0.12 280))}
.hero--dark .crumbs,.hero--dark .crumbs a{color:oklch(0.78 0.04 250)}
.hero--dark h1,.hero--dark .hero__sub{color:var(--white)}
.hero--dark .lede,.hero--dark p{color:oklch(0.9 0.025 250)}
.hero--dark .hand{color:oklch(0.86 0.09 90)}
.hero--dark .hero__fact{color:oklch(0.93 0.02 250)}
.hero--dark .hero__fact em{color:oklch(0.78 0.03 250)}
.hero--dark .pill--white{background:oklch(1 0 0 / .12);color:var(--white);box-shadow:none}
.hero--dark .btn--ghost{background:transparent;color:var(--white);border-color:oklch(1 0 0 / .4)}
.hero--band{background:var(--t-blue)}
.hero--rule .hero__in{border-bottom:1px solid var(--line)}

/* a hero that leads with numbers instead of a photo */
.hero__stats{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  margin-top:clamp(1.5rem,3vw,2.25rem);padding-top:1.25rem;border-top:1px solid var(--line)}
.hero__stats b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ink);line-height:1}
.hero__stats span{font-size:.84rem;color:var(--muted)}
.hero--dark .hero__stats{border-color:oklch(1 0 0 / .18)}
.hero--dark .hero__stats b{color:var(--white)}
.hero--dark .hero__stats span{color:oklch(0.82 0.03 250)}

/* a hero that leads with a strip of photographs */
.hero__mosaic{display:grid;gap:.6rem;grid-template-columns:repeat(4,1fr);margin-top:clamp(1.5rem,3vw,2rem)}
.hero__mosaic img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm)}
.hero__mosaic img:first-child{grid-row:span 2;aspect-ratio:1/2.07}
@media (max-width:719px){.hero__mosaic{grid-template-columns:repeat(3,1fr)}.hero__mosaic img:first-child{grid-row:auto;aspect-ratio:1}}

/* the level indicator on a course page hero */
.levelbar{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 .2rem}
.levelbar i{height:5px;flex:1;border-radius:999px;background:var(--line)}
.levelbar i.is-on{background:var(--blue)}
.levelbar span{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* stations and steps read as a sequence, so they are numbered, not iconed */
.station__idx{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--blue);line-height:1}
.step__ico{display:none}

/* the courses hero: the ladder as a list of rungs */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ladder a{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;
  padding:1rem 1.15rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s}
.ladder a:hover{transform:translateX(5px);box-shadow:var(--sh);border-color:oklch(0.82 0.06 250)}
.ladder .n{font-family:var(--font-display);font-weight:700;color:var(--blue);font-size:1rem}
.ladder b{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink)}
.ladder em{grid-column:2;font-style:normal;font-size:.85rem;color:var(--muted)}

/* the journey station index number sits where the icon used to */
.station__idx{display:block;margin-bottom:.15rem}

/* the level marker that replaced the icon tile in the programme list */
.lvl{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;
  background:var(--t-blue);color:var(--blue-deep);font-family:var(--font-display);font-weight:700;font-size:1.05rem}

/* =====================================================================
   24. Finish pass - the small things that separate "built" from "designed"
   ================================================================== */

/* Headings: tighter leading at display sizes, and a measured line length
   for body copy so paragraphs do not run the full width of a wide screen. */
h1{line-height:1.04;letter-spacing:-.025em}
h2{line-height:1.1;letter-spacing:-.02em}
.sec-head p,.lede{max-width:58ch}
.points p,.fivec p,.factrow p{max-width:46ch}

/* The eyebrow was a loud all-caps blue line on every section. Quieter, with
   the rule carrying the colour instead of the type. */
.eyebrow{color:var(--ink-soft);font-size:.7rem;letter-spacing:.16em}
.eyebrow::before{width:26px;height:2px;background:var(--blue)}
.sec-head--center .eyebrow{justify-content:center}

/* Section rhythm: a little more air above a heading than below it, so each
   block reads as one thing rather than a stack of equal gaps. */
.sec-head{margin-bottom:clamp(1.9rem,3.4vw,3rem)}
.sec-head h2 + p{margin-top:.85rem}

/* Cards: one shadow language, lifted only on hover, and a hairline that is
   actually visible against the washes. */
.card{border-color:oklch(0.9 0.012 250)}
.card--lift:hover{box-shadow:0 18px 40px oklch(0.45 0.08 258 / .13)}

/* Buttons sit on the baseline of the text they follow. */
.btn-row{align-items:center;gap:.75rem 1rem}

/* Quiet the pastel: tinted cards keep their hue but lose the saturation
   that made five of them in a row look like a toy palette. */
.card--blue{background:oklch(0.975 0.012 250)}
.card--green{background:oklch(0.975 0.015 160)}
.card--violet{background:oklch(0.975 0.013 295)}
.card--amber{background:oklch(0.98 0.02 80)}
.card--pink{background:oklch(0.975 0.012 5)}
.card--teal{background:oklch(0.975 0.015 215)}

/* The quick links on the home page keep their colour, but the icon tile is
   smaller so the words lead. */
.ql .ico{width:40px;height:40px;border-radius:12px}
.ql .ico svg{width:19px;height:19px}

/* Tables: numerals align, which matters on the fee table. */
td{font-variant-numeric:tabular-nums}

/* =====================================================================
   25. Second bug list (30 Oct, evening)
   ================================================================== */

/* An inline icon can never balloon again: text-sized by default, and the
   containers that need a bigger icon say so themselves. This is what put
   a "loading spinner" the size of a hero on the admission page. */
svg{width:1em;height:1em}
.ico svg{width:25px;height:25px}
.ico--sm svg{width:20px;height:20px}
.btn svg{width:17px;height:17px}
.nav__icon svg{width:18px;height:18px}
.footer__social svg{width:17px;height:17px}
.totop svg{width:19px;height:19px}
.play svg{width:12px;height:12px}
.tab svg{width:16px;height:16px}
.pill svg{width:14px;height:14px}
.gal figcaption svg{width:14px;height:14px}
.event__meta svg{width:13px;height:13px}
.dial__hint svg{width:16px;height:16px}
.nav__drop > .nav__link svg{width:13px;height:13px}

/* The four hero facts sat as inline items of random width. A grid keeps
   them in line: two columns on a phone, four across from tablet up. */
.hero__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.25rem;margin-top:1.6rem}
@media (max-width:479px){.hero__facts{grid-template-columns:1fr}}
.hero__fact{align-items:center;gap:.6rem}
.hero--plain .hero__facts,.hero--dark .hero__facts{max-width:44rem}

/* The stats tagline now sits centred under the bar rather than posing as
   a fourth statistic. */
.stat-note{display:block;text-align:center;margin-top:1.1rem;color:var(--blue-deep)}

/* The FAQ marker is centred in its row, with even padding either side. */
.faq summary{padding:1.1rem 1.25rem;gap:1.25rem;align-items:center}
.faq summary::after{width:30px;height:30px;font-size:1.25rem;line-height:1}
.faq .faq__a{padding:0 1.25rem 1.25rem}

/* The hero badge used to sit on top of the photograph on a phone. Below
   720px it drops under the image and spans it. */
@media (max-width:719px){
  .hero__badge{position:static;margin-top:.75rem;width:100%;justify-content:center;box-shadow:var(--sh-sm)}
  .hero__art img{border-radius:var(--r)}
}

/* The menu button: an even square next to the search button, and a real
   cross when it is open. */
.nav__right{gap:.5rem}
.burger{width:46px;height:46px;border-radius:50%;gap:5px;align-content:center}
.burger span{width:18px;height:2px;transition:transform .3s var(--ease),opacity .2s}
.burger.is-on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__icon{width:46px;height:46px}

/* The drawer's call to action is a button, not a stretched blob. */
.drawer .btn{display:flex;justify-content:center;margin-top:1.5rem}

/* Tablet: the header call to action and the drawer one were both on
   screen at once. Only one of them shows at a time. */
@media (max-width:1239px){.nav__cta{display:none}}

/* The back-to-top button sat on top of the artwork; it now clears the
   edge and never covers a caption. */
.totop{right:1.1rem;bottom:1.1rem}
@media (max-width:719px){.totop{right:.85rem;bottom:.85rem;width:42px;height:42px}}

/* Card rows on a phone: the icon and the words sit on one baseline. */
@media (max-width:719px){
  .card .ico{margin-bottom:.75rem}
  .points li{grid-template-columns:2rem 1fr}
}

/* a field the visitor has filled in wrongly says so quietly */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{
  border-color:var(--pink);box-shadow:0 0 0 3px oklch(0.70 0.15 5 / .14)}
.field .hint{font-size:.78rem;color:var(--muted)}
.field .err{display:none;font-size:.8rem;color:oklch(0.52 0.16 5);font-weight:600}
.field.is-bad .err{display:block}

/* ===========================================================
   26. SECOND BUG LIST, PART TWO
   Rows that end together, and chip rows that line up on a
   phone instead of wrapping into a ragged staircase.
   =========================================================== */

/* Event cards sat side by side ended at different heights, so the
   "View details" buttons never lined up. The body now fills the card
   and the button is pushed to the floor of it. */
.event__body{flex:1;align-items:stretch}
.event__body > .date{align-self:flex-start}
.event__body > div{display:flex;flex-direction:column;flex:1;min-width:0}
.event__body > div > .btn{margin-top:auto;align-self:flex-start}
.event__meta{margin-bottom:.9rem}

/* Filter chips: a neat two-column block on a phone rather than a
   ragged wrap. The label may run to two lines and still sit square. */
@media (max-width:719px){
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .tab{justify-content:center;text-align:center;line-height:1.25;padding:.6rem .7rem}
  .tab svg{flex:none}
}

/* A sidebar card never stretches to the height of the column beside it. */
.stack.sticky{align-content:start}
.stack.sticky > *{align-self:start}

/* The five-step process left a hole at the end of the grid, and the
   number in each badge was being coloured by the paragraph rule next
   to it, so it read as an empty blue dot. Both fixed here. */
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.step{flex:0 1 calc(33.333% - .67rem);min-width:min(100%,170px)}
@media (max-width:979px){.step{flex:0 1 calc(50% - .5rem)}}
@media (max-width:599px){.step{flex:1 1 100%}}
.step .step__n{display:grid;place-items:center;line-height:1;color:var(--white);font-size:1rem;padding:0}

/* Five items never sit evenly in three or four columns, so the row was
   ending with a hole. Five across when there is room for five, a plain
   stacked list when there is not - no orphans either way. */
.fivec{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1099px){.fivec{grid-template-columns:1fr}}
.split .fivec,.stack .fivec{grid-template-columns:1fr}
@media (max-width:1099px){.fivec > div{padding-top:.7rem}}

/* The details table asked for 520px inside a 512px column, so every
   course page carried a scrollbar it did not need. */
table{min-width:26rem}

/* On a phone the mosaic drops to three columns, which left the seventh
   photo alone on a row of its own. Six fill the block exactly. */
@media (max-width:719px){.hero__mosaic img:nth-child(n+7){display:none}}

/* The level rows on the admission page: badge, words, button. On a phone
   the words were being squeezed into a column one word wide, so the
   button drops to its own line there. */
.lvlrow{display:flex;gap:1rem;align-items:flex-start}
.lvlrow > div{flex:1;min-width:0}
.lvlrow > .btn{margin-left:auto;flex:none;align-self:center}
@media (max-width:719px){
  .lvlrow{flex-wrap:wrap}
  .lvlrow > .btn{margin-left:0;width:100%;justify-content:center}
}