/* Gnaan U Education — shared stylesheet.
   Layout idea: an off-white page with generous space, real photographs carrying the story,
   restrained Gnaan U red from the logo, one dark band per page at most.
   Single brand theme by choice; every colour is set explicitly. */
:root {
  --red: #c8242b;
  --red-ink: #9e1b21;
  --red-tint: #fbeceb;
  --yellow: #f6cd3c;
  --yellow-tint: #fff6d8;
  --ink: #1f1b18;
  --ink-2: #3b3530;
  --muted: #645c55;
  --line: #e7dfd3;
  --bg: #fffdf9;
  --paper: #ffffff;
  --sand: #f6f1e8;
  --navy: #13233f;
  --navy-2: #1c3157;
  --navy-text: #c9d3e5;

  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-body: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --wrap: 1200px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 18px;
  color-scheme: light;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.2rem/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 70; background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.narrow { max-width: 780px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 16px; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-block;
  font: 600 0.95rem/1.2 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red);
}
.display {
  font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: -0.035em;
  line-height: 1.02;
}
.h1 { font-size: clamp(2.5rem, 1.32rem + 5.6vw, 5.6rem); }
.h2 {
  font: 700 clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem)/1.06 var(--font-body);
  letter-spacing: -0.035em;
}
.h2 em, .h1 em { font-style: normal; color: var(--red); }
.h3 { font: 700 1.32rem/1.25 var(--font-body); letter-spacing: -0.01em; }
.lede { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: 1.04rem; }
.note { font-size: 0.94rem; color: var(--muted); line-height: 1.45; }

