/* ==========================================================================
   AL1 Project Centre — soul design system
   Retains the AL1 blue/navy/amber/green family, but warms it: cream paper,
   gold as the "AL1 = the achievement" accent, a subtle graph-paper motif
   (brand-true for a math centre). Fraunces + Hanken kills the Inter tell.
   NOTE: fonts via Google for the preview; self-host woff2 before final (perf + PDPA).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* retained AL1 colours, warmed */
  --paper:#F7F3EA;        /* warm off-white, never stark white */
  --paper-2:#EFE7D8;      /* warmer card/section */
  --ink:#141B2E;          /* deep navy ink (retained oklch 0.208) */
  --navy:#1A2340;         /* full-bleed dark section */
  --blue:#2A3FBE;         /* retained cobalt/royal primary */
  --blue-soft:#E6E8FA;
  --gold:#E0A43B;         /* retained amber = the AL1 achievement accent */
  --gold-ink:#8A5E1C;     /* AA-safe gold for text on paper */
  --green:#2E9C58;        /* retained growth/success green */
  --slate:#4C5566;        /* body text */
  --slate-soft:#6E7686;
  --line:rgba(20,27,46,.12);
  --grid:rgba(42,63,190,.055);   /* faint math graph-paper lines */

  --display:'Fraunces', Georgia, serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;

  --wrap:1160px;
  --r:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 22px 50px -30px rgba(20,27,46,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis{scroll-behavior:auto!important}   /* Lenis owns scroll (avoids double-smoothing) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.02rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* graph-paper: faint 26px grid + a warm paper glow — the math signature */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(120% 90% at 82% -8%, rgba(224,164,59,.10), transparent 60%);
  background-size:26px 26px, 26px 26px, 100% 100%;
}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)}
.section{padding-block:clamp(64px,9vw,120px)}

/* type */
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-.015em; color:var(--ink); margin:0}
h1{font-size:clamp(2.6rem,6.4vw,4.7rem); font-weight:500}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
.display-italic{font-style:italic; color:var(--blue)}
p{margin:0 0 1rem; max-width:64ch; color:var(--slate)}
.lede{font-size:clamp(1.08rem,1.6vw,1.28rem); color:var(--ink); line-height:1.55}
.eyebrow{font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink)}
.hl{color:var(--gold-ink); font-weight:600}

a{color:var(--blue); text-decoration:none}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--body); font-weight:600; font-size:.98rem;
  padding:.85rem 1.5rem; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:transform .3s var(--ease), background .25s, box-shadow .3s var(--ease)}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-gold{background:var(--gold); color:#3A2708}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(224,164,59,.8)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* the AL1 achievement chip — a brand-true score-band motif */
.al-chip{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-radius:100px;
  background:var(--blue-soft); color:var(--blue); font-weight:600; font-size:.8rem; letter-spacing:.02em}
.al-chip b{background:var(--gold); color:#3A2708; border-radius:6px; padding:.05rem .4rem; font-weight:700}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow)}
.tone-dark{background:var(--navy); color:var(--paper)}
.tone-dark h1,.tone-dark h2,.tone-dark h3{color:var(--paper)}
.tone-dark p{color:rgba(247,243,234,.8)}
.tone-dark .eyebrow{color:var(--gold)}
.tone-dark .display-italic{color:var(--gold)}   /* cobalt italic is unreadable on navy; gold = the AL1 accent (AA on navy) */
.tone-dark a:not(.btn){color:#B9C2FF}            /* lighten any plain link on navy for AA contrast */

/* motion primitives (transform/opacity only) */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.line-mask{display:block; overflow:hidden}
.line-in{display:block; transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none} .line-in{transform:none}
}

/* ===== PSLE landscape hook: score-band ladder + ambient aurora ===== */
.psle{position:relative; overflow:hidden}
.psle-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(32px,5vw,72px); align-items:center}
@media(max-width:900px){.psle-grid{grid-template-columns:1fr; gap:44px}}

/* ambient aurora over cream: asymmetric, low-saturation blobs, transform-only drift */
.psle-aurora{position:absolute; inset:-28%; z-index:0; pointer-events:none; contain:paint;
  background:
    radial-gradient(circle at 20% 34%, rgba(42,63,190,.22) 0, transparent 42%),
    radial-gradient(circle at 80% 74%, rgba(224,164,59,.22) 0, transparent 44%),
    radial-gradient(circle at 62% 8%, rgba(46,156,88,.14) 0, transparent 38%);
  filter:blur(60px); will-change:transform;
  animation:psle-drift 27s ease-in-out infinite alternate}
@keyframes psle-drift{
  from{transform:translate3d(-6%,-3%,0) rotate(-5deg)}
  to{transform:translate3d(8%,-7%,0) rotate(9deg)}}

/* copy column */
.psle-copy h2{margin:.6rem 0 0; max-width:17ch}
.psle-copy .lede{margin:1.3rem 0 0; max-width:46ch}
.psle-copy p+p{margin-top:1rem}
.psle-note{margin:1.7rem 0 0; padding:.95rem 1.15rem; border-left:3px solid var(--gold);
  background:var(--paper-2); border-radius:0 12px 12px 0; font-size:.96rem; color:var(--slate); max-width:44ch}
.psle-note b{color:var(--ink); font-weight:600}

/* the score-band ladder */
.psle-fig{margin:0}
.psle-rungs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.psle-rung{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:.35rem 1rem; padding:.95rem 1.2rem; border-radius:14px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow)}
.psle-band{font-family:var(--display); font-weight:600; font-size:1.18rem; color:var(--ink); letter-spacing:-.01em}
.psle-range{font-size:.86rem; font-weight:600; color:var(--slate); letter-spacing:.01em}
.psle-desc{font-size:.82rem; color:var(--slate); text-align:right; white-space:nowrap}

