@charset "UTF-8";
/* ==========================================================================
   AR GROUP — "ADMISSION DOSSIER" DESIGN SYSTEM
   --------------------------------------------------------------------------
   A deliberately editorial, documentary aesthetic: warm paper ground, deep
   navy ink, a single saffron accent, hairline rules instead of drop shadows,
   and fees set as tabular monospaced figures like an official record.

   Structure
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Rules, tags & section headers
     06  Buttons
     07  Navigation
     08  Hero
     09  College cards (the dossier record)
     10  Fee tables
     11  Filter bar & compare tray
     12  Forms & modal
     13  Stats, features & trust
     14  Footer
     15  Utilities, motion, print
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Paper & ink ----------------------------------------------------- */
  --paper:        #FAF7F1;   /* page ground, warm off-white               */
  --paper-2:      #F3EEE4;   /* tinted band / alternating table row       */
  --paper-3:      #EAE3D5;   /* deeper tint, inset panels                 */
  --card:         #FFFDF9;   /* raised surface                            */

  --ink:          #14213D;   /* primary text, deep navy                   */
  --ink-2:        #3D4A63;   /* secondary text                            */
  --ink-3:        #6B7689;   /* muted / meta text                         */
  --ink-inverse:  #FAF7F1;

  /* --- Accent ----------------------------------------------------------- */
  --accent:       #C2410C;   /* saffron-rust, used sparingly              */
  --accent-warm:  #E8890B;   /* brighter saffron for fills                */
  --accent-soft:  #FBEADB;   /* tinted background for accent tags         */

  --seal:         #7A1E1E;   /* deep red, for "official" seals & stamps   */
  --verify:       #16624A;   /* accredited / verified green               */
  --verify-soft:  #E2F0EA;

  /* --- Rules ------------------------------------------------------------ */
  --rule:         rgba(20, 33, 61, 0.14);
  --rule-strong:  rgba(20, 33, 61, 0.30);
  --rule-hair:    rgba(20, 33, 61, 0.08);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Fluid type scale — mobile through desktop, no media queries needed    */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --t-base: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --t-md:   clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --t-lg:   clamp(1.30rem, 1.16rem + 0.66vw, 1.70rem);
  --t-xl:   clamp(1.65rem, 1.36rem + 1.35vw, 2.50rem);
  --t-2xl:  clamp(2.05rem, 1.55rem + 2.35vw, 3.60rem);
  --t-3xl:  clamp(2.50rem, 1.70rem + 3.70vw, 5.00rem);

  /* --- Space ------------------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y: clamp(3rem, 1.8rem + 5.5vw, 6.5rem);

  /* --- Form ------------------------------------------------------------- */
  --radius:    3px;   /* deliberately sharp — this is paperwork, not an app */
  --radius-lg: 5px;
  --container: 1240px;
  --measure:   68ch;

  /* --- Elevation (used very sparingly) ---------------------------------- */
  --lift:   0 1px 2px rgba(20, 33, 61, 0.05), 0 8px 24px -12px rgba(20, 33, 61, 0.18);
  --lift-2: 0 2px 4px rgba(20, 33, 61, 0.06), 0 18px 40px -16px rgba(20, 33, 61, 0.25);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* clears the sticky header on anchor jumps */
  width: 100%;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  /* Belt-and-suspenders against any horizontal shift, WITHOUT breaking
     position:sticky on descendants (the site header) — overflow:hidden on
     html/body is a well-known way to do exactly that, because hidden
     establishes a scroll container that sticky positioning computes
     against. overflow:clip contains the same way visually but does not
     create a scroll container, so it leaves sticky positioning intact. */
  overflow-x: clip;
  width: 100%;
  max-width: 100%;

  /* Barely-there paper grain. Cheap, no image request. */
  background-image:
    radial-gradient(circle at 15% 12%, rgba(194, 65, 12, 0.030), transparent 30%),
    radial-gradient(circle at 85% 78%, rgba(20, 33, 61, 0.030), transparent 32%);
  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Visible, on-brand focus for keyboard users only. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-warm); color: #fff; }

/* Skip link — first tab stop on every page. */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--ink); color: var(--ink-inverse);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variation-settings: 'opsz' 40;   /* only axes we actually load */
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); line-height: 1.25; }

h5, h6 {
  font-family: var(--font-body);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
h5 { font-size: var(--t-md); }
h6 { font-size: var(--t-base); }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s-4); }
.prose strong { font-weight: 650; color: var(--ink); }

/* The italic display cut — used for one accented word in a headline */
.display-alt {
  font-style: italic;
  font-variation-settings: 'opsz' 40;
  color: var(--accent);
}

/* Monospaced label — the signature "record field" device */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Any figure — fees, counts, percentages */
.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.text-accent { color: var(--accent); }
.text-muted  { color: var(--ink-3); }

/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--s-6); } }

.container-narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2rem, 1.2rem + 3.5vw, 4rem); }

/* Tinted band, edge to edge */
.band { background: var(--paper-2); border-block: 1px solid var(--rule-hair); }
.band-ink {
  background: var(--ink);
  color: var(--ink-inverse);
}
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--ink-inverse); }
.band-ink .label { color: rgba(250, 247, 241, 0.60); }
.band-ink .lede  { color: rgba(250, 247, 241, 0.82); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Asymmetric editorial split — deliberately not 50/50 */
.split {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
  .split-reverse { grid-template-columns: 5fr 7fr; }
  .split-sticky > :last-child { position: sticky; top: 96px; }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Any wide content (tables, code) must scroll inside itself, never the page */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ==========================================================================
   05  RULES, TAGS & SECTION HEADERS
   ========================================================================== */
.rule { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-6); }
.rule-hair { border-top-color: var(--rule-hair); }

/* The signature section header: index numeral, label, hairline to the edge */
.section-head { margin-bottom: var(--s-7); }

.section-head__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.section-head__index {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex: none;
}
.section-head__meta .label { flex: none; }
.section-head__meta::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.section-head__title { max-width: 22ch; }
.section-head__sub {
  margin-top: var(--s-4);
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.55;
}

/* Tags / badges */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  background: var(--paper);
  white-space: nowrap;
}
.tag-accent { color: var(--accent); border-color: rgba(194, 65, 12, 0.35); background: var(--accent-soft); }
.tag-verify { color: var(--verify); border-color: rgba(22, 98, 74, 0.30); background: var(--verify-soft); }
.tag-solid  { color: #fff; background: var(--ink); border-color: var(--ink); }

/* "Stamped" seal — rotated, for BSCC / featured markers */
.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seal);
  border: 2px solid var(--seal);
  border-radius: var(--radius);
  padding: 0.3em 0.6em;
  transform: rotate(-4deg);
  opacity: 0.85;
}

/* ==========================================================================
   06  BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-inverse);
  --btn-bd: var(--ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 46px;                      /* comfortable touch target */
  padding: 0.7em 1.35em;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s var(--ease), background-color 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--lift); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-accent  { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: #fff; }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn-outline:hover { --btn-bd: var(--ink); background: var(--paper-2); }
.btn-ghost   { --btn-bg: transparent; --btn-fg: var(--ink-2); --btn-bd: transparent; }
.btn-ghost:hover { --btn-fg: var(--ink); background: var(--paper-2); box-shadow: none; }
.btn-wa      { --btn-bg: #1EA855; --btn-bd: #1EA855; --btn-fg: #fff; }

.btn-sm { min-height: 38px; padding: 0.45em 0.9em; font-size: var(--t-xs); }
.btn-lg { min-height: 54px; padding: 0.85em 1.8em; font-size: var(--t-base); }
.btn-block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none;
}

/* Text link with an accent underline that draws in on hover */
.link-underline {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease), color 0.2s var(--ease);
}
.link-underline:hover { background-size: 100% 1.5px; color: var(--accent); }

/* ==========================================================================
   07  NAVIGATION
   ========================================================================== */
/* Floating pill bar, not an edge-to-edge strip — sits with a gap above
   and to the sides so the page shows through around it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: var(--s-3) var(--s-4) 0;
  pointer-events: none;   /* the padding area itself is transparent/inert */
  transition: padding-top 0.25s var(--ease);
}
.site-header.is-scrolled { padding-top: var(--s-2); }

