/* Global School Partners — site styles (adapted from the Higher Ed Apply site).
   Tokens are copied from the family design system (Claude Design Package/tokens.css v1.1)
   with the Global School Partners brand roles applied (data-brand="gsp"). */

@font-face {
  font-family: "Arapey";
  src: url("../fonts/Arapey-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/Karla-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --color-navy: #1C4B82;
  --color-navy-hover: #194272;
  --color-navy-active: #153963;
  --color-sky: #DCE6F2;
  /* Sister-brand signatures: only on the Our brands cards and the footer brand links (spec §4.2). */
  --brand-gtps: #7A45A6;
  --brand-gtps-tint: #E7DCF2;
  --brand-hea: #0F6E6E;
  --brand-hea-tint: #BDE7E9;
  --color-midnight: #0F2A4A;
  --color-gold: #B8945F;
  --color-ivory: #F4EFE7;
  --color-white: #FFFFFF;
  --color-graphite: #5F5A63;
  --color-stone: #E6E1D8;
  --color-pebble: #857E89;
  --success: #2E7D5B;
  --error: #B3261E;

  --signature: var(--color-navy);
  --signature-hover: var(--color-navy-hover);
  --signature-active: var(--color-navy-active);
  --signature-tint: var(--color-sky);
  --text-primary: var(--color-midnight);
  --text-secondary: var(--color-graphite);
  --text-heading: var(--color-midnight);
  --link: var(--color-navy);
  --line: var(--color-stone);

  --font-display: "Arapey", Georgia, "Times New Roman", serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem);
  --fs-h4: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-lead: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.8125rem;
  --fs-button: 1rem;
  --lh-display: 1.08; --lh-h2: 1.18; --lh-h3: 1.3; --lh-body: 1.6; --lh-small: 1.5;
  --tracking-eyebrow: 0.12em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --section-y: clamp(64px, 4rem + 4vw, 96px);

  --radius-sm: 4px; --radius-md: 8px; --radius-button: 6px;
  --rule-gold-w: 48px; --rule-gold-h: 3px;
  --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 5px var(--signature);
  --focus-ring-inverse: 0 0 0 2px var(--color-midnight), 0 0 0 5px var(--color-white);

  --container: 1200px;
  --gutter: 16px;
  --header-h: 72px;
  --bar-h: 72px;
  --button-h: 48px;
  --input-h: 52px;

  --dur-fast: 150ms;
  --ease-hover: ease-out;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }
@media (max-width: 1279px) { :root { --header-h: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--text-primary);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2 { font-family: var(--font-display); font-weight: 400; color: var(--text-heading); margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font: 700 var(--fs-h3)/var(--lh-h3) var(--font-body); color: var(--text-heading); margin: 0; }
h4 { font: 700 var(--fs-h4)/var(--lh-h3) var(--font-body); color: var(--text-heading); margin: 0; }
p { margin: 0; }
p + p { margin-top: var(--space-4); }
/* Faster taps on phones (no double-tap zoom delay) and a brand-tinted tap flash. */
a, button, summary, label, input, select { touch-action: manipulation; -webkit-tap-highlight-color: rgba(122, 69, 166, .15); }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  background: var(--color-midnight); color: var(--color-white);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-button);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Layout ---------- */
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--tint { background: var(--color-sky); }
.section--warm { background: var(--color-ivory); }
.section--dark { background: var(--color-midnight); color: var(--color-white); }
.section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--dark :focus-visible { box-shadow: var(--focus-ring-inverse); }
.measure { max-width: 70ch; }
.lead { font-size: var(--fs-lead); line-height: 1.5; }
.section-head { margin-bottom: var(--space-7); }
.section-head h2 + p { margin-top: var(--space-4); }

.eyebrow {
  font: 600 var(--fs-eyebrow)/1.4 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.eyebrow::after {
  content: ""; display: block;
  width: var(--rule-gold-w); height: var(--rule-gold-h);
  background: var(--color-gold);
  margin: var(--space-3) 0 var(--space-4);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--button-h); padding: 0 var(--space-5);
  border-radius: var(--radius-button); border: 1.5px solid transparent;
  font: 600 var(--fs-button)/1.2 var(--font-body); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--signature); color: var(--color-white); }
.btn--primary:hover { background: var(--signature-hover); }
.btn--primary:active { background: var(--signature-active); }
.btn--secondary { background: transparent; color: var(--signature); border-color: var(--signature); }
.btn--secondary:hover { background: var(--signature-tint); }
.btn--white { background: var(--color-white); color: var(--color-midnight); }
.btn--white:hover { background: var(--color-sky); }
.btn[disabled] { opacity: .65; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--header-h);
}
.site-header__logo { flex: none; display: block; }
/* The logo is never shown below the brand book's minimum (horizontal 200px wide): smaller, the map dots and the tagline blur. */
.site-header__logo img { height: 44px; width: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.site-nav__links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.site-nav__links a {
  color: var(--text-primary); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
}
.site-nav__links a:hover { color: var(--signature); }
.site-nav__links a[aria-current="true"] { color: var(--signature); border-bottom-color: var(--signature); }
.gsp-link { color: var(--color-navy); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.site-header .btn { min-height: 44px; padding: 0 var(--space-4); }
/* Sign in for families and the admin (founder, 9 Nov 2026, as on Global Test Prep Solutions): left of the main button on
   desktop; icon and the words Sign in beside Menu when the menu collapses. Opens the portal in a new tab. */
.signin {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  color: var(--color-midnight); font-weight: 600; font-size: var(--fs-small); text-decoration: none; white-space: nowrap;
}
.signin:hover { color: var(--signature); }
.signin__icon { width: 22px; height: 22px; flex: none; }
.signin--compact { display: none; }

.menu-button {
  display: none; margin-left: auto;
  align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  background: transparent; border: 1.5px solid var(--color-midnight); border-radius: var(--radius-button);
  color: var(--color-midnight); font: 600 var(--fs-button)/1 var(--font-body); cursor: pointer;
}
.menu-button svg { width: 20px; height: 20px; }

@media (max-width: 1279px) {
  .site-header__inner { gap: var(--space-3); }
  .site-header__logo img { height: 44px; }
  .menu-button { display: inline-flex; }
  .site-nav .signin { display: none; }
  /* Sign in says so in words, not only an icon. */
  .signin--compact {
    display: inline-flex; justify-content: center; margin-left: auto; padding: 0 var(--space-4);
    border: 1.5px solid var(--line); border-radius: var(--radius-button);
  }
  .signin--compact + .menu-button { margin-left: 0; }
  .site-nav {
    display: none; white-space: normal;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-5);
    background: var(--color-white); border-bottom: 1px solid var(--line);
    padding: var(--space-5) var(--gutter) var(--space-6);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__links { flex-direction: column; gap: 0; }
  .site-nav__links a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
  .site-nav__links a[aria-current="true"] { border-bottom-color: var(--line); }
}

/* With International tracks in the menu (founder, 14 Nov 2026) the full header is tightened; the content is never wider
   than 1200px, so this holds from 1280px up. Portuguese labels are longer and get a little less space between them. */
@media (min-width: 1280px) {
  .site-header__inner { gap: var(--space-4); }
  .site-header__logo img { height: 50px; }
  .site-nav { gap: 14px; }
  .site-header .site-nav__links { gap: 12px; }
  .site-header .site-nav__links a { font-size: 0.875rem; }
  html[lang="pt-BR"] .site-header .site-nav__links { gap: 9px; }
  html[lang="pt-BR"] .site-header .site-nav__links a { font-size: 0.84375rem; }
}

@media (max-width: 399px) {
  .menu-button { padding: 0 var(--space-3); }
  .menu-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Sign in page ---------- */
/* Two panels: the brand on Powder Sky and the form on white. */

/* ---------- Footer ---------- */
.site-footer { background: var(--color-midnight); color: var(--color-white); padding: var(--space-6) 0 var(--space-3); font-size: var(--fs-small); line-height: 1.4; }
.site-footer a { color: var(--color-white); }
.site-footer :focus-visible { box-shadow: var(--focus-ring-inverse); }
.site-footer__logo { height: 52px; width: auto; max-width: 100%; }
.foot { display: grid; gap: var(--space-5); }
.foot__tag { margin: var(--space-3) 0 0; color: var(--color-white); text-wrap: balance; }
.foot__parent { margin: var(--space-1) 0 0; color: var(--color-sky); }
.site-footer .foot__parent a { color: var(--color-sky); }
.foot__title { margin: 0 0 var(--space-2); font-weight: 700; color: var(--color-sky); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.site-footer .foot__links a { text-decoration: none; }
.site-footer .foot__links a:hover { text-decoration: underline; }
.foot__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.foot__contact li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.foot__contact .icon { flex: none; width: 18px; height: 18px; color: var(--color-sky); }
.foot__contact a { overflow-wrap: anywhere; }
.foot__legal { margin: 0; font-size: var(--fs-caption); color: var(--color-sky); }
/* Below desktop the legal lines close the footer. */
@media (max-width: 1199px) {
  .foot__privacy, .foot__copy { padding-top: var(--space-2); border-top: 1px solid rgba(255, 255, 255, .18); }
}
/* Desktop: no separate bottom bar. Privacy policy sits under the slogan, the copyright under Our brands and
   Talk to us, both on the line of the last service (Services spans both rows). */
@media (min-width: 1200px) {
  .site-footer .foot { grid-template-areas: "brand services brands talk" "privacy services copy copy"; row-gap: 0; align-items: stretch; }
  .foot__legal { line-height: 1.6; }
  .foot__brand { grid-area: brand; }
  .foot > nav.foot__col:nth-of-type(1) { grid-area: services; }
  .foot > nav.foot__col:nth-of-type(2) { grid-area: brands; }
  .foot > div.foot__col { grid-area: talk; }
  .foot__privacy { grid-area: privacy; align-self: end; }
  .foot__copy { grid-area: copy; align-self: end; }
  .foot__services { margin-bottom: 0; }
}
.site-footer .foot__legal a { color: var(--color-sky); }
/* Sister-brand links: each brand's own tint on Midnight (its signature is too dark to read there), with a 3px signature rule. */
.site-footer .foot__links--brands { grid-template-columns: 1fr; }
.site-footer .foot__brand-link { padding-left: var(--space-2); border-left: 3px solid; }
.site-footer .foot__brand-link--gtps { color: var(--brand-gtps-tint); border-color: var(--brand-gtps); }
.site-footer .foot__brand-link--hea { color: var(--brand-hea-tint); border-color: var(--brand-hea); }
@media (min-width: 768px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } }
@media (min-width: 1200px) { .foot { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); align-items: start; } }

.mobile-bar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: var(--bar-h); }
  .mobile-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--color-white); border-top: 1px solid var(--line);
    padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  }
  .mobile-bar[hidden] { display: none; }
  .mobile-bar .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(29px, 1.8rem + 1.8vw, 58px); }
.hero__grid { display: grid; gap: var(--space-6); }
.hero__brand > img { width: min(72%, 300px); height: auto; }
.hero__lead { margin: var(--space-5) 0 var(--space-6); max-width: 34em; }
.hero__line { display: block; }
@media (min-width: 900px) {
  /* The stacked logo matches the height of the text beside it. */
  .hero__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-8); align-items: stretch; }
  .hero__brand { position: relative; min-height: 280px; }
  .hero__brand > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
}

/* Universities strip: two copies of the list scroll left as one loop. It pauses while the
   pointer is over the logos and with the Pause button; with reduced motion it becomes a
   static, swipeable row. */
