/* ==========================================================================
   Admissions Gateway · Styles v3
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans); font-weight: var(--fw-regular); background: var(--canvas);
  color: var(--sec); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.visually-hidden { position: absolute; 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: 50%; top: 8px; transform: translateX(-50%) translateY(-200%); background: var(--ink); color: var(--inv); padding: 10px 18px; border-radius: var(--r-md); font-size: 14px; font-weight: var(--fw-semibold); z-index: 200; transition: transform .18s ease; }
.skip-link:focus { transform: translateX(-50%) translateY(0); }

/* ---- Layout ------------------------------------------------------------ */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--pad-section); }
.section--dark { padding-block: var(--pad-dark); background: var(--ink); color: var(--inv); }
.bg-subtle { background: var(--subtle); }

/* ---- Typography -------------------------------------------------------- */
.h1, .display {
  font-family: var(--font-display); font-weight: var(--t-display-weight);
  font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls);
  color: var(--ink); text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: var(--t-h2-weight);
  font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls);
  color: var(--ink); text-wrap: balance;
}
.h3 {
  font-family: var(--font-display); font-weight: var(--t-h3-weight);
  font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls);
  color: var(--ink); text-wrap: balance;
}
.h-title { font-family: var(--font-sans); font-weight: var(--t-card-weight); font-size: var(--t-card-size); line-height: var(--t-card-lh); letter-spacing: var(--t-card-ls); color: var(--ink); }
.h6 { font-family: var(--font-sans); font-size: var(--t-body-size); font-weight: var(--fw-semibold); color: var(--ink); }
.subtitle { font-size: var(--t-body-l-size); line-height: var(--t-body-l-lh); font-weight: var(--t-body-l-weight); color: var(--sec); }
.body-l { font-size: var(--t-body-l-size); line-height: var(--t-body-l-lh); font-weight: var(--t-body-l-weight); color: var(--sec); }
.body-m { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--t-body-weight); color: var(--sec); }
.body-s { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--t-small-weight); color: var(--sec); }
.caption { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--mut); }
.label { font-family: var(--font-mono); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--t-label-weight); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink); }
.wordmark { font-family: var(--font-mono); font-size: 15px; font-weight: var(--fw-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.num { font-family: var(--font-display); font-weight: var(--t-num-weight); font-size: var(--t-num-size); line-height: var(--t-num-lh); letter-spacing: var(--t-num-ls); }

.section--dark .h2 { color: var(--inv); }
.measure { max-width: 640px; }
.measure-720 { max-width: 720px; }

/* Section heading block (no eyebrows) */
.sec-head { margin-bottom: var(--gap-head); max-width: 760px; }
.sec-head__intro { margin-top: var(--s-18, 18px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.section--dark .sec-head__intro { color: var(--inv-mut); }

/* ---- Buttons ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold); line-height: 1.1;
  border-radius: var(--r-md); border: 1px solid transparent; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease; }
.btn--lg { padding: 16px 26px; }
.btn--xl { padding: 22px 40px; font-size: 17px; border-radius: 14px; }
.btn--md { padding: 11px 18px; }
.btn--primary { background: var(--ink); color: var(--inv); }
.btn--primary:hover { background: #2c2c2c; }
.btn--secondary { background: transparent; border-color: var(--bd-strong); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--inverse { background: var(--inv); color: var(--ink); }
.btn--inverse:hover { background: #e4e4e4; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-14); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold); color: var(--ink); }
.link-arrow .arrow { transition: transform .22s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--inv); }

/* ---- Media placeholder ------------------------------------------------- */
.media { position: relative; background: var(--ph-bg); border-radius: var(--r-sm);
  display: grid; place-items: center; align-content: center; gap: var(--s-12); text-align: center; overflow: hidden; }
.media__glyph { width: 36px; height: 36px; color: var(--ph-ic); }
.media__label { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.media-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: var(--s-8); flex-wrap: wrap; }
.media-badge { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--inv); padding: 6px 10px; border-radius: var(--r-sm); }
.media-badge--soft { background: rgba(255,255,255,.94); color: var(--ink); }
@property --ag-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.media-badge--almost { position: relative; isolation: isolate; }
.media-badge--almost::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ag-ang), transparent 0 200deg, rgba(10,10,10,.35) 268deg, #ffffff 312deg, rgba(10,10,10,.35) 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: ag-badge-sweep 2.6s linear infinite; }
@keyframes ag-badge-sweep { to { --ag-ang: 360deg; } }
.media__zoom { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--s-12); transition: transform .5s var(--ease); }

/* ---- Filter chips ------------------------------------------------------ */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-bottom: var(--s-48); }
.chip { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 15px; border: 1px solid var(--bd-strong); border-radius: var(--r-pill); color: var(--sec);
  transition: background .18s ease, border-color .18s ease, color .18s ease; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--inv); }
.is-filtered { display: none !important; }

/* ==========================================================================
   NAV (full-bleed, pills)
   ========================================================================== */
/* Floating island nav (monochrome, hairline, no shadow) */
.site-header { position: sticky; top: 0; z-index: 100; padding: 14px var(--gutter); background: transparent; transition: padding .22s ease; }
.site-header.is-condensed { padding-block: 8px; }
.nav { position: relative; max-width: var(--container); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-24);
  padding: 9px 12px 9px 22px; border: 1px solid var(--bd); border-radius: var(--radius);
  background: rgba(255,255,255,0.82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transition: border-color .2s ease; }
.site-header.is-condensed .nav { border-color: var(--bd-strong); }
.nav:has(.nav__mega.is-open), .nav:has(.nav__item:hover .nav__mega) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* page dim behind open mega */
.site-header::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(10,10,10,.16); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.site-header:has(.nav__mega.is-open)::before, .site-header:has(.nav__item:hover .nav__mega)::before { opacity: 1; }

.brand { display: inline-flex; align-items: center; gap: var(--s-12); }
.brand__mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--ink); color: var(--inv); display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: 12px; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 19px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.brand-logo { height: 26px; width: auto; color: var(--ink); display: block; }

.nav__menu { display: flex; align-items: center; gap: var(--s-4); }
.nav__item { position: static; }
.nav__pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: var(--fw-semibold); color: var(--ink);
  padding: 9px 16px; border: 1px solid transparent; border-radius: var(--r-pill); transition: background .18s ease; }
.nav__pill:hover, .nav__pill[aria-expanded="true"] { background: var(--subtle); }
.nav__caret { width: 13px; height: 13px; transition: transform .2s ease; }
.nav__pill[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
/* Mega-menu panel */
.nav__mega { position: absolute; top: 100%; left: -1px; right: -1px; width: auto; max-width: none; background: var(--canvas);
  border: 1px solid var(--bd); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: var(--s-20) var(--s-24) var(--s-24);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 50; }
.nav__item:hover .nav__mega, .nav__mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__mega-inner { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--s-16); align-items: stretch; }
.nav__mega-list { display: flex; flex-direction: column; gap: 2px; }
.nav__mega-item { display: flex; align-items: flex-start; gap: var(--s-12); padding: 10px 12px; border-radius: var(--r-sm); transition: background .18s var(--ease); }
.nav__mega-item:hover { background: var(--ink); }
.nav__mega-item:hover .nav__mega-title { color: var(--inv); }
.nav__mega-item:hover .nav__mega-sub { color: var(--inv-mut); }
.nav__mega-ic { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--bd); color: var(--ink); display: grid; place-items: center; flex: none; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.nav__mega-ic svg { width: 19px; height: 19px; color: inherit; }
.nav__mega-item:hover .nav__mega-ic { background: transparent; border-color: rgba(255,255,255,.28); color: var(--inv); }
.nav__mega-title { display: block; font-size: 15px; font-weight: var(--fw-semibold); color: var(--ink); }
/* ---- Financing dropdown: two placeholder entries, no destinations yet ----
   They are <span>s, not links, so nothing navigates until the pages exist. */
.nav__mega--sm .nav__mega-inner { grid-template-columns: minmax(260px, 340px); }
.nav__mega-item--soon { cursor: default; }
.nav__mega-item--soon:hover { background: transparent; }
.nav__mega-item--soon:hover .nav__mega-title { color: var(--ink); }
.nav__mega-item--soon:hover .nav__mega-sub { color: var(--mut); }
.nav__mega-item--soon:hover .nav__mega-ic { background: var(--canvas); border-color: var(--bd); color: var(--ink); }
.drawer__sub-soon { padding: 11px 0; font-size: 16px; color: var(--faint); cursor: default; }
.nav__mega-sub { display: block; font-size: 13px; line-height: 1.4; color: var(--mut); margin-top: 1px; }
.nav__feature { position: relative; display: block; min-height: 220px; border: 1px solid var(--bd); border-radius: var(--r-md); overflow: hidden; background: var(--subtle); }
.nav__feature .media { position: absolute; inset: 0; border-radius: 0; }
.nav__feature__cap { position: absolute; inset: auto 0 0 0; z-index: 3; padding: var(--s-16); background: linear-gradient(to top, rgba(10,10,10,.80), rgba(10,10,10,0)); }
.nav__feature__cap .label { color: var(--inv-mut); margin-bottom: 4px; }
.nav__feature-title { display: inline-flex; align-items: center; gap: 6px; color: var(--inv); font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 15px; }
.nav__feature-title .arrow { color: var(--inv); }
.nav__cta { margin-left: var(--s-8); }
.nav__hamburger { display: none; width: 44px; height: 44px; border: 1px solid var(--bd-strong); border-radius: var(--r-md); align-items: center; justify-content: center; flex: none; }
.nav__hamburger svg { width: 22px; height: 22px; }

.drawer { position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); background: var(--canvas); border-left: 1px solid var(--bd);
  transform: translateX(100%); transition: transform .26s var(--ease); z-index: 130; display: flex; flex-direction: column; padding: 24px 24px 32px; overflow-y: auto; }
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-32); }
.drawer__close { width: 44px; height: 44px; border: 1px solid var(--bd-strong); border-radius: var(--r-md); display: grid; place-items: center; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__links { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-28); }
.drawer__links a { display: block; padding: 14px 8px; font-size: 18px; font-weight: var(--fw-semibold); color: var(--ink); border-bottom: 1px solid var(--bd); }
.drawer__nav { display: flex; flex-direction: column; margin-bottom: var(--s-24); }
.drawer__group { border-top: 1px solid var(--bd); }
.drawer__group .acc-trigger { padding: 16px 8px; }
.drawer__group-label { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.drawer__sub { display: flex; flex-direction: column; padding: 0 8px 14px; }
.drawer__sub a { padding: 11px 0; font-size: 16px; color: var(--sec); }
.drawer__sub a:hover { color: var(--ink); }
.drawer__direct { display: flex; align-items: center; padding: 16px 8px; font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink); border-top: 1px solid var(--bd); }
.drawer__direct:last-of-type { border-bottom: 1px solid var(--bd); }
.drawer__cta { margin-top: auto; }
.drawer__cta .btn { width: 100%; }
.scrim { position: fixed; inset: 0; background: rgba(10,10,10,0.45); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s; z-index: 120; }
.scrim.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   HERO (wide)
   ========================================================================== */