.site-header__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 60px;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--s-4);
  background: rgba(250, 247, 241, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--rule-hair);
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(20, 33, 61, 0.04);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-scrolled .site-header__inner {
  border-color: var(--rule);
  box-shadow: var(--lift-2);
}
@media (min-width: 1024px) { .site-header__inner { min-height: 68px; padding-inline: var(--s-5); } }

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand img { height: 40px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 50px; } }

.brand__text { display: none; line-height: 1.1; }
@media (min-width: 480px) { .brand__text { display: block; } }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Desktop nav ------------------------------------------------------- */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--s-1); }
}
.nav__link {
  position: relative;
  display: block;
  padding: 0.55em 0.85em;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--paper-2); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0.85em; right: 0.85em; bottom: 0.15em;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Dropdown trigger — small chevron signals "this opens a panel", using
   ::before so it never collides with .is-active's own ::after underline
   on the same link. */
.nav__item { position: relative; }
.nav__item > .nav__link {
  padding-right: 1.7em;
}
.nav__item > .nav__link::before {
  content: '';
  position: absolute;
  right: 0.85em; top: 50%;
  width: 6px; height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
  opacity: 0.6;
}
.nav__item:hover > .nav__link::before,
.nav__item:focus-within > .nav__link::before {
  transform: rotate(-135deg);
  margin-top: 0;
}

/* Dropdown panel — a plain, clean list. No numbering, no emoji. */
.nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 300px;
  padding: var(--s-2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(20,33,61,0.02);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
/* A small pointer so the panel visibly belongs to its trigger word */
.nav__panel::before {
  content: '';
  position: absolute; top: -6px; left: 22px;
  width: 11px; height: 11px;
  background: var(--card);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  transform: rotate(45deg);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.nav__panel a {
  position: relative;
  display: block;
  padding: 0.68em 1em;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), padding-left 0.2s var(--ease);
}
/* Accent bar draws in from the left on hover, echoing the college-card device */
.nav__panel a::after {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleY(0);
  transition: transform 0.18s var(--ease);
}
.nav__panel a:hover {
  background: var(--paper-2);
  color: var(--ink);
  padding-left: 1.3em;
}
.nav__panel a:hover::after { transform: scaleY(1); }

/* Small eyebrow header at the top of each panel, naming the category —
   injected by JS from the trigger word itself, so it can never drift out
   of sync with the link it belongs to. */
.nav__panel__eyebrow {
  padding: 0.4em 0.9em 0.6em;
  margin-bottom: var(--s-1);
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.header__actions { display: flex; align-items: center; gap: var(--s-2); }
.header__cta { display: none; border-radius: 999px; }   /* pill, to match the floating pill header */
@media (min-width: 768px) { .header__cta { display: inline-flex; } }

/* --- Mobile menu -------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;   /* circular, to match the floating pill header */
  background: var(--card);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), top 0.25s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--mobile-nav-top, 84px) 0 0 0;
  z-index: 89;
  background: var(--paper);
  padding: 0 var(--s-4) var(--s-9);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s var(--ease), visibility 0.3s, inset 0.25s var(--ease);
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-hair);
}
.mobile-nav a .label { font-family: var(--font-mono); }

/* Accordion groups — collapsed by default, one tap to reveal instead of
   dumping every course/service link onto the screen at once. */
.mobile-nav__group { border-bottom: 1px solid var(--rule-hair); }
.mobile-nav__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.mobile-nav__chevron {
  flex: none;
  width: 10px; height: 10px;
  margin-left: var(--s-3);
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__chevron { transform: rotate(-135deg); }

.mobile-nav__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.mobile-nav__group.is-open .mobile-nav__panel { max-height: 600px; }
.mobile-nav__panel a {
  font-size: var(--t-base);
  font-family: var(--font-body);
  font-weight: 550;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-bottom: none;
}

.mobile-nav__cta { padding-block: var(--s-6) var(--s-4); }

body.nav-open { overflow: hidden; }

/* ==========================================================================
   08  HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(3rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}

/* Faint ruled-paper grid, the "dossier" ground — kept visibly above the
   shader (see stacking notes below), a touch stronger than the site-wide
   --rule-hair so it still reads once the shader is layered under it. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(20,33,61,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,33,61,0.12) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 2; }

/* Establish .hero as its own stacking context so the shader's negative
   z-index stays contained here, never dropping behind the header or other
   sections on the page. Paint order, back to front: shader -> ruled grid
   (::before) -> real content. Without this, the shader (also z-index:0,
   but literally the first real child in the DOM) would paint over the
   pseudo-element grid, washing the lines out almost completely. */
.hero { z-index: 0; }

/* Shader mount(s). The CSS gradient tint on each is the base look — if
   WebGL is unavailable or disabled, that gradient is the entire visual,
   not a degraded fallback bolted on afterward.

   Selector is `div[data-ink-shader]`, not just `[data-ink-shader]`, on
   purpose: every band section has a `.band-name > *` rule resetting direct
   children to position:relative (so real content sits above the shader).
   That rule and a bare attribute selector both carry specificity (0,1,0),
   so which one wins came down to source order — true for hero, false for
   streams/testimonials, and it silently collapsed those two mounts to
   zero height (a position:relative empty div has no intrinsic size, so
   inset:0 does nothing). Adding the `div` type selector bumps this rule
   to (0,1,1), so it always wins regardless of where a future band's reset
   rule is written. */
div[data-ink-shader] {
  position: absolute; inset: 0; z-index: -1;
}
#hero-ink {
  background: radial-gradient(ellipse 70% 55% at 30% 20%, rgba(194,65,12,0.05), transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 75%, rgba(20,33,61,0.05), transparent 60%);
}
#streams-ink {
  background: radial-gradient(ellipse 60% 55% at 20% 70%, rgba(194,65,12,0.06), transparent 60%),
              radial-gradient(ellipse 55% 50% at 85% 20%, rgba(20,33,61,0.04), transparent 60%);
}
/* How-it-works band — deliberately plain (no shader mount): the hero and
   streams bands already carry that motif, so repeating it here would read
   as the same trick rather than a section with its own identity. The real
   photo plus the case-file object do that work instead. */
.how-band {
  background: var(--paper-2);
  border-block: 1px solid var(--rule-hair);
}

/* Streams band — its own stacking context so the shader stays contained
   behind the tinted background, same pattern as the hero and testimonials
   bands but without the ruled-grid overlay, so the three shader sections
   don't all look identical. */
.streams-band {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--paper-2);
  border-block: 1px solid var(--rule-hair);
}
.streams-band > * { position: relative; z-index: 1; }
.ink-shader__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.hero__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 6.5fr 5.5fr; gap: var(--s-8); }
}

.hero__title {
  font-size: var(--t-3xl);
  letter-spacing: -0.032em;
  line-height: 0.98;
}
.hero__sub {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}
.hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Key-figure strip under the hero */
.keyfigures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-7);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 720px) { .keyfigures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.keyfigure {
  background: var(--card);
  padding: var(--s-4) var(--s-3) var(--s-4);
  min-width: 0;
}
.keyfigure__value {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 0.90rem + 0.45vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap;
}
.keyfigure__label {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--ink-3);
}

/* Doves clip — real licensed footage (not hand-drawn), sits in normal
   document flow above the photo frame rather than overlaid on it, so it
   can never overlap the stamp or get clipped by an ancestor's overflow.
   Sized to actually be seen — a wide, short strip (the source is a full
   ~16.5s circling orbit, cropped tight to the flock's full path) rather
   than a small square, so 260px reads as "one compact detail," not a
   speck. */
.hero__doves {
  display: block;
  width: 380px;
  max-width: 100%;
  height: auto;
  margin: 0 0 var(--s-3) auto;   /* right-aligned above the photo, small gap beneath */
  opacity: 0.9;
}
@media (max-width: 480px) {
  .hero__doves { width: 250px; }
}