.admits { margin-top: var(--space-6); position: relative; }
/* Centred, with equal side margins so the Pause button on the right never overlaps it. */
.admits__title { font-size: var(--fs-small); font-weight: 700; color: var(--text-secondary); text-align: center; margin: 0 var(--space-9) var(--space-5); }
.admits__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.admits__track { display: flex; width: max-content; animation: admits-scroll 260s linear infinite; }
.admits__list { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0 var(--space-8) 0 0; }
/* Each logo's --h is set from its proportions (wide ones shorter, compact ones taller) so they read at a similar size. */
.admits__list img { display: block; height: var(--h, 40px); width: auto; max-width: none; }
.admits__viewport:hover .admits__track, .admits.is-paused .admits__track { animation-play-state: paused; }
.admits__toggle {
  position: absolute; top: -6px; right: var(--gutter);
  font: 600 var(--fs-caption)/1 var(--font-body); color: var(--link);
  background: none; border: 1px solid var(--line); border-radius: var(--radius-button);
  padding: var(--space-2) var(--space-3); min-height: 32px; cursor: pointer;
}
.admits__toggle:hover { border-color: var(--color-navy); }
@keyframes admits-scroll { to { transform: translateX(-50%); } }
@media (max-width: 599px) {
  .admits__list { gap: var(--space-6); padding-right: var(--space-6); }
  .admits__list img { height: calc(var(--h, 40px) * 0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .admits__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .admits__track { animation: none; }
  .admits__list[aria-hidden="true"], .admits__toggle { display: none; }
}

/* ---------- Progress chart (How it works) ---------- */

/* Desktop: heading, chart and the six-step timeline fit one screen together (designed on a
   1470 x 956 laptop, about 780px of browser window). The chart width follows the window height:
   407px = scroll offset 88 + top padding 24 + chart title and caption 66 + gap 32 + timeline 177 + 20 clear;
   1.4 = the chart's 560:400 shape. */
@media (min-width: 1024px) {
  #how-it-works { padding-top: var(--space-5); } /* keeps labels readable (about 11-13px) at the smaller chart sizes */
}
@media (max-width: 599px) {
  /* The chart scales down on phones; enlarge its labels so they stay readable (about 11px on screen). */
  
}

/* One orchestrated moment: the score line draws from left to right once on load. */

/* Hidden until it scrolls into view (only when the script runs). */

@keyframes chart-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Icons (shared sprite at the top of <body>) ---------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 24px; height: 24px; flex: none; color: var(--color-navy);
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }

/* ---------- Tests we prepare for ---------- */
.section--rule { border-top: 1px solid var(--line); }
/* Intro on white, then each group in its own full-width band, tests side by side. */
/* Half the usual space above the intro, so the hero above can be taller. */

/* The list of tests is the section's main content: one row per stage, test names large in the
   headline face. Plain text, not links. */

@media (min-width: 1200px) {
  /* The intro lines up with the tests column: 11rem + 22rem + two 32px gaps. */
  
  /* The button sits in the empty space under the heading, so it adds no height. */
  
}
/* Phones already have the sticky Book a free diagnostic bar. */

/* Tablets: the button shares the heading's line, so it adds no height. */

/* ---------- How it works: gold-diamond timeline ---------- */
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--space-6); }
.steps::before {
  content: ""; position: absolute; background: var(--line);
  left: 16px; top: 16px; bottom: 16px; width: 1px;
}
.step { position: relative; padding-left: 56px; }
.step__marker {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center;
}
.step__marker::before {
  content: ""; position: absolute; width: 23px; height: 23px; border-radius: 3px;
  background: var(--color-gold); transform: rotate(45deg);
}
.step__marker span { position: relative; color: var(--color-midnight); font: 700 0.875rem/1 var(--font-body); }
.step h3 { font-size: var(--fs-h4); margin: 4px 0 var(--space-2); }
.step p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-primary); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
  .steps::before { left: 16px; right: 16px; top: 16px; bottom: auto; width: auto; height: 1px; }
  .step { padding-left: 0; padding-top: 56px; }
  .step h3 { margin-top: 0; }
}

/* ---------- Built around your student ---------- */
/* Every plan is built for one student: what the plan is built around, then what the student gets. */

.plan__badge { display: grid; place-items: center; width: 44px; height: 44px; background: var(--color-navy); border-radius: var(--radius-md); color: var(--color-white); }
.plan__badge .icon { width: 24px; height: 24px; color: var(--color-white); }

/* ---------- Sample report ----------
   A wide document: each heading is one thing every report includes, so the sample does the explaining. */
.report {
  margin-top: var(--space-6); background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; font-size: var(--fs-small); line-height: var(--lh-small);
}
.report__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-5);
  padding: var(--space-3) var(--space-5); background: var(--color-midnight); color: var(--color-white);
}
.report__brand { font-weight: 700; }
.report__student { margin-top: 0; color: var(--color-sky); }
.report__body { display: grid; gap: var(--space-6); padding: var(--space-5); }
.report__title { font: 700 var(--fs-small)/1.4 var(--font-body); margin-bottom: var(--space-3); }
.report dl { margin: 0; display: grid; gap: var(--space-3); }
.report dd { margin: 0; display: flex; align-items: center; gap: var(--space-3); }
/* The plan: the same small gold diamonds as the How it works timeline. */
.report__plan { display: grid; gap: var(--space-1) var(--space-6); padding: var(--space-4) var(--space-5); background: var(--color-ivory); border-top: 1px solid var(--line); align-items: center; }
.report__plan .report__title { margin-bottom: 0; }
.report__timeline { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.report__timeline li { position: relative; padding-left: 18px; }
.report__timeline li::before { content: ""; position: absolute; left: 1px; top: 0.5em; width: 8px; height: 8px; background: var(--color-gold); transform: rotate(45deg); }
.report__timeline strong { display: block; font-weight: 700; }
.report__foot { padding: var(--space-2) var(--space-5); border-top: 1px solid var(--line); font-size: var(--fs-caption); color: var(--text-secondary); }
@media (min-width: 900px) {
  .report__body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
  /* Room for a two-line title, so the three columns' content starts level. */
  .report__block > .report__title:first-child { min-height: 2.8em; }
  .report__plan { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-7); }
  .report__timeline { grid-column: 2 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
}

/* ---------- Our method: an animated sample of the whole cycle, one idea per step ----------
   On tablet and desktop the stage is 16:9, ready for a narrated video on top: the clear corner under
   the question card is where the video sits. Without JavaScript all six panels show one after another. */

.method { margin: var(--space-6) 0 0; }
/* JavaScript takes over the video's controls; the edges are feathered so it melts into the Ivory stage. */

/* Captions: their own row below the explanations, so they can never overlap the animation. */

/* The cycle: a line through small gold diamonds, as in the How it works timeline. */

.method figcaption { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--text-secondary); }

/* Opening slides: the usual order flipped, then the platform built from the bottom up. */

@keyframes method-swap-a { from { transform: translateX(calc(100% + var(--space-2))); } to { transform: none; } }
@keyframes method-swap-b { from { transform: translateX(calc(-100% - var(--space-2))); } to { transform: none; } }

/* With JavaScript: one panel at a time, in one fixed-height cell so nothing jumps. */

@keyframes method-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes method-grow { from { transform: scaleX(0); } to { transform: none; } }

@media (min-width: 768px) {
  .method { max-width: 728px; }
  /* The video sits on the stage's bottom edge, as if the presenter were standing in the slide. */
  
  /* Nine steps: the number sits above its label so long words fit. */
  
}
@media (min-width: 1200px) {
  #method { padding-top: var(--space-5); }
  .method { margin-top: 0; }
}

/* ---------- Progress reports ---------- */

/* Same columns as Tests, so the intro text lines up down the page. On a 1470 x 956 laptop the section fits one screen. */

/* ---------- Led by ---------- */
/* Half the usual space above the founder section (founder, 7 Nov 2026). Phones keep their own rhythm. */
#founder { padding-top: calc(var(--section-y) / 2); }
.founder { display: grid; gap: var(--space-7); align-items: start; }
.founder__media { max-width: 420px; }
.founder__photo { background: var(--color-sky); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transform: scale(1.22); transform-origin: 50% 100%; }
.founder__role { margin: var(--space-3) 0 var(--space-6); font-weight: 600; color: var(--text-secondary); font-size: var(--fs-small); }
/* Desktop: the title and award fit on one line (founder, 7 Nov 2026). */
@media (min-width: 1280px) { .founder__role { letter-spacing: -0.02em; } }
.highlights { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-3); }
.highlights li { position: relative; padding-left: var(--space-6); font-weight: 600; }
.highlights li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px;
  background: var(--color-gold); transform: rotate(45deg); border-radius: 1px;
}
/* Awards with their posters sit under the bio; the other credentials are a full-width band under the photo and text. */
.founder__awards { margin-top: var(--space-6); max-width: 70ch; }
.founder__awards .highlights { margin: 0; row-gap: var(--space-5); }
.founder__awards .highlights li { font-weight: 400; display: flex; flex-direction: column; gap: var(--space-3); }
/* margin-top:auto keeps the two posters level when the award names wrap to different lengths. */
.award-poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: auto; border-radius: var(--radius-md); background: var(--color-sky); }
@media (min-width: 768px) { .founder__awards .highlights { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }
.credentials { display: grid; gap: var(--space-6); }
.credentials__title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.credentials .highlights { margin: 0; }
.credentials .highlights li { font-weight: 400; }
@media (min-width: 768px) { .credentials { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .founder { grid-template-columns: 4fr 8fr; gap: var(--space-8); }
  .credentials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
/* The photo keeps its 4:5 frame at the top of a narrower column, so the text sets the
   section's height (founder, 8 Nov 2026: the stretched photo made the section too tall). */
@media (min-width: 1024px) {
  .founder__media { align-self: start; max-width: 360px; }
  .founder__photo { aspect-ratio: 6 / 5; max-width: 360px; }
}

/* ---------- FAQs ---------- */
.faq { display: grid; gap: var(--space-6); }
/* Questions grouped by topic: three columns on desktop, one list on phones. */
.faq__groups { display: grid; gap: var(--space-6); align-items: start; }
.faq__group-title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
@media (min-width: 1024px) { .faq__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); } }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--space-5) var(--space-7) var(--space-5) 0;
  font-weight: 600; font-size: var(--fs-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: var(--space-2); top: 50%;
  width: 16px; height: 2px; background: var(--color-navy); border-radius: 1px;
}
.faq summary::after { transform: rotate(90deg); transition: transform var(--dur-fast) var(--ease-hover); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--color-navy); }
.faq details p { padding: 0 var(--space-7) var(--space-5) 0; max-width: 70ch; }
/* FAQs: white tiles of equal height on Powder Sky. */
#faq { background: var(--color-sky); padding-top: 58px; padding-bottom: 58px; }
#faq .faq__group-title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
#faq .faq__list { border: 0; display: grid; gap: var(--space-2); }
#faq details { background: var(--color-white); border: 0; border-radius: var(--radius-md); }
#faq summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-7) var(--space-3) var(--space-3); font-size: var(--fs-small); line-height: 1.35; }
#faq summary::before, #faq summary::after { right: var(--space-4); }
.faq__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--color-sky); border-radius: var(--radius-sm); color: var(--color-navy); }
.faq__icon .icon { width: 22px; height: 22px; color: var(--color-navy); }
#faq details p { padding: 0 var(--space-4) var(--space-4) calc(40px + var(--space-3) * 2); font-size: var(--fs-small); line-height: var(--lh-small); }

#faq summary { min-height: 84px; }
@media (max-width: 767px) { #faq summary { min-height: 64px; } }
/* Tablet: two columns, the third topic runs across both. */
@media (min-width: 768px) and (max-width: 1023px) {
  #faq .faq__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #faq .faq__group:last-child { grid-column: 1 / -1; }
  #faq .faq__group:last-child .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- Book a free diagnostic (form) ---------- */
.booking { display: grid; gap: var(--space-7); align-items: start; }
.booking__contact { margin-top: var(--space-6); font-size: var(--fs-small); }
.booking__contact-title { font-weight: 600; margin-bottom: var(--space-2); }
.booking__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.booking__contact li { display: flex; align-items: center; gap: var(--space-3); }
.booking__contact .icon { width: 20px; height: 20px; }
.booking__panel {
  background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-5);
}
@media (min-width: 768px) { .booking__panel { padding: var(--space-7); } }
@media (min-width: 1024px) {
  .booking { grid-template-columns: 4fr 8fr; gap: var(--space-8); }
  .booking__intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.form__required-note { font-size: var(--fs-caption); color: var(--text-secondary); margin-bottom: var(--space-5); }
.form__grid { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--space-2); align-content: start; }
.field label, .field legend { font-weight: 600; font-size: var(--fs-small); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field input[type="number"], .field select {
  width: 100%; min-height: var(--input-h); padding: 0 var(--space-4);
  border: 1px solid var(--color-pebble); border-radius: var(--radius-button);
  background: var(--color-white); color: var(--text-primary);
  font: 400 1rem/1.4 var(--font-body);
}
.field select {
  appearance: none; padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231C4B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input:focus-visible, .field select:focus-visible { border-color: var(--signature); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field__hint { font-size: var(--fs-caption); color: var(--text-secondary); }
.field__error {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--error);
}
.field__error::before {
  content: "!"; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--error); color: var(--color-white);
  font: 700 12px/18px var(--font-body); text-align: center;
}
.field__error[hidden] { display: none; }

/* Mobile / WhatsApp: country code in front of the number (founder, 11 Nov 2026). Built by phone.js. */
.flag {
  flex: none; display: inline-block; width: 18px; height: 12px; border-radius: 2px;
  background: url("../img/flags.png?v=1") 0 0 / 288px 192px no-repeat var(--line);
  box-shadow: inset 0 0 0 1px rgb(15 42 74 / 12%);
}
.phone { position: relative; display: flex; }
.phone__country {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--input-h); padding: 0 var(--space-3);
  border: 1px solid var(--color-pebble); border-right: 0; border-radius: var(--radius-button) 0 0 var(--radius-button);
  background: var(--color-white); color: var(--text-primary); font: 600 1rem/1 var(--font-body); cursor: pointer;
}
.phone__country::after {
  content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px;
  border-right: 2px solid var(--signature); border-bottom: 2px solid var(--signature); transform: rotate(45deg);
}
.phone__country[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.phone__country:focus-visible { outline: 2px solid var(--signature); outline-offset: 2px; position: relative; z-index: 1; }
.field .phone input[type="tel"] { min-width: 0; border-radius: 0 var(--radius-button) var(--radius-button) 0; }
.phone__panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; min-width: 260px; border: 1px solid var(--color-pebble); border-radius: var(--radius-button);
  background: var(--color-white); box-shadow: 0 8px 24px rgb(15 42 74 / 12%); overflow: hidden;
}
.field .phone__panel input.phone__search {
  width: 100%; min-height: 44px; padding: 0 var(--space-4); border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font: 400 1rem/1.4 var(--font-body); color: var(--text-primary); background: var(--color-white);
}
.phone__search:focus-visible { outline: 2px solid var(--signature); outline-offset: -2px; }
.phone__list { list-style: none; margin: 0; padding: var(--space-1) 0; max-height: 264px; overflow-y: auto; }
.phone__list li {
  display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-4); cursor: pointer;
  font-size: var(--fs-small); color: var(--text-primary);
}
.phone__list li[hidden] { display: none; }
.phone__list li.is-active { background: var(--color-sky); }
.phone__list li[aria-selected="true"] { font-weight: 700; }
.phone__name { flex: 1; min-width: 0; }
.phone__code { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.phone__empty { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-secondary); }

