/* ==================================================================
   HIS — School stage pages (stage.html?s=<slug>)
   Builds on styles.css + admissions.css. Same guides as the other
   inner pages: lines at 19.4vw / 80.6vw, content 21.7vw – 78.3vw.

   One template for all four stages (Discovery, Foundation, Journey,
   Launch); only the content in stages-data.js changes.
   ================================================================== */

/* ---------- shared ---------- */
.sg-top, .sg-fees, .sg-next { position: relative; z-index: 2; margin-left: var(--cl); width: var(--cw); }
.sg-body > section { position: relative; z-index: 2; }
.sg-body > section:not(.sg-full) { margin-left: var(--cl); width: var(--cw); }

.sg-top { display: flex; justify-content: space-between; align-items: center; gap: 2vw; flex-wrap: wrap; padding-top: 8.5vw; }
.crumb { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-text); text-decoration: none; transition: color 0.3s; }
.crumb i { font-style: normal; transition: transform 0.45s var(--ease-spring); }
.crumb:hover { color: var(--gold); }
.crumb:hover i { transform: translateX(-5px); }

.sg-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-switch a {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid #d6d6db;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink); line-height: 1.2;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.sg-switch a small { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: var(--grey-text); transition: color 0.3s; }
.sg-switch a:hover { border-color: var(--gold); }
.sg-switch a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sg-switch a[aria-current="page"] small { color: rgba(255,255,255,0.65); }

.sg-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2vw; }
.sg-lead { font-size: clamp(15px, 1.2vw, 20px); line-height: 1.6; max-width: 40ch; margin-bottom: 2.4vw; }
.sg-head { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 4vw; align-items: end; margin-bottom: 3vw; }
.sg-head .body { max-width: 52ch; }

/* grey image placeholder, wiped in when it enters */
.pbox { margin: 0; border-radius: var(--radius); background: var(--ph); clip-path: inset(0 100% 0 0 round var(--radius)); transition: clip-path 1.2s var(--ease-out); }
.pbox.in { clip-path: inset(0 0 0 0 round var(--radius)); }

/* full-width band: the guides turn out to the page edges to draw its top
   edge, then the colour drops from that edge (--f / --ft from JS) */