/* Hero visual — photo held in a "file card" frame with a folder tab */
.hero__visual {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: var(--s-3);
  box-shadow: var(--lift);
}
/* 6:5 rather than 4:3 — the hero art is now a set of square (1200x1200)
   animated illustrations, not landscape photos. A wide 4:3 frame with
   object-fit:cover would crop them; this ratio plus object-fit:contain
   keeps each illustration's full composition visible with only a little
   letterboxing, rather than a lot. */
.hero__visual { aspect-ratio: 6 / 5; }
.hero__visual img {
  position: absolute;
  inset: var(--s-3);
  width: calc(100% - 2 * var(--s-3));
  height: calc(100% - 2 * var(--s-3));
  object-fit: contain;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__visual img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__visual img { transition: none; }
}

/* Hero stamp — a Hinglish promise, styled like a seal pressed onto the
   photo's corner rather than a caption floating over it. Two layers so the
   entrance ("stamped down") and the idle drift never fight over the same
   transform: the outer element owns the reveal transition, the inner one
   owns the continuous float. */
.hero__stamp {
  position: absolute;
  top: -14px; left: -14px;
  z-index: 3;
  transform: rotate(-6deg) scale(1);   /* the resting look — safe default with no JS or under reduced-motion */
  transform-origin: center;
}
.reveal-ready .hero__stamp[data-reveal] {
  opacity: 0;
  transform: rotate(-16deg) scale(0.55);
  transition: opacity 0.5s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-ready .hero__stamp[data-reveal].is-visible {
  opacity: 1;
  transform: rotate(-6deg) scale(1);
}

.hero__stamp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(194, 65, 12, 0.55), 0 0 0 4px var(--paper), 0 0 0 5px rgba(194, 65, 12, 0.4);
  animation: hero-stamp-float 4.5s ease-in-out 0.9s infinite;
}
.hero__stamp-line1, .hero__stamp-line2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 650;
  font-size: 0.92rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-align: center;
}

@keyframes hero-stamp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 480px) {
  .hero__stamp { top: -10px; left: -10px; }
  .hero__stamp-inner { width: 84px; height: 84px; }
  .hero__stamp-line1, .hero__stamp-line2 { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stamp-inner { animation: none; }
  .reveal-ready .hero__stamp[data-reveal] { transition: none; }
}

/* College detail page — optional campus photo banner. Removed entirely by
   its own onerror handler when no photo exists yet at that college's id. */
.campus-banner {
  position: relative;
  margin-bottom: var(--s-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 7;
  border: 1px solid var(--rule);
}
@media (max-width: 640px) { .campus-banner { aspect-ratio: 4 / 3; } }
.campus-banner img { width: 100%; height: 100%; object-fit: cover; }
.campus-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,33,61,0.05) 0%, rgba(20,33,61,0.6) 100%);
}
.campus-banner__caption {
  position: absolute; left: var(--s-5); bottom: var(--s-5);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Quick course jump — a compact, continuously drifting strip under the hero.
   Auto-motion is genuinely fine here because it always pauses the instant a
   pointer touches it (hover on desktop, touch-hold on mobile) before any
   tap registers — so nothing ever slides out from under a real tap. Without
   JS, or under prefers-reduced-motion, it degrades to a plain user-scrolled
   strip: same markup, animation just never gets switched on.
   ========================================================================== */
.quickjump { position: relative; }
.quickjump__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}

/* Viewport clips the doubled marquee content and fades its own edges so
   items appear to drift out of soft focus rather than hitting a hard cut. */
.quickjump__viewport {
  overflow: hidden;
  margin: 0 calc(-1 * var(--s-4));
  padding-inline: var(--s-4);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.quickjump__viewport.is-static {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: none; mask-image: none;
}

.quickjump__track {
  display: flex;
  gap: var(--s-2);
  width: max-content;
  padding-block: var(--s-1) var(--s-2);
}
.quickjump__viewport.is-static .quickjump__track {
  scroll-snap-type: x proximity;
}
.quickjump__track.is-marquee {
  animation: quickjump-drift 32s linear infinite;
}
.quickjump__track.is-paused { animation-play-state: paused; }

@keyframes quickjump-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* content is doubled by JS, so -50% is exactly one loop */
}

.quickjump__item {
  scroll-snap-align: start;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.95em;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.quickjump__item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
.quickjump__icon { font-size: 0.95em; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .quickjump__track.is-marquee { animation: none; }
}

/* Page header for interior pages */
.page-head { padding-block: clamp(2rem, 1.2rem + 4vw, 4rem) var(--s-6); }

/* Service page hero — photo-anchored split, same "framed photo + mono
   tag" language as the homepage's how-split, so a service page opens
   with real visual interest instead of a bare text banner. */
.service-head__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .service-head__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-8); }
}
.service-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.service-head__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-2);
  border: 1px solid var(--rule);
}
.service-head__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.service-head__media-tag {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  padding: 0.45em 0.9em;
  background: rgba(20, 33, 61, 0.82);
  color: #fff;
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  max-width: calc(100% - var(--s-6));
}
@media (max-width: 899px) {
  .service-head__media { order: -1; }   /* photo first on mobile — immediate visual interest before the read */
  .service-head__media img { aspect-ratio: 16 / 10; }
}

/* Portrait source (e.g. the BSCC page's hand-holding-card photo) —
   matching the crop ratio to the source keeps the full composition
   instead of cropping into it. */
.service-head__media--portrait img { aspect-ratio: 3 / 4; }
@media (max-width: 899px) {
  .service-head__media--portrait img { aspect-ratio: 4 / 5; }
}
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.breadcrumb a { text-decoration: none; color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }

/* ==========================================================================
   09A  COLLEGE SHOWCASE CAROUSEL (Homepage moving dossier)
   ========================================================================== */
.showcase-head-split {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
@media (min-width: 768px) {
  .showcase-head-split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-6);
  }
}

.showcase__controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  margin-top: var(--s-2);
}

.showcase__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.85em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
}
.showcase__dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: pulse-live 2s infinite;
}
.showcase__dot-live.is-paused {
  background: var(--ink-3);
  box-shadow: 0 0 0 2px rgba(20, 33, 61, 0.12);
  animation: none;
}
@keyframes pulse-live {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.showcase__status-text {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase__buttons {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.showcase__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.showcase__btn:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.showcase__btn:active { transform: translateY(0); }

/* Auto-advance progress indicator */
.showcase__progress {
  width: 100%;
  height: 3px;
  background: var(--rule-hair);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.showcase__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  /* No CSS transition here — js/colleges.js drives width every animation
     frame directly, in the same rAF loop that decides when the next
     glide starts. A CSS transition on top of that would add its own lag
     to each JS-driven update, working against the precise sync the two
     are supposed to share. */
}

/* Moving carousel viewport */
.showcase {
  position: relative;
  outline: none;
}
.showcase__track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* No CSS scroll-behavior:smooth here — js/colleges.js drives every
     programmatic scroll itself via a custom eased rAF animation, so the
     transition duration/curve can actually be controlled. Layering the
     browser's own (fixed, ~300-400ms) smooth-scroll on top of that would
     fight it and produce jitter rather than a single clean glide. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--s-1);
}
.showcase__track::-webkit-scrollbar { display: none; }

/* Responsive card sizing inside the moving track */
.showcase__track .college-card {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (min-width: 580px) {
  .showcase__track .college-card {
    flex: 0 0 calc(50% - (var(--s-4) * 0.5));
    max-width: calc(50% - (var(--s-4) * 0.5));
  }
}
@media (min-width: 920px) {
  .showcase__track .college-card {
    flex: 0 0 calc(33.333% - (var(--s-4) * 0.667));
    max-width: calc(33.333% - (var(--s-4) * 0.667));
  }
}

/* Pagination dots track */
.showcase__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-4);
}
.showcase__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--rule-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.25s var(--ease), background-color 0.25s var(--ease);
}
.showcase__dot:hover { background: var(--ink-2); }
.showcase__dot.is-active {
  width: 26px;
  background: var(--accent);
}