.field--group { border: 0; margin: 0 0 var(--space-5); padding: 0; min-width: 0; }
.field--group legend { padding: 0; margin-bottom: var(--space-3); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
@media (min-width: 640px) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.checks--inline { display: flex; gap: var(--space-6); }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-weight: 400; font-size: var(--fs-small); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-navy); }
/* Consent: the checkbox sits beside its text, the error under the text. */
.field--consent { grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; margin: var(--space-2) 0 var(--space-6); }
.field--consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-navy); }
.field--consent label { font-weight: 400; }
.field--consent .field__error { grid-column: 2; }
.form__submit { width: 100%; }
@media (min-width: 640px) { .form__submit { width: auto; min-width: 240px; } }

/* ---------- Simple pages (thank you, 404, privacy) ---------- */
.simple-page h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: var(--space-5); }
.simple-page__links { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-weight: 600; }
.privacy__updated { color: var(--text-secondary); font-size: var(--fs-small); margin-bottom: var(--space-6); }
.privacy h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--space-7) 0 var(--space-3); }
.privacy h3 { font-size: var(--fs-body); margin: var(--space-5) 0 var(--space-2); }
.privacy ul { margin: var(--space-3) 0 var(--space-4); padding-left: 1.25em; display: grid; gap: var(--space-2); }

/* ---------- Global School Partners additions ---------- */

/* Hero: the founder line under the buttons, a small round photo on Powder Sky. */
.hero__founder {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6); color: var(--text-primary); text-decoration: none;
  font-size: var(--fs-small); line-height: var(--lh-small); max-width: 46em;
}
.hero__founder img {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: var(--signature-tint); object-fit: cover;
}
.hero__founder strong { font-weight: 700; }
.hero__founder:hover span { text-decoration: underline; text-decoration-color: var(--signature); text-underline-offset: 3px; }

/* Where students go: the sister site's test list, with each destination's system under its name
   and the brand map (gold diamonds on the destinations) behind the rows. */

/* How we help: six icon-led tiles, flat, Stone borders. */
.service-grid {
  list-style: none; margin: var(--space-7) 0 0; padding: 0;
  display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.service-tile {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--color-white);
  padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start;
}
.service-tile .icon { width: 32px; height: 32px; color: var(--signature); }
.service-tile h3 { margin: var(--space-2) 0 0; }
.service-tile p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-primary); }
.service-tile__link { font-size: var(--fs-small); font-weight: 600; }
@media (min-width: 1200px) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Gold-diamond lists (postgraduate help, concierge). Diamonds stay within the 8px gold limit. */
.diamond-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2) var(--space-6); }
.diamond-list li { position: relative; padding-left: 20px; font-size: var(--fs-small); line-height: var(--lh-small); }
.diamond-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px;
  background: var(--color-gold); transform: rotate(45deg);
}
@media (min-width: 768px) { .diamond-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Master's, MBAs and specializations: Powder Sky band with white tiles. */
.postgrad__head { display: grid; gap: var(--space-3); max-width: 46rem; }
.postgrad__head .lead { margin: 0; }
.postgrad__tiles {
  list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.postgrad__tiles li { background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-5); }
.postgrad__tiles h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-2); }
.postgrad__tiles p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.postgrad__help { margin-top: var(--space-6); }
.postgrad__help-title { font-weight: 700; margin: 0 0 var(--space-3); }
@media (min-width: 1024px) { .postgrad__help .diamond-list--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.postgrad__foot { margin-top: var(--space-6); display: grid; gap: var(--space-4); justify-items: start; }
.postgrad__note { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); max-width: 52rem; }
@media (min-width: 1024px) {
  .postgrad__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-7); }
}

/* the plan section: the plan year by year, then the steps. */
.journey__head { display: grid; gap: var(--space-3); max-width: 46rem; }
.journey__head .lead { margin: 0; }
.journey__line { display: block; }   /* heading on two set lines, paragraph on three (founder, 8 Nov 2026) */
@media (min-width: 900px) { .journey__line { white-space: nowrap; } }
.timeline { margin: var(--space-7) 0 42px; }   /* half the old gap to steps 1-5 (founder, 8 Nov 2026) */
.timeline__track { position: relative; }
.timeline__bar {
  position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 9px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}
/* The line grows from Grade 9 to the first day on campus, stop by stop (assets/js/site.js sets --p, 0 to 1, and
   marks each stop .is-reached as the line gets there). Without JavaScript the whole plan shows, filled. */
.timeline__fill { position: absolute; inset: 0; background: var(--signature); transform-origin: left; }
.js .timeline__fill { transform: scaleX(var(--p, 0)); transition: transform 1200ms linear; }
.timeline__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-3); }
.timeline__stops > li { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 2px; }
.timeline__dot {
  width: 21px; height: 21px; border-radius: 50%; background: var(--color-white);
  border: 3px solid var(--line); margin-bottom: var(--space-3); position: relative; z-index: 1;
  transition: background-color 250ms, border-color 250ms;
}
.timeline__stops > li.is-reached .timeline__dot, html:not(.js) .timeline__dot { background: var(--signature); border-color: var(--signature); }
.timeline__stops .is-goal .timeline__dot::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px;
  background: var(--color-gold); transform: rotate(45deg);
}
.timeline__milestone { font: 400 var(--fs-h4)/1.25 var(--font-display); color: var(--text-heading); }
.timeline__details { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-secondary); }
.js .timeline__stops > li:not(.is-reached) .timeline__details { opacity: 0; transform: translateY(4px); }
.js .timeline__details { transition: opacity 600ms, transform 600ms; }
@media (min-width: 1024px) { .steps--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .js .timeline__fill, .js .timeline__details, .timeline__dot { transition: none; }
}

/* Concierge advising: the page's one dark band (founder, 9 Nov 2026). The text and the counselor on the left; on
   the right a chart of the eight services as lanes from Grade 6 to the first day on campus, each starting when that
   service begins. Fits one 13-15 inch laptop screen. */
#concierge.section { padding-block: var(--space-7); }
.concierge__grid { display: grid; gap: var(--space-7); }
.concierge__text { display: grid; gap: var(--space-4); justify-items: start; }
.concierge__text .lead { margin: 0; color: var(--color-white); }
.concierge__counselor { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-gold); background: rgba(255, 255, 255, 0.06); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-small); line-height: 1.5; color: var(--color-sky); }
.concierge__counselor strong { color: var(--color-white); }
@media (min-width: 1024px) {
  .concierge__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: var(--space-8); }
}

/* The distance chart. Lanes sit on a nine-stage track; --from and --to place each bar. */
.dist { margin: 0; --label: 220px; --stages: 9; }
.dist__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dist__head { display: grid; grid-template-columns: var(--label) repeat(var(--stages), minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 6px; margin-bottom: var(--space-3); }
.dist__phase { grid-row: 1; grid-column: calc(var(--from) + 2) / calc(var(--to) + 2); font-size: 0.75rem; font-weight: 700; color: var(--color-sky); padding: 0 6px 4px; border-bottom: 1px solid rgba(220, 230, 242, 0.35); margin: 0 3px; }
.dist__stage { grid-row: 2; grid-column: calc(var(--i) + 2); text-align: center; font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.dist__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dist__row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); align-items: center; min-height: 40px; border-radius: var(--radius-sm); }
.dist__name { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); font-weight: 600; color: var(--color-white); }
.dist__name .icon { width: 22px; height: 22px; flex: none; color: var(--color-sky); }
.dist__track { position: relative; height: 40px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px calc(100% / var(--stages))); border-radius: var(--radius-sm); }
.dist__bar { position: absolute; top: 12px; height: 16px; left: calc(100% * var(--from) / var(--stages)); width: calc(100% * (var(--to) - var(--from)) / var(--stages)); background: var(--color-sky); border-radius: 999px; transform-origin: left center; }
.dist__bar::before { content: ""; position: absolute; left: -4px; top: 4px; width: 8px; height: 8px; background: var(--color-gold); transform: rotate(45deg); }
.dist__row--summers .dist__bar { --seg: calc(100% / (var(--to) - var(--from))); background: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) * 0.55), var(--color-sky) calc(var(--seg) * 0.55) calc(var(--seg) * 0.97), transparent calc(var(--seg) * 0.97) var(--seg)); }
.dist__span { grid-column: 2; font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.75); }
.dist__row:hover .dist__bar { background-color: var(--color-white); }
.dist__row--summers:hover .dist__bar { filter: brightness(1.15); }
@media (min-width: 768px) { .dist__span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279px) { .dist { --label: 190px; } }
/* One moment of motion: the lanes run out from where each service starts, once, when the chart comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .dist:not(.is-in) .dist__bar { transform: scaleX(0); }
  .js .dist .dist__bar { transition: transform 0.9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--from) * 110ms); }
}

/* The family report: the sister site's report card with five headings. */
.family-report__second { border-top: 1px solid var(--line); }
@media (min-width: 768px) { .family-report__second { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.family-report p { margin: 0; }
.family-report__stage { margin-bottom: var(--space-2) !important; }
.family-report__list { display: grid; gap: var(--space-2); }
.family-report__list div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); }
.family-report__list dt { font-weight: 700; color: var(--signature); }
.family-report__list dd { margin: 0; display: block; }
.family-report__dates { grid-template-columns: 1fr !important; }
.family-report__items { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-2); }
.family-report__items li::marker { color: var(--signature); }

/* Led by Augusto Neto: this site's photo is already cropped, so no zoom. */
.founder__photo img { transform: none; object-position: center center; }
.record { margin-top: var(--space-6); max-width: 70ch; }
.record__figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.record__figure { margin: 0; font: 400 var(--fs-stat, clamp(2.75rem, 2.3rem + 1.6vw, 3.5rem))/1 var(--font-display); color: var(--signature); font-variant-numeric: tabular-nums; }
.record__label { margin: var(--space-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.record__line { margin: var(--space-5) 0 var(--space-1); font-weight: 600; }
.record__caption { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); font-style: italic; }

/* In the media: interview and quote side by side, then a row of short videos. */
.media__grid { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 1024px) { .media__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } }
.media__interview {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-5); align-items: center;
  text-decoration: none; color: var(--text-primary); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4);
}
.media__interview img { width: 150px; height: 220px; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius-sm); }
.media__interview-text { display: grid; gap: var(--space-2); }
.media__kicker { font-size: var(--fs-caption); color: var(--text-secondary); letter-spacing: 0.02em; }
.media__title { font: 400 var(--fs-h3)/1.3 var(--font-display); color: var(--text-heading); }
.media__watch { font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.media__interview:hover { border-color: var(--signature); }
.media__quote {
  margin: 0; background: var(--color-ivory); border-top: 3px solid var(--color-gold); border-radius: var(--radius-md);
  padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start;
}
.media__quote blockquote { margin: 0; }
.media__quote blockquote p:first-child { font: 400 var(--fs-h3)/1.35 var(--font-display); color: var(--text-heading); margin: 0; }
.media__quote figcaption { font-size: var(--fs-small); font-weight: 600; }
.media__quote a { font-size: var(--fs-small); font-weight: 700; }

/* Consultation form: the level groups, the error summary and the honeypot. */
.booking__lead { margin: var(--space-4) 0 0; max-width: 34em; }
.form__level { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Compact form (founder, 8 Nov 2026): the level's details, email and WhatsApp read as one two-column table. */
.form__level .form__grid { margin-bottom: var(--space-5); }
.form__level[hidden] { display: none; }
@media (min-width: 640px) { .checks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.form__level-title { font-weight: 700; padding: 0; margin-bottom: var(--space-3); }
.form__summary {
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--error);
  background: var(--color-white); color: var(--error); font-weight: 600;
}
.form__send-error { color: var(--error); font-weight: 600; }
.form__pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Awards sit under the photo on desktop, beside the bio and record (founder, 8 Nov 2026). */
.founder__media .founder__awards { margin-top: var(--space-5); padding-top: 0; border-top: 0; }
@media (min-width: 1024px) {
  .founder__media .founder__awards .highlights { grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0; }
  .founder__media .founder__awards .highlights li { padding-left: 0; font-size: var(--fs-caption); line-height: 1.35; }
  .founder__media .founder__awards .highlights li::before { display: none; }
}

/* Hero, desktop: the logo sits at the top of its column, the map's first row of diamonds level
   with the eyebrow, and the founder line is centered under it (founder, 8 Nov 2026).
   The map starts 3.3% of the logo's width below the top of the logo file. */
@media (min-width: 900px) {
  .hero__grid { align-items: start; }
  .hero__brand {
    position: static; min-height: 0; display: flex; flex-direction: column; align-items: center;
    --logo-w: min(100%, 340px);
  }
  .hero__brand > img {
    position: static; width: var(--logo-w); height: auto; object-fit: initial;
    margin-top: calc(var(--fs-eyebrow) * 0.3 - 340px * 0.033);
  }
  .hero__brand .hero__founder { margin-top: var(--space-6); justify-content: center; text-align: center; max-width: 340px; }
}
/* Phones and tablets: the founder line is centered under the logo too. */
.hero__brand { text-align: center; }
.hero__brand .hero__founder { justify-content: center; }

/* The founder line under the logo: two fixed lines (founder, 8 Nov 2026). */
.hero__founder-line { display: block; white-space: nowrap; }
@media (min-width: 900px) { .hero__brand .hero__founder { max-width: none; } }

/* Where students go: the animated universities map (founder, 8 Nov 2026). */
.dest-head { display: grid; gap: var(--space-3); }
.dest-head .lead { margin: 0; }
@media (min-width: 900px) { .dest-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-7); } }
.dest-map-figure { margin: var(--space-6) 0 0; }
.dest-map { max-width: 1040px; margin: 0 auto; }
.dest-map svg, .dest-map img { display: block; width: 100%; height: auto; }
.dest-map__caption {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  max-width: 1040px; margin: var(--space-4) auto 0; font-size: var(--fs-small); color: var(--text-secondary);
}
.dest-map__toggle {
  flex: none; font: 600 var(--fs-caption)/1 var(--font-body); color: var(--link);
  background: none; border: 1px solid var(--line); border-radius: var(--radius-button);
  padding: var(--space-2) var(--space-3); min-height: 32px; cursor: pointer;
}
.dest-map__toggle:hover { border-color: var(--signature); }