.section--hero { padding-block: 88px 56px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 72px; align-items: center; }
.hero__title { margin-bottom: var(--s-28); }
.hero__sub { margin-bottom: var(--s-32); max-width: 52ch; }
.hero__press { display: flex; align-items: center; gap: var(--s-24); padding-block: var(--s-20); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); margin-bottom: var(--s-32); }
.hero__press .wordmark { color: var(--mut); font-size: 16px; }
.hero__press-logo { height: 22px; width: auto; max-width: 150px; object-fit: contain; }
.hero__press-logo[alt="Poets & Quants"] { height: 38px; }
.hero__press { flex-wrap: wrap; }
.hero__press-divider { width: 1px; height: 20px; background: var(--bd-strong); }
.hero__cta { margin-bottom: var(--s-32); }
.hero__trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-12); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--mut); }
.hero__trust .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex: none; }
.hero__media { display: grid; aspect-ratio: 1 / 1; width: 100%; max-width: min(540px, 88vw); margin-inline: auto; }
.hero__media-ph { width: 100%; height: 100%; }
.hero__media--grid { background: transparent; border: 0; border-radius: 0; overflow: visible; padding: 0; }
.hero__media-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; border-radius: 0; }

.reveal-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8px; }
.rg-tile { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--subtle); }
.rg-img { position: absolute; inset: 0; opacity: 0; filter: blur(3px); transform: scale(.99);
  transition: opacity .65s var(--ease), filter .75s var(--ease), transform .75s var(--ease); will-change: opacity, filter, transform; }
.rg-img canvas { width: 100%; height: 100%; }
.rg-img.is-visible { opacity: 1; filter: blur(0); transform: scale(1); }
.rg-img.is-swapping-out { transition: opacity .22s ease-in, filter .22s ease-in, transform .22s ease-in; opacity: 0; filter: blur(3px); transform: scale(.99); }
.rg-img.is-swapping-in { transition: opacity .4s var(--ease), filter .5s var(--ease), transform .5s var(--ease); opacity: 1; filter: blur(0); transform: scale(1); }

/* ==========================================================================
   RESULTS FEATURE (dark): full-bleed image, heading bottom-left, stats right
   ========================================================================== */
.results-feature { position: relative; overflow: hidden; background: var(--ink); color: var(--inv); }
.results-feature__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; overflow: hidden; }
/* The track-record photo stays in colour at all times (it used to be greyscale
   until hover, which meant it was never in colour on touch devices). */
.results-feature__bg .cms-img { filter: none; }
/* Scrim: the colour photo is brighter than the greyscale one was, so the white
   headline, dials and captions need a heavier veil to stay legible. */
.results-feature::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,10,.80), rgba(10,10,10,.20) 36%, rgba(10,10,10,.20) 60%, rgba(10,10,10,.82)),
              linear-gradient(to bottom, rgba(10,10,10,.28), rgba(10,10,10,0) 38%, rgba(10,10,10,.58)); }
/* On tablet/mobile the section stacks and the dials sit over the middle of the
   frame, where the desktop left/right scrim is transparent — use a flat veil. */
@media (max-width: 1023px) {
  .results-feature::after { background: linear-gradient(to bottom, rgba(10,10,10,.70), rgba(10,10,10,.58) 45%, rgba(10,10,10,.78)); }
}
.results-feature__inner { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter); min-height: clamp(540px, 78vh, 760px);
  display: flex; justify-content: space-between; align-items: stretch; gap: var(--s-40); }
.results-feature__head { align-self: flex-end; }
.results-feature__head .h2 { color: var(--inv); }
.results-feature__head .h2 strong { font-weight: var(--fw-semibold); }
.results-feature__head .h2 span { font-weight: var(--fw-medium); }
.results-feature__consultant { margin-bottom: var(--s-16); color: rgba(255,255,255,.82);
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.results-feature:hover .results-feature__consultant,
.results-feature:focus-within .results-feature__consultant { opacity: 1; transform: none; }
.results-feature__stats { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; gap: var(--s-40); }
.results-feature__stats .num { display: block; color: var(--inv); }
.results-feature__stats .lbl { display: block; margin-top: var(--s-8); font-size: var(--fs-small); line-height: 1.45; color: rgba(255,255,255,.78); max-width: min(22ch, 100%); }
/* min(..., 100%) so the measure never spills past a phone viewport */
.results-feature__intro { margin-top: var(--s-16); color: rgba(255,255,255,.90); max-width: min(44ch, 100%); font-size: var(--fs-body); }

/* ==========================================================================
   WHAT'S NEW · carousel (light bordered cards)
   ========================================================================== */
.carousel { position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 372px; gap: var(--s-24);
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 2px 28px; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav { position: absolute; top: -72px; right: 0; display: flex; gap: var(--s-8); }
.carousel__btn { width: 44px; height: 44px; border: 1px solid var(--bd-strong); border-radius: var(--r-pill); display: grid; place-items: center; transition: border-color .18s ease, background .18s ease, opacity .18s ease; }
.carousel__btn:hover { border-color: var(--ink); background: var(--subtle); }
.carousel__btn svg { width: 20px; height: 20px; color: var(--ink); }
.carousel__btn[disabled] { opacity: .3; cursor: default; }

/* Shared card base + hover: expand, turn dark, nudge the arrow, NO stroke */
.hcard { position: relative; background: var(--canvas); border: 0; outline: 1px solid var(--bd); outline-offset: -1px; border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), background .3s ease, outline-color .3s ease; }
.hcard .media { border-radius: 0; }
.hcard .h-title, .hcard .body-m, .hcard .link-arrow, .hcard .press-src, .hcard .consultant-role, .hcard .outcome-schools { transition: color .3s ease; }
.hcard:hover { transform: scale(1.03); background: var(--ink); outline-color: transparent; z-index: 2; }
.hcard:hover .h-title, .hcard:hover .link-arrow, .hcard:hover .press-src, .hcard:hover .outcome-schools { color: var(--inv); }
.hcard:hover .body-m, .hcard:hover .consultant-role { color: rgba(255,255,255,.74); }
.hcard:hover .link-arrow .arrow { animation: nudge 1s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.hcard__body { padding: 24px; display: flex; flex-direction: column; gap: var(--s-10); flex: 1; }
.hcard__body .link-arrow { margin-top: auto; padding-top: var(--s-8); }
.hcard__media { aspect-ratio: 16 / 10; border-radius: 0; }

.program-card__media { aspect-ratio: 16 / 10; }

/* Consultant roster: portrait photo cards */
.consultant-card .hcard__media { aspect-ratio: 4 / 5; }
.consultant-card .hcard__body { gap: var(--s-8); }
/* Compact consultant grid (homepage) — fit all six in view */
.consultants-compact { gap: clamp(16px, 1.6vw, 24px); }
.consultants-compact .consultant-card .hcard__media { aspect-ratio: auto; height: clamp(150px, 17vh, 196px); }
.consultants-compact .consultant-card .hcard__body { padding: 15px 18px; gap: var(--s-6); }
.consultants-compact .consultant-card .h-title { font-size: var(--fs-body-l); }
.consultants-compact .consultant-card .body-m { font-size: var(--fs-small); line-height: 1.5; }
.consultants-compact .consultant-card .link-arrow { font-size: var(--fs-small); padding-top: var(--s-6); }
/* Consultants carousel — smaller cards, balanced headshots */
.consultants-carousel .carousel__track { grid-auto-columns: 300px; }
.consultants-carousel .consultant-card .hcard__media { aspect-ratio: 1 / 1; }
.consultants-carousel .consultant-card .hcard__body { padding: 18px 20px; gap: var(--s-6); }
.consultants-carousel .consultant-card .h-title { font-size: var(--fs-body-l); }
.consultants-carousel .consultant-card .body-m { font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 767px) { .consultants-carousel .carousel__track { grid-auto-columns: minmax(74%, 74%); } }
.consultant-role { font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: .02em; color: var(--mut); text-transform: none; }
.hcard:hover .consultant-role { color: rgba(255,255,255,.74); }

/* "Also check out" cross-page links */
.also__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.also__card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 168px; padding: 24px; }
.also__card .label { color: var(--mut); margin-bottom: var(--s-8); }
.also__card .h-title { margin-bottom: var(--s-6); }
.also__card:hover .label { color: var(--inv-mut); }
@media (max-width: 760px) { .also__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   TABLE
   ========================================================================== */
.table-wrap { border: 1px solid var(--bd); border-radius: var(--r-sm); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 17px 24px; text-align: right; }
.data-table thead th { background: var(--subtle); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.data-table thead th.col-school { text-align: left; }

.data-table .col-school { width: 280px; text-align: left; }
.data-table .school-logo { height: 22px; width: auto; max-width: 132px; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .9; }
.data-table tbody th { text-align: left; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.data-table tbody td { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.data-table tbody td.col-2026 { color: var(--ink); font-weight: var(--fw-semibold); }

.data-table th.col-total, .data-table td.col-total { border-left: 1px solid var(--bd); }
.data-table tbody td.col-total { color: var(--ink); font-weight: var(--fw-semibold); }
.data-table tbody tr { border-top: 1px solid var(--bd); }
.data-table tbody tr:nth-child(even) { background: var(--subtle); }
.data-table .total-row th, .data-table .total-row td { font-weight: var(--fw-semibold); color: var(--ink); border-top: 1.5px solid var(--bd-strong); background: var(--canvas); }
.table-foot { margin-top: var(--s-16); color: var(--faint); }

/* ==========================================================================
   EDITORIAL GRIDS (borderless · no card chrome, no shadows)
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-48) var(--s-40); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-48) var(--s-32); }

/* Press / achievements card (uses .hcard) */
.press-card__media { aspect-ratio: 16 / 10; }
.press-src { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.press-logo { height: 22px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; display: block; transition: filter .3s ease; }
.hcard:hover .press-logo { filter: brightness(0) invert(1); }
.press-card .body-m { color: var(--mut); }

/* Success stories · horizontal cards that stack on scroll (sticky stacking) */
.stories { position: relative; }
.stories .sec-head { position: sticky; top: var(--nav-h, 72px); z-index: 5; background: var(--canvas); padding-bottom: var(--s-16); }
.stack { position: relative; }
.story-card { position: sticky; top: calc(var(--nav-h, 72px) + var(--stories-head, 160px) + var(--s-24) + var(--i) * 16px);
  display: grid; grid-template-columns: 1.04fr 0.96fr; min-height: clamp(420px, 62vh, 560px);
  background: var(--canvas); border-radius: var(--r-md); overflow: hidden;
  outline: 1px solid var(--bd); outline-offset: -1px; margin-bottom: var(--s-24); }
.story-card:last-child { margin-bottom: 0; }
.story-card__text { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: var(--s-14); }
.story-card__text .label { margin-bottom: var(--s-6); }
.story-card__name { font-family: var(--font-display); font-weight: var(--t-card-xl-weight); font-size: var(--t-card-xl-size); line-height: var(--t-card-xl-lh); letter-spacing: var(--t-card-xl-ls); color: var(--ink); }
.story-card__schools { font-size: var(--fs-body-l); font-weight: var(--fw-semibold); color: var(--ink); }
.story-card__logos { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; min-height: 30px; }
.story-card__logos img { height: 28px; width: auto; max-width: 132px; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .9; }
.story-card__highlight { font-size: var(--fs-body-l); color: var(--mut); }
/* Deferred cards say the same thing on every card, so it reads as a label
   rather than a stat. One step up the existing scale, not an arbitrary size. */
.story-card__highlight--lg {font-size: var(--fs-title);}
.story-card__text .link-arrow { margin-top: var(--s-18); }
.story-card__photo { position: relative; background: var(--ph-bg); min-height: 280px; }
.story-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

@media (max-width: 860px) {
  .story-card { position: static; grid-template-columns: 1fr; min-height: 0; }
  .stories .sec-head { position: static; padding-bottom: 0; }
  .story-card__photo { order: -1; aspect-ratio: 16 / 11; min-height: 0; }
}

/* Consultant card (uses .hcard, avatar, no media image) */

/* Why-choose · scroll-scrubbed image sequence with overlaid step cards
   Base = fallback (mobile / no-JS / reduced-motion): stacked image + card per step */
.seq-why { position: relative; padding-block: clamp(64px, 9vw, 112px); }
.seq__canvas, .seq__overlay, .seq__progress { display: none; }
.seq__ui-inner { position: relative; }
.seq__kicker { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(22px, 3vw, 30px); letter-spacing: -.01em; color: var(--ink); margin-bottom: var(--s-40); }
.seq__kicker b { font-weight: var(--fw-semibold); }
.seq__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-24); }
.seq-step { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 400px; display: flex; align-items: flex-end; padding: clamp(24px, 4vw, 40px); }
.seq-step__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seq-step::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.seq-card { position: relative; z-index: 2; background: var(--canvas); border-radius: 20px; padding: clamp(26px, 3.4vw, 44px); max-width: 460px; }
.seq-card__eyebrow { margin-bottom: var(--s-14); }
.seq-card__title { font-family: var(--font-display); font-weight: var(--t-card-xl-weight); font-size: var(--t-card-xl-size); line-height: var(--t-card-xl-lh); letter-spacing: var(--t-card-xl-ls); color: var(--ink); text-wrap: balance; }
.seq-card__desc { color: var(--sec); margin-top: var(--s-16); font-size: var(--fs-body-l); line-height: 1.55; }

@media (prefers-reduced-motion: no-preference) {
  .js .seq-why { padding: 0; }
  .js .seq__track { position: relative; height: 360vh; }
  .js .seq__pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #0A0A0A; }
  .js .seq__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .js .seq__overlay { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 1; }
  .js .seq__ui { position: absolute; inset: 0; z-index: 2; }
  .js .seq__ui-inner { height: 100%; }
  .js .seq__kicker { position: absolute; left: var(--gutter); top: clamp(92px, 13vh, 132px); color: var(--inv); margin: 0; }
  .js .seq__steps { position: absolute; inset: 0; }
  .js .seq-step { position: absolute; inset: 0; min-height: 0; padding: 0; border-radius: 0; overflow: visible;
    opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
  .js .seq-step.is-active { opacity: 1; visibility: visible; }
  .js .seq-step__img { display: none; }
  .js .seq-step::after { content: none; }
  .js .seq-card { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: clamp(380px, 34vw, 520px); }
  .js .seq__progress { display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(40px, 7vh, 76px);
    width: min(48%, 640px); height: 2px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
  .js .seq__progress-fill { display: block; height: 100%; width: 0; background: #fff; }
}

/* Testimonials carousel: center-large, sides small, progress line */
.tcar { position: relative; overflow: hidden; }
.tcar__track { position: relative; }
.tquote { position: relative; margin: 0 auto var(--s-24); max-width: 560px; border: 1px solid var(--bd); border-radius: var(--r-md); padding: clamp(28px, 4vw, 48px); background: var(--canvas); }
/* JS-enhanced: true circular carousel (left / center / right), positions set in main.js */
.js .tcar__track { display: block; }
.js .tquote { position: absolute; top: 50%; left: 50%; width: clamp(300px, 46%, 560px); margin: 0; opacity: .4; will-change: transform, opacity;
  transition: transform .6s var(--ease), opacity .6s var(--ease); }
.js .tquote:not(.is-active) { cursor: pointer; }
.tquote__text { font-family: var(--font-display); font-weight: var(--t-quote-weight); font-size: var(--t-quote-size); line-height: var(--t-quote-lh); color: var(--ink); letter-spacing: var(--t-quote-ls); }
.tquote__by { margin-top: var(--s-24); padding-right: 64px; }
.tquote__logos { display: flex; align-items: center; gap: 18px; margin-bottom: var(--s-16); min-height: 22px; }
.tquote__logos img { height: 21px; width: auto; max-width: 94px; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .82; }
.tquote__by .name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.tquote__by .schools { color: var(--mut); font-size: var(--fs-small); margin-top: var(--s-6); }
.tquote__face { position: absolute; right: clamp(28px, 4vw, 48px); bottom: clamp(28px, 4vw, 48px); width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--ph-bg); display: grid; place-items: center; overflow: hidden; }
.tquote__face svg { width: 22px; height: 22px; color: var(--ph-ic); }
.tquote__face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.tcar__progress { height: 2px; background: var(--bd); margin: var(--s-40) auto 0; max-width: 560px; border-radius: var(--r-sm); overflow: hidden; }
.tcar__progress span { display: block; height: 100%; width: 0; background: var(--ink); }

.below-grid { margin-top: var(--s-48); }

/* ==========================================================================
   RECOGNITION
   ========================================================================== */
.recog { text-align: center; }
.recog__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); margin-bottom: var(--s-28); }
.recog__row .wordmark { flex: 1 1 auto; text-align: center; }
.recog__logo { flex: 0 0 auto; height: 26px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: opacity .25s ease; }
.recog__logo:hover { opacity: 1; }
.recog__line { color: var(--sec); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 880px; }
.accordion { margin-top: var(--s-28); }
.acc-item { border-top: 1px solid var(--bd); }
.acc-item:last-child { border-bottom: 1px solid var(--bd); }
.acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); width: 100%; text-align: left; padding: 20px 0; }
.acc-trigger .h-title { transition: color .15s ease; }
.acc-icon { position: relative; width: 22px; height: 22px; flex: none; color: var(--ink); }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .22s var(--ease), opacity .22s var(--ease); }
.acc-icon::before { top: 50%; left: 0; width: 100%; height: 1.6px; transform: translateY(-50%); }
.acc-icon::after { left: 50%; top: 0; width: 1.6px; height: 100%; transform: translateX(-50%); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease); }
.acc-panel.is-open { grid-template-rows: 1fr; }
.acc-panel__inner { overflow: hidden; }
.acc-panel__inner p { padding-bottom: 20px; max-width: 760px; color: var(--sec); }