/* ==========================================================================
   09  COLLEGE CARDS — the dossier record
   ========================================================================== */
.college-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 580px)  { .college-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px)  { .college-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .college-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.college-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(20, 33, 61, 0.05);
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.college-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: var(--lift-2);
}
/* Saffron edge that grows on hover — the accent moment */
.college-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}
.college-card:hover::before { transform: scaleY(1); }

/* Campus photo — sits above the record strip. Self-removes via onerror
   when a college has no photo yet, so the card silently reverts to the
   plain header-strip layout with zero visual glitch. */
.college-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
}
.college-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.college-card:hover .college-card__photo img { transform: scale(1.04); }

/* Real accreditation grade, not a manufactured star rating */
.college-card__grade {
  position: absolute; top: var(--s-3); right: var(--s-3);
  padding: 0.3em 0.65em;
  background: rgba(20, 33, 61, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* Record header strip */
.college-card__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0.5rem var(--s-4);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.college-card__ref { color: var(--ink-3); font-weight: 500; }

.college-card__body { padding: var(--s-4); flex: 1; display: flex; flex-direction: column; }

.college-card__head { display: flex; gap: var(--s-3); align-items: center; }

/* Logo, or a generated lettermark */
.college-logo {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.college-logo__mark {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.college-card__name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.college-card__campus {
  margin-top: 1px;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.college-card__tags { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* Ruled data rows — the "record field" list */
.record {
  margin-top: var(--s-3);
  border-top: 1px solid var(--rule-hair);
}
.record__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0.4em 0;
  border-bottom: 1px solid var(--rule-hair);
}
.record__key {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}
.record__val {
  font-size: 0.82rem;
  font-weight: 550;
  text-align: right;
  color: var(--ink);
}
.record__val--fee {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.college-card__basis {
  margin-top: var(--s-2);
  font-size: 0.70rem;
  line-height: 1.35;
  color: var(--ink-3);
}

.college-card__actions {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-hair);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.college-card__compare {
  margin-top: var(--s-1);
  min-height: 44px;
  padding-block: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.college-card__compare input { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; flex: none; }

/* --- Program-page course cards (simpler than the college record card) -- */
.course-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.course-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.course-card:hover { transform: translateY(-3px); border-color: var(--rule-strong); box-shadow: var(--lift); }

.course-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}
.course-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.course-card:hover .course-card__media img { transform: scale(1.05); }
.course-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20,33,61,0.35) 100%);
  pointer-events: none;
}

.course-card__body { padding: var(--s-5); }
.course-card__title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 620;
  letter-spacing: -0.02em;
}
.course-card .record { margin-top: var(--s-4); }
.course-card__actions { margin-top: var(--s-5); }

/* Program page header banner — a wide characteristic photo behind the title */
.program-banner {
  position: relative;
  margin-top: var(--s-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 8;
  border: 1px solid var(--rule);
}
@media (max-width: 640px) { .program-banner { aspect-ratio: 4 / 3; } }
.program-banner img { width: 100%; height: 100%; object-fit: cover; }
.program-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,33,61,0.05) 0%, rgba(20,33,61,0.55) 100%);
}
.program-banner__caption {
  position: absolute; left: var(--s-5); bottom: var(--s-5); right: var(--s-5);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   10  FEE TABLES
   ========================================================================== */
.fee-table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
}
.fee-table-wrap .scroll-x { max-height: none; }

.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 640px;   /* forces horizontal scroll rather than crushing */
}
.fee-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  background: var(--ink);
  white-space: nowrap;
}
.fee-table tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule-hair);
  vertical-align: top;
  color: var(--ink-2);
}
.fee-table tbody tr:nth-child(even) { background: rgba(243, 238, 228, 0.5); }
.fee-table tbody tr:hover { background: var(--accent-soft); }
.fee-table tbody tr:last-child td { border-bottom: 0; }

.fee-table td:first-child {
  font-weight: 550;
  color: var(--ink);
  min-width: 220px;
}
/* Numeric cells get monospaced tabular figures so columns align optically */
.fee-table td.is-num, .fee-table th.is-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.fee-table td.is-num { color: var(--ink); font-weight: 500; }
.fee-table td.is-headline { color: var(--accent); font-weight: 600; }
.fee-table td.is-empty { color: var(--ink-3); }

.fee-table .cell-apply { text-align: right; white-space: nowrap; }
.fee-table .cell-apply .btn { min-height: 44px; padding-inline: 1.1em; }

/* Scroll affordance on narrow screens */
.table-hint {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-hair);
}
@media (min-width: 900px) { .table-hint { display: none; } }

/* Fine print under a table */
.notes-list {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--paper-2);
  border: 1px solid var(--rule-hair);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.notes-list ul { margin: var(--s-3) 0 0; padding-left: 1.2em; }
.notes-list li + li { margin-top: var(--s-2); }

/* ==========================================================================
   11  FILTER BAR & COMPARE TRAY
   ========================================================================== */
.filters {
  position: sticky;
  top: 64px;
  z-index: 40;
  padding-block: var(--s-4);
  background: rgba(250, 247, 241, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) { .filters { top: 76px; } }

.filters__row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .filters__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .filters__row { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; } }

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.6em 0.85em;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* Below 16px, iOS/Android auto-zoom the whole page on focus — the same
   bug fixed on the chat input, affecting every form on the site (the
   apply modal, contact page, college search) since they all share this
   class. Bumped for mobile only, so the desktop size is untouched. */
@media (max-width: 640px) {
  .input, .select, .textarea { font-size: 16px; }
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.14);
}
.select {
  appearance: none;
  padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7689' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  background-size: 12px;
  cursor: pointer;
}

.results-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  margin-block: var(--s-6) var(--s-5);
}
.results-count { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); }
.results-count strong { color: var(--ink); font-weight: 600; }

/* Empty state */
.empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.empty__title { font-family: var(--font-display); font-size: var(--t-lg); margin-bottom: var(--s-3); }
.empty p { color: var(--ink-3); max-width: 46ch; margin-inline: auto; }

/* --- Compare tray -------------------------------------------------------- */
.compare-tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--ink-inverse);
  border-top: 3px solid var(--accent);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.compare-tray.is-open { transform: translateY(0); }

.compare-tray__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
  flex-wrap: wrap;
}
.compare-tray__slots { display: flex; gap: var(--s-2); flex: 1; flex-wrap: wrap; min-width: 0; }

.compare-slot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0.4em 0.7em;
  font-size: var(--t-xs);
  background: rgba(250, 247, 241, 0.12);
  border: 1px solid rgba(250, 247, 241, 0.22);
  border-radius: var(--radius);
  max-width: 220px;
}
.compare-slot__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-slot__remove {
  flex: none; width: 18px; height: 18px; line-height: 1;
  display: grid; place-items: center;
  color: rgba(250, 247, 241, 0.7);
  border-radius: 2px;
}
.compare-slot__remove:hover { color: #fff; background: rgba(250, 247, 241, 0.18); }
.compare-slot--empty {
  border-style: dashed;
  color: rgba(250, 247, 241, 0.45);
  background: transparent;
}
.compare-tray__actions { display: flex; gap: var(--s-2); flex: none; }
.compare-tray .btn-outline { --btn-fg: var(--ink-inverse); --btn-bd: rgba(250,247,241,0.35); }
.compare-tray .btn-outline:hover { background: rgba(250,247,241,0.12); --btn-bd: rgba(250,247,241,0.6); }

/* Below ~640px the actions used to wrap onto the same line as the chips,
   landing "Clear" awkwardly mid-row between them. Force the chips and the
   action buttons onto their own full-width rows instead. */
@media (max-width: 640px) {
  .compare-tray__inner { align-items: stretch; }
  .compare-tray__slots { flex-basis: 100%; order: 1; justify-content: center; }
  .compare-tray__actions {
    order: 2;
    flex-basis: 100%;
    justify-content: flex-end;
    padding-top: var(--s-2);
    border-top: 1px solid rgba(250, 247, 241, 0.14);
    margin-top: var(--s-1);
  }
  .compare-tray__actions .btn { flex: 1; }
}

/* Comparison table */
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 680px; }
.compare-table th, .compare-table td {
  padding: var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-hair);
}
.compare-table thead th {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 620;
  letter-spacing: -0.02em;
}
.compare-table tbody th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 190px;
  background: var(--card);
}
.compare-table .is-best { color: var(--verify); font-weight: 650; }