/* ---- Hero, layout A (founder, 8 Nov 2026): "Where our students go" sits inside the hero. ----
   The main button and a See how it works link under the founder line; the lead on three set lines; the map under
   the lead; the logo strip and its title under the brand column. assets/js/hero.js places the map, the strip and
   its title by measuring the map (desktop only); these rules are its starting point and the fallback without it. */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: var(--space-5); }
.hero__how { font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; padding: 12px 0; }
.hero__how:hover { text-decoration-thickness: 2px; }
.hero-dest { margin-top: 12px; --map-right: 0px; }
.hero-dest__figure { margin: 0; }
.hero-dest .dest-map { width: 499px; max-width: 100%; margin: 0; }
.hero-dest .dest-map:focus-visible, .admits__viewport:focus-visible { outline: 2px solid var(--signature); outline-offset: 4px; }
.hero-dest [data-dest-map-toggle] { display: none !important; }   /* hover, focus or tap pauses the map (hero.js) */
/* The logo strip pauses on hover (above), on keyboard focus and after a tap on touch screens. */
.admits__viewport:focus-within .admits__track, .admits__viewport.is-held .admits__track { animation-play-state: paused; }
@media (min-width: 1280px) { .hero__lead-line { display: block; white-space: nowrap; } }   /* three set lines where they fit */
/* Founder, 14 Nov 2026: the lead is set on three lines from 1280px. Its middle line is the longest (753px at 21px), so
   the lead loses its 34em cap, drops to 20px (717px) and the column gap narrows to 48px: the text column is then
   723px at 1280 and 733px at 1470, and the line always fits. */
@media (min-width: 1280px) {
  .hero__grid { gap: 48px; }
  .hero__text .hero__lead { max-width: none; font-size: 20px; }
}
@media (min-width: 900px) {
  #top.hero { padding-top: 36px; padding-bottom: 32px; }   /* hero, map and strip on one 13–15 inch laptop screen */
  .hero-dest { display: flex; align-items: flex-start; justify-content: flex-end; }
  .hero-dest__figure { flex: none; margin-right: var(--map-right, 0px); }
  .hero .admits { margin-top: 12px; }
  .hero .admits__title { margin: var(--space-3) 0 0; }
  /* Five equal slots across the strip: five logos in view at a time. */
  .hero .admits__list { gap: 0; padding-right: 0; }
  .hero .admits__list li { flex: none; width: var(--slot, 166px); display: flex; justify-content: center; }
  .hero .admits__list img { height: calc(var(--h, 40px) * 0.8); max-width: calc(var(--slot, 166px) - 28px); object-fit: contain; }
}

/* Guidance for the whole journey: half the usual space above its heading and below its cards (founder, 8 Nov 2026). */
#services { padding-top: calc(var(--section-y) / 2); padding-bottom: calc(var(--section-y) / 2); }
/* …and half the space between the dividing line and Postgraduate studies. */
/* …and half the space between that band and the plan section. */
#plan { padding-top: calc(var(--section-y) / 2); }

/* Steps 1-5: no lone word on the last line where the browser can help (founder, 8 Nov 2026). */
.step p { text-wrap: pretty; }

/* Any curriculum, either school calendar (founder, 8 Nov 2026): beside the plan's heading on laptops, under it on
   smaller screens. Tile color says the kind: Ivory national and local, Powder Sky international programs. */
.journey__head { display: grid; gap: var(--space-6); }
.journey__text { display: grid; gap: var(--space-3); }
.curricula { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); background: var(--color-white);
  border: 1px solid var(--line); border-top: 3px solid var(--color-gold); border-radius: 8px; }
.curricula h3 { margin: 0; font: 700 1.0625rem/1.3 var(--font-body); color: var(--text-heading); }
.curricula__key { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-caption); color: var(--text-secondary); }
.curricula__keyitem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.curricula__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); }
.curricula__swatch--national, .curricula__item--national { background: var(--color-ivory); }
.curricula__swatch--international, .curricula__item--international { background: var(--color-sky); }
.curricula__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.curricula__item { padding: 5px 10px; border-radius: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--text-heading); line-height: 1.3; }
.curricula__item--other { background: none; border: 1px dashed var(--line); font-weight: 500; color: var(--text-secondary); }
@media (min-width: 1100px) {
  .journey__head { max-width: none; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-8); align-items: start; }
}


/* FAQ questions set on two lines where the founder asked (8 Nov 2026). */
.faq__line { display: block; }

/* ---- Led by Augusto Neto as one file (founder, 8 Nov 2026) ----
   Photo and awards in the left column, which stays in view on laptops; bio, record, credentials and the media
   run down the right column. Space and subheadings separate the groups; no dividing lines. */
.founder .credentials { margin-top: var(--space-7); }
.founder__press { margin-top: var(--space-7); }
.founder__subhead { font-size: var(--fs-h4); margin: 0; }
.founder__press .media__grid { margin-top: var(--space-4); }
@media (min-width: 1024px) {
  .founder__media { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* ---- Families always know where things stand (founder, 8 Nov 2026) ----
   What the student portfolio holds, in six icon tiles, beside a miniature of the sample portfolio that opens it.
   The whole section fits one screen on a 13-15 inch laptop. */
#reports.section { padding-block: var(--space-7); }
.pf { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) { .pf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); } }
.pf__lead { margin-top: var(--space-3); max-width: 40em; }
.pf-tiles { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-tile { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.pf-tile .plan__badge { width: 36px; height: 36px; flex: none; }
.pf-tile .plan__badge .icon { width: 20px; height: 20px; }
.pf-tile h3 { font-size: var(--fs-small); line-height: 1.3; margin: 0; }
.pf-tile p { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-secondary); margin: 2px 0 0; }
.pf__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
.pf__note { font-size: var(--fs-caption); color: var(--text-secondary); margin: 0; }

/* The miniature: a real glimpse of the sample portfolio, and a link to it. */
.pf-window { display: grid; gap: 0; background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; color: var(--text-primary); text-decoration: none; box-shadow: 0 18px 40px -24px rgba(15, 42, 74, 0.35); transition: transform .2s, box-shadow .2s; }
.pf-window:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -22px rgba(15, 42, 74, 0.4); }
@media (prefers-reduced-motion: reduce) { .pf-window, .pf-window:hover { transition: none; transform: none; } }
.pf-window > span { display: block; padding: var(--space-3) var(--space-4); }
.pf-window > .pf-window__bar { display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--line); }
.pf-window__bar img { height: 20px; width: auto; }
.pf-window__bar span { font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); padding-left: var(--space-3); border-left: 1px solid var(--line); }
.pf-window > .pf-window__profile { display: flex; align-items: center; gap: var(--space-3); background: var(--color-sky); }
.pf-window__avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-navy); color: var(--color-white); font: 400 1.125rem/1 var(--font-display); border: 2px solid var(--color-gold); }
.pf-window__name { display: block; font: 400 1.375rem/1.1 var(--font-display); color: var(--text-heading); }
.pf-window__school { display: block; font-size: var(--fs-caption); color: var(--text-secondary); }
.pf-window__label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--color-navy); }
.pf-window__milestone { display: block; font: 400 1.0625rem/1.3 var(--font-display); color: var(--text-heading); margin-top: 2px; }
.pf-journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--space-3); position: relative; }
.pf-journey::before { content: ""; position: absolute; left: 8%; right: 8%; top: 5px; height: 2px; background: var(--line); }
.pf-journey span { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 0.6875rem; line-height: 1.2; color: var(--text-secondary); text-align: center; }
.pf-journey span::before { content: ""; width: 10px; height: 10px; transform: rotate(45deg); background: var(--color-white); border: 2px solid var(--color-pebble); }
.pf-journey .is-done::before { background: var(--success); border-color: var(--success); }
.pf-journey .is-now { color: var(--text-heading); font-weight: 700; }
.pf-journey .is-now::before { background: var(--color-gold); border-color: var(--color-gold); }
.pf-window > .pf-window__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-top: 0; }
.pf-mini { display: block; background: var(--color-ivory); border-radius: var(--radius-sm); padding: var(--space-3); }
.pf-mini__big { display: block; font: 400 1.375rem/1.2 var(--font-display); color: var(--text-heading); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pf-mini__sub { display: block; font-size: 0.75rem; color: var(--text-secondary); }
.pf-window__report { border-top: 3px solid var(--color-gold); }
.pf-window__title { display: block; font-weight: 700; font-size: var(--fs-small); line-height: 1.35; margin-top: 2px; }
.pf-window__next { display: block; font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 2px; }

/* Sample portfolio after the form (founder, 9 Nov 2026): a note above the form, and the move on from the thank-you page. */
.form__sample-note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-gold); background: var(--color-sky); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-weight: 600; font-size: var(--fs-small); color: var(--text-heading); }
/* Anything marked hidden stays hidden, even when its class sets display (founder, 10 Nov 2026). */
[hidden] { display: none !important; }
.to-sample { margin-top: var(--space-6); display: grid; gap: var(--space-3); justify-items: start; }
.to-sample__line { margin: 0; font-weight: 700; color: var(--signature); }

/* Postgraduate studies (founder, 9 Nov 2026): two columns that fit one 13-15 inch screen. The heading, intro, test
   note and button on the left; the four program types as icon tiles and what we help with on the right. */
#postgraduate.section { padding-block: var(--space-7); }
.postgrad__grid { display: grid; gap: var(--space-6); }
.postgrad__grid .postgrad__head { max-width: none; justify-items: start; gap: var(--space-4); }
.postgrad__grid .postgrad__head .eyebrow { margin: 0; }
.postgrad__grid .postgrad__note { max-width: 40rem; }
.postgrad__grid .postgrad__tiles { margin: 0; display: grid; gap: var(--space-3); list-style: none; padding: 0; }
@media (min-width: 640px) { .postgrad__grid .postgrad__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.postgrad__grid .postgrad__tiles .pg-tile { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); }
.pg-tile__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-navy); }
.pg-tile__icon .icon { width: 22px; height: 22px; color: var(--color-white); }
.postgrad__grid .postgrad__tiles h3 { margin: 0 0 4px; }
.postgrad__grid .postgrad__help { margin-top: var(--space-5); }
.postgrad__grid .postgrad__help .diamond-list { gap: var(--space-2) var(--space-5); }
.postgrad__grid .postgrad__help li { font-size: var(--fs-small); }
@media (min-width: 1024px) {
  .postgrad__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; }
}
/* Postgraduate tiles on natural set lines (founder, 9 Nov 2026). The script sets them only while every line fits
   on one row; on narrower tiles, larger text or zoom, the text wraps on its own, without a lone last word. */
.pg-tile p { text-wrap: pretty; }
.pg-tile p.is-set .pg-line { display: block; }

/* ---- Global School Partners hero: the shared admissions map (spec §5.2), placed by CSS. ---- */
.hero__grid > * { min-width: 0; }
.hero-dest .admissions-map { width: 100%; max-width: 560px; margin: 0; border-radius: var(--radius-md); }
.hero-dest .admissions-map:focus-visible { outline: 2px solid var(--signature); outline-offset: 4px; }
@media (min-width: 900px) {
  .hero-dest { display: flex; justify-content: flex-end; margin-top: 0; }
  .hero__text .hero__lead { margin-bottom: var(--space-4); }
}