section { padding-block: clamp(56px, 7vw, 100px); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 52px); max-width: 880px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.band-sand { background: var(--sand); }
.band-paper { background: var(--paper); border-block: 1px solid var(--line); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy .eyebrow { color: var(--yellow); }
.band-navy .lede, .band-navy .muted { color: var(--navy-text); }
.band-navy .h2 em { color: var(--yellow); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; border: 2px solid transparent;
  font: 600 1.1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-red { background: var(--red); color: #fff; }
.btn-line { border-color: currentColor; background: transparent; color: var(--ink); }
.btn-white { background: #fff; color: var(--red-ink); }
.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-line-white { border-color: rgba(255,255,255,0.7); color: #fff; background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn-red:hover { background: var(--red-ink); }
  .btn-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
  .btn-white:hover { background: var(--yellow-tint); }
  .btn-yellow:hover { background: #ffdc63; }
  .btn-line-white:hover { background: #fff; color: var(--navy); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--red-ink); text-decoration: none;
  transition: gap 180ms var(--ease-out);
}
.textlink svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .textlink:hover { gap: 10px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid rgba(31, 27, 24, 0.08);
}
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.hdr { display: flex; align-items: center; gap: 20px; min-height: 70px; position: relative; }
.brand { line-height: 0; flex: none; }
.brand img { height: 42px; width: auto; border-radius: 3px; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  font-weight: 500; font-size: 1.04rem; color: var(--ink);
  transition: background-color 160ms ease;
}
.nav a[aria-current="page"] { color: var(--red-ink); background: var(--red-tint); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: var(--sand); } .nav a[aria-current="page"]:hover { background: var(--red-tint); } }
.hdr-cta { padding: 11px 18px; font-size: 1.04rem; margin-left: 8px; }
.menu-btn {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.menu-btn:active { transform: scale(0.95); }
.menu-btn svg { width: 22px; height: 22px; display: block; margin: auto; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(300px, calc(100vw - 32px));
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(19, 35, 63, 0.4);
  padding: 8px; display: grid;
  transform-origin: top right;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
}
.menu a { padding: 12px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.menu a[aria-current="page"] { color: var(--red-ink); background: var(--red-tint); }
.menu a.menu-cta { background: var(--red); color: #fff; text-align: center; margin-top: 6px; font-weight: 600; }
.menu[data-state="closed"] { opacity: 0; transform: scale(0.96) translateY(-4px); visibility: hidden; pointer-events: none; transition-duration: 120ms; }
@media (max-width: 960px) { .nav, .hdr-cta { display: none; } .menu-btn { display: block; } }
@media (min-width: 961px) { .menu { display: none; } }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.98rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red-ink); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: 0.6; }

/* ---------- Photos ---------- */
.ph { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph figcaption {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  background: rgba(19, 22, 30, 0.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.94rem; font-weight: 500; line-height: 1.3;
  padding: 6px 10px; border-radius: 9px;
}
.ph .tag-ill { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.9); color: var(--ink); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 6px; }
.ph.zoom { cursor: zoom-in; }
.ph.zoom img { transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ph.zoom:hover img { transform: scale(1.025); } }
.ph.ph-empty {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, #f3ede3 0 12px, #efe8dc 12px 24px);
  border: 1.5px dashed #d6cbb9; color: var(--muted);
  padding: 20px;
}
.ph-empty div { display: grid; gap: 6px; justify-items: center; max-width: 30ch; }
.ph-empty svg { width: 30px; height: 30px; color: #b6a892; }
.ph-empty b { font-size: 0.98rem; color: var(--ink-2); }
.ph-empty span { font-size: 0.94rem; line-height: 1.35; }

.r-16x10 { aspect-ratio: 16 / 10; } .r-4x3 { aspect-ratio: 4 / 3; } .r-3x2 { aspect-ratio: 3 / 2; }
.r-1x1 { aspect-ratio: 1 / 1; } .r-4x5 { aspect-ratio: 4 / 5; } .r-21x9 { aspect-ratio: 21 / 9; }

.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 16vw, 210px); gap: 10px; }
.mosaic .ph { height: 100%; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }
@media (max-width: 760px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .mosaic .big { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Home hero ---------- */
.home-hero { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.home-hero-copy { display: grid; gap: 22px; min-width: 0; }
.home-hero .h1 { font-size: clamp(2.4rem, 1.1rem + 4.2vw, 4.4rem); overflow-wrap: break-word; }
.home-hero-copy .sub { font: 600 clamp(1.21rem, 1.1rem + 0.5vw, 1.35rem)/1.35 var(--font-body); color: var(--ink-2); }
.home-hero-copy .sub span { color: var(--red); }
.hero-stack { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(360px, 40vw, 540px); }
.hero-stack .ph { height: 100%; }
.hero-stack .ph:first-child { grid-row: span 2; }
@media (max-width: 900px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stack { height: auto; grid-template-rows: none; grid-auto-rows: 160px; }
  .hero-stack .ph:first-child { grid-row: span 2; }
}
.loaded .enter { animation: rise 520ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.d1 { animation-delay: 30ms !important; } .d2 { animation-delay: 90ms !important; } .d3 { animation-delay: 150ms !important; } .d4 { animation-delay: 210ms !important; }
@media (prefers-reduced-motion: reduce) { .loaded .enter { animation: none; } }

/* ---------- Mission statement ---------- */
.mission { background: var(--red); color: #fff; }
.mission-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.mission .display { font-size: clamp(2.4rem, 1.3rem + 2.8vw, 3.8rem); }
.mission .display span { color: var(--yellow); }
.mission blockquote { margin: 0; font: 500 clamp(1.375rem, 1.1rem + 1vw, 1.75rem)/1.35 var(--font-body); }
.mission .who { display: block; margin-top: 14px; font-size: 1.04rem; font-weight: 600; color: #ffd9d6; letter-spacing: 0.04em; }
@media (max-width: 860px) { .mission-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Split block ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.rev > :first-child { order: 2; }
.split-copy { display: grid; gap: 18px; align-content: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } .split.rev > :first-child { order: 0; } }

.analogy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.analogy div { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.analogy b { font-size: 1.1rem; }
.analogy span { font-size: 0.98rem; color: var(--muted); line-height: 1.35; }
.analogy .yes { background: var(--red-tint); border-color: #f2cfcc; }
@media (max-width: 520px) { .analogy { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Triad (Education + Technology + Creativity) ---------- */
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.triad > div { padding: 22px 22px 6px 0; display: grid; gap: 8px; align-content: start; }
.triad > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.triad .display { font-size: clamp(1.8rem, 1.32rem + 1.6vw, 2.6rem); }
.triad .plus { color: var(--red); }
.triad p { color: var(--muted); }
@media (max-width: 760px) {
  .triad { grid-template-columns: minmax(0, 1fr); }
  .triad > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Programme cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards, .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards, .cards.four { grid-template-columns: minmax(0, 1fr); } }
.pcard {
  display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms ease;
}
.pcard:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(31, 27, 24, 0.5); border-color: #d9cfbf; }
  .pcard:hover .textlink { gap: 10px; }
}
.pcard .ph { border-radius: 0; aspect-ratio: 3 / 2; }
.pcard-body { padding: 18px 18px 20px; display: grid; gap: 8px; align-content: start; }
.pcard-kicker { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pcard h3 { font: 700 1.42rem/1.2 var(--font-body); }
.pcard p { font-size: 1.08rem; color: var(--muted); line-height: 1.5; }
.pcard-body { position: relative; padding-bottom: 76px !important; }
.pcard-go {
  position: absolute; right: 18px; bottom: 18px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red-tint); color: var(--red-ink); border: 1px solid #f1d1ce;
  transition: background-color 180ms ease, color 180ms ease, transform 200ms var(--ease-out);
}
.pcard-go svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard-go { background: var(--red); color: #fff; border-color: var(--red); transform: translateX(3px); }
}
.pcard:active .pcard-go { background: var(--red); color: #fff; }

/* compact list cards for catalogue groups */
.group { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-block: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.group:first-of-type { border-top: 0; }
.group-head { display: grid; gap: 10px; align-content: start; }
.group-head .num { font: 700 3rem/1 var(--font-body); color: var(--red); }
@media (max-width: 860px) { .group { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Programme page hero ---------- */
.p-hero { padding-block: clamp(24px, 3.5vw, 40px) 0; }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: 18px; }
.p-hero-copy { display: grid; gap: 18px; align-content: start; }
.p-hero .h1 { font-size: clamp(2.7rem, 1.4rem + 4vw, 4.8rem); }
.p-hero .tagline { font: 600 clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem)/1.3 var(--font-body); color: var(--red-ink); }
.p-hero .ph { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .p-hero-grid { grid-template-columns: minmax(0, 1fr); } .p-hero .ph { aspect-ratio: 16 / 10; } }

.glance {
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0;
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.glance div { padding: 16px 20px; display: grid; gap: 3px; align-content: start; }
.glance div + div { border-left: 1px solid var(--line); }
.glance dt { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.glance dd { margin: 0; font-weight: 600; font-size: 1.1rem; line-height: 1.35; }
@media (max-width: 860px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance div:nth-child(odd) { border-left: 0; }
  .glance div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Steps / sequences ---------- */
.steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; counter-reset: s; list-style: none; }
.steps li {
  counter-increment: s; position: relative;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 16px 16px; display: grid; gap: 6px; align-content: start;
}
.steps li::before { content: counter(s, decimal-leading-zero); font: 700 1.6rem/1 var(--font-body); color: var(--red); }
.steps b { font-size: 1.22rem; line-height: 1.25; }
.steps span { font-size: 1.04rem; color: var(--muted); line-height: 1.45; }
.band-navy .steps li { background: var(--navy-2); border-color: transparent; }
.band-navy .steps li::before { color: var(--yellow); }
.band-navy .steps span { color: var(--navy-text); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(min(var(--n, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* timeline variant: connected line */
.journey { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 0; position: relative; }
.journey li { position: relative; padding: 44px 12px 0 0; display: grid; gap: 6px; align-content: start; }
.journey li::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: rgba(255,255,255,0.25); }
.journey li:last-child::before { right: auto; width: 32px; }
.journey li::after { content: attr(data-n); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-items: center; font: 700 1.04rem/1 var(--font-body); }
.journey b { font-size: 1.122rem; }
.journey span { font-size: 0.98rem; line-height: 1.45; color: var(--navy-text); }
@media (max-width: 1000px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .journey li { padding: 0 0 22px 50px; }
  .journey li::before { left: 15px; right: auto; top: 32px; bottom: 0; width: 2px; height: auto; }
  .journey li:last-child::before { display: none; }
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chips li { padding: 7px 13px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 1.04rem; font-weight: 500; }
.chips.red li { background: var(--red-tint); border-color: #f1d1ce; color: var(--red-ink); }
.band-navy .chips li { background: var(--navy-2); border-color: transparent; color: #fff; }

/* ---------- Stats / evidence ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 6px; align-content: start; }
.stat b { font: 700 clamp(2.2rem, 1.7rem + 1.6vw, 3rem)/1 var(--font-body); color: var(--red); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.stat .what { font-weight: 600; font-size: 1.12rem; line-height: 1.3; }
.stat .src { font-size: 0.9rem; color: var(--muted); line-height: 1.4; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }
.band-navy .stat { background: var(--navy-2); border-color: transparent; }
.band-navy .stat b { color: var(--yellow); }
.band-navy .stat .src { color: var(--navy-text); border-color: rgba(255,255,255,0.15); }

/* before/after bars */
.compare { display: grid; gap: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.5vw, 26px); }
.compare h3 { font: 700 1.155rem/1.3 var(--font-body); }
.bar-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 1.04rem; }
.bar-row .track { height: 14px; border-radius: 99px; background: var(--sand); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 99px; background: #c9bfb1; width: var(--v); }
.bar-row.after .fill { background: var(--red); }
.bar-row b { font-variant-numeric: tabular-nums; text-align: right; }
.compare .pair { display: grid; gap: 8px; }

/* vertical column chart */
.cols { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); align-items: end; height: 240px; padding-top: 28px; border-bottom: 2px solid var(--ink); }
.cols div { position: relative; height: var(--v); background: var(--red); border-radius: 10px 10px 0 0; min-height: 4px; }
.cols div:not(:last-child) { background: #e2a19d; }
.cols div b { position: absolute; top: -26px; left: 0; right: 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.04rem; }
.cols-x { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); margin-top: 8px; text-align: center; font-size: 0.98rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Diagrams ---------- */
.leg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.leg div { border-radius: 20px; padding: 22px 20px; display: grid; gap: 6px; align-content: start; background: var(--paper); border: 1px solid var(--line); }
.leg .L { font: 700 3.4rem/0.9 var(--font-body); color: var(--red); }
.leg b { font-size: 1.265rem; }
.leg span { color: var(--muted); font-size: 1.04rem; line-height: 1.45; }
@media (max-width: 640px) { .leg { grid-template-columns: minmax(0, 1fr); } }

.solver { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.solver div { background: var(--navy-2); border-radius: 16px; padding: 16px 14px; display: grid; gap: 6px; align-content: start; }
.solver .L { font: 700 3rem/0.9 var(--font-body); color: var(--yellow); }
.solver b { font-size: 1.04rem; line-height: 1.25; }
@media (max-width: 900px) { .solver { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .solver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.flow { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; list-style: none; }
.flow li { position: relative; padding: 18px 26px 18px 18px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.flow li:first-child { border-radius: 16px 0 0 16px; }
.flow li:last-child { border-radius: 0 16px 16px 0; }
.flow li + li { border-left: 0; }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; background: var(--paper); border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.flow b { font-size: 1.1rem; }
.flow span { font-size: 0.98rem; color: var(--muted); line-height: 1.4; }
.flow .k { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li, .flow li:first-child, .flow li:last-child { border-radius: 0; }
  .flow li:first-child { border-radius: 16px 16px 0 0; }
  .flow li:last-child { border-radius: 0 0 16px 16px; }
  .flow li + li { border-left: 1px solid var(--line); border-top: 0; }
  .flow li:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -9px; transform: rotate(135deg); }
}

/* ---------- Tiles (disciplines etc.) ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); color: #fff; }
.tile .ph { height: 100%; border-radius: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile .cap { position: absolute; inset: auto 0 0 0; padding: 40px 14px 14px; background: linear-gradient(to top, rgba(12, 12, 14, 0.82), rgba(12, 12, 14, 0)); display: grid; gap: 3px; }
.tile .cap b { font-size: 1.122rem; line-height: 1.2; }
.tile .cap span { font-size: 0.94rem; line-height: 1.35; color: #e9e6e1; }

/* ---------- Info cards (generic) ---------- */
.info { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .info { grid-template-columns: minmax(0, 1fr); } }
.icard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; align-content: start; }
.icard .k { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.icard h3 { font: 700 1.32rem/1.25 var(--font-body); }
.icard p { font-size: 1.08rem; color: var(--muted); line-height: 1.5; }
.icard ul { list-style: none; display: grid; gap: 4px; font-size: 1.04rem; color: var(--ink-2); }
.icard ul li { padding-left: 16px; position: relative; }
.icard ul li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.band-navy .icard { background: var(--navy-2); border-color: transparent; }
.band-navy .icard p { color: var(--navy-text); }
.band-navy .icard ul { color: #e3e9f3; }
.band-navy .icard .k { color: var(--yellow); }

/* model cards with photo (exposure, sessions) */
.models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .models { grid-template-columns: minmax(0, 1fr); } }
.model { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.model .ph { border-radius: 0; aspect-ratio: 16 / 9; }
.model-body { padding: 20px; display: grid; gap: 10px; align-content: start; }
.model-body .when { font-size: 0.94rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.model-body h3 { font: 700 1.32rem/1.25 var(--font-body); }
.model-body p { color: var(--muted); font-size: 1.04rem; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.98rem; }
.facts span b { font-variant-numeric: tabular-nums; }

/* session cards (Women of Substance) */
.sessions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sessions { grid-template-columns: minmax(0, 1fr); } }
.session { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; align-content: start; }
.session time { font: 700 1.5rem/1 var(--font-body); color: var(--red); letter-spacing: 0.01em; }
.session h3 { font: 700 1.155rem/1.3 var(--font-body); }
.session .who { font-size: 1.04rem; font-weight: 600; color: var(--ink-2); }
.session p { font-size: 1.04rem; color: var(--muted); line-height: 1.45; }

/* timeline list (financial literacy implementations) */
.tl { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 8px; }
.tl li { position: relative; padding: 0 0 24px 26px; display: grid; gap: 4px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--bg); }
.tl time { font-size: 0.94rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.tl b { font-size: 1.188rem; }
.tl span { color: var(--muted); font-size: 1.04rem; }

/* ---------- Quote / case ---------- */
.quote { margin: 0; display: grid; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: var(--yellow-tint); border: 1px solid #f1e3ae; }
.quote p { font: 500 clamp(1.265rem, 1.1rem + 0.6vw, 1.45rem)/1.4 var(--font-body); color: var(--ink); }
.quote p::before { content: "\201C"; color: var(--red); margin-right: 2px; }
.quote p::after { content: "\201D"; color: var(--red); margin-left: 1px; }
.quote cite { font-style: normal; font-size: 1.04rem; font-weight: 600; color: var(--muted); }

.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.case .ph { border-radius: 0; min-height: 260px; height: 100%; }
.case-body { padding: clamp(20px, 3vw, 34px); display: grid; gap: 12px; align-content: center; }
.case-body .k { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.case-body h3 { font: 700 clamp(1.375rem, 1.21rem + 0.6vw, 1.6rem)/1.2 var(--font-body); }
.case-body p { color: var(--muted); }
.case-steps { list-style: none; display: grid; gap: 8px; }
.case-steps li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; font-size: 1.04rem; }
.case-steps li b { color: var(--red-ink); font-size: 0.94rem; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; }
@media (max-width: 860px) { .case { grid-template-columns: minmax(0, 1fr); } .case .ph { min-height: 0; aspect-ratio: 16 / 10; } }

.honest { display: flex; gap: 12px; align-items: flex-start; background: var(--sand); border-radius: 14px; padding: 14px 16px; font-size: 1.04rem; color: var(--ink-2); line-height: 1.5; }
.honest svg { width: 20px; height: 20px; flex: none; color: var(--muted); margin-top: 2px; }
.band-navy .honest { background: var(--navy-2); color: var(--navy-text); }

/* ---------- Pillars ---------- */
.pillars { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: p; }
.pillars li { counter-increment: p; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 18px 64px; position: relative; display: grid; gap: 4px; }
.pillars li::before { content: counter(p); position: absolute; left: 20px; top: 16px; font: 700 2rem/1 var(--font-body); color: var(--red); }
.pillars b { font-size: 1.144rem; line-height: 1.3; }
.pillars span { font-size: 1.04rem; color: var(--muted); line-height: 1.45; }
.pillars li.status-v::after { content: "Long-term"; position: absolute; top: 14px; right: 14px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--sand); padding: 3px 7px; border-radius: 6px; }
@media (max-width: 760px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Partners strip ---------- */
.partners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.partners div { padding: 18px; display: grid; gap: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.partners b { font-size: 1.1rem; line-height: 1.25; }
.partners span { font-size: 0.94rem; color: var(--muted); }
@media (max-width: 900px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Status badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border-radius: 999px; font-size: 0.94rem; font-weight: 600; background: var(--yellow-tint); color: #6b5308; border: 1px solid #f1e3ae; }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: #e0a800; }
.band-navy .badge { background: rgba(246, 205, 60, 0.14); color: var(--yellow); border-color: rgba(246, 205, 60, 0.35); }

/* ---------- CTA band ---------- */
.cta { background: var(--red); color: #fff; padding-block: clamp(48px, 6vw, 80px); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 24px 48px; align-items: center; }
.cta .h2 { color: #fff; }
.cta p { color: #ffdedb; max-width: 58ch; margin-top: 10px; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Related ---------- */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .related { grid-template-columns: minmax(0, 1fr); } }
.rel { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform 160ms var(--ease-out), border-color 200ms ease; }
.rel:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .rel:hover { border-color: #d3c6b3; } }
.rel .ph { aspect-ratio: 1 / 1; border-radius: 10px; }
.rel b { display: block; font-size: 1.1rem; line-height: 1.25; }
.rel span { font-size: 0.94rem; color: var(--muted); }

/* ---------- Forms / contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 30px); }
.form .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 0.98rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1.1rem; color: var(--ink); background: var(--bg);
  border: 1px solid #d9cfc0; border-radius: 12px; padding: 12px 14px; width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 36, 43, 0.15); }
.field .err { font-size: 0.94rem; color: var(--red-ink); min-height: 1em; }
.form-out { grid-column: 1 / -1; display: grid; gap: 10px; background: var(--sand); border-radius: 14px; padding: 16px; }
.form-out pre { margin: 0; white-space: pre-wrap; font: 1.04rem/1.5 var(--font-body); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 260px; overflow: auto; }

.cbox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 26px); display: grid; gap: 16px; }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.crow:last-child { border-bottom: 0; padding-bottom: 0; }
.crow .lbl { grid-column: 1 / -1; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.crow .val { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.crow .val a { text-decoration: none; }
.copy { font: 600 0.94rem/1 var(--font-body); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; min-width: 74px; transition: transform 140ms var(--ease-out), background-color 160ms ease; }
.copy:active { transform: scale(0.95); }
.copy[data-done="true"] { background: #e3f1e0; border-color: #bddbb7; color: #22622d; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--navy-text); padding-block: clamp(44px, 5vw, 64px) calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 1.04rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot-grid h4 { font: 600 0.9rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.foot-grid ul { list-style: none; display: grid; gap: 7px; }
.foot-grid a { color: var(--navy-text); text-decoration: none; }
.foot-grid a:hover { color: #fff; text-decoration: underline; }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-brand img { height: 40px; width: auto; border-radius: 3px; }
.foot-brand p { max-width: 36ch; }
.foot-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.94rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* ---------- Lightbox ---------- */
dialog.lb {
  border: 0; padding: 0; background: transparent; max-width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: visible;
  opacity: 1; transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}
dialog.lb:not([open]) { opacity: 0; transform: scale(0.97); transition-duration: 130ms; }
@starting-style { dialog.lb[open] { opacity: 0; transform: scale(0.96); } }
dialog.lb::backdrop { background: rgba(10, 12, 18, 0.82); opacity: 1; transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
dialog.lb:not([open])::backdrop { opacity: 0; }
@starting-style { dialog.lb[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.lb, dialog.lb:not([open]) { transform: none; } }
.lb figure { margin: 0; display: grid; gap: 10px; }
.lb img { max-height: calc(100vh - 110px); width: auto; max-width: 100%; margin: auto; border-radius: 12px; }
.lb figcaption { color: #e7e3dd; text-align: center; font-size: 1.04rem; }
.lb-btn { position: fixed; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.92); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform 140ms var(--ease-out); }
.lb-btn:active { transform: scale(0.92); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-close { top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
.lb-prev { left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.92); }

/* utility */
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: clamp(36px, 5vw, 56px); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 16px; align-content: start; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Home hero: rotating photographs ---------- */
.hero-x { padding-block: 0; position: relative; color: #fff; overflow: hidden; background: #1b1714; }
.hx-media { position: absolute; inset: 0; }
.hx-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1100ms ease, transform 7000ms linear;
}
.hx-img.is-on { opacity: 1; transform: scale(1); }
.hx-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 11, 9, 0.66) 0%, rgba(14, 11, 9, 0.46) 34%, rgba(14, 11, 9, 0.08) 62%, rgba(14, 11, 9, 0) 100%),
    linear-gradient(0deg, rgba(14, 11, 9, 0.55) 0%, rgba(14, 11, 9, 0) 30%);
}
.hero-x-inner { position: relative; min-height: clamp(540px, calc(100svh - 72px), 740px); display: grid; grid-template-rows: 1fr auto; padding-block: clamp(40px, 5vw, 72px) 24px; gap: 32px; }
.hero-x-copy { align-self: center; display: grid; gap: 22px; max-width: 700px; }
.hero-x .eyebrow { color: var(--yellow); text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.hx-slides { display: grid; }
.hx-slide { grid-area: 1 / 1; display: grid; gap: 18px; align-content: start; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); pointer-events: none; }
.hx-slide.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 150ms; }
.hx-h { margin: 0; font: 700 clamp(2.4rem, 1.3rem + 4vw, 4.6rem)/1.03 var(--font-body); letter-spacing: -0.03em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hx-h span { color: var(--yellow); }
.hx-sub { font-size: clamp(1.15rem, 1rem + 0.55vw, 1.4rem); line-height: 1.45; color: #f6f1ea; max-width: 36ch; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.hx-controls { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hx-dots { display: flex; gap: 8px; }
.hx-dot { width: 44px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; align-items: center; }
.hx-dot span { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.38); overflow: hidden; position: relative; transition: background-color 200ms ease; }
.hx-dot span::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.hx-dot.is-on span::after { animation: hxfill var(--hx-dur, 6500ms) linear forwards; }
.hero-x.paused .hx-dot.is-on span::after { animation-play-state: paused; }
.hx-dot.is-on.static span::after { animation: none; transform: scaleX(1); }
@keyframes hxfill { to { transform: scaleX(1); } }
.hx-pause { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform 140ms var(--ease-out), background-color 160ms ease; }
.hx-pause:active { transform: scale(0.92); }
.hx-pause svg { width: 14px; height: 14px; }
.hx-pause .i-play { display: none; }
.hero-x.paused .hx-pause .i-play { display: block; }
.hero-x.paused .hx-pause .i-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .hx-pause:hover { background: rgba(255,255,255,0.24); } .hx-dot:hover span { background: rgba(255,255,255,0.6); } }
.hero-x-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.hero-x-strip > span { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #ece5dc; margin-right: 6px; }
.hero-x-strip a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; text-decoration: none; color: #fff; font-weight: 500;
  background: rgba(20, 16, 14, 0.32); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.hero-x-strip a:active { transform: scale(0.97); }
.hero-x-strip a svg { width: 16px; height: 16px; }
.hero-x-strip a.all { background: #fff; color: var(--ink); border-color: #fff; margin-left: auto; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .hero-x-strip a:hover { background: rgba(20, 16, 14, 0.5); }
  .hero-x-strip a.all:hover { background: var(--yellow); border-color: var(--yellow); }
}
/* Phones: the photograph sits on top, bright and uncovered; the words sit below on a dark band */
@media (max-width: 760px) {
  .hero-x { background: #1a1512; }
  .hx-media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .hx-media::after { background: linear-gradient(0deg, #1a1512 0%, rgba(26, 21, 18, 0) 28%); }
  .hero-x-inner { min-height: 0; padding-block: 4px 24px; gap: 24px; }
  .hx-h { font-size: clamp(2rem, 1.2rem + 4.2vw, 2.6rem); text-shadow: none; }
  .hx-sub { text-shadow: none; }
  .hero-x-strip { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); padding-inline: var(--gut-l) var(--gut-r); scrollbar-width: none; }
  .hero-x-strip::-webkit-scrollbar { display: none; }
  .hero-x-strip a { flex: none; }
  .hero-x-strip a.all { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-img { transition: opacity 400ms ease; transform: none !important; }
  .hx-slide { transition: opacity 300ms ease; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) { .hero-x-strip a { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(40, 34, 30, 0.92); } }

/* ---------- Education + Technology + Creativity (apple-design: depth, material, restraint) ---------- */
.etc { background: linear-gradient(180deg, var(--bg) 0%, var(--sand) 100%); }
.etc-head { display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: clamp(32px, 4.5vw, 56px); }
.etc-title { font: 700 clamp(2rem, 1.2rem + 3.2vw, 3.9rem)/1.04 var(--font-body); letter-spacing: -0.035em; color: var(--ink); }
.etc-title span { color: var(--red); font-weight: 500; padding-inline: 0.06em; }
.etc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.etc-card {
  position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: visible;
  box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 30px 60px -32px rgba(31, 27, 24, 0.45);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.etc-card .ph { position: absolute; inset: 0; border-radius: 28px; height: 100%; }
.etc-card .ph img { transition: transform 700ms var(--ease-out); }
.etc-glass {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1;
  display: grid; gap: 6px; padding: 18px 20px 20px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 30px -16px rgba(31, 27, 24, 0.4);
}
.etc-n { font: 600 0.9rem/1 var(--font-body); letter-spacing: 0.12em; color: var(--red-ink); }
.etc-glass h3 { font: 700 clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem)/1.05 var(--font-body); letter-spacing: -0.03em; color: var(--ink); }
.etc-glass p { font-size: 1.04rem; line-height: 1.45; color: var(--ink-2); font-weight: 500; }
/* "+" joins the cards, sitting in the gap like a hinge */
.etc-card:not(:last-child)::after {
  content: "+"; position: absolute; z-index: 2; top: 42%; right: -11px; transform: translate(50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #fff; font: 500 1.9rem/1 var(--font-body);
  box-shadow: 0 0 0 6px var(--bg), 0 12px 24px -10px rgba(158, 27, 33, 0.7);
}
@media (hover: hover) and (pointer: fine) {
  .etc-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 40px 70px -32px rgba(31, 27, 24, 0.55); }
  .etc-card:hover .ph img { transform: scale(1.04); }
}
@media (max-width: 860px) {
  .etc-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .etc-card { aspect-ratio: 4 / 3; }
  .etc-card:not(:last-child)::after { top: auto; right: 50%; bottom: -15px; transform: translate(50%, 50%); }
}
@media (max-width: 480px) { .etc-card { aspect-ratio: 4 / 5; } }
.etc-card:nth-child(1) { z-index: 3; } .etc-card:nth-child(2) { z-index: 2; } .etc-card:nth-child(3) { z-index: 1; }
.etc-glass p { min-height: 2.9em; }
@media (prefers-reduced-transparency: reduce) { .etc-glass { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .etc-card, .etc-card .ph img { transition: none; } }

/* Consistent heading-to-body spacing when a section head sits inside a text column */
.split-copy > .sec-head, .stack > .sec-head, .grid-2 > .stack > .sec-head { margin-bottom: 0; }
.split-copy { gap: 18px; }

/* ---------- Bold, minimal pass ---------- */
.model-body h3, .session h3, .case-body h3 { letter-spacing: -0.02em; }
.model-body h3 { font-size: 1.42rem; }
.model-body p, .session p { font-size: 1.06rem; }
.glance dd { font-size: 1.12rem; }
.chips li { font-size: 1rem; padding: 9px 15px; }
.stat b { letter-spacing: -0.03em; }

/* ---------- Photo collage (apple-design: layered depth, consistent radii) ---------- */
.collage { position: relative; aspect-ratio: 6 / 5; max-width: 100%; }
.collage .ph { position: absolute; margin: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(31,27,24,0.06), 0 30px 60px -30px rgba(31, 27, 24, 0.5); }
.collage .c-main { inset: 0 0 20% 16%; aspect-ratio: auto; }
.collage .c-a { right: 7%; bottom: 0; width: 44%; aspect-ratio: 4 / 3; z-index: 2; box-shadow: 0 0 0 6px var(--bg), 0 26px 50px -24px rgba(31, 27, 24, 0.55); }
.collage .c-b { left: 0; top: 9%; width: 30%; aspect-ratio: 1 / 1; z-index: 2; box-shadow: 0 0 0 6px var(--bg), 0 22px 44px -22px rgba(31, 27, 24, 0.5); }
.band-sand .collage .c-a, .band-sand .collage .c-b { box-shadow: 0 0 0 6px var(--sand), 0 26px 50px -24px rgba(31, 27, 24, 0.55); }
.collage .c-a figcaption, .collage .c-b figcaption { display: none; }
.collage .c-main figcaption { left: auto; right: 10px; top: 10px; bottom: auto; }
.case .collage { margin: 24px; align-self: center; }
.case .collage .ph { min-height: 0; height: auto; border-radius: 22px; }
.case .collage .c-a, .case .collage .c-b { box-shadow: 0 0 0 6px var(--paper), 0 26px 50px -24px rgba(31, 27, 24, 0.55); }

/* ---------- Krishnamurti quote ---------- */
.jk { background: var(--navy); color: #fff; text-align: center; }
.jk blockquote { margin: 0 auto; max-width: 980px; display: grid; gap: 26px; justify-items: center; }
.jk .mark { font: 700 6rem/0.6 var(--font-body); color: var(--yellow); height: 48px; }
.jk p { font: 700 clamp(1.7rem, 1.1rem + 2.2vw, 3rem)/1.18 var(--font-body); letter-spacing: -0.03em; text-wrap: balance; }
.jk p em { font-style: normal; color: var(--yellow); }
.jk cite { font-style: normal; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-text); }

@media (max-width: 600px) { .collage .c-main figcaption { display: none; } }

/* ---------- Home hero v3 (apple-design): centred type, one rounded photo stage, glass segmented control ---------- */
.hx2 { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px); background: radial-gradient(120% 60% at 50% 0%, #fff 0%, var(--bg) 60%); }
.hx2-head { display: grid; justify-items: center; text-align: center; gap: 28px; }
.hx2-titles { display: grid; width: 100%; max-width: 1000px; }
.hx2-t { grid-area: 1 / 1; display: grid; gap: 20px; justify-items: center; align-content: center;
  opacity: 0; filter: blur(6px); transform: translateY(8px);
  transition: opacity 420ms var(--ease-out), filter 420ms var(--ease-out), transform 520ms var(--ease-out); pointer-events: none; }
.hx2-t.is-on { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; transition-delay: 80ms; }
.hx2-h { margin: 0; font: 700 clamp(2.6rem, 1.2rem + 4.8vw, 5.6rem)/1.02 var(--font-body); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.hx2-h em { font-style: normal; color: var(--red); }
.hx2-sub { font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.45; color: var(--muted); max-width: 40ch; text-wrap: balance; }
.hx2-actions { justify-content: center; }
.hx2-stage {
  position: relative; margin-top: clamp(32px, 4.5vw, 56px);
  aspect-ratio: 21 / 9; max-width: 100%; border-radius: 32px; overflow: hidden; background: var(--sand);
  box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 50px 90px -50px rgba(31, 27, 24, 0.55);
}
.hx2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  opacity: 0; transform: scale(1.05); transition: opacity 1000ms ease, transform 7000ms linear; }
.hx2-img.is-on { opacity: 1; transform: scale(1); }
.hx2-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(0deg, rgba(14, 11, 9, 0.35), rgba(14, 11, 9, 0)); pointer-events: none; }
.hx2-bar {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 999px; max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px -14px rgba(14, 11, 9, 0.45);
}
.hx2-tabs { position: relative; display: flex; gap: 2px; }
.hx2-ind { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(31,27,24,0.08), 0 6px 16px -8px rgba(31,27,24,0.35);
  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1), width 450ms cubic-bezier(0.32, 0.72, 0, 1); }
.hx2-tab { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 10px 16px; border-radius: 999px; font: 600 0.98rem/1 var(--font-body); color: var(--ink-2);
  transition: color 200ms ease, transform 140ms var(--ease-out); }
.hx2-tab:active { transform: scale(0.96); }
.hx2-tab.is-on { color: var(--ink); }
.hx2-tab i { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(200, 36, 43, 0.18); overflow: hidden; opacity: 0; }
.hx2-tab.is-on i { opacity: 1; }
.hx2-tab.is-on i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(0); animation: hxfill var(--hx-dur, 6500ms) linear forwards; }
.hx2.paused .hx2-tab.is-on i::after { animation-play-state: paused; }
.hx2.stopped .hx2-tab.is-on i { opacity: 0; }
.hx2-pause { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color 160ms ease, transform 140ms var(--ease-out); }
.hx2-pause:active { transform: scale(0.92); }
.hx2-pause svg { width: 14px; height: 14px; }
.hx2-pause .i-play { display: none; }
.hx2.stopped .hx2-pause .i-play { display: block; }
.hx2.stopped .hx2-pause .i-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .hx2-tab:hover { color: var(--ink); } .hx2-pause:hover { background: rgba(31,27,24,0.06); } }
@media (max-width: 760px) {
  .hx2-stage { aspect-ratio: 4 / 3; border-radius: 24px; }
  .hx2-tab { padding: 0; width: 30px; height: 30px; }
  .hx2-tab .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hx2-tab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(31,27,24,0.3); transition: background-color 200ms ease, width 300ms var(--ease-out), margin 300ms var(--ease-out), border-radius 300ms; }
  .hx2-tab.is-on::before { background: var(--red); }
  .hx2-tab i { display: none; }
  .hx2-ind { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx2-img { transition: opacity 300ms ease; transform: none !important; }
  .hx2-t { transition: opacity 250ms ease; filter: none !important; transform: none !important; }
  .hx2-ind { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .hx2-bar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------- Programme card impact band (brochure colours) ---------- */
.pcard { grid-template-rows: auto auto 1fr; }
.t-pink  { --tint: #fbe3e6; --tone: #a3173f; }
.t-sand  { --tint: #f7ecd0; --tone: #7a520c; }
.t-mint  { --tint: #e0f1dc; --tone: #1f6a2c; }
.t-sky   { --tint: #dcedf6; --tone: #164a86; }
.t-lilac { --tint: #ebe2f4; --tone: #52309a; }
.t-stone { --tint: #ece8e4; --tone: #3a2a33; }
.pcard-impact { background: var(--tint); padding: 16px 18px; display: grid; gap: 4px; }
.pcard-impact b { font: 700 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1 var(--font-body); letter-spacing: -0.04em; color: var(--tone); font-variant-numeric: tabular-nums; }
.pcard-impact span { font-size: 0.98rem; line-height: 1.35; color: var(--tone); font-weight: 500; opacity: 0.92; }

/* ---------- Larger labels, no small caps ---------- */
.glance dt, .icard .k, .model-body .when, .tl time, .case-body .k, .flow .k, .crow .lbl, .case-steps li b {
  font-size: 1.02rem; letter-spacing: 0; text-transform: none; font-weight: 600;
}
.sec-head { gap: 16px; }

/* ---------- Mission: one sentence per line, everything left-aligned in one column ---------- */
.mission-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.mission .display .ln { display: block; white-space: nowrap; color: #fff; }
.mission blockquote { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); max-width: 52ch; }
.mission .display .ln.y { color: var(--yellow); }
.mission .display { font-size: clamp(2.2rem, 1.1rem + 4vw, 4.6rem); }
.mission blockquote { max-width: 46ch; }
@media (max-width: 420px) { .mission .display .ln { white-space: normal; } }

/* ---------- Rotating photo panel (apple-design: large media, glass controls, gentle crossfade) ---------- */
.split-media { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.5vw, 44px); }
.split-media .split-copy { max-width: 860px; }
.split-media .rot { aspect-ratio: 2 / 1; border-radius: 32px; }
@media (max-width: 760px) { .split-media .rot { aspect-ratio: 4 / 3; border-radius: 24px; } }
.rot { position: relative; margin: 0; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 28px; overflow: hidden; background: var(--sand);
  box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 40px 80px -42px rgba(31, 27, 24, 0.55); }
.rot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity 900ms ease, transform 6000ms linear; }
.rot-img.is-on { opacity: 1; transform: scale(1); }
.rot-cap, .rot-dots {
  position: absolute; bottom: 16px; z-index: 2;
  background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 24px -12px rgba(14, 11, 9, 0.45);
  border-radius: 999px;
}
.rot-cap { left: 16px; padding: 10px 16px; font-weight: 600; font-size: 1rem; color: var(--ink); max-width: calc(100% - 180px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms ease; }
.rot-dots { right: 16px; display: flex; gap: 2px; padding: 6px; }
.rot-dot { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; position: relative; }
.rot-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 4px; background: rgba(31, 27, 24, 0.28); transition: width 300ms var(--ease-out), margin 300ms var(--ease-out), background-color 200ms ease; }
.rot-dot.is-on::before { width: 18px; margin-left: -9px; background: var(--red); }
@media (max-width: 520px) { .rot-cap { max-width: calc(100% - 32px); bottom: auto; top: 14px; } }
@media (prefers-reduced-motion: reduce) { .rot-img { transition: opacity 300ms ease; transform: none !important; } }
@media (prefers-reduced-transparency: reduce) { .rot-cap, .rot-dots { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }

.partners div { padding: 26px 22px; align-content: center; min-height: 96px; }
.partners b { font-size: 1.2rem; letter-spacing: -0.01em; }

/* Cards: photo, text, then the impact band anchored at the bottom; the whole card is the link */
.pcard { grid-template-rows: auto 1fr auto; }
.pcard-body { padding-bottom: 20px !important; }
.pcard-impact { border-top: 1px solid rgba(31, 27, 24, 0.06); }

/* Big images everywhere: rotating panels replace collages; larger thumbnails and gallery tiles */
.p-hero .rot { aspect-ratio: 4 / 3; }
.case .rot { border-radius: 0; aspect-ratio: auto; height: 100%; min-height: 360px; box-shadow: none; }
@media (max-width: 860px) { .case .rot { min-height: 0; aspect-ratio: 4 / 3; } }
.rot-cap { max-width: calc(100% - 190px); }
.related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rel { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; gap: 0; align-items: stretch; }
.rel .ph { aspect-ratio: 16 / 10; border-radius: 0; }
.rel > div { padding: 16px 18px 18px; }
.rel b { font-size: 1.25rem; }
.mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 22vw, 300px); gap: 12px; }
.mosaic .ph { border-radius: 20px; }
@media (max-width: 760px) { .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; } .mosaic .big, .mosaic .wide { grid-column: auto; grid-row: auto; } }

.rot-cap:empty { display: none; }

/* Krishnamurti quote in a handwritten face, as in the brochure */
.jk p { font: 500 clamp(2.3rem, 1.5rem + 3vw, 4.1rem)/1.2 "Caveat", "Segoe Print", "Bradley Hand", cursive; letter-spacing: 0; }
.jk p em { font-weight: 700; }
.jk cite { font: 700 clamp(1.7rem, 1.4rem + 0.9vw, 2.3rem)/1.2 "Caveat", "Segoe Print", cursive; letter-spacing: 0; text-transform: none; color: var(--yellow); }
.jk .mark { display: none; }

/* Headings use the full width available: break only when the line is full */
h1, h2, h3, h4, .h1, .h2, .display, .hx-h, .hx2-h { text-wrap: pretty; }
.sec-head, .split-media .split-copy { max-width: none; }
.lede, .sec-head .lede, .split-copy .lede { max-width: 74ch; }
.hx2-titles { max-width: 1200px; }

/* Hero v3: full-bleed photo, headline over the image */
.hx3 { padding: 0; background: #1a1512; }
.hx3 .hx2-stage { margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #1a1512;
  height: calc(100svh - 70px); min-height: 600px; max-height: 960px; }
.hx3 .hx2-img { object-position: 50% 35%; }
.hx3 .hx2-stage::after { height: 100%; background:
  linear-gradient(0deg, rgba(12, 9, 7, 0.78) 0%, rgba(12, 9, 7, 0.42) 34%, rgba(12, 9, 7, 0) 62%),
  linear-gradient(90deg, rgba(12, 9, 7, 0.28) 0%, rgba(12, 9, 7, 0) 55%); }
.hx3-over { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding-bottom: clamp(28px, 4.5vw, 64px); pointer-events: none; }
.hx3-grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: end; }
.hx3-grid > * { pointer-events: auto; }
.hx3 .hx2-head { justify-items: start; text-align: left; gap: 30px; }
.hx3 .hx2-titles { max-width: 920px; }
.hx3 .hx2-t { justify-items: start; }
.hx3 .hx2-h { color: #fff; font-size: clamp(2.7rem, 1.2rem + 5vw, 6rem); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); }
.hx3 .hx2-h em { color: var(--yellow); }
.hx3 .hx2-sub { color: rgba(255, 255, 255, 0.92); max-width: 46ch; text-wrap: pretty; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4); }
.hx3 .hx2-actions { justify-content: flex-start; }
.hx3 .btn-line { color: #fff; border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hx3 .hx2-bar { position: absolute; left: auto; right: var(--gut-r); bottom: 0; transform: none; }
@media (hover: hover) and (pointer: fine) { .hx3 .btn-line:hover { background: rgba(255, 255, 255, 0.18); } }
@media (max-width: 1100px) {
  .hx3 .hx2-bar { position: relative; right: auto; justify-self: start; }
}
@media (max-width: 760px) {
  .hx3 .hx2-stage { height: calc(100svh - 64px); min-height: 560px; aspect-ratio: auto; border-radius: 0; }
  .hx3 .hx2-stage::after { background: linear-gradient(0deg, rgba(12, 9, 7, 0.85) 0%, rgba(12, 9, 7, 0.5) 45%, rgba(12, 9, 7, 0) 72%); }
  .hx3 .hx2-head { gap: 22px; }
  .hx3 .hx2-tab::before { background: rgba(31, 27, 24, 0.3); }
}

/* Mission: headline left, mission statement right */
.mission-grid { grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.mission .display { font-size: clamp(2.2rem, 1rem + 3.4vw, 4.2rem); }
.mission blockquote { max-width: none; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem); border-left: 3px solid rgba(255, 255, 255, 0.35); padding-left: clamp(20px, 2.4vw, 36px); }
@media (max-width: 980px) {
  .mission-grid { grid-template-columns: minmax(0, 1fr); }
  .mission blockquote { border-left: 0; padding-left: 0; }
}

/* Programme cards v2: big photo with the title on it, short line, colour impact band */
.cards.pc2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 1000px) { .cards.pc2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards.pc2-grid { grid-template-columns: minmax(0, 1fr); } }
.pc2 { grid-template-rows: auto 1fr auto; border: 0; border-radius: 26px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 18px 40px -28px rgba(31, 27, 24, 0.45); isolation: isolate; }
.pc2-media { position: relative; display: grid; overflow: hidden; }
.pc2-media > .ph { grid-area: 1 / 1; aspect-ratio: 4 / 3; border-radius: 0; margin: 0; }
.cards.four .pc2-media > .ph { aspect-ratio: 4 / 5; }
.pc2-media > .ph img { transition: transform 600ms var(--ease-out); }
.pc2-media::after { content: ""; grid-area: 1 / 1; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 9, 7, 0.72) 0%, rgba(12, 9, 7, 0.28) 32%, rgba(12, 9, 7, 0) 55%); }
.pc2-media h3 { grid-area: 1 / 1; align-self: end; z-index: 2; margin: 0; padding: 0 22px 18px;
  color: #fff; font: 700 clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem)/1.12 var(--font-body); letter-spacing: -0.02em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.pc2-media .ph-empty { background: linear-gradient(160deg, #2a3550, var(--navy)); }
.pc2-media .ph-empty div { align-self: start; margin-top: 18%; }
.pc2-media .ph-empty svg { color: rgba(255, 255, 255, 0.55); }
.pc2-media .ph-empty b { color: rgba(255, 255, 255, 0.8); }
.pc2-media .ph-empty span:empty { display: none; }
.pc2 .pcard-body { padding: 18px 22px 20px !important; }
.pc2 .pcard-body p { font-size: 1.1rem; line-height: 1.5; color: var(--muted); }
.pc2 .pcard-impact { padding: 18px 22px 20px; border-top: 0; }
.pc2 .pcard-impact b { font-size: clamp(2.2rem, 1.7rem + 1.4vw, 3rem); }
.pc2 .pcard-impact span { font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .pc2:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 30px 56px -30px rgba(31, 27, 24, 0.55); }
  .pc2:hover .pc2-media > .ph img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .pc2-media > .ph img { transition: none; } .pc2:hover .pc2-media > .ph img { transform: none; } }
@supports (grid-template-rows: subgrid) {
  .cards:has(> .pc2) { row-gap: 0; }
  .pc2 { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: clamp(16px, 2vw, 24px); }
}

/* E+T+C statement band (cards removed) */
.etc .etc-head { margin-bottom: 0; gap: 16px; }
.etc-label { font: 600 clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem)/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); }

/* Bigger images in text + image layouts: the photo takes the larger share */
.split:not(.split-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.split.rev:not(.split-media) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.split.rev:not(.split-media) > :first-child { order: 0; grid-column: 2; grid-row: 1; }
.split.rev:not(.split-media) > :last-child { grid-column: 1; grid-row: 1; }
.split:not(.split-media) > div > .rot, .split:not(.split-media) > .ph, .split:not(.split-media) > div:not(.mosaic) > .ph { aspect-ratio: 4 / 3; border-radius: 30px; }
.split .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 19vw, 290px); }
.split .mosaic .ph { aspect-ratio: auto; border-radius: 22px; }
.split .mosaic .wide, .split .mosaic .big { grid-column: span 2; grid-row: auto; }
.p-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 900px) {
  .split:not(.split-media), .split.rev:not(.split-media) { grid-template-columns: minmax(0, 1fr); }
  .split.rev:not(.split-media) > :first-child, .split.rev:not(.split-media) > :last-child { grid-column: auto; grid-row: auto; }
  .p-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) { .split .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; } .split .mosaic .wide, .split .mosaic .big { grid-column: auto; } }

/* Home: programmes organised by area */
.pgroup + .pgroup { margin-top: clamp(40px, 5vw, 72px); }
.pgroup-h { font: 700 clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem)/1.15 var(--font-body); letter-spacing: -0.025em; color: var(--ink); margin-bottom: clamp(18px, 2.2vw, 28px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--line); }
.pgroup:first-child .pgroup-h { border-top: 0; padding-top: 0; }
@media (min-width: 1001px) {
  .pgroup .cards.pc2-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pgroup .pc2 { grid-column: span 2; }
  /* a final row of two cards shares the full width */
  .pgroup .pc2:nth-child(3n+1):nth-last-child(2), .pgroup .pc2:nth-child(3n+1):nth-last-child(2) + .pc2 { grid-column: span 3; }
  .pgroup .pc2:nth-child(3n+1):nth-last-child(2) .pc2-media > .ph, .pgroup .pc2:nth-child(3n+1):nth-last-child(2) + .pc2 .pc2-media > .ph { aspect-ratio: 16 / 10; }
}
.sec-head + .pgroup .pgroup-h { border-top: 0; padding-top: 0; }
.etc + section.band-sand { padding-top: 0; }
@media (min-width: 901px) { .partners div:last-child:nth-child(4n+1) { grid-column: 1 / -1; } .partners div:last-child:nth-child(4n+2) { grid-column: span 3; } .partners div:last-child:nth-child(4n+3) { grid-column: span 2; } }
@media (max-width: 900px) { .partners div:last-child:nth-child(2n+1) { grid-column: 1 / -1; } }
.mission .mission-note { display: block; margin-top: 18px; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.5; font-weight: 400; color: #ffe3e0; }
@media (max-width: 760px) { .hx3 .hx2-img[src*="hero-iitb-lecture"] { object-position: 78% 35%; } }
@media (max-width: 760px) { .hx3 .hx2-img[src*="hero-tech"] { object-position: 88% 40%; } }
@media (max-width: 760px) { .hx3 .hx2-img[src*="hero-sports"] { object-position: 72% 40%; } }

/* Hero slide control: quiet progress lines instead of the glass tab bar */
.hx3 .hx2-bar, .hx3 .hx2-bar:hover { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 14px; border-radius: 0; }
.hx3 .hx2-tabs { gap: 8px; }
.hx3 .hx2-ind { display: none; }
.hx3 .hx2-tab, .hx3 .hx2-tab.is-on { width: 34px; height: 24px; padding: 0; margin: 0; background: transparent; color: transparent; }
.hx3 .hx2-tab .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx3 .hx2-tab::before, .hx3 .hx2-tab.is-on::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; width: auto; height: 2px; margin: -1px 0 0; border-radius: 2px; background: rgba(255, 255, 255, 0.32); transition: background-color 200ms ease; }
.hx3 .hx2-tab i { display: block; position: absolute; left: 0; right: 0; top: 50%; bottom: auto; height: 2px; margin-top: -1px; border-radius: 2px; background: transparent; opacity: 0; overflow: hidden; }
.hx3 .hx2-tab.is-on i { opacity: 1; }
.hx3 .hx2-tab.is-on i::after { background: rgba(255, 255, 255, 0.9); }
.hx3.stopped .hx2-tab.is-on::before { background: rgba(255, 255, 255, 0.9); }
.hx3 .hx2-pause { width: 28px; height: 28px; color: rgba(255, 255, 255, 0.6); background: transparent; }
.hx3 .hx2-pause svg { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) { .hx3 .hx2-tab:hover::before { background: rgba(255, 255, 255, 0.6); } .hx3 .hx2-pause:hover { color: #fff; background: transparent; } }
.hx3 .hx2-tab:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 760px) { .hx3 .hx2-tab, .hx3 .hx2-tab.is-on { width: 26px; } }

/* Founder's message */
.founder-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.founder-photo .ph { aspect-ratio: 4 / 5; border-radius: 30px; margin: 0; box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 40px 70px -40px rgba(31, 27, 24, 0.6); }
.founder-photo .ph img { object-position: 50% 30%; }
.founder-copy { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.founder blockquote { margin: 0; display: grid; gap: 18px; }
.founder blockquote p { font-size: clamp(1.25rem, 1.05rem + 0.65vw, 1.6rem); line-height: 1.55; color: var(--ink-2); }
.founder blockquote footer { display: grid; gap: 2px; margin-top: 8px; padding-left: 18px; border-left: 3px solid var(--red); }
.founder blockquote footer b { font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.55rem); color: var(--ink); }
.founder blockquote footer span { font-size: 1.08rem; color: var(--muted); }
@media (max-width: 860px) { .founder-grid { grid-template-columns: minmax(0, 1fr); } .founder-photo .ph { aspect-ratio: 4 / 4.2; } }
p, .founder blockquote p, .lede { text-wrap: wrap; }
h1, h2, h3, .h1, .h2, .display, .hx2-h { text-wrap: wrap; }
.founder blockquote footer { border-left: 0; padding-left: 0; }

/* Impact band (home) */
.impact-band .sec-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.ib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ib { display: grid; align-content: start; gap: 12px; padding: 4px clamp(18px, 2.4vw, 36px) 8px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.ib:first-child { padding-left: 0; border-left: 0; }
.ib b { font: 700 clamp(3rem, 2rem + 3.4vw, 5.4rem)/0.95 var(--font-body); letter-spacing: -0.045em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.ib-what { font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem); line-height: 1.4; color: #fff; font-weight: 500; }
.ib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ib-tags i { font-style: normal; font-size: 0.95rem; font-weight: 500; color: var(--navy-text); padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
@media (max-width: 900px) {
  .ib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .ib:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .ib-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .ib { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .ib:first-child { border-top: 0; padding-top: 0; }
}
.ib b { font-size: clamp(2.8rem, 1.6rem + 2.6vw, 4.1rem); } .ib-grid { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .ib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .ib-grid { grid-template-columns: minmax(0, 1fr); } }
.founder-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
.founder-copy .h2 { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.2rem); }
@media (max-width: 860px) { .founder-grid { grid-template-columns: minmax(0, 1fr); } }

/* Impact band: warm light palette */
.impact-band { background: linear-gradient(180deg, #fbf1e1 0%, #f7e7cf 100%); color: var(--ink); }
.impact-band .h2 { color: var(--ink); }
.impact-band .h2 em { color: var(--red); }
.impact-band .ib { border-left-color: rgba(31, 27, 24, 0.14); }
.impact-band .ib b { color: var(--red); }
.impact-band .ib-what { color: var(--ink-2); }
@media (max-width: 480px) { .impact-band .ib { border-top-color: rgba(31, 27, 24, 0.14); } }
.ib-lead { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem); line-height: 1.4; font-weight: 500; color: var(--ink-2); max-width: none; }
.impact-band .sec-head { gap: 12px; }
.impact-band + section.band-sand { background: var(--bg); }

/* Programme cards: tagline */
.pc2 .pcard-body { gap: 8px; }
.pc2 .pcard-body .pc-tag { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); font-weight: 600; line-height: 1.35; color: var(--red-ink); }
.p-impact { border-radius: 18px; max-width: 520px; }
@media (min-width: 901px) { .models.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nm-sub { display: block; font-size: 0.62em; font-weight: 600; letter-spacing: -0.01em; opacity: 0.9; margin-top: 4px; }
.pc2-media h3 .nm-sub { font-size: 0.7em; font-weight: 500; }
.pc2 .pcard-body .pc-blurb { font-size: clamp(1.06rem, 1rem + 0.2vw, 1.16rem); line-height: 1.5; font-weight: 500; color: var(--red-ink); }
.pc2 .pcard-body .pc-blurb { color: var(--muted); font-weight: 400; }
.pc2 .pcard-body .pc-blurb strong { color: var(--red-ink); font-weight: 600; }
.founder-photo .ph { aspect-ratio: 608 / 630; }
.founder-photo .ph img { object-position: 50% 20%; }
@media (max-width: 860px) { .founder-photo .ph { aspect-ratio: 1 / 1; } }

/* Educational games page */
.game .split-copy { gap: 20px; }
.game .h2 em { display: block; font-size: 0.55em; line-height: 1.2; margin-top: 6px; }
.game-tag { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); font-weight: 600; color: var(--red-ink); }
.game-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.game-facts div { display: grid; gap: 2px; }
.game-facts b { font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.game-facts span { font-size: 1.08rem; color: var(--ink); line-height: 1.4; }
.game-how b, .game-skills b { color: var(--ink); }
.game-how ol { margin: 8px 0 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 1.08rem; color: var(--ink-2); line-height: 1.5; }
.game-skills { font-size: 1.08rem; color: var(--ink-2); }
.game .rot img { object-fit: contain; background: #fff; }
@media (max-width: 520px) { .game-facts { grid-template-columns: minmax(0, 1fr); } }


/* Soft section stops while scrolling down the page (gentle: only when you finish a scroll near a section's start) */
html.soft-snap { scroll-snap-type: y proximity; scroll-padding-top: var(--hdr-h, 72px); }
html.soft-snap main > section:not(.hx3), html.soft-snap .site-footer { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { html.soft-snap { scroll-snap-type: none; } }

/* Phones: every section fills the screen and scrolling locks to each section's top edge */
@media (max-width: 760px) {
  main > section:not(.hx3) { min-height: calc(100svh - var(--hdr-h, 64px)); display: flex; flex-direction: column; justify-content: center; }
  main > section:not(.hx3) > .wrap { width: 100%; }
  .mission .display { font-size: clamp(3rem, 2rem + 6vw, 3.6rem); line-height: 1.05; }
  .mission blockquote { font-size: 1.6rem; line-height: 1.4; }
  .mission .who { font-size: 1.05rem; margin-top: 18px; }
  .impact-band .ib b { font-size: 3.4rem; }
  .impact-band .ib-what { font-size: 1.2rem; }
  .ib-lead { font-size: 1.3rem; }
  .founder blockquote p { font-size: 1.22rem; }
  .jk p { font-size: 2.6rem; }
}

/* Phones: scroll-driven header and section-by-section scrolling */
.hx-snap { display: none; }
@media (max-width: 760px) {
  .hx3.pin { position: relative; height: calc(100svh - var(--hdr, 64px) + (var(--n, 5) - 1) * 75svh); }
  .hx3.pin .hx2-stage { position: sticky; top: var(--hdr, 64px); height: calc(100svh - var(--hdr, 64px)); min-height: 0; overflow: hidden; }
  .hx3.pin .hx2-img { opacity: 1; transition: none; transform: translate3d(0, 100%, 0); will-change: transform; }
  .hx3.pin .hx2-img:first-of-type { transform: none; }
  .hx3.pin .hx2-t { transition: none; filter: none; will-change: transform, opacity; }
  .hx3.pin .hx-snap { display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
  html.m-snap { scroll-snap-type: y proximity; scroll-padding-top: var(--hdr-h, 64px); }
  html.m-snap.m-hero { scroll-snap-type: y mandatory; }
  main > section.hx3 { scroll-snap-align: start; }
  main > section:not(.hx3), .site-footer { scroll-snap-align: start; position: relative; }
  .sec-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: end; }
  .pgroup { scroll-snap-align: start; scroll-margin-top: 16px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { html.m-snap { scroll-snap-type: none; } }
/* Desktop: the slide indicator is a row of small centred dots */
@media (min-width: 761px) {
  .hx3 .hx2-bar { position: absolute; left: 50%; right: auto; bottom: 0; transform: translateX(-50%); gap: 6px; }
  .hx3 .hx2-tab, .hx3 .hx2-tab.is-on { width: 18px; height: 18px; }
  .hx3 .hx2-tab::before, .hx3 .hx2-tab.is-on::before { left: 50%; right: auto; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
  .hx3 .hx2-tab.is-on::before { background: #fff; }
  .hx3 .hx2-tab i { display: none !important; }
  .hx3 .hx2-pause { display: none; }
}
@media (min-width: 761px) {
  .hx3 .hx3-over { padding-bottom: clamp(90px, 15vh, 170px); }
  .hx3 .hx3-grid { position: static; max-width: none; padding-left: clamp(28px, 4.5vw, 72px); padding-right: clamp(28px, 4.5vw, 72px); }
  .hx3 .hx2-bar { bottom: clamp(22px, 3.5vh, 36px); }
}

/* Phones: short card text, bigger section headings, founder message over the photo */
.pc-blurb.sh, .ib-what .sh { display: none; }
@media (max-width: 760px) {
  .pc-blurb.lg, .ib-what .lg { display: none; }
  .pc-blurb.sh, .ib-what .sh { display: inline; }
  .pc2 .pcard-body .pc-blurb.sh { display: block; }
  .impact-band .sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
  .impact-band .ib-lead { order: 2; font-size: 1.2rem; }
  .impact-band .h2, #work.h2 { font-size: clamp(2.6rem, 1.8rem + 5vw, 3.2rem); line-height: 1.05; }
  .impact-band .ib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; column-gap: 0; }
  .impact-band .ib { padding: 0 0 0 16px; border-left: 1px solid rgba(31, 27, 24, 0.14); border-top: 0; }
  .impact-band .ib:nth-child(odd) { padding-left: 0; border-left: 0; }
  .impact-band .ib b { font-size: 2.7rem; }
  .impact-band .ib-what { font-size: 1.1rem; }
}
@media (max-width: 760px) {
}

/* Phones: founder's message as a large, readable letter with a round portrait beside the name */
@media (max-width: 760px) {
  .founder-grid { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px 16px; align-items: center; }
  .founder-photo { grid-column: 1; grid-row: 2; }
  .founder-photo .ph { width: 92px; height: 92px; aspect-ratio: 1 / 1 !important; border-radius: 50%; box-shadow: 0 10px 24px -12px rgba(31, 27, 24, 0.5); }
  .founder-photo .ph img { object-position: 50% 18%; }
  .founder-copy { display: contents; }
  .founder blockquote { display: contents; }
  .founder .fo-text { grid-column: 1 / -1; grid-row: 1; display: grid; gap: 14px; }
  .founder blockquote p { font-size: 1.3rem; line-height: 1.45; color: var(--ink-2); }
  .founder blockquote footer { grid-column: 2; grid-row: 2; margin: 0; }
  .founder blockquote footer b { font-size: 1.3rem; }
}
.founder .fo-text { display: grid; gap: 18px; }
@media (max-width: 760px) {
  .founder blockquote p { font-size: 1.36rem; }
  html.m-snap { scroll-snap-type: y mandatory; }
}

/* ---- Mobile refinements (round 3) ---- */
.group-index { display: none; }
@media (max-width: 760px) {
  /* header: slide dots so visitors know how many are left */
  .hx3.pin .hx3-grid { position: static; }
  .hx3.pin .hx2-bar { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
  .hx3.pin .hx2-bar { display: flex; position: absolute; left: 50%; top: 14px; bottom: auto; right: auto; transform: translateX(-50%); z-index: 3; gap: 4px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hx3.pin .hx2-pause, .hx3.pin .hx2-ind { display: none; }
  .hx3.pin .hx2-tab, .hx3.pin .hx2-tab.is-on { width: 20px; height: 20px; padding: 0; background: none; }
  .hx3.pin .hx2-tab::before { left: 50%; top: 50%; right: auto; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 99px; background: rgba(255, 255, 255, 0.45); transition: width 300ms var(--ease-out), margin 300ms var(--ease-out), background-color 200ms ease; }
  .hx3.pin .hx2-tab.is-on::before { width: 20px; margin-left: -10px; background: #fff; }
  .hx3.pin .hx2-tab i { display: none !important; }
  .hx3.pin { height: calc(100svh - var(--hdr, 64px) + (var(--n, 5) - 1) * 65svh); }
  .hx3.pin .hx2-head { padding-bottom: 34px; }

  /* sections: content starts near the top and uses the screen, rather than floating in the middle */
  main > section.impact-band, main > section[aria-labelledby="work"], main > section.band-sand, main > section[aria-labelledby="art"], main > section.etc, main > section[aria-labelledby="who"] { justify-content: flex-start; padding-top: 36px; padding-bottom: 40px; }
  .impact-band .sec-head { margin-bottom: 36px; }
  .impact-band .ib-grid { row-gap: 40px; }
  .impact-band .ib b { font-size: clamp(2.3rem, 11vw, 2.8rem); letter-spacing: -0.03em; }
  .impact-band .ib-what { font-size: 1.15rem; margin-top: 4px; }
  .impact-band .mt-m { margin-top: 40px; }

  /* programmes: an index screen of the five areas, then one area per stop */
  .pg-intro { min-height: calc(100svh - var(--hdr-h, 64px) - 76px); display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; }
  .group-index { display: grid; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .group-index a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
  .gi-n { font-weight: 700; color: var(--red); font-size: 1rem; }
  .gi-t { font-size: 1.22rem; font-weight: 600; line-height: 1.25; }
  .gi-c { font-size: 0.95rem; color: var(--muted); background: var(--sand); border-radius: 99px; padding: 3px 10px; }
  .pgroup { scroll-snap-align: start; scroll-margin-top: 0; padding-top: 18px; position: relative; }
  .pgroup + .pgroup { margin-top: 0; }
  .pgroup-h { font-size: 1.7rem; border-top: 0; padding-top: 0; }

  /* programme cards: photo, then name and tagline in the white box; no description */
  .pc2 .pcard-body { display: none; }
  .pc2-media::after { display: none; }
  .pc2-media { display: block; }
  .pc2-media > .ph { aspect-ratio: 16 / 10 !important; }
  .pc2-media h3 { color: var(--ink); text-shadow: none; padding: 14px 18px 18px; font-size: 1.4rem; }
  .pc2-media h3 .nm-sub { color: var(--red-ink); font-size: 1.02rem; font-weight: 600; opacity: 1; margin-top: 4px; }
  .cards.pc2-grid { gap: 16px; }
}

/* ---- Programme area headings: big two-tone text, like the other section headings ---- */
.pgroup-h em { font-style: normal; color: inherit; }
.grp-dots { display: none; }
@media (max-width: 760px) {
  .pgroup-h { font: 700 2.1rem/1.08 var(--font-body); letter-spacing: -0.035em; color: var(--ink); padding-top: 0; margin-bottom: 20px; border-top: 0; }
  .pgroup-h em { color: var(--red); }
  .pgroup { padding-top: 22px; }
  /* tidy cards: no empty space below the title */
  .pc2 { display: block; grid-row: auto; margin-bottom: 0; }
  .cards.pc2-grid { row-gap: 16px !important; }
  .pc2-media h3 { padding: 12px 18px 14px; }
  /* area dots, styled like the header's: a small floating capsule, centred */
  .grp-dots { display: block; position: sticky; top: calc(var(--hdr-h, 64px) + 10px); height: 0; z-index: 20; }
  .gd-d { display: flex; width: max-content; margin: 0 auto; gap: 2px; padding: 0 8px; border-radius: 99px; background: rgba(255, 253, 249, 0.72); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 6px 20px -10px rgba(31, 27, 24, 0.35); opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none; transition: opacity 250ms ease, transform 300ms var(--ease-out); }
  .grp-dots.on .gd-d { opacity: 1; transform: none; pointer-events: auto; }
  .gd-d a { display: grid; place-items: center; width: 20px; height: 28px; transition: width 300ms var(--ease-out); }
  .gd-d i { display: block; width: 7px; height: 7px; border-radius: 99px; background: rgba(31, 27, 24, 0.28); transition: width 300ms var(--ease-out), background-color 200ms ease; }
  .gd-d a.is-on { width: 30px; }
  .gd-d a.is-on i { width: 20px; background: var(--red); }
}
@media (prefers-reduced-transparency: reduce) { .gd-d { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- Founder's message on phones: a portrait with a glass name tag, then words that light up as you read ---- */
@media (max-width: 760px) {
  .founder { background: var(--bg); }
  .founder > .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .founder-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 28px; position: relative; }
  .founder-photo { grid-column: 1; grid-row: 1; position: relative; }
  .founder-photo .ph { width: 100%; height: auto; aspect-ratio: 16 / 11 !important; border-radius: 26px; box-shadow: 0 30px 50px -34px rgba(31, 27, 24, 0.6); }
  .founder-photo .ph img { object-position: 50% 22%; }
  .founder-copy { display: contents; }
  .founder blockquote { display: contents; }
  .founder .fo-text { grid-column: 1; grid-row: 2; display: grid; gap: 22px; padding: 0; margin: 0; border: 0; }
  .founder .fo-text::before { content: none; }
  .founder blockquote p, .founder blockquote p:first-child { font-family: var(--font-body); font-style: normal; font-size: 1.5rem; line-height: 1.36; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }
  .founder blockquote p em { font-style: normal; color: var(--red); }
  .founder .fo-text .w { transition: opacity 120ms linear; }
  /* name tag sits on the photo as a translucent material */
  .founder blockquote footer { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; margin: 0 0 14px 14px; z-index: 2; display: grid; gap: 0; padding: 10px 16px 11px; border-radius: 16px; background: rgba(255, 253, 249, 0.74); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.5); }
  .founder blockquote footer b { font-size: 1.12rem; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
  .founder blockquote footer span { font-size: 0.88rem; line-height: 1.3; color: var(--ink-2); }
}
@media (max-width: 760px) and (prefers-reduced-transparency: reduce) { .founder blockquote footer { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- Phones: slide and programme-area dots live in the fixed header bar ---- */
.hdr-dots { display: none; }
@media (max-width: 760px) {
  .site-header { position: sticky; }
  .hdr-dots { display: grid; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
  .hdr-dots > * { grid-area: 1 / 1; justify-self: center; }
  .hdr-dots .hx2-bar { display: flex !important; position: static !important; transform: none !important; filter: none !important; gap: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 0; transition: opacity 250ms ease; }
  .hdr-dots .hx2-bar.on { opacity: 1; pointer-events: auto; }
  .hdr-dots .hx2-pause, .hdr-dots .hx2-ind { display: none !important; }
  .hdr-dots .hx2-tab, .hdr-dots .hx2-tab.is-on { position: relative; width: 18px; height: 36px; padding: 0; background: none; transition: width 300ms var(--ease-out); }
  .hdr-dots .hx2-tab.is-on { width: 30px; }
  .hdr-dots .hx2-tab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 99px; background: rgba(31, 27, 24, 0.25); transition: width 300ms var(--ease-out), margin 300ms var(--ease-out), background-color 200ms ease; }
  .hdr-dots .hx2-tab.is-on::before { width: 20px; margin-left: -10px; background: var(--red); }
  .hdr-dots .hx2-tab i { display: none !important; }
  .hdr-dots .grp-dots { position: static; height: auto; display: block; }
  .hdr-dots .gd-d { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
  .hdr-dots .gd-d a { width: 18px; height: 36px; }
  .hdr-dots .gd-d a.is-on { width: 30px; }
  .hdr-dots .gd-d i { background: rgba(31, 27, 24, 0.25); }
  .hdr-dots .gd-d a.is-on i { background: var(--red); }
}

/* ---- Phones: number the programme cards 1, 2, 3 … through all five areas, before the name ---- */
@media (max-width: 760px) {
  section[aria-labelledby="work"] { counter-reset: pc; }
  .pgroup .pc2 { counter-increment: pc; }
  .pgroup .pc2-media h3 { position: relative; padding-left: 72px; }
  .pgroup .pc2-media h3::before { content: counter(pc); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 44px; text-align: center; font: 700 2.2rem/1 var(--font-body); letter-spacing: -0.04em; color: var(--red); }
}

/* ---- Phones: pause on the last card of each area before moving to the next area ---- */
@media (max-width: 760px) {
  html.m-snap.in-pg { scroll-snap-type: y proximity; }
  .pgroup { scroll-snap-align: start; scroll-snap-stop: always; }
  .pgroup .pc2-grid > .pc2:last-child { scroll-snap-align: start; scroll-margin-top: 16px; scroll-snap-stop: always; }
}

/* ---- Gnaan U Classroom block on the home page ---- */
.gucl-head .h2 { display: grid; gap: 8px; }
.gucl-name { font-size: 1.12em; letter-spacing: -0.04em; color: var(--ink); }
.gucl-head .h2 em { font-size: 0.62em; line-height: 1.15; letter-spacing: -0.025em; }
.gucl-pts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gucl-pts li { font-size: 1rem; font-weight: 600; color: var(--red-ink); background: var(--red-tint); border-radius: 99px; padding: 6px 14px; }

/* ---- E + T + C line inside the About page's approach band ---- */
.etc-inline { justify-items: start; text-align: left; margin: clamp(8px, 1.5vw, 16px) 0 clamp(28px, 3.5vw, 44px); padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.band-navy .etc-inline .etc-title { color: #fff; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.2rem); }
.band-navy .etc-inline .etc-title span { color: var(--yellow); }
.band-navy .etc-inline .lede { color: var(--navy-text); }

/* ---- Partners: name grid on larger screens; all names as tags on phones, visible at a glance ---- */
.pt-tags { display: none; }
@media (max-width: 760px) {
  .partners { display: none; }
  main > section[aria-labelledby="who"] { justify-content: center; }
  .pt-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 4px 0 0; padding: 0; background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(31, 27, 24, 0.05), 0 24px 44px -34px rgba(31, 27, 24, 0.5); }
  .pt-tags li { display: flex; align-items: center; min-height: 56px; padding: 9px 14px; font-size: 0.98rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); border-bottom: 1px solid var(--line); }
  .pt-tags li:nth-child(odd) { border-right: 1px solid var(--line); }
  .pt-tags li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---- Partners grid: five across on desktop (15 names, three rows) ---- */


/* ---- Partners: fuller grid, less empty space ---- */
@media (min-width: 761px) {
  section[aria-labelledby="who"] { padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(56px, 6vw, 80px); }
  section[aria-labelledby="who"] .sec-head { margin-bottom: clamp(20px, 2.4vw, 32px); }
  .partners div { padding: 22px 26px; min-height: 0; align-content: center; }
  .partners b { font-size: clamp(1.15rem, 0.9rem + 0.55vw, 1.42rem); line-height: 1.25; letter-spacing: -0.015em; }
}
@media (max-width: 760px) {
  section[aria-labelledby="who"] .h2 { font-size: 3.45rem; line-height: 1.04; letter-spacing: -0.035em; }
  section[aria-labelledby="who"] .sec-head { margin-bottom: 22px; }
  .pt-tags li { font-size: 1.12rem; min-height: 60px; padding: 10px 14px; line-height: 1.22; }
}
@media (min-width: 761px) { .jk p { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); } }
/* Classroom points: plain text, no capsules */
.gucl-pts { gap: 6px 0; margin-top: 16px; }
.gucl-pts li { background: none; border-radius: 0; padding: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.gucl-pts li + li::before { content: "•"; color: var(--red); padding: 0 12px; }
@media (max-width: 760px) {
  .gucl-pts { display: grid; gap: 6px; }
  .gucl-pts li + li::before { content: none; }
  .gucl-pts li::before { content: "•" !important; color: var(--red); padding: 0 10px 0 0 !important; }
}
@media (max-width: 760px) {
  .gucl-head .h2 { font-size: 3.45rem; line-height: 1.02; gap: 14px; }
  .gucl-name { font-size: 1em; letter-spacing: -0.04em; }
  .gucl-head .h2 em { font-size: 0.5em; line-height: 1.15; letter-spacing: -0.02em; }
  .gucl-head .lede { font-size: 1.28rem; line-height: 1.45; color: var(--ink-2); margin-top: 6px; }
  .gucl-pts li { font-size: 1.12rem; }
}

/* ---- Gnaan U Classroom: Prepare / Teach / Report ---- */
.ptr { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: ptr; }
.ptr li { display: grid; gap: 8px; align-content: start; counter-increment: ptr; }
.ptr .ph { aspect-ratio: 4 / 3; border-radius: 22px; margin: 0 0 10px; box-shadow: 0 24px 44px -32px rgba(31, 27, 24, 0.55); }
.ptr h3 { margin: 0; font: 700 clamp(1.7rem, 1.3rem + 1vw, 2.3rem)/1.05 var(--font-body); letter-spacing: -0.03em; color: var(--ink); }
.ptr h3::before { content: counter(ptr) "."; color: var(--red); margin-right: 8px; }
.ptr p { margin: 0; font-size: 1.1rem; line-height: 1.45; color: var(--ink-2); max-width: 34ch; }
.gucl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: clamp(24px, 3vw, 36px); }
.gucl-foot .gucl-pts { margin: 0; }
.gucl-foot .actions { margin: 0; }
@media (max-width: 760px) {
  .ptr { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
  .ptr li { grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; }
  .ptr .ph { grid-row: 1 / 3; aspect-ratio: 1 / 1; border-radius: 18px; margin: 0; }
  .ptr h3 { font-size: 1.75rem; align-self: end; }
  .ptr p { font-size: 1.02rem; line-height: 1.4; }
  .gucl-foot { display: grid; justify-content: start; }
}

/* ---- Prepare / Teach / Report: heading, then a large image, then the line ---- */
.ptr li { gap: 12px; }
.ptr .ph { margin: 2px 0 6px; }
@media (max-width: 760px) {
  .ptr { gap: 34px; margin-top: 28px; }
  .ptr li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; scroll-snap-align: start; scroll-margin-top: 16px; }
  .ptr .ph { grid-row: auto; aspect-ratio: 4 / 3.4; border-radius: 22px; margin: 0; }
  .ptr h3 { font-size: 2.6rem; align-self: auto; }
  .ptr p { font-size: 1.2rem; line-height: 1.42; max-width: none; }
}

/* ---- Prepare / Teach / Report on desktop: a segmented control over one wide, cross-fading stage ---- */
.ptr-tabs { display: none; }
@media (min-width: 761px) {
  .ptr-tabs { position: relative; display: flex; width: max-content; margin: clamp(30px, 3.5vw, 44px) auto 22px; padding: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 14px 30px -20px rgba(31, 27, 24, 0.45); }
  .ptr-pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 99px; background: var(--red); box-shadow: 0 8px 18px -10px rgba(200, 36, 43, 0.8); transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1), width 480ms cubic-bezier(0.32, 0.72, 0, 1); }
  .ptr-tabs button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 11px 30px; border-radius: 99px; font: 600 1.12rem/1 var(--font-body); color: var(--ink-2); letter-spacing: -0.01em; transition: color 250ms ease; overflow: hidden; }
  .ptr-tabs button:active { transform: scale(0.97); }
  .ptr-tabs button[aria-selected="true"] { color: #fff; }
  .ptr-tabs button i { position: absolute; left: 22%; right: 22%; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); transform: scaleX(0); transform-origin: left; }
  .ptr-tabs button[aria-selected="true"] i { animation: ptr-run var(--ptr-dur, 6s) linear forwards; }
  .ptr-paused .ptr-tabs button i { animation-play-state: paused; }
  .ptr.js { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .ptr.js li { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; column-gap: 40px; row-gap: 22px; opacity: 0; visibility: hidden; transition: opacity 520ms ease, visibility 0s linear 520ms; }
  .ptr.js li.on { opacity: 1; visibility: visible; transition: opacity 520ms ease, visibility 0s; }
  .ptr.js .ph { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 8; border-radius: 30px; margin: 0; box-shadow: 0 40px 70px -46px rgba(31, 27, 24, 0.7); }
  .ptr.js .ph img { transform: scale(1.045); transition: transform 1200ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ptr.js li.on .ph img { transform: none; }
  .ptr.js h3 { grid-row: 2; font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.8rem); }
  .ptr.js p { grid-row: 2; font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); line-height: 1.4; max-width: 40ch; color: var(--ink-2); padding-bottom: 6px; }
}
@keyframes ptr-run { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ptr.js li, .ptr.js .ph img, .ptr-pill { transition: none !important; } .ptr-tabs button i { display: none; } }

/* ---- Desktop steps: big numbered headings above the image act as the tabs ---- */
@media (min-width: 761px) {
  .ptr-tabs { width: auto; margin: clamp(30px, 3.5vw, 44px) 0 clamp(18px, 2vw, 26px); padding: 0; gap: clamp(28px, 4vw, 64px); background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
  .ptr-pill { display: none; }
  .ptr-tabs button { padding: 0 0 12px; border-radius: 0; overflow: visible; font: 700 clamp(2.2rem, 1.4rem + 2vw, 3.4rem)/1.05 var(--font-body); letter-spacing: -0.035em; color: rgba(31, 27, 24, 0.22); transition: color 300ms ease; }
  .ptr-tabs button b { font-weight: 700; color: inherit; transition: color 300ms ease; }
  .ptr-tabs button:hover { color: rgba(31, 27, 24, 0.45); }
  .ptr-tabs button[aria-selected="true"] { color: var(--ink); }
  .ptr-tabs button[aria-selected="true"] b { color: var(--red); }
  .ptr-tabs button:active { transform: none; }
  .ptr-tabs button i { left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); }
  .ptr.js h3 { display: none; }
  .ptr.js li { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ptr.js p { grid-row: 2; grid-column: 1; max-width: 60ch; padding-bottom: 0; }
}

/* ======================================================================
   Desktop: slide-by-slide header, gentle JS stops (no CSS snapping), paired screens
   ====================================================================== */
.ptr-snap { display: none; }
@media (min-width: 761px) {
  html.soft-snap, html.m-snap { scroll-snap-type: none !important; }
  .sec-end { display: none; }
  main > section, .site-footer { transition: opacity 260ms linear; }
  /* header slides: a slow cross-dissolve with a gentle settle, headline rises in */
  .hx3 .hx2-img { transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1), transform 1600ms cubic-bezier(0.23, 1, 0.32, 1); transform: scale(1.06); }
  .hx3 .hx2-img.is-on { transform: scale(1); }
  .hx3 .hx2-t { filter: none !important; }
  /* "Our historic opportunity" + founder's message fill exactly one screen together */
  .founder { min-height: calc(100vh - var(--hdr-h, 71px) - var(--mis-h, 356px)); display: flex; flex-direction: column; justify-content: center; }
  .founder > .wrap { width: 100%; }

  /* Stop: GUC pins; Prepare, Teach and Report play in turn, then the page moves on */
  section.ptr-pin { position: relative; padding: 0; }
  section.ptr-pin > .wrap { position: sticky; top: var(--hdr-h, 70px); height: calc(100vh - var(--hdr-h, 70px)); display: flex; flex-direction: column; padding-top: clamp(18px, 3.5vh, 40px); padding-bottom: clamp(18px, 3.5vh, 36px); }
  section.ptr-pin .gucl-head .h2 { font-size: clamp(2.2rem, 1.2rem + 3vh, 3.4rem); gap: 4px; }
  section.ptr-pin .gucl-head .h2 em { font-size: 0.58em; }
  section.ptr-pin .gucl-head .lede { font-size: clamp(1.05rem, 0.7rem + 0.9vh, 1.3rem); margin-top: 8px; max-width: 72ch; }
  section.ptr-pin .ptr-tabs { margin: clamp(14px, 2.6vh, 28px) 0 clamp(10px, 1.8vh, 18px); }
  section.ptr-pin .ptr-tabs button { font-size: clamp(1.8rem, 0.9rem + 2.6vh, 3rem); padding-bottom: 8px; }
  section.ptr-pin .ptr-tabs button i { animation: none !important; transform: scaleX(0); transition: transform 500ms var(--ease-out); }
  section.ptr-pin .ptr-tabs button[aria-selected="true"] i { transform: scaleX(1); }
  section.ptr-pin .ptr.js { flex: 1 1 auto; min-height: 0; }
  section.ptr-pin .ptr.js li { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; row-gap: clamp(10px, 1.6vh, 16px); }
  section.ptr-pin .ptr.js .ph { aspect-ratio: auto !important; height: 100%; min-height: 0; }
  section.ptr-pin .ptr.js p { font-size: clamp(1.05rem, 0.7rem + 0.9vh, 1.3rem); }
  section.ptr-pin .gucl-foot { margin-top: clamp(12px, 2vh, 22px); }
  section.ptr-pin .ptr-snap { display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }

  /* Partners + quote, and closing banner + footer: each pair fills exactly one screen */
  .jk { min-height: calc(100vh - var(--hdr-h, 71px) - var(--who-h, 600px)); display: flex; flex-direction: column; justify-content: center; }
  .jk > .wrap { width: 100%; }
  .cta { min-height: calc(100vh - var(--hdr-h, 71px) - var(--foot-h, 430px)); display: flex; flex-direction: column; justify-content: center; }
  .cta > .wrap { width: 100%; }
  .foot-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.7fr) minmax(0, 1fr); }
  .site-footer .foot-grid ul[style] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .foot-base { margin-top: clamp(18px, 3vh, 36px); }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { html.m-snap { scroll-snap-type: none; } }

/* ---- Desktop refinements: card numbers, GUC spacing ---- */
section[aria-labelledby="work"] { counter-reset: pc; }
.pgroup .pc2 { counter-increment: pc; }
@media (min-width: 761px) {
  .pgroup .pc2-media h3::before { content: counter(pc); display: inline-block; margin-right: 12px; color: var(--yellow); font-weight: 700; letter-spacing: -0.03em; }
  section.ptr-pin > .wrap { justify-content: flex-start; padding-top: clamp(22px, 4vh, 44px); padding-bottom: clamp(22px, 4vh, 44px); }
  section.ptr-pin .sec-head { margin-bottom: 0; }
  section.ptr-pin .ptr-tabs { margin: clamp(18px, 3vh, 32px) 0 clamp(6px, 1vh, 10px); }
  section.ptr-pin .ptr.js li { grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(12px, 2vh, 20px); }
  section.ptr-pin .ptr.js p { grid-row: 1; max-width: none; }
  section.ptr-pin .ptr.js .ph { grid-row: 2; }
  section.ptr-pin .gucl-foot { margin-top: clamp(16px, 3vh, 30px); }
}
@media (min-width: 761px) {
  /* partners + quote scale with the screen height so the pair fits one screen at common laptop sizes */
  section[aria-labelledby="who"] { padding-top: clamp(32px, 6.5vh, 80px) !important; padding-bottom: clamp(24px, 4.5vh, 64px) !important; }
  section[aria-labelledby="who"] .sec-head { margin-bottom: clamp(16px, 3vh, 34px); }
  .partners div { padding: clamp(12px, 2.3vh, 28px) 24px; min-height: 0; }
  .partners b { font-size: clamp(1.05rem, 0.5rem + 1.15vh, 1.42rem); }
  .jk { padding-block: clamp(28px, 5vh, 64px) !important; }
  .jk p { font-size: clamp(1.9rem, 0.8rem + 2.7vh, 3rem) !important; }
}

/* Desktop: pinned header that cross-dissolves through its slides as you scroll */
.hx-dsnap { display: none; }
@media (min-width: 761px) {
  .hx3.dpin { position: relative; height: calc(100vh - var(--hdr-h, 71px) + (var(--n, 5) - 1) * var(--dstep, 60vh)); }
  .hx3.dpin .hx2-stage { position: sticky; top: var(--hdr-h, 71px); height: calc(100vh - var(--hdr-h, 71px)); min-height: 0; max-height: none; }
  .hx3.dpin .hx-dsnap { display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
}
/* Desktop: each step's line sits on the bottom of its image */
@media (min-width: 761px) {
  .ptr.js li, section.ptr-pin .ptr.js li { grid-template-rows: minmax(0, 1fr) !important; grid-template-columns: minmax(0, 1fr) !important; }
  .ptr.js li .ph, section.ptr-pin .ptr.js .ph { grid-area: 1 / 1 !important; }
  .ptr.js li p, section.ptr-pin .ptr.js p { grid-area: 1 / 1 !important; align-self: end; z-index: 2; margin: 0; max-width: none; padding: clamp(40px, 7vh, 80px) clamp(24px, 3vw, 40px) clamp(18px, 3vh, 30px); border-radius: 0 0 30px 30px; color: #fff; font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); background: linear-gradient(0deg, rgba(14, 11, 9, 0.9) 0%, rgba(14, 11, 9, 0.7) 45%, rgba(14, 11, 9, 0) 100%); font-size: clamp(1.15rem, 0.8rem + 1vh, 1.45rem) !important; }
}
@media (min-width: 761px) {
  .ptr.js li p, section.ptr-pin .ptr.js p { font-size: clamp(1.5rem, 0.9rem + 1.8vh, 2.2rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.025em; max-width: 34ch !important; box-sizing: border-box; }
  .ptr.js li p, section.ptr-pin .ptr.js p { max-width: none !important; padding-right: 30% !important; }
}
/* Desktop: step tabs centred, even space above and below, smaller numbers */
@media (min-width: 761px) {
  .ptr-tabs, section.ptr-pin .ptr-tabs { justify-content: center; width: 100%; margin: clamp(20px, 3.4vh, 36px) auto !important; gap: clamp(56px, 7vw, 112px); }
  .ptr-tabs button b { font-size: 0.5em; vertical-align: 0.42em; margin-right: 4px; }
}
/* Desktop: the selected step sits on a rounded red tile instead of an underline */
@media (min-width: 761px) {
  .ptr-tabs, section.ptr-pin .ptr-tabs { gap: clamp(28px, 4vw, 64px); }
  .ptr-tabs button, section.ptr-pin .ptr-tabs button { padding: 0.18em 0.55em 0.24em !important; border-radius: 18px !important; transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease; }
  .ptr-tabs button i { display: none !important; }
  .ptr-tabs button[aria-selected="true"] { background: var(--red); color: #fff; box-shadow: 0 12px 26px -14px rgba(200, 36, 43, 0.75); }
  .ptr-tabs button[aria-selected="true"] b { color: var(--yellow); }
}

.ptr p em { font-style: normal; color: var(--red); font-weight: 600; }
@media (min-width: 761px) { .ptr.js li p em, section.ptr-pin .ptr.js p em { color: var(--yellow); font-weight: 700; } }
/* Desktop step tabs: words only; the selected one sits on a soft, warm tile */
@media (min-width: 761px) {
  .ptr-tabs button b { display: none; }
  .ptr-tabs button[aria-selected="true"] { background: var(--yellow-tint); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(246, 205, 60, 0.9), 0 10px 24px -16px rgba(158, 120, 10, 0.55); }
}
@media (min-width: 761px) {
  .ptr-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: 0 14px 28px -16px rgba(19, 35, 63, 0.75); }
}
/* Desktop step tabs: one navy tile glides between the words; the text colour cross-fades as it arrives */
@media (min-width: 761px) {
  .ptr-tabs { position: relative; }
  .ptr-tabs .ptr-pill { display: block !important; position: absolute; left: 0; top: 0; bottom: auto; width: 0; height: 0; border-radius: 18px; background: var(--navy); box-shadow: 0 14px 28px -16px rgba(19, 35, 63, 0.75); z-index: 0; transition: transform 620ms cubic-bezier(0.32, 0.72, 0, 1), width 620ms cubic-bezier(0.32, 0.72, 0, 1); }
  .ptr-tabs button { position: relative; z-index: 1; }
  .ptr-tabs button, .ptr-tabs button[aria-selected="true"] { background: transparent !important; box-shadow: none !important; transition: color 520ms ease 80ms; }
  .ptr-tabs button[aria-selected="true"] { color: #fff; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .ptr-tabs .ptr-pill { transition: none; } }
@media (min-width: 761px) {
  .ptr-tabs .ptr-pill { background: linear-gradient(180deg, #f2b81c 0%, #e2a20c 100%); box-shadow: 0 14px 28px -14px rgba(176, 120, 0, 0.75); }
  .ptr-tabs button[aria-selected="true"] { color: #fff; text-shadow: 0 1px 2px rgba(120, 70, 0, 0.45); }
}
/* Desktop step tabs: a yellow highlighter swipe glides under the selected word */
@media (min-width: 761px) {
  .ptr-tabs .ptr-pill { background: none !important; box-shadow: none !important; border-radius: 0; transition: transform 640ms cubic-bezier(0.32, 0.72, 0, 1), width 640ms cubic-bezier(0.32, 0.72, 0, 1), height 640ms cubic-bezier(0.32, 0.72, 0, 1); }
  .ptr-tabs .ptr-pill::before { content: ""; position: absolute; inset: 0 -6px; background: rgba(246, 205, 60, 0.85); border-radius: 10px 4px 12px 5px / 8px 12px 6px 14px; transform: rotate(-1.4deg) skewX(-6deg); }
  .ptr-tabs button[aria-selected="true"] { color: var(--ink) !important; text-shadow: none !important; }
}
/* Desktop step tabs: words rest in faint white; a red marker stroke the height of the word glides in behind the selected one */
@media (min-width: 761px) {
  .ptr-tabs button, .ptr-tabs button:hover { color: #fff !important; text-shadow: 0 0 1px rgba(120, 100, 80, 0.55), 0 1px 3px rgba(120, 100, 80, 0.28) !important; }
  .ptr-tabs button[aria-selected="true"] { color: #fff !important; text-shadow: none !important; }
  .ptr-tabs .ptr-pill::before { background: var(--red); border-radius: 14px 6px 16px 8px / 10px 16px 8px 18px; transform: rotate(-1.2deg) skewX(-5deg); box-shadow: 0 12px 26px -16px rgba(200, 36, 43, 0.8); }
}
/* Desktop: the red stroke looks like a chisel-tip highlighter pen swipe — slanted ends, slightly streaky ink */
@media (min-width: 761px) {
  .ptr-tabs .ptr-pill::before {
    inset: 0 -10px; border-radius: 3px; transform: rotate(-1.6deg); box-shadow: none;
    clip-path: polygon(3% 6%, 99% 0%, 97% 90%, 100% 100%, 1% 96%, 0% 12%);
    background:
      linear-gradient(90deg, rgba(200, 36, 43, 0) 0%, rgba(200, 36, 43, 0.12) 50%, rgba(200, 36, 43, 0) 100%),
      repeating-linear-gradient(0deg, rgba(200, 36, 43, 0.94) 0 4px, rgba(212, 52, 58, 0.86) 4px 6px, rgba(200, 36, 43, 0.92) 6px 11px);
  }
}
@media (min-width: 761px) {
  .ptr-tabs .ptr-pill::before {
    background:
      linear-gradient(90deg, rgba(150, 20, 26, 0.35) 0%, rgba(150, 20, 26, 0) 7%, rgba(150, 20, 26, 0) 93%, rgba(150, 20, 26, 0.3) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 40%, rgba(120, 10, 16, 0.08) 100%),
      rgba(200, 36, 43, 0.92);
  }
}
@media (min-width: 761px) { .ptr-tabs button, .ptr-tabs button:hover, .ptr-tabs button[aria-selected="true"] { text-shadow: none !important; color: #fff !important; } }

/* Desktop step tabs: a natural red highlighter swipe (two overlapping strokes, different for each step)
   is drawn left-to-right behind the selected word */
@media (min-width: 761px) {
  .ptr-tabs .ptr-pill { display: none !important; }
  .ptr-tabs button { position: relative; z-index: 1; isolation: isolate; }
  .ptr-tabs button::before { content: ""; position: absolute; z-index: -1; left: -6%; right: -6%; top: 6%; bottom: 2%; background: var(--hl) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 0 50%; opacity: 0.0; transition: transform 560ms cubic-bezier(0.65, 0, 0.35, 1), opacity 200ms ease; }
  .ptr-tabs button:nth-of-type(1) { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C45 7 120 4 197 8 L195 15 L198 22 L194 47 C140 52 70 54 7 55 L2 47 L5 38 Z' fill='%23c8242b' fill-opacity='0.86'/%3E%3Cpath d='M8 30 C70 25 140 22 193 26 L190 50 C125 53 60 56 10 54 Z' fill='%23c8242b' fill-opacity='0.42'/%3E%3C/svg%3E"); }
  .ptr-tabs button:nth-of-type(2) { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M2 17 C60 12 130 10 198 14 L196 24 L199 33 L195 52 C130 49 60 50 4 53 L6 42 L1 30 Z' fill='%23c8242b' fill-opacity='0.84'/%3E%3Cpath d='M6 6 C70 4 140 3 190 6 L188 26 C120 29 60 31 8 30 Z' fill='%23c8242b' fill-opacity='0.38'/%3E%3C/svg%3E"); }
  .ptr-tabs button:nth-of-type(3) { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M5 9 C60 6 140 8 196 4 L193 13 L197 25 L195 49 C135 54 70 52 3 56 L6 45 L2 33 Z' fill='%23c8242b' fill-opacity='0.85'/%3E%3Cpath d='M12 34 C80 31 150 30 196 31 L192 52 C130 55 70 56 14 55 Z' fill='%23c8242b' fill-opacity='0.45'/%3E%3C/svg%3E"); }
  .ptr-tabs button[aria-selected="true"]::before { transform: scaleX(1); opacity: 1; transition: transform 640ms cubic-bezier(0.65, 0, 0.35, 1) 120ms, opacity 120ms ease 120ms; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .ptr-tabs button::before { transition: none !important; } }

/* Desktop step tabs: one highlighter mark glides left or right between the words (no redraw); its stroke shape eases to each step's own */
@media (min-width: 761px) {
  .ptr-tabs button::before { display: none !important; }
  .ptr-tabs .ptr-pill { display: block !important; }
  .ptr-tabs .ptr-pill::before { clip-path: none !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; inset: 0 -8% !important; background: none !important; }
  .ptr-tabs .ptr-pill::after { content: ""; position: absolute; inset: 0 -8%; background: var(--hl) center / 100% 100% no-repeat; transition: opacity 300ms ease; }
  .ptr-tabs .ptr-pill[data-k="0"] { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C45 7 120 4 197 8 L195 15 L198 22 L194 47 C140 52 70 54 7 55 L2 47 L5 38 Z' fill='%23c8242b' fill-opacity='0.86'/%3E%3Cpath d='M8 30 C70 25 140 22 193 26 L190 50 C125 53 60 56 10 54 Z' fill='%23c8242b' fill-opacity='0.42'/%3E%3C/svg%3E"); }
  .ptr-tabs .ptr-pill[data-k="1"] { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M2 17 C60 12 130 10 198 14 L196 24 L199 33 L195 52 C130 49 60 50 4 53 L6 42 L1 30 Z' fill='%23c8242b' fill-opacity='0.84'/%3E%3Cpath d='M6 6 C70 4 140 3 190 6 L188 26 C120 29 60 31 8 30 Z' fill='%23c8242b' fill-opacity='0.38'/%3E%3C/svg%3E"); }
  .ptr-tabs .ptr-pill[data-k="2"] { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M5 9 C60 6 140 8 196 4 L193 13 L197 25 L195 49 C135 54 70 52 3 56 L6 45 L2 33 Z' fill='%23c8242b' fill-opacity='0.85'/%3E%3Cpath d='M12 34 C80 31 150 30 196 31 L192 52 C130 55 70 56 14 55 Z' fill='%23c8242b' fill-opacity='0.45'/%3E%3C/svg%3E"); }
}
@media (min-width: 761px) {
  .ptr-tabs button, .ptr-tabs button:hover { color: #f3d36a !important; }
  .ptr-tabs button[aria-selected="true"] { color: #ffe9a6 !important; }
}

/* Desktop step tabs: dark words; a light yellow highlighter glides under the selected one */
@media (min-width: 761px) {
  .ptr-tabs button, .ptr-tabs button:hover { color: #a39a90 !important; }
  .ptr-tabs button[aria-selected="true"] { color: var(--ink) !important; }
  .ptr-tabs .ptr-pill[data-k="0"] { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C45 7 120 4 197 8 L195 15 L198 22 L194 47 C140 52 70 54 7 55 L2 47 L5 38 Z' fill='%23f6cd3c' fill-opacity='0.86'/%3E%3Cpath d='M8 30 C70 25 140 22 193 26 L190 50 C125 53 60 56 10 54 Z' fill='%23f6cd3c' fill-opacity='0.42'/%3E%3C/svg%3E"); }
  .ptr-tabs .ptr-pill[data-k="1"] { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M2 17 C60 12 130 10 198 14 L196 24 L199 33 L195 52 C130 49 60 50 4 53 L6 42 L1 30 Z' fill='%23f6cd3c' fill-opacity='0.84'/%3E%3Cpath d='M6 6 C70 4 140 3 190 6 L188 26 C120 29 60 31 8 30 Z' fill='%23f6cd3c' fill-opacity='0.38'/%3E%3C/svg%3E"); }
  .ptr-tabs .ptr-pill[data-k="2"] { --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M5 9 C60 6 140 8 196 4 L193 13 L197 25 L195 49 C135 54 70 52 3 56 L6 45 L2 33 Z' fill='%23f6cd3c' fill-opacity='0.85'/%3E%3Cpath d='M12 34 C80 31 150 30 196 31 L192 52 C130 55 70 56 14 55 Z' fill='%23f6cd3c' fill-opacity='0.45'/%3E%3C/svg%3E"); }
}
/* Phones: header slide headlines as large as "Our historic opportunity." */
@media (max-width: 760px) {
  .hx3 .hx2-h { font-size: clamp(3rem, 2rem + 6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
}
/* Phones: the pinned header photo follows the live screen height (dvh), so no dark strip shows below it
   when the browser's address bar slides away */
@media (max-width: 760px) {
  .hx3.pin .hx2-stage { height: calc(100svh - var(--hdr, 64px)); height: calc(100dvh - var(--hdr, 64px)); }
}
/* Phones: the waiting (next) photo is enlarged from its top edge, so it no longer peeks up as a strip at the bottom */
@media (max-width: 760px) { .hx3.pin .hx2-img { transform-origin: 50% 0; } }

/* ---- Desktop programme cards: photo, then number + name + tagline in the white box;
        hovering reveals the description across the whole card ---- */
@media (min-width: 761px) {
  .cards.pc2-grid { row-gap: clamp(16px, 2vw, 24px) !important; }
  .pc2 { display: block !important; grid-row: auto !important; margin-bottom: 0 !important; position: relative; overflow: hidden; }
  .pc2-media { display: block; }
  .pc2-media::after { display: none; }
  .pc2-media > .ph { aspect-ratio: 4 / 3 !important; }
  .pc2-media h3 { position: relative; color: var(--ink); text-shadow: none; padding: 16px 22px 20px 78px; font-size: clamp(1.3rem, 1rem + 0.6vw, 1.55rem); line-height: 1.2; }
  .pc2-media h3 .nm-sub { color: var(--red-ink); opacity: 1; font-size: 1.02rem; font-weight: 600; margin-top: 4px; }
  .pgroup .pc2-media h3::before { content: counter(pc); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 46px; margin: 0; text-align: center; display: block; font: 700 2.4rem/1 var(--font-body); letter-spacing: -0.04em; color: var(--red); }
  /* description overlay */
  .pc2 .pcard-body { position: absolute; inset: 0; z-index: 3; display: flex !important; align-items: center; padding: clamp(24px, 2.6vw, 38px) !important; background: rgba(19, 35, 63, 0.94); opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 420ms var(--ease-out); pointer-events: none; }
  .pc2 .pcard-body .pc-blurb.lg { display: block; margin: 0; font-size: clamp(1.35rem, 1rem + 0.9vw, 1.75rem); line-height: 1.38; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
  .pc2 .pcard-body .pc-blurb.sh { display: none !important; }
  .pc2 .pcard-body .pc-blurb strong { color: var(--yellow); font-weight: 700; }
  .pc2:hover .pcard-body, .pc2:focus-visible .pcard-body { opacity: 1; transform: none; }
  .pc2:hover { transform: none; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .pc2 .pcard-body { transition: opacity 150ms linear; transform: none; } }

/* ---- Category icons ---- */
.pgroup-h { display: flex; align-items: center; gap: 0.45em; }
.pgroup-h .pg-ic { flex: none; width: 1.05em; height: 1.05em; color: var(--red); }
.gd-ic { display: none; }
@media (max-width: 760px) {
  /* header dots: the current programme area's dot opens into its icon */
  .gd-d a .gd-ic { width: 0; height: 22px; color: var(--red); transition: width 300ms var(--ease-out); }
  .gd-d a.is-on { width: 34px !important; }
  .gd-d a.is-on i { display: none; }
  .gd-d a.is-on .gd-ic { display: block; width: 22px; }
}

/* ---- Programme cards: bigger names and taglines; no empty space (the photo absorbs any extra row height) ---- */
@media (min-width: 761px) {
  .pc2 { display: flex !important; flex-direction: column; }
  .pc2-media { display: flex; flex-direction: column; flex: 1 1 auto; }
  .pc2-media > .ph { flex: 1 1 auto; aspect-ratio: auto !important; min-height: clamp(220px, 18vw, 280px); }
  .pc2-media h3 { flex: none; font-size: clamp(1.5rem, 1.1rem + 0.8vw, 1.85rem); padding-top: 18px; padding-bottom: 20px; }
  .pc2-media h3 .nm-sub { font-size: clamp(1.1rem, 0.95rem + 0.3vw, 1.25rem); margin-top: 6px; }
}
@media (max-width: 760px) {
  .pc2-media h3 { font-size: 1.6rem; }
  .pc2-media h3 .nm-sub { font-size: 1.15rem; }
}
/* Card titles: always full-width and left-aligned under the photo (fixes drifting titles) */
.pc2-media h3 { align-self: stretch !important; justify-self: stretch !important; text-align: left; width: auto; }
/* Gnaan U Classroom: no button; the step photos get the room */
@media (max-width: 760px) { .ptr .ph { aspect-ratio: 1 / 1 !important; } }
@media (min-width: 761px) { section.ptr-pin > .wrap { padding-bottom: clamp(26px, 4.5vh, 48px); } }
/* Hover colours by programme area */
@media (min-width: 761px) {
  #grp-science .pc2 .pcard-body { background: rgba(28, 96, 62, 0.95); }
  #grp-careers .pc2 .pcard-body { background: rgba(19, 35, 63, 0.95); }
  #grp-sports .pc2 .pcard-body { background: rgba(176, 30, 38, 0.95); }
  #grp-teachers .pc2 .pcard-body { background: rgba(24, 92, 156, 0.95); }
}
/* Card taglines stay on one line */
.pc2-media h3 .nm-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 761px) { .pc2-media h3 .nm-sub { font-size: clamp(0.92rem, 0.55rem + 0.48vw, 1.08rem) !important; } }
@media (max-width: 760px) { .pc2-media h3 .nm-sub { font-size: clamp(0.9rem, 0.5rem + 2.1vw, 1.05rem) !important; } }
@media (min-width: 761px) { .pc2-media h3 .nm-sub { font-size: clamp(0.8rem, 0.3rem + 0.72vw, 1.08rem) !important; letter-spacing: -0.005em; } }
@media (min-width: 761px) and (max-width: 1200px) { .pc2-media h3 { padding-left: 66px !important; } .pgroup .pc2-media h3::before { left: 14px !important; width: 40px !important; font-size: 2.1rem !important; } }
@media (max-width: 760px) { .pc2-media h3 .nm-sub { font-size: clamp(0.85rem, 0.42rem + 2.1vw, 1.05rem) !important; } }
@media (min-width: 761px) {
  #grp-careers .pc2 .pcard-body { background: rgba(24, 92, 156, 0.95); }
  #grp-teachers .pc2 .pcard-body { background: rgba(22, 19, 17, 0.94); }
  #grp-growth .pc2 .pcard-body { background: rgba(246, 205, 60, 0.97); }
  #grp-growth .pc2 .pcard-body .pc-blurb.lg { color: var(--ink); }
  #grp-growth .pc2 .pcard-body .pc-blurb strong { color: var(--red-ink); }
  /* taglines: back to a comfortable size; slightly lighter weight and tracking keep them on one line */
  .pc2-media h3 .nm-sub { font-size: clamp(1rem, 0.62rem + 0.5vw, 1.15rem) !important; font-weight: 500 !important; letter-spacing: -0.012em; }
}
@media (max-width: 760px) { .pc2-media h3 .nm-sub { font-size: clamp(1rem, 0.55rem + 2.3vw, 1.12rem) !important; font-weight: 500 !important; letter-spacing: -0.01em; } }
@media (min-width: 761px) and (max-width: 1100px) { .pc2-media h3 .nm-sub { font-size: 0.94rem !important; } }
@media (max-width: 380px) { .pc2-media h3 .nm-sub { font-size: 1rem !important; } }
@media (min-width: 761px) {
  #grp-science .pc2 .pcard-body { background: rgba(0, 150, 70, 0.95); }
  #grp-teachers .pc2 .pcard-body { background: rgba(246, 205, 60, 0.97); }
  #grp-teachers .pc2 .pcard-body .pc-blurb.lg { color: var(--ink); }
  #grp-teachers .pc2 .pcard-body .pc-blurb strong { color: var(--red-ink); }
  #grp-growth .pc2 .pcard-body { background: rgba(22, 19, 17, 0.94); }
  #grp-growth .pc2 .pcard-body .pc-blurb.lg { color: #fff; }
  #grp-growth .pc2 .pcard-body .pc-blurb strong { color: var(--yellow, #f6cd3c); }
  .pc2-media h3 .nm-sub { font-size: clamp(1.1rem, 0.7rem + 0.55vw, 1.28rem) !important; }
}
@media (min-width: 761px) and (max-width: 1100px) { .pc2-media h3 .nm-sub { font-size: 1.04rem !important; } }
@media (max-width: 760px) { .pc2-media h3 .nm-sub { font-size: clamp(1.08rem, 0.6rem + 2.5vw, 1.22rem) !important; } }
@media (max-width: 380px) { .pc2-media h3 .nm-sub { font-size: 1.08rem !important; } }
/* smaller programme numbers -> more room for name + tagline */
@media (min-width: 761px) {
  .pc2-media h3 { padding-left: 54px !important; padding-right: 16px !important; }
  .pgroup .pc2-media h3::before { left: 14px !important; width: 30px !important; font-size: 1.65rem !important; }
}
@media (max-width: 760px) {
  .pgroup .pc2-media h3::before { margin-right: 8px; font-size: 0.85em; }
  .pc2-media h3 .nm-sub { letter-spacing: -0.015em; }
}
/* GUC subtitle: larger, equal space above and below */
.gucl-head .h2 { gap: 16px !important; }
.gucl-head .h2 em { font-size: 0.7em !important; line-height: 1.12; }
.gucl-head .lede { margin-top: 16px !important; }
@media (max-width: 760px) { .gucl-head .h2 { gap: 12px !important; } .gucl-head .h2 em { font-size: 0.6em !important; } .gucl-head .lede { margin-top: 12px !important; } }
.gucl-head .lede { margin-top: 8px !important; }
@media (max-width: 760px) { .gucl-head .h2 em { font-size: 0.56em !important; } .gucl-head .lede { margin-top: 4px !important; } }
/* GUC desktop: equal visual spacing between title, subtitle, lede, tabs, image (offsets compensate for line-height padding) */
@media (min-width: 761px) {
  section.ptr-pin { --gg: clamp(24px, 3.4vh, 38px); }
  section.ptr-pin .gucl-head .h2 { gap: calc(var(--gg) - 11px) !important; }
  section.ptr-pin .gucl-head .lede { margin-top: calc(var(--gg) - 21px) !important; }
  section.ptr-pin .ptr-tabs { margin: calc(var(--gg) - 12px) auto calc(var(--gg) - 7px) !important; }
}
/* programme pages: tighter vertical rhythm */
main:has(> .p-hero) > section:not(.p-hero) { padding-block: clamp(40px, 4.5vw, 64px); }
main:has(> .p-hero) > section:not(.p-hero) .sec-head { margin-bottom: clamp(20px, 2.4vw, 30px); gap: 10px; }
main:has(> .p-hero) > .p-hero { padding-bottom: clamp(24px, 3vw, 40px); }
/* discipline tiles: larger captions */
.tile .cap { padding: 64px 18px 18px; gap: 5px; background: linear-gradient(to top, rgba(12, 12, 14, 0.88) 0%, rgba(12, 12, 14, 0.6) 55%, rgba(12, 12, 14, 0)); }
.tile .cap b { font-size: clamp(1.25rem, 0.9rem + 0.55vw, 1.5rem); line-height: 1.15; letter-spacing: -0.01em; }
.tile .cap span { font-size: clamp(1rem, 0.85rem + 0.25vw, 1.12rem); line-height: 1.38; }
@media (max-width: 700px) { .tile .cap { padding: 48px 12px 12px; } .tile .cap b { font-size: 1.12rem; } .tile .cap span { font-size: 0.95rem; } }
/* programme pages: brochure body text in the header */
.p-hero .lede.lede-br { font-size: clamp(1.05rem, 0.9rem + 0.3vw, 1.2rem); line-height: 1.62; max-width: 62ch; margin-top: 18px; }
.p-hero .lede.lede-br strong { color: var(--ink); font-weight: 600; }
.stem-quote { margin-top: clamp(28px, 3.5vw, 44px); max-width: 920px; }
.quote.q-ph { grid-template-columns: auto 1fr; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.quote.q-ph > .ph { width: clamp(84px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0; box-shadow: 0 0 0 4px #fff; }
.quote.q-ph > .ph img { width: 100%; height: 100%; object-fit: cover; }
.quote.q-ph > div { display: grid; gap: 12px; }
.quote.q-ph cite { display: grid; gap: 2px; color: var(--ink); }
.quote.q-ph cite span { font-weight: 500; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 560px) { .quote.q-ph { grid-template-columns: 1fr; } }
/* testimonials carousel */
.stem-quote { max-width: none !important; }
.tm { display: grid; gap: 18px; }
.tm-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(560px, calc((100% - 20px) / 2.15)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
.tm-track::-webkit-scrollbar { display: none; }
.tm-track:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: var(--radius); }
.tm-card { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius); background: var(--yellow-tint); color: var(--ink); }
.tm-card blockquote { margin: 0; font: 500 clamp(1.12rem, 0.95rem + 0.45vw, 1.32rem)/1.45 var(--font-body); }
.tm-card blockquote::before { content: "\201C"; color: var(--red); margin-right: 2px; }
.tm-card blockquote::after { content: "\201D"; color: var(--red); margin-left: 1px; }
.tm-card figcaption { display: flex; align-items: center; gap: 14px; }
.tm-av { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff; background: var(--red); }
.tm-av .ph { margin: 0; width: 100%; height: 100%; }
.tm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-ini { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.3rem; letter-spacing: .02em; }
.tm-card figcaption b { display: block; font-size: 1.05rem; }
.tm-card figcaption small { display: block; font-size: 0.93rem; color: var(--muted); line-height: 1.35; }
.tm-nav { display: flex; align-items: center; gap: 14px; }
.tm-arr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; transition: background .2s, opacity .2s; }
.tm-arr:hover { background: rgba(255,255,255,.12); }
.tm-arr:disabled { opacity: .3; cursor: default; }
.tm-dots { display: flex; gap: 8px; }
.tm-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s var(--ease-out), background .3s; }
.tm-dots button.is-on { width: 24px; background: var(--yellow); }
.tm.no-overflow .tm-nav { display: none; }
@media (max-width: 760px) {
  .tm-track { grid-auto-columns: 86%; gap: 12px; margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); scroll-padding-inline: var(--gutter, 16px); }
  .tm-nav { justify-content: center; }
  .tm-arr { display: none; }
  .tm-av { width: 52px; height: 52px; }
}
/* testimonials directly on the navy band */
.band-navy .stem-quote { margin-top: 0; }
.band-navy .tm-card { background: transparent; color: #fff; padding: 4px 0 4px clamp(18px, 2vw, 26px); border-radius: 0; border-left: 2px solid rgba(246, 205, 60, 0.55); gap: 20px; }
.band-navy .tm-card blockquote { font-size: clamp(1.2rem, 0.98rem + 0.55vw, 1.45rem); line-height: 1.45; }
.band-navy .tm-card blockquote::before, .band-navy .tm-card blockquote::after { color: var(--yellow); }
.band-navy .tm-card figcaption small { color: rgba(255, 255, 255, 0.7); }
.band-navy .tm-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.band-navy .tm-track { gap: clamp(28px, 4vw, 56px); grid-auto-columns: min(560px, calc((100% - 56px) / 2.1)); }
@media (max-width: 760px) { .band-navy .tm-track { grid-auto-columns: 84%; gap: 24px; } }
/* testimonials on navy: one at a time, editorial typography */
.band-navy .tm-track { grid-auto-columns: 100%; gap: 40px; }
.band-navy .tm-card { position: relative; border-left: 0; padding: clamp(46px, 5vw, 72px) 0 0 0; max-width: 1020px; gap: clamp(22px, 2.6vw, 34px); }
.band-navy .tm-card::before { content: "\201C"; position: absolute; top: 0; left: -0.04em; font: 700 clamp(5rem, 3rem + 5vw, 8.5rem)/0.8 var(--font-body); color: var(--yellow); }
.band-navy .tm-card blockquote { font-weight: 400; font-size: clamp(1.55rem, 0.95rem + 1.75vw, 2.55rem); line-height: 1.28; letter-spacing: -0.018em; text-wrap: pretty; }
.band-navy .tm-card blockquote::before, .band-navy .tm-card blockquote::after { content: none; }
.band-navy .tm-card figcaption { gap: 16px; }
.band-navy .tm-card figcaption b { font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem); font-weight: 600; letter-spacing: 0.01em; }
.band-navy .tm-card figcaption small { font-size: clamp(0.82rem, 0.78rem + 0.15vw, 0.92rem); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin-top: 3px; }
.band-navy .tm-av { width: clamp(56px, 5vw, 72px); height: clamp(56px, 5vw, 72px); }
.band-navy .tm-nav { margin-top: clamp(8px, 1.5vw, 18px); }
@media (max-width: 760px) {
  .band-navy .tm-track { grid-auto-columns: 100%; gap: 24px; margin-inline: 0; padding-inline: 0; }
  .band-navy .tm-card blockquote { font-size: 1.42rem; line-height: 1.32; }
  .band-navy .tm-nav { justify-content: flex-start; }
}
/* testimonials: serif italic quote for contrast with the Jost UI; roomier mobile layout */
.band-navy .tm-card blockquote { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 350; font-variation-settings: "opsz" 72, "SOFT" 50; letter-spacing: -0.01em; line-height: 1.3; }
.band-navy .tm-card::before { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; }
.band-navy .tm-card figcaption b { font-family: var(--font-body); }
@media (max-width: 760px) {
  .band-navy .wrap { padding-inline: 28px; }
  .band-navy .tm-card { padding-top: 64px; gap: 30px; }
  .band-navy .tm-card::before { font-size: 6rem; }
  .band-navy .tm-card blockquote { font-size: 1.5rem; line-height: 1.38; }
  .band-navy .tm-card figcaption { gap: 14px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .band-navy .tm-nav { margin-top: 30px; }
  .band-navy .tm-track { gap: 28px; }
}
/* testimonials: pinned, scroll-driven, centred with generous margins */
section.tm-pinned { position: relative; padding: 0 !important; min-height: 0 !important; display: block !important; }
section.tm-pinned > .wrap { position: sticky; top: var(--hdr-h, 70px); height: calc(100svh - var(--hdr-h, 70px)); display: flex; align-items: center; justify-content: center; }
.tm-snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
section.tm-pinned .stem-quote { width: 100%; max-width: 980px; margin: 0 auto; padding-inline: clamp(0px, 4vw, 48px); }
section.tm-pinned .tm-track { display: grid; grid-auto-flow: row; grid-template-columns: 100%; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
section.tm-pinned .tm-card { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 650ms var(--ease-out); pointer-events: none; max-width: none; text-align: center; align-items: center; }
section.tm-pinned .tm-card.on { opacity: 1; transform: none; pointer-events: auto; }
section.tm-pinned .tm-card::before { position: static; display: block; margin-bottom: -0.15em; }
section.tm-pinned .tm-card { padding-top: 0 !important; }
section.tm-pinned .tm-card figcaption { justify-content: center; text-align: left; }
section.tm-pinned .tm-arr { display: none; }
section.tm-pinned .tm-nav { justify-content: center; margin-top: clamp(28px, 4vh, 48px); }
section.tm-pinned .tm-dots { gap: 10px; }
section.tm-pinned .tm-dots button { width: 10px; height: 10px; }
section.tm-pinned .tm-dots button.is-on { width: 30px; }
@media (max-width: 760px) {
  section.tm-pinned .stem-quote { padding-inline: 0; }
  section.tm-pinned .tm-card { text-align: left; align-items: stretch; }
  section.tm-pinned .tm-card figcaption { justify-content: flex-start; }
  section.tm-pinned .tm-nav { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { section.tm-pinned .tm-card { transition: none; } }
/* Programmes mega-menu (desktop header) */
.nav-dd { display: flex; align-items: center; }
.nav-dd > a { display: inline-flex; align-items: center; gap: 5px; }
.dd-car { width: 11px; height: 11px; opacity: .55; transition: transform 260ms var(--ease-out), opacity 200ms; }
.nav-dd.open > a .dd-car { transform: rotate(180deg); opacity: .9; }
.nav-dd.open > a:not([aria-current]) { background: var(--sand); }
.mega { position: absolute; top: 100%; left: 50%; width: 100vw; transform: translate(-50%, -6px); z-index: 59;
  background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border-top: 1px solid rgba(31, 27, 24, 0.07); border-bottom: 1px solid rgba(31, 27, 24, 0.08);
  box-shadow: 0 30px 60px -28px rgba(20, 24, 40, 0.28);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 320ms var(--ease-out), visibility 0s linear 320ms; }
.nav-dd.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 220ms ease, transform 360ms var(--ease-out), visibility 0s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.mega-in { padding-block: 30px 22px; display: grid; gap: 18px; }
.mm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 24px; }
.mm-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 0 10px 12px; border-bottom: 1px solid rgba(31, 27, 24, 0.08); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); line-height: 1.3; min-height: 2.6em; }
.mm-ic { width: 22px; height: 22px; flex: none; }
.mm-science .mm-ic { color: #00964a; } .mm-careers .mm-ic { color: #185c9c; } .mm-sports .mm-ic { color: var(--red); } .mm-teachers .mm-ic { color: #c99a00; } .mm-growth .mm-ic { color: var(--ink); }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav .mega a { display: block; padding: 9px 10px; border-radius: 10px; font-size: 1rem; background: none; color: var(--ink); transition: background-color 160ms ease, transform 200ms var(--ease-out); }
.nav .mega a b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.nav .mega a small { display: block; margin-top: 2px; font-size: 0.84rem; font-weight: 400; color: var(--muted); line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .nav .mega a:hover { background: var(--sand); } .nav .mega a:hover b { color: var(--red-ink); } }
.nav .mega a:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.nav .mega .mm-all { justify-self: end; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--red-ink); padding: 8px 12px; }
@media (max-width: 1180px) { .mm-grid { gap: 10px 14px; } .nav .mega a small { font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .mega, .nav-dd.open .mega { transition: none; transform: translate(-50%, 0); } }
.mega { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mm-grid { grid-template-rows: auto 1fr; }
.mm-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.mm-h { min-height: 0; align-items: flex-end; }
.mm-h .mm-ic { align-self: center; }
/* testimonials v3: compact navy panel that pins mid-screen; site font, set apart by size and weight */
section.tm-pinned { background: transparent !important; color: var(--ink); padding-block: clamp(28px, 4vw, 56px) !important; }
section.tm-pinned > .wrap { top: var(--tm-top, 90px); height: auto; display: block; }
section.tm-pinned .stem-quote { max-width: 1040px; margin: 0 auto; padding: clamp(30px, 3.6vw, 52px) clamp(24px, 4.5vw, 64px) clamp(24px, 3vw, 36px); background: var(--navy); color: #fff; border-radius: calc(var(--radius) * 1.4); box-shadow: 0 30px 60px -36px rgba(14, 22, 48, 0.55); }
section.tm-pinned .tm-card blockquote { font-family: var(--font-body); font-style: normal; font-weight: 500; font-variation-settings: normal; font-size: clamp(1.25rem, 0.95rem + 0.85vw, 1.75rem); line-height: 1.42; letter-spacing: -0.012em; }
section.tm-pinned .tm-card::before { font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: clamp(3.6rem, 2.6rem + 2.4vw, 5rem); line-height: 0.75; margin-bottom: -0.05em; }
section.tm-pinned .tm-card { gap: clamp(18px, 2vw, 26px); }
section.tm-pinned .tm-av { width: 56px; height: 56px; }
section.tm-pinned .tm-nav { margin-top: clamp(20px, 2.6vw, 30px); }
@media (max-width: 760px) {
  section.tm-pinned > .wrap { padding-inline: 16px; }
  section.tm-pinned .stem-quote { padding: 28px 22px 22px; }
  section.tm-pinned .tm-card { padding-top: 0 !important; gap: 18px; }
  section.tm-pinned .tm-card::before { font-size: 3.6rem; }
  section.tm-pinned .tm-card blockquote { font-size: 1.18rem; line-height: 1.45; }
  section.tm-pinned .tm-card figcaption { padding-top: 16px; }
  section.tm-pinned .tm-nav { margin-top: 20px; }
}
/* testimonials banner: full-width navy band, two quotes side by side, no carousel */
section.tm-band { padding-block: clamp(36px, 4.5vw, 60px) !important; }
@media (max-width: 760px) { main > section.tm-band { min-height: 0 !important; display: block !important; } }
section.tm-band .stem-quote { margin: 0; max-width: none; }
section.tm-band .tm-nav { display: none; }
section.tm-band .tm-track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
section.tm-band .tm-card { position: relative; padding: 0 0 0 clamp(44px, 4vw, 60px) !important; border: 0; max-width: none; gap: 18px; text-align: left; }
section.tm-band .tm-card::before { position: absolute; top: -0.06em; left: 0; font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: clamp(3.2rem, 2.4rem + 1.8vw, 4.4rem); line-height: 0.8; color: var(--yellow); }
section.tm-band .tm-card blockquote { font-family: var(--font-body); font-style: normal; font-weight: 500; font-variation-settings: normal; font-size: clamp(1.1rem, 0.92rem + 0.45vw, 1.35rem); line-height: 1.45; letter-spacing: -0.01em; }
section.tm-band .tm-card figcaption { padding-top: 0; border: 0; gap: 12px; }
section.tm-band .tm-av { width: 48px; height: 48px; }
section.tm-band .tm-card figcaption b { font-size: 1.02rem; }
section.tm-band .tm-card figcaption small { font-size: 0.76rem; }
@media (max-width: 760px) {
  section.tm-band .tm-track { grid-template-columns: 1fr; gap: 30px; }
  section.tm-band .tm-card { padding-left: 40px !important; }
  section.tm-band .tm-card::before { font-size: 3rem; }
  section.tm-band .tm-card blockquote { font-size: 1.08rem; }
}
/* brochure text in programme headers: site lede size, short paragraphs, wider text column */
.p-hero .lede.lede-br { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.55; max-width: 64ch; margin: 0; }
.lede-br-wrap { display: grid; gap: 0.85em; margin-top: 22px; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); }
@media (min-width: 901px) {
  .p-hero-grid:has(.lede-br-wrap) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .p-hero-grid:has(.lede-br-wrap) > :last-child { position: sticky; top: calc(var(--hdr-h, 70px) + 24px); margin-top: 8px; }
}
/* testimonials banner: larger, more comfortable reading */
section.tm-band { padding-block: clamp(48px, 6vw, 88px) !important; }
section.tm-band .tm-track { gap: clamp(32px, 5vw, 80px); }
section.tm-band .tm-card { gap: 24px; padding-left: clamp(52px, 4.6vw, 70px) !important; }
section.tm-band .tm-card::before { font-size: clamp(3.6rem, 2.6rem + 2.2vw, 5.2rem); }
section.tm-band .tm-card blockquote { font-size: clamp(1.3rem, 1.02rem + 0.75vw, 1.7rem); line-height: 1.5; font-weight: 500; }
section.tm-band .tm-av { width: 58px; height: 58px; }
section.tm-band .tm-card figcaption b { font-size: 1.12rem; }
section.tm-band .tm-card figcaption small { font-size: 0.82rem; }
@media (max-width: 760px) {
  section.tm-band .tm-track { gap: 40px; }
  section.tm-band .tm-card { padding-left: 44px !important; gap: 20px; }
  section.tm-band .tm-card::before { font-size: 3.4rem; }
  section.tm-band .tm-card blockquote { font-size: 1.24rem; line-height: 1.5; }
}
/* programme headers with brochure text: stacked photos match the text column; richer typography */
@media (min-width: 901px) {
  .p-hero-grid:has(.lede-br-wrap) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .p-hero-grid:has(.lede-br-wrap) > :last-child { position: static; margin-top: 0; display: flex; }
}
.hero-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.hero-stack > .ph { flex: 1 1 0; min-height: 180px; margin: 0; aspect-ratio: auto !important; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 50px -30px rgba(20, 24, 40, 0.45); }
.hero-stack > .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .hero-stack { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-stack > .ph:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10 !important; }
  .hero-stack > .ph { min-height: 0; aspect-ratio: 4 / 3 !important; }
}
/* typography: an ink-dark lead paragraph with red emphasis; later paragraphs lighter with highlighter emphasis */
.lede-br-wrap { gap: 1em; }
.lede-br-wrap .lede-br:first-child { font-size: clamp(1.4rem, 1.15rem + 0.75vw, 1.8rem); line-height: 1.42; color: var(--ink); font-weight: 400; letter-spacing: -0.01em; }
.lede-br-wrap .lede-br:first-child strong { color: var(--red-ink); font-weight: 600; }
.lede-br-wrap .lede-br + .lede-br { color: var(--ink-2, #4a443e); }
.lede-br-wrap .lede-br + .lede-br strong { color: var(--ink); font-weight: 600; background: linear-gradient(transparent 62%, rgba(246, 205, 60, 0.5) 62%, rgba(246, 205, 60, 0.5) 92%, transparent 92%); padding-inline: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede-br-wrap .lede-br:first-child::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--red); margin-bottom: 18px; }
@media (min-width: 901px) { .p-hero-grid:has(.lede-br-wrap) > :last-child { align-items: stretch; } .hero-stack { align-self: stretch; } }
@media (max-width: 900px) { .hero-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .hero-stack > .ph { min-width: 0; } }
@media (min-width: 901px) { .p-hero-grid:has(.lede-br-wrap) > :last-child { display: grid; grid-template-rows: 1fr; } .hero-stack { height: 100%; min-height: 0; } }
.hero-stack, .hero-stack > .ph { min-width: 0; max-width: 100%; }
.p-hero-grid:has(.hero-stack) > :last-child { min-width: 0; }
/* programme pages: no full-screen section heights, so no empty space between sections */
main:has(> .p-hero) > section { min-height: 0 !important; justify-content: flex-start !important; }
/* STEM disciplines: 3 per row, larger names */
.tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.tiles.tiles-3 .tile .cap { padding: 80px 22px 22px; }
.tiles.tiles-3 .tile .cap b { font-size: clamp(1.5rem, 1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.015em; }
.tiles.tiles-3 .tile .cap span { font-size: clamp(1rem, 0.85rem + 0.3vw, 1.18rem); }
@media (max-width: 700px) {
  .tiles.tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.tiles-3 .tile .cap { padding: 52px 12px 12px; }
  .tiles.tiles-3 .tile .cap b { font-size: 1.2rem; }
  .tiles.tiles-3 .tile .cap span { font-size: 0.92rem; }
  .tiles.tiles-3 .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.tiles.tiles-3 .tile { aspect-ratio: 5 / 4; }
@media (max-width: 700px) { .tiles.tiles-3 .tile { aspect-ratio: 4 / 5; } .tiles.tiles-3 .tile:last-child:nth-child(odd) { aspect-ratio: 16 / 10; } }
/* programme pages without stacked photos (short text): keep the photo panel at its natural shape, centred */
@media (min-width: 901px) {
  .p-hero-grid:has(.lede-br-wrap):not(:has(.hero-stack)) { align-items: center; }
  .p-hero-grid:has(.lede-br-wrap):not(:has(.hero-stack)) > :last-child { display: block; }
}
/* compact mega-menu: names only */
.mega-in { padding-block: 22px 16px; gap: 10px; }
.mm-grid { gap: 4px 20px; }
.mm-h { margin-bottom: 6px; padding-bottom: 10px; }
.nav .mega a { padding: 6px 10px; }
.nav .mega a b { font-weight: 500; font-size: 0.98rem; }
.mega ul { gap: 0; }
.nav .mega .mm-all { padding: 6px 10px; font-size: 0.95rem; }
/* group index: category icons instead of 01–05 */
.gi-n { display: grid; place-items: center; }
.gi-ic { width: 24px; height: 24px; color: var(--red); }
/* programme cards: name and tagline on the left, number on the right (phones and desktop) */
.pgroup .pc2-media h3 { padding-left: 20px !important; padding-right: 70px !important; }
.pgroup .pc2-media h3::before { left: auto !important; right: 16px !important; width: 44px !important; margin: 0 !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; display: block !important; text-align: center; }
@media (min-width: 761px) and (max-width: 1200px) { .pgroup .pc2-media h3 { padding-left: 18px !important; padding-right: 58px !important; } .pgroup .pc2-media h3::before { right: 10px !important; width: 40px !important; } }
/* STEM disciplines: name only on the photo; on hover a coloured panel slides in with the description */
.tiles.tiles-3 .tile:nth-child(1) { --tc: rgba(0, 150, 74, 0.94); }
.tiles.tiles-3 .tile:nth-child(2) { --tc: rgba(24, 92, 156, 0.94); }
.tiles.tiles-3 .tile:nth-child(3) { --tc: rgba(196, 30, 38, 0.94); }
.tiles.tiles-3 .tile:nth-child(4) { --tc: rgba(232, 116, 22, 0.95); }
.tiles.tiles-3 .tile:nth-child(5) { --tc: rgba(22, 32, 72, 0.95); }
.tiles.tiles-3 .tile:nth-child(6) { --tc: rgba(0, 128, 128, 0.94); }
.tiles.tiles-3 .tile:nth-child(7) { --tc: rgba(108, 52, 160, 0.94); }
.tiles.tiles-3 .tile:nth-child(8) { --tc: rgba(176, 30, 98, 0.94); }
.tiles.tiles-3 .tile:nth-child(9) { --tc: rgba(22, 19, 17, 0.94); }
@media (hover: hover) and (pointer: fine) {
  .tiles.tiles-3 .tile .cap { inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 26px; background: linear-gradient(to top, rgba(12, 12, 14, 0.75), rgba(12, 12, 14, 0) 45%); transition: background-color 380ms ease, gap 380ms var(--ease-out); }
  .tiles.tiles-3 .tile .cap span { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px); transition: opacity 320ms ease, transform 420ms var(--ease-out), max-height 420ms var(--ease-out); font-size: clamp(1.15rem, 0.9rem + 0.55vw, 1.45rem); line-height: 1.45; color: #fff; }
  .tiles.tiles-3 .tile:hover .cap, .tiles.tiles-3 .tile:focus-within .cap { background: var(--tc); justify-content: center; gap: 14px; }
  .tiles.tiles-3 .tile:hover .cap span, .tiles.tiles-3 .tile:focus-within .cap span { max-height: 12em; opacity: 1; transform: none; }
  .tiles.tiles-3 .tile .ph img { transition: transform 700ms var(--ease-out); }
  .tiles.tiles-3 .tile:hover .ph img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .tiles.tiles-3 .tile .cap, .tiles.tiles-3 .tile .cap span, .tiles.tiles-3 .tile .ph img { transition: none; } }
/* STEM disciplines: name only on the photo; hover/focus fills the tile with a colour and shows the description */
.tiles.tiles-3 .tile { --tc: rgba(28, 96, 62, 0.95); outline: none; }
.tiles.tiles-3 .tile:nth-child(1) { --tc: rgba(24, 92, 156, 0.95); }
.tiles.tiles-3 .tile:nth-child(2) { --tc: rgba(196, 84, 24, 0.95); }
.tiles.tiles-3 .tile:nth-child(3) { --tc: rgba(0, 140, 70, 0.95); }
.tiles.tiles-3 .tile:nth-child(4) { --tc: rgba(0, 120, 150, 0.95); }
.tiles.tiles-3 .tile:nth-child(5) { --tc: rgba(40, 36, 110, 0.95); }
.tiles.tiles-3 .tile:nth-child(6) { --tc: rgba(176, 30, 38, 0.95); }
.tiles.tiles-3 .tile:nth-child(7) { --tc: rgba(110, 50, 140, 0.95); }
.tiles.tiles-3 .tile:nth-child(8) { --tc: rgba(150, 100, 0, 0.95); }
.tiles.tiles-3 .tile:nth-child(9) { --tc: rgba(22, 19, 17, 0.94); }
@media (hover: hover) and (pointer: fine) {
  .tiles.tiles-3 .tile .cap { inset: auto 0 0 0; padding: 70px 24px 22px; background: linear-gradient(to top, rgba(12, 12, 14, 0.75), rgba(12, 12, 14, 0)); transition: background-color 300ms ease; }
  .tiles.tiles-3 .tile .cap span { display: none; }
  .tiles.tiles-3 .tile::after { content: ""; position: absolute; inset: 0; background: var(--tc); opacity: 0; transition: opacity 320ms ease; z-index: 1; pointer-events: none; }
  .tiles.tiles-3 .tile .cap { z-index: 2; }
  .tiles.tiles-3 .tile:hover::after, .tiles.tiles-3 .tile:focus-visible::after { opacity: 1; }
  .tiles.tiles-3 .tile:hover .cap, .tiles.tiles-3 .tile:focus-visible .cap { inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 2.6vw, 38px); background: none; }
  .tiles.tiles-3 .tile:hover .cap span, .tiles.tiles-3 .tile:focus-visible .cap span { display: block; font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.5rem); line-height: 1.4; font-weight: 500; color: #fff; animation: tileIn 360ms var(--ease-out) both; }
  .tiles.tiles-3 .tile:hover .cap b, .tiles.tiles-3 .tile:focus-visible .cap b { color: var(--yellow); }
  .tiles.tiles-3 .tile:nth-child(8):hover .cap b { color: #fff; }
}
@keyframes tileIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tiles.tiles-3 .tile:hover .cap span { animation: none; } }
/* Annual Innovation Challenge timeline: 4 phases, 11 stages */
.aic-tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); counter-reset: none; }
.at-col { position: relative; padding: clamp(18px, 2vw, 26px); border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.at-ph { margin: 0 0 16px; display: grid; gap: 2px; font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.at-ph span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); }
.at-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; }
.at-col ol::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: rgba(246, 205, 60, 0.28); }
.at-col li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.at-n { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--navy); font-weight: 700; font-size: 0.95rem; }
.at-col li b { display: block; color: #fff; font-size: 1.08rem; line-height: 1.25; margin-top: 4px; }
.at-col li p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 1100px) { .aic-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .aic-tl { grid-template-columns: 1fr; } }
/* large statement quote */
.big-quote { margin: 0; font-size: clamp(1.4rem, 1.05rem + 0.95vw, 2rem); line-height: 1.38; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.big-quote::first-letter { color: var(--red); }
.big-quote::first-letter { color: inherit; }
.big-quote .qm { color: var(--red); font-weight: 700; }
@media (min-width: 901px) {
  .grid-2:has(.big-quote) { align-items: stretch; }
  .grid-2:has(.big-quote) > div:last-child { display: flex; }
  .grid-2:has(.big-quote) > div:last-child > .ph { flex: 1; aspect-ratio: auto !important; margin: 0; }
  .grid-2:has(.big-quote) > div:last-child > .ph img { width: 100%; height: 100%; object-fit: cover; }
}
.at-ph { font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--yellow) !important; margin-bottom: 14px !important; }
.at-col li p { font-size: 0.98rem; }
/* S.O.L.V.E.R. on a light band */
.band-sand .solver div { background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -24px rgba(20, 24, 40, 0.35); }
.band-sand .solver .L { color: var(--red); }
.band-sand .solver b { color: var(--ink); }
/* Ask Seniors: career-area tiles (4 per row), hover shows the Senior who presented it */
.tiles.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.tiles-4 .tile { aspect-ratio: 1 / 1; }
.tiles.tiles-4 .tile .cap b { font-size: clamp(1.25rem, 0.95rem + 0.6vw, 1.6rem); }
.tiles.tiles-4 .tile:nth-child(5n+1) { --tc: rgba(24, 92, 156, 0.95); }
.tiles.tiles-4 .tile:nth-child(5n+2) { --tc: rgba(196, 84, 24, 0.95); }
.tiles.tiles-4 .tile:nth-child(5n+3) { --tc: rgba(0, 140, 70, 0.95); }
.tiles.tiles-4 .tile:nth-child(5n+4) { --tc: rgba(110, 50, 140, 0.95); }
.tiles.tiles-4 .tile:nth-child(5n) { --tc: rgba(176, 30, 38, 0.95); }
@media (hover: hover) and (pointer: fine) { .tiles.tiles-4 .tile:nth-child(n) .cap b { color: #fff; } .tiles.tiles-4 .tile:hover .cap b, .tiles.tiles-4 .tile:focus-visible .cap b { color: var(--yellow); } }
@media (max-width: 1000px) { .tiles.tiles-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tiles.tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles.tiles-4 .tile, .tiles.tiles-4 .tile:last-child:nth-child(odd) { aspect-ratio: 1 / 1; grid-column: auto; } }
.ca-all { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 12px; }
.ca-all-h { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* belief banner */
.belief-band { background: var(--red); color: #fff; padding-block: clamp(48px, 6vw, 88px) !important; }
.belief { margin: 0 auto; max-width: 1040px; font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.5rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.belief mark { background: none; color: var(--yellow); font-weight: 700; }
/* L–E–G questions in big type */
.leg.leg-q > div { display: grid; gap: 14px; align-content: start; }
.leg.leg-q b { font-size: clamp(1.45rem, 1.05rem + 1.1vw, 2.15rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.leg.leg-q b em { font-style: normal; color: var(--red); }
/* videos */
.vids { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.vid { margin: 0; display: grid; gap: 10px; }
.vid video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #222; display: block; box-shadow: 0 24px 50px -32px rgba(20, 24, 40, 0.5); }
.vid figcaption { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
@media (max-width: 760px) { .vids { grid-template-columns: 1fr; } }
.big-quote em { font-style: normal; color: var(--red); font-weight: 600; }
section:has(.big-quote) { padding-block: clamp(56px, 7vw, 104px) !important; }
.grid-2:has(.big-quote) { gap: clamp(32px, 5vw, 72px); }
.grid-2:has(.big-quote) > .stack { padding: clamp(8px, 2vw, 28px) clamp(0px, 2vw, 28px); align-content: center; }
.lede strong.hl { color: var(--red); font-weight: 700; }
/* S.O.L.V.E.R.: larger type */
.solver { gap: 14px; }
.solver div { padding: 22px 20px 24px; gap: 12px; }
.solver .L { font-size: clamp(3.2rem, 2.4rem + 2vw, 4.6rem); }
.solver b { font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.25; }
@media (max-width: 1100px) and (min-width: 901px) { .solver { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Arts & Media: five discipline tiles in one row */
.tiles.tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles.tiles-5 .tile { aspect-ratio: 3 / 4; }
.tiles.tiles-5 .tile .cap b { font-size: clamp(1.2rem, 0.9rem + 0.6vw, 1.55rem); }
@media (hover: hover) and (pointer: fine) { .tiles.tiles-5 .tile:hover .cap span, .tiles.tiles-5 .tile:focus-visible .cap span { font-size: clamp(1.02rem, 0.85rem + 0.4vw, 1.25rem); } .tiles.tiles-5 .tile:hover .cap, .tiles.tiles-5 .tile:focus-visible .cap { padding: 20px; } }
@media (max-width: 1000px) { .tiles.tiles-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tiles.tiles-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles.tiles-5 .tile { aspect-ratio: 4 / 5; } }
/* L–E–G: no boxes, centred letter over its question */
.leg.leg-q { gap: clamp(20px, 3vw, 48px); }
.leg.leg-q > div { background: none; border: 0; border-radius: 0; padding: 8px 0; justify-items: center; text-align: center; gap: 10px; }
.leg.leg-q .L { font-size: clamp(4rem, 3rem + 3vw, 6.5rem); line-height: 0.9; }
.leg.leg-q b { max-width: 16ch; text-wrap: balance; }
@media (max-width: 760px) { .leg.leg-q { gap: 28px; } }
/* Gnaan U Classroom offer (after Prepare / Teach / Report) */
section.gucl-offer { background: var(--sand); padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 96px) !important; min-height: 0 !important; display: block !important; }
.go-big { margin: 0 auto; max-width: 1080px; text-align: center; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.18; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.go-big em { font-style: normal; color: var(--red); }
.go-big strong { display: block; margin-top: 0.3em; font-weight: 700; color: var(--navy); }
.go-cta { margin-top: clamp(28px, 3.5vw, 44px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.go-line { margin: 0; font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem); font-weight: 500; color: #a8590a; }
.go-line b { color: var(--red); }
.rv-up { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 800ms var(--ease-out); }
.rv-up.in { opacity: 1; transform: none; }
/* enquiry form: multi-select programme areas as checkbox chips */
.chk-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.chk-field legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.chk-field legend small { font-weight: 400; color: var(--muted); }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.chk { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 0.95rem; line-height: 1.3; transition: border-color 160ms, background-color 160ms; }
.chk input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--red); }
.chk:has(input:checked) { border-color: var(--red); background: var(--red-tint); }
.chk:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 560px) { .chk-grid { grid-template-columns: 1fr; } }
.go-big strong { color: #00864a; }
/* offer: its own screen on desktop (a scroll stop), line fades in 1s after arriving */
@media (min-width: 761px) {
  section.gucl-offer { min-height: calc(100svh - var(--hdr-h, 70px)) !important; display: flex !important; flex-direction: column; justify-content: center; padding-block: clamp(40px, 6vh, 80px) !important; }
}
.go-line { font-size: clamp(1.35rem, 1rem + 1.2vw, 2.1rem); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.go-cta.rv-up { transition: opacity 900ms ease 1s, transform 1000ms var(--ease-out) 1s; }
.go-cta .btn { padding: 12px 22px; font-size: 1.02rem; }
/* Book a meeting (gnaanu.com/getintouch) */
section.book { padding-block: clamp(28px, 4vw, 64px) clamp(40px, 5vw, 80px) !important; min-height: 0 !important; display: block !important; }
.book-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.book-copy { display: grid; gap: 18px; position: sticky; top: calc(var(--hdr-h, 70px) + 24px); }
.book-kicker { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.book-copy .h1 { margin: 0; }
.book-copy .h1 em { font-style: normal; color: var(--red); }
.book-copy .lede strong { color: var(--ink); font-weight: 600; }
.book-topics { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.book-topics li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.bk-ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--red-tint); color: var(--red); }
.book-topics b { display: block; font-size: 1.1rem; color: var(--ink); }
.book-topics span { display: block; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.book-alt { margin: 4px 0 0; color: var(--muted); font-size: 0.98rem; }
.book-alt a { color: var(--red-ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.book-cal { background: #fffdfa; border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.2); box-shadow: 0 30px 60px -36px rgba(20, 24, 40, 0.35); overflow: hidden; min-height: 700px; }
.book-cal .calendly-inline-widget { height: 760px !important; }
@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; gap: 22px; }
  .book-copy { position: static; gap: 12px; }
  .book-topics, .book-alt { display: none; }
  .book-cal { margin-inline: calc(-1 * var(--gutter, 16px)); border-radius: 0; border-inline: 0; box-shadow: none; }
  .book-cal .calendly-inline-widget { height: 1060px !important; }
  .book-copy + .book-cal + .book-more { display: grid; }
}
/* offer: compact banner on desktop (not a full screen) */
@media (min-width: 761px) { section.gucl-offer { min-height: 0 !important; padding-block: clamp(48px, 6vw, 88px) !important; } }
/* About: seven pillars in large type */
.pillars-sec { padding-block: clamp(40px, 5vw, 80px) !important; }
.pillars-big { list-style: none; margin: clamp(8px, 1.5vw, 20px) 0 0; padding: 0; display: grid; }
.pillars-big li { display: grid; grid-template-columns: clamp(64px, 7vw, 110px) 1fr; gap: clamp(16px, 2.5vw, 40px); align-items: start; padding-block: clamp(26px, 3.2vw, 44px); border-top: 1px solid var(--line); }
.pillars-big li:last-child { border-bottom: 1px solid var(--line); }
.pb-n { font: 700 clamp(3.4rem, 2.4rem + 3vw, 5.6rem)/0.85 var(--font-body); color: var(--red); letter-spacing: -0.04em; }
.pillars-big h3 { margin: 0; font-size: clamp(1.8rem, 1.2rem + 1.9vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: var(--ink); }
.pillars-big p { margin: 0.45em 0 0; max-width: 46ch; font-size: clamp(1.25rem, 1rem + 0.75vw, 1.7rem); line-height: 1.45; color: var(--ink-2, #4a443e); }
@media (max-width: 760px) {
  html:has(.pillars-big) { scroll-snap-type: y mandatory; }
  html:has(.pillars-big) main > section.p-hero { scroll-snap-align: start; }
  html:has(.pillars-big) .site-footer { scroll-snap-align: end; }
  .pillars-sec { padding-block: 0 !important; min-height: 0 !important; display: block !important; }
  .pillars-sec .sec-head { padding-top: 32px; margin-bottom: 0; }
  .pillars-big li { grid-template-columns: 1fr; gap: 14px; min-height: calc(100svh - var(--hdr-h, 64px)); align-content: center; scroll-snap-align: start; scroll-margin-top: var(--hdr-h, 64px); border-top: 0; padding-block: 24px; }
  .pillars-big li:last-child { border-bottom: 0; }
  .pb-n { font-size: 5rem; }
  .pillars-big h3 { font-size: 2.2rem; }
  .pillars-big p { font-size: 1.35rem; line-height: 1.5; }
}
/* Vision: brochure yellow, navy type, Krishnamurti and Tagore illustrations */
.vision-y { --vy: #fbe37a; --vcream: #fffbe3; background: var(--vy); position: relative; overflow: hidden; padding-block: clamp(48px, 6vw, 96px) 0 !important; }
.vis-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 0.45fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.vis-side { position: sticky; top: calc(var(--hdr-h, 70px) + 24px); display: grid; gap: 18px; align-content: start; }
.vis-tag { justify-self: start; margin: 0; display: grid; gap: 2px; padding: 10px 18px 11px; border-radius: 14px; background: #111; color: var(--vy); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; font-style: italic; text-transform: uppercase; line-height: 1.1; }
.vis-tag span { color: #fff; font-size: 0.66rem; letter-spacing: 0.08em; font-weight: 700; }
.vis-h { margin: 0; color: var(--navy); font-size: clamp(2.2rem, 1.3rem + 2.2vw, 3.6rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
.vis-jk { width: 100%; max-width: 360px; height: auto; margin: 8px 0 0 calc(-1 * clamp(0px, 2vw, 24px)); }
.vision-y .pillars-big { margin: 0; padding-bottom: clamp(48px, 6vw, 96px); }
.vision-y .pillars-big li { border: 0 !important; padding-block: 0 clamp(26px, 3vw, 40px); grid-template-columns: 1fr; gap: 0; }
.vision-y .pillars-big li > div { display: contents; }
.vision-y .pb-n { display: none; }
.vision-y .pillars-big h3 { display: flex; align-items: baseline; gap: 0.7em; background: var(--vcream); color: var(--navy); border-radius: 14px; padding: 14px 22px; font-size: clamp(1.35rem, 0.95rem + 1.1vw, 2rem); line-height: 1.2; counter-increment: vp; }
.vision-y .pillars-big { counter-reset: vp; }
.vision-y .pillars-big h3::before { content: counter(vp); font-weight: 800; color: var(--red); min-width: 1ch; }
.vision-y .pillars-big p { color: var(--navy); max-width: none; margin: 14px 22px 0 calc(22px + 1.4em); font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.5rem); line-height: 1.5; }
.vis-tg { align-self: end; justify-self: end; width: 100%; max-width: 260px; height: auto; display: block; margin-right: calc(-1 * clamp(16px, 4vw, 64px)); }
@media (max-width: 1100px) and (min-width: 761px) {
  .vis-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
  .vis-tg { grid-column: 2; max-width: 200px; margin-top: -60px; }
}
@media (max-width: 760px) {
  .vision-y { padding-block: 0 !important; }
  .vis-grid { grid-template-columns: 1fr; gap: 0; }
  .vis-side { position: relative; top: auto; min-height: calc(100svh - var(--hdr-h, 64px)); align-content: start; padding-top: 32px; scroll-snap-align: start; scroll-margin-top: var(--hdr-h, 64px); overflow: hidden; }
  .vis-h { font-size: 2.6rem; }
  .vis-jk { position: absolute; left: -16px; bottom: 0; width: 78%; max-width: 330px; margin: 0; }
  .vision-y .pillars-big { padding-bottom: 0; }
  .vision-y .pillars-big li { min-height: calc(100svh - var(--hdr-h, 64px)); align-content: center; padding-block: 24px; }
  .vision-y .pillars-big h3 { font-size: 1.85rem; padding: 16px 18px; }
  .vision-y .pillars-big p { margin: 16px 6px 0; font-size: 1.32rem; }
  .vision-y .pillars-big li:last-child { padding-bottom: 300px; align-content: start; padding-top: 60px; }
  .vis-tg { position: absolute; right: -16px; bottom: 0; width: 52%; max-width: 220px; margin: 0; }
}
.vis-jk { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
@media (min-width: 761px) {
  .vision-y .pillars-big h3 { font-size: clamp(1.5rem, 0.9rem + 1.4vw, 2.3rem); padding: 16px 24px; }
  .vision-y .pillars-big p { font-size: clamp(1.25rem, 0.9rem + 0.85vw, 1.75rem); line-height: 1.45; }
  .vis-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.65fr) minmax(0, 0.42fr); }
  .vis-tg { max-width: 300px; }
}
.vision-y { overflow: clip; }
@media (min-width: 761px) { .vis-tg { position: absolute; right: 0; bottom: 0; width: clamp(190px, 17vw, 300px); max-width: none; margin: 0; } }
/* Large-type lists (no cards), coloured bands */
.band-red { background: var(--red); color: #fff; }
.band-red .h2, .band-red .h2 em { color: #fff; } .band-red .h2 em { color: var(--yellow); }
.band-green { background: #0b6b3a; color: #fff; }
.band-green .h2 { color: #fff; } .band-green .h2 em { color: var(--yellow); }
.band-sun { background: #fbe37a; }
.band-sun .h2 em { color: var(--red); }
.biglist { list-style: none; margin: clamp(8px, 1.4vw, 18px) 0 0; padding: 0; display: grid; gap: 0; }
.biglist.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.biglist li { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 1.8vw, 26px); align-items: start; padding-block: clamp(20px, 2.4vw, 32px); border-top: 1px solid rgba(127, 127, 127, 0.28); }
.biglist:not(.numbered) li { grid-template-columns: 1fr; }
.bl-n { font: 700 clamp(2.6rem, 1.8rem + 2.2vw, 4rem)/0.9 var(--font-body); color: var(--red); letter-spacing: -0.04em; min-width: 1.1ch; }
.band-navy .bl-n, .band-green .bl-n, .band-red .bl-n { color: var(--yellow); }
.biglist h3 { margin: 0; font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: inherit; }
.biglist p { margin: 0.4em 0 0; font-size: clamp(1.12rem, 0.95rem + 0.5vw, 1.45rem); line-height: 1.45; opacity: 0.88; }
.band-navy .biglist li, .band-green .biglist li, .band-red .biglist li { border-color: rgba(255, 255, 255, 0.2); }
.band-navy .biglist h3, .band-green .biglist h3 { color: #fff; }
.wordwall { list-style: none; margin: clamp(10px, 1.6vw, 20px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25em 0.6em; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.wordwall li:nth-child(odd) { color: #fff; } .wordwall li:nth-child(even) { color: var(--yellow); }
.wordwall li:not(:last-child)::after { content: "·"; margin-left: 0.6em; color: rgba(255, 255, 255, 0.45); }
.ww-note { margin: clamp(20px, 2.4vw, 32px) 0 0; max-width: 70ch; font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.35rem); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.qt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.qt-grid .muted { font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem); line-height: 1.5; color: var(--ink-2, #4a443e); }
.qtypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.qtypes h3 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); color: var(--red); letter-spacing: -0.02em; }
.qtypes ul { list-style: none; margin: 0; padding: 0; display: grid; }
.qtypes li { padding-block: 12px; border-top: 1px solid rgba(20, 24, 40, 0.18); font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.5rem); font-weight: 600; line-height: 1.3; color: var(--navy); }
@media (max-width: 760px) {
  .biglist.cols-2, .qt-grid, .qtypes { grid-template-columns: 1fr; }
  .qtypes { gap: 20px; }
}
/* Vision v3: heading across the top on desktop; mobile slides in the "historic opportunity" type style */
@media (min-width: 761px) {
  .vis-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.7fr) minmax(0, 0.4fr); row-gap: clamp(28px, 3.5vw, 52px); }
  .vis-side { display: contents; }
  .vis-h { grid-column: 1 / -1; grid-row: 1; font-size: clamp(2.6rem, 1.4rem + 3.2vw, 4.8rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; }
  .vis-jk { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--hdr-h, 70px) + 24px); margin-top: 0; }
  .vision-y .pillars-big { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1200px) { .vis-h { max-width: none; } }
@media (max-width: 760px) {
  .vis-h { font-size: 2.9rem; line-height: 1.04; letter-spacing: -0.035em; }
  .vision-y .pillars-big li { gap: 0; }
  .vision-y .pillars-big h3 { display: block; background: none; padding: 0; border-radius: 0; font-size: clamp(2.3rem, 1.4rem + 4.4vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
  .vision-y .pillars-big h3::before { display: block; font-size: 1.15em; line-height: 1; margin-bottom: 0.2em; color: var(--red); }
  .vision-y .pillars-big p { margin: 22px 0 0; padding-left: 18px; border-left: 3px solid rgba(23, 34, 64, 0.3); font-size: 1.6rem; font-weight: 500; line-height: 1.4; }
}
/* offer: full screen again on phones; one colour for the pricing line */
@media (max-width: 760px) { section.gucl-offer { min-height: calc(100svh - var(--hdr-h, 64px)) !important; display: flex !important; flex-direction: column; justify-content: center; } }
.go-line { color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.go-line b { color: var(--ink); font-weight: 700; }
/* enquiry form: multi-select dropdown */
.lbl-like { font-weight: 600; font-size: 1rem; color: var(--ink); }
.msel { position: relative; }
.msel summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 1rem; color: var(--muted); }
.msel summary::-webkit-details-marker { display: none; }
.msel summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 200ms; }
.msel[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.msel.has summary { color: var(--ink); }
.msel-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel[open] summary { border-color: var(--red); }
.msel-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 48px -24px rgba(20, 24, 40, 0.35); display: grid; gap: 2px; }
.msel-list .chk { border: 0; border-radius: 8px; padding: 9px 10px; background: none; }
.msel-list .chk:hover { background: var(--sand); }
.msel-list .chk:has(input:checked) { background: var(--red-tint); }
.form-out { display: grid; gap: 4px; }
.form-out.ok { background: #e6f4ec; color: #0b5a31; }
.form-out.err { background: var(--red-tint); color: var(--red-ink); }
.form-out a { color: inherit; font-weight: 700; }
/* programmes menu: coloured category headings, no icons */
.mm-h { font-size: 0.86rem; letter-spacing: 0.08em; }
.mm-science .mm-h { color: #00864a; } .mm-careers .mm-h { color: #185c9c; } .mm-sports .mm-h { color: var(--red); }
.mm-teachers .mm-h { color: #a16f00; } .mm-growth .mm-h { color: var(--ink); }
.mega-in { padding-bottom: 26px; }
.form-out[hidden] { display: none !important; }
/* "Interested in" dropdown matches the other fields */
#f-interest .lbl-like { font-size: 0.98rem; font-weight: 600; color: var(--ink-2); line-height: inherit; }
.msel summary { font-size: 1.1rem; color: var(--ink); background: var(--bg); border-color: #d9cfc0; padding: 12px 14px; min-height: 0; line-height: normal; }
.msel:not(.has) .msel-v { color: var(--ink); }
.msel summary::after { width: 7px; height: 7px; border-width: 1.5px; color: var(--ink); }
.msel summary:focus-visible, .msel[open] summary { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 36, 43, 0.15); }
#f-interest .lbl-like { line-height: 1.62; font-size: 0.98rem; display: block; }
#f-interest { align-content: start; }
.msel summary { min-height: 49px; }
/* Vision on phones: content sits near the top of each slide, larger type, more breathing room */
@media (max-width: 760px) {
  .vision-y .pillars-big li { align-content: start; padding-top: clamp(36px, 7svh, 64px); padding-bottom: 32px; }
  .vision-y .pillars-big h3 { font-size: clamp(2.6rem, 1.6rem + 5vw, 3.4rem); line-height: 1.04; }
  .vision-y .pillars-big h3::before { font-size: 1.25em; margin-bottom: 0.3em; }
  .vision-y .pillars-big p { margin-top: 30px; padding-left: 20px; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 1.95rem); line-height: 1.42; }
  .vision-y .pillars-big li:last-child { padding-top: clamp(36px, 7svh, 64px); padding-bottom: 300px; }
  .vis-side { padding-top: clamp(36px, 7svh, 64px); }
  .vis-h { font-size: clamp(2.9rem, 1.9rem + 5vw, 3.6rem); }
}
/* phones: footer shows only the logo and contact details */
@media (max-width: 760px) { .site-footer .foot-grid > div:nth-child(2), .site-footer .foot-grid > div:nth-child(3) { display: none; } }
/* Vision slides on phones: wider side margins, heavier type (as in "Our historic opportunity") */
@media (max-width: 760px) {
  .vision-y > .wrap { padding-inline: 26px; }
  .vision-y .pillars-big h3 { font-weight: 700; letter-spacing: -0.03em; }
  .vision-y .pillars-big p { font-weight: 500; color: #16213f; font-size: clamp(1.6rem, 1.15rem + 2.2vw, 1.85rem); line-height: 1.4; padding-left: 18px; border-left-width: 3px; }
  .vis-h { font-weight: 700; }
}
/* Vision now opens the page: room under the header */
main > .vision-y:first-child { padding-top: clamp(40px, 5vw, 80px) !important; }
/* phones: footer keeps the site links (Home, Vision, Programmes, Partner) and contact; email on one line */
@media (max-width: 760px) { .site-footer .foot-grid > div:nth-child(2) { display: block; } }
.ft-mail { white-space: nowrap; }
@media (max-width: 760px) {
  .site-footer .foot-grid > div:nth-child(2), .site-footer .foot-grid > div:nth-child(4) { grid-column: 1 / -1; }
  .site-footer .foot-grid > div:nth-child(2) ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
}
@media (max-width: 760px) {
  .site-footer .foot-grid > div:nth-child(2) ul { flex-wrap: nowrap; gap: 8px clamp(14px, 5vw, 22px); }
  .site-footer .foot-grid > div:nth-child(2) li { white-space: nowrap; }
  .ft-long { display: none; }
}
@media (max-width: 340px) { .site-footer .foot-grid > div:nth-child(2) ul { font-size: 0.92em; gap: 8px 12px; } }
@media (max-width: 760px) {
  .vision-y .vis-side { margin-left: -26px; padding-left: 26px; }
  .vision-y .vis-jk { left: 0; }
}
/* enquiry form: "You are" dropdown drawn like the other fields (Safari ignores padding on native selects) */
.field select { -webkit-appearance: none; appearance: none; line-height: 1.5; padding-right: 42px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2316213f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px; }
.field input, .field select, .msel summary { min-height: 55px; }
/* GU Classroom offer: teacher line in red; offer line at the same size as the line above */
.go-big strong { color: var(--red); }
.go-line { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.18; letter-spacing: -0.025em; }
/* Discipline tiles on touch screens: name only on the photo; a tap fills the tile with its colour and shows the description (tap again to close) */
@media not ((hover: hover) and (pointer: fine)) {
  .tiles.tiles-3 .tile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tiles.tiles-3 .tile .cap { z-index: 2; inset: auto 0 0 0; padding: 56px 12px 14px; background: linear-gradient(to top, rgba(12, 12, 14, 0.78), rgba(12, 12, 14, 0)); }
  .tiles.tiles-3 .tile .cap b { font-size: clamp(1.1rem, 5.4vw, 1.75rem); line-height: 1.12; letter-spacing: -0.015em; }
  .tiles.tiles-3 .tile .cap span { display: none; }
  .tiles.tiles-3 .tile::after { content: ""; position: absolute; inset: 0; background: var(--tc); opacity: 0; transition: opacity 300ms ease; z-index: 1; pointer-events: none; }
  .tiles.tiles-3 .tile.on::after { opacity: 1; }
  .tiles.tiles-3 .tile.on .cap { inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; background: none; }
  .tiles.tiles-3 .tile.on .cap b { color: var(--yellow); font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .tiles.tiles-3 .tile:nth-child(8).on .cap b { color: #fff; }
  .tiles.tiles-3 .tile.on .cap span { display: block; font-size: clamp(0.98rem, 0.85rem + 0.6vw, 1.15rem); line-height: 1.4; font-weight: 500; color: #fff; animation: tileIn 320ms var(--ease-out) both; }
}
@media not ((hover: hover) and (pointer: fine)) { .tiles.tiles-3 .tile .cap { grid-template-columns: minmax(0, 1fr); } .tiles.tiles-3 .tile .cap b { display: block; min-width: 0; } }
/* STEM "Learning by doing": discipline buttons over the photographs of one discipline at a time (newest year first).
   Desktop: three rows that scroll sideways when the pointer is over them; edges fade while photos pass. */
.sg { padding-bottom: 0; }
.sg .sec-head { margin-bottom: clamp(12px, 1.6vw, 18px); }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(14px, 1.6vw, 20px); }
.sg-chip { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 0.98rem/1 var(--font-body); cursor: pointer; transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; -webkit-tap-highlight-color: transparent; }
.sg-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (hover: hover) and (pointer: fine) { .sg-chip:hover { border-color: var(--navy); } }
.sg-track > [hidden] { display: none !important; }
.sg-track > figure { margin: 0; border-radius: 12px; }
.sg-track > figure img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sg-track > figure.sg-in { animation: sgIn 420ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
.sg-track figcaption { opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 260ms var(--ease-out); font-size: 0.84rem; }
@media (hover: hover) and (pointer: fine) { .sg-track > figure:hover figcaption { opacity: 1; transform: none; } }
@keyframes sgIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sg-track > figure.sg-in { animation: none; } }
.sg-more-wrap { display: flex; justify-content: center; margin-top: 18px; }
.sg-more { border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.sg-more[hidden] { display: none; }
.sg-stick > .cta { margin-top: clamp(40px, 6vw, 72px); }
@media (max-width: 760px) {
  .sg-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .sg-chips::-webkit-scrollbar { display: none; }
  .sg-chip { flex: none; padding: 8px 13px; font-size: 0.94rem; }
  .sg-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sg-track > figure { border-radius: 10px; }
}
@media (min-width: 761px) {
  .sg-chips { flex-wrap: nowrap; justify-content: space-between; }
  .sg-vp { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .sg-vp::-webkit-scrollbar { display: none; }
  /* filled row by row: the first row runs left to right, then the next; at least six columns */
  .sg-track { display: grid; grid-template-columns: repeat(var(--cols, 6), var(--cw, 186px)); grid-auto-rows: var(--rh, 150px); gap: 10px; width: max-content; }
  .sg-track > figure img { aspect-ratio: auto; }
  .sg-more-wrap { display: none; }
  .sg-stick > .cta { margin-top: clamp(18px, 3vh, 32px); min-height: 0; padding-block: clamp(26px, 5vh, 48px); }
}
section.sg { padding-top: clamp(22px, 3.2vh, 40px) !important; padding-bottom: 0 !important; }
.sg .sec-head .h2 em + span { color: var(--ink); }
@media (min-width: 761px) { .sg .sec-head { max-width: none; } }
/* Phones: the discipline buttons stay under the header while scrolling through the photographs */
@media (max-width: 760px) {
  /* heading and discipline buttons stay under the header while scrolling through the photographs */
  .sg-top { position: sticky; top: var(--hdr-h, 64px); z-index: 5; background: var(--bg); padding-block: 10px 12px; margin-top: -10px; margin-bottom: 4px; }
  .sg-top .sec-head { margin-bottom: 10px !important; }
  .sg-top .sg-chips { margin-bottom: 0; }
}
@media (min-width: 761px) {
  .sg .sg-chips { gap: 8px; justify-content: stretch; }
  .sg .sg-chip { flex: 1 1 auto; justify-content: center; padding: 12px 10px; font-size: clamp(1rem, 0.6rem + 0.55vw, 1.2rem); }
}
@media (min-width: 761px) {
  /* a slim closing banner under the gallery */
  .sg-stick > .cta { padding-block: clamp(16px, 2.4vh, 26px); margin-top: clamp(16px, 2.4vh, 26px); }
  .sg-stick > .cta .h2 { font-size: clamp(1.7rem, 1rem + 1.6vw, 2.5rem); }
}
@media (min-width: 761px) {
  /* equal space above and below the discipline buttons; a fuller closing banner */
  .sg .sec-head { margin-bottom: 14px !important; }
  .sg .sg-chips { margin-bottom: 24px; }
  .sg-stick > .cta { padding-block: clamp(30px, 4.6vh, 44px); margin-top: clamp(22px, 3vh, 34px); }
}
/* discipline change: the grid dissolves out and the new photographs materialise in one soft, unified motion */
.sg-track { will-change: opacity, transform, filter; }
/* phones: a floating bar over the photographs - previous, pulsing scroll-down, next */
.sg-bar, .sg-more { display: none; }
@media (max-width: 760px) {
  .sg-more { display: block; height: 1px; }
  .sg-more[hidden] { display: none; }
  .sg-stick > .cta { margin-top: 24px; }
  .sg-top { box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }   /* covers the side gutters too */
  .sg-bar { display: flex; position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    justify-content: space-between; align-items: center; padding-inline: 16px; pointer-events: none;
    opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1); }
  .sg-bar.on { opacity: 1; transform: none; }
  .sg-bar.on .sg-nav { pointer-events: auto; }
  .sg-nav { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); cursor: pointer; box-shadow: 0 8px 22px -10px rgba(20, 24, 40, 0.45); -webkit-tap-highlight-color: transparent; transition: opacity 200ms ease, transform 120ms ease; }
  .sg-nav svg { width: 20px; height: 20px; }
  .sg-nav:active { transform: scale(0.94); }
  .sg-nav[disabled] { opacity: 0; pointer-events: none !important; }
  .sg-down { width: 38px; height: 38px; border-width: 1.5px; opacity: 0; pointer-events: none !important; }
  .sg-down svg { width: 16px; height: 16px; }
  .sg-down.on { opacity: 1; pointer-events: auto !important; animation: sgPulse 1.6s ease-in-out infinite; }
}
@keyframes sgPulse { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.45; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .sg-down.on { animation: none; } }
@media (max-width: 760px) {
  .sg-bar .sg-prev, .sg-bar .sg-next { background: var(--red); color: #fff; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 24px -10px rgba(200, 36, 43, 0.6); }
  .sg-bar .sg-down { background: var(--yellow); color: var(--navy); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 8px 20px -10px rgba(158, 120, 10, 0.6); }
}
/* Phones: "Real classrooms. Real impact." uses the screen - larger lead line and labels */
@media (max-width: 760px) {
  .impact-band .ib-lead { font-size: clamp(1.3rem, 5.6vw, 1.5rem); line-height: 1.34; }
  .impact-band .ib-what { font-size: clamp(1.2rem, 5.2vw, 1.35rem); line-height: 1.28; margin-top: 6px; }
  .impact-band .ib-grid { row-gap: 34px; }
  .impact-band .sec-head { margin-bottom: 34px; }
}
/* Phones: founder's message on one screen - name top left, small portrait top right, message below */
@media (max-width: 760px) {
  .founder-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 16px; align-items: center; }
  .founder-photo { grid-column: 2; grid-row: 1; }
  .founder-photo .ph { width: 112px; height: 112px; aspect-ratio: 1 / 1 !important; border-radius: 50%; box-shadow: 0 14px 28px -16px rgba(31, 27, 24, 0.6); }
  .founder-photo .ph img { object-position: 50% 16%; }
  .founder blockquote footer { grid-column: 1; grid-row: 1; align-self: center; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 4px; }
  .founder blockquote footer b { font-size: 1.45rem; }
  .founder blockquote footer span { font-size: 1rem; }
  .founder .fo-text { grid-column: 1 / -1; grid-row: 2; gap: 16px; }
  .founder blockquote p, .founder blockquote p:first-child { font-size: clamp(1.15rem, 5.1vw, 1.32rem); line-height: 1.38; }
}
/* Phones: no counts beside the programme areas and no numbers on the programme cards */
@media (max-width: 760px) {
  .group-index .gi-c { display: none; }
  .pgroup .pc2 h3::before, .pgroup .pc2-media h3::before, .pgroup .pc2 *::before { content: none !important; }
  .pgroup .pc2-media h3 { padding-left: 0; }
}
/* Phones: founder's message as large as the screen height allows (fills the space above and below) */
@media (max-width: 760px) {
  .founder blockquote footer b { font-size: clamp(1.45rem, min(7vw, 3.7vh), 1.8rem); }
  .founder blockquote footer span { font-size: clamp(1rem, min(4.6vw, 2.4vh), 1.2rem); }
  .founder-photo .ph { width: clamp(104px, 16vh, 128px); height: clamp(104px, 16vh, 128px); }
  .founder .fo-text { gap: clamp(12px, 2.2vh, 20px); }
  .founder blockquote p, .founder blockquote p:first-child { font-size: clamp(1.12rem, min(6vw, 2.95vh), 1.5rem); line-height: 1.36; }
}
/* Phones: the cream "Real classrooms" band reaches the bottom of the screen (no white strip under it) */
@media (max-width: 760px) {
  main > section.impact-band { min-height: calc(100svh - var(--hdr-h, 64px)); box-sizing: border-box; }
}
/* Phones: the message first, then the name, role and portrait row beneath it */
@media (max-width: 760px) {
  .founder .fo-text { grid-row: 1; }
  .founder-photo { grid-row: 2; }
  .founder blockquote footer { grid-row: 2; }
  .founder blockquote footer span { font-size: clamp(1.15rem, min(5.4vw, 2.8vh), 1.4rem); line-height: 1.25; max-width: 9.5em; }
}
.fo-br { display: none; }
@media (max-width: 760px) { .fo-br { display: inline; } .founder blockquote footer span { max-width: none; } }
/* a gallery with a single album: no button row and no previous / next arrows */
.sg-chips[hidden] { display: none !important; }
.sg-one .sg-prev, .sg-one .sg-next { visibility: hidden; }
/* only two or three buttons: natural width, not stretched across the row */
@media (min-width: 761px) {
  .sg .sg-chips:not(:has(.sg-chip:nth-child(4))) { justify-content: flex-start; gap: 10px; }
  .sg .sg-chips:not(:has(.sg-chip:nth-child(4))) .sg-chip { flex: 0 0 auto; padding-inline: 26px; }
}
/* No numbers on the programme cards anywhere; the title gets the full width of the card */
.pgroup .pc2-media h3::before { content: none !important; display: none !important; }
@media (min-width: 761px) { .pgroup .pc2-media h3 { padding-left: 22px !important; padding-right: 22px !important; } }
/* Desktop vision: Krishnamurti fixed at the bottom-left corner and Tagore at the bottom-right corner of the window
   while the vision text scrolls between them; both stop at the end of the yellow section */
.vis-pin { display: none; }
@media (min-width: 761px) {
  .vision-y { --jkw: clamp(230px, 22vw, 380px); --tgw: clamp(190px, 17vw, 300px); --gut: max(16px, (100vw - var(--wrap, 1200px)) / 2); }
  .vis-pin { display: flex; position: absolute; inset: 0; z-index: 0; pointer-events: none; justify-content: space-between; align-items: flex-end; }
  .vis-pin img { position: sticky; bottom: 0; height: auto; display: block; }
  .vp-jk { width: var(--jkw); -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
  .vp-tg { width: var(--tgw); }
  .vision-y .vis-jk, .vision-y .vis-tg { display: none !important; }
  .vision-y > .wrap { position: relative; z-index: 1; }
  .vision-y .vis-grid { display: block; }
  .vision-y .vis-side { display: block; position: static; }
  .vision-y .vis-h { max-width: none; margin-bottom: clamp(28px, 3.5vw, 52px); }
  /* the text runs between the two portraits, wider than before */
  .vision-y .pillars-big { margin-left: max(0px, var(--jkw) - var(--gut) + 20px); margin-right: max(0px, var(--tgw) - var(--gut) + 20px); }
}
/* many buttons (Ask Seniors' career fields): one scrolling row, buttons at their natural width, edges fade */
@media (min-width: 761px) {
  .sg-many .sg-chips { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: -4px; padding: 2px 4px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .sg-many .sg-chips::-webkit-scrollbar { display: none; }
  .sg-many .sg-chip { flex: none !important; padding-inline: 18px !important; }
}
/* Programme pages: "See our other programmes" - every other programme in one sideways-scrolling row, just above the footer */
.others { padding-block: clamp(36px, 5vw, 64px); background: var(--bg); }
.ot-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2vw, 24px); }
.ot-head .h2 { margin: 0; }
.ot-nav { display: flex; gap: 10px; flex: none; }
.ot-arr { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--red); color: #fff; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(200, 36, 43, 0.6); transition: opacity 200ms ease, transform 120ms ease; -webkit-tap-highlight-color: transparent; }
.ot-arr svg { width: 20px; height: 20px; }
.ot-arr:active { transform: scale(0.94); }
.ot-arr[disabled] { opacity: 0.3; cursor: default; }
.others .ot-group { margin: 0 !important; padding: 0 !important; scroll-snap-align: none !important; }
.others .ot-track { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px !important;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 6px 2px 26px; margin: -6px -2px 0; }
.others .ot-track::-webkit-scrollbar { display: none; }
.others .ot-track > .pc2 { scroll-snap-align: start; min-width: 0; grid-column: auto !important; grid-row: auto !important; }
.others .ot-track > .pc2 .pc2-media > .ph { aspect-ratio: 4 / 3 !important; }
@media (max-width: 1000px) { .others .ot-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 760px) {
  .others .ot-track { grid-auto-columns: 82%; gap: 14px !important; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .ot-arr { width: 42px; height: 42px; }
}
/* Photos are shown as they are: no enlarging on click, and no saving, dragging or long-press menu */
.ph.zoom { cursor: default; }
.ph.zoom img { transition: none; }
@media (hover: hover) and (pointer: fine) { .ph.zoom:hover img { transform: none; } }
main img, .tm-av img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }
/* Testimonial bands with more than two quotes: two at a time (one on phones), arrows slide to the next pair */
section.tm-band .tm.tm-pairs .tm-track { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - clamp(32px, 5vw, 80px)) / 2);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
section.tm-band .tm.tm-pairs .tm-track::-webkit-scrollbar { display: none; }
section.tm-band .tm.tm-pairs .tm-card { scroll-snap-align: start; }
section.tm-band .tm.tm-pairs .tm-nav { display: flex; margin-top: clamp(22px, 2.6vw, 34px); }
section.tm-band .tm.tm-pairs .tm-dots { display: none; }
section.tm-band .tm.tm-pairs .tm-arr { display: grid; place-items: center; }
@media (max-width: 760px) {
  section.tm-band .tm.tm-pairs .tm-track { grid-auto-columns: 100%; gap: 24px; }
  section.tm-band .tm.tm-pairs .tm-dots { display: flex; }
}
/* Gnaan U Classroom page: principles and facts in large type, and "How it works" with screen recordings */
.gc-principles .biglist h3, .gc-facts .biglist h3 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; }
.gc-principles .biglist p, .gc-facts .biglist p { font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.35rem); line-height: 1.5; }
.gc-facts .biglist h3 { color: var(--red); }
.gc-how .gc-step { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(24px, 3.5vw, 48px); }
.gc-how .gc-step + .gc-step, .gc-how .gc-pair + .gc-step { border-top: 1px solid var(--line); }
.gc-copy h3 { margin: 6px 0 12px; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.gc-copy p { margin: 0; font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }
.gc-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: 1.2rem; }
.gc-demo { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -36px rgba(20, 24, 40, 0.45), 0 0 0 1px rgba(20, 24, 40, 0.06); }
.gc-demo video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 912; object-fit: cover; background: #fff; }
.gc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); padding-bottom: clamp(24px, 3.5vw, 48px); }
.gc-pair .ph { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .gc-how .gc-step { grid-template-columns: 1fr; gap: 18px; }
  .gc-demo { border-radius: 12px; }
  .gc-pair { grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* "How it works": each step's words centred above a large recording that spans the page (Apple product-page style) */
.gc-how .gc-step { grid-template-columns: 1fr !important; justify-items: center; gap: clamp(22px, 3vw, 40px) !important; padding-block: clamp(40px, 6vw, 88px) !important; }
.gc-how .gc-copy { max-width: 760px; text-align: center; display: grid; justify-items: center; }
.gc-how .gc-copy h3 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); }
.gc-how .gc-copy p { font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem); }
.gc-demo { --w: min(100vw - 48px, 1400px, (100vh - 96px) * 1.754); width: var(--w); max-width: none; justify-self: start; margin-inline: calc((100% - var(--w)) / 2) !important; transform-origin: 50% 0; will-change: transform, opacity; border-radius: clamp(12px, 1.6vw, 22px); }
.gc-how { overflow-x: clip; }
.gc-how .gc-pair { max-width: 1100px; margin-inline: auto; }
@media (max-width: 760px) { .gc-demo { --w: calc(100vw - 20px); } }
@media (prefers-reduced-motion: reduce) { .gc-demo { transform: none !important; opacity: 1 !important; } }

/* Other programmes row: free (unsnapped) scrolling with a trackpad or mouse, so it glides smoothly both ways */
@media (hover: hover) and (pointer: fine) { .others .ot-track { scroll-snap-type: none; scroll-behavior: auto; } }
/* Women of Substance: the opening statement under the hero, in large type */
.p-hero-stmt { margin-top: clamp(36px, 5vw, 72px); padding-top: clamp(28px, 4vw, 52px); border-top: 1px solid var(--line); max-width: 1100px; }
.p-hero-stmt .ph-big { margin: 0; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.p-hero-stmt .ph-big em { font-style: normal; color: var(--red); }
.p-hero-stmt .ph-sub { margin: 0.6em 0 0; font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; max-width: 40ch; }
/* FAST: the 360-degree programme, abilities and games inside the curriculum point */
.fast-how .biglist h3 { color: #fff; }
.fast-how .biglist .wordwall { font-size: clamp(1.35rem, 0.95rem + 1.6vw, 2.4rem); margin-top: 0.7em; }
.fast-how .biglist .ww-note { margin-top: 1em; }
.biglist .wordwall li { display: block; padding: 0; border: 0; }

/* ======================================================================
   Gnaan U Classroom page
   ====================================================================== */
/* Newton: heading beside the text, no pictures */
@media (min-width: 900px) { .gc-nw { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; } .gc-nw .sec-head { margin-bottom: 0; } .gc-nw-copy .lede:first-child { margin-top: 0; } }
.gc-nw-copy .muted { font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem); line-height: 1.6; }
/* How it works: the homepage's Prepare / Teach / Report stage. "How it works" with the step names on the left
   underneath it; on desktop the slides move right to left as you scroll (and back again scrolling up). */
.gc-ptr .sec-head { margin-bottom: 0; }
@media (min-width: 761px) {
  .gc-ptr .ptr-tabs, section.gc-ptr.ptr-pin .ptr-tabs { justify-content: flex-start !important; width: max-content !important; margin: clamp(12px, 2.2vh, 24px) 0 clamp(14px, 2.4vh, 26px) -0.55em !important; }
  .gc-ptr .ptr.js { overflow: hidden; border-radius: 30px; }
  .ptr.ptr-slide.js li { transform: translateX(12%); transition: opacity 560ms ease, transform 760ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 760ms; }
  .ptr.ptr-slide.js li.past { transform: translateX(-12%); }
  .ptr.ptr-slide.js li.on { transform: none; transition: opacity 560ms ease 80ms, transform 760ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; }
  .ptr.ptr-slide.js li .ph img { transform: none !important; }
  .gc-ptr .ptr.js li > .ph { background: #fff; box-shadow: 0 0 0 1px rgba(31, 27, 24, 0.08), 0 40px 70px -46px rgba(31, 27, 24, 0.6); }
  .gc-ptr .ptr.js li > .ph img { object-fit: cover; object-position: 50% 0 !important; }
  .gc-ptr .ptr.js li p small { display: block; margin-top: 0.45em; font-size: 0.62em; font-weight: 500; letter-spacing: 0; line-height: 1.4; opacity: 0.92; }
  /* Teach: two pictures side by side, each with its own line */
  .gc-ptr .ptr.js li.ptr-duo { display: block !important; }
  .gc-ptr .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); height: 100%; }
  .gc-ptr .duo-i { position: relative; display: grid; min-height: 0; }
  .gc-ptr .duo-i .ph { grid-area: 1 / 1; height: 100%; min-height: 0; aspect-ratio: auto !important; margin: 0; border-radius: 30px; }
  .gc-ptr .ptr.js li .duo-i p { grid-area: 1 / 1 !important; padding-right: clamp(24px, 3vw, 40px) !important; font-size: clamp(1.25rem, 0.8rem + 1.4vh, 1.8rem) !important; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .ptr.ptr-slide.js li, .ptr.ptr-slide.js li.past { transform: none; } }
/* phones: stacked steps; screenshots keep their shape and show the top of the screen */
@media (max-width: 760px) {
  .gc-ptr .ptr li > .ph { aspect-ratio: 16 / 10 !important; box-shadow: 0 0 0 1px rgba(31, 27, 24, 0.08), 0 20px 40px -30px rgba(31, 27, 24, 0.5); }
  .gc-ptr .ptr li > .ph img { object-position: 50% 0 !important; }
  .gc-ptr .ptr li p small { display: block; margin-top: 6px; font-size: 0.92em; color: var(--ink-2); }
  .gc-ptr .ptr li[data-tab="0"] + li[data-tab="0"] h3 { display: none; }
  .gc-ptr .duo { display: grid; gap: 14px; }
  .gc-ptr .duo .ph { aspect-ratio: 4 / 3 !important; margin: 0 0 6px; }
}
.gc-scale .sec-head { margin-bottom: 0; }
.gc-scale .lede { max-width: 62ch; }
@media (min-width: 761px) { section.gc-ptr.ptr-pin { padding: 0 !important; } }
.gc-ptr .ptr li[data-tab="0"] + li[data-tab="0"] { counter-increment: none; }

/* Classroom "How it works", v2: the screens sit flush on a white page (no frame, no shade); each line sits above its picture */
section.gc-ptr { background: #fff; }
@media (min-width: 761px) {
  section.gc-ptr .ptr.js { overflow: hidden; border-radius: 0; }
  section.gc-ptr .ptr.js li { grid-template-rows: auto minmax(0, 1fr) !important; row-gap: clamp(8px, 1.6vh, 16px) !important; }
  section.gc-ptr .ptr.js li > p, section.gc-ptr .ptr.js li .duo-i p { grid-area: 1 / 1 !important; align-self: start; background: none !important; color: var(--ink) !important; text-shadow: none !important; padding: 0 !important; border-radius: 0 !important; max-width: none !important;
    font-size: clamp(1.5rem, 0.9rem + 1.8vh, 2.2rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.025em; }
  section.gc-ptr .ptr.js li p em { color: var(--red) !important; }
  section.gc-ptr .ptr.js li > .ph { grid-area: 2 / 1 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; height: 100%; }
  section.gc-ptr .ptr.js li > .ph img { object-fit: contain !important; object-position: 50% 0 !important; }
  section.gc-ptr .ptr.js li p small { color: var(--ink-2); font-size: 0.6em; }
  section.gc-ptr .duo { height: 100%; }
  section.gc-ptr .duo-i { grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(8px, 1.4vh, 14px); }
  section.gc-ptr .ptr.js li .duo-i p { font-size: clamp(1.25rem, 0.8rem + 1.4vh, 1.8rem) !important; }
  section.gc-ptr .duo-i .ph { grid-area: 2 / 1 !important; border-radius: 26px; }
}
@media (max-width: 760px) {
  .gc-ptr .ptr li > .ph { aspect-ratio: auto !important; box-shadow: none !important; border-radius: 0 !important; background: transparent; }
  .gc-ptr .ptr li > .ph img { height: auto; object-fit: contain !important; }
  .gc-ptr .ptr li > p { order: -1; font-weight: 700; font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
  .gc-ptr .duo-i p { font-weight: 700; font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
}

/* Classroom: three bold statements. Desktop: the section holds still and the statements slide across, left to
   right, as you scroll (each new one comes in from the left). Phones: stacked. */
.gc-slides .gs-track { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.gc-slides .gs-n { display: block; font: 800 clamp(1rem, 0.8rem + 0.6vw, 1.4rem)/1 var(--font-body); letter-spacing: 0.08em; color: var(--yellow); margin-bottom: 0.9em; }
.gc-slides h3 { margin: 0; color: #fff; font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; max-width: 16ch; }
.gc-slides h3 em { font-style: normal; color: var(--yellow); }
.gc-slides p { margin: 0.7em 0 0; color: rgba(255, 255, 255, 0.92); font-size: clamp(1.25rem, 0.95rem + 1.1vw, 2rem); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; max-width: 40ch; }
.gc-slides .gs-dots { display: none; }
@media (min-width: 761px) {
  section.gc-slides.gs-pin { position: relative; padding: 0 !important; overflow-x: clip; }
  section.gc-slides.gs-pin .gs-stage { position: sticky; top: var(--hdr-h, 70px); height: calc(100vh - var(--hdr-h, 70px)); display: flex; flex-direction: column; justify-content: center; }
  section.gc-slides.gs-pin .gs-track { position: relative; display: block; height: clamp(360px, 62vh, 620px); }
  section.gc-slides.gs-pin .gs-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; will-change: transform, opacity; }
  section.gc-slides.gs-pin .gs-dots { display: flex; gap: 10px; margin-top: clamp(16px, 3vh, 32px); }
  section.gc-slides.gs-pin .gs-dots i { width: 34px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); transition: background 300ms ease, width 300ms ease; }
  section.gc-slides.gs-pin .gs-dots i.on { width: 64px; background: var(--yellow); }
}
/* Classroom Newton section, v2: heading, a full-width rule, then the text underneath (two columns on desktop) */
.gc-nw { display: block !important; }
.gc-nw .sec-head { margin-bottom: 0; max-width: 22ch; }
.gc-nw .sec-head .h2 { max-width: none; }
.gc-nw-copy { margin-top: clamp(22px, 3vw, 40px); padding-top: clamp(22px, 3vw, 40px); border-top: 2px solid var(--ink); }
@media (min-width: 900px) {
  .gc-nw .sec-head { max-width: none; }
  .gc-nw-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .gc-nw-copy .lede, .gc-nw-copy .muted { margin: 0; }
}
@media (min-width: 761px) { section.gc-ptr.ptr-pin .ptr.js li .duo-i .ph { grid-area: 2 / 1 !important; height: 100%; min-height: 0; } section.gc-ptr.ptr-pin .ptr.js li .duo-i p { grid-area: 1 / 1 !important; } }
@media (max-width: 760px) { .gc-ptr .ptr li > h3 { order: -2; } }
/* Classroom How it works v3: every step is a pair; the two lines and the two pictures line up across the pair */
@media (min-width: 761px) {
  section.gc-ptr .duo { grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(8px, 1.4vh, 14px); }
  section.gc-ptr .duo-i { grid-row: 1 / 3; grid-template-rows: subgrid !important; row-gap: inherit; }
  section.gc-ptr.ptr-pin .ptr.js li .duo-i p { align-self: end; }
  section.gc-ptr.ptr-pin .ptr.js li .duo-i p small { display: block; margin-top: 0.35em; font-size: 0.66em; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: var(--ink-2); }
  section.gc-ptr.ptr-pin .ptr.js li .duo-shot .ph { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  section.gc-ptr.ptr-pin .ptr.js li .duo-shot .ph img { object-fit: contain !important; object-position: 50% 0 !important; }
}
@media (max-width: 760px) {
  .gc-ptr .duo-shot .ph { aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; background: transparent; }
  .gc-ptr .duo-shot .ph img { height: auto; object-fit: contain !important; }
  .gc-ptr .duo-i p small { display: block; font-weight: 500; font-size: 0.85em; color: var(--ink-2); margin-top: 4px; }
}
/* Newton v3: one continuous block, both paragraphs the same size */
@media (min-width: 900px) { .gc-nw-copy { display: block !important; } }
.gc-nw-copy .lede, .gc-nw-copy .muted { max-width: none !important; font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem) !important; line-height: 1.55 !important; color: var(--ink-2) !important; margin: 0 !important; }
.gc-nw-copy .muted { margin-top: 0.8em !important; }
/* Classroom v4: Teach lines start level at the top; the blue statements band is shorter than the screen and
   holds still in the middle of it while the statements slide across */
@media (min-width: 761px) {
  section.gc-ptr.ptr-pin .ptr.js li .duo-i p { align-self: start !important; }
  section.gc-slides.gs-pin { --gs-h: clamp(340px, 52vh, 500px); }
  section.gc-slides.gs-pin .gs-stage { height: var(--gs-h); top: calc(var(--hdr-h, 70px) + (100vh - var(--hdr-h, 70px) - var(--gs-h)) / 2); padding-block: clamp(26px, 4vh, 44px); box-sizing: border-box; }
  section.gc-slides.gs-pin .gs-track { flex: 1 1 auto; height: auto; min-height: 0; }
  section.gc-slides.gs-pin .gs-dots { margin-top: clamp(10px, 2vh, 20px); }
  section.gc-slides h3 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.6rem); }
  section.gc-slides p { font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.7rem); }
}

/* Who we have worked with: each partner's logo above its name (the logo's white melts into the card) */
.partners.pt-logos div { display: grid; grid-template-rows: auto auto; justify-items: center; align-content: center; text-align: center; gap: 12px; }
.pt-logos .pt-logo { display: block; width: auto; height: clamp(48px, 4.2vw, 66px); max-width: 82%; object-fit: contain; mix-blend-mode: multiply; }
.partners.pt-logos b { font-size: clamp(0.92rem, 0.8rem + 0.25vw, 1.06rem) !important; line-height: 1.25; font-weight: 600; color: var(--ink-2); }
@media (min-width: 761px) { .partners.pt-logos div { padding: clamp(14px, 2.2vh, 24px) 16px !important; } }
@media (max-width: 760px) {
  .pt-tags.pt-logos li { gap: 10px; }
  .pt-tags.pt-logos .pt-logo { height: 34px; max-width: 46px; flex: 0 0 auto; }
}
.pt-logos .pt-logo { height: clamp(60px, 5.6vw, 86px); max-width: 88%; }
@media (max-width: 760px) {
  .pt-tags.pt-logos li { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 14px 10px; }
  .pt-tags.pt-logos .pt-logo { height: 46px; max-width: 86%; }
  .pt-tags.pt-logos li span { font-size: 0.92rem; line-height: 1.22; }
}

/* Homepage, desktop: "Who we have worked with" fills one screen; the quote, the closing banner and the footer
   share the last screen (the soft stop lands on the quote) */
@media (min-width: 761px) {
  main > section[aria-labelledby="who"] { min-height: calc(100vh - var(--hdr-h, 71px)); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  main > section[aria-labelledby="who"] > .wrap { width: 100%; }
  main > section.jk { min-height: calc(100vh - var(--hdr-h, 71px) - var(--cta-h, 200px) - var(--foot-h, 430px)); box-sizing: border-box; padding-block: clamp(20px, 4vh, 48px) !important; }
  main > section.jk ~ section.cta { min-height: 0 !important; padding-block: clamp(22px, 4vh, 44px) !important; }
}

/* ASSESS: example result tables (scores by broad field and topic; NCF curricular goals and competencies) */
.as-topics .sec-head { margin-bottom: clamp(18px, 2.4vw, 30px); }
.rt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.rt { margin: 0; background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 44px -36px rgba(31, 27, 24, 0.5); }
.rt figcaption { padding: 14px 18px; font-size: 1.02rem; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.rt figcaption b { color: var(--ink); font-weight: 700; }
.rt table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.rt th, .rt td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.rt thead th { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rt tbody th { text-align: left; font-weight: 500; color: var(--ink); padding-left: 18px; }
.rt tbody tr:last-child th, .rt tbody tr:last-child td { border-bottom: 0; }
.rt tr.bf th, .rt tr.bf td { font-weight: 700; background: rgba(246, 205, 60, 0.16); }
.rt tbody tr:not(.bf) th { padding-left: 30px; }
/* each score sits on a tint that runs from red (low) to green (high) */
.rt td span { display: inline-block; min-width: 3.4em; padding: 3px 0; border-radius: 8px; font-variant-numeric: tabular-nums; background: color-mix(in srgb, hsl(calc(var(--v) * 1.25), 70%, 50%) 22%, transparent); }
.rt td.na span { background: none; color: var(--muted); }
.rt .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rt-note { margin: 14px 0 0; font-size: 0.95rem; color: var(--muted); }
.as-ncf-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.as-ncf .sec-head { margin: 0; }
.as-ncf .rt { background: #fff; color: var(--ink); border: 0; }
@media (max-width: 900px) { .rt-pair, .as-ncf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .rt th, .rt td { padding: 8px 6px; font-size: 0.88rem; } .rt tbody tr:not(.bf) th { padding-left: 14px; } .rt tbody th { padding-left: 10px; } .rt thead th { font-size: 0.7rem; } }
@media (min-width: 761px) {
  main > section.jk { padding-block: clamp(14px, 2.6vh, 34px) !important; }
  main > section.jk ~ section.cta { padding-block: clamp(16px, 3vh, 34px) !important; }
}
.rt thead th { white-space: nowrap; font-size: 0.74rem; padding-inline: 6px; }
/* Classroom statements, v3: only the band itself is blue (no blue above or below it while it holds still) */
@media (min-width: 761px) {
  section.gc-slides.gs-pin { background: transparent !important; --gs-h: clamp(300px, 44vh, 440px); }
  section.gc-slides.gs-pin .gs-stage { background: var(--navy); box-shadow: 0 0 0 100vw var(--navy); clip-path: inset(0 -100vw); }
}
/* Classroom Prepare v5: the two app screens in rounded boxes the size of the Teach pictures, with a fine edge so the white screens read as boxes */
.gc-ptr .duo-ui .ph { background: #fff; box-shadow: inset 0 0 0 1px rgba(31, 27, 24, 0.1), 0 24px 44px -34px rgba(31, 27, 24, 0.45) !important; }
.gc-ptr .duo-ui .ph img { object-fit: cover !important; object-position: 50% 0 !important; }
@media (max-width: 760px) { .gc-ptr .duo-ui .ph { aspect-ratio: 1 / 1 !important; border-radius: 20px; } }
/* Classroom statements v4: a normal band in the page (not pinned), statements across the full width */
@media (min-width: 761px) {
  section.gc-slides.gs-pin { --gs-h: clamp(360px, 50vh, 480px); }
  section.gc-slides.gs-pin .gs-stage { position: relative; top: auto; height: var(--gs-h); box-shadow: none; clip-path: none; background: none; padding-block: clamp(30px, 5vh, 52px); }
}
.gc-slides h3, .gc-slides p { max-width: none !important; }
.gc-slides h3 { font-size: clamp(2.2rem, 1.1rem + 3vw, 4.4rem); }
.gc-slides p { font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.7rem); }
/* programmes menu: the group headings start level at the top (their underlines stay level too) */
.mm-h { align-items: flex-start !important; }
/* Partner with us: the form follows the heading straight away */
section.pw-form { padding-top: clamp(18px, 3vw, 36px) !important; }

/* Footer, desktop: wider, programmes by category (two per column), contact and address in their own columns */
@media (min-width: 761px) {
  .site-footer .ft-wide { max-width: min(1600px, calc(100vw - 64px)) !important; }
  .site-footer .ft-grid { grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr) !important; column-gap: clamp(24px, 3vw, 56px); align-items: start; }
  .ft-grid .foot-brand img { width: 108px; height: auto; margin-bottom: 26px; }
  .ft-col { display: grid; gap: 26px; align-content: start; }
  .ft-grid h4 { margin: 0 0 12px; }
  .ft-grid h4 a { color: inherit; text-decoration: none; }
  .ft-grid h4 a:hover { color: var(--yellow); }
  .ft-cat.ft-science h4 { color: #6fd39d; } .ft-cat.ft-careers h4 { color: #8fbdf0; } .ft-cat.ft-sports h4 { color: #ff8a80; }
  .ft-cat.ft-teachers h4 { color: #f2c75c; } .ft-cat.ft-growth h4 { color: #fff; }
  .ft-grid ul { columns: 1 !important; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ft-grid ul li { margin: 0; }
  .ft-grid ul a { color: inherit; text-decoration: none; } .ft-grid ul a:hover { text-decoration: underline; }
}
@media (min-width: 761px) and (max-width: 1100px) { .site-footer .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 30px; } }
.ft-grid h4 { line-height: 1.35; }
/* Footer on phones: as before - logo, the Organisation links in a row, then contact and address */
@media (max-width: 760px) {
  .site-footer .ft-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; }
  .site-footer .ft-grid > div { display: block !important; grid-column: auto !important; }
  .site-footer .ft-grid .ft-cat { display: none; }
  .site-footer .ft-grid > div:nth-child(2), .site-footer .ft-grid > div:nth-child(3) { display: none !important; }
  .ft-grid .foot-brand img { margin-bottom: 18px; }
  .ft-grid .foot-brand ul { display: flex; flex-wrap: nowrap; gap: 8px clamp(14px, 5vw, 22px); }
  .ft-grid .foot-brand li { white-space: nowrap; }
  .ft-grid .ft-addr ul { gap: 2px; }
}
/* Footer v2: Organisation heading level with the others, logo at the foot of that column; contact + address share the last column */
@media (min-width: 761px) {
  .site-footer .ft-grid { grid-template-columns: minmax(0, 0.75fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr) !important; }
  .ft-grid .foot-brand { display: flex; flex-direction: column; align-self: stretch; }
  .ft-grid .foot-brand img { margin: auto 0 0 !important; padding-top: 24px; box-sizing: content-box; }
  .ft-grid .ft-addr ul { gap: 2px; }
}
@media (max-width: 760px) {
  .site-footer .ft-grid > div:nth-child(4) { display: none !important; }
  .ft-grid .foot-brand { display: flex !important; flex-direction: column; }
  .ft-grid .foot-brand img { order: -1; margin: 0 0 18px !important; }
}
@media (max-width: 760px) {
  .site-footer .ft-grid > div.foot-brand { display: flex !important; flex-direction: column; }
  .site-footer .ft-grid .ft-addr { margin-top: 22px; }
}
@media (max-width: 760px) { .site-footer .ft-grid .foot-brand img { width: 108px; height: auto; align-self: flex-start; } }
/* Classroom statements v5: each statement with its picture on the right; a taller band to hold both */
.gc-slides .gs-slide { display: grid; gap: 20px; }
.gc-slides .gs-pic { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7); }
.gc-slides .gs-pic img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 761px) {
  section.gc-slides.gs-pin { --gs-h: clamp(440px, 64vh, 620px); }
  section.gc-slides.gs-pin .gs-slide { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
  section.gc-slides.gs-pin .gs-pic { height: 100%; max-height: calc(var(--gs-h) - 110px); aspect-ratio: auto; width: 100%; }
  .gc-slides h3 { font-size: clamp(2rem, 1rem + 2.6vw, 3.8rem); }
  .gc-slides p { font-size: clamp(1.1rem, 0.9rem + 0.65vw, 1.5rem); }
}
.gc-nw-copy strong { color: var(--ink); font-weight: 600; }
/* Classroom statements v6: pinned like the homepage steps - one full screen of blue, one statement at a time */
.gs-snap { display: none; }
@media (min-width: 761px) {
  section.gc-slides.gs-pin { position: relative; padding: 0 !important; background: var(--navy) !important; overflow-x: clip; }
  section.gc-slides.gs-pin .gs-stage { position: sticky !important; top: var(--hdr-h, 70px) !important; height: calc(100vh - var(--hdr-h, 70px)) !important; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(28px, 5vh, 56px); box-sizing: border-box; }
  section.gc-slides.gs-pin .gs-track { position: relative; flex: 1 1 auto; min-height: 0; max-height: 640px; }
  section.gc-slides.gs-pin .gs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(-14%);
    transition: opacity 520ms ease, transform 760ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 760ms; }
  section.gc-slides.gs-pin .gs-slide.past { transform: translateX(14%); }
  section.gc-slides.gs-pin .gs-slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity 520ms ease 80ms, transform 760ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; }
  section.gc-slides.gs-pin .gs-pic { max-height: none; height: 100%; }
  section.gc-slides.gs-pin .gs-snap { display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
}
/* Classroom statements: a wider picture column, pictures in their natural 3:2 shape */
@media (min-width: 761px) {
  section.gc-slides.gs-pin .gs-slide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important; }
  section.gc-slides.gs-pin .gs-pic { height: auto !important; aspect-ratio: 3 / 2 !important; max-height: 100%; align-self: center; }
}
/* Homepage: Know More shows straight away */
.go-cta.rv-up, .go-cta.rv-up:not(.in) { opacity: 1 !important; transform: none !important; transition: none !important; }
.gc-newton .sec-head, .gc-newton .h2 { max-width: none !important; }

/* Enquiry form: honeypot (off-screen for people, still in the form for bots), notes, consent line */
.form .hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form-note { font-size: 0.92rem; color: var(--muted); }
.form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.form-consent { margin: 0; font-size: 0.94rem; color: var(--muted); }
.form-consent a { color: var(--red-ink); }
.form-noscript { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--red-tint); color: var(--red-ink); }
.form-noscript a { color: inherit; font-weight: 700; }
.form button[disabled] { opacity: 0.6; cursor: not-allowed; }
/* Footer: Privacy Notice link */
.foot-base .ft-privacy { color: var(--navy-text); text-decoration: none; }
.foot-base .ft-privacy:hover { color: #fff; text-decoration: underline; }
/* Privacy Notice page */
.privacy .pv { max-width: 760px; }
.pv-draft { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; background: #fff4cf; border: 1px solid #f0cf5a; color: #6b4b00; }
.pv-meta { color: var(--muted); font-size: 0.98rem; }
.privacy h2 { margin: 1.6em 0 0.4em; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); letter-spacing: -0.02em; }
.privacy p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); }
.privacy a { color: var(--red-ink); }
/* Galleries on tablets (761-1100px): the category row scrolls sideways inside its own box, so the page never does;
   keyboard focus brings each category into view */
@media (min-width: 761px) and (max-width: 1100px) {
  .sg .sg-top, .sg .sg-top > * { min-width: 0; }
  .sg .sg-chips { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; max-width: 100%; scrollbar-width: thin; overscroll-behavior-x: contain; scroll-padding-inline: 8px; padding-bottom: 6px; }
  .sg .sg-chips .sg-chip { flex: 0 0 auto !important; }
}
.ft-grid > *, .ft-col, .ft-col > * { min-width: 0; }
.ft-grid .ft-mail, .ft-grid .ft-mail a { overflow-wrap: anywhere; }
/* Footer on small laptops / tablets (761-1100px): three columns, after the desktop five-column rule */
@media (min-width: 761px) and (max-width: 1100px) { .site-footer .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 30px; } }
.ft-grid ul > li { min-width: 0; }
/* "See our other programmes" heading and arrows fit at 320px */
.others .ot-head { min-width: 0; gap: 10px; }
.others .ot-head .h2 { min-width: 0; }
@media (max-width: 360px) { .others .ot-nav { gap: 6px; } .others .ot-arr { width: 38px; height: 38px; } .sg .sg-chips { margin-inline: -12px !important; padding-inline: 12px !important; } }

/* ===== Nov 2 changes ===== */
/* 1. Lifeskills category in purple (programmes menu and footer), like the other categories' colours */
.mm-growth .mm-h { color: #7b4bb7 !important; }
@media (min-width: 761px) { .ft-cat.ft-growth h4 { color: #c4a6f2 !important; } }
/* 4. Home header slides: the four dots stand in a column at the bottom left, in line with the headline */
@media (min-width: 761px) {
  .hx3 .hx2-bar { left: calc(clamp(28px, 4.5vw, 72px) - 10px) !important; right: auto !important; transform: none !important; bottom: clamp(24px, 4vh, 40px) !important; }
  .hx3 .hx2-tabs { flex-direction: column; gap: 2px; }
}
/* 9. Galleries: arrows at the sides of the photos (desktop) */
.sg-arr { display: none; }
@media (min-width: 761px) {
  .sg-has-arr { position: relative; }
  .sg-arr { display: grid; place-items: center; position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: 0 10px 26px -12px rgba(31, 27, 24, 0.55), 0 0 0 1px rgba(31, 27, 24, 0.08); transition: opacity 200ms ease, transform 120ms ease; }
  .sg-arr svg { width: 20px; height: 20px; }
  .sg-arr:hover { background: #fff; }
  .sg-arr:active { transform: scale(0.94); }
  .sg-arr.sg-prev { left: 14px; } .sg-arr.sg-next { right: 14px; }
  .sg-arr[disabled] { opacity: 0; pointer-events: none; }
}
/* 11. Vision page, desktop: calmer type sizes */
@media (min-width: 761px) {
  .vis-h { font-size: clamp(2.1rem, 1.2rem + 2vw, 3.2rem) !important; }
  .vision-y .pillars-big h3 { font-size: clamp(1.3rem, 0.85rem + 0.95vw, 1.8rem) !important; }
  .vision-y .pillars-big p { font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.35rem) !important; }
}
/* 12. Home programme category titles: one colour on phones too, as on desktop */
@media (max-width: 760px) { .pgroup-h em { color: inherit !important; } }
/* FAST: the 360-degree section on cream - black text, red numbers and highlights, gold accents */
.fast-how { background: var(--sand, #f4ede2); color: var(--ink); }
.fast-how .h2 { color: var(--ink); }
.fast-how .h2 em { color: var(--red); }
.fast-how .biglist li { border-color: rgba(31, 27, 24, 0.14) !important; }
.fast-how .biglist .bl-n { color: var(--red) !important; }
.fast-how .biglist h3 { color: var(--ink) !important; }
.fast-how .biglist p { color: var(--ink-2); opacity: 1; }
.fast-how .biglist .wordwall li:nth-child(odd) { color: var(--ink); }
.fast-how .biglist .wordwall li:nth-child(even) { color: #c58f00; }
.fast-how .biglist .wordwall li:not(:last-child)::after { color: var(--red); }
.fast-how .biglist .ww-note { color: var(--ink-2); }
/* Home header slides: the dots close to the left edge of the screen */
@media (min-width: 761px) { .hx3 .hx2-bar { left: clamp(10px, 1.2vw, 18px) !important; } }
/* Phones: once a snap point has been passed, snapping is gentle (never pulls the page down past where you scroll up) */
/* (whole-page switch: Safari reliably follows a change to the page's snap type) */
@media (max-width: 760px) { html.snap-seen, html.snap-seen.m-snap, html.snap-seen.m-snap.m-hero, html.snap-seen:has(.pillars-big), html.snap-seen.m-snap.in-pg { scroll-snap-type: none !important; } }
@media (max-width: 760px) { html.snap-seen.snap-firm, html.snap-seen.snap-firm.m-snap, html.snap-seen.snap-firm:has(.pillars-big) { scroll-snap-type: y mandatory !important; } }
/* Phones: while the home header is on screen its slides keep their own firm, slide-by-slide snapping */
@media (max-width: 760px) { html.snap-seen.m-snap.m-hero, html.snap-seen.snap-firm.m-snap.m-hero { scroll-snap-type: y mandatory !important; } }
/* Phones: the snapping code nudges the page by a fraction of a pixel so Safari re-reads snap positions */
@media (max-width: 760px) { body { padding-bottom: var(--snap-nudge, 0px); } }
/* Phones: header slides fade between each other on their own timing (smooth on iPhone) instead of following the finger */
@media (max-width: 760px) {
  .hx3.pin .hx2-img, .hx3.pin .hx2-img:first-of-type { transform: scale(1.04); opacity: 0; transition: opacity 520ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; }
  .hx3.pin .hx2-img.lite-on { opacity: 1; transform: none; }
  .hx3.pin .hx2-t { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 420ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
  .hx3.pin .hx2-t.lite-on { opacity: 1; transform: none; transition-delay: 120ms; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .hx3.pin .hx2-img, .hx3.pin .hx2-t { transition: none; } }
/* Phones: a solid header (a blurred see-through header is redrawn on every scroll frame, which is heavy on iPhone) */
@media (max-width: 760px) { .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(251, 248, 242, 0.98) !important; } }
/* Phones: menu button is just the three lines (no box) */
@media (max-width: 960px) { .menu-btn { background: none !important; border: 0 !important; box-shadow: none !important; } }
/* Phones, Vision: Krishnamurti's portrait sits below the heading and fills only the space left, never covering it */
@media (max-width: 760px) {
  .vision-y .vis-side { display: flex !important; flex-direction: column; min-height: calc(100svh - var(--hdr-h, 64px)); }
  .vision-y .vis-jk { position: static !important; flex: 1 1 0; min-height: 0; width: 100%; max-width: 330px; height: 100%; object-fit: contain; object-position: left bottom; margin: 18px 0 0 -26px !important; }
}
/* Phones: clear space before each programme category (more than between cards), outside its snap point */
@media (max-width: 760px) { .pgroup + .pgroup { margin-top: 40px !important; } }
/* Phones: the footer is never a snap point (it was where the page jumped when no stop was left) */
@media (max-width: 760px) { .site-footer { scroll-snap-align: none !important; } }
/* Phones, home page: the only snapping rules (see the phone home-page block in site.js). Firm in the header slides,
   gentle below; only the 1px start-of-section markers (and the header slide marks) are snap points. */
@media (max-width: 760px) {
  html.m-home, html.m-home.m-snap, html.m-home.snap-seen, html.m-home.snap-firm, html.m-home.m-managed { scroll-snap-type: y proximity !important; scroll-padding-top: var(--hdr-h, 64px); }
  html.m-home.m-hero, html.m-home.m-snap.m-hero { scroll-snap-type: y mandatory !important; }
  html.m-home main > section, html.m-home .pillars-big li, html.m-home .pgroup, html.m-home .pgroup .pc2, html.m-home .ptr li, html.m-home .sec-end, html.m-home .m-stop, html.m-home .site-footer { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
  html.m-home .h-stop { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
  /* a passed stop keeps its snap position (only its "must stop" is dropped): Safari remembers the snap point it last
     rested on by its place in the list, so removing points made it jump to a later section by itself */
  html.m-home .h-stop.off { scroll-snap-align: start; scroll-snap-stop: normal; }
}
/* Vision page on phones: firm snapping, so each flick lands on the next point (the points are about one screen tall) */
@media (max-width: 760px) {
  html.m-home.m-vis, html.m-home.m-vis.snap-seen { scroll-snap-type: y mandatory !important; }
  html.m-home.m-vis .h-top { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
  html.m-home.m-vis .h-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: end; }
  html.m-home.m-vis body .site-footer { scroll-snap-align: end !important; }
}
/* all stops passed: no snapping at all below the header slides (natural iPhone scrolling) */
@media (max-width: 760px) { html.m-home.m-free, html.m-home.m-vis.m-free.m-free, html.m-home.m-free.m-snap.m-hero.m-snap, html.m-home.m-free.snap-seen.snap-firm.m-snap { scroll-snap-type: none !important; } }

/* Phones, home page Gnaan U Classroom steps: styled like desktop. No step numbers; the step in view gets the yellow
   highlighter swipe behind its heading. Each picture card is extended downwards into a dark band (the picture fades
   into it) carrying the text in white with yellow key words, so the text covers only the picture's bottom edge. */
@media (max-width: 760px) {
  section[aria-labelledby="scale"] .ptr h3::before { content: none !important; }
  section[aria-labelledby="scale"] .ptr h3 { justify-self: start; position: relative; z-index: 0; padding: 0 0.22em; margin-left: 0; }
  section[aria-labelledby="scale"] .ptr h3::after { content: ""; position: absolute; z-index: -1; inset: 6% -3% 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C45 7 120 4 197 8 L195 15 L198 22 L194 47 C140 52 70 54 7 55 L2 47 L5 38 Z' fill='%23f6cd3c' fill-opacity='0.86'/%3E%3Cpath d='M8 30 C70 25 140 22 193 26 L190 50 C125 53 60 56 10 54 Z' fill='%23f6cd3c' fill-opacity='0.42'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 0 50%; transition: transform 640ms cubic-bezier(0.65, 0, 0.35, 1) 80ms; }
  section[aria-labelledby="scale"] .ptr li.hl-on h3::after { transform: scaleX(1); }
  section[aria-labelledby="scale"] .ptr li { row-gap: 0 !important; }
  section[aria-labelledby="scale"] .ptr h3 { margin-bottom: 14px; }
  section[aria-labelledby="scale"] .ptr .ph { border-radius: 22px 22px 0 0 !important; margin: 0 !important; box-shadow: none !important; }
  section[aria-labelledby="scale"] .ptr p { position: relative; z-index: 1; margin: -64px 0 0 !important; padding: 64px 20px 22px; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, rgba(21, 18, 15, 0) 0, rgba(21, 18, 15, 0.82) 40px, #15120f 64px); color: #fff; font-weight: 600; font-size: 1.22rem; line-height: 1.38; box-shadow: 0 24px 44px -32px rgba(31, 27, 24, 0.7); }
  section[aria-labelledby="scale"] .ptr p em { color: var(--yellow) !important; font-weight: 700; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { section[aria-labelledby="scale"] .ptr h3::after { transition: none; } }

/* Phones: header dots and programme icons - no grey tap box; a sideways glide over them is not taken as a page scroll */
@media (max-width: 760px) {
  .hdr-dots, .hdr-dots a, .hdr-dots button { -webkit-tap-highlight-color: transparent; }
  .hdr-dots a:focus, .hdr-dots button:focus { outline: none; }
  .hdr-dots a:focus-visible, .hdr-dots button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 8px; }
  .hdr-dots .hx2-bar, .hdr-dots .gd-d { touch-action: pan-y; }
}
/* Phones, photo galleries: arrows in the navy of the selected city / field button; 8 rows of photos, the yellow down
   arrow appears only when more photos are waiting and brings in the next 8 rows */
@media (max-width: 760px) {
  .sg-bar .sg-prev, .sg-bar .sg-next { background: var(--navy) !important; color: #fff; box-shadow: 0 10px 24px -10px rgba(19, 35, 63, 0.6) !important; }
}
/* Gnaan U Classroom steps: shorter captions on phones only */
.ptr .ptr-m { display: none; }
@media (max-width: 760px) {
  section[aria-labelledby="scale"] .ptr li > p:not(.ptr-m) { display: none !important; }
  section[aria-labelledby="scale"] .ptr li > p.ptr-m { display: block; font-size: 1.55rem !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -0.015em; padding: 64px 22px 24px !important; }
}

/* Phones, photo galleries: no line under the photos; the arrows ride along at the bottom of the screen only while the
   gallery is on screen and come to rest under (or, with no more photos, over) its last row - never over the next section */
@media (max-width: 760px) {
  .sg-more { border: 0 !important; height: 0 !important; }
  .sg-bar { position: sticky !important; left: auto; right: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding-inline: 0; margin-top: -62px; }
  .sg.sg-has-more .sg-bar { margin-top: 14px; }
}

/* Teacher training: the five approaches, as large boxes (no numbers) */
.tt-tags { list-style: none; margin: clamp(22px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tt-tags li { display: flex; align-items: center; min-height: clamp(110px, 10vw, 150px); padding: clamp(18px, 2vw, 26px); border-radius: 18px; background: var(--navy-2); color: #fff; font: 700 clamp(1.2rem, 0.85rem + 0.6vw, 1.6rem)/1.2 var(--font-body); letter-spacing: -0.015em; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .tt-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-tags li:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .tt-tags li { min-height: 92px; font-size: 1.35rem; } }
@media (max-width: 760px) { .hx3 .hx2-img[src*="hero-tt-pendulum"] { object-position: 18% 40%; } }
/* Classroom statements (desktop): the outgoing statement leaves completely before the next one comes in, so the
   two layouts never overlap */
@media (min-width: 761px) {
  section.gc-slides.gs-pin .gs-slide { transition: opacity 320ms ease, transform 360ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 360ms !important; }
  section.gc-slides.gs-pin .gs-slide.on { transition: opacity 520ms ease 400ms, transform 760ms cubic-bezier(0.23, 1, 0.32, 1) 400ms, visibility 0s 0s !important; }
}
.sg-id { position: absolute; left: 8px; top: 8px; z-index: 3; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.78); color: #fff; font: 700 0.8rem/1.1 var(--font-body); pointer-events: none; }

/* Contact details: tap to copy, with a small "Copied" note by the finger; map link under the address */
.crow { grid-template-columns: minmax(0, 1fr); }
.tap-copy { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 6px; transition: background-color 160ms ease; -webkit-user-select: text; user-select: text; }
.tap-copy:hover { background: rgba(246, 205, 60, 0.18); }
.tap-copy:active { background: rgba(246, 205, 60, 0.32); }
.map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: 0.98rem; color: var(--red); text-decoration: none; }
.map-link svg { width: 17px; height: 17px; }
.map-link:hover { text-decoration: underline; }
.tap-hint { margin: 2px 0 0; font-size: 0.86rem; color: var(--muted); }
.copy-tip { position: fixed; z-index: 1000; transform: translate(-50%, -150%); padding: 6px 12px; border-radius: 99px; background: rgba(20, 18, 15, 0.88); color: #fff; font: 600 0.9rem/1 var(--font-body); pointer-events: none; opacity: 0; transition: opacity 180ms ease, transform 220ms ease; }
.copy-tip.on { opacity: 1; transform: translate(-50%, -190%); }
@media (max-width: 760px) { .crow .val { font-size: 1.05rem; } }