/* AL1: the gold-lit top rung */
.psle-al1{overflow:hidden; border-color:rgba(224,164,59,.5);
  background:linear-gradient(180deg,#FBF3E0,var(--paper));
  box-shadow:0 20px 44px -22px rgba(224,164,59,.55), var(--shadow)}
.psle-al1 .psle-band{color:var(--gold-ink)}
.psle-al1 .psle-desc{color:var(--gold-ink); font-weight:600}
.psle-al1::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold)}
/* ambient gold breathing on AL1 only, slow, desynced from the aurora */
.psle-al1::after{content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(224,164,59,.4); opacity:.5;
  animation:psle-glow 15s ease-in-out infinite alternate -3s}
@keyframes psle-glow{from{opacity:.32} to{opacity:.78}}

/* signature moment: one gold light-sweep settles onto AL1 when the ladder scrolls in */
.psle-sweep{position:absolute; inset:0; pointer-events:none; opacity:0; transform:translateX(-130%);
  background:linear-gradient(105deg, transparent 30%, rgba(224,164,59,.5) 50%, transparent 70%)}
.psle-fig.in .psle-sweep{animation:psle-sweep 1.4s var(--ease) .35s 1}
@keyframes psle-sweep{
  0%{opacity:0; transform:translateX(-130%)}
  20%{opacity:1} 80%{opacity:1}
  100%{opacity:0; transform:translateX(130%)}}

/* the razor-thin margin: one-mark divider between AL1 and AL2 */
.psle-gap{display:flex; align-items:center; gap:.7rem; padding:.1rem 1.2rem}
.psle-gap-line{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.psle-gap-tag{font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--gold-ink); white-space:nowrap}
.psle-gap-tag b{font-weight:700}

.psle-cap{margin:1rem .3rem 0; font-size:.82rem; line-height:1.55; color:var(--slate); max-width:52ch}

@media(max-width:460px){
  .psle-rung{grid-template-columns:auto auto; justify-content:space-between}
  .psle-desc{display:none}
}

@media (prefers-reduced-motion:reduce){
  .psle-aurora{animation:none}
  .psle-al1::after{animation:none; opacity:.5}
  .psle-sweep{display:none}
}


/* ================= APPENDED SECTION STYLES ================= */

/* --- founder --- */
/* ===== About the Founder, Ang Chee Peng ===== */
.founder{position:relative; overflow:hidden}
.founder-grid{position:relative; z-index:2; display:grid;
  grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,72px); align-items:center}
@media(max-width:900px){.founder-grid{grid-template-columns:1fr; gap:40px}}

/* card sits LEFT on desktop for rhythm variety vs the copy-left sections above,
   but the heading leads in DOM order (and on mobile) for reading + a11y */
.founder-card-col{order:-1}
@media(max-width:900px){.founder-card-col{order:0}}

/* ---- copy column ---- */
.founder-copy h2{margin:.6rem 0 0; max-width:22ch}
.founder-copy .lede{margin:1.3rem 0 0; max-width:48ch}
.founder-copy p+p{margin-top:1rem}
.founder-creds{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.55rem; max-width:46ch}
.founder-creds li{position:relative; padding-left:1.5rem; font-size:.94rem; color:var(--ink); font-weight:500}
.founder-creds li::before{content:""; position:absolute; left:.15rem; top:.62em;
  width:7px; height:7px; background:var(--gold); transform:translateY(-50%) rotate(45deg); border-radius:1px}