/* ==========================================================================
   FINAL · split copy + form (dark)
   ========================================================================== */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
/* The closing CTA now sends people to the real form on book-a-call instead of
   carrying a second, shorter form. With the form gone the right column would be
   empty, so the block goes single-column and lets the photo hold the rest. */
.cta-split--solo { grid-template-columns: minmax(0, 620px); gap: var(--s-40); }
/* inline-block so the block is only as wide as the button — the WhatsApp line
   below then centres under the button rather than across the whole column */
.cta-act { display: inline-block; margin-top: var(--s-40); }
.cta-act .btn { width: 100%; }
.cta-act .btn .arrow { transition: transform .22s var(--ease); }
.cta-act .btn:hover .arrow { transform: translateX(4px); }
.cta-act__wa { margin-top: var(--s-20); text-align: center; }
.cta-act__wa a { display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--fs-small);
  font-weight: var(--fw-medium); color: var(--inv-mut); }
.cta-act__wa a:hover { color: var(--inv); }
.cta-act__wa a .arrow { transition: transform .22s var(--ease); }
.cta-act__wa a:hover .arrow { transform: translateX(4px); }
.cta-copy__sub { margin-top: var(--s-20); color: var(--inv-mut); max-width: 44ch; }
.cta-reassure { display: flex; flex-direction: column; gap: var(--s-12); margin-top: var(--s-32); }
/* Inherit the colour of whatever section it sits in. It used to be hard-coded
   white, which made it invisible on book-a-call's light panel. */
.cta-reassure li { display: flex; align-items: center; gap: var(--s-12); color: inherit; font-size: var(--fs-body); }
.cta-reassure svg { width: 20px; height: 20px; color: currentColor; flex: none; }
.section--dark .cta-reassure li, .section--dark .cta-reassure svg { color: var(--inv); }
.cta-form { background: var(--canvas); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: var(--s-16); }
/* `display:flex` above beats the browser's built-in [hidden] {display:none},
   so hiding the form after a successful send needs this explicitly. */
.cta-form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.field label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--canvas);
  border: 1px solid var(--bd-strong); border-radius: var(--r-md); padding: 12px 14px; transition: border-color .18s ease, box-shadow .18s ease; }
.field textarea { min-height: 92px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,10,10,.08); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); }
.field-row > * { min-width: 0; }
.cta-form .btn { width: 100%; margin-top: var(--s-4); }
.cta-form__fine { color: var(--mut); text-align: center; }
.cta-form__wa { text-align: center; margin-top: var(--s-8); }
.cta-form__wa a { display: inline-flex; align-items: center; gap: var(--s-6); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-medium); color: var(--ink); }
.cta-form__wa a .arrow { transition: transform .22s var(--ease); }
.cta-form__wa a:hover .arrow { transform: translateX(4px); }
.field .req { color: #d64545; }
.field--error input, .field--error select, .field--error textarea { border-color: #d64545; }
/* Checkbox group (which service) — a fieldset, so it needs the label styling
   applied to <legend> and must not inherit the text-input box treatment. */
.field--check { border: 0; padding: 0; }
.field--check legend { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); padding: 0; margin-bottom: var(--s-8); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--s-10); }
.check { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-10); cursor: pointer;
  border: 1px solid var(--bd-strong); border-radius: var(--r-md); padding: 12px 14px;
  font-size: var(--fs-body); color: var(--ink); transition: border-color .18s ease, background .18s ease; }