/* ---- Why schools call us (spec §5.3) ---- */
.why { display: grid; gap: var(--space-7); }
.why__figures-title { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-secondary); margin: 0 0 var(--space-4); }
.figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.figure { background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); display: grid; align-content: start; gap: var(--space-2); }
.figure__num { font-family: var(--font-display); font-size: clamp(2.75rem, 2.2rem + 1.4vw, 3.5rem); line-height: 1; color: var(--signature); }
.figure__label { font-size: var(--fs-small); color: var(--text-secondary); line-height: var(--lh-small); }
.why__record { margin: var(--space-5) 0 var(--space-1); }
.why__caption { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); font-style: italic; }
@media (min-width: 768px) { .figures { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---- What we do for schools (spec §5.4) ---- */
.pillar__icon { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--signature-tint); align-items: center; justify-content: center; color: var(--signature); margin-bottom: var(--space-3); }
.pillar__icon .icon { width: 26px; height: 26px; }
.pillar__link { font-weight: 600; color: var(--link); text-underline-offset: 4px; }
.pillar__link--strong { font-size: var(--fs-h4); }
.diamond-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.diamond-list li { position: relative; padding-left: 20px; }
.diamond-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; background: var(--color-gold); transform: rotate(45deg); }
/* Founder, 14 Nov 2026 (option B): the four services as one list, one open at a time; fits one laptop screen.
   Without JavaScript every panel shows. */
#services.section { padding: 32px 0; }
.svc { display: grid; gap: 24px; }
.svc h2 { margin: 0 0 10px; text-wrap: balance; }
.svc .eyebrow::after { margin: 8px 0 12px; }
.svc__intro { margin: 0 0 14px; font-size: var(--fs-lead); line-height: 1.5; max-width: 30em; }
/* Two maps in one place: the open service decides which shows (founder, 14 Nov 2026). Without JavaScript both show. */
.svc-maps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 4px; min-width: 0; }
.svc-map { min-width: 0; }
.svc-map .admits__viewport { overflow: hidden; }
.svc-map .training-map { display: block; width: 100%; height: auto; }
/* Each map carries a caption in the same style, on the same line at the bottom (founder, 14 Nov 2026). */
.svc-map[data-map="training"] { display: flex; flex-direction: column; }
.svc-map__caption { margin: auto 0 0; padding-top: 8px; font-size: var(--fs-small); font-weight: 700; color: var(--text-secondary); text-align: center; }
.svc-map .admits { margin-top: 6px; }
.svc-map .admits__title { margin: 8px 0 0; text-align: center; }
.svc-map .admits__list { gap: var(--space-6); padding-right: var(--space-6); }
.svc-map .admits__list img { height: calc(var(--h, 40px) * 0.7); }
html.js .svc-maps { gap: 0; }
html.js .svc-map { grid-area: 1 / 1; transition: opacity .35s ease, visibility .35s; }
html.js .svc-maps[data-show="dest"] .svc-map[data-map="training"],
html.js .svc-maps[data-show="training"] .svc-map[data-map="dest"] { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { html.js .svc-map { transition: none; } }
.svc__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.svc-item { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); }
.svc__list.is-ready .svc-item { transition: flex-grow .4s ease, background-color .25s; }
/* Nothing open: the four rows share the column's height (founder, 14 Nov 2026); opening one tightens them around it. */
html.js .svc__list.is-idle .svc-item { flex-grow: 1; }
/* A colour per service (founder, 14 Nov 2026, look 3), from the family palette with Navy leading. The colour carries
   the solid icon disc, the name, the rule on the open service and a light wash behind it; the diamonds stay gold. */
.svc-item { --svc: var(--signature); transition: background-color .25s; }
.svc-item[data-color="navy"] { --svc: #1C4B82; }
.svc-item[data-color="teal"] { --svc: #0F6E6E; }
.svc-item[data-color="amethyst"] { --svc: #7A45A6; }
.svc-item[data-color="midnight"] { --svc: #0F2A4A; }
.svc-item .svc-item__icon { width: 44px; height: 44px; background: var(--svc); color: var(--color-white); }
.svc-item .svc-item__icon .icon { width: 22px; height: 22px; stroke: var(--color-white); }
.svc-item .svc-item__name, .svc-item .svc-item__head button:hover .svc-item__name { color: var(--svc); }
html.js .svc-item .svc-item__chev { border-color: var(--svc); }
html.js .svc__list .svc-item.is-open .svc-item__head button { border-left-color: var(--svc); }
html.js .svc-item.is-open { background: color-mix(in srgb, var(--svc) 7%, #fff); }
.svc-item .svc-item__panel .pillar__link { color: var(--svc); }
html.js .svc-item.is-open .svc-money { background: var(--color-white); border-left-color: var(--svc); }
@media (prefers-reduced-motion: reduce) { .svc__list.is-ready .svc-item { transition: none; } }
.svc-item__head { margin: 0; font: inherit; }
.svc-item__head button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 4px 10px 14px; border-left: 3px solid transparent; }
.svc-item__head button:focus-visible { outline: 2px solid var(--signature); outline-offset: 2px; }
html.js .svc-item.is-open .svc-item__head button { border-left-color: var(--color-gold); }
.svc-item__icon { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--signature-tint); color: var(--signature); align-items: center; justify-content: center; flex: none; }
.svc-item__icon .icon { width: 21px; height: 21px; }
.svc-item__text { display: grid; gap: 2px; }
.svc-item__name { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); color: var(--text-heading); }
.svc-item__promise { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.svc-item__head button:hover .svc-item__name { color: var(--signature); }
.svc-item__chev { display: none; }
html.js .svc-item__chev { display: block; width: 9px; height: 9px; border-right: 2px solid var(--signature); border-bottom: 2px solid var(--signature); transform: rotate(45deg); margin: 0 8px 4px; transition: transform .2s; }
html.js .svc-item.is-open .svc-item__chev { transform: rotate(225deg); margin-bottom: -4px; }
html.js .svc-item:not(.is-open) .svc-item__panel { display: none; }
.svc-item__panel { padding: 0 8px 12px 71px; }
.svc-item__panel .diamond-list { gap: 6px 24px; margin: 0; }
@media (min-width: 768px) { .svc-item__panel .diamond-list:not(.diamond-list--rows) { grid-template-columns: 1fr 1fr; } }
.svc-item__panel .diamond-list strong { color: var(--text-heading); }
.svc-item__cta { margin: 10px 0 0; }
/* International tracks: the revenue highlight takes the link's place; the link sits to its right (founder, 14 Nov 2026). */
.svc-item__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 12px; }
.svc-item__foot .svc-item__cta { margin: 0; }
.svc-money { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: var(--color-sky); border-left: 3px solid var(--color-gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.3; color: var(--color-midnight); flex: 1 1 260px; max-width: 30em; }
.svc-money__icon { display: inline-flex; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--color-white); color: var(--signature); align-items: center; justify-content: center; }
.svc-money__icon .icon { width: 17px; height: 17px; }
@media (max-width: 767px) { .svc-item__panel { padding-left: 17px; } }
@media (prefers-reduced-motion: reduce) { html.js .svc-item__chev { transition: none; } }
/* 5.3 / 6.7 so the intro sits on two lines from 1280px (founder, 14 Nov 2026). */
@media (min-width: 900px) { .svc { grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr); column-gap: 48px; align-items: start; } }

/* International tracks (founder, 14 Nov 2026): the current pathway runs straight; the tracks branch off and run alongside. */
.tracks.section { padding: 32px 0; }
.tracks__grid { display: grid; gap: 28px; }
.tracks h2 { margin: 0 0 10px; }
.tracks .eyebrow::after { margin: 8px 0 12px; }
.tracks__intro { margin: 0 0 12px; font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.tracks__why-title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; }
.tracks__points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.tracks__points li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.tracks__points .svc-item__icon { background: var(--color-white); }
.tracks__points h4 { margin: 2px 0; font-size: var(--fs-h4); }
.tracks__points p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.tracks__cta { margin: 0; }
@media (min-width: 900px) { .tracks__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: center; } }
/* The benefits card ends level with the chart (founder, 15 Nov 2026). */
@media (min-width: 900px) { .tracks__why { align-self: end; } }
/* International tracks chart (founder, 14 Nov 2026): the school is the starting point; a trunk carries four branches,
   each a country (with its flag; the IB with a globe) and the pathways we can implement there. With JavaScript and motion
   allowed the branches appear one at a time, the first time the chart comes into view; otherwise the chart is simply there. */
.tracks-chart { margin: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 30px; align-items: center; background: var(--color-white); border-radius: var(--radius-md); padding: 18px 20px; }
.tracks-chart__start { position: relative; text-align: center; }
.tracks-chart__start::after { content: ""; position: absolute; left: calc(100% + 0px); top: 26px; width: 30px; height: 2px; background: var(--signature); }
.tracks-chart__start-icon { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: var(--signature); color: var(--color-white); align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--color-sky); }
.tracks-chart__start-icon .icon { width: 26px; height: 26px; stroke: var(--color-white); }
.tracks-chart__start-title { margin: 10px 0 2px; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.2; color: var(--text-heading); }
.tracks-chart__start-note { margin: 0; font-size: var(--fs-caption); line-height: 1.35; color: var(--text-secondary); }
.tracks-chart__rows { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; display: grid; gap: 12px; }
.tracks-chart__rows::before { content: ""; position: absolute; left: 0; top: var(--trunk-top, 14px); bottom: var(--trunk-bottom, 14px); width: 2px; background: var(--signature); transform-origin: center; }
.tracks-chart__row { position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.tracks-chart__row::before { content: ""; position: absolute; left: -26px; top: 50%; width: 22px; height: 2px; background: var(--signature); transform-origin: left center; }
.tracks-chart__row::after { content: ""; position: absolute; left: -5px; top: calc(50% - 3px); width: 8px; height: 8px; background: var(--color-gold); transform: rotate(45deg); }
.tracks-chart__country { display: inline-flex; align-items: center; gap: 9px; padding-left: 12px; font-weight: 700; font-size: var(--fs-small); color: var(--text-heading); line-height: 1.2; }
.tracks-chart__flag { flex: none; display: block; width: 32px; height: 16px; background: none; }
/* One track or several (founder, 14 Nov 2026): a closing line under the branches. */
.tracks-chart__note { grid-column: 2; margin: 12px 0 0; padding-left: 26px; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; color: var(--signature); }
@media (max-width: 599px) { .tracks-chart__note { grid-column: 1; padding-left: 0; } }
.tracks-chart__globe { flex: none; display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--signature); align-items: center; justify-content: center; }
.tracks-chart__globe .icon { width: 18px; height: 18px; stroke: var(--color-white); }
.tracks-chart__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Pathway names as plain text (founder, 14 Nov 2026): no pill behind them. */
.tracks-chart__chip { padding: 0; color: var(--text-primary); font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; white-space: nowrap; }
@media (max-width: 599px) { .tracks-chart__chips { gap: 4px 16px; padding-left: 12px; } }
@media (max-width: 599px) {
  .tracks-chart { grid-template-columns: 1fr; row-gap: 22px; padding: 16px; }
  .tracks-chart__start { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left; }
  .tracks-chart__start-icon { grid-row: span 2; }
  .tracks-chart__start-title { margin: 0; }
  .tracks-chart__start::after { left: 25px; top: 100%; width: 2px; height: 22px; }
  .tracks-chart__row { grid-template-columns: 1fr; row-gap: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tracks-chart--wait .tracks-chart__rows::before { transform: scaleY(0); }
  .tracks-chart--wait .tracks-chart__row::before { transform: scaleX(0); }
  .tracks-chart--wait .tracks-chart__row::after, .tracks-chart--wait .tracks-chart__country, .tracks-chart--wait .tracks-chart__chip, .tracks-chart--wait .tracks-chart__note { opacity: 0; }
  .tracks-chart--play .tracks-chart__note { animation: tc-rise .45s ease-out both; animation-delay: 4.35s; }
  .tracks-chart--play .tracks-chart__rows::before { animation: tc-trunk .5s ease-out both; }
  .tracks-chart--play .tracks-chart__row::before { animation: tc-tick .35s ease-out both; animation-delay: calc(.45s + var(--i) * .95s); }
  .tracks-chart--play .tracks-chart__row::after { animation: tc-fade .3s ease-out both; animation-delay: calc(.6s + var(--i) * .95s); }
  .tracks-chart--play .tracks-chart__country { animation: tc-rise .4s ease-out both; animation-delay: calc(.65s + var(--i) * .95s); }
  .tracks-chart--play .tracks-chart__chip { animation: tc-rise .35s ease-out both; animation-delay: calc(.85s + var(--i) * .95s + var(--j) * .09s); }
}
@keyframes tc-trunk { from { transform: scaleY(0); } }
@keyframes tc-tick { from { transform: scaleX(0); } }
@keyframes tc-fade { from { opacity: 0; } }
@keyframes tc-rise { from { opacity: 0; transform: translateY(6px); } }
/* Family tree (founder, 14 Nov 2026): from 600px the school sits at the top, a horizontal bar runs under it and the
   four branches drop from the bar into columns, each with its flag (or globe), name and pathways. Phones keep the side trunk. */
@media (min-width: 600px) {
  .tracks-chart__rows { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 22px 0 0; }
  .tracks-chart { grid-template-columns: 1fr; row-gap: 0; padding: 10px 14px 10px; }
  .tracks-chart__start { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; padding-bottom: 16px; }
  .tracks-chart__start-icon { width: 46px; height: 46px; box-shadow: 0 0 0 5px var(--color-sky); }
  .tracks-chart__start-title { margin: 0; }
  .tracks-chart__start::after { left: 50%; top: auto; bottom: 0; width: 2px; height: 16px; margin-left: -1px; }
  .tracks-chart__rows::before { top: 0; bottom: auto; left: 12.5%; right: 12.5%; width: auto; height: 2px; transform-origin: center; }
  .tracks-chart__row { grid-template-columns: 1fr; row-gap: 8px; align-content: start; justify-items: center; text-align: center; }
  .tracks-chart__row::before { left: 50%; top: -22px; width: 2px; height: 18px; margin-left: -1px; transform-origin: center top; }
  .tracks-chart__row::after { left: calc(50% - 4px); top: -6px; }
  .tracks-chart__country { flex-direction: column; gap: 6px; padding-left: 0; padding-top: 6px; }
  .tracks-chart__chips { flex-direction: column; align-items: center; gap: 4px; }
  .tracks-chart__chip { white-space: normal; text-align: center; max-width: 100%; padding: 0; background: none; border-radius: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--text-primary); }
  .tracks-chart__chips { gap: 7px; }
  .tracks-chart__note { grid-column: 1; padding-left: 0; text-align: center; margin-top: 10px; }
}
@media (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  .tracks-chart--wait .tracks-chart__rows::before { transform: scaleX(0); }
  .tracks-chart--wait .tracks-chart__row::before { transform: scaleY(0); }
  .tracks-chart--play .tracks-chart__rows::before { animation-name: tc-bar; }
  .tracks-chart--play .tracks-chart__row::before { animation-name: tc-drop; }
}
@keyframes tc-bar { from { transform: scaleX(0); } }
@keyframes tc-drop { from { transform: scaleY(0); } }


