:root{
  --ink:#0A1A4F; --blue:#1F5BFF; --sky:#EAF1FF; --white:#fff; --muted:#4A5677;
  --l1:#1F5BFF; --l2:#2E9E4F; --l3:#EE6A2C; --l4:#7A4DE0;
  --display:'Archivo','Segoe UI',system-ui,sans-serif;
  --body:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,4rem);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{font:400 1.0625rem/1.6 var(--body);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
img.missing{visibility:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3,.name,.cycle strong,.why dt,footer p:first-of-type,.tagline{font-family:var(--display);font-stretch:112%}
h1,h2,h3{line-height:1.1;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800}
h3{font-weight:700}
section{padding:clamp(3.5rem,8vw,6.5rem) var(--pad)}
.section-head{max-width:46rem;margin-bottom:2.5rem}
.section-head p{color:var(--muted);margin-top:.75rem;max-width:38rem}

.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;padding:.85rem 1.5rem;border-radius:.6rem;border:2px solid var(--blue);cursor:pointer;font:600 1rem var(--body);transition:background .15s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.small{padding:.5rem 1.1rem}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.6rem var(--pad);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid #DDE5F7}
.brand img{height:2.6rem;width:auto}
nav{display:flex;align-items:center;gap:1.75rem}
nav a{text-decoration:none;font-weight:500}
nav a:not(.btn):hover{color:var(--blue)}
.menu-btn{display:none;background:none;border:2px solid var(--ink);border-radius:.5rem;padding:.35rem .8rem;font:600 .95rem var(--body);color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;background:linear-gradient(180deg,var(--sky),#fff);padding-top:clamp(2.5rem,6vw,5rem)}
.grade{display:inline-block;background:var(--ink);color:#fff;font-weight:600;padding:.25rem .8rem;border-radius:2rem;font-size:.95rem;margin-bottom:1.1rem}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.2rem);font-weight:800;max-width:13ch}
.lead{font-size:1.2rem;color:var(--muted);max-width:32rem;margin:1.25rem 0 1.75rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
.tagline{font-family:var(--display);font-style:normal;font-weight:700;font-size:1.3rem;color:var(--blue);margin-top:2rem}
.hero-art{position:relative}
.hero-photo{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:2.5rem 2.5rem 2.5rem .5rem;background:#C9D8FF;animation:rise .8s ease-out both}
.mascot{position:absolute;left:-3.5rem;bottom:-2.5rem;width:clamp(6rem,15vw,10rem)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);padding-block:3rem;gap:0}
.pillars div{padding:0 1.5rem;border-left:2px solid var(--sky)}
.pillars div:first-child{border-left:0;padding-left:0}
.pillars img{width:2.6rem;height:2.6rem;margin-bottom:.8rem}
.pillars h3{font-size:1.3rem;margin-bottom:.3rem}
.pillars p{color:var(--muted);font-size:.98rem}

/* course */
.course{background:var(--ink);color:#fff}
.course .section-head p{color:#B9C6EE}
.journey{display:flex;gap:.35rem;margin-bottom:2rem}
.journey span{padding:.7rem 1rem;font-weight:600;font-size:.95rem;color:#fff;white-space:nowrap;overflow:hidden}
.j1{background:var(--l1);border-radius:.6rem 0 0 .6rem}
.j2{background:var(--l2)}
.j3{background:var(--l3)}
.j4{background:var(--l4);border-radius:0 .6rem .6rem 0;background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.14) 10px 20px)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.level{background:#fff;color:var(--ink);border-radius:.4rem 1.5rem .4rem 1.5rem;padding:1.4rem;display:flex;flex-direction:column;border-top:8px solid var(--c)}
.l1{--c:var(--l1)}.l2{--c:var(--l2)}.l3{--c:var(--l3)}.l4{--c:var(--l4)}
.level header{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.level header h3{font-size:1rem;color:var(--c)}
.level header span{font-size:.85rem;font-weight:600;background:var(--sky);padding:.1rem .6rem;border-radius:2rem}
.name{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:.5rem 0 .9rem;line-height:1.1}
.level ol{padding-left:1.25rem;margin-bottom:1.25rem}
.level li{margin-bottom:.3rem}
.level li::marker{color:var(--c);font-weight:700}
.l4-line{margin-bottom:1.25rem}
.level img{margin-top:auto;width:100%;height:9rem;object-fit:contain}

/* kits */
.kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.kit img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--sky);border-radius:1.5rem;margin-bottom:1.2rem}
.kit h3{font-size:1.35rem;margin-bottom:.7rem}
.kit ul{list-style:none;padding:0;columns:1}
.kit li{padding:.35rem 0 .35rem 1.6rem;border-top:1px solid #E1E8F8;position:relative;font-size:.98rem}
.kit li::before{content:"";position:absolute;left:.15rem;top:.85rem;width:.55rem;height:.3rem;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}

/* cycle */
.cycle{background:var(--blue);color:#fff;text-align:center}
.cycle h2{margin-bottom:2.5rem}
.cycle ol{list-style:none;padding:0;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.cycle li{flex:1 1 14rem;max-width:18rem;position:relative;padding:1.5rem 1rem}
.cycle li+li::before{content:"";position:absolute;left:-1.2rem;top:50%;width:1.4rem;height:2px;background:#fff;opacity:.6}
.cycle strong{display:block;font:800 2rem var(--display);margin-bottom:.3rem}
.cycle span{opacity:.9}

/* why */
.why dl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 4rem;max-width:62rem}
.why dl div{padding:1.4rem 0;border-top:2px solid var(--ink)}
.why dt{font:700 1.3rem var(--display);margin-bottom:.3rem}
.why dd{color:var(--muted);max-width:30rem}

/* enquire */
.enquire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);background:var(--sky)}
.enq-copy p{color:var(--muted);margin:.9rem 0 1.5rem;max-width:30rem}
.contact{list-style:none;padding:0;font-weight:600;font-size:1.15rem;display:grid;gap:.4rem}
.contact a{text-decoration:none;border-bottom:2px solid var(--blue)}
.qr{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.qr img{width:6.5rem;height:6.5rem;background:#fff;padding:.4rem;border-radius:.5rem}
.qr span{font-weight:600;max-width:9rem;line-height:1.3}
form{background:#fff;padding:clamp(1.25rem,3vw,2.2rem);border-radius:1.5rem;display:grid;gap:1rem;align-self:start}
label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
input,select,textarea{font:400 1rem var(--body);padding:.7rem .8rem;border:2px solid #C8D4F0;border-radius:.5rem;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
.form-note{font-size:.88rem;color:var(--muted)}

footer{background:var(--ink);color:#B9C6EE;text-align:center;padding:2.5rem var(--pad);display:grid;gap:.5rem;justify-items:center}
footer img{height:2.4rem;filter:brightness(0) invert(1)}
footer p:first-of-type{font:700 1.1rem var(--display);color:#fff}
.small{font-size:.85rem}

@media (max-width:960px){
  .hero,.enquire{grid-template-columns:1fr}
  .mascot{left:auto;right:.5rem;bottom:-2rem}
  .pillars{grid-template-columns:1fr 1fr;gap:1.75rem 0}
  .pillars div:nth-child(3){border-left:0;padding-left:0}
  .levels{grid-template-columns:1fr 1fr}
  .kit-grid{grid-template-columns:1fr}
  .why dl{grid-template-columns:1fr}
}
@media (max-width:640px){
  .menu-btn{display:block}
  nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.25rem var(--pad);background:#fff;border-bottom:1px solid #DDE5F7}
  nav.open{display:flex}
  .levels{grid-template-columns:1fr}
  .journey span{font-size:.75rem;padding:.6rem .5rem}
  .pillars{grid-template-columns:1fr}
  .pillars div{border-left:0;padding-left:0}
  .cycle li+li::before{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ================= MOTION ================= */
/* nav underline + buttons */
nav a:not(.btn){background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:background-size .3s,color .2s}
nav a:not(.btn):hover{background-size:100% 2px}
.btn{transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .15s,color .15s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(31,91,255,.35)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.top{transition:box-shadow .3s,padding .3s}
.top.scrolled{box-shadow:0 8px 28px rgba(10,26,79,.12);padding-block:.3rem}
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:var(--blue);transform:scaleX(var(--p,0));transform-origin:left;z-index:30}

/* hero entrance: one orchestrated sequence */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(112%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*80ms + 150ms)}
@keyframes up{to{transform:none}}
.grade,.lead,.actions{animation:fade .8s cubic-bezier(.2,.8,.2,1) backwards}
.grade{animation-delay:.05s}.lead{animation-delay:.75s}.actions{animation-delay:.95s}
@keyframes fade{from{opacity:0;transform:translateY(20px)}}
.tagline{animation:scribble 1s 1.3s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes scribble{from{opacity:0;transform:translateX(-24px)}}
.hero-photo{animation:wipe 1.3s .2s cubic-bezier(.7,0,.2,1) backwards;translate:0 calc(var(--sy,0)*-.05px)}
@keyframes wipe{from{clip-path:inset(100% 0 0 0 round 2.5rem);transform:scale(1.15)}to{clip-path:inset(0 round 2.5rem 2.5rem 2.5rem .5rem);transform:none}}
.mascot{animation:pop .9s 1.1s cubic-bezier(.3,1.6,.5,1) backwards,float 5s 2s ease-in-out infinite;translate:0 calc(var(--sy,0)*-.11px);transform-origin:50% 100%}
@keyframes pop{from{opacity:0;transform:translateY(40px) scale(.6) rotate(-12deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(3deg)}}


/* scroll reveals */
.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s;transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal].done{transition-delay:0s}

/* pillars */
.pillars img{transition:transform .3s}
.pillars div:hover img{animation:wiggle .6s}
@keyframes wiggle{25%{transform:rotate(-14deg) scale(1.15)}60%{transform:rotate(10deg) scale(1.15)}}

/* journey bar wipes in segment by segment */
.js .journey span{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.js .journey.in span{clip-path:inset(0)}
.journey.in span:nth-child(2){transition-delay:.45s}
.journey.in span:nth-child(3){transition-delay:.9s}
.journey.in span:nth-child(4){transition-delay:1.35s}

/* levels */
.js .level.in:hover{transform:translateY(-10px);box-shadow:0 22px 36px rgba(0,0,0,.35)}
.level img{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.level:hover img{transform:scale(1.1) rotate(-3deg)}

/* kits */
.kit img{transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.kit:hover img{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 18px 30px rgba(31,91,255,.2)}
.js .kit li{opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--j,0)*55ms + .35s)}
.js .kit.in li{opacity:1;transform:none}
.js .kit li::before{transition:width .3s;width:0;transition-delay:calc(var(--j,0)*55ms + .6s)}
.js .kit.in li::before{width:.55rem}

/* cycle: arrows draw, steps pop */
.js .cycle li+li::before{transform:scaleX(0);transform-origin:left;transition:transform .5s .5s}
.js .cycle li.in+li::before,.js .cycle li+li.in::before{transform:scaleX(1)}
.cycle li strong{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cycle li:hover strong{transform:scale(1.12)}

/* why: rules draw across */
.why dl div{border-top:0;position:relative}
.why dl div::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--ink);transform-origin:left;transition:transform .9s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i,0)*90ms + .1s)}
.js .why dl div::before{transform:scaleX(0)}
.js .why dl div.in::before{transform:scaleX(1)}

/* form */
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(31,91,255,.18)}
.contact a{background:linear-gradient(var(--blue),var(--blue)) 0 100%/100% 2px no-repeat;border:0;padding-bottom:2px;transition:background-size .25s,color .2s}
.contact a:hover{background-size:100% 100%;color:#fff}

@media (prefers-reduced-motion:reduce){
  .w>span{transform:none}
  .js [data-reveal],.js .kit li{opacity:1;transform:none}
  .js .journey span{clip-path:none}
  .js .why dl div::before,.js .cycle li+li::before{transform:none}
  .track{animation:none}
  .hero-photo,.mascot{translate:none}
}

/* ================= CIRCUIT BACKGROUNDS ================= */
.wired{position:relative;isolation:isolate}
.circuit{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-copy,.hero-art{position:relative;z-index:1}

/* ================= LIVE CURRENT + POLISH ================= */
body{overflow-x:clip}
/* spark travelling along the timeline */
.journey{position:relative}
.journey::after{display:none}
/* current flowing through the learning cycle connectors */
.cycle li+li::before{height:3px;background:repeating-linear-gradient(90deg,#fff 0 7px,transparent 7px 14px);background-size:14px 100%;animation:flow .5s linear infinite}
@keyframes flow{to{background-position:14px 0}}
/* pulsing rings around pillar icons */
.pillars img{border-radius:50%;animation:ring 3s ease-out infinite}
.pillars div:nth-child(2) img{animation-delay:.6s}.pillars div:nth-child(3) img{animation-delay:1.2s}.pillars div:nth-child(4) img{animation-delay:1.8s}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(31,91,255,.35)}70%,100%{box-shadow:0 0 0 16px rgba(31,91,255,0)}}
/* 3D tilt follows the cursor */
.level img{transition:transform .2s ease-out}
.level:hover img{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.1)}
.kit img{transition:transform .2s ease-out,box-shadow .3s}
.kit:hover img{transform:perspective(800px) translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

@media (max-width:960px){
  .hero-art{margin-bottom:2.5rem}
  .hero h1{max-width:none}
}
@media (max-width:640px){
  :root{--pad:1.1rem}
  .top .brand img{height:2.2rem}
  .hero{padding-top:1.5rem}
  .lead{font-size:1.05rem}
  .actions .btn{flex:1 1 100%;text-align:center}
  .tagline{font-size:1.1rem}
  .journey span{font-size:0;padding:.65rem .3rem;text-align:center}
  .journey span::after{content:attr(data-s);font-size:.72rem}
  .journey::after{width:34px;height:34px;margin:-17px 0 0 -17px}
  .cycle li{flex-basis:100%;padding:1rem}
  .kit-grid{gap:2rem}
  .qr{flex-wrap:wrap}
  .why dl div{padding:1.1rem 0}
}
@media (prefers-reduced-motion:reduce){.journey::after,.pillars img,.cycle li+li::before{animation:none}}

/* Readability: a soft halo in each section's own background colour keeps text crisp over the wires */
.hero,.pillars,.kits,.why{--halo:#F6F9FF}
.kits,.why,.pillars{--halo:#fff}
.enquire{--halo:var(--sky)}
.course{--halo:var(--ink)}
.cycle{--halo:var(--blue)}
.wired :where(h1,h2,h3,p,li,dt,dd,small,label,.contact a){text-shadow:0 1px 0 rgba(255,255,255,.22),0 0 8px var(--halo)}
.wired .level *,.wired form *,.wired .grade{text-shadow:none}
.circuit{opacity:.5;filter:saturate(.8)}