.founder-quote{position:relative; margin:1.8rem 0 0; padding:1.3rem 1.3rem 1.3rem 1.6rem;
  border-left:3px solid var(--gold); background:var(--paper-2); border-radius:0 12px 12px 0}
.founder-quote p{margin:0; max-width:52ch; font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.24rem); line-height:1.5; color:var(--ink)}
.founder-quote cite{display:block; margin-top:.8rem; font-style:normal; font-family:var(--body);
  font-size:.84rem; font-weight:600; letter-spacing:.02em; color:var(--gold-ink)}
.founder-quote::before{content:"\201C"; position:absolute; top:-.05em; right:.35em; pointer-events:none;
  font-family:var(--display); font-size:4rem; line-height:1; color:var(--gold); opacity:.22}
.founder-place{margin:1.5rem 0 0; font-size:.92rem; color:var(--slate)}
.founder-place b{color:var(--ink); font-weight:600}

/* ---- diorama founder card ----
   Technique: perspective + preserve-3d + staggered translateZ, eased spring-back.
   True cursor-tracking needs a pointermove JS loop; this section has no JS output
   channel, so this is the CSS-only cousin: a gentle hover tilt (well under the
   gimmicky angle) with the same layered depth-parallax and spring return. */
.founder-stage{perspective:1000px}
.founder-card{position:relative; transform-style:preserve-3d; will-change:transform;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:1px solid var(--line); border-radius:calc(var(--r) + 6px);
  padding:clamp(18px,2.4vw,24px); box-shadow:var(--shadow); overflow:hidden}
@media(hover:hover) and (pointer:fine){
  .founder-card:hover{transform:rotateX(3deg) rotateY(-4deg);
    box-shadow:0 34px 60px -30px rgba(20,27,46,.5)}
}

/* one ambient accent: soft gold glow drifting behind the card, long desynced loop */
.founder-glow{position:absolute; inset:-22% -10% auto -10%; height:70%; z-index:0;
  transform:translateZ(-40px); pointer-events:none; border-radius:50%;
  background:radial-gradient(circle at 60% 40%, rgba(224,164,59,.28), transparent 66%);
  filter:blur(46px); will-change:transform; animation:founder-glow-drift 24s ease-in-out infinite alternate}
@keyframes founder-glow-drift{
  from{transform:translateZ(-40px) translate(-4%,0) scale(1)}
  to{transform:translateZ(-40px) translate(6%,-8%) scale(1.08)}}

/* portrait placeholder, warm monogram frame that DEVELOPS IN like a print.
   mask-image gradient sweep driven by scroll via animation-timeline:view().
   No view() support (Safari) or no duration => resolves to the revealed base state,
   so it degrades to a fully shown frame rather than breaking. */