.check:hover { border-color: var(--ink); }
.check input { flex: none; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--ink); cursor: pointer; }
.check:has(input:checked) { border-color: var(--ink); background: var(--subtle); }
.check:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }
.field--check.field--error .check { border-color: #d64545; }
.section--dark .field--check legend, .section--dark .check { color: var(--inv); }
.section--dark .check { border-color: rgba(255,255,255,.3); }
.section--dark .check:has(input:checked) { border-color: var(--inv); background: rgba(255,255,255,.08); }
.field__error { color: #d64545; font-size: 13px; margin-top: var(--s-6); }
.cta-form input[type="file"] { width: 100%; font-family: var(--font-sans); font-size: 14px; color: var(--sec); }
.cta-form input[type="file"]::file-selector-button { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 14px; background: var(--ink); color: var(--inv); border: 0; border-radius: var(--r-md); padding: 10px 18px; margin-right: 14px; cursor: pointer; transition: opacity .18s ease; }
.cta-form input[type="file"]::file-selector-button:hover { opacity: .85; }
.section--dark .cta-form input[type="file"]::file-selector-button { background: var(--inv); color: var(--ink); }
.phone-row { display: flex; gap: var(--s-8); }
.phone-row .phone-code { flex: 0 0 auto; width: auto; max-width: 44%; }
.phone-row input { flex: 1 1 auto; min-width: 0; }
.section--dark .field .req, .section--dark .field__error { color: #ff9a9a; }
.section--dark .cta-form input[type="file"] { color: var(--inv-mut); }

/* Final CTA — heading reveals word by word, fields settle in on scroll */
.cta-copy__title .rword { display: inline-block; }
.js .cta-copy__title .rword { opacity: 0; transform: translateY(0.6em);
  transition: opacity .55s ease-out, transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .cta-copy.is-in .cta-copy__title .rword { opacity: 1; transform: none; }
.js .cta-copy.is-in .cta-copy__title .rword:nth-child(1) { transition-delay: .10s; }
.js .cta-copy.is-in .cta-copy__title .rword:nth-child(2) { transition-delay: .18s; }
.js .cta-copy.is-in .cta-copy__title .rword:nth-child(3) { transition-delay: .26s; }
.js .cta-copy.is-in .cta-copy__title .rword:nth-child(4) { transition-delay: .34s; }
.js .cta-copy.is-in .cta-copy__title .rword:nth-child(5) { transition-delay: .42s; }

.js .cta-form > * { opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease-out, transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .cta-form.is-in > * { opacity: 1; transform: none; }
.js .cta-form.is-in > *:nth-child(1) { transition-delay: .14s; }
.js .cta-form.is-in > *:nth-child(2) { transition-delay: .22s; }
.js .cta-form.is-in > *:nth-child(3) { transition-delay: .30s; }
.js .cta-form.is-in > *:nth-child(4) { transition-delay: .38s; }
.js .cta-form.is-in > *:nth-child(5) { transition-delay: .46s; }
.js .cta-form.is-in > *:nth-child(6) { transition-delay: .54s; }

/* Blog post imagery + tables */
.post-figure { margin: var(--s-32) 0; border-radius: var(--r-lg); overflow: hidden; background: var(--subtle); }
.post-figure img { display: block; width: 100%; height: auto; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose .table-scroll { margin: var(--s-32) 0; }

/* Success-story featured photo (rendered black & white) */
.story-figure { margin: 0 0 var(--s-32); border-radius: var(--r-lg); overflow: hidden; background: var(--subtle); }
.story-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); }

/* ==========================================================================
   FOOTER · minimal, whole image, sitemap in top 40%
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 60px) 0 clamp(30px, 3vw, 48px); background: #141414 url("assets/footer-landscape.jpg") center / cover no-repeat; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(rgba(14,14,14,.26), rgba(14,14,14,.55)); }
.footer__box { position: relative; z-index: 2; background: var(--canvas); border: 1px solid var(--bd); border-radius: var(--radius); padding: clamp(32px, 4vw, 56px); }
/* Social row now sits above the Services/Resources/Company columns, so its
   rule and spacing flip from top to bottom. */
.footer__box .footer__social { display: flex; flex-wrap: wrap; gap: var(--s-20); margin-bottom: clamp(24px, 3vw, 36px); padding-bottom: var(--s-20); border-bottom: 1px solid var(--bd); }
.footer__band { position: relative; z-index: 1; margin-top: clamp(44px, 5vw, 76px); text-align: center; padding: 0 var(--gutter); }
.footer__copy-mobile { display: none; }
/* Mobile footer stays simple: white card + plain copyright, no artwork */
@media (max-width: 767px) {
  .site-footer { background: var(--subtle); }
  .site-footer::before { display: none; }
  .footer__band { display: none; }
  .footer__copy-mobile { display: block; font-size: var(--fs-small); color: var(--mut); margin-top: var(--s-16); }
}
.footer__copyline { color: rgba(255,255,255,.82); font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; margin-bottom: clamp(10px, 1.5vw, 18px); }
.footer__wordmark { position: relative; display: inline-block; line-height: 0; }
.footer__ag { display: block; width: min(560px, 74vw); height: auto; opacity: .97; }
.footer__ag-text { position: absolute; left: 57%; top: 53%; transform: translate(-50%, -50%); color: #fff; font-family: var(--font-sans); font-weight: 400; letter-spacing: .14em; font-size: clamp(10px, 1.05vw, 15px); text-transform: uppercase; white-space: nowrap; }
.footer__ag-text b { font-weight: 700; }
.footer__inner { display: flex; gap: clamp(28px, 5vw, 88px); flex-wrap: wrap; align-content: flex-start; }
.footer__col { display: flex; flex-direction: column; gap: var(--s-10); flex: 1 1 auto; min-width: 140px; }
.footer__col-head { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-4); }
.footer__col a { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--sec); transition: color .15s ease; }
.footer__col a:hover { color: var(--ink); }
.footer__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px); padding-top: var(--s-24); border-top: 1px solid var(--bd); }
.footer__brand { display: inline-flex; align-items: center; gap: var(--s-12); }
.footer__brand .brand-logo { width: 30px; height: auto; color: var(--ink); }
.footer__brand span { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.footer__copy { font-size: var(--fs-small); color: var(--mut); }
.footer__social { display: flex; gap: var(--s-20); flex-wrap: wrap; }
.footer__social a { font-size: var(--fs-small); color: var(--mut); text-decoration: none; transition: color .18s ease; }
.footer__social a:hover { color: var(--ink); }

/* Disabled / coming-soon button */
.btn.is-disabled { opacity: .5; pointer-events: none; cursor: default; }

/* Floating back-to-top button */
.to-top { position: fixed; right: clamp(16px, 3vw, 28px); bottom: calc(clamp(16px, 3vw, 28px) + 66px); z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--inv); border: 0; cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: opacity .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { opacity: .88; }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease; transform: none; } }

/* WhatsApp community floating button (constant; expands on hover) */
.wa-fab { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 91;
  display: inline-flex; align-items: center; height: 54px; border-radius: 999px;
  background: #25D366; color: #fff; text-decoration: none; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.wa-fab__icon { width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.wa-fab__icon svg { width: 28px; height: 28px; }
.wa-fab__label { white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden; font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  transition: max-width .42s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease, padding .42s cubic-bezier(0.22, 1, 0.36, 1); }
.wa-fab:hover .wa-fab__label, .wa-fab:focus-visible .wa-fab__label { max-width: 280px; opacity: 1; padding-right: 22px; }
.wa-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-fab__label { transition: opacity .2s ease; } }

/* ==========================================================================
   FULL-BLEED IMAGE BAND (no padding)
   ========================================================================== */
.band { display: block; }
.band__media { position: relative; display: block; }
.band__media img { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .band__media { aspect-ratio: 4 / 5; overflow: hidden; }
  .band__media img { height: 100%; object-fit: cover; object-position: center; }
}

/* Consultant hero: bottom-anchored editorial profile that ends ~70vh, so the next section peeks */
.consultant-hero { display: flex; flex-direction: column; min-height: auto; }
.consultant-hero > .container { display: flex; flex-direction: column; flex: 1 1 auto; }
.consultant-hero .post-hero__grid { margin-top: auto; grid-template-columns: 1.05fr 0.95fr; align-items: end; gap: clamp(32px, 6vw, 88px); }
.consultant-hero .post-hero__media { aspect-ratio: 4 / 5; height: min(48vh, 500px); width: auto; justify-self: end; }
.consultant-hero .post-hero__media img { width: 100%; height: 100%; }
.consultant-hero .article-meta { margin: clamp(32px, 5vh, 52px) 0 0; border-bottom: 0; padding-block: clamp(20px, 3vh, 28px) 0; gap: clamp(24px, 3.5vw, 48px); }
@media (max-width: 860px) {
  .consultant-hero { min-height: auto; }
  .consultant-hero .post-hero__grid { grid-template-columns: 1fr; }
  .consultant-hero .post-hero__media { height: auto; width: 100%; aspect-ratio: 16 / 10; max-height: 340px; justify-self: stretch; }
  .consultant-hero .article-meta { margin-top: var(--s-24); }
}

/* Responsive hardening (audit quick-wins) */
.btn, .chip, .nav__pill, .acc-trigger, .carousel__btn, .to-top, .wa-fab { touch-action: manipulation; }
@media (max-width: 1100px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .wa-fab:hover .wa-fab__label, .wa-fab:focus-visible .wa-fab__label { max-width: min(60vw, 200px); }
}
.band__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-16); flex-wrap: wrap;
  background: rgba(10,10,10,.55); opacity: 0; transition: opacity .3s var(--ease); }
.band__media:hover .band__overlay, .band__media:focus-within .band__overlay { opacity: 1; }

/* ==========================================================================
   LOGO TICKER (flowing marquee)
   ========================================================================== */
.ticker-sec { padding-block: 32px 48px; border-bottom: 1px solid var(--bd); }
.ticker__label { text-align: center; margin-bottom: var(--s-20); }
.ticker { position: relative; 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); }
.ticker__track { display: flex; width: max-content; animation: ticker 44s linear infinite; will-change: transform; }
.ticker__group { display: flex; align-items: center; gap: clamp(48px, 5vw, 88px); padding-right: clamp(48px, 5vw, 88px); flex: none; }
.ticker__track img { height: 46px; width: auto; max-width: 200px; object-fit: contain; filter: grayscale(1); opacity: .9; flex: none; transition: opacity .25s ease; }
.ticker__track img:hover { opacity: 1; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   HOTSPOT (Instagram-style tag on the consultant photo)
   ========================================================================== */
.hotspot { position: absolute; z-index: 4; width: 20px; height: 20px; display: block; }
.hotspot__dot { position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.hotspot__pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.55); animation: hotpulse 2.6s var(--ease) infinite; }
@keyframes hotpulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.8); opacity: 0; } 100% { opacity: 0; } }
.hotspot__tag { position: absolute; left: 50%; bottom: 150%; transform: translate(-50%, 10px); white-space: nowrap;
  background: #fff; color: var(--ink); border-radius: var(--radius); padding: 12px 16px;
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.hotspot:hover .hotspot__tag, .hotspot:focus-visible .hotspot__tag, .hotspot:focus-within .hotspot__tag { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hotspot__tag .label { display: block; color: var(--mut); margin-bottom: 2px; }
.hotspot__tag .name { display: flex; align-items: center; gap: var(--s-6); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 17px; color: var(--ink); }
.hotspot__tag .name svg { width: 14px; height: 14px; }
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(5px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   SERVICE PAGES kit (reusable: Deferred MBA, MBA Admissions, Finance, etc.)
   Feature cards, anatomy spec grid, timeline, pricing tiers. Tokens only,
   one radius, hairlines not shadows. Responsive overrides at the bottom.
   ========================================================================== */
/* ==========================================================================
   CONTENT PAGES kit (articles, lists) - reusable across stories/blog/legal/events
   ========================================================================== */
.story-figure { margin-bottom: var(--s-40); border-radius: var(--radius); overflow: hidden; }
.prose { max-width: 760px; }
.prose > * + * { margin-top: var(--s-20); }
.prose h2 { font-family: var(--font-display); font-weight: var(--t-h2-weight); font-size: var(--t-h3-size); line-height: 1.2; letter-spacing: -.012em; color: var(--ink); margin-top: var(--s-48); }
.prose h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-title); color: var(--ink); margin-top: var(--s-32); }
.prose p, .prose li { font-size: var(--fs-body-l); line-height: 1.72; color: var(--sec); }
.prose ul, .prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-8); }
.prose ul li { list-style: disc; } .prose ol li { list-style: decimal; }
.prose strong { color: var(--ink); font-weight: var(--fw-semibold); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-32); padding-block: var(--s-24); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); margin-bottom: var(--s-40); }
.article-meta__item .label { margin-bottom: var(--s-6); }
.article-meta__item .val { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }

.toc { background: var(--subtle); border: 1px solid var(--bd); border-radius: var(--radius); padding: clamp(20px, 2.5vw, 28px); margin-bottom: var(--s-40); }
.toc__title { margin-bottom: var(--s-12); }
.toc ol { display: flex; flex-direction: column; gap: var(--s-10); padding-left: 1.1em; }
.toc li { list-style: decimal; }
.toc a { font-size: var(--fs-body); color: var(--sec); } .toc a:hover { color: var(--ink); }

.list-stack { display: flex; flex-direction: column; gap: var(--s-12); }
.list-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); flex-wrap: wrap;
  background: var(--canvas); border: 1px solid var(--bd); border-radius: var(--radius); padding: clamp(20px, 2.5vw, 28px); transition: border-color .18s ease; }
.list-card:hover { border-color: var(--bd-strong); }
.list-card__main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 220px; }
.list-card__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-title); color: var(--ink); }
.list-card__meta { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: .02em; color: var(--mut); display: flex; gap: var(--s-16); flex-wrap: wrap; }
.list-card__right { display: flex; align-items: center; gap: var(--s-20); flex-wrap: wrap; }
.list-card__price { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-title); color: var(--ink); }

.flow { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-16); }
.flow--sm { gap: var(--s-10); }
.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.stat-band__item { border-top: 1px solid var(--bd-strong); padding-top: var(--s-20); }
.stat-band__item .num { color: var(--ink); display: block; }
.stat-band__lbl { margin-top: var(--s-10); color: var(--mut); font-size: var(--fs-body); max-width: 26ch; }
@media (max-width: 860px) { .stat-band { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .stat-band { grid-template-columns: 1fr; } }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-14) var(--s-40); }
.checklist li { display: flex; align-items: flex-start; gap: var(--s-12); font-size: var(--fs-body-l); color: var(--sec); }
.checklist li svg { width: 20px; height: 20px; color: var(--ink); flex: none; margin-top: 4px; }
@media (max-width: 860px) { .checklist { grid-template-columns: 1fr; } }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
/* A grid/flex item's automatic minimum is its min-content width. The country
   select carries 200+ options ("Lao People's Democratic Republic"), so without
   min-width:0 that one field widened the whole column past the phone viewport
   and the page scrolled sideways. Same reason for the fields and stat tiles. */
.split-2 > * { min-width: 0; }
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; } }
.bc-stats { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; gap: clamp(18px, 3vw, 30px); margin-top: var(--s-24); }
.bc-stat { border-top: 1px solid var(--bd-strong); padding-top: var(--s-14); min-width: 0; }
.bc-stat__num { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(24px, 3vw, 32px); line-height: 1.1; color: var(--ink); }
.bc-stat__lbl { margin-top: var(--s-8); color: var(--mut); font-size: var(--fs-small); line-height: 1.4; }

/* ---- Result dials (donut charts) --------------------------------------
   Monochrome by design: the arc is ink, the remainder is a light track, and
   every quantity is written out in the caption, so nothing is carried by
   colour alone. JS animates the arc + number; the markup already holds the
   final values, so it reads correctly with JS off. ---------------------- */
.dials { display: grid; gap: clamp(22px, 3vw, 40px) clamp(16px, 2.4vw, 32px); margin-top: var(--s-28); }
.dials--2 { grid-template-columns: repeat(2, 1fr); }
.dials--3 { grid-template-columns: repeat(3, 1fr); }
.dials--4 { grid-template-columns: repeat(4, 1fr); }
.dial { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.dial__ring { position: relative; width: var(--dial-size, 112px); aspect-ratio: 1; flex: none; }
.dial__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__track { fill: none; stroke: var(--dial-track, var(--bd)); stroke-width: 7; }
.dial__arc { fill: none; stroke: var(--dial-arc, var(--ink)); stroke-width: 7; }
.dial__val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1; letter-spacing: -.02em; color: var(--dial-ink, var(--ink)); }
.dial__cap { margin-top: var(--s-14); font-size: var(--fs-small); line-height: 1.45;
  color: var(--dial-mut, var(--mut)); max-width: 24ch; }
.dial__cap b { display: block; font-weight: var(--fw-semibold); color: var(--dial-ink, var(--ink)); }
.dial__cap span { display: block; margin-top: 3px; }

/* On dark surfaces */
.dials--inv { --dial-arc: var(--inv); --dial-track: rgba(255,255,255,.34); --dial-ink: var(--inv); --dial-mut: rgba(255,255,255,.92); }

/* ---- Form submission states -------------------------------------------
   .hp is the honeypot: off-screen rather than display:none, because some bots
   skip fields that are hidden outright but still fill positioned ones. ---- */
/* display:none, not off-screen. An off-screen field is still laid out and
   password managers fill it; display:none is skipped far more reliably. */
.hp { display: none; }
.form-status { margin-top: var(--s-12); font-size: var(--fs-small); line-height: 1.5; color: var(--mut); }
.form-status:empty { display: none; }
.form-status--error { color: #b3261e; }
.form-status--error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.section--dark .form-status--error { color: #ff9a9a; }
.form-done { border: 1px solid var(--bd-strong); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); background: var(--canvas); }
.form-done p { margin-top: var(--s-10); color: var(--sec); }
.form-done a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.section--dark .form-done { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); }
.section--dark .form-done .h-title, .section--dark .form-done a { color: var(--inv); }
.section--dark .form-done p { color: var(--inv-mut); }

/* A consultant card with no profile to open. Kills the affordances that say
   "click me" — lift, pointer, colour shift, image zoom — so a card with nowhere
   to go reads as deliberate rather than broken. */
.hcard--static { cursor: default; }
.hcard--static:hover { transform: none; box-shadow: none; border-color: var(--bd); }
.hcard--static:hover .h-title,
.hcard--static:hover .consultant-role,
.hcard--static:hover .body-m { color: inherit; }
.hcard--static:hover .media img,
.hcard--static:hover .cms-img { transform: none; }

/* ==========================================================================
   NEW ELEMENTS  ·  ingested from "New Elements/ag-working-philosophy-preview.html"
   Three drop-in sections. Everything is prefixed because the source preview
   used generic names (.flow, .comm-grid, .dot, .cell, .node, .bar) that already
   mean something else on this site:
     pf-  Working philosophy   (three principle rows, each with a diagram)
     cl-  Community            (dark, with the live-channel mock)
     ys-  Year strip           (results by intake year)
   Animation hooks off the site's own reveal system: put data-reveal on the
   element and its inner motion keys off .is-in, which main.js already adds.
   ========================================================================== */

/* ---- pf · working philosophy ------------------------------------------- */
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding-block: clamp(40px, 5vw, 64px); }
.pf-row + .pf-row { border-top: 1px solid var(--bd); }
.pf-row:first-of-type { padding-top: 0; }
.pf-row:last-of-type { padding-bottom: 0; }
.pf-row .pf-viz { order: 2; }             /* text left, diagram right — never alternating */
.pf-row .pf-k { margin-bottom: var(--s-12); }
.pf-row .h3 { margin-bottom: var(--s-16); text-wrap: balance; }
.pf-copy { color: var(--sec); font-size: var(--fs-body-l); line-height: 1.6; max-width: 52ch; }
.pf-viz { background: var(--subtle); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px); min-height: clamp(280px, 28vw, 340px);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* pf diagram 1 · one counsellor + fifty workshops */
.pf-eq { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.pf-eq__row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 2vw, 28px); }
.pf-eq__col { display: flex; flex-direction: column; align-items: center; gap: var(--s-12); }
.pf-one { width: clamp(72px, 7vw, 88px); aspect-ratio: 1; border-radius: var(--radius); background: var(--ink); color: var(--inv);
  display: grid; place-items: center; font-weight: var(--fw-semibold); font-size: clamp(26px, 3vw, 34px); position: relative; }
.pf-one::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--bd-strong); border-radius: 16px;
  opacity: 0; transform: scale(.92); transition: opacity .5s ease .5s, transform .6s var(--ease) .5s; }
.pf-viz.is-in .pf-one::after { opacity: 1; transform: none; }
.pf-op { font-size: clamp(24px, 2.4vw, 30px); color: var(--faint); align-self: center; padding-bottom: 34px; }
.pf-tiles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: clamp(150px, 15vw, 195px); }
.pf-tiles span { aspect-ratio: 1; border-radius: 3px; background: var(--bd-strong); opacity: .3; transform: scale(.5);
  transition: opacity .45s ease, transform .55s var(--ease), background .45s ease; }
.pf-viz.is-in .pf-tiles span { opacity: 1; transform: none; background: var(--ink); }
.pf-eq__cap { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); text-align: center; line-height: 1.35; }
.pf-eq__cap small { display: block; font-weight: var(--fw-regular); color: var(--mut); font-size: 12.5px; margin-top: 2px; }
.pf-eq__res { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--sec); border: 1px solid var(--bd-strong);
  border-radius: var(--radius); padding: 9px 16px; background: var(--canvas);
  opacity: 0; transform: translateY(8px); transition: opacity .5s ease 1.1s, transform .6s var(--ease) 1.1s; }
.pf-viz.is-in .pf-eq__res { opacity: 1; transform: none; }

/* pf diagram 2 · knowledge flows down */
.pf-flow { display: flex; flex-direction: column; width: min(340px, 100%); }
.pf-node { border: 1px solid var(--bd-strong); background: var(--canvas); border-radius: var(--radius); padding: 14px 18px;
  text-align: center;
  opacity: 0; transform: translateY(-10px); transition: opacity .5s ease, transform .6s var(--ease); }