.sg-full { --f: 1; --ft: 1; position: relative; color: #fff; padding: 8vw 0 7vw; }
.sg-full::before { content: ""; position: absolute; inset: 0; background: var(--navy); clip-path: inset(0 0 calc((1 - var(--f)) * 100%) 0); }
.sg-full > * { position: relative; opacity: var(--ft); }
.sg-full .sg-kicker { color: var(--gold-soft); }

/* ==================================================================
   TEMPLATE
   ================================================================== */
/* hero: keyword title on the left, three tilted images on the right */
.sg-hero { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3vw; align-items: center; padding: 6vw 0 7vw; }
.sg-word { font-size: clamp(46px, 6.6vw, 112px); font-weight: 300; line-height: 1; text-transform: uppercase; margin-bottom: 1.4vw; }
.sg-line { font-size: clamp(15px, 1.3vw, 21px); color: var(--gold); font-weight: 500; margin-bottom: 1.4vw; }
/* the image group runs past the right guide line to the page edge;
   sizes follow real photo shapes (4:3 landscape, 3:4 portrait) */
.sg-hero-media { position: relative; height: 38vw; margin-right: calc(var(--cl) + var(--cw) - 100vw); }
.sg-hero-media .pbox { position: absolute; rotate: var(--t); }
.hm-a { left: 0;     top: 1vw;  width: 30vw; aspect-ratio: 4 / 3; --t: -3deg; }
.hm-b { right: 2vw;  top: 0;    width: 19vw; aspect-ratio: 3 / 4; --t: 4deg; transition-delay: 0.15s; clip-path: inset(0 0 0 100% round var(--radius)); }
.hm-c { left: 17vw;  top: 22vw; width: 21vw; aspect-ratio: 4 / 3; --t: 2deg; transition-delay: 0.3s; clip-path: inset(100% 0 0 0 round var(--radius)); z-index: 1; }
.sg-hero-media .pbox.in { clip-path: inset(0 0 0 0 round var(--radius)); }

/* philosophy: title + image on the left, text + image pair on the right */
.sg-phil { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 4vw; padding: 3vw 0 7vw; }
.sg-phil-ph { margin-top: 3vw; aspect-ratio: 4 / 3; }
.sg-phil-lead { font-size: clamp(15px, 1.25vw, 20px); line-height: 1.65; margin-bottom: 1.4em; }
.sg-phil-pair { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2vw; margin-top: 3vw; align-items: start; }
.sg-phil-pair .pbox { aspect-ratio: 16 / 10; clip-path: inset(100% 0 0 0 round var(--radius)); }
.sg-phil-pair .pbox + .pbox { aspect-ratio: 1; margin-top: 4vw; transition-delay: 0.15s; }
.sg-phil-pair .pbox.in { clip-path: inset(0 0 0 0 round var(--radius)); }

/* curriculum cards, each with an image */
.sg-curr { padding: 2vw 0 7vw; }
.sg-curr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2vw; }
.sg-curr-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cu {
  padding: 0.8vw 0.8vw 1.6vw; border-radius: var(--radius); background: #f4f4f6;
  opacity: 0; translate: 0 30px; transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-spring), background 0.4s, color 0.4s;
  transition-delay: calc(var(--i) * 0.08s), calc(var(--i) * 0.08s), 0s, 0s;
}
.sg-curr-grid.in .cu { opacity: 1; translate: 0 0; }
.cu > :not(.cu-ph) { margin-left: 0.8vw; margin-right: 0.8vw; }
.cu-ph { margin: 0 0 1.2vw; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) - 6px); background: var(--ph); transition: background 0.4s; }
.cu-no { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold); }
.cu h3 { margin: 0.8vw 0 0.5vw; font-size: clamp(15px, 1.25vw, 21px); font-weight: 500; text-transform: uppercase; line-height: 1.15; }
.cu-by { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.8vw; }
.cu p { font-size: clamp(12px, 0.9vw, 14px); line-height: 1.55; color: var(--grey-text); }
.cu:hover { background: var(--navy); color: #fff; }
.cu:hover .cu-ph { background: var(--ph-dark); }
.cu:hover .cu-by { color: var(--gold-soft); }
.cu:hover p { color: rgba(255,255,255,0.8); }

/* full-width navy band: title, two wide images, two ruled lists */
.sg-band-head { margin-left: var(--cl); width: var(--cw); margin-bottom: 3.5vw; }
.sg-band-wide { margin-left: var(--cl); width: var(--cw); display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2vw; margin-bottom: 5vw; }
.sg-band-wide .pbox { aspect-ratio: 16 / 9; background: var(--ph-dark); }
.sg-band-wide .pbox + .pbox { aspect-ratio: auto; transition-delay: 0.15s; }
.sg-two { margin-left: var(--cl); width: var(--cw); display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; }
.sg-col-title { font-size: clamp(20px, 1.9vw, 32px); font-weight: 300; text-transform: uppercase; margin-bottom: 1.6vw; }
.sg-list { list-style: none; }
.sg-list li {
  position: relative; display: grid; grid-template-columns: 2.6vw 1fr; gap: 1vw; padding: 1.2vw 0; border-top: 1px solid rgba(255,255,255,0.18);
  opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--i) * 0.07s);
}
.sg-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.sg-list.in li { opacity: 1; transform: none; }
.sg-list span { font-size: 12px; font-weight: 600; color: var(--gold-soft); padding-top: 3px; }
.sg-list strong { display: block; font-size: clamp(14px, 1.1vw, 18px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.sg-list p { font-size: clamp(12px, 0.92vw, 15px); line-height: 1.55; color: rgba(255,255,255,0.7); }

/* ==================================================================
   FEES (shared)
   ================================================================== */
.sg-fees { padding: 7vw 0 6vw; }
.fee-card { --f: 1; --ft: 1; position: relative; border-radius: var(--radius); color: #fff; }
.fee-card::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: var(--navy); clip-path: inset(calc((1 - var(--f)) * 100%) 0 0 0 round var(--radius)); }
.fee-in { position: relative; padding: 2.4vw 2.6vw; opacity: var(--ft); transform: translateY(calc((1 - var(--ft)) * 16px)); }
.fee-band + .fee-band { margin-top: 2vw; padding-top: 2vw; border-top: 1px solid rgba(255,255,255,0.18); }
.fee-band h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.2vw; }
.fee-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; }
.fee-row div span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.fee-row div strong { display: block; font-size: clamp(20px, 1.9vw, 32px); font-weight: 300; white-space: nowrap; }
.fee-row div em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: rgba(255,255,255,0.65); }