.founder-portrait{position:relative; z-index:1; transform:translateZ(0);
  aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; display:grid; place-items:center; gap:.4rem;
  background:
    linear-gradient(150deg, rgba(42,63,190,.10), transparent 60%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
  border:1px solid rgba(224,164,59,.4);
  -webkit-mask:linear-gradient(105deg,#000 42%,#0000 64%) 0% 0/220% 100% no-repeat;
  mask:linear-gradient(105deg,#000 42%,#0000 64%) 0% 0/220% 100% no-repeat;
  animation:founder-develop linear both; animation-timeline:view();
  animation-range:entry 12% cover 42%; will-change:mask-position}
@keyframes founder-develop{
  from{-webkit-mask-position:100% 0; mask-position:100% 0}
  to{-webkit-mask-position:0% 0; mask-position:0% 0}}
.founder-monogram{font-family:var(--display); font-weight:600; font-size:clamp(2.6rem,6vw,3.6rem);
  color:var(--gold-ink); letter-spacing:.05em; line-height:1}
.founder-portrait-note{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-soft); font-weight:600}

/* identity block, lifted forward on translateZ */
.founder-id{position:relative; z-index:2; transform:translateZ(30px); margin-top:clamp(16px,2vw,22px)}
.founder-name{font-size:clamp(1.4rem,2.4vw,1.75rem)}
.founder-role{margin:.25rem 0 .8rem; font-size:.86rem; color:var(--slate-soft); font-weight:500}
.founder-chip{font-size:.76rem}

/* the one-mark margin: the founder's signature score-band, lifted most on translateZ
   so on hover-tilt the AL1 rung physically rises = "the single mark he engineers".
   Deliberately a compact 2-rung motif, not the full PSLE ladder above it. */
.founder-margin{position:relative; z-index:3; transform:translateZ(46px);
  margin-top:clamp(16px,2vw,20px); padding-top:1rem; border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto auto; grid-auto-flow:row; align-items:center; gap:.45rem .9rem}
.founder-rung{display:flex; align-items:baseline; gap:.55rem; padding:.42rem .7rem; border-radius:10px}
.founder-rung-band{font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.01em}
.founder-rung-mark{font-size:.8rem; font-weight:600; color:var(--slate)}
.founder-al1{position:relative; background:linear-gradient(180deg,#FBF3E0,var(--paper));
  border:1px solid rgba(224,164,59,.55); box-shadow:0 10px 22px -14px rgba(224,164,59,.6);
  transition:transform .6s var(--ease)}
.founder-al1 .founder-rung-band,.founder-al1 .founder-rung-mark{color:var(--gold-ink)}
.founder-al1::after{content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(224,164,59,.45); opacity:.4;
  animation:founder-al1-glow 19s ease-in-out infinite alternate -5s}
@keyframes founder-al1-glow{from{opacity:.25} to{opacity:.7}}
.founder-al2{background:var(--paper); border:1px solid var(--line)}
.founder-al2 .founder-rung-band{color:var(--slate)}
.founder-onemark{grid-row:1 / span 2; grid-column:2; display:flex; flex-direction:column; align-items:center; gap:.25rem}
.founder-tick{width:1px; height:22px; background:linear-gradient(180deg,transparent,var(--gold),transparent)}
.founder-onemark-txt{font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--gold-ink); white-space:nowrap}
.founder-margin-cap{grid-column:1 / -1; margin:.55rem 0 0; font-size:.8rem; line-height:1.5; color:var(--slate); max-width:36ch}
@media(hover:hover) and (pointer:fine){
  .founder-card:hover .founder-al1{transform:translateZ(20px) translateY(-2px)}
}

/* narrow: stack the margin rungs cleanly */
@media(max-width:460px){
  .founder-margin{grid-template-columns:1fr}
  .founder-onemark{grid-row:auto; grid-column:1; flex-direction:row; gap:.5rem}
  .founder-tick{width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
}

@media (prefers-reduced-motion:reduce){
  .founder-portrait{animation:none; -webkit-mask:none; mask:none}
  .founder-glow{animation:none}
  .founder-al1::after{animation:none; opacity:.4}
  .founder-card,.founder-al1{transition:none}
  .founder-card:hover{transform:none}
  .founder-card:hover .founder-al1{transform:none}
}

/* --- programs --- */
/* ===== Programs: level-tiered cards with a 3D perspective tilt ===== */
.prog-head{max-width:52ch}
.prog-head h2{margin:.55rem 0 0; max-width:20ch}
.prog-head .lede{margin:1.2rem 0 0; max-width:50ch}

.prog-deck{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px);
  align-items:stretch; margin-top:clamp(34px,5vw,58px)}
@media(max-width:880px){
  .prog-deck{grid-template-columns:1fr; max-width:460px; margin-inline:auto; gap:20px}
}

/* the perspective host: one per card so each tilt is measured against its own centre */
.prog-slot{perspective:1100px}
.prog-deck .prog-slot:nth-child(2){transition-delay:.09s}
.prog-deck .prog-slot:nth-child(3){transition-delay:.18s}

/* the card itself carries the tilt (rotate) + the raised offset (--lift) */
.prog-card{position:relative; height:100%; display:flex; flex-direction:column; gap:.85rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3vw,30px); box-shadow:var(--shadow);
  transform-style:preserve-3d; will-change:transform;
  transform:translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease)}

/* signature: the most-popular card is gold-lit and sits slightly raised */
.prog-card--pop{--lift:-14px; border-color:rgba(224,164,59,.55);
  background:linear-gradient(180deg,#FBF3E0,var(--paper));
  box-shadow:0 28px 56px -26px rgba(224,164,59,.6), var(--shadow)}
@media(max-width:880px){.prog-card--pop{--lift:0}}

/* "Most popular" tag: al-chip styling warmed to gold, lifted on a nearer plane */
.prog-tag{position:absolute; top:-13px; right:18px; z-index:2;
  background:var(--gold); color:#3A2708; font-weight:700; font-size:.72rem; letter-spacing:.04em;
  padding:.36rem .8rem; border-radius:100px; box-shadow:0 12px 26px -12px rgba(224,164,59,.85);
  transform:translate3d(var(--lx,0),var(--ly,0),34px)}

/* inner parallax layers: level badge + price float toward the viewer */
.prog-level{align-self:flex-start; transform:translate3d(var(--lx,0),var(--ly,0),20px);
  transition:transform .35s var(--ease)}
.prog-name{margin:.1rem 0 0}
.prog-desc{margin:0; font-size:.96rem; color:var(--slate); max-width:34ch}
.prog-price{font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3vw,2.35rem);
  color:var(--ink); line-height:1; display:flex; align-items:baseline; gap:.15rem; margin-top:.2rem;
  transform:translate3d(var(--lx,0),var(--ly,0),40px); transition:transform .35s var(--ease)}