/* ==========================================================================
   12  FORMS & MODAL
   ========================================================================== */
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

.field__error {
  font-size: var(--t-xs);
  color: var(--seal);
  min-height: 1em;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--seal);
  box-shadow: 0 0 0 3px rgba(122, 30, 30, 0.12);
}
.req { color: var(--accent); }

.form-consent {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3);
}
.form-consent input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

/* --- Modal --------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid;
  place-items: end center;
  padding: 0;
  background: rgba(20, 33, 61, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s;
}
@media (min-width: 720px) { .modal { place-items: center; padding: var(--s-5); } }
.modal.is-open { opacity: 1; visibility: visible; }

.modal__panel {
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--lift-2);
  transform: translateY(24px);
  transition: transform 0.32s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 720px) { .modal__panel { border-radius: var(--radius-lg); transform: scale(0.96); } }
.modal.is-open .modal__panel { transform: none; }

.modal__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.modal__title { font-size: var(--t-lg); letter-spacing: -0.025em; }
.modal__sub { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); }
.modal__close {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.modal__close:hover { background: var(--paper-2); color: var(--ink); }
.modal__body { padding: var(--s-5); }
.modal__foot {
  padding: var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}

/* Success panel inside the modal */
.form-success { text-align: center; padding: var(--s-6) var(--s-4); }
.form-success__mark {
  width: 56px; height: 56px; margin: 0 auto var(--s-4);
  display: grid; place-items: center;
  border: 2px solid var(--verify);
  border-radius: 50%;
  color: var(--verify);
  font-size: 1.6rem;
}

/* Sending state */
.btn.is-loading { pointer-events: none; opacity: 0.75; }
.btn.is-loading::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   13  STATS, FEATURES & TRUST
   ========================================================================== */
.feature {
  position: relative;
  overflow: hidden;
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  height: 100%;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.feature:hover { transform: translateY(-3px); border-color: var(--rule-strong); box-shadow: var(--lift); }
/* Saffron edge that grows on hover — the same device used on college cards,
   so a feature grid reads as part of the same system, not a different kit.
   Uses ::after (not ::before) because it's absolutely positioned and never
   part of normal flow either way — freeing ::before for the icon badge
   below, which does need to render first, ahead of the real content. */
.feature::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}
.feature:hover::after { transform: scaleY(1); }

.feature__index {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.feature__title { margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--t-md); font-weight: 620; letter-spacing: -0.02em; }
.feature__body { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* Stream cards carry a real campus/course photo, not an icon — a photo of
   actual students reads as more trustworthy than a generic glyph, and it
   is more consistent with the rest of the site (colleges, program pages)
   which are already photo-led. */
a.feature { text-decoration: none; display: block; }
.feature--photo { padding: 0; overflow: hidden; }
.feature__media {
  display: block;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--paper-2);
}
.feature__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.feature--photo:hover .feature__media img { transform: scale(1.06); }
.feature__content { display: block; padding: var(--s-5); }
.feature--photo .feature__title { margin-top: 0; }

/* Testimonials band — its own tinted, shader-backed section rather than
   another plain white grid of cards. */
.testimonials-band {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--paper-2);
  border-block: 1px solid var(--rule-hair);
}
.testimonials-band::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(20,33,61,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,33,61,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}
.testimonials-band > * { position: relative; z-index: 2; }

.testimonial-card {
  position: relative;
  padding-top: var(--s-6);
}
.testimonial-card__quote {
  position: absolute; top: var(--s-4); left: var(--s-5);
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  font-style: italic;
}
.testimonial-card__author {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5);
}
.testimonial-card__avatar {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* "How it works" as an actual case file, not a list. The pattern this
   replaces — numbered rows in a bordered box — is still fundamentally a
   generic "3 steps" template underneath, whatever numeral style sits on
   it. A folder tab, perforated tear-lines standing in for dividers, and
   a closing seal make the section read as one physical object with its
   own identity, tied to the site's own paper/stamp vocabulary rather
   than a layout any prompt would produce for "how it works". */
/* Asymmetric split so the section carries a real photo instead of being
   pure typography sandwiched between the photo-rich hero and streams
   bands above and below it. */
.how-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-8);
}

.how-split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-2);
  border: 1px solid var(--rule);
  align-self: stretch;
}
.how-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  aspect-ratio: 4 / 5;
}
.how-split__media-tag {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  padding: 0.45em 0.9em;
  background: rgba(20, 33, 61, 0.82);
  color: #fff;
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  max-width: calc(100% - var(--s-6));
}

@media (max-width: 860px) {
  .how-split { grid-template-columns: 1fr; }
  /* Same aspect ratio as the source photo (400x500) so cover crops
     nothing — the earlier 4:3 crop was still cutting into the hairline. */
  .how-split__media img { aspect-ratio: 4 / 5; }
}

.case-file {
  position: relative;
  margin-top: 0;   /* the tab now clears against the split gap, not a bare section-head */
}
@media (max-width: 860px) {
  .case-file { margin-top: 56px; }   /* clears the ~44px tab once the media column stacks above it */
}

.case-file__tab {
  position: absolute;
  top: 0; left: var(--s-6);
  transform: translateY(-100%);
  background: var(--ink);
  color: var(--ink-inverse);
  padding: 0.55em 1.1em 0.7em;
  border-radius: var(--radius) var(--radius) 0 0;
}
.case-file__tab-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-file__body {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--lift-2);
  padding: var(--s-2) var(--s-6);
}

.case-file__row {
  display: flex;
  gap: var(--s-5);
  padding-block: var(--s-6);
}
.case-file__num {
  flex: none;
  width: 64px;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.45;
  transition: opacity 0.3s var(--ease);
}
.case-file__row:hover .case-file__num { opacity: 1; }

.case-file__content { padding-top: 0.3em; max-width: 56ch; }
.case-file__content h3 {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 620;
  letter-spacing: -0.02em;
}
.case-file__content p {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

/* A perforated tear-line, not a plain hairline — reads as "torn between
   entries" the way a real carbon-copy form does. */
.case-file__divider {
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 13px);
}

.case-file__seal {
  display: inline-block;
  margin: var(--s-2) 0 var(--s-5);
  padding: 0.4em 0.9em;
  border: 2px solid var(--seal);
  border-radius: var(--radius);
  color: var(--seal);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  opacity: 0.85;
  animation: case-seal-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}
@keyframes case-seal-stamp {
  0%   { opacity: 0; transform: rotate(-18deg) scale(0.5); }
  100% { opacity: 0.85; transform: rotate(-3deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .case-file__seal { animation: none; }
}

@media (max-width: 620px) {
  .case-file__body { padding-inline: var(--s-5); }
  .case-file__row { gap: var(--s-3); padding-block: var(--s-5); }
  .case-file__num { width: 44px; font-size: 1.6rem; }
}

/* Path comparison — two outcome cards with a "VS" pivot between them.
   Built for the BSCC page's real argument (technical vs. general degree)
   without reproducing the poster's raw flowchart or its unverified stats. */
.path-compare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-8);
}
.path-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: 0 2px 4px rgba(20, 33, 61, 0.05), 0 10px 24px -14px rgba(20, 33, 61, 0.2);
}
.path-card--accent {
  border-color: var(--accent);
  box-shadow: var(--lift-2);
}
.path-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.path-card--accent .path-card__tag { color: var(--accent); }
.path-card h3 {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 640;
  letter-spacing: -0.02em;
}
.path-card__steps {
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.path-card__steps li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.path-card__steps li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}
.path-card--accent .path-card__steps li::before { background: var(--accent); }
.path-card__outcome {
  display: inline-block;
  margin-top: var(--s-6);
  padding: 0.5em 1em;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.path-card__outcome--risk {
  background: rgba(20, 33, 61, 0.06);
  color: var(--ink-2);
}
.path-card__outcome--secure {
  background: var(--accent);
  color: #fff;
}
.path-compare__vs {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  box-shadow: var(--lift-2);
  justify-self: center;
}
.path-compare__note {
  margin-top: var(--s-6);
  max-width: 62ch;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .path-compare { grid-template-columns: 1fr; }
  .path-compare__vs { margin-block: calc(var(--s-3) * -1); }
}

/* BSCC spotlight — homepage funding callout. A dark full-bleed band so it
   reads as a distinct "money" moment rather than another paper section.
   Texture is the same masked ruled-grid the .callout band already uses
   (not the ink-shader — that's hero/streams' motif, not this section's). */
.bscc-spot {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--ink-inverse);
  padding-block: var(--s-9);
}
.bscc-spot::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(250,247,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,247,241,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 100% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 100% 0%, #000, transparent 70%);
}
.bscc-spot > .container { position: relative; z-index: 1; }