/* ---- Build your school's package: the Midnight band (spec §5.5) ---- */
.btn--white { color: var(--signature); }
.section--dark .lead, .section--dark p { color: var(--color-white); }
/* Outsourced counseling (founder, 15 Nov 2026, option A): three light sections. Colour says who is who: Navy is us and
   what the school pays for, Sky is your own team, gold marks what families add; teal and amethyst are the two brands.
   1. Overview (white): the two ways of working, each with a bar showing who leads over time. */
#package.pk { padding: 32px 0; }
.pk__grid { display: grid; gap: 32px; }
/* The left column is wide enough for the intro's three set lines at 1280px (founder, 15 Nov 2026). */
@media (min-width: 900px) { .pk__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); column-gap: 56px; align-items: center; } }
.pk h2, .pk-lv h2, .pk-ad h2 { margin: 0 0 10px; text-wrap: balance; }
.pk .eyebrow::after, .pk-lv .eyebrow::after, .pk-ad .eyebrow::after { margin: 8px 0 12px; }
.pk__intro { margin: 0 0 20px; font-size: var(--fs-lead); line-height: 1.5; }
.pk-by { margin: 0 0 8px; font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); }
.pk-brands { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pk-brand { display: grid; gap: 4px; justify-items: start; padding: 12px 16px 12px; border-left: 3px solid var(--b); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: color-mix(in srgb, var(--b) 7%, var(--color-white)); }
.pk-brand img { display: block; width: auto; height: 36px; max-width: 100%; margin-bottom: 4px; }
.pk-brand span { font-size: var(--fs-caption); line-height: 1.3; color: var(--text-secondary); }
.pk-brand a { font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; color: var(--b); }
.pk-brand--hea { --b: #0F6E6E; }
.pk-brand--gtps { --b: var(--brand-gtps); }
.pk__cta { margin: 0; }
.pk-models__title { margin: 0 0 12px; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.pk-model { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--color-white); }
.pk-model h4 { margin: 0; }
.pk-model p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); text-align: right; }
.pk-run { grid-column: 1 / -1; display: flex; margin-top: 12px !important; border-radius: 999px; overflow: hidden; text-align: center !important; }
.pk-run span { flex: 1; padding: 7px 8px; font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; }
.pk-run__us { background: var(--color-navy); color: var(--color-white); }
.pk-run__both { background: linear-gradient(90deg, color-mix(in srgb, var(--color-navy) 45%, var(--color-sky)), color-mix(in srgb, var(--color-navy) 15%, var(--color-sky))); color: var(--color-midnight); }
.pk-run__you { background: var(--color-sky); color: var(--color-midnight); }
/* Until your team is ready (founder, 15 Nov 2026): we lead, we train, hand over, your team leads; our support stays,
   shown as an open (dashed) segment because it is there only when needed. */
.pk-run--hand span { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
.pk-run__train { background: color-mix(in srgb, var(--color-navy) 72%, var(--color-sky)); color: var(--color-white); }
.pk-run--hand .pk-run__both { background: color-mix(in srgb, var(--color-navy) 30%, var(--color-sky)); }
.pk-run__help { background: var(--color-white); color: var(--color-navy); border: 1.5px dashed var(--color-navy); border-left: 0; border-radius: 0 999px 999px 0; padding-top: 5.5px !important; padding-bottom: 5.5px !important; }
.pk-models__note { margin: 4px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.pk-models__note a { color: var(--color-navy); font-weight: 600; }
/* 2. Levels (Sky; founder, 15 Nov 2026): four columns, each listing what it adds; the band darkens with each level as
   more of our team comes in. Two columns on mid-size screens, one on phones. */
.pk-lv.section { padding: 32px 0; }
.pk-lv__intro, .pk-ad__intro { margin: 0 0 18px; font-size: var(--fs-lead); line-height: 1.5; }
.pk-lv__cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .pk-lv__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pk-lv__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pk-level { display: flex; flex-direction: column; background: var(--color-white); border-radius: 12px; overflow: hidden; }
.pk-level__band { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 16px; }
.pk-level--1 .pk-level__band { background: color-mix(in srgb, var(--color-navy) 22%, var(--color-white)); color: var(--color-midnight); }
.pk-level--2 .pk-level__band { background: color-mix(in srgb, var(--color-navy) 45%, var(--color-white)); color: var(--color-midnight); }
.pk-level--3 .pk-level__band { background: var(--color-navy); color: var(--color-white); }
.pk-level--4 .pk-level__band { background: var(--color-midnight); color: var(--color-white); }
.pk-stop__num { font-size: var(--fs-caption); font-weight: 600; }
.pk-stop__label { font-size: var(--fs-caption); font-weight: 700; text-align: right; }
.pk-level__body { flex: 1; display: flex; flex-direction: column; padding: 12px 16px 14px; }
.pk-level__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pk-level__icon { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-sky); }
.pk-level__icon .icon { width: 17px; height: 17px; stroke: var(--color-navy); }
.pk-level h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.pk-level__line { margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.4; font-weight: 600; color: var(--text-heading); }
.pk-level__items { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.pk-level__items li { position: relative; padding-left: 14px; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-primary); }
.pk-level__items li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-navy); }
.pk-who { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0 !important; }
.pk-who em { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; background: var(--color-sky); color: var(--color-navy); }
.pk-who em.fam { background: var(--color-white); color: var(--color-midnight); box-shadow: inset 0 0 0 1px var(--line); border-left: 3px solid var(--color-gold); border-radius: 0 999px 999px 0; }
/* 3. Add-ons (Ivory): every group on show; a small gold diamond marks each thing a family can add. */
.pk-ad.section { padding: 32px 0; }
.pk-addons { display: grid; gap: 22px 24px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pk-addon-group { border-top: 3px solid var(--color-gold); padding-top: 12px; }
.pk-addon-group h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.pk-addon-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-addon-group li { position: relative; padding-left: 22px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-primary); }
.pk-addon-group li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 8px; height: 8px; background: var(--color-gold); transform: rotate(45deg); }
.pk-ad__more { margin: 18px 0 0; font-family: var(--font-display); font-size: 1.125rem; color: var(--text-secondary); }
.section--dark .eyebrow { color: var(--color-sky); }

/* ---- Every major application system (spec §5.6) ---- */
.destinations { position: relative; overflow: hidden; }
.destinations > .wrap { position: relative; }
.destinations__map { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(1100px, 95%); height: auto; pointer-events: none; opacity: .45; }
/* Application systems (founder, 15 Nov 2026): four regions side by side, each led by its dotted-map locator. The
   systems are what a school is buying, so each one is a Navy tag beside its country; countries are in Arapey. Europe has
   the most entries and runs in two columns. One screen at 1280 x 700. */
.destinations.section { padding: 32px 0; }
.destinations h2 { margin: 0 0 10px; }
.destinations .eyebrow::after { margin: 8px 0 12px; }
.destinations .lead { margin: 0 0 22px; }
.dest-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 760px) { .dest-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dest-rows { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, .95fr); column-gap: 0; } }
.dest-row { padding: 0 20px 4px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--color-white) 72%, transparent); }
.dest-row:first-child { border-left: 0; padding-left: 0; }
.dest-row__label { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; align-content: start; margin-bottom: 12px; }
@media (min-width: 1100px) { .dest-row__label { min-height: 60px; } }
.dest-row__label .icon { width: 34px; height: 34px; grid-row: span 2; }
.dest-row__region { margin: 0; font: 700 var(--fs-h4)/1.25 var(--font-body); color: var(--text-heading); }
.dest-row__how { margin: 0; font-size: var(--fs-caption); line-height: 1.35; color: var(--text-secondary); }
.dest-row__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dest-row--eu .dest-row__list { display: block; columns: 2; column-gap: 14px; }
.dest-row--eu .dest-row__list li { break-inside: avoid; margin-bottom: 7px; }
.dest-row__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.dest__name { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.2; color: var(--text-heading); }
.dest__system { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--color-navy); color: var(--color-white); font-size: var(--fs-caption); font-weight: 700; line-height: 1.45; white-space: nowrap; }
.dest__sub { flex-basis: 100%; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-secondary); }
@media (max-width: 1099px) { .dest-row { border-left: 0; padding: 0; } }