.prog-price span{font-family:var(--body); font-size:.9rem; font-weight:600; color:var(--slate)}
.prog-from{font-family:var(--body); font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); margin-right:.3rem}

/* shared feature list, pinned to the base of every card for aligned CTAs */
.prog-feats{list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column;
  gap:.5rem; margin-top:auto}
.prog-feats li{display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:500; color:var(--slate)}
.prog-feats svg{width:16px; height:16px; color:var(--green); flex:none}

.prog-cta{margin-top:1.1rem; justify-content:center}
.prog-foot{margin:clamp(24px,3vw,34px) 0 0; font-size:.82rem; color:var(--slate); text-align:center; max-width:none}

/* reduced motion: no tilt is ever applied (JS bails), so settle the cards flat and calm */
@media (prefers-reduced-motion:reduce){
  .prog-card,.prog-level,.prog-price{transition:none}
}

/* --- methodology --- */
/* ===== Methodology: two pillars linked by a spine that draws on scroll ===== */
.meth-head{max-width:60ch}
.meth-head h2{margin:.55rem 0 0; max-width:20ch}
.meth-head .lede{margin:1.3rem 0 0; max-width:52ch}

.meth-flow{position:relative; margin-top:clamp(38px,5vw,64px)}
/* the spine rail: a faint track with a gradient fill that scales in from the top */
.meth-rail{position:absolute; left:24px; top:12px; bottom:12px; width:2px; margin-left:-1px;
  background:var(--line); border-radius:2px; overflow:hidden}
.meth-spine{position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(180deg, var(--blue), var(--gold));
  transform:scaleY(0); transform-origin:top; will-change:transform}
/* signature moment: spine draws down once the flow scrolls into view */
.meth-flow.in .meth-spine{animation:meth-draw 1.25s var(--ease) .15s forwards}
@keyframes meth-draw{to{transform:scaleY(1)}}

.meth-pillars{display:flex; flex-direction:column; gap:clamp(30px,4.5vw,50px)}
.meth-pillar{position:relative; padding-left:64px}
/* the marker discs sit on the spine, echoing the hero AL1 medal */
.meth-node{position:absolute; left:24px; top:2px; transform:translateX(-50%);
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  box-shadow:0 12px 26px -14px rgba(20,27,46,.55)}
.meth-node-1{background:var(--gold); color:#3A2708}
.meth-node-2{background:var(--blue); color:var(--paper)}

.meth-tag{font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); margin:0}
.meth-pillar h3{margin:.5rem 0 0}
.meth-pillar p{margin:.85rem 0 0; max-width:56ch}
.meth-foot{font-size:.95rem}

/* C.E.R. nodes: three labelled rows that reveal in sequence along the spine */
.meth-cer{list-style:none; margin:1.3rem 0 0; padding:0; display:flex; flex-direction:column;
  gap:.65rem; max-width:54ch}
.meth-cer-row{display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--paper)}
.meth-cer-row span:last-child{color:var(--slate); font-size:.97rem; line-height:1.55}
.meth-cer-row b{font-family:var(--body); color:var(--ink); font-weight:600}
.meth-cer-letter{width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1rem;
  background:var(--blue-soft); color:var(--blue)}

@media(max-width:560px){
  .meth-rail{left:18px}
  .meth-pillar{padding-left:52px}
  .meth-node{left:18px; width:34px; height:34px; font-size:.98rem}
}

@media (prefers-reduced-motion:reduce){
  /* spine shown full, nodes and rows already made visible by the .reveal fallback */
  .meth-spine{transform:none; animation:none}
}

/* --- insights --- */
/* ===== Expert Insights: the 3 fatal flaws, editorial flaw-to-fix cards ===== */
.insight-head{max-width:60ch}
.insight-head h2{margin:.55rem 0 0; max-width:20ch}
.insight-head .lede{margin:1.25rem 0 0; max-width:52ch}

.insight-cards{margin-top:clamp(34px,4.5vw,54px); display:grid;
  grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); align-items:start}
@media(max-width:860px){.insight-cards{grid-template-columns:1fr; gap:16px}}

/* card: reuses .card; adds a staggered entrance (--d) + restrained hover lift.
   box-shadow has no delay so hover feels immediate; transform/opacity carry the stagger. */
.insight-card{position:relative; display:flex; flex-direction:column; --d:0s;
  transition:opacity .7s var(--ease) var(--d), transform .55s var(--ease) var(--d), box-shadow .5s var(--ease)}