.bscc-spot .section-head { margin-bottom: 0; }
.bscc-spot .section-head__meta::after { background: rgba(250, 247, 241, 0.16); }

.bscc-spot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-top: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) { .bscc-spot__grid { grid-template-columns: 1.05fr 0.95fr; } }

.bscc-spot__title {
  max-width: 16ch;
  font-size: var(--t-2xl);
}
.bscc-spot__sub {
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: var(--t-md);
  color: rgba(250, 247, 241, 0.78);
  line-height: 1.6;
}

.bscc-spot__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(250, 247, 241, 0.16);
}
.bscc-spot__stat span {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--accent);
}
.bscc-spot__stat label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: rgba(250, 247, 241, 0.62);
  line-height: 1.4;
}

.bscc-spot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.bscc-spot .btn-outline { --btn-fg: var(--ink-inverse); --btn-bd: rgba(250,247,241,0.35); }
.bscc-spot .btn-outline:hover { background: rgba(250,247,241,0.12); --btn-bd: rgba(250,247,241,0.6); }

/* Video module — matted like a printed photo inset into the dossier
   paper, echoing the stamp/case-file "physical artifact" motif instead
   of a plain dark video tile. */
.bscc-video__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.55);
  margin-bottom: var(--s-3);
}
.bscc-video-frame {
  background: var(--paper);
  padding: var(--s-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-2);
}
.bscc-video { min-width: 0; }
.bscc-video__play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-lg) - 2px);
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.bscc-video__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.86;
  transition: opacity 0.25s var(--ease), transform 0.4s var(--ease);
}
.bscc-video__play:hover .bscc-video__thumb { opacity: 1; transform: scale(1.03); }
.bscc-video__badge {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  padding: 0.35em 0.7em;
  background: rgba(20, 33, 61, 0.75);
  backdrop-filter: blur(3px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  border-radius: var(--radius);
}
.bscc-video__icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  padding-left: 4px;   /* optically centre the play triangle */
  box-shadow: 0 8px 24px -8px rgba(194, 65, 12, 0.6);
  transition: transform 0.25s var(--ease);
}
.bscc-video__play:hover .bscc-video__icon { transform: translate(-50%, -50%) scale(1.08); }
.bscc-video__playing { position: relative; }
.bscc-video__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-lg) - 2px);
  overflow: hidden;
  display: block;
}
/* The YT.Player API discards the mount div and injects its own iframe
   as a child of it — size that iframe to fill the reserved frame. */
.bscc-video__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Close (✕) fully tears the player down — stops playback outright and
   restores the play facade so it can be replayed. Toggle (⏸/▶) is real
   pause/resume via the YouTube IFrame API, so a single tap works
   without relying on a second tap inside YouTube's own nested UI. */
.bscc-video__close,
.bscc-video__toggle {
  position: absolute;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 33, 61, 0.82);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}
.bscc-video__close:hover,
.bscc-video__toggle:hover { background: var(--ink); }
.bscc-video__close { top: var(--s-2); right: var(--s-2); }
.bscc-video__toggle { bottom: var(--s-2); left: var(--s-2); }
.bscc-video__caption {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: rgba(250, 247, 241, 0.8);
  line-height: 1.5;
}
.bscc-video__caption span {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: rgba(250, 247, 241, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .bscc-video__thumb, .bscc-video__icon { transition: none; }
}

.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-5) var(--s-7);
}
.trust-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.trust-item img {
  height: 46px; width: auto;
  filter: grayscale(1) contrast(0.9);
  opacity: 0.65;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.trust-item:hover img { filter: none; opacity: 1; }
.trust-item span { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* Callout / CTA panel */
.callout {
  padding: var(--s-7) var(--s-5);
  background: var(--ink);
  color: var(--ink-inverse);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .callout { padding: var(--s-8) var(--s-7); } }
.callout::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(250,247,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,247,241,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000, transparent 70%);
}
.callout > * { position: relative; }
.callout h2 { color: var(--ink-inverse); max-width: 20ch; margin-inline: auto; }
.callout p { margin-top: var(--s-4); color: rgba(250,247,241,0.80); max-width: 52ch; margin-inline: auto; }
.callout .cluster { justify-content: center; margin-top: var(--s-6); }
.callout .btn-outline { --btn-fg: var(--ink-inverse); --btn-bd: rgba(250,247,241,0.4); }
.callout .btn-outline:hover { background: rgba(250,247,241,0.12); --btn-bd: rgba(250,247,241,0.7); }

/* ==========================================================================
   14  FOOTER & FLOATING ACTION
   ========================================================================== */
.site-footer {
  margin-top: var(--section-y);
  padding-top: var(--s-8);
  background: var(--ink);
  color: rgba(250, 247, 241, 0.78);
  font-size: var(--t-sm);
}
.site-footer h4, .site-footer .label { color: var(--ink-inverse); }
.site-footer a { color: rgba(250, 247, 241, 0.78); text-decoration: none; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--accent-warm); }

.footer__grid {
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: 1.3fr 1fr;
  padding-bottom: var(--s-7);
}
.footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 620px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--s-7); } }
@media (min-width: 620px)  { .footer__grid > :first-child { grid-column: auto; } }

.footer__list { list-style: none; padding: 0; }
.footer__list li + li { margin-top: var(--s-2); }