/* ---- Training delivered worldwide (spec §5.8) ---- */
.training__head { display: grid; gap: var(--space-5); align-items: center; margin-bottom: var(--space-6); }
.training__countries { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-heading); margin: var(--space-3) 0 0; }
.training-map { display: block; width: 100%; max-width: 560px; height: auto; justify-self: end; }
@media (min-width: 900px) { .training__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery__item { margin: 0; background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.gallery__item figcaption { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); line-height: var(--lh-small); }
.gallery__cta { background: var(--color-ivory); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.gallery__cta p { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-heading); }
.gallery__dots { display: none; }

/* ---- Our brands (spec §5.9): each card in its brand's own color, only here and in the footer. ---- */
.brand-cards { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .brand-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brand-card { background: var(--color-white); border: 1px solid var(--line); border-top: 3px solid; border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.brand-card img { width: auto; height: 44px; max-width: 100%; align-self: flex-start; }
.brand-card p { margin: 0; }
.brand-card__action { margin-top: auto !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.brand-card__domain { font-size: var(--fs-small); color: var(--text-secondary); }
.brand-card .btn { color: var(--color-white); }
.brand-card--gtps { border-top-color: var(--brand-gtps); }
.brand-card--gtps .btn { background: var(--brand-gtps); }
.brand-card--gtps .btn:hover { background: #6A3B91; }
.brand-card--hea { border-top-color: var(--brand-hea); }
.brand-card--hea .btn { background: var(--brand-hea); }
.brand-card--hea .btn:hover { background: #0D6161; }
/* ---- For universities and providers (spec §5.10) ---- */
.universities { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .universities { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
/* For universities and providers: parked in docs/parked/universities/ (founder, 15 Nov 2026). */

/* ---- About us and our founder (spec §5.11) ---- */
.founder__name { margin: var(--space-6) 0 var(--space-1); font-size: var(--fs-h3); }
.founder__more { margin-top: var(--space-7); }
.award-video { margin: var(--space-5) 0 0; }
.award-video video { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--color-midnight); }
.award-video figcaption { margin-top: var(--space-2); font-size: var(--fs-small); font-weight: 600; }
.published { margin-top: var(--space-7); }
.published__grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .published__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.sessions__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sessions__list li { display: grid; grid-template-columns: 5.5em 1fr; column-gap: var(--space-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.session__date { grid-row: span 2; color: var(--text-secondary); }
.session__event { font-weight: 700; }
.sessions details { margin-top: var(--space-3); }
.sessions summary { cursor: pointer; font-weight: 600; color: var(--link); margin-bottom: var(--space-3); }
.events-strip { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-secondary); }
/* ---- In the media (spec §5.12) ---- */
.media__press { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.shorts__title { margin: var(--space-7) 0 var(--space-4); font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); }
.shorts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.short { display: block; position: relative; color: var(--text-primary); text-decoration: none; }
.short img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; height: auto; border-radius: var(--radius-md); }
.short__title { display: block; margin-top: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.short:hover .short__title { text-decoration: underline; }
@media (max-width: 1023px) { .shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery > li, .shorts > li { position: relative; }

/* ---- Header and hero, option A "open masthead" (spec §5.2a, founder 14 Nov 2026) ----
   From 1280px the page opens as one element: the section links sit in the hero, and the compact header slides down,
   fixed, once the large logo has scrolled away (assets/js/hero.js adds html.hx and html.hx-on). Without the script,
   the normal sticky header stays and the hero links are not shown. */
.hero-nav { display: none; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.lang-switch a { color: var(--text-secondary); text-decoration: none; padding: 8px 2px; letter-spacing: .04em; }
.lang-switch a:hover { color: var(--signature); }
.lang-switch a[aria-current="true"] { color: var(--text-primary); font-weight: 700; }
.lang-switch__sep { color: var(--color-stone); }
/* The strip is a grid item of the hero: it takes the column's width, never its scrolling track's (phones centre items). */
#top .admits { justify-self: stretch; min-width: 0; max-width: 100%; }
@media (min-width: 900px) and (max-width: 1279px) { #top .admits { grid-column: 1 / -1; } }
@media (min-width: 1280px) {
  html.hx .site-header {
    position: fixed; left: 0; right: 0; top: 0;
    transform: translateY(-100%); visibility: hidden;
    transition: transform .28s ease-out, visibility 0s linear .28s;
  }
  html.hx.hx-on .site-header { transform: none; visibility: visible; transition: transform .28s ease-out, visibility 0s; }
  html.hx .hero-nav { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-top: 22px; }
  html.hx #top.hero { padding-top: 0; }
  .hero-nav .site-nav__links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
  .hero-nav .btn { min-height: 44px; padding: 0 var(--space-4); }

  .hero__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "brand text" "strip text";
    align-items: start; margin-top: 8px; padding-bottom: 40px; }
  .hero__brand { grid-area: brand; min-height: 0; display: flex; flex-direction: column; align-items: center; }
  .hero__brand > img { position: static; width: min(100%, 360px); height: auto; }
  .hero__brand .hero__founder { margin-top: 26px; }
  .hero__text { grid-area: text; padding-top: 28px; }
  .hero__text .hero__lead { margin-bottom: 4px; }

  /* Map 1: the admissions map fills the text column, centered under the lead. */
  .hero-dest { display: block; margin-top: 8px; }
  .hero-dest__figure { width: 100%; margin: 0; }
  .hero-dest .admissions-map { width: 100%; max-width: none; margin: 0 auto; }

  /* The universities strip under the buttons: five equal slots (hero.js sets --slot, width and left edge). */
  #top .admits { grid-area: strip; justify-self: start; position: relative; z-index: 1; margin-top: 4px; max-width: none; padding: 0; }
  #top .admits__list { gap: 0; padding-right: 0; }
  #top .admits__list li { flex: none; width: var(--slot, 120px); display: flex; justify-content: center; }
  #top .admits__list img { height: calc(var(--h, 40px) * 0.72); max-width: calc(var(--slot, 120px) - 18px); object-fit: contain; }
  #top .admits__title { margin: 14px 0 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html.hx .site-header { transition: none !important; } }
/* Portuguese headline on one line (founder, 14 Nov 2026): "Leve sua escola para o mundo" is 748px at 64px, the text
   column 723–733px, so the Portuguese page sets it at 61px from 1280px. */
@media (min-width: 1280px) { html[lang="pt-BR"] #top h1 { font-size: 61px; } }

/* ---- Why partner with us (founder, 14 Nov 2026, option A2): lead on the left, four needs with a compare switch on
   the right, the founder's figures as a slim strip that counts up once (site.js initWhy). Fits 1280x700 under the
   fixed header (<= 627px). ---- */
#why.section { padding: 32px 0; }
.why2 { display: grid; gap: 20px; }
.why2 h2 { margin: 0 0 10px; text-wrap: balance; }
.why2 .eyebrow::after { margin: 8px 0 12px; }
.why2__intro { margin: 0 0 12px; font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.why2__promise { margin: 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--signature); }
.why2__compare { display: grid; gap: 12px; align-content: start; }
.why2__switch { display: none; }
html.js .why2__switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--color-white); border: 1px solid var(--line); border-radius: 999px; justify-self: start; }
.why2__switch button { font: 600 var(--fs-small)/1 var(--font-body); padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.why2__switch button:hover { color: var(--signature); }
.why2__switch button[aria-pressed="true"] { background: var(--signature); color: var(--color-white); }
.why2__switch button:focus-visible { outline: 2px solid var(--signature); outline-offset: 2px; }
.why2__reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.why2__reason { background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-content: start; }
.why2__icon { grid-row: span 2; display: inline-flex; width: 42px; height: 42px; border-radius: 50%; background: var(--signature-tint); color: var(--signature); align-items: center; justify-content: center; }
.why2__icon .icon { width: 22px; height: 22px; }
.why2__reason h3 { margin: 2px 0 4px; font-size: var(--fs-h4); text-wrap: balance; }
.why2__reason p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
/* Founder, 14 Nov 2026 (look 1): a three-diamond score under each icon and a summary beside the switch.
   With us = Navy top border and gold diamonds; an alternative = Pebble border, graphite diamonds, its verdict large. */
.why2__summary, .why2__meter { display: none; }
.why2__bar { display: grid; gap: 8px; }
html.js .why2__summary { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.25; color: var(--signature); }
.why2__summary .icon { flex: none; width: 18px; height: 18px; }
.why2__summary strong { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; color: var(--color-midnight); }
.why2__compare.is-other .why2__summary { color: var(--text-secondary); }
/* Us versus the alternatives: ours stands alone; the two alternatives share a grey "Other routes" group after "vs". */
html.js .why2__switch { align-items: center; }
.why2__vs { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--text-secondary); padding: 0 2px; }
.why2__others { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 0 0 0 12px; border-radius: 999px; background: var(--color-stone); }
.why2__others-label { font: 600 var(--fs-caption)/1 var(--font-body); color: var(--text-secondary); margin-right: 4px; }
.why2__others button { color: var(--text-secondary); }
.why2__reason { position: relative; border-top: 3px solid var(--signature); transition: border-color .2s; }
html.js .why2__meter { display: inline-flex; gap: 5px; position: absolute; left: 31px; top: 64px; }
.why2__meter i { display: block; width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--color-pebble); box-sizing: border-box; }
.why2__meter[data-level="1"] i:nth-child(-n+1), .why2__meter[data-level="2"] i:nth-child(-n+2), .why2__meter[data-level="3"] i { background: var(--text-secondary); border-color: var(--text-secondary); }
.why2__compare:not(.is-other) .why2__meter i { background: var(--color-gold); border-color: var(--color-gold); }
.why2__compare.is-other .why2__reason { border-top-color: var(--color-pebble); }
.why2__compare.is-other .why2__icon { background: var(--color-ivory); color: var(--text-secondary); }
.why2__switch button[aria-pressed="true"]:not([data-k="us"]) { background: var(--text-secondary); }
.why2__verdict { font-family: var(--font-display); font-size: 1.375rem; color: var(--color-midnight); }
@media (prefers-reduced-motion: reduce) { .why2__reason { transition: none; } }
.why2__record { border-top: 1px solid var(--line); padding-top: 12px; }
.why2__record-title { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-secondary); margin: 0 0 8px; }
.why2__record .figures { gap: 0; }
.why2__record .figure { background: none; border: 0; border-radius: 0; padding: 2px 18px; border-left: 1px solid var(--line); gap: 4px; }
.why2__record .figure:first-child { border-left: 0; padding-left: 0; }
.why2__record .figure__num { font-size: 2.25rem; font-variant-numeric: tabular-nums; }
.why2__record .figure__label { font-size: var(--fs-caption); line-height: 1.35; }
.why2__proof { margin: 8px 0 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.why2__proof .why__record { color: var(--text-primary); }
.why2__proof .why__caption { font-style: italic; }
@media (max-width: 767px) {
  .why2__record .figure { border-left: 0; padding: 6px 0; }
  html.js .why2__switch { display: grid; border-radius: 14px; justify-self: stretch; justify-items: stretch; gap: 2px; }
  .why2__switch button { text-align: center; }
  .why2__vs { justify-self: center; }
  .why2__others { display: grid; grid-template-columns: 1fr; border-radius: 12px; padding: 8px 3px 3px; }
  .why2__others-label { grid-column: 1 / -1; text-align: center; margin: 0 0 6px; }
}
/* Portuguese: the longer heading and intro still fit beside the cards; the intro never ends on a lone word. */
.why2__intro { text-wrap: pretty; }
@media (min-width: 900px) {
  html[lang="pt-BR"] #why h2 { font-size: calc(var(--fs-h2) * 0.96); }
  html[lang="pt-BR"] #why .why2__intro { font-size: 1.125rem; }
}
/* The switch stays on one line on narrower two-column screens (founder, 14 Nov 2026). */
@media (min-width: 900px) and (max-width: 1199px) {
  html.js .why2__switch { flex-wrap: nowrap; gap: 2px; padding: 3px; }
  .why2__switch button { padding: 8px 9px; font-size: 13px; white-space: nowrap; }
  .why2__vs { padding: 0; font-size: 0.875rem; }
  .why2__others { flex-wrap: nowrap; padding-left: 8px; }
  .why2__others-label { font-size: 11px; margin-right: 2px; white-space: nowrap; }
}
@media (min-width: 900px) {
  .why2 { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); column-gap: 40px; row-gap: 20px; align-items: start; }
  .why2__reasons { grid-template-columns: 1fr 1fr; }
  .why2__record { grid-column: 1 / -1; }
}
/* International tracks redesign (founder, 14 Nov 2026): schools build their offer. Each system has an Add button;
   an added system lights its branch in gold and tints its column, the school counts its tracks, and the note spells out
   the offer. The pathways stay listed whatever is chosen. */
.tracks-chart__row { border-radius: var(--radius-md); padding: 4px 6px 8px; transition: background-color .25s ease; }
.tracks-chart__row::before, .tracks-chart__rows::before, .tracks-chart__start::after { transition: background-color .25s ease; }
.tracks-chart__row.is-added { background: color-mix(in srgb, var(--color-sky) 70%, var(--color-white)); }
.tracks-chart__row.is-added::before { background: var(--color-gold); }
.tracks-chart__row.is-added::after { background: var(--signature); }
.tracks-chart__row.is-added .tracks-chart__name { color: var(--signature); }
.tracks-chart.has-added .tracks-chart__start::after { background: var(--color-gold); }
.tracks-chart__add {
  justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 12px;
  padding: 5px 13px 5px 10px; font: inherit; font-size: var(--fs-caption); font-weight: 700; line-height: 1.2;
  color: var(--signature); background: var(--color-white); border: 1.5px solid var(--signature); border-radius: 999px;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.tracks-chart__add::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--signature); color: var(--color-white); font-size: 13px; line-height: 1; }
.tracks-chart__add:hover { background: var(--signature-tint); }
.tracks-chart__add:active { transform: scale(.96); }
.tracks-chart__add:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tracks-chart__add span + span, .tracks-chart__add[aria-pressed="true"] span:first-child { display: none; }
.tracks-chart__add[aria-pressed="true"] span + span { display: inline; }
.tracks-chart__add[aria-pressed="true"] { background: var(--signature); color: var(--color-white); }
.tracks-chart__add[aria-pressed="true"]::before { content: "\2713"; background: var(--color-white); color: var(--signature); font-size: 10px; font-weight: 700; }
.tracks-chart__count { display: none; padding: 2px 9px; border-radius: 999px; background: var(--signature); color: var(--color-white); font-size: var(--fs-caption); font-weight: 700; line-height: 1.4; }
.tracks-chart.has-added .tracks-chart__count { display: inline-block; }
.tracks-chart.has-added .tracks-chart__start-note { display: none; }
.tracks-chart__note b { font-weight: 400; color: var(--text-heading); }
.tracks-chart__note .tracks-chart__plus { color: var(--signature); font-weight: 700; padding: 0 .3em; }
.tracks-chart__note.is-sum { animation: tc-fade .3s ease-out; }
@media (min-width: 600px) {
  .tracks-chart__row { grid-template-rows: auto 1fr auto; row-gap: 6px; }
  .tracks-chart__add { justify-self: center; margin: 2px 0 0; }
  .tracks-chart__row .tracks-chart__chips { gap: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tracks-chart--wait .tracks-chart__add { opacity: 0; }
  .tracks-chart--play .tracks-chart__add { animation: tc-rise .35s ease-out both; animation-delay: calc(1.25s + var(--i) * .95s); }
}
/* The benefits (founder, 15 Nov 2026, option A): a white card like the chart beside it, a 3px gold rule along the top;
   Navy titles in Arapey carry the benefits, Graphite text sits back, the Navy button leads. */
.tracks__why--panel { background: var(--color-white); border-top: 3px solid var(--color-gold); border-radius: var(--radius-md); padding: 24px 28px 26px; }
.tracks__why--panel .tracks__why-title { margin: 0 0 20px; color: var(--color-navy); }
.tracks__why--panel .tracks__why-title, .tracks__why--panel .tracks__cta { text-align: center; }
.tracks__why--panel .tracks__points { gap: 18px; margin-bottom: 24px; }
.tracks__why--panel .tracks__points .svc-item__icon { background: var(--color-sky); }
.tracks__why--panel .tracks__points .svc-item__icon .icon { stroke: var(--color-navy); }
.tracks__why--panel .tracks__points h4 { color: var(--color-navy); font-family: var(--font-display); font-weight: 400; font-size: 1.3125rem; line-height: 1.25; }
.tracks__why--panel .tracks__points p { color: var(--text-secondary); }
/* Phones: the five steps of the handover stack top to bottom instead of squeezing into one row. */
@media (max-width: 599px) {
  .pk-run--hand { flex-direction: column; border-radius: 12px; }
  .pk-model { grid-template-columns: 1fr; row-gap: 4px; }
  .pk-model p { text-align: left; }
  .pk-run--hand .pk-run__help { border-left: 1.5px dashed var(--color-navy); border-top: 0; border-radius: 0 0 12px 12px; }
}
/* Professional development (founder, 15 Nov 2026): who we train is the control. Choosing an audience shows its three
   photos in a mosaic, one large and two small, each captioned on the photo. Without JavaScript every panel shows. */
.pd.section { padding: 32px 0; }
.pd__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .pd__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: center; } }
.pd h2 { margin: 0 0 10px; text-wrap: balance; }
.pd .eyebrow::after { margin: 8px 0 12px; }
.pd__intro { margin: 0 0 6px; font-size: var(--fs-lead); line-height: 1.5; }
.pd .training__countries { margin: 0 0 18px; font-size: 1.1875rem; }
.pd-tabs { display: grid; gap: 8px; margin-bottom: 20px; }
.pd-tab { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; text-align: left; font: inherit; color: var(--text-primary); background: rgba(255, 255, 255, .55); border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 0 var(--radius-md) var(--radius-md) 0; cursor: pointer; transition: background-color .2s, border-color .2s; }
.pd-tab:hover { background: var(--color-white); }
.pd-tab[aria-selected="true"] { background: var(--color-white); border-color: var(--line); border-left-color: var(--color-navy); }
.pd-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pd-tab__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-sky); }
.pd-tab__icon .icon { width: 19px; height: 19px; stroke: var(--color-navy); }
.pd-tab[aria-selected="true"] .pd-tab__icon { background: var(--color-navy); }
.pd-tab[aria-selected="true"] .pd-tab__icon .icon { stroke: var(--color-white); }
.pd-tab__text { display: grid; gap: 1px; }
.pd-tab__name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--text-heading); }
.pd-tab__line { font-size: var(--fs-caption); line-height: 1.35; color: var(--text-secondary); }
.pd__cta { margin: 0; }
.pd-panels { display: grid; gap: 16px; }
.pd-panel { display: grid; gap: 10px; grid-template-columns: minmax(0, 5fr) minmax(0, 2.2fr) minmax(0, 2.2fr); grid-template-rows: 1fr 1fr; height: 440px; }
/* Four photos (founder, 15 Nov 2026): the large one on the left, a wide one top right, two small ones under it. */
.pd-photo:nth-child(2) { grid-column: 2 / 4; }
html.js .pd-panel:not(.is-on) { display: none; }
html.js .pd-panels { display: block; }
.pd-panel.is-in .pd-photo { animation: pd-in .45s ease-out both; }
.pd-panel.is-in .pd-photo:nth-child(2) { animation-delay: .06s; }
.pd-panel.is-in .pd-photo:nth-child(3) { animation-delay: .12s; }
@keyframes pd-in { from { opacity: 0; transform: translateY(6px); } }
.pd-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-sky); }
.pd-photo--big { grid-row: span 2; }
.pd-photo:nth-child(3) figcaption, .pd-photo:nth-child(4) figcaption { padding: 22px 9px 8px; font-size: .75rem; }
.pd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; color: var(--color-white); background: linear-gradient(to top, rgba(15, 42, 74, .85), rgba(15, 42, 74, 0)); }
@media (max-width: 599px) {
  .pd-panel { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px 140px; }
  .pd-photo:nth-child(2) { grid-column: 1 / -1; }
  .pd-photo--big { grid-row: auto; grid-column: 1 / -1; }
  .pd-photo:not(.pd-photo--big) figcaption { padding: 20px 8px 7px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .pd-panel.is-in .pd-photo { animation: none; } .pd-tab { transition: none; } }
/* FAQs with five questions per topic (founder, 15 Nov 2026): tighter tiles and padding so the section fits one laptop
   screen; every tile keeps the same height so the three columns line up row by row. */
#faq.section { padding-top: 32px; padding-bottom: 32px; }
#faq .faq { gap: 18px; }
#faq h2 { margin: 0; }
#faq .faq__group-title { margin-bottom: 10px; }
#faq summary { min-height: 66px; padding-top: 8px; padding-bottom: 8px; }
#faq .faq__icon { width: 34px; height: 34px; }
#faq .faq__icon .icon { width: 19px; height: 19px; }
#faq details p { padding-left: calc(34px + var(--space-3) * 2); }
/* About, compact (founder, 15 Nov 2026): Qualifications and Memberships close the text column exactly as on
   Global Test Prep Solutions (two columns, institution under each award); the photo column adds two photos of the
   founder at the 2024 awards. Boards, sessions and published writing are removed. */
#about .credentials { display: grid; gap: var(--space-6); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
#about .credentials .highlights li { font-weight: 400; text-wrap: pretty; }
.credentials__inst { display: block; font-size: var(--fs-small); color: var(--text-secondary); }
@media (min-width: 768px) { #about .credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); } }
.award-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--space-4); }
.award-photos figure { margin: 0; }
.award-photos img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--radius-md); background: var(--color-sky); }
.award-photos figcaption { margin-top: 6px; font-size: var(--fs-caption); line-height: 1.35; color: var(--text-secondary); }
#about.section { padding: 40px 0; }
#about .founder__name { margin: 18px 0 2px; }
#about .founder__role { margin: 4px 0 14px; }
#about .founder__text p { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; }
#about .founder__text h2 { margin: 0 0 10px; }
#about .eyebrow::after { margin: 8px 0 12px; }
#about .credentials { margin-top: 18px; padding-top: 18px; }
#about .credentials .highlights { gap: 10px; }
#about .credentials .highlights li { font-size: .9375rem; line-height: 1.4; }
.award-photos img { aspect-ratio: 1 / 1; height: auto; object-position: center 20%; }
#about .award-video { margin-top: 12px; }
@media (min-width: 1024px) {
  #about .founder { grid-template-columns: minmax(0, 3.3fr) minmax(0, 8.7fr); gap: 44px; }
  #about .founder__photo { aspect-ratio: 4 / 3; }
  #about .founder__media .founder__awards { margin-top: 14px; }
}
/* One award photo since 15 Nov 2026: full column width, landscape crop. */
.award-photos { grid-template-columns: 1fr; }
.award-photos img { aspect-ratio: 4 / 3; object-position: center 25%; }
/* Founder photo (founder, 15 Nov 2026): no zoom (the scale-up softened it), framed from the top so the head is never
   cut, and served at a size close to how it is shown (srcset) so it stays sharp. */