.insight-cards .insight-card:nth-child(2){--d:.09s}
.insight-cards .insight-card:nth-child(3){--d:.18s}
.insight-card:hover{--d:0s; transform:translateY(-6px);
  box-shadow:0 30px 58px -30px rgba(20,27,46,.5)}

/* small gold index numeral (AA-safe gold-ink), editorial Fraunces */
.insight-num{font-family:var(--display); font-weight:600; font-size:1.5rem; line-height:1;
  color:var(--gold-ink); letter-spacing:.02em}
.insight-tag{margin-top:.9rem; font-family:var(--body); font-weight:600; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.insight-flaw{margin-top:.45rem; font-size:clamp(1.18rem,1.7vw,1.4rem); color:var(--ink)}
.insight-body{margin-top:.75rem; font-size:.98rem; color:var(--slate)}

/* signature: the fix line sits under a hairline rule and quietly settles in
   a beat after the card arrives (transition, not keyframes). */
.insight-fix{margin:auto 0 0; padding-top:1rem; position:relative; font-size:.95rem; color:var(--slate);
  border-top:1px solid var(--line);
  opacity:0; transform:translateY(8px);
  transition:opacity .65s var(--ease), transform .65s var(--ease)}
.insight-card.in .insight-fix{opacity:1; transform:none; transition-delay:.28s}
.insight-fix-label{display:block; margin-bottom:.25rem; font-family:var(--body); font-weight:600;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-ink)}

@media (prefers-reduced-motion:reduce){
  .insight-card{transition:none}
  .insight-card:hover{transform:none}
  .insight-fix{opacity:1; transform:none; transition:none}
}

/* --- transformation --- */
/* ===== The Transformation: roadmap to AL1 (tone-dark section) ===== */
.trans{position:relative; overflow:hidden}
.trans-head{max-width:52ch}
.trans-head h2{margin:.55rem 0 0; max-width:20ch}
.trans-head .lede{margin:1.2rem 0 0; max-width:54ch}

.trans-map{position:relative; margin-top:clamp(30px,4.5vw,52px)}
.trans-spine{display:block; width:100%; height:auto; margin-bottom:-6px; overflow:visible}

/* SIGNATURE: the ascending path draws blue to gold on scroll-in.
   Path length is ~936, so a dash longer than that renders as one solid stroke;
   offsetting by the same amount hides it, then animates to 0 to "draw" it. */
.trans-path{stroke-dasharray:1000; stroke-dashoffset:1000; will-change:stroke-dashoffset}
.trans-map.in .trans-path{animation:trans-draw 1.7s var(--ease) .15s forwards}
@keyframes trans-draw{to{stroke-dashoffset:0}}

/* milestone nodes pop in sequence as the line reaches them (staggered via --d) */
.trans-node{opacity:0; transform:scale(.5); transform-box:fill-box; transform-origin:center; will-change:transform,opacity}
.trans-map.in .trans-node{animation:trans-pop .55s var(--ease) forwards; animation-delay:var(--d)}
@keyframes trans-pop{to{opacity:1; transform:scale(1)}}

/* the gold AL1 marker keeps a slow, desynced breath (long loop, late delay) */
.trans-halo{opacity:.24; transform-box:fill-box; transform-origin:center}
.trans-map.in .trans-node--al1 .trans-halo{animation:trans-halo 6.5s ease-in-out 2s infinite alternate}
@keyframes trans-halo{from{opacity:.14; transform:scale(.82)} to{opacity:.4; transform:scale(1.16)}}

/* the four stage cards */
.trans-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px)}
.trans-step{position:relative; padding:clamp(18px,2vw,24px); padding-bottom:clamp(44px,4vw,52px); border-radius:14px;
  background:rgba(247,243,234,.045); border:1px solid rgba(247,243,234,.14);
  opacity:0; transform:translateY(16px)}
.trans-map.in .trans-step{animation:trans-cardin .6s var(--ease) forwards; animation-delay:calc(.2s + var(--i) * .1s)}
@keyframes trans-cardin{to{opacity:1; transform:none}}

.trans-tag{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--body); font-weight:700;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold)}
.trans-num{display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:rgba(224,164,59,.16); color:var(--gold); font-size:.74rem; letter-spacing:0}
.trans-step h3{color:var(--paper); font-size:1.05rem; line-height:1.2; margin:.6rem 0 .45rem}
.trans-step p{color:rgba(247,243,234,.72); font-size:.9rem; line-height:1.5; margin:0 0 1rem; max-width:none}
.trans-lvl{position:absolute; left:clamp(18px,2vw,24px); bottom:clamp(16px,1.8vw,20px);
  font-size:.74rem; font-weight:700; letter-spacing:.02em; color:rgba(247,243,234,.7)}