.sg-inc { margin-top: 2.4vw; }
.sg-inc-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-text); margin-bottom: 1vw; }
.chips-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row li { padding: 9px 14px; border-radius: var(--radius); border: 1px solid #dcdce1; font-size: 13px; font-weight: 500; opacity: 0; transform: scale(0.88); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-spring); transition-delay: calc(var(--i, 0) * 0.03s); }
.chips-row.in li { opacity: 1; transform: none; }
.sg-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.8vw; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); text-decoration: none; transition: color 0.3s; }
.sg-more i { font-style: normal; transition: transform 0.45s var(--ease-spring); }
.sg-more:hover { color: var(--gold); }
.sg-more:hover i { transform: translateX(6px); }

/* ---------- NEXT / PREVIOUS ---------- */
.sg-next { padding: 2vw 0 6vw; }
.sg-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vw; }
.nx {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; padding: 1.8vw 2vw; border-radius: var(--radius); border: 1px solid #e3e3e8;
  text-decoration: none; color: var(--ink); transition: color 0.45s var(--ease-out), border-color 0.45s;
}
.nx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); clip-path: inset(100% 0 0 0); transition: clip-path 0.6s var(--ease-out); }
.nx:hover { color: #fff; border-color: var(--gold); }
.nx:hover::before { clip-path: inset(0 0 0 0); }
.nx.next { justify-content: flex-end; text-align: right; }
.nx span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-text); margin-bottom: 6px; transition: color 0.45s; }
.nx:hover span { color: rgba(255,255,255,0.8); }
.nx strong { font-size: clamp(18px, 1.6vw, 27px); font-weight: 400; text-transform: uppercase; }
.nx strong b { font-weight: 300; color: var(--gold); transition: color 0.45s; }
.nx:hover strong b { color: #fff; }
.nx.empty { visibility: hidden; }

/* ==================================================================
   Mobile
   ================================================================== */
@media (max-width: 900px) {
  .sg-top { padding-top: 100px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .sg-kicker { margin-bottom: 12px; }
  .sg-lead { margin-bottom: 22px; }
  .sg-head, .sg-hero, .sg-phil, .sg-two { grid-template-columns: 1fr; gap: 22px; }
  .sg-head { margin-bottom: 24px; }
  .sg-full { padding: 64px 0 56px; }
  .sg-hero { padding: 30px 0 50px; }
  .sg-hero-media { height: 96vw; margin-right: -7vw; }
  .hm-a { left: 0; top: 2vw; width: 60vw; }
  .hm-b { right: 0; top: 0; width: 36vw; }
  .hm-c { left: 26vw; top: 50vw; width: 46vw; }
  .sg-phil { padding: 10px 0 50px; }
  .sg-phil-ph, .sg-phil-pair { margin-top: 20px; }
  .sg-phil-pair { gap: 10px; }
  .sg-curr { padding: 0 0 50px; }
  .sg-curr-grid, .sg-curr-grid.three { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cu { padding: 8px 8px 18px; }
  .cu > :not(.cu-ph) { margin-left: 10px; margin-right: 10px; }
  .cu-ph { margin-bottom: 14px; }
  .cu h3 { margin: 10px 0 6px; }
  .cu-by { margin-bottom: 8px; }
  .sg-band-head { margin-bottom: 26px; }
  .sg-band-wide { grid-template-columns: 1fr; gap: 10px; margin-bottom: 40px; }
  .sg-band-wide .pbox + .pbox { aspect-ratio: 16 / 9; }
  .sg-two { gap: 40px; }
  .sg-col-title { margin-bottom: 14px; }
  .sg-list li { grid-template-columns: 30px 1fr; gap: 10px; padding: 14px 0; }

  /* shared */
  .sg-fees { padding: 50px 0; }
  .fee-in { padding: 24px; }
  .fee-row { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .fee-band h4 { margin-bottom: 14px; }
  .fee-band + .fee-band { margin-top: 22px; padding-top: 22px; }
  .sg-inc { margin-top: 24px; }
  .sg-inc-label { margin-bottom: 12px; }
  .sg-more { margin-top: 18px; }
  .sg-next { padding: 10px 0 50px; }
  .sg-next-grid { grid-template-columns: 1fr; gap: 10px; }
  .nx { padding: 18px; }
  .nx.empty { display: none; }
}
@media (max-width: 520px) {
  .sg-curr-grid, .sg-curr-grid.three { grid-template-columns: 1fr; }
  .fee-row div strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-body *, .sg-body *::before { transition: none !important; animation: none !important; }
  .pbox { clip-path: none !important; }
}

/* ==================================================================
   No brand shapes: the circle / triangle / square markers are retired.
   ================================================================== */
.hst-shape, .st-shape, .nx-shape, .sc-shape, .cc-shape, .wk-shape, .j-shape, .cd-shape { display: none !important; }