#about .founder__photo img { transform: none; object-position: center top; }
/* About hierarchy (founder, 15 Nov 2026): the founder leads; four facts in Arapey are what a reader scans first;
   one short paragraph and the credentials follow. */
.founder__lead { font-size: var(--fs-lead) !important; line-height: 1.45 !important; color: var(--text-primary); margin: 0 0 6px !important; }
.facts { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact { display: grid; align-content: start; gap: 4px; padding: 12px 14px 13px; background: var(--color-sky); border-radius: var(--radius-md); border-top: 3px solid var(--color-navy); }
.fact__value { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--color-navy); }
.fact__label { font-size: var(--fs-caption); line-height: 1.35; color: var(--text-primary); }
/* Founder, 15 Nov 2026: the 2025 poster at full column width under the two award names; the rostrum photo under it. */
#about .founder__awards .highlights { grid-template-columns: 1fr; gap: 6px; }
.award-poster--lg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 12px; border-radius: var(--radius-md); }
.award-photos img { aspect-ratio: 4 / 3; object-position: center 22%; }
/* EARJ on its own line, the school's name under it (founder, 15 Nov 2026); the dash stays for screen readers and the copy check. */
.fact__dash { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Founder, 15 Nov 2026: less space between About and Our founder on studying abroad. */
#about.section { padding-bottom: 24px; }
#media.section { padding-top: 24px; }
/* Founder, 15 Nov 2026: the sister sites' cut-out photo (grey jacket) on the Global School Partners Sky. */
.media__press--cutout { background: var(--color-sky); aspect-ratio: 6 / 5; object-fit: contain; object-position: center bottom; }
/* About as on Global Test Prep Solutions and Higher Ed Apply (founder, 15 Nov 2026): on laptops the photo column stays
   in view (sticky) while the story, facts and credentials scroll beside it. The column is kept shorter than one screen:
   the 2025 poster and the rostrum photo share a row under the award names. */
.award-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; align-items: stretch; margin-top: 12px; }
.award-pair .award-poster--lg { margin-top: 0; height: 100%; }
.award-pair .award-photos { margin: 0; }
.award-pair .award-photos figure, .award-pair .award-photos img { height: 100%; }
.award-pair .award-photos img { aspect-ratio: auto; object-fit: cover; object-position: center 25%; }
@media (min-width: 1024px) {
  #about .founder { align-items: start; }
  #about .founder__media { position: sticky; top: calc(var(--header-h, 73px) + 16px); align-self: start; }
}
/* The poster keeps its own 16:9 shape (never cropped); the rostrum photo fills the same height beside it. */
.award-pair .award-poster--lg { height: auto; aspect-ratio: 16 / 9; object-fit: contain; align-self: start; }
.award-pair .award-photos figure { position: relative; height: 100%; min-height: 0; }
.award-pair .award-photos img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-md); }
/* In the media (founder, 15 Nov 2026, option A): two matching cards side by side, a picture on top (16:9), then the
   text and the link, so the interview and the newspaper quote end level. The interview frame carries a play mark. */
@media (min-width: 1024px) { .media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.media__videos { display: grid; }
.media__interview { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; padding: var(--space-5); background: var(--color-ivory); border: 0; border-top: 3px solid var(--color-gold); }
.media__interview:hover { border-color: var(--color-gold); }
.media__interview:hover .media__title { color: var(--color-navy); }
.media__thumb { position: relative; display: block; margin-bottom: var(--space-1); }
.media__thumb img, .media__interview .media__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius-sm); }
.media__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(15, 42, 74, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 26px no-repeat; }
.media__press--cutout { aspect-ratio: 16 / 9; margin-bottom: var(--space-1); }
.media__quote { padding: var(--space-5); }
/* Footer (founder, 15 Nov 2026, as on Global Test Prep Solutions): the services run as one compact line of links,
   so the four columns end close together. */
.foot__services { margin: 0; line-height: 1.6; }
.site-footer .foot__services a { text-decoration: none; }
.site-footer .foot__services a:hover { text-decoration: underline; }
.foot__services span { color: var(--color-sky); padding: 0 1px; }
.site-footer .foot__services a { white-space: nowrap; }
.site-footer .foot__services a[href="#remote-expert-counseling"] { white-space: nowrap; }
/* Services needs the room: a wider second column so the line of links takes three rows, not six. */
@media (min-width: 1200px) { .foot { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr); } }
/* Press, as on Global Test Prep Solutions (founder, 15 Nov 2026): the interview and the newspaper piece are two small
   links under the awards, a thumbnail and a line each, instead of their own section. */
.press-links { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.short-link { display: flex; align-items: center; gap: 12px; color: var(--link); font-weight: 600; font-size: var(--fs-small); line-height: 1.35; text-decoration: none; }
.short-link img { flex: none; width: 52px; height: 52px; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius-sm); background: var(--color-sky); }
.short-link img.short-link__cutout { object-fit: cover; object-position: 50% 10%; }
.short-link > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
.short-link__note { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-caption); color: var(--text-secondary); text-decoration: none; }
.short-link:hover > span:first-of-type { color: var(--color-navy-hover); }
/* With the press links in it, the photo column still fits a laptop screen: a slightly wider portrait crop. */
@media (min-width: 1024px) { #about .founder__photo { aspect-ratio: 16 / 10; } #about .founder__media .founder__awards { margin-top: 10px; } }
/* Press links without photos (founder, 15 Nov 2026): a small line icon in a Sky circle says what each link is. */
.short-link__icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-sky); }
.short-link__icon .icon { width: 18px; height: 18px; stroke: var(--color-navy); }
.short-link { align-items: flex-start; }
.short-link__icon { margin-top: 1px; }
/* Founder, 15 Nov 2026: a smaller portrait that shows the whole headshot (square, nothing cropped). */
@media (min-width: 1024px) { #about .founder__photo { aspect-ratio: 1 / 1; width: 200px; max-width: 100%; } }
#about .founder__photo img { object-fit: contain; object-position: center bottom; }
/* Founder, 15 Nov 2026: the portrait centered in its column. */
@media (min-width: 1024px) { #about .founder__photo { margin-left: auto; margin-right: auto; } }