.trans-lvl--gold{color:var(--gold)}

/* AL1: the gold-lit destination card */
.trans-step--al1{border-color:rgba(224,164,59,.5);
  background:linear-gradient(180deg, rgba(224,164,59,.13), rgba(247,243,234,.04));
  box-shadow:0 22px 46px -26px rgba(224,164,59,.6)}

/* real-climb evidence, honestly framed (CPFTA: no promise, no invented rates) */
.trans-proof{margin-top:clamp(26px,3.5vw,40px)}
.trans-chips{display:flex; flex-wrap:wrap; gap:.6rem}
.trans-chip{display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:100px;
  border:1px solid rgba(224,164,59,.4); background:rgba(224,164,59,.08);
  font-size:.86rem; font-weight:600; color:var(--gold)}
.trans-chip b{color:var(--paper); font-weight:700}
.trans-disclaimer{margin:1.1rem 0 0; max-width:62ch; font-size:.86rem; line-height:1.55; color:rgba(247,243,234,.66)}

/* mobile: spine becomes a vertical blue-to-gold rail through the numbered nodes */
@media(max-width:760px){
  .trans-spine{display:none}
  .trans-steps{grid-template-columns:1fr; gap:0}
  .trans-steps::before{content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px;
    background:linear-gradient(180deg, var(--blue), var(--gold)); opacity:.5}
  .trans-step{padding-left:56px; padding-bottom:clamp(18px,2vw,24px); background:transparent; border:0; border-radius:0}
  .trans-step + .trans-step{margin-top:1.3rem}
  .trans-lvl{position:static; display:inline-block; margin-top:.5rem}
  .trans-num{position:absolute; left:12px; top:clamp(18px,2vw,24px); width:24px; height:24px;
    background:var(--navy); border:2px solid var(--blue)}
  .trans-step--al1{background:linear-gradient(180deg, rgba(224,164,59,.12), transparent);
    border:1px solid rgba(224,164,59,.4); border-radius:14px;
    padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) clamp(18px,2vw,24px) 56px}
  .trans-step--al1 .trans-num{border-color:var(--gold); left:24px}
}

/* reduced motion: path shown complete, nodes visible, cards static, no loops */
@media (prefers-reduced-motion:reduce){
  .trans-path{stroke-dashoffset:0; animation:none}
  .trans-node{opacity:1; transform:none; animation:none}
  .trans-halo{animation:none; opacity:.3}
  .trans-step{opacity:1; transform:none; animation:none}
}

/* --- stories --- */
/* ===== Success stories: parent testimonials, gold result-line signature ===== */
.story{position:relative}
.story-head{max-width:62ch; margin:0 auto clamp(36px,5vw,60px); text-align:center}
.story-head h2{margin:.6rem auto 0; max-width:22ch}
.story-head .lede{margin:1.1rem auto 0; max-width:52ch}

.story-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); align-items:stretch}
@media(max-width:900px){.story-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto}}

/* card: reuses .card; add layout + a subtle non-transform hover (border only, never box-shadow) */
.story-card{position:relative; display:flex; flex-direction:column; overflow:hidden;
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .3s var(--ease)}
.story-card:hover{border-color:rgba(224,164,59,.45)}
/* staggered entrance: cards share the viewport, so delay the later ones */
.story-card:nth-child(2){transition-delay:.1s}
.story-card:nth-child(3){transition-delay:.2s}

/* large soft quotation-mark motif, decorative gold */
.story-mark{position:absolute; top:-.9rem; right:.7rem; font-family:var(--display); font-weight:700;
  font-size:6.4rem; line-height:1; color:var(--gold); opacity:.16; pointer-events:none; user-select:none}

.story-quote{margin:.4rem 0 0; flex:1 1 auto}
.story-quote p{margin:0; max-width:none; color:var(--slate); font-size:1rem; line-height:1.62}
.story-key{color:var(--ink); font-weight:600}

/* result line: text width drives the underline width */
.story-result{margin-top:1.5rem; display:inline-flex; flex-direction:column; align-items:flex-start}
.story-jump{display:inline-flex; align-items:baseline; gap:.5rem; font-family:var(--display); font-weight:600; font-size:1.2rem}
.story-al--from{color:var(--slate)}
.story-al--to{color:var(--gold-ink)}
.story-arrow{color:var(--gold-ink); font-size:.95rem; font-weight:700; transform:translateY(-.05em)}
.story-outcome{font-family:var(--display); font-style:italic; font-size:1.1rem; color:var(--ink)}