.pf-node__t { font-size: 15px; font-weight: var(--fw-semibold); }
.pf-node__s { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.pf-node--you { background: var(--ink); border-color: var(--ink); color: var(--inv); }
.pf-node--you .pf-node__s { color: var(--inv-mut); }
.pf-viz.is-in .pf-node { opacity: 1; transform: none; }
.pf-viz.is-in .pf-node:nth-of-type(2) { transition-delay: .35s; }
.pf-viz.is-in .pf-node:nth-of-type(3) { transition-delay: .7s; }
.pf-pipe { width: 2px; align-self: center; height: clamp(24px, 2.6vw, 34px); opacity: 0; transition: opacity .4s ease;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 4px, transparent 4px 9px); background-size: 2px 9px; }
.pf-viz.is-in .pf-pipe { opacity: 1; animation: pf-dash 1.1s linear infinite; }
.pf-viz.is-in .pf-pipe:nth-of-type(2) { transition-delay: .25s; }
.pf-viz.is-in .pf-pipe:nth-of-type(4) { transition-delay: .6s; }
@keyframes pf-dash { to { background-position: 0 9px; } }

/* pf diagram 3 · aiming high */
.pf-aim { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.pf-aim__chart { display: flex; align-items: flex-end; gap: clamp(12px, 1.6vw, 20px); height: clamp(150px, 18vw, 200px); position: relative; }
.pf-aim__line { position: absolute; left: 0; right: 0; bottom: 46%; border-top: 1px dashed var(--bd-strong);
  opacity: 0; transition: opacity .6s ease .9s; pointer-events: none; }
.pf-viz.is-in .pf-aim__line { opacity: 1; }
.pf-tier { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: var(--s-8); position: relative; z-index: 1; }
.pf-tier__bar { border-radius: var(--radius) var(--radius) 0 0; background: var(--bd-strong); height: 0; transition: height .9s var(--ease); }
.pf-tier__t { font-size: 12.5px; font-weight: var(--fw-semibold); text-align: center; color: var(--mut); }
.pf-tier--top .pf-tier__bar { background: var(--ink); }
.pf-tier--top .pf-tier__t { color: var(--ink); }
.pf-viz.is-in .pf-tier:nth-child(2) .pf-tier__bar { height: 24%; }
.pf-viz.is-in .pf-tier:nth-child(3) .pf-tier__bar { height: 44%; transition-delay: .12s; }
.pf-viz.is-in .pf-tier:nth-child(4) .pf-tier__bar { height: 66%; transition-delay: .24s; }
.pf-viz.is-in .pf-tier:nth-child(5) .pf-tier__bar { height: 90%; transition-delay: .36s; }
.pf-legend { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
.pf-legend span.pf-lg { display: inline-flex; align-items: center; gap: var(--s-8); font-size: 12.5px; color: var(--mut); }
.pf-legend .pf-dash { width: 22px; border-top: 1px dashed var(--bd-strong); display: inline-block; }
.pf-legend .pf-key { width: 10px; height: 10px; border-radius: 3px; background: var(--ink); display: inline-block; }
.pf-legend b { color: var(--ink); font-weight: var(--fw-semibold); }

/* ---- cl · community with live-channel mock ----------------------------- */
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.cl-grid .h2 { margin-top: var(--s-16); }
.cl-grid .body-l { margin-top: var(--s-16); max-width: 50ch; }
.cl-grid .btn { margin-top: var(--s-32); }
.cl-chat { background: var(--d-tile); border: 1px solid var(--d-hair); border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: var(--s-12); min-width: 0; }
.cl-chat__head { display: flex; align-items: center; gap: var(--s-10); padding-bottom: 14px; border-bottom: 1px solid var(--d-hair); }
.cl-dot { width: 9px; height: 9px; border-radius: 50%; background: #25D366; flex: none; animation: cl-pulse 2.2s infinite; }
@keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 9px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.cl-chat__t { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; color: var(--inv-mut); }
.cl-bub { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 4px 12px 12px 12px;
  padding: 12px 15px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.88); overflow-wrap: break-word;
  opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .55s var(--ease); }
.cl-bub b { display: block; color: var(--inv); font-weight: var(--fw-semibold); font-size: 12.5px; letter-spacing: .02em; margin-bottom: 3px; }
.cl-bub .cl-tm { display: block; font-size: 11px; color: rgba(255,255,255,.38); margin-top: var(--s-6); text-align: right; }
.cl-chat.is-in .cl-bub { opacity: 1; transform: none; }
.cl-chat.is-in .cl-bub:nth-of-type(2) { transition-delay: .5s; }
.cl-chat.is-in .cl-bub:nth-of-type(3) { transition-delay: 1s; }
.cl-typing { display: inline-flex; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  border-radius: 4px 12px 12px 12px; padding: 12px 16px; width: max-content; opacity: 0; transition: opacity .4s ease 1.6s; }
.cl-chat.is-in .cl-typing { opacity: 1; }
.cl-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); animation: cl-ty 1.2s infinite; }
.cl-typing i:nth-child(2) { animation-delay: .15s; }
.cl-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cl-ty { 0%,60%,100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---- ys · results by intake year --------------------------------------- */
.ys-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd-strong);
  border: 1px solid var(--bd-strong); border-radius: var(--radius); overflow: hidden; }
.ys-cell { background: var(--canvas); padding: clamp(20px, 2.6vw, 32px); min-width: 0; }
.ys-yr { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.ys-n { font-family: var(--font-display); font-size: var(--fs-num); font-weight: var(--fw-semibold); letter-spacing: -.02em;
  line-height: 1; margin-top: var(--s-12); font-variant-numeric: tabular-nums; }
.ys-cap { font-size: 13px; color: var(--mut); margin-top: var(--s-8); display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.ys-delta { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--ink); border: 1px solid var(--bd-strong);
  border-radius: var(--radius); padding: 2px 8px; background: var(--subtle); white-space: nowrap; }
.ys-spark { height: 5px; border-radius: 3px; background: var(--bd); margin-top: var(--s-16); overflow: hidden; }
.ys-spark i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 1s var(--ease) .25s; }
.ys-cell--hot { background: var(--ink); color: var(--inv); }
.ys-cell--hot .ys-yr, .ys-cell--hot .ys-cap { color: var(--inv-mut); }
.ys-cell--hot .ys-delta { color: var(--inv); border-color: var(--d-hair); background: var(--d-tile); }
.ys-cell--hot .ys-spark { background: var(--d-hair); }
.ys-cell--hot .ys-spark i { background: var(--inv); }
.ys-strip.is-in .ys-cell:nth-child(1) .ys-spark i { width: 60%; }
.ys-strip.is-in .ys-cell:nth-child(2) .ys-spark i { width: 73%; }
.ys-strip.is-in .ys-cell:nth-child(3) .ys-spark i { width: 86%; }
.ys-strip.is-in .ys-cell:nth-child(4) .ys-spark i { width: 100%; }
.ys-foot { display: flex; flex-wrap: wrap; gap: var(--s-16); justify-content: space-between; align-items: center; margin-top: var(--s-24); }
.ys-foot .ys-total { font-weight: var(--fw-semibold); font-size: var(--fs-title); }
.ys-foot .ys-fine { color: var(--mut); font-size: var(--fs-small); }

@media (max-width: 1023px) { .pf-row { gap: 48px; } .cl-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 860px) {
  .pf-row { grid-template-columns: 1fr; gap: var(--s-24); padding-block: 40px; }
  .pf-row .pf-viz { order: -1; }
  .pf-viz { min-height: 0; padding: 22px 16px; }
  .pf-copy { max-width: none; }
}
@media (max-width: 620px) { .ys-strip { grid-template-columns: 1fr 1fr; } .ys-foot { flex-direction: column; align-items: flex-start; gap: var(--s-8); } }
@media (max-width: 480px) {
  .pf-eq__row { flex-direction: column; align-items: center; gap: var(--s-10); }
  .pf-op { padding-bottom: 0; }
  .pf-tiles { width: min(190px, 58vw); }
  .pf-aim__chart { height: 150px; }
  .pf-legend { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
  .ys-n { font-size: clamp(28px, 9vw, 38px); }
  .ys-cell { padding: 16px 14px; }
  .cl-chat { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-node, .cl-bub, .pf-eq__res, .pf-tiles span, .cl-typing, .pf-aim__line { opacity: 1; transform: none; transition: none; }
  .pf-tiles span { background: var(--ink); }
  .pf-pipe { opacity: 1; animation: none; }
  .pf-tier__bar, .ys-spark i { transition: none; }
  .pf-aim__chart .pf-tier:nth-child(2) .pf-tier__bar { height: 24%; }
  .pf-aim__chart .pf-tier:nth-child(3) .pf-tier__bar { height: 44%; }
  .pf-aim__chart .pf-tier:nth-child(4) .pf-tier__bar { height: 66%; }
  .pf-aim__chart .pf-tier:nth-child(5) .pf-tier__bar { height: 90%; }
  .pf-one::after { opacity: 1; transform: none; transition: none; }
  .ys-strip .ys-cell:nth-child(1) .ys-spark i { width: 60%; }
  .ys-strip .ys-cell:nth-child(2) .ys-spark i { width: 73%; }
  .ys-strip .ys-cell:nth-child(3) .ys-spark i { width: 86%; }
  .ys-strip .ys-cell:nth-child(4) .ys-spark i { width: 100%; }
  .cl-dot, .cl-typing i { animation: none; }
}

/* ---- Community grid (dark section on About) ---------------------------- */
.section--dark .label { color: var(--inv-mut); }
.comm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 56px); margin-top: var(--gap-head); }
.comm-grid > div { border-top: 1px solid rgba(255,255,255,.26); padding-top: var(--s-20); }
.comm-grid__ttl { font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-title); line-height: 1.3; letter-spacing: -.01em; color: var(--inv); }
.comm-grid p { margin-top: var(--s-12); color: var(--inv-mut); font-size: var(--fs-body); line-height: 1.6; }
.comm-cta { margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 860px) { .comm-grid { grid-template-columns: 1fr; gap: var(--s-32); } }

/* Ring left, caption right — for the narrow right-hand column of a dark feature */
.dial--row { flex-direction: row; align-items: center; text-align: left; gap: var(--s-18); }
.dial--row .dial__ring { --dial-size: 94px; }
.dial--row .dial__cap { margin-top: 0; flex: 0 0 25ch; max-width: 25ch; } /* fixed so the rings share one left edge */
.results-feature__stats--dials { display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end; gap: var(--s-32); margin-top: 0; }

/* Compact variant for the narrow column beside the booking form */
.dials--tight { --dial-size: 92px; gap: var(--s-24) var(--s-16); }
.dials--tight .dial__cap { margin-top: var(--s-10); max-width: 20ch; }

@media (max-width: 1023px) { .dials--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .dials--2, .dials--3, .dials--4 { grid-template-columns: 1fr 1fr; }
  .dials--3 .dial:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .dials--2, .dials--3, .dials--4 { grid-template-columns: 1fr; } .dials--3 .dial:last-child { grid-column: auto; } }
/* Booking-page hero: left-align on mobile so it shares one left edge with the form below */
@media (max-width: 860px) {
  .page-hero--start .page-hero__inner { text-align: left; align-items: flex-start; }
  .page-hero--start .page-hero__sub { max-width: 100%; }
  .page-hero--start .page-hero__cta { justify-content: flex-start; }
}

/* Interior page hero (distinct from Home's signature split marquee hero):
   centered, compact, no large media block. Home keeps .section--hero / .hero__grid. */