.footer__bottom {
  padding-block: var(--s-5);
  border-top: 1px solid rgba(250, 247, 241, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: rgba(250, 247, 241, 0.55);
  /* Reserve room for the fixed WhatsApp FAB so it can't sit on top of
     this row once the page is scrolled all the way down. Padding (not
     margin) so the extra space stays inside the dark footer background. */
  padding-bottom: calc(54px + var(--s-6) + env(safe-area-inset-bottom));
}
@media (max-width: 619px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

.social { display: flex; gap: var(--s-2); }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(250, 247, 241, 0.22);
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.social a:hover { background: rgba(250, 247, 241, 0.12); border-color: rgba(250, 247, 241, 0.5); }

/* One floating action, not five. Expands on hover/tap. */
.fab {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 70;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--s-2);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Icon-only pill — the "WhatsApp us" label made this the widest thing in
   the corner; the green + chat-bubble icon alone already reads clearly
   as WhatsApp, so the text is visually hidden (font-size:0) rather than
   removed from 21 HTML files, and restored just on the icon span. */
.fab__main {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  padding: 0;
  background: #1EA855;
  color: #fff;
  border-radius: 50%;
  font-size: 0;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 24px -6px rgba(30, 168, 85, 0.55);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.fab__main span { font-size: 22px; line-height: 1; }
.fab__main:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(30, 168, 85, 0.7); }
.fab__items {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.fab.is-open .fab__items { opacity: 1; visibility: visible; transform: translateY(0); }
.fab__item {
  display: flex; align-items: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--lift);
  white-space: nowrap;
}
.fab__item:hover { background: var(--paper-2); }

/* ==========================================================================
   14B  ARIA — CHAT ASSISTANT
   --------------------------------------------------------------------------
   Deliberately a little more "app" than the rest of the site's sharp
   paperwork aesthetic (bigger radii, gradients, glow) — this is the one
   surface on the site meant to feel like a live product, not a document.
   ========================================================================== */
/* Deliberately the OPPOSITE corner from .fab (WhatsApp/call, bottom-right):
   that widget expands upward when tapped, and no fixed offset here can
   reliably clear its expanded height, so the two floating entry points
   simply live in different corners and can never collide. */
.aria {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 95;
  padding-bottom: env(safe-area-inset-bottom);
}

.aria-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 23, 41, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.24s var(--ease), visibility 0.24s;
  z-index: -1;
}
.aria.is-open .aria-backdrop { opacity: 1; visibility: visible; }

/* The orb IS the permanent chat button now — no separate small icon
   button any more. One character, one element, always visible. */
.aria-toggle {
  position: relative;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s var(--ease);
  animation: aria-toggle-entrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.aria-toggle:hover { transform: translateY(-3px) scale(1.05); }
@keyframes aria-toggle-entrance {
  0%   { transform: scale(0.2) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.1) translateY(-6px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Overlaid when the panel is open — dims the orb and shows a clear close
   affordance, rather than the orb vanishing (it's still "there"). */
/* No X overlay on the orb any more — the panel already has its own
   close button, and showing two different close controls at once (one
   on the button, one in the panel header) was confusing, redundant UI.
   A subtle dim is enough to show the orb is "in the open state". */
.aria-toggle__close {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(13,23,41,0.28);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}
.aria.is-open .aria-toggle__close { opacity: 1; }

.aria-toggle__dot {
  position: absolute; top: 4px; right: 4px;
  width: 14px; height: 14px;
  background: var(--accent-warm);
  border: 2px solid var(--paper);
  border-radius: 50%;
  z-index: 3;
}

/* ==========================================================================
   ARIA ORB — a self-contained liquid-morphing gradient character, no
   external file, no runtime to load, nothing that can go down or ship
   with the wrong background. Two blurred blob layers cycle through
   asymmetric border-radius values for an organic "breathing liquid"
   look; a simple two-eyes-and-a-smile face rides on top at every size.
   ========================================================================== */
.aria-orb {
  position: relative;
  display: grid; place-items: center;
}
/* The blob's own animated border-radius IS the visible silhouette — no
   clipping wrapper here, or the morph just animates invisibly behind a
   fixed circular mask (which is exactly what was happening before: a
   perfectly circular window hiding all the organic shape change). The
   ripple effect (below) also needs to expand past the blob's edge to
   read as a ripple at all, which a clipping parent would also prevent. */
.aria-orb__blob {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #22D9C8 0%, #2AA7E8 55%, #E8890B 130%);
  box-shadow: 0 14px 28px -10px rgba(13,23,41,0.35), 0 2px 8px rgba(13,23,41,0.15);
  animation: aria-orb-morph 7s ease-in-out infinite;
}
.aria-orb__blob--b {
  inset: 8%;
  background: linear-gradient(315deg, #17C9B8, #1E8FD8);
  opacity: 0.6;
  filter: blur(2px);
  box-shadow: none;
  animation-name: aria-orb-morph-b;
  animation-duration: 8.5s;
}
@keyframes aria-orb-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  33%      { border-radius: 58% 42% 40% 60% / 55% 65% 35% 45%; }
  66%      { border-radius: 50% 50% 58% 42% / 40% 55% 45% 60%; }
}
@keyframes aria-orb-morph-b {
  0%, 100% { border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%; }
  50%      { border-radius: 45% 55% 60% 40% / 40% 60% 45% 55%; }
}

/* Mini orb — the panel header avatar. No morph animation at this size
   (too small to read as liquid, just looks like jitter); a plain
   gradient circle keeps it crisp. */
.aria-orb--mini { width: 100%; height: 100%; }
.aria-orb--mini .aria-orb__blob { animation: none; border-radius: 50%; }
.aria-orb--mini .aria-orb__blob--b { display: none; }
.aria-orb--mini .aria-face__eye { width: 4px; height: 4px; }
.aria-orb--mini .aria-face__eyes { gap: 6px; }
.aria-orb--mini .aria-face__mouth { width: 12px; height: 6px; border-bottom-width: 2px; margin-top: 2px; }

/* Toggle orb — the permanent chat button, fully animated. */
.aria-orb--toggle {
  width: 100%; height: 100%;
  animation: aria-orb-float 3.6s ease-in-out infinite;
}
.aria-orb--toggle .aria-face__eye { width: 9px; height: 9px; }
.aria-orb--toggle .aria-face__eyes { gap: 15px; }
.aria-orb--toggle .aria-face__mouth { width: 28px; height: 14px; border-bottom-width: 3px; margin-top: 3px; }
@keyframes aria-orb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5%); }
}

.aria-face {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.aria-face__eyes { display: flex; }
.aria-face__eye { background: #0D1B2A; border-radius: 50%; }
.aria-face__mouth { border: none; border-bottom: solid #0D1B2A; border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* The "hello" ripple — an expanding, fading ring that pulses forever on
   a slow cycle (pulse, then a long quiet pause, repeat), the ongoing
   "I'm alive and listening" signal now that there's no greeting text. */
.aria-orb__ripple {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid var(--accent-warm);
  opacity: 0;
  pointer-events: none;
  animation: aria-orb-ripple 6s ease-out infinite;
}
@keyframes aria-orb-ripple {
  0%   { transform: scale(0.8); opacity: 0; }
  8%   { opacity: 0.6; }
  32%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* The orbiting ring label — curved text circling the orb like a seal or
   stamp (echoing the circular badge already used in the hero section),
   spinning slowly and continuously. This is what tells people "this is
   a chat bot" now, instead of a text bubble that sat on top of page
   content — it lives entirely within the orb's own footprint, just
   outside its edge, so it never covers anything behind it. */
/* A fixed arc sitting above the orb like a small crown/label — not
   wrapping around it (the blob's own organic morphing shape isn't a
   perfect circle, so a ring around it gets unevenly swallowed), and not
   spinning (curved text upside-down half the time is unreadable). Static
   and always legible; the orb underneath does all the motion. */
.aria-orb-ring {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: -28px;
  width: 132px; height: 66px;
  pointer-events: none;
}
.aria-orb-ring text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  fill: var(--ink);
  opacity: 0.72;
}

.aria-panel {
  position: fixed;
  left: var(--s-4);
  bottom: calc(96px + var(--s-3) + var(--s-4) + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 2 * var(--s-4)));
  height: min(480px, calc(100vh - 110px));
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 24px 56px -20px rgba(13,23,41,0.4), 0 2px 6px rgba(13,23,41,0.1);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.aria.is-open .aria-panel { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 480px) {
  /* The 96px orb was tuned for desktop's roomier corner — on a phone it
     visibly sits on top of card content directly behind it. Shrunk
     considerably here, with the panel's clearance offset updated to
     match so it still opens fully above the smaller button. */
  .aria { left: var(--s-3); bottom: var(--s-3); }
  .aria-toggle { width: 58px; height: 58px; }
  .aria-orb-ring { width: 96px; height: 48px; margin-bottom: -16px; }
  .aria-orb-ring text { font-size: 7.5px; letter-spacing: 0.8px; }
  .aria-toggle__dot { width: 11px; height: 11px; top: 2px; right: 2px; }

  .aria-panel {
    left: var(--s-3); right: var(--s-3);
    bottom: calc(58px + var(--s-2) + var(--s-3) + env(safe-area-inset-bottom));
    width: auto;
    height: min(76vh, 560px);
  }
}

.aria-panel__head {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: linear-gradient(150deg, #24365F 0%, var(--ink) 55%, #0C1626 100%);
  color: var(--ink-inverse);
  overflow: hidden;
  flex: none;
}
.aria-panel__head::before {
  content: ''; position: absolute; inset: -40% -10% auto auto;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,137,11,0.28), transparent 70%);
  pointer-events: none;
}
.aria-panel__avatar {
  position: relative;
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  /* A light ring so the orb's gradient pops against the dark header
     instead of blending straight into it — previously nothing separated
     the two, which read as murky rather than colorful. */
  background: rgba(250,247,241,0.9);
  padding: 2px;
  box-shadow: 0 0 0 3px rgba(250,247,241,0.16), 0 2px 8px rgba(0,0,0,0.2);
}
.aria-panel__avatar .aria-orb { width: 100%; height: 100%; }
.aria-panel__id { position: relative; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; }
.aria-panel__id strong { font-family: var(--font-display); font-size: var(--t-base); }
.aria-panel__id span { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: rgba(250,247,241,0.72); }
.aria-panel__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 2px rgba(52,211,153,0.28); flex: none; }
.aria-panel__reset, .aria-panel__close {
  position: relative;
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: rgba(250,247,241,0.1);
  border: none; border-radius: 50%;
  color: var(--ink-inverse);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.aria-panel__reset { margin-left: auto; }
.aria-panel__reset svg { width: 15px; height: 15px; }
.aria-panel__close { font-size: 1.2rem; line-height: 1; }
.aria-panel__reset:hover { background: rgba(250,247,241,0.2); transform: rotate(-50deg); }
.aria-panel__close:hover { background: rgba(250,247,241,0.2); transform: rotate(90deg); }

.aria-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  background:
    radial-gradient(circle at 100% 0%, rgba(194,65,12,0.05), transparent 40%),
    var(--paper);
}
@keyframes aria-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.aria-msg { display: flex; animation: aria-msg-in 0.25s var(--ease) both; }
.aria-msg--user { justify-content: flex-end; }
.aria-bubble {
  max-width: 86%;
  padding: 0.6em 0.85em;
  border-radius: 15px;
  font-size: var(--t-xs);
  line-height: 1.5;
}
.aria-msg--bot .aria-bubble {
  background: var(--card);
  border: 1px solid var(--rule-hair);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  box-shadow: var(--lift);
}
.aria-msg--user .aria-bubble {
  background: linear-gradient(135deg, var(--ink), #1B2A4D);
  color: var(--ink-inverse);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px -6px rgba(20,33,61,0.4);
}
.aria-bubble a { color: var(--accent); font-weight: 600; }
.aria-bubble .figure { font-family: var(--font-mono); }
.aria-list { margin: var(--s-2) 0 0; padding-left: 1.1em; }
.aria-list li + li { margin-top: 0.3em; }
.aria-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-2);
  padding: 0.6em 1.1em;
  background: var(--accent);
  color: #fff;
  border: none; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.aria-cta:hover { background: var(--accent-warm); transform: translateY(-1px); }

/* Direct call / WhatsApp pair rendered by connectButtons() — the
   low-friction hand-off, no form in between. */
.aria-connect { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.aria-connect .aria-cta { margin-top: 0; }
.aria-cta--call { background: var(--ink); }
.aria-cta--call:hover { background: #1B2A4D; }
.aria-cta--wa { background: #1EA855; }
.aria-cta--wa:hover { background: #25c064; }

.aria-typing { display: flex; align-items: center; gap: 4px; padding-block: 0.85em; }
.aria-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
  animation: aria-typing-bounce 1.1s infinite ease-in-out;
}
.aria-typing span:nth-child(2) { animation-delay: 0.15s; }
.aria-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aria-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.aria-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: 0 var(--s-4);
  flex: none;
}
.aria-chips:not(:empty) { padding-bottom: var(--s-3); }
.aria-chip {
  padding: 0.6em 1em;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(13,23,41,0.06);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  white-space: nowrap;
}
.aria-chip:hover {
  background: var(--paper-2);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(194,65,12,0.25);
}
.aria-chip:active { transform: translateY(0); }
.aria-chip--cta { background: var(--accent); border-color: var(--accent); color: #fff; }
.aria-chip--cta:hover { background: var(--accent-warm); border-color: var(--accent-warm); color: #fff; }

/* Back-to-menu — deliberately solid and icon-led, not dashed: a dashed
   border reads as "disabled/placeholder" in most UI conventions, which
   made it unclear it was actually clickable. */
.aria-chip--menu {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inverse);
}
.aria-chip--menu::before {
  content: '';
  width: 8px; height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.aria-chip--menu:hover { background: #1B2A4D; border-color: #1B2A4D; color: #fff; transform: translateY(-1px); }

.aria-input {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule-hair);
  background: var(--card);
  flex: none;
}
.aria-input input {
  flex: 1; min-width: 0;
  height: 42px;
  padding: 0 var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-body);
  /* 16px, not var(--t-sm) (~13-14px) — iOS/Android auto-zoom the whole
     page on focusing any input smaller than 16px, which is exactly the
     "chat box grows and the page stays zoomed after closing" bug. */
  font-size: 16px;
  color: var(--ink);
}
.aria-input input:focus { outline: none; border-color: var(--accent); background: var(--card); }
.aria-input button {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.aria-input button:hover { background: var(--accent-warm); transform: scale(1.05); }
.aria-input button svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .aria-toggle, .aria-panel, .aria-typing span { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   14C  PINNED NOTICE — a small announcement styled like an index card
   pinned to the page, not a blocking modal. Slides in from the corner,
   torn bottom edge via clip-path, slight rotation, a "thumbtack" dot.
   ========================================================================== */
/* Outer wrapper: positioning/animation only, NO clip-path here — a
   clip-path clips everything painted inside it, including a child
   positioned outside its own box (the pin sticks out above the card),
   which is exactly what was cutting the pin off. The torn-edge clip
   lives on .site-notice__card (inner) instead, so the pin renders in
   the wrapper's own unclipped paint layer. */
.site-notice {
  position: fixed;
  top: 108px; right: var(--s-4);
  z-index: 91;
  width: min(272px, calc(100vw - 2 * var(--s-4)));
  transform: translateX(120%) rotate(-2deg);
  transform-origin: top right;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s var(--ease);
}
.site-notice.is-visible { transform: translateX(0) rotate(-1.5deg); opacity: 1; }
@media (max-width: 640px) {
  .site-notice { top: auto; bottom: var(--s-4); right: var(--s-4); left: var(--s-4); width: auto; }
}

.site-notice__card {
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-6);
  background: var(--card);
  box-shadow: var(--lift-2);
  clip-path: polygon(
    0% 2%, 8% 0%, 19% 1.5%, 31% 0%, 44% 1.2%, 57% 0%, 69% 1.6%, 82% 0%, 93% 1%, 100% 0%,
    100% 100%,
    94% 96%, 87% 100%, 79% 95.5%, 71% 100%, 62% 96%, 54% 100%, 45% 95%, 37% 100%, 28% 96.5%,
    20% 100%, 11% 95%, 4% 100%, 0% 97%
  );
}

.site-notice__pin {
  position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-warm), var(--accent));
  box-shadow: 0 3px 6px rgba(13,23,41,0.35), inset 0 1px 1px rgba(255,255,255,0.4);
  z-index: 1;
}
.site-notice__close {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent; border: none;
  color: var(--ink-3);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.site-notice__close:hover { color: var(--ink); }

.site-notice__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.site-notice__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.site-notice__body {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
}
.site-notice__cta {
  display: block; width: 100%;
  padding: 0.7em 1em;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent));
  color: #fff;
  border: none; border-radius: var(--radius);
  font-size: var(--t-sm); font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.site-notice__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(194,65,12,0.5); }

@media (prefers-reduced-motion: reduce) {
  .site-notice { transition: opacity 0.3s ease; transform: none !important; }
}

/* ==========================================================================
   15  UTILITIES, MOTION & PRINT
   ========================================================================== */
.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;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.hidden { display: none !important; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-4 { margin-bottom: var(--s-4); }

/* Scroll-reveal: content is always visible, no scroll lag or popping */
.reveal-ready [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Reading progress bar for long pages */
.progress {
  position: fixed; top: 0; left: 0; z-index: 100;
  height: 2px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .mobile-nav, .fab, .compare-tray, .filters,
  .modal, .progress, .site-footer .social { display: none !important; }
  body { background: #fff; color: #000; }
  .college-card, .fee-table-wrap { border-color: #999; break-inside: avoid; }
  .fee-table thead th { background: #eee !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}