/* SIGNATURE: gold underline wipes in under each child's result when the card scrolls in */
.story-underline{display:block; width:100%; height:3px; margin-top:.55rem; border-radius:2px;
  background:linear-gradient(90deg, var(--gold), rgba(224,164,59,.28));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .85s var(--ease) .4s}
.story-card.in .story-underline{transform:scaleX(1)}

.story-cite{margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.2rem}
.story-name{font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink); font-style:normal}
.story-role{font-size:.85rem; color:var(--slate)}

@media (prefers-reduced-motion:reduce){
  .story-card{transition:none}
  .story-underline{transform:none; transition:none}
}

/* --- contact --- */
/* ===== Contact & trial: the warm navy close ===== */
.contact{position:relative; overflow:hidden}
.contact-aura{position:absolute; inset:-30%; z-index:0; pointer-events:none; contain:paint;
  background:
    radial-gradient(circle at 78% 20%, rgba(224,164,59,.20) 0, transparent 44%),
    radial-gradient(circle at 14% 86%, rgba(42,63,190,.34) 0, transparent 48%),
    radial-gradient(circle at 54% 52%, rgba(46,156,88,.10) 0, transparent 40%);
  filter:blur(64px); will-change:transform;
  animation:contact-drift 31s ease-in-out infinite alternate -6s}
@keyframes contact-drift{
  from{transform:translate3d(-5%,-4%,0) rotate(-4deg)}
  to{transform:translate3d(7%,5%,0) rotate(6deg)}}

.contact-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(34px,5vw,72px); align-items:center}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr; gap:40px}}

.contact-lead h2{margin:.6rem 0 0; max-width:16ch}
.contact-lead .lede{margin:1.3rem 0 0; max-width:46ch}
.contact-lead p+p{margin-top:1rem; max-width:48ch}

/* CTA row + the magnetic sensor */
.contact-cta{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:2rem 0 0}
/* padded sensor: negative margin cancels the layout cost so spacing is unchanged */
.contact-magnet{display:inline-flex; padding:26px; margin:-26px}
.contact-book{will-change:transform}
/* secondary email button, retuned for the dark section (btn-ghost ink text would vanish on navy) */
.contact-secondary{background:transparent; color:var(--paper); border-color:rgba(247,243,234,.30)}
.contact-secondary:hover{border-color:var(--paper); transform:translateY(-2px)}

.contact-note{margin:1.5rem 0 0; font-size:.92rem; line-height:1.6; color:rgba(247,243,234,.78); max-width:48ch}

/* the reach-us panel: a soft raised surface on navy */
.contact-panel{background:rgba(247,243,234,.045); border:1px solid rgba(247,243,234,.14);
  border-radius:var(--r); padding:clamp(18px,2.6vw,26px)}
.contact-panel-title{font-size:1.15rem; margin:0 0 .4rem; padding:0 .9rem}

.contact-row,.contact-place{display:flex; gap:1rem; align-items:flex-start;
  padding:1rem .9rem; border-radius:12px}
.contact-row{transition:background .25s var(--ease), transform .3s var(--ease)}
.contact-row:hover{background:rgba(247,243,234,.07); transform:translateY(-1px)}
.contact-place{padding-top:1.1rem}

.contact-ic{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(224,164,59,.15); color:var(--gold)}
.contact-ic svg{width:20px; height:20px}

.contact-row-body{display:flex; flex-direction:column; gap:.16rem; min-width:0}
.contact-k{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.contact-v{font-family:var(--display); font-weight:500; font-size:1.14rem; color:var(--paper); letter-spacing:-.01em}
.contact-v-mail{font-size:1rem; word-break:break-all}
.contact-sub{font-size:.86rem; line-height:1.5; color:rgba(247,243,234,.72)}

/* CSS map-pin motif (no embedded third-party map) */
.contact-pin{position:relative; width:30px; height:30px; flex:none; margin:5px 6px 0 6px;
  background:var(--gold); border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:0 10px 22px -10px rgba(224,164,59,.75)}
.contact-pin::after{content:""; position:absolute; inset:0; margin:auto;
  width:10px; height:10px; border-radius:50%; background:var(--navy)}

.contact-cap{display:flex; align-items:center; gap:.55rem; margin:1rem .9rem 0;
  padding-top:.9rem; border-top:1px solid rgba(247,243,234,.12);
  font-size:.86rem; color:rgba(247,243,234,.78)}
.contact-cap-dot{width:8px; height:8px; flex:none; border-radius:50%; background:var(--green)}

@media(max-width:460px){
  .contact-v-mail{font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){
  .contact-aura{animation:none}
  .contact-row:hover{transform:none}
  .contact-secondary:hover{transform:none}
}