.page-hero { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44vh; padding-block: clamp(48px, 6vh, 76px) clamp(36px, 4vh, 56px); border-bottom: 1px solid var(--bd); }
.page-hero + .section { padding-top: clamp(28px, 3vw, 48px); }
.page-hero > .container { min-width: 0; }
.page-hero__inner { width: 100%; max-width: 820px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.page-hero .label { margin-bottom: var(--s-18); }
.page-hero__title { margin-bottom: var(--s-20); max-width: 100%; overflow-wrap: break-word; }
.page-hero__sub { max-width: min(60ch, 100%); margin-bottom: var(--s-32); color: var(--sec); }
.page-hero__cta { justify-content: center; }
/* Supporting note inside a page hero: sits between the subtitle and the CTAs,
   set on a subtle card so it reads as a second beat rather than more subtitle. */
.hero-note { max-width: min(64ch, 100%); margin: 0 0 var(--s-36, 36px); padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  background: var(--subtle); border: 1px solid var(--bd); border-radius: var(--radius); }
.hero-note__title { margin-bottom: var(--s-10); }
.hero-note p { color: var(--sec); }
/* Scroll cue — signals there's a section below the hero */
.page-hero::after { content: ""; position: absolute; left: 50%; bottom: 20px; width: 20px; height: 20px;
  transform: translateX(-50%) rotate(45deg); border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut);
  opacity: .55; animation: heroCue 1.8s ease-in-out infinite; }
@keyframes heroCue {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(45deg); opacity: .45; }
  50%      { transform: translateX(-50%) translateY(7px) rotate(45deg); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .page-hero::after { animation: none; } }

/* Detail pages (blog post / success story): breadcrumb + two-column hero */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--mut); margin-bottom: var(--s-24); }
.crumbs a { color: var(--mut); text-decoration: none; transition: color .18s ease; }
.crumbs a:hover { color: var(--ink); }
.crumbs__sep { color: var(--faint); }
.crumbs [aria-current] { color: var(--ink); font-weight: var(--fw-medium); }
.post-hero { border-bottom: 1px solid var(--bd); padding-block: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 52px); }
.post-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.post-hero__text { min-width: 0; }
.post-hero__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: var(--s-14) 0 var(--s-16); text-wrap: balance; color: var(--ink); }
.post-hero__sub { color: var(--sec); font-size: var(--fs-body-l); line-height: 1.55; max-width: 48ch; }
.post-hero__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: var(--s-20); }
.post-hero__logos img { height: 26px; width: auto; filter: grayscale(1); opacity: .82; }
.post-hero__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--subtle); aspect-ratio: 4 / 5; }
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.article-meta__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.article-meta__logos img { height: 22px; width: auto; filter: grayscale(1); opacity: .82; }
@media (max-width: 860px) {
  .post-hero__grid { grid-template-columns: 1fr; gap: var(--s-24); }
  .post-hero__media { order: -1; aspect-ratio: 16 / 10; max-height: 340px; }
}

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.feature-card { background: var(--canvas); border: 1px solid var(--bd); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: var(--s-10); }

.anatomy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; }
.anatomy__group { background: var(--canvas); padding: clamp(24px, 3vw, 40px); }
.anatomy__label { color: var(--ink); margin-bottom: var(--s-14); }
.anatomy__items { font-size: var(--fs-body-l); line-height: 1.75; color: var(--sec); }

.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-24); }
.timeline__step { position: relative; padding-top: var(--s-32); border-top: 1px solid var(--bd-strong); display: flex; flex-direction: column; gap: var(--s-8); }
.timeline__no { position: absolute; top: var(--s-12); left: 0; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: .08em; color: var(--mut); }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); align-items: stretch; }
.price-card { position: relative; background: var(--canvas); border: 1px solid var(--bd); border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--s-14); }
.price-card--featured { border-color: var(--ink); }
.price-card__tag { position: absolute; top: -1px; right: clamp(24px, 3vw, 32px); transform: translateY(-50%); background: var(--ink); color: var(--inv); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r-sm); }
.price-card__name { color: var(--ink); }
.price-card__amount { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.price-card__list { display: flex; flex-direction: column; gap: var(--s-12); margin: var(--s-8) 0 var(--s-16); flex: 1; }
.price-card__list li { display: flex; align-items: flex-start; gap: var(--s-10); font-size: var(--fs-body); line-height: 1.5; color: var(--sec); }
.price-card__list li svg { width: 18px; height: 18px; color: var(--ink); flex: none; margin-top: 2px; }
.price-card__cta { width: 100%; margin-top: auto; }

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; }
  .anatomy { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; }
}
@media (max-width: 540px) { .timeline { grid-template-columns: 1fr; } }

/* ==========================================================================
   RESPONSIVE · device tiers
   320-480 portrait · 481-767 landscape · 768-1023 tablet · 1024-1200 laptop
   1201-1440 large · 1441+ ultra-wide
   ========================================================================== */

/* Desktop / Mac: true 124px side padding (gutter folded into max-width so it doesn't stack) */
@media (min-width: 1201px) { :root { --gutter: 124px; --nav-pad: 124px; --container: 1528px; } }

/* Laptop / small desktop */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-40) var(--s-28); }
}

/* Tablet */
@media (max-width: 1023px) {
  :root { --pad-section: 88px; --pad-dark: 88px; }
  .nav__menu, .nav__cta { display: none; }
  .nav__hamburger { display: inline-flex; }
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__title { max-width: 16ch; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .results-feature__inner { flex-direction: column; justify-content: flex-end; gap: var(--s-48); min-height: clamp(480px, 70vh, 620px); }
  .results-feature__head { align-self: auto; order: 2; }
  .results-feature__stats { align-items: flex-start; text-align: left; order: 1; gap: var(--s-40); }
  .tquote { flex-basis: 82%; }
  .cta-split { grid-template-columns: 1fr; gap: 44px; }
}

/* Mobile landscape */
@media (max-width: 767px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .data-table th, .data-table td { padding: 13px 14px; }
  .data-table .col-school { width: auto; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll .data-table { min-width: 520px; }
  .carousel__nav { display: none; }
  .carousel__track { grid-auto-columns: minmax(80%, 80%); }
}

/* Mobile portrait */
@media (max-width: 480px) {
  :root { --pad-section: 80px; --pad-dark: 80px; --gap-head: 40px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--s-40); }
  .results-feature__inner { padding-block: 64px; }
  .field-row { grid-template-columns: 1fr; }
  .recog__row { gap: var(--s-20); }
  .recog__row .wordmark { flex: 0 0 auto; }
  .footer__meta { flex-direction: column; align-items: flex-start; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rg-img, .acc-panel, .media__zoom { transition: none; }
  .media-badge--almost::after { animation: none; }
  .media img, .cms-img, .pillar__motif, .pillar__stage, .pillar__action { transition: none; }
  .hcard:hover .media img, .hcard:hover .cms-img, .nav__feature:hover .cms-img, .pillar:hover .pillar__motif { transform: none; }
  .results-feature__consultant, .band__overlay, .tcar__track, .tquote { transition: none; }
  .hcard:hover { transform: none; }
  .hcard:hover .link-arrow .arrow { animation: none; }
  .ticker__track { animation: none; }
  .hotspot__pulse { animation: none; }
  .story-card { position: static; }
  .stories .sec-head { position: static; padding-bottom: 0; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .js .cta-copy__title .rword, .js .cta-form > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   CARD IMAGE HOVER ZOOM (subtle) + PILLARS (process / focus areas)
   ========================================================================== */
.media img, .cms-img,
.story-card__photo img, .tquote__face img {
  filter: grayscale(1);
  transition: transform .6s var(--ease), filter .6s var(--ease);
  will-change: transform, filter;
}
.media:hover .media img, .media:hover .cms-img,
.page-banner:hover .cms-img,
.nav__feature:hover .cms-img,
.hcard:hover .media img, .hcard:hover .cms-img,
.split-2:hover .media .cms-img,
.list-card:hover .media .cms-img,
.story-card:hover .story-card__photo img, .story-card:hover .story-card__photo .cms-img,
.tquote:hover .tquote__face img,
.results-feature:hover .cms-img {
  filter: grayscale(0);
  transform: scale(1.05);
}

/* Pillars: monochrome interactive "what we get right" stages */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.pillar { cursor: default; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pillar__stage { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1 / 1; margin: 0 auto var(--s-20);
  border: 1px solid var(--bd); border-radius: var(--radius); background: var(--subtle);
  display: grid; place-items: center; overflow: hidden; transition: background .45s var(--ease), border-color .3s ease; }
.pillar:hover .pillar__stage { background: var(--ink); border-color: var(--ink); }
.pillar__motif { width: 92px; height: 92px; color: var(--ink); transition: color .45s var(--ease), transform .7s var(--ease); }
.pillar:hover .pillar__motif { color: var(--inv); transform: scale(1.08); }
.pillar--spark:hover .pillar__motif { transform: scale(1.08) rotate(45deg); }
.pillar--rings:hover .pillar__motif { transform: scale(1.12); }
.pillar__action { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(10px);
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--inv); opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.pillar__action .arrow { color: var(--inv); }
.pillar:hover .pillar__action { opacity: 1; transform: translateX(-50%) translateY(0); }
.pillar__title { margin-bottom: var(--s-6); }
.pillar p { max-width: 30ch; margin-inline: auto; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: var(--s-40); }
  .pillar__stage { max-width: 260px; }
}

/* ==========================================================================
   IMAGE CMS - warm cinematic photos injected from img-cms.js manifest.
   UI stays monochrome; PHOTOGRAPHY is warm/cinematic per brand guidelines.
   ========================================================================== */
.cms-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.media.has-img > .media__zoom, .media.has-img > .media__glyph, .media.has-img > .media__label { display: none; }
.media.has-img { background: var(--d-tile); }
.media.has-img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .05; mix-blend-mode: overlay; }
.page-banner { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: var(--d-tile); }
.page-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,10,.30), rgba(10,10,10,0) 48%); }
@media (max-width: 640px) { .page-banner { aspect-ratio: 3 / 2; } }

/* ==========================================================================
   Responsive quick-wins (from audit)
   ========================================================================== */
/* Safe-area offsets for fixed elements (needs viewport-fit=cover in the meta) */
.wa-fab { right: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-right, 0px)); bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px)); }
.to-top { bottom: calc(clamp(16px, 3vw, 28px) + 66px + env(safe-area-inset-bottom, 0px)); }
.drawer { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
/* Collapse the nav to a hamburger earlier so the pills never cram (1024–1180) */
@media (max-width: 1300px) { .nav__menu, .nav__cta { display: none; } .nav__hamburger { display: inline-flex; } }
/* Small-phone containment */
@media (max-width: 480px) {
  .wa-fab:hover .wa-fab__label, .wa-fab:focus-visible .wa-fab__label { max-width: min(60vw, 200px); }
  .page-hero { min-height: auto; padding-block: clamp(56px, 8vh, 72px) clamp(44px, 7vh, 60px); }
  .page-hero::after { display: none; }
}
/* Roomier scrollable tables + a right-edge fade cue */
@media (max-width: 767px) { .table-scroll .data-table { min-width: 640px; } }
.table-scroll { position: relative; }
.table-scroll::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--canvas)); }

/* ==========================================================================
   Motion polish — subtle micro-interactions (reduced-motion aware)
   ========================================================================== */
/* Buttons: gentle lift on hover + tactile press */
.btn { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .2s var(--ease), box-shadow .2s ease; }
.btn--primary:hover, .btn--inverse:hover, .btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,10,10,.14); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
/* Secondary cards (feature / list rows) lift on hover */
.feature-card, .list-card { transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.feature-card:hover, .list-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(10,10,10,.08); }
/* Floating buttons: springy lift */
.wa-fab { transition: transform .25s var(--ease), box-shadow .25s ease; }
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.26); }
.to-top.is-visible:hover { transform: translateY(-3px); }
/* Nav pills: subtle press */
.nav__pill { transition: background .18s ease, transform .16s var(--ease); }
.nav__pill:active { transform: scale(.97); }
/* Reading progress bar (top of page) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--ink), #7a7a7a); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .feature-card, .list-card, .wa-fab, .nav__pill { transition: background .18s ease, border-color .18s ease, color .18s ease; }
  .btn:hover, .btn:active, .feature-card:hover, .list-card:hover, .wa-fab:hover, .to-top.is-visible:hover, .nav__pill:active { transform: none; box-shadow: none; }
  .scroll-progress { display: none; }
}

/* Final CTA ("Ready to build your case?") — graduation image + dark overlay */
.section--dark#book { position: relative; overflow: hidden; background: var(--ink); }
.section--dark#book::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(10,10,10,.74), rgba(10,10,10,.80)), url("assets/cta-graduate.jpg");
  background-size: cover; background-position: center 26%; }
.section--dark#book > .container { position: relative; z-index: 1; }

/* Recognition press-logo ticker */
.recog-ticker { overflow: hidden; margin-bottom: var(--s-28);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.recog-ticker .ticker__track { display: flex; width: max-content; animation: ticker 34s linear infinite; }
.recog-ticker .ticker__group { display: flex; align-items: center; gap: clamp(36px, 6vw, 72px); padding-right: clamp(36px, 6vw, 72px); flex: none; }
.recog-ticker img { height: clamp(24px, 3.4vw, 32px); width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: .6; }
.recog-ticker:hover .ticker__track { animation-play-state: paused; }

/* Mobile: footer 2-col grid + CTA form stacking (kills the right-side overflow) */
@media (max-width: 620px) {
  .footer__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(16px, 5vw, 28px); row-gap: clamp(28px, 7vw, 40px); }
  .footer__col { min-width: 0; flex: none; }
  .footer__ag { width: min(440px, 84vw); }
  .cta-split { grid-template-columns: 1fr; gap: 26px; }
  .field-row { grid-template-columns: 1fr; }
  .cta-form { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { .recog-ticker .ticker__track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* Mobile "Why Choose Us" — pinned scrub with the card centered, image cropped to the phone (9:16) */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .seq__kicker { left: 50%; transform: translateX(-50%); top: clamp(74px, 11vh, 100px); text-align: center; width: max-content; max-width: 90vw; font-size: clamp(18px, 4.6vw, 24px); }
  .js .seq-card { left: 50%; top: 52%; transform: translate(-50%, -50%); width: 92vw; max-width: 520px; padding: clamp(20px, 5vw, 28px); }
  .js .seq-card__title { font-size: clamp(22px, 6vw, 30px); line-height: 1.14; }
  .js .seq-card__desc { font-size: clamp(14px, 3.8vw, 16px); line-height: 1.5; margin-top: var(--s-12); }
  .js .seq-card__eyebrow { margin-bottom: var(--s-10); }
  .js .seq__progress { width: min(72%, 400px); }
}

/* ==========================================================================
   PHONE OVERRIDES  ·  must live at the end of the file — these selectors are
   no more specific than the base rules they override, so source order decides.
   ========================================================================== */
@media (max-width: 620px) {
  /* Class-of-2026 dials: one centred column instead of a 2-up grid with an
     orphaned third tile, which read as left-aligned on a phone.
     align-self/width are required because the parent .flow sets
     align-items:flex-start, so these blocks shrink-wrap instead of filling
     the column — which is what made them hug the left edge. */
  .dials--tight, .bc-stats { align-self: stretch; width: 100%; }
  .dials--tight { grid-template-columns: 1fr; justify-items: center; }
  .dials--tight .dial { max-width: 30ch; }
  .dials--tight .dial:last-child { grid-column: auto; }
  .dials--tight .dial__cap { max-width: 30ch; }
}
@media (max-width: 560px) {
  .bc-stats { grid-template-columns: 1fr; }
  .check { flex: 1 1 100%; }
  .field-row { grid-template-columns: 1fr; }
}

/* The results table is 640px wide on a phone. .table-wrap carries
   overflow:hidden purely to clip its rounded corners, and that was swallowing
   the overflow so the scrollable parent never saw it — only the 2023 column was
   reachable. Make the wrap itself the scroller below the desktop breakpoint;
   above it the table fits, so nothing changes. */
@media (max-width: 1023px) {
  .table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
}

/* ---- "See all" tile — last slide of the consultant carousel (PREVIEW) ---- */
.seeall { background: var(--ink); border-color: var(--ink); color: var(--inv); display: flex; }
.seeall__inner { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-10);
  height: 100%; padding: clamp(22px, 2.4vw, 28px); }
.seeall__num { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--inv); }
.seeall__lbl { font-size: var(--fs-small); line-height: 1.45; color: var(--inv-mut); }
.seeall__cta { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: var(--s-12);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--inv); }
.seeall__cta .arrow { transition: transform .22s var(--ease); }
.seeall:hover .seeall__cta .arrow { transform: translateX(5px); }

/* ---- Compact 7-across consultant carousel (PREVIEW variant) -------------
   grid-auto-columns is computed so exactly N cards fill the visible track,
   and the arrows already advance by one card width + gap. ---------------- */
.consultants-carousel--7 .carousel__track { --cc-gap: 16px; --cc-n: 7; gap: var(--cc-gap);
  grid-auto-columns: calc((100% - (var(--cc-n) - 1) * var(--cc-gap)) / var(--cc-n)); }
.ccard .hcard__media { aspect-ratio: 1 / 1; }
/* Headshots are square or taller; a centred crop trims the top of the head.
   Bias the crop upward so faces sit high in the frame. */
.ccard .cms-img { object-position: center 15%; }
.ccard .hcard__body { padding: 12px 13px 15px; gap: 3px; }
.ccard .h-title { font-size: 15px; line-height: 1.25; }
.ccard .consultant-role { font-size: 12px; line-height: 1.35; color: var(--mut); }
.ccard.seeall .seeall__inner { padding: 14px 14px 16px; gap: 4px; }
.ccard.seeall .seeall__num { font-size: 40px; }
.ccard.seeall .seeall__lbl { font-size: 12px; line-height: 1.35; }
.ccard.seeall .seeall__cta { font-size: 14px; margin-top: var(--s-8); }
@media (max-width: 1200px) { .consultants-carousel--7 .carousel__track { --cc-n: 5; } }
@media (max-width: 1023px) { .consultants-carousel--7 .carousel__track { --cc-n: 4; } }
/* Phone: two rows that slide together. grid-auto-flow is already column, so
   adding a second row makes items fill down-then-across and halves how far you
   have to swipe. The photo gets shorter so two rows fit a phone screen. */
@media (max-width: 767px) {
  /* stretch, not start: a two-line role must not make a shorter neighbour.
     Cards in a row now match the tallest, so the grid stays even. */
  .consultants-carousel--7 .carousel__track { --cc-n: 2.2; grid-template-rows: repeat(2, 1fr); align-items: stretch; }
  .consultants-carousel--7 .ccard .hcard__media { aspect-ratio: 4 / 3; }
  .consultants-carousel--7 .ccard .cms-img { object-position: center top; }
  /* Tightly-framed headshots already sit high in their own photo, so pinning
     them to the very top rides the face up and clips the chin. Step these
     down slightly. */
  .consultants-carousel--7 .ccard .cms-img[src$="mudit.webp"],
  .consultants-carousel--7 .ccard .cms-img[src$="Sangeet.webp"],
  .consultants-carousel--7 .ccard .cms-img[src$="Chandrika.webp"],
  .consultants-carousel--7 .ccard .cms-img[src$="Simar.webp"],
  .consultants-carousel--7 .ccard .cms-img[src$="aparna.webp"] { object-position: center 14%; }
  .consultants-carousel--7 .ccard .hcard__body { padding: 10px 11px 13px; }
  .consultants-carousel--7 .ccard .h-title { font-size: 14px; }
  .consultants-carousel--7 .ccard .consultant-role { font-size: 11.5px; }
  /* the tile is the odd one out — let it own the last column, full height */
  .consultants-carousel--7 .ccard.seeall { grid-row: span 2; }
  .consultants-carousel--7 .ccard.seeall .seeall__inner { justify-content: center; }
}
@media (max-width: 460px)  { .consultants-carousel--7 .carousel__track { --cc-n: 1.9; } }

/* ---- Success-story cards: portraits were being cropped through the face ---
   These images carry no object-fit, so a tall portrait sat centred in a 16:10
   box and lost the top of the head. Give the frame more height, make the image
   cover it, and bias the crop upward so the face sits comfortably. */
/* The image must be positioned absolutely, not left in flow: as a grid item it
   took its natural height (454px) inside a 278px box, so the parent simply
   clipped the middle and object-position did nothing. Pinning it to inset:0
   makes the box honour its aspect-ratio and lets object-fit actually crop. */
.stories-grid .program-card__media { aspect-ratio: 1 / 1; }
.stories-grid .program-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%; }
/* Full-body shots: crop from the very top or the head is lost. */
.stories-grid .program-card__media img[src$="harasees.jpg"] { object-position: center top; }

/* ---- Results table: phone-only year filter (PREVIEW) --------------------
   Desktop keeps every column and never sees the buttons. On a phone the table
   shows School + the selected column, so it fits without sideways scrolling. */
.year-filter { display: none; }
@media (max-width: 767px) {
  .year-filter { display: flex; margin-bottom: var(--s-20); }
  .year-filter .chip { flex: 1 1 auto; text-align: center; padding-inline: 0; }
  .data-table[data-year="total"] [data-col]:not([data-col="school"]):not([data-col="total"]),
  .data-table[data-year="2023"] [data-col]:not([data-col="school"]):not([data-col="2023"]),
  .data-table[data-year="2024"] [data-col]:not([data-col="school"]):not([data-col="2024"]),
  .data-table[data-year="2025"] [data-col]:not([data-col="school"]):not([data-col="2025"]),
  .data-table[data-year="2026"] [data-col]:not([data-col="school"]):not([data-col="2026"]) { display: none; }
  /* only two columns left, so the 640px min-width and its scroll can go */
  .data-table[data-year] { min-width: 0; }
  .table-wrap:has(.data-table[data-year]) { overflow-x: visible; }
}