/* HumVersity — homepage styles.
   Theme: Memorisely's calm off-white base (Inter, pill buttons, big cards, lots of air),
   Jain's serif-italic accent word in headlines, one dark Masters'-Union-style bento band
   for results. Every colour and size comes from the tokens below. */

:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f2f0eb;
  --ink: #0d0d0f;
  --ink-2: #4a4a50;
  --ink-3: #8a8a91;
  --line: #e6e3dc;
  --accent: #e2531f;       /* HumVersity vermilion: used sparingly, for the one thing per screen */
  --accent-soft: #fbe6dc;
  --dark: #111113;
  --dark-2: #1c1c20;
  --dark-line: #2c2c32;
  --on-dark: #f5f4f0;
  --on-dark-2: #a6a6ad;
  --good: #1f8a4c;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-stat: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(64px, 8vw, 112px);
  --shadow: 0 1px 2px rgba(13, 13, 15, 0.04), 0 8px 24px rgba(13, 13, 15, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
/* Keeps a phrase on one line, e.g. "Online Degree" in the hero, so a wrap never splits it. */
.nowrap { white-space: nowrap; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* ---------- Buttons, pills, tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  border: 1px solid transparent; font-size: var(--fs-md); font-weight: 500;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: var(--on-dark); }
.btn-dark:hover { background: #26262b; }
.btn-light { background: var(--surface); border-color: var(--line); }
.btn-light:hover { border-color: var(--ink-3); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-sm { height: 38px; padding: 0 16px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 500;
}
.pill:hover { border-color: var(--ink); }
/* A pill that leads with a badge: the badge sits close to the edge, the words further off it. */
.pill:has(> .new) { gap: 10px; padding-left: 5px; }
.new { background: var(--ink); color: var(--on-dark); font-size: var(--fs-xs); font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 500;
}
.tag-accent { background: var(--accent-soft); color: var(--accent); }
.tag-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- Section head: label → heading → intro ---------- */
.eyebrow { font-size: var(--fs-lg); font-weight: 500; color: var(--ink-3); margin-bottom: 12px; } /* 18px, the size section labels inside .head already had; was var(--fs-sm), 14px */
/* An eyebrow led by an icon: the trust shield on the recognitions section. */
/* The orange ✦ that leads an eyebrow (was an em dash on "Two Pathways"). */
.eyebrow-star { color: var(--accent); margin-right: 4px; }
.eyebrow-icon { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow-icon svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.head { max-width: 720px; margin-bottom: 40px; }
.head h2 { font-size: var(--fs-2xl); }
.head p { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-lg); }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.head-row .head { margin-bottom: 0; }

/* ---------- Utility bar (Plaksha) + announcement ---------- */
.utility { background: var(--ink); color: var(--on-dark-2); font-size: var(--fs-xs); }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 36px; }
.utility nav { display: flex; gap: 20px; }
.utility a:hover { color: var(--on-dark); }
.announce { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); }

/* ---------- Header + mega menu ---------- */
/* Floating pill nav, after Memorisely: a centred bar that sits 12px below the top and
   stays there, rather than a full-width strip. Memorisely's is 40% white because nothing
   saturated ever scrolls under it; HumVersity's hero showcase is solid orange, so the pill is
   more opaque and carries a hairline border to stay legible over it. */
.header { position: sticky; top: 12px; z-index: 40; padding: 12px var(--gutter) 0; pointer-events: none; }
.header .wrap {
  pointer-events: auto; position: relative;
  /* Briefly full width on review, then back to 960px: it was the hero, not the header, that
     should use the side space. */
  max-width: 960px; height: 56px; padding: 0 8px 0 20px;
  display: flex; align-items: center; gap: 20px;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(13, 13, 15, 0.06); border-radius: var(--r-pill);
  box-shadow: 0 6px 10px rgba(59, 59, 59, 0.05);
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -0.01em; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-xl); }
.header .logo-mark { width: 28px; height: 28px; border-radius: 8px; font-size: var(--fs-lg); }
.logo small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); line-height: 1; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav > .menu > button { height: 32px; padding: 0 12px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: #212121; background: none; border: 0; }
.nav > a:hover, .nav > .menu > button:hover, .menu.open > button { background: rgba(13, 13, 15, 0.05); }
.header-cta { display: flex; gap: 6px; }
.header-cta .btn { height: 40px; }
/* The panel hangs from the whole pill (.header .wrap is positioned), not the Programs
   button: with Jain's full degree names it is too wide to start mid-bar without running
   off the right edge. */
.menu { position: static; }
.mega {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 24px; display: none;
  grid-template-columns: 1fr 1fr 1.3fr; gap: 24px;
}
.menu.open .mega { display: grid; }
.mega h4 { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega li a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.mega li a:hover { background: var(--surface-2); }
.mega li a span { color: var(--ink-3); }
.mega-trend { background: var(--surface-2); border-radius: var(--r-md); padding: 16px; }
.mega-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.mega-ask { margin-right: auto; font-size: var(--fs-sm); color: var(--ink-2); }
.burger { display: none; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); }

/* ---------- Ranking ticker (Minerva) ---------- */
.ticker { border-bottom: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.ticker-track { display: flex; gap: 48px; width: max-content; padding: 10px 0; animation: ticker 40s linear infinite; font-size: var(--fs-sm); color: var(--ink-2); }
.ticker-track span::before { content: "✦"; color: var(--accent); margin-right: 10px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Hero ---------- */
/* overflow-x: clip, not hidden: the spinning ring behind the hero photo sweeps its box
   corners past the edge, and clip trims that without making the hero a scroll container. */
.hero { padding: clamp(16px, 2.5vw, 32px) 0 40px; overflow-x: clip; } /* top was clamp(40px, 6vw, 80px) */
/* Only the hero spreads into the side space on large screens; every other section keeps the
   1200px column. The gutter grows with the screen so the copy never touches the edge. */
/* No width cap: the hero runs edge to edge with a 120px side margin on large screens
   (16px on a phone), as asked on review. Was max-width: 1440px with up to 64px padding. */
.hero > .wrap { max-width: none; padding: 0 clamp(16px, 6.5vw, 120px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: center; }

/* Hero photo: one tall rounded image, stat chips floating on its edges (Memorisely). */
/* First hero photo, replaced by .hv below; kept for reference.
.hero-media { position: relative; margin: 0; }
.hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); display: block; background: var(--surface-2); }
.hero-media .float { animation: bob 6s ease-in-out infinite; }
.float-a { top: 20px; left: 20px; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.float-b { left: -28px; bottom: 56px; animation-delay: -2s !important; }
.float-c { right: -24px; top: 38%; animation-delay: -4s !important; }
*/
@keyframes bob { 50% { transform: translateY(-6px); } }

/* ---------- Hero visual ----------
   Layers, back to front: an accent disc glowing behind the photo, a dot grid peeking out
   bottom-left, the photo in an arch, a rotating accreditation seal on the arch's shoulder,
   and three cards. Cards enter one after another (--d), then bob; --mx/--my come from the
   pointer (main.js) and move each card by its own depth (--z) through the `translate`
   property, which composes with the bob's `transform` instead of fighting it. */
.hv { position: relative; margin: 0; padding: 28px 28px 36px; --mx: 0; --my: 0; }
.hv-glow {
  position: absolute; inset: 6% 0 10% 12%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffb48f 0%, var(--accent) 45%, #b8380f 100%);
  filter: blur(0.5px); opacity: 0.95;
  translate: calc(var(--mx) * -6px) calc(var(--my) * -6px);
}
.hv-glow::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(226, 83, 31, 0.35); animation: spin 60s linear infinite; }
.hv-dots {
  position: absolute; left: 0; bottom: 0; width: 160px; height: 160px; opacity: 0.55;
  background-image: radial-gradient(var(--ink-3) 1.2px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 30% 70%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 30% 70%, #000 30%, transparent 72%);
}
.hv-arch {
  position: relative; margin-left: 10%; width: 82%; aspect-ratio: 4 / 5;
  border-radius: 999px 999px 28px 28px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(59, 20, 8, 0.45);
  border: 6px solid var(--surface);
}
.hv-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; transform: scale(1.04); transition: transform 1.2s ease; }
.hv:hover .hv-arch img { transform: scale(1.08); }

.hv-seal {
  position: absolute; left: 0; top: 14%; width: 116px; height: 116px; border-radius: 50%;
  background: var(--ink); color: var(--on-dark); display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(13, 13, 15, 0.25); z-index: 2;
  translate: calc(var(--mx) * 10px) calc(var(--my) * 10px);
}
.hv-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.hv-seal text { fill: currentColor; font-size: 9.6px; font-weight: 600; letter-spacing: 0.08em; }
.hv-seal span { font-family: var(--font-serif); font-style: italic; font-size: 34px; line-height: 1; color: #ffb48f; }
.hv-seal sup { font-size: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

.hv-card {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--r-md); padding: 12px 16px;
  box-shadow: 0 18px 40px -12px rgba(13, 13, 15, 0.28);
  translate: calc(var(--mx) * var(--z, 1) * 12px) calc(var(--my) * var(--z, 1) * 12px);
  animation: hv-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) both, bob 6s ease-in-out calc(var(--d, 0s) + 0.8s) infinite;
}
.hv-card b { display: block; font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1.1; }
.hv-card span { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.hv-card small { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
@keyframes hv-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }

.hv-live { right: 0; bottom: 14%; }
.hv-live b { font-size: var(--fs-md); }
.hv-pulse { width: 12px; height: 12px; border-radius: 50%; background: #ff3b6b; flex: none; position: relative; }
.hv-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff3b6b; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { to { transform: scale(2.6); opacity: 0; } }

.hv-salary { left: 0; bottom: 30%; }
.hv-salary em { font-style: normal; font-size: var(--fs-md); color: var(--good); margin-left: 4px; }
.hv-bars { display: flex; align-items: end; gap: 4px; height: 40px; }
.hv-bars i { width: 8px; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, var(--accent), #ffb48f); transform-origin: bottom; animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hv-bars i:nth-child(2) { animation-delay: 0.75s; }
.hv-bars i:nth-child(1) { animation-delay: 0.65s; }
.hv-bars i:nth-child(3) { animation-delay: 0.85s; }
.hv-bars i:nth-child(4) { animation-delay: 0.95s; }
@keyframes grow { from { transform: scaleY(0); } }

/* Right side, mid-height: below the face (top ~30%) and above the live card. */
.hv-cohort { right: -4px; top: 44%; }
.hv-faces { display: flex; }
.hv-faces img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -8px; object-fit: cover; }
.hv-faces img:first-child { margin-left: 0; }

/* ---------- Hero visual, version B: bento collage ----------
   Five tiles on a 2-column grid: a tall photo on the left, the salary stat in solid accent,
   a second photo, a dark live-class tile and a white accreditation tile. Tiles pop in one
   after another (--d); photos ease in a little on hover. */
[hidden] { display: none !important; }
.hb {
  margin: 0; display: grid; gap: 12px;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 190px 190px 132px;
  grid-template-areas: "main stat" "main photo" "live badge";
}
.hb-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; animation: hb-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) both; }
@keyframes hb-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.hb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.hb-photo:hover img { transform: scale(1.05); }
.hb-main { grid-area: main; }
.hb-main img { object-position: 50% 15%; }
.hb-tile:nth-child(3) { grid-area: photo; }
.hb-chip {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500;
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hb-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b6b; display: inline-block; position: relative; flex: none; }
.hb-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff3b6b; animation: pulse 1.6s ease-out infinite; }

.hb-stat {
  grid-area: stat; padding: 20px 22px; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(120% 120% at 100% 0%, #ff9a6b 0%, var(--accent) 45%, #b8380f 100%); color: #fff;
}
.hb-stat b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.hb-stat > span:last-child { font-size: var(--fs-sm); opacity: 0.9; margin-top: 6px; }
.hb-arrow { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: grid; place-items: center; font-size: var(--fs-lg); }

.hb-live { grid-area: live; background: var(--ink); color: var(--on-dark); padding: 16px 18px; display: flex; flex-direction: column; }
.hb-live small { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #ffb08f; }
.hb-live b { font-size: var(--fs-lg); margin-top: 6px; letter-spacing: -0.01em; }
.hb-live > span { font-size: var(--fs-xs); color: var(--on-dark-2); }
.hb-join { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--on-dark-2); }
.hb-faces { display: flex; }
.hb-faces img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); margin-left: -8px; object-fit: cover; }
.hb-faces img:first-child { margin-left: 0; }

.hb-badge { grid-area: badge; background: var(--surface); border: 1px solid var(--line); padding: 16px; display: flex; align-items: center; gap: 12px; }
.hb-badge img { width: 64px; height: 66px; object-fit: contain; flex: none; }
.hb-badge b { display: block; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.hb-badge span { font-size: var(--fs-xs); color: var(--ink-2); }

/* ---------- Hero visual, version C: live class in the HumVersity learning app ----------
   An app window tilted a few degrees in 3D (it straightens on hover), the instructor on
   video with classmates and call controls, and two cards outside the window: an AI tutor
   that "types" then answers, and a progress ring that fills. */
.hc { position: relative; margin: 0; padding: 16px 8px 92px 24px; perspective: 1400px; }
.hc::before {
  content: ""; position: absolute; inset: 10% -4% 0 18%; border-radius: 40px; z-index: -1;
  background: radial-gradient(circle at 70% 30%, #ffd2bd 0%, var(--accent-soft) 45%, transparent 75%);
}
.hc-window {
  border-radius: 20px; overflow: hidden; background: #1a1a1e;
  box-shadow: 0 40px 80px -30px rgba(13, 13, 15, 0.55), 0 0 0 1px rgba(13, 13, 15, 0.08);
  transform: rotateY(-9deg) rotateX(3deg); transform-origin: 60% 50%;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: hc-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hc:hover .hc-window { transform: none; }
@keyframes hc-in { from { opacity: 0; transform: rotateY(-20deg) rotateX(6deg) translateY(24px); } }
.hc-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #232328; color: #a6a6ad; font-size: 11px; }
.hc-lights { display: flex; gap: 6px; }
.hc-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.hc-lights i:nth-child(2) { background: #febc2e; }
.hc-lights i:nth-child(3) { background: #28c840; }
.hc-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #2e2e34; padding: 4px 10px; border-radius: 6px; }
.hc-live { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; white-space: nowrap; }
.hc-stage { position: relative; aspect-ratio: 10 / 7; }
.hc-stage > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.hc-name { position: absolute; left: 14px; bottom: 62px; z-index: 1; color: #fff; font-size: var(--fs-xs); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 8px; }
.hc-people { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; gap: 6px; }
.hc-people img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.85); }
.hc-people span { width: 64px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.5); }
.hc-controls { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1; display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: var(--r-pill); background: rgba(20, 20, 24, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hc-controls i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); }
.hc-controls svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-controls b { height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: #e5484d; color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; }

.hc-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px;
  box-shadow: 0 20px 40px -14px rgba(13, 13, 15, 0.3);
  animation: hv-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) both, bob 7s ease-in-out calc(var(--d, 0s) + 0.8s) infinite;
}
/* Under the window's bottom-left edge, clear of the call controls. */
.hc-ai { left: 0; bottom: 0; max-width: 260px; align-items: flex-start; }
.hc-ai-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-size: var(--fs-lg); background: linear-gradient(135deg, #ff9a6b, var(--accent)); }
.hc-ai small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.hc-ai p { font-size: var(--fs-sm); line-height: 1.4; margin-top: 2px; }
/* Typing dots for ~1.6s, then the reply replaces them. */
.hc-typing { display: flex; gap: 4px; padding: 6px 0; max-height: 24px; overflow: hidden; animation: hc-hide 0.3s ease 2.4s forwards; }
.hc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: hc-dot 1s ease-in-out infinite; }
.hc-typing i:nth-child(2) { animation-delay: 0.15s; }
.hc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hc-dot { 50% { transform: translateY(-4px); opacity: 0.4; } }
@keyframes hc-hide { to { opacity: 0; max-height: 0; padding: 0; } }
.hc-reply { max-height: 0; opacity: 0; overflow: hidden; animation: hc-show 0.5s ease 2.5s forwards; }
@keyframes hc-show { to { max-height: 80px; opacity: 1; } }

/* Under the window's bottom-right edge, mirroring the AI card: nothing inside the video is covered. */
.hc-progress { right: 0; bottom: 18px; }
.hc-progress b { display: block; font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1.1; }
.hc-progress span { font-size: var(--fs-xs); color: var(--ink-2); }
.hc-ring { width: 46px; height: 46px; transform: rotate(-90deg); flex: none; }
.hc-ring circle { fill: none; stroke: var(--surface-2); stroke-width: 5; }
.hc-ring .hc-ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 68 100; animation: hc-ring 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1s both; }
@keyframes hc-ring { from { stroke-dasharray: 0 100; } }

/* ---------- Hero visual, version D: the outcome ----------
   A degree certificate on a stack of papers (two sheets peek out behind it), soft accent
   rings behind the stack, a "new position" notification that slides in from the right, and
   a salary-jump chip. The certificate settles in from a tilt; the rest follow (--d). */
.hd { position: relative; margin: 0; padding: 72px 12px 96px; isolation: isolate; }
.hd-rings {
  position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(circle at 55% 50%, transparent 0 28%, rgba(226, 83, 31, 0.10) 28% 28.4%, transparent 28.4% 40%,
      rgba(226, 83, 31, 0.08) 40% 40.4%, transparent 40.4% 52%, rgba(226, 83, 31, 0.06) 52% 52.4%, transparent 52.4%),
    radial-gradient(circle at 55% 50%, var(--accent-soft) 0%, transparent 60%);
}
.hd-stack { position: relative; width: 92%; margin: 0 auto; }
.hd-stack::before, .hd-stack::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(13, 13, 15, 0.2);
}
.hd-stack::before { transform: rotate(7deg) translate(14px, 6px); background: #f4efe6; }
.hd-stack::after { transform: rotate(3deg) translate(6px, 2px); }
.hd-cert {
  position: relative; z-index: 1; border-radius: 14px; padding: 14px;
  background: linear-gradient(160deg, #fffdf8 0%, #fbf5ea 100%);
  box-shadow: 0 30px 60px -24px rgba(59, 20, 8, 0.45), 0 0 0 1px rgba(13, 13, 15, 0.06);
  transform: rotate(-3deg); animation: hd-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.6s ease;
}
.hd:hover .hd-cert { transform: rotate(-1deg) translateY(-4px); }
@keyframes hd-in { from { opacity: 0; transform: rotate(-12deg) translateY(30px) scale(0.95); } }
.hd-cert-in {
  border: 1.5px solid #d9b98f; outline: 1px solid #ead9bf; outline-offset: -7px; border-radius: 8px;
  padding: 26px 24px 20px; text-align: center; color: #3b2a1a;
}
.hd-uni { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1; letter-spacing: 0.01em; color: var(--ink); }
.hd-small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a7b57; margin-top: 12px; }
.hd-name { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; color: var(--accent); margin-top: 4px; }
.hd-degree { font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--ink); margin-top: 4px; }
.hd-spec { font-size: var(--fs-xs); color: #7a6448; margin-top: 4px; }
.hd-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 18px; text-align: left; }
.hd-sign svg { width: 110px; height: 36px; fill: none; stroke: #2b2b6b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: hd-sign 1.6s ease 0.8s forwards; }
@keyframes hd-sign { to { stroke-dashoffset: 0; } }
.hd-sign span { display: block; border-top: 1px solid #d9c3a3; padding-top: 4px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a7b57; }
.hd-seal { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff9a6b, var(--accent) 55%, #a8320d); box-shadow: 0 6px 14px rgba(168, 50, 13, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.25); }
.hd-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hd-seal text { fill: rgba(255, 255, 255, 0.9); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; }
.hd-seal span { font-family: var(--font-serif); font-style: italic; font-size: 28px; line-height: 1; }

.hd-toast {
  position: absolute; z-index: 3; right: 0; top: 8px; width: min(310px, 78%);
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 40px -14px rgba(13, 13, 15, 0.3);
  animation: hd-slide 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d) both, bob 7s ease-in-out calc(var(--d) + 0.7s) infinite;
}
@keyframes hd-slide { from { opacity: 0; transform: translateX(40px); } }
.hd-toast img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.hd-toast p { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.hd-toast p b { color: var(--ink); font-weight: 600; }
.hd-toast span { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
.hd-toast em { font-style: normal; font-weight: 600; color: #0a66c2; }

.hd-chip {
  position: absolute; z-index: 3; left: 0; bottom: 12px; display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--on-dark);
  box-shadow: 0 20px 40px -14px rgba(13, 13, 15, 0.45);
  animation: hv-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d) both, bob 7s ease-in-out calc(var(--d) + 0.7s) infinite;
}
.hd-chip-from { color: var(--on-dark-2); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); font-size: var(--fs-sm); }
.hd-chip-arrow { color: #ffb08f; }
.hd-chip-to { font-weight: 700; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.hd-chip small { grid-column: 1 / -1; font-size: 11px; color: #7ee2a8; margin-top: 2px; }

/* ---------- Hero visual, version E: scrapbook of learners ----------
   Four polaroids pinned with tape at their own angle (--r), dropping in one after another
   (--d). Everything is placed in percentages of a fixed-ratio board, so the collage scales
   as one piece from desktop to phone. Hovering a polaroid straightens it and lifts it. */
.he { position: relative; margin: 0; width: 100%; aspect-ratio: 26 / 32; }
.he::before {
  content: ""; position: absolute; inset: 8% 4% 6% 6%; border-radius: 32px; z-index: 0;
  background:
    radial-gradient(var(--line) 1.2px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(160deg, #fff6ef, var(--accent-soft));
}
.he-pol {
  position: absolute; z-index: 1; width: 48%; padding: 3.2% 3.2% 0; background: #fff;
  border-radius: 4px; box-shadow: 0 18px 36px -14px rgba(13, 13, 15, 0.35), 0 2px 6px rgba(13, 13, 15, 0.08);
  transform: rotate(var(--r)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
  animation: he-drop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d) both;
}
.he-pol:hover { transform: rotate(0deg) scale(1.04); z-index: 5; box-shadow: 0 30px 50px -16px rgba(13, 13, 15, 0.45); }
@keyframes he-drop { from { opacity: 0; transform: rotate(calc(var(--r) * 3)) translateY(-30px) scale(1.05); } }
.he-pol img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.he-cap { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 0.8rem + 0.7vw, 1.3rem); color: #3a3a40; text-align: center; padding: 0.55em 0 0.7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-tape { position: absolute; top: -10px; left: 50%; width: 34%; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 221, 180, 0.75); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.he-p2 .he-tape { transform: translateX(-50%) rotate(4deg); background: rgba(196, 230, 214, 0.8); }
.he-p3 .he-tape { transform: translateX(-50%) rotate(-6deg); background: rgba(214, 209, 244, 0.8); }
/* Rows sized so the bottom pair starts below the top pair's captions. */
.he-p1 { left: 2%; top: 2%; }
.he-p2 { right: 1%; top: 8%; width: 44%; }
.he-p3 { left: 9%; top: 53%; width: 44%; }
.he-p4 { right: 3%; top: 51%; }

.he-sticker {
  position: absolute; z-index: 6; left: 40%; top: 42%; width: 19%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; color: #fff; transform: rotate(-12deg);
  background: radial-gradient(circle at 35% 30%, #ff9a6b, var(--accent) 60%, #b8380f);
  box-shadow: 0 10px 22px -6px rgba(168, 50, 13, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.3);
  animation: he-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.8s both;
}
.he-sticker span { font-size: clamp(9px, 0.5rem + 0.3vw, 12px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; }
.he-sticker b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 0.8rem + 1.2vw, 1.9rem); line-height: 1; }
@keyframes he-pop { from { opacity: 0; transform: rotate(-12deg) scale(0.3); } }

/* ---------- Hero visual, version F: learners against pastel arches ----------
   A wide band under centred hero copy. Each person is a tile whose photo overflows the arch
   behind it (head above the arch top); multiply + a small brightness lift erases the photo's
   near-white studio background. Tiles rise in one after another, pills pop in after. */
.hero--f .hero-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 28px; }
.hero--f .hero-grid > div:first-child { max-width: 860px; }
.hero--f .hero-sub { margin-left: auto; margin-right: auto; }
.hero--f .proof, .hero--f .hero-ctas, .hero--f .degree-pills { justify-content: center; }
.hero--f .batch { justify-content: center; }
/* Variation G: the band under the copy, with the wide-band geometry F was first built with.
   Above phone width only; on a phone G and F share the phone layout. */
.hf-ribbon-wide { display: none; }

/* Badge row above the headline. The marks and the arrow only show in the centred variation. */
.hero-badge { display: inline-flex; align-items: center; gap: 14px; }
.hero-marks { display: none; align-items: center; gap: 8px; }
.hero-marks img { width: 26px; height: 26px; object-fit: contain; }
.pill-go { display: none; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); font-style: normal; font-size: 11px; place-items: center; margin-left: 2px; color: var(--ink-2); }

/* Variation G copy, after Memorisely's centred hero: a tight, heavy headline in a narrow
   column, a larger medium-weight subhead, and even rhythm between the rows. */
.hero--f .hero-marks { display: inline-flex; }
.hero--f .pill-go { display: inline-grid; }
.hero.hero--f h1 { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.1rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; max-width: 15.5em; margin: 26px auto 22px; }
.hero.hero--f .hero-sub { font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); font-weight: 500; line-height: 1.45; color: var(--ink-2); max-width: 34em; }
.hero.hero--f .proof { margin-top: 30px; }
.hero.hero--f .hero-ctas { margin-top: 30px; }
@media (min-width: 601px) {
  .hero--f .hf { aspect-ratio: 1136 / 470; max-width: 1200px; margin: 0 auto; }
  .hero--f .hf-ribbon { display: none; }
  .hero--f .hf-ribbon-wide { display: block; }
  .hero--f .hf-ribbon-wide .hf-band { stroke-width: 56; }
  .hero--f .hf-ribbon-wide .hf-zig { stroke-width: 40; display: inline; }
  .hero--f .hf-person { width: 26%; }
  .hero--f .hf-p1 { left: 9%; height: 88%; }
  .hero--f .hf-p2 { left: 37%; width: 26%; height: 100%; }
  .hero--f .hf-p3 { left: 65%; height: 86%; }
  .hero--f .hf-star { left: 4%; top: 46%; width: 5%; }
  .hero--f .hf-scribble { left: 32%; top: 10%; width: 4%; }
  .hero--f .hf-loop { left: 41%; top: 60%; width: 3%; }
  .hero--f .hf-spark1 { right: 6%; top: 18%; width: 5.5%; }
  .hero--f .hf-spark2 { right: 2.5%; top: 34%; width: 3.6%; }
  .hero--f .hf-pill1 { left: 24%; top: 26%; }
  .hero--f .hf-pill2 { left: 43%; top: 64%; }
  .hero--f .hf-pill3 { right: 9%; bottom: 10%; }
}

/* Sized for the hero's right column: a near-square board, the three arches overlapping. */
.hf { position: relative; margin: 0; width: 100%; aspect-ratio: 1 / 1.04; isolation: isolate; }
/* In front of the people, as in the reference: the ribbon crosses their lower halves; doodles
   and pills sit above it. Behind, the tiles' page-coloured backgrounds would cut it into pieces. */
.hf-ribbon { position: absolute; inset: 6% 0 0; width: 100%; height: 94%; z-index: 2; overflow: visible; pointer-events: none; }
.hf-ribbon path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hf-band { stroke: #dcecfb; stroke-width: 30; opacity: 0.75; }
.hf-zig { stroke: #fdf6e7; stroke-width: 20; opacity: 0.95; }

/* The tile carries the page colour: the photo multiplies against it above the arch, so its
   white studio backdrop lands on page colour even while the rise animation isolates it. */
.hf-person { position: absolute; bottom: 0; width: 38%; z-index: 1; background: var(--bg); animation: hf-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d) both; }
.hf-p1 { left: 0; height: 74%; }
.hf-p2 { left: 29%; width: 42%; height: 90%; z-index: 2; }
.hf-p3 { left: 62%; height: 72%; }
@keyframes hf-rise { from { opacity: 0; transform: translateY(40px); } }
.hf-arch { position: absolute; left: 6%; right: 6%; top: 20%; bottom: 0; border-radius: 999px 999px 0 0; background: var(--arch); }
.hf-person img {
  position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block;
  mix-blend-mode: multiply; filter: brightness(1.16) contrast(1.06) saturate(1.05);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hf-person:hover img { transform: translateY(-6px) scale(1.02); }

.hf-doodle { position: absolute; z-index: 3; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: hv-in 0.6s ease 0.9s both; }
.hf-star { left: 2%; top: 4%; width: 8%; transform: rotate(-12deg); }
/* Clear of the "Built for Ambition" pill at any width (the pill is fixed-size, the board is
   not); at left: 26% the pill hid it. */
.hf-scribble { left: 56%; top: 3%; width: 7%; transform: rotate(-20deg); }
.hf-loop { left: 30%; top: 58%; width: 5%; }
.hf-spark1 { right: 6%; top: 10%; width: 9%; animation: hv-in 0.6s ease 0.9s both, twinkle 3s ease-in-out 1.5s infinite; }
.hf-spark2 { right: 1%; top: 22%; width: 6%; animation: hv-in 0.6s ease 1s both, twinkle 3s ease-in-out 2.2s infinite; }
@keyframes twinkle { 50% { transform: scale(0.8) rotate(12deg); } }

.hf-pill {
  position: absolute; z-index: 4; font-size: clamp(0.78rem, 0.6rem + 0.4vw, 0.95rem) !important; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0.6em 1.1em; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--ink);
  font-size: clamp(0.8rem, 0.55rem + 0.6vw, 1.1rem); font-weight: 500; box-shadow: 3px 3px 0 var(--ink);
  /* Smooth, not springy: a soft fade-and-rise in, then a slow float. Each pill floats on its
     own period (--f), so the three never move in step. The springy pop is kept below. */
  /* animation: he-pop2 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) var(--d) both, bob 6s ease-in-out calc(var(--d) + 0.5s) infinite; */
  animation: hf-pill-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--d) both, hf-float var(--f, 8s) cubic-bezier(0.45, 0, 0.55, 1) calc(var(--d) + 1.1s) infinite;
  will-change: transform;
}
@keyframes he-pop2 { from { opacity: 0; transform: scale(0.6); } }
@keyframes hf-pill-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes hf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* Each pill labels a person: this one sits just above the first person's head. */
.hf-pill1 { left: 3%; top: 16%; --f: 7.5s; }
.hf-pill2 { left: 34%; top: 66%; --f: 9s; }
.hf-pill3 { right: 0; bottom: 6%; --f: 8.2s; }


/* Above Rahul's polaroid, the arrow curling down into it. */
.he-note { position: absolute; z-index: 6; right: 2%; top: -5%; width: 40%; display: flex; flex-direction: column; align-items: flex-start; animation: hv-in 0.6s ease 1.1s both; }
.he-note span { order: -1; }
.he-note svg { width: 34%; margin-left: 18%; transform: rotate(60deg); fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.he-note span { display: block; font-family: var(--font-serif); font-style: italic; font-size: clamp(0.95rem, 0.75rem + 0.6vw, 1.2rem); color: var(--accent); transform: rotate(-4deg); white-space: nowrap; }





/* Sized for Jain's full-sentence headline (about 54px on their site), not a short slogan. */
.hero h1 { font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.12; margin: 20px 0; }
.hero-sub { font-size: var(--fs-lg); color: var(--ink-2); max-width: 560px; }
.proof { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.avatars { display: flex; }
.avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; color: #fff; }
.avatars span:first-child { margin-left: 0; }
.avatars img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; object-fit: cover; background: var(--surface-2); }
.avatars img:first-child { margin-left: 0; }
.stars { color: #f5a524; letter-spacing: 1px; font-size: var(--fs-sm); }
.proof p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.3; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.degree-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.batch { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: var(--fs-sm); color: var(--ink-2); }
.batch b { color: var(--ink); }

/* Lead form card: a real <form>, so the page-upload injector binds it */
.lead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; /* box-shadow: var(--shadow); removed on review: flat card, border only */ }

/* Talk to Counsellor section: copy, three reassurances and a photo beside the form. */
.counsel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; background: var(--surface-2); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 48px); }
.counsel-copy h2 { font-size: var(--fs-2xl); }
.counsel-copy > p { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-lg); }
.counsel-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.counsel-points li { display: flex; align-items: center; gap: 10px; }
.counsel-points li::before { content: "\2713"; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; flex: none; }
/* Both columns end on one line: the copy column is a flex column and the photo takes whatever
   height is left beside the form (never less than 160px). Was a fixed 16:9 photo. */
.counsel-copy { display: flex; flex-direction: column; }
.counsel-photo { margin-top: 24px; width: 100%; flex: 1 1 auto; min-height: 160px; height: 0; object-fit: cover; border-radius: var(--r-md); }
/* .counsel .lead { box-shadow: var(--shadow); } -- removed on review, the form card stays flat */
.lead h2 { font-size: var(--fs-xl); }
.lead > p { color: var(--ink-2); font-size: var(--fs-sm); margin: 6px 0 20px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); }
.field input, .field select {
  height: 46px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--bg); font: inherit; font-size: var(--fs-md); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); background: var(--surface); }
/* Dropdowns drawn like the inputs: no native chrome, a thin chevron of our own, room on the
   right so a long choice never runs under it, and the "Select …" prompt in placeholder grey
   until a real option is picked. The chevron is a background image, so it survives :focus. */
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 40px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a91' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.field select:has(option[value=""]:checked) { color: var(--ink-3); }
.field select option { color: var(--ink); }
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consent { display: flex; gap: 8px; font-size: var(--fs-xs); color: var(--ink-3); margin: 4px 0 16px; }
.lead-note { margin-top: 12px; font-size: var(--fs-sm); color: var(--good); }

/* Wide visual under the hero */
.showcase { margin-top: 48px; position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 8; background: radial-gradient(120% 140% at 15% 20%, #f7c9a9 0%, #e2531f 35%, #3b1a12 75%, #111113 100%); }
.showcase::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 80px); }
.float { position: absolute; z-index: 1; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow); font-size: var(--fs-sm); }
.float b { display: block; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.float-1 { left: 4%; bottom: 10%; }
.float-2 { right: 4%; top: 12%; }
.float-3 { right: 22%; bottom: 10%; }

/* ---------- Logo strip ---------- */
.logos { padding: 48px 0 0; }
/* The strip's lead line is the claim, so it reads as one: larger, the count in the
   headline serif, the rest quieter. */
.logos p { text-align: center; font-size: var(--fs-lg); color: var(--ink-2); margin-bottom: 24px; }
.logos-lead b { color: var(--ink); font-weight: 600; }
.logos-lead .serif { font-size: 1.45em; line-height: 1; color: var(--accent); margin-right: 2px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.wordmark { font-weight: 700; font-size: var(--fs-lg); color: var(--ink-3); letter-spacing: -0.02em; }
.wordmark.alt { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-xl); }

/* Company marquee: one slow loop, edges masked to transparent so logos fade in on the
   right and out on the left against whatever the page background is. The track holds the
   list twice and slides by exactly half its width, which makes the loop seamless. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; padding: 8px 28px; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Logo pager: a window one page (three rows) tall. Pages stack vertically and the track
   slides up a page at a time; the top and bottom edges fade so logos rise out of and into
   the page rather than being cut. */
.pager {
  overflow: hidden; margin-top: 8px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.pager-track { transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
.pager-page { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); grid-auto-rows: 56px; gap: 8px 16px; padding: 20px 0; }
.pager-page .company { justify-content: center; }
.pager-page .company span { font-size: var(--fs-lg); }
.pager-page .company img, .pager-page .company svg { width: 22px; height: 22px; }

/* Recognition cards, from the Figma frame: a soft card, the logo large and centred, one
   short line under it. They ride the marquee, slower than the company strip, as they
   carry text to read. */
.recog-track { gap: 16px; padding: 8px 16px; align-items: stretch; animation-duration: 70s; }
.recog { width: 264px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 20px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.recog img { width: 140px; height: 143px; object-fit: contain; }
.recog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.recog-grid .recog { width: auto; }
@media (max-width: 900px) { .recog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .recog-grid { gap: 10px; }
  .recog-grid .recog { padding: 16px 12px 20px; gap: 12px; }
  .recog-grid .recog img { width: 96px; height: 98px; }
}
.recog p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }

.company { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); opacity: 0.5; transition: opacity 0.2s ease; white-space: nowrap; }
.company:hover { opacity: 1; }
.company img, .company svg { width: 26px; height: 26px; }
.company span { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Recognitions ---------- */
.badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.badge { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 16px; text-align: center; }
.badge-seal { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; border: 1.5px dashed var(--ink-3); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); }
.badge b { display: block; font-size: var(--fs-sm); }
.badge span { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- Programs ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { height: 38px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; }
.tab span { color: var(--ink-3); margin-left: 4px; }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.tab[aria-selected="true"] span { color: var(--on-dark-2); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Previous program card (gradient header + tag row), kept for reference:
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pcard-art { aspect-ratio: 16 / 7; position: relative; padding: 14px; display: flex; align-items: start; gap: 6px; }
.pcard-art .tag { background: rgba(255, 255, 255, 0.9); }
.pcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard-degree { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pcard h3 { font-size: var(--fs-lg); letter-spacing: -0.01em; line-height: 1.3; }
.pcard-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
*/

/* Program card, after Memorisely's course card: the photo sits inset in a white card with
   its own rounded corners; a solid chip and glass tags float top-left, a glass icon button
   bottom-left; below, title, one grey description line and a grey meta line. */
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pcard:hover .pcard-media img { transform: scale(1.03); }
.pcard-chips { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; align-items: center; }
.chip-solid { height: 30px; padding: 0 12px; border-radius: var(--r-sm); background: var(--surface); display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.chip-glass { height: 30px; padding: 0 10px; border-radius: var(--r-sm); background: rgba(40, 40, 44, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; }
.chip-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff3b6b; box-shadow: 0 0 0 2px rgba(255, 59, 107, 0.3); }
.pcard-icon { position: absolute; left: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; background: rgba(20, 20, 24, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
.pcard-icon svg { width: 20px; height: 20px; }
.pcard-body { padding: 18px 6px 4px; display: flex; flex-direction: column; flex: 1; }
.pcard h3 { font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1.25; }
.pcard-desc { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-md); }
/* Meta line doubles as the card's foot now the fee row is gone: details left, link right. */
.pcard-meta { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-sm); }
.pcard-meta i { font-style: normal; margin: 0 8px; }
.pcard-meta a { font-weight: 500; color: var(--ink); white-space: nowrap; }
.pcard-meta a:hover { color: var(--accent); }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.pcard-foot b { font-size: var(--fs-md); color: var(--ink); }
.pcard-foot a { font-weight: 500; color: var(--ink); }
.pcard-foot a:hover { color: var(--accent); }
.more-row { margin-top: 28px; display: flex; justify-content: center; }

/* ---------- Feature blurbs (Memorisely's 4-up) ---------- */
.blurbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.blurb b { display: block; font-size: var(--fs-md); margin-bottom: 4px; }
.blurb p { font-size: var(--fs-sm); color: var(--ink-2); }
.blurb-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; margin-bottom: 14px; font-size: var(--fs-lg); }

/* ---------- Tools + micro-credentials ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.panel h3 { font-size: var(--fs-xl); margin-bottom: 8px; }
.panel > p { color: var(--ink-2); }
.tool-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 24px; }
.tool { aspect-ratio: 1; border-radius: var(--r-md); background: var(--surface-2); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); text-align: center; padding: 6px; }

/* Tools panel with logos: the card is a flex column so the 4x4 grid stretches to match the
   pathways card beside it (the split's grid already makes both cards one height); a short
   line closes the card. Logos are single-colour, greyed, and take their own colour on hover
   of the tile through opacity alone, so nothing shifts. */
.split { align-items: stretch; }
.panel-tools { display: flex; flex-direction: column; }
.tool-grid-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; flex: 1; min-height: 0; }
.tool-grid-logos .tool { aspect-ratio: auto; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.tool-grid-logos .tool img { width: 28px; height: 28px; opacity: 0.85; transition: opacity 0.2s ease; }
.tool-grid-logos .tool span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.tool-grid-logos .tool:hover { background: var(--surface); border-color: var(--line); transform: translateY(-2px); }
/* Checkerboard on the 4-column grid: half the tiles white with a border, half grey-filled
   (row 1: columns 1 and 3 white; row 2: columns 2 and 4; then repeating). Hover swaps a tile to
   the other style, so both looks keep showing. */
/* The checkerboard was first written with nth-child here; patterns are now assigned per tile in
   main.js (TOOL_PATTERNS) as classes, so a new pattern is one line of JS:
.tool-grid-logos .tool:nth-child(8n+1), .tool-grid-logos .tool:nth-child(8n+3),
.tool-grid-logos .tool:nth-child(8n+6), .tool-grid-logos .tool:nth-child(8n+8) { background: var(--surface); border-color: var(--line); }
.tool-grid-logos .tool:nth-child(8n+1):hover, .tool-grid-logos .tool:nth-child(8n+3):hover,
.tool-grid-logos .tool:nth-child(8n+6):hover, .tool-grid-logos .tool:nth-child(8n+8):hover { background: var(--surface-2); border-color: transparent; }
*/
/* Tile styles a pattern can give: t-w white with a border, t-g grey fill (the default), t-g2 a
   step deeper grey, t-g0 a step lighter, t-acc soft accent. Hover always swaps a white tile to
   grey and any filled tile to white, so both looks keep showing. */
.tool-grid-logos .tool.t-w { background: var(--surface); border-color: var(--line); }
.tool-grid-logos .tool.t-g0 { background: #f7f5f0; }
.tool-grid-logos .tool.t-g2 { background: #e8e5dd; }
.tool-grid-logos .tool.t-acc { background: var(--accent-soft); border-color: #f6c9b4; }
.tool-grid-logos .tool.t-acc span { color: var(--accent); }
/* Pastel fills: lighter cuts of the hero arch colours (yellow, blue, pink) plus a mint. */
.tool-grid-logos .tool.t-yel { background: #fdf6d6; }
.tool-grid-logos .tool.t-blu { background: #e3effc; }
.tool-grid-logos .tool.t-pnk { background: #fce8f1; }
.tool-grid-logos .tool.t-mnt { background: #e2f4ea; }
.tool-grid-logos .tool.t-yel:hover, .tool-grid-logos .tool.t-blu:hover, .tool-grid-logos .tool.t-pnk:hover, .tool-grid-logos .tool.t-mnt:hover { background: var(--surface); border-color: var(--line); }
.tool-grid-logos .tool.t-w:hover { background: var(--surface-2); border-color: transparent; }
.tool-grid-logos .tool.t-g0:hover, .tool-grid-logos .tool.t-g2:hover, .tool-grid-logos .tool.t-acc:hover { background: var(--surface); border-color: var(--line); }
.tool-grid-logos .tool:hover img { opacity: 1; }
/* "+15 more tools": white with a border, chosen on review (was solid black, var(--ink)). */
.tool-grid-logos .tool.tool-more { background: var(--surface); border-color: var(--line); }
.tool-grid-logos .tool.tool-more:hover { background: var(--surface-2); border-color: transparent; }
.tool-more b { font-size: var(--fs-xl); color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.tool-more span { color: var(--ink-3) !important; }
.tools-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.tools-foot span { color: var(--accent); margin-right: 6px; }
/* The pathways card is as tall as the tools card; its two pathways share that height evenly
   instead of leaving a gap at the bottom. */
.split > .panel:not(.panel-tools) { display: flex; flex-direction: column; }
.split > .panel:not(.panel-tools) .path { flex: 1; }
/* minmax(0, 1fr) lets a column shrink below its longest name; on a phone the labels step
   down a size so "TensorFlow" fits its tile instead of widening the card. */
@media (max-width: 600px) { .tool-grid-logos { gap: 6px; } .tool-grid-logos .tool { min-height: 72px; padding: 6px 2px; } .tool-grid-logos .tool span { font-size: 10.5px; } .tool-grid-logos .tool img { width: 24px; height: 24px; } }
.path { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.path:first-of-type { margin-top: 20px; }
.path-num { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-2xl); color: var(--accent); line-height: 1; min-width: 40px; }
.path b { display: block; }
.path p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; }
.path-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
/* Pathways as tiles, matching the tools grid beside them: each pathway fills half the card,
   01 grey-filled and 02 white with a border (the same two looks as the tool checkerboard).
   Inside, the number and copy sit at the top and the tags are pinned to the bottom, so the
   card has no loose gaps. Hover swaps each tile to the other look, as the tool tiles do. */
.split > .panel:not(.panel-tools) .path {
  flex: 1; margin: 0; padding: 22px 22px 20px; border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--surface-2); gap: 18px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.split > .panel:not(.panel-tools) .path:first-of-type { margin-top: 20px; }
.split > .panel:not(.panel-tools) .path + .path { margin-top: 12px; background: var(--surface); border-color: var(--line); }
.split > .panel:not(.panel-tools) .path:hover { background: var(--surface); border-color: var(--line); transform: translateY(-2px); }
.split > .panel:not(.panel-tools) .path + .path:hover { background: var(--surface-2); border-color: transparent; }
.split > .panel:not(.panel-tools) .path { align-items: center; } /* content centred in the tile */
.split > .panel:not(.panel-tools) .path > div { display: flex; flex-direction: column; }
/* Tags follow the description; pinning them to the tile bottom (margin-top: auto) left a gap
   between the copy and the tags, so the spare height now splits above and below instead. */
.split > .panel:not(.panel-tools) .path .path-tags { margin-top: 14px; }
.split > .panel:not(.panel-tools) .path .path-tags .tag { background: var(--surface); border: 1px solid var(--line); }
.split > .panel:not(.panel-tools) .path + .path .path-tags .tag { background: var(--surface-2); border-color: transparent; }
.split > .panel:not(.panel-tools) .path-num { align-self: flex-start; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.panel > .eyebrow { margin-bottom: 6px; font-size: var(--fs-md); } /* labels inside cards stay a step smaller */

/* ---------- Cohort numbers ---------- */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.num { padding: 28px 20px; border-left: 1px solid var(--line); }
.num:first-child { border-left: 0; padding-left: 0; }
.num b { display: block; font-size: var(--fs-stat); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.num span { display: block; margin-top: 10px; color: var(--ink-2); font-size: var(--fs-sm); }
.library { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--surface-2); border-radius: var(--r-lg); padding: 28px; }
.library b { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.library p { color: var(--ink-2); margin-top: 4px; }
.library ul { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

/* ---------- Events ---------- */
.events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ecard-art { aspect-ratio: 16 / 9; position: relative; padding: 14px; }
.ecard-art .tag { background: rgba(255, 255, 255, 0.92); }
.ecard-date { position: absolute; right: 14px; bottom: 14px; background: var(--surface); border-radius: var(--r-sm); padding: 6px 10px; text-align: center; line-height: 1.1; }
.ecard-date b { display: block; font-size: var(--fs-xl); }
.ecard-date span { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; }
.ecard-body { padding: 18px 20px 20px; }
.ecard h3 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
.ecard p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 6px; }

/* ---------- Results bento (Masters' Union) ---------- */
.dark { background: var(--dark); color: var(--on-dark); }
.dark .eyebrow { color: var(--on-dark-2); }
.dark .head p { color: var(--on-dark-2); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 12px; }
.tile { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.tile b { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.tile span { color: var(--on-dark-2); font-size: var(--fs-sm); }
.tile-big { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, #2a1610 0%, var(--dark-2) 60%); }
.tile-big b { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); color: #ffb08f; }
.tile-wide { grid-column: span 2; }
.tile-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.tile-logos span { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--dark-line); font-size: var(--fs-xs); color: var(--on-dark-2); font-weight: 600; }

/* ---------- Partners ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.partner { height: 64px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; color: var(--ink-3); font-size: var(--fs-sm); letter-spacing: -0.01em; }

/* ---------- Chancellor ---------- */
.quote { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 48px); }
.portrait { aspect-ratio: 4 / 5; border-radius: var(--r-md); background: linear-gradient(170deg, #d9d2c5, #a59a88); display: grid; place-items: end start; padding: 14px; color: #fff; font-size: var(--fs-xs); }
/* Jain's chancellor note is a letter, not a pull quote: greeting, one serif paragraph,
   then the second paragraph in body text. Sized down so ~60 words sit comfortably. */
.quote blockquote { margin: 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.65rem); line-height: 1.35; letter-spacing: -0.01em; }
.quote-greet { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-xl); margin-bottom: 10px; }
.quote-more { margin-top: 16px; color: var(--ink-2); }
.quote cite { display: block; margin-top: 24px; font-style: normal; }
.quote cite b { display: block; }
.quote cite span { color: var(--ink-3); font-size: var(--fs-sm); }

/* ---------- Faculty ---------- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.person-photo { aspect-ratio: 4 / 3;border-radius: var(--r-lg); display: grid; place-items: center; font-size: var(--fs-2xl); font-weight: 600; color: rgba(255, 255, 255, 0.95); }
.person b { display: block; margin-top: 12px; }
.person span { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- Testimonials ---------- */
.videos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.vcard { aspect-ratio: 9 / 14; border-radius: var(--r-lg); position: relative; overflow: hidden; color: #fff; padding: 14px; display: flex; flex-direction: column; justify-content: end; border: 0; text-align: left; }
.vcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65)); }
.vcard > * { position: relative; }
.vcard b { font-size: var(--fs-sm); }
.vcard span { font-size: var(--fs-xs); opacity: 0.85; }
.play { position: absolute !important; top: 14px; left: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: grid; place-items: center; font-size: var(--fs-xs); }
.reviews { columns: 3 280px; column-gap: 16px; }
.review { break-inside: avoid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; }
.review p { font-size: var(--fs-sm); color: var(--ink-2); }
.review footer { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--fs-sm); }
.review footer i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: #fff; }
.review footer span { color: var(--ink-3); font-size: var(--fs-xs); display: block; }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post-art { aspect-ratio: 16 / 10; border-radius: var(--r-md); margin-bottom: 14px; }
.post h3 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
.post span { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 6px; }
.post:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; font-weight: 500; font-size: var(--fs-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-xl); line-height: 1; color: var(--ink-3); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 640px; }
/* Jain's answers carry lists; the answer block owns the bottom spacing. */
.faq .ans { padding-bottom: 20px; color: var(--ink-2); max-width: 680px; }
.faq .ans p { padding: 0 0 10px; }
.faq .ans ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.faq .head p + p { margin-top: 8px; font-size: var(--fs-md); }
.foot-sub { margin-top: 24px; }

/* ---------- Closing CTA ---------- */
.cta { background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg); padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 83, 31, 0.45), transparent 70%); top: -260px; left: 50%; transform: translateX(-50%); }
.cta > * { position: relative; }
.cta h2 { font-size: var(--fs-3xl); }
.cta p { color: var(--on-dark-2); margin: 16px auto 28px; max-width: 520px; font-size: var(--fs-lg); }
.cta .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta .btn-light { background: transparent; color: var(--on-dark); border-color: var(--dark-line); }

/* ---------- Footer ---------- */
.footer { padding: 64px 0 32px; font-size: var(--fs-sm); color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.foot-grid h4 { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a:hover { color: var(--ink); }
.foot-about p { margin-top: 14px; max-width: 320px; }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; }
.foot-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-3); }
.demo-note { color: var(--accent); }

/* ---------- Sticky mobile bar (Scaler) ---------- */
.mobile-bar { display: none; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-media .float { animation: none; }
  .hb-tile, .hb-dot::after { animation: none !important; }
  .hc-window, .hc-card, .hc-typing i, .hc-ring .hc-ring-fill { animation: none !important; }
  .hc-window { transform: none; }
  .hd-cert, .hd-toast, .hd-chip { animation: none !important; }
  .he-pol, .he-sticker, .he-note { animation: none !important; }
  .hf-person, .hf-doodle, .hf-pill { animation: none !important; }
  .hd-sign svg { animation: none; stroke-dashoffset: 0; }
  .hc-typing { display: none; }
  .hc-reply { max-height: none; opacity: 1; animation: none; }
  .hv-card, .hv-seal svg, .hv-glow::after, .hv-pulse::after, .hv-bars i { animation: none !important; }
  .hv-card, .hv-seal, .hv-glow { translate: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee-track [aria-hidden="true"] { display: none; }
  .pager-track { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .badges { grid-template-columns: repeat(3, 1fr); }
  .partner-grid { grid-template-columns: repeat(4, 1fr); }
  .videos { grid-template-columns: repeat(3, 1fr); }
  .videos .vcard:nth-child(n + 4) { display: none; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav, .header-cta .btn-light { display: none; }
  .burger { display: grid; place-items: center; }
  .header-cta { margin-left: auto; }
  .header .wrap { padding: 0 8px 0 16px; }
  .header.open .nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 12px; }
  .header.open .mega { position: static; width: auto; box-shadow: none; grid-template-columns: 1fr; padding: 12px 0; border: 0; }
  .hero-grid, .split, .faq-grid, .quote, .counsel { grid-template-columns: minmax(0, 1fr); }
  .hero-media { max-width: 520px; }
  .hv { max-width: 520px; margin: 8px auto 0; }
  .hb { max-width: 560px; width: 100%; margin: 8px auto 0; }
  .hc { max-width: 600px; margin: 0 auto; }
  .hd { max-width: 560px; margin: 0 auto; }
  .he { max-width: 520px; margin: 0 auto; }
  .float-b { left: 12px; }
  .float-c { right: 12px; }
  .quote .portrait { max-width: 220px; }
  .cards, .events, .posts { grid-template-columns: 1fr 1fr; }
  .blurbs, .people { grid-template-columns: 1fr 1fr; }
  .nums { grid-template-columns: 1fr 1fr; }
  .num:nth-child(3) { border-left: 0; padding-left: 0; }
  .num:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .bento { grid-template-columns: 1fr 1fr; }
  .showcase { aspect-ratio: 4 / 3; }
  .float-3 { display: none; }
  .utility nav { display: none; }
}
@media (max-width: 600px) {
  .cards, .events, .posts, .badges { grid-template-columns: 1fr; }
  .badges { grid-template-columns: 1fr 1fr; }
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-grid { grid-template-columns: repeat(4, 1fr); }
  .videos { grid-template-columns: 1fr 1fr; }
  .videos .vcard:nth-child(n + 3) { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .tile-big, .tile-wide { grid-column: span 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .header-cta .btn-dark { display: none; }
  .mobile-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  /* Phone: a shorter photo framed from the top, so the face stays clear of the chips. */
  .hero-media img { aspect-ratio: 4 / 3; object-position: center top; }
  .float-a { display: none; }
  .hero-media .float { padding: 10px 12px; font-size: var(--fs-xs); }
  .hero-media .float b { font-size: var(--fs-lg); }
  .float-a { top: 12px; left: 12px; }
  .float-b { left: 12px; bottom: 12px; }
  .float-c { display: none; }
  .hv { padding: 16px 8px 24px; }
  .hb { grid-template-rows: 150px 150px 128px; gap: 10px; }
  .hc { padding: 8px 0 84px; }
  .hd { padding: 88px 0 92px; }
  /* F on a phone: a squarer band, bigger overlapping people, two pills. */
  .hf { aspect-ratio: 1 / 1.05; }
  .hf-person { width: 40%; }
  .hf-p1 { left: -2%; height: 74%; }
  .hf-p2 { left: 30%; height: 88%; z-index: 2; }
  .hf-p3 { left: 62%; height: 72%; }
  .hf-pill2, .hf-loop { display: none; }
  /* The ribbon is stretched to the band; squeezed this narrow, the zigzag crosses faces. */
  .hf-zig { display: none; }
  .hf-band { stroke-width: 22; opacity: 0.6; }
  .hf-pill1 { left: 2%; top: 6%; }
  .hf-pill3 { right: 2%; bottom: 4%; }
  .hf-star { top: 30%; width: 9%; }
  .hf-scribble { top: 2%; left: 58%; width: 8%; }
  .hf-spark1 { width: 10%; top: 12%; }
  .hf-spark2 { width: 7%; top: 26%; }
  .hd-cert-in { padding: 18px 14px 14px; }
  .hd-seal { width: 60px; height: 60px; }
  .hd-seal span { font-size: 22px; }
  .hd-sign svg { width: 84px; }
  .hd-toast { width: 86%; }
  .hd-toast p { font-size: var(--fs-xs); }
  /* The two cards share the width under the window: ~58% / ~42%. */
  .hc-progress { right: 0; bottom: 12px; width: calc(42% - 5px); gap: 8px; }
  .hc-ai { width: calc(58% - 5px); max-width: none; gap: 8px; }
  .hc-ai-mark { width: 28px; height: 28px; font-size: var(--fs-md); }
  .hc-ai p { font-size: var(--fs-xs); }
  .hc-progress b { font-size: var(--fs-lg); }
  .hc-progress span { font-size: 11px; }
  .hc-window { transform: none; }
  .hc-url { display: none; }
  .hc-people img { width: 46px; height: 36px; }
  .hc-people span { width: 46px; }
  .hc-name { bottom: 56px; font-size: 11px; }
  .hc-controls i { width: 28px; height: 28px; }
  .hc-ai { max-width: 240px; padding: 10px 12px; }
  .hc-progress { padding: 8px 12px; }
  .hc-ring { width: 36px; height: 36px; }
  .hb-stat { padding: 14px 16px; }
  .hb-badge { padding: 12px; gap: 8px; }
  .hb-badge img { width: 44px; height: 46px; }
  .hb-badge b { font-size: var(--fs-md); }
  .hb-live { padding: 12px 14px; }
  .hb-live b { font-size: var(--fs-md); }
  .hv-seal { width: 84px; height: 84px; top: 6%; }
  .hv-seal span { font-size: 24px; }
  .hv-seal text { font-size: 9px; }
  .hv-cohort { display: none; }
  .hv-card { padding: 10px 12px; gap: 10px; }
  .hv-card b { font-size: var(--fs-lg); }
  .hv-live b { font-size: var(--fs-sm); }
  .hv-bars { height: 30px; }
  .hv-salary { bottom: 34%; }
  .mobile-bar .btn { flex: 1; min-width: 0; height: 44px; padding: 0 12px; font-size: var(--fs-sm); }
  body { padding-bottom: 72px; }
  .announce .hide-sm { display: none; }
}


/* ---------- Cohort (reworked) ----------
   Copy left, a 2x2 of stat tiles right in the tools grid's checkerboard (white + border /
   grey fill); then the LinkedIn Learning band: the figure and copy left, four ticked benefit
   tiles right. Hover swaps a tile's look, as in the tools grid. */
.cohort { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.cohort-copy h2 { font-size: var(--fs-2xl); margin-top: 0; }
.cohort-copy > p:not(.eyebrow) { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-lg); }
.cohort-faces { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.cohort-faces .avatars img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; object-fit: cover; background: var(--surface-2); }
.cohort-faces .avatars img:first-child { margin-left: 0; }
.cohort-faces > span { font-size: var(--fs-sm); color: var(--ink-2); }
.cohort-faces b { color: var(--ink); }
/* First stat design (four filled tiles with orange icon squares), replaced on review:
.cohort-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cstat { background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 6px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.cstat-w { background: var(--surface); border-color: var(--line); }
.cstat:hover { background: var(--surface); border-color: var(--line); transform: translateY(-2px); }
.cstat-w:hover { background: var(--surface-2); border-color: transparent; }
.cstat i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; }
.cstat i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cstat b { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cstat span { font-size: var(--fs-sm); color: var(--ink-2); }
*/
/* Stats as one quiet card: four cells split by hairlines, a small grey line icon over each
   number, the number at a calm size with its "+" in the accent, the label under it. A cell
   takes a faint fill on hover. */
.cohort-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cstat { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 4px; transition: background 0.2s ease; }
.cstat:nth-child(odd) { border-right: 1px solid var(--line); }
.cstat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.cstat:hover { background: #fbfaf7; }
.cstat i { color: var(--ink-3); margin-bottom: 14px; display: block; }
.cstat i svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cstat b { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cstat b em { font-style: normal; color: var(--accent); }
.cstat span { font-size: var(--fs-sm); color: var(--ink-2); }

.library2 { margin-top: 20px; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); }
.library2-lead .eyebrow { margin-bottom: 8px; }
.library2-num { display: block; font-size: var(--fs-stat); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.library2-num .serif { color: var(--accent); }
.library2-lead > p:not(.eyebrow) { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.library2-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.library2-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease; }
.library2-list li:nth-child(2), .library2-list li:nth-child(3) { background: var(--surface); border-color: var(--line); }
.library2-list li:hover { background: var(--surface); border-color: var(--line); }
.library2-list li:nth-child(2):hover, .library2-list li:nth-child(3):hover { background: var(--surface-2); border-color: transparent; }
.library2-list i { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; flex: none; }
.library2-list i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.library2-list b { display: block; font-size: var(--fs-sm); }
.library2-list span { display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
@media (max-width: 900px) {
  .cohort, .library2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .library2-list { grid-template-columns: minmax(0, 1fr); }
  .cstat { padding: 16px; }
}

/* ---------- Events (reworked) ----------
   A featured event spans both rows on the left; two compact events stack on the right as
   horizontal cards. Same card language as the program cards: white card, inset rounded photo,
   chips on the photo. The photo eases in on hover. */
.events2 { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.ev { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ev:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ev-feature { grid-row: 1 / span 2; }
.ev-media { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.ev:hover .ev-media img { transform: scale(1.04); }
.ev-feature .ev-media { aspect-ratio: 16 / 10; }
.ev-date { position: absolute; left: 12px; top: 12px; background: var(--surface); border-radius: 12px; padding: 6px 10px; text-align: center; line-height: 1.05; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.ev-date b { display: block; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.ev-date span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.ev-tag { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: #fff; background: rgba(20, 20, 24, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); }
.ev-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff3b6b; box-shadow: 0 0 0 2px rgba(255, 59, 107, 0.3); }
.ev-body { padding: 18px 8px 6px; display: flex; flex-direction: column; flex: 1; }
.ev h3 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
.ev-feature h3 { font-size: var(--fs-xl); }
.ev-speaker { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ev-speaker img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.ev-speaker b { display: block; font-size: var(--fs-sm); }
.ev-speaker span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.ev-foot { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.ev-foot a { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* .ev-foot a::after { content: " →"; } -- arrow removed on review */
.ev-foot a:hover { color: var(--accent); }
/* Compact events: photo left, details right. */
.ev-small { flex-direction: row; gap: 4px; }
.ev-small .ev-media { width: 42%; flex: none; }
.ev-small .ev-body { padding: 8px 8px 4px 16px; }
.ev-small .ev-date { left: 8px; top: 8px; padding: 4px 8px; }
.ev-small .ev-date b { font-size: var(--fs-lg); }
.ev-small .ev-tag { right: 8px; top: auto; bottom: 8px; height: 24px; }
@media (max-width: 900px) {
  .events2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .ev-feature { grid-row: auto; }
}
@media (max-width: 600px) {
  .ev-small { flex-direction: column; }
  .ev-small .ev-media { width: 100%; aspect-ratio: 16 / 9; }
  .ev-small .ev-body { padding: 16px 8px 6px; }
}

/* ---------- Graph-paper grid background (after Masters' Union) ----------
   Faint 56px squares drawn with two 1px gradients, masked to fade out towards the edges so
   the section reads as paper, not a table. The section keeps its own top padding here
   (the Events section had padding-top: 0) so the grid has room to breathe above the heading. */
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(13, 13, 15, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 15, 0.055) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 45%, #000 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 75% at 50% 45%, #000 35%, transparent 85%);
}
/* Events sits right after the cohort section's own bottom padding; full section padding on
   top as well doubled the gap, so it gets a short top pad, just enough for the grid to show. */
#events.grid-bg { padding-top: clamp(16px, 2.5vw, 40px); }


/* ---------- Results (reworked) ---------- */
.tile-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tile-up { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: #7ee2a8; background: rgba(126, 226, 168, 0.1); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
/* Rising bars in the 65% tile: grey steps up to one accent bar, growing in on first view. */
.hike-chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; min-height: 90px; padding-top: 12px; }
.hike-chart i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: rgba(255, 255, 255, 0.08); transform-origin: bottom; transform: scaleY(0); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.hike-chart .hike-now { background: linear-gradient(180deg, #ffb08f, var(--accent)); }
.bento.in .hike-chart i { transform: scaleY(1); }
.bento.in .hike-chart i:nth-child(2) { transition-delay: 0.06s; }
.bento.in .hike-chart i:nth-child(3) { transition-delay: 0.12s; }
.bento.in .hike-chart i:nth-child(4) { transition-delay: 0.18s; }
.bento.in .hike-chart i:nth-child(5) { transition-delay: 0.24s; }
.bento.in .hike-chart i:nth-child(6) { transition-delay: 0.3s; }
/* Thin meters under the percentages, filling to their value on first view. */
.meter { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v); border-radius: 99px; background: linear-gradient(90deg, #ffb08f, var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
.bento.in .meter i { transform: scaleX(1); }
/* Recruiter marks: Simple Icons drawn white on the dark tile. */
.tile-marks { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }
.tile-marks img { width: 22px; height: 22px; filter: invert(1); opacity: 0.65; transition: opacity 0.2s ease; }
.tile-marks img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hike-chart i, .meter i { transform: none; transition: none; } }

/* Hiring partners tile: two rows of chips sliding opposite ways under faded edges; hover pauses.
   The marks are single-colour SVGs inverted to white for the dark tile. */
.tile-partners { justify-content: flex-start; gap: 18px; overflow: hidden; }
.pscroll { display: grid; gap: 10px; margin: 0 -24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pscroll-track { display: flex; gap: 10px; width: max-content; animation: marquee 38s linear infinite; }
.pscroll-rev { animation-direction: reverse; animation-duration: 44s; }
.tile-partners:hover .pscroll-track { animation-play-state: paused; }
.pchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dark-line); color: var(--on-dark); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.pchip img { width: 18px; height: 18px; filter: invert(1); opacity: 0.85; }
.pchip svg { width: 16px; height: 16px; color: var(--on-dark); }
.pchip > span { color: var(--on-dark) !important; font-size: var(--fs-sm) !important; }
@media (prefers-reduced-motion: reduce) { .pscroll-track { animation: none; flex-wrap: wrap; width: auto; } .pscroll-track [aria-hidden="true"] { display: none; } }

/* Results band: a black-and-white student photo under a dark layer. The photo sits in a
   pseudo-element so it can be desaturated (a background image cannot take a filter); the
   overlay is a gradient, a touch lighter in the middle so the faces read as texture behind
   the tiles, darker at the edges so the band still meets the page with a clean line.
   Photo: free Unsplash image, hotlinked. */
#outcomes { position: relative; isolation: isolate; overflow: hidden; }
/* The single group photo first used here, replaced by the portrait collage below:
#outcomes::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?w=1800&q=70&auto=format&fit=crop") center 35% / cover no-repeat;
  filter: grayscale(1) contrast(1.1);
}
*/
/* Portrait collage: a grid of individual learners filling the band, desaturated, with thin
   gaps so each face reads as its own frame. 8 columns x 3 rows on desktop, 4 x 6 on a phone. */
.results-collage {
  position: absolute; inset: 0; z-index: -2; display: grid; gap: 4px;
  grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(3, 1fr);
  filter: grayscale(1) contrast(1.08);
}
.results-collage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
/* Mosaic: 24 portraits in mixed sizes (4 big 2x2, 8 tall 1x2, 4 wide 2x1, 8 small 1x1),
   each placed by hand on an 8 x 6 grid so the pieces tile it exactly, no holes. */
.results-collage { grid-template-rows: repeat(6, 1fr); }
.results-collage img:nth-child(1) { grid-area: 1 / 1 / span 2 / span 2; }
.results-collage img:nth-child(2) { grid-area: 1 / 3 / span 2 / span 1; }
.results-collage img:nth-child(3) { grid-area: 1 / 4 / span 1 / span 1; }
.results-collage img:nth-child(4) { grid-area: 2 / 4 / span 1 / span 1; }
.results-collage img:nth-child(5) { grid-area: 1 / 5 / span 2 / span 2; }
.results-collage img:nth-child(6) { grid-area: 1 / 7 / span 2 / span 1; }
.results-collage img:nth-child(7) { grid-area: 1 / 8 / span 2 / span 1; }
.results-collage img:nth-child(8) { grid-area: 3 / 1 / span 2 / span 1; }
.results-collage img:nth-child(9) { grid-area: 3 / 2 / span 1 / span 2; }
.results-collage img:nth-child(10) { grid-area: 4 / 2 / span 1 / span 2; }
.results-collage img:nth-child(11) { grid-area: 3 / 4 / span 2 / span 2; }
.results-collage img:nth-child(12) { grid-area: 3 / 6 / span 2 / span 1; }
.results-collage img:nth-child(13) { grid-area: 3 / 7 / span 1 / span 2; }
.results-collage img:nth-child(14) { grid-area: 4 / 7 / span 1 / span 1; }
.results-collage img:nth-child(15) { grid-area: 4 / 8 / span 1 / span 1; }
.results-collage img:nth-child(16) { grid-area: 5 / 1 / span 1 / span 2; }
.results-collage img:nth-child(17) { grid-area: 6 / 1 / span 1 / span 1; }
.results-collage img:nth-child(18) { grid-area: 6 / 2 / span 1 / span 1; }
.results-collage img:nth-child(19) { grid-area: 5 / 3 / span 2 / span 1; }
.results-collage img:nth-child(20) { grid-area: 5 / 4 / span 2 / span 2; }
.results-collage img:nth-child(21) { grid-area: 5 / 6 / span 2 / span 1; }
.results-collage img:nth-child(22) { grid-area: 5 / 7 / span 2 / span 1; }
.results-collage img:nth-child(23) { grid-area: 5 / 8 / span 1 / span 1; }
.results-collage img:nth-child(24) { grid-area: 6 / 8 / span 1 / span 1; }
@media (max-width: 600px) {
  .results-collage { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); }
  .results-collage img { grid-area: auto !important; } /* a phone keeps the plain even grid */
}
#outcomes::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(17, 17, 19, 0.82), rgba(17, 17, 19, 0.95));
}
/* Frosted tiles over the photo: the dark tiles let the black-and-white students show through,
   blurred, instead of blocking them out. The 65% tile keeps its warm tint, also translucent. */
#outcomes .tile { background: rgba(28, 28, 32, 0.66); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); border-color: rgba(255, 255, 255, 0.08); }
#outcomes .tile-big { background: linear-gradient(160deg, rgba(60, 26, 14, 0.72) 0%, rgba(28, 28, 32, 0.66) 60%); }

/* White result cards: tried on review and rejected; kept for reference.
( White result cards over the dark collage (chosen on review; the frosted dark tiles are the
   rules just above). Everything inside flips to the light palette. )
#outcomes .tile { background: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.6); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55); }
#outcomes .tile-big { background: linear-gradient(160deg, #fff4ee 0%, #ffffff 55%); }
#outcomes .tile b { color: var(--ink); }
#outcomes .tile-big b { color: var(--accent); }
#outcomes .tile span { color: var(--ink-2); }
#outcomes .tile-up { color: var(--good); background: rgba(31, 138, 76, 0.1); }
#outcomes .hike-chart i { background: rgba(13, 13, 15, 0.07); }
#outcomes .hike-chart .hike-now { background: linear-gradient(180deg, #ff9a6b, var(--accent)); }
#outcomes .meter { background: rgba(13, 13, 15, 0.08); }
#outcomes .pchip { background: var(--surface-2); border-color: transparent; color: var(--ink); }
#outcomes .pchip img { filter: none; opacity: 0.85; }
#outcomes .pchip svg { color: var(--ink); }
#outcomes .pchip > span { color: var(--ink) !important; }

*/

/* Results, final direction: one bright focal tile, the rest dark glass.
   The 65% tile is solid HumVersity orange with white type and white bars, so the eye lands there
   first; every other tile is frosted dark glass over the black-and-white mosaic with a
   hairline edge, so the faces still glow through. */
#outcomes .tile { background: rgba(16, 16, 19, 0.62); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
#outcomes .tile b { color: #fff; }
#outcomes .tile span { color: rgba(255, 255, 255, 0.62); }
#outcomes .tile-big { position: relative; overflow: hidden; background: linear-gradient(150deg, #ff8a52 0%, var(--accent) 45%, #c43d0f 100%); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 30px 60px -24px rgba(226, 83, 31, 0.55); }
#outcomes .tile-big::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%); pointer-events: none; }
#outcomes .tile-big b { color: #fff; }
#outcomes .tile-big span { color: rgba(255, 255, 255, 0.85); }
#outcomes .tile-up { color: #fff; background: rgba(255, 255, 255, 0.2); }
#outcomes .hike-chart i { background: rgba(255, 255, 255, 0.22); }
#outcomes .hike-chart .hike-now { background: #fff; }
#outcomes .meter { background: rgba(255, 255, 255, 0.1); }
#outcomes .pchip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }

/* ---------- Results: small ongoing motion, after the grow-in ----------
   Meters: a light shimmer sweeps along the fill every few seconds and a dot at its end pulses.
   Bar chart: bars breathe in a slow wave (the individual scale property, so it composes with
   the grow-in transform rather than replacing it) and the white "now" bar has a shine running
   up it. Each starts after the grow-in (~1.4s) and runs on its own period. */
.meter i { position: relative; overflow: visible; }
.meter i::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%) no-repeat;
  background-size: 40% 100%; background-position: -60% 0;
  animation: meter-shine 3.6s ease-in-out 1.6s infinite;
}
.meter i::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 0 rgba(255, 176, 143, 0.7); opacity: 0;
  animation: meter-dot 2.4s ease-out 1.6s infinite;
}
.tile:nth-child(5) .meter i::before { animation-delay: 2.4s; }
.tile:nth-child(7) .meter i::before { animation-delay: 3.1s; }
@keyframes meter-shine { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
@keyframes meter-dot { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 176, 143, 0.7); } 70% { opacity: 1; box-shadow: 0 0 0 8px rgba(255, 176, 143, 0); } 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 176, 143, 0); } }

.hike-chart i { animation: bar-breathe 3.2s ease-in-out 1.6s infinite; }
.hike-chart i:nth-child(2) { animation-delay: 1.75s; }
.hike-chart i:nth-child(3) { animation-delay: 1.9s; }
.hike-chart i:nth-child(4) { animation-delay: 2.05s; }
.hike-chart i:nth-child(5) { animation-delay: 2.2s; }
.hike-chart i:nth-child(6) { animation-delay: 2.35s; }
@keyframes bar-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1 0.93; } }
.hike-chart .hike-now { position: relative; overflow: hidden; }
.hike-chart .hike-now::after {
  content: ""; position: absolute; left: 0; right: 0; height: 45%; bottom: -45%;
  background: linear-gradient(0deg, transparent, rgba(255, 138, 82, 0.35), transparent);
  animation: bar-shine 3s ease-in-out 2s infinite;
}
@keyframes bar-shine { 0% { bottom: -45%; } 70%, 100% { bottom: 110%; } }

@media (prefers-reduced-motion: reduce) {
  .meter i::before, .meter i::after, .hike-chart i, .hike-chart .hike-now::after { animation: none; }
}


/* ---------- Placement partners: logo wall ----------
   6 x 4 tiles in the tools grid's checkerboard (white + border / grey fill). Marks are CSS
   masks filled grey; on hover the fill takes the brand colour (--brand) and the tile lifts.
   Name-only brands show a bold wordmark that also takes the brand colour on hover. */
.pwall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pw { position: relative; min-height: 104px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.pw-w { background: var(--surface); border-color: var(--line); }
.pw:hover { transform: translateY(-3px); background: var(--surface); border-color: var(--line); box-shadow: 0 14px 28px -16px rgba(13, 13, 15, 0.3); }
.pw-mark { width: 32px; height: 32px; background: var(--ink-3); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: background 0.25s ease, transform 0.25s ease; }
.pw .pw-mark { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.pw-svg { background: none; -webkit-mask: none; mask: none; color: var(--ink-3); }
.pw-svg svg { width: 100%; height: 100%; }
.pw:hover .pw-mark { background: var(--brand); transform: scale(1.08); }
.pw:hover .pw-svg { background: none; color: var(--brand); }
.pw-name { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.pw-word { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; color: var(--ink-3); transition: color 0.25s ease; }
.pw:hover .pw-word { color: var(--brand); }
.pw-more { background: var(--ink); border-color: var(--ink); }
.pw-more b { font-size: var(--fs-xl); color: #fff; letter-spacing: -0.02em; line-height: 1; }
.pw-more span { font-size: var(--fs-xs); color: var(--on-dark-2); }
.pw-more:hover { background: var(--ink); border-color: var(--ink); }
@media (max-width: 900px) { .pwall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pwall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pw { min-height: 88px; } .pw-word { font-size: var(--fs-lg); } }
/* Logo wall, second look (review: the white/grey checkerboard already belongs to the tools
   grid). One white panel ruled into cells by hairlines: the panel's background shows through
   1px gaps as the rules. No fills, no lift; hover tints the cell faintly and the mark takes
   its brand colour as before. The black "2,000+" cell stays as the anchor. */
.pwall { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pw, .pw-w { background: var(--surface); border: 0; border-radius: 0; }
.pw:hover { background: #fdf8f4; border: 0; transform: none; box-shadow: none; }
.pw-more, .pw-more:hover { background: var(--ink); }

/* Two behaviours in a checkerboard (main.js marks one set .pw-w):
   .pw-w cells: grey at rest, brand colour on hover (as before);
   the other cells: brand colour at rest, grey on hover. The wall always shows both. */
.pw:not(.pw-w):not(.pw-more) .pw-mark { background: var(--brand); }
.pw:not(.pw-w):not(.pw-more) .pw-svg { background: none; color: var(--brand); }
.pw:not(.pw-w):not(.pw-more) .pw-word { color: var(--brand); }
.pw:not(.pw-w):not(.pw-more):hover .pw-mark { background: var(--ink-3); }
.pw:not(.pw-w):not(.pw-more):hover .pw-svg { background: none; color: var(--ink-3); }
.pw:not(.pw-w):not(.pw-more):hover .pw-word { color: var(--ink-3); }
.pw:not(.pw-w):not(.pw-more):hover { background: var(--surface); }


/* ---------- Chancellor (reworked) ----------
   A real portrait with a frosted name plate, an oversized orange quotation mark opening the
   letter, and a signature that draws itself in above the sign-off once the card is revealed. */
.quote { grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; position: relative; overflow: hidden; }
.quote > div { position: relative; display: flex; flex-direction: column; justify-content: center; }
.chancellor-photo { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); min-height: 360px; }
.chancellor-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.chancellor-photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chancellor-photo figcaption b { display: block; font-size: var(--fs-md); }
.chancellor-photo figcaption span { font-size: var(--fs-xs); color: var(--ink-2); }
.quote-mark { position: absolute; top: -28px; right: -6px; font-family: var(--font-serif); font-size: 220px; line-height: 1; color: var(--accent); opacity: 0.14; pointer-events: none; }
.quote-sign { display: flex; align-items: flex-end; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.quote-sign svg { width: 150px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 2s ease 0.4s; }
.quote.in .quote-sign svg { stroke-dashoffset: 0; }
.quote-sign cite { margin-top: 0; padding-left: 18px; border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .chancellor-photo { min-height: 0; aspect-ratio: 4 / 5; max-width: 340px; }
  .quote-mark { font-size: 160px; top: -16px; }
}
@media (prefers-reduced-motion: reduce) { .quote-sign svg { stroke-dashoffset: 0; transition: none; } }
/* Chancellor card split in two (review): the photo fills the left half edge to edge, no
   padding, clipped by the card's rounded corners; the letter keeps its padding on the right. */
.quote { padding: 0; gap: 0; grid-template-columns: minmax(260px, 40%) 1fr; }
.chancellor-photo { border-radius: 0; min-height: 100%; }
.quote > div { padding: clamp(28px, 4vw, 48px); }
.quote-mark { top: -8px; right: 18px; }
@media (max-width: 900px) {
  .quote { grid-template-columns: minmax(0, 1fr); }
  .chancellor-photo { max-width: none; aspect-ratio: 4 / 3; }
  .chancellor-photo img { object-position: 50% 25%; }
}


/* ---------- Faculty (reworked) ----------
   Portraits in black and white, colour on hover with a slow zoom; a white company chip sits on
   the photo. Name and role under it. 4 across, 2 on tablets and phones. */
.fac { display: flex; flex-direction: column; }
.fac-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.fac-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; filter: grayscale(1) contrast(1.04); transition: filter 0.5s ease, transform 0.8s ease; }
.fac:hover .fac-photo img { filter: none; transform: scale(1.04); }
.fac-co { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.fac-co img, .fac-co svg { width: 14px; height: 14px; flex: none; }
.fac > b { display: block; margin-top: 14px; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.fac > span { font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }/* Several portraits are shot on white; a hairline keeps their edge against the page. */
.fac-photo { border: 1px solid var(--line); }


/* Faculty company chip: the mark is ink at rest and takes the brand colour on card hover. */
.fac-mark { width: 14px; height: 14px; flex: none; background: var(--ink); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background 0.4s ease; }
.fac:hover .fac-mark { background: var(--brand, var(--ink)); }
.fac-ms { background: none; display: inline-flex; }
.fac-ms svg { width: 14px; height: 14px; }
.fac-ms rect { transition: fill 0.4s ease; }
.fac:hover .fac-ms rect:nth-child(1) { fill: #F25022; }
.fac:hover .fac-ms rect:nth-child(2) { fill: #7FBA00; }
.fac:hover .fac-ms rect:nth-child(3) { fill: #00A4EF; }
.fac:hover .fac-ms rect:nth-child(4) { fill: #FFB900; }

/* ---------- Testimonials (reworked) ----------
   Video stories are real portraits with a "Now at" company chip, a frosted play button and the
   running time; the image zooms and the button turns orange on hover. Below, a wall of reviews in
   three columns that drift slowly (the middle one the other way) under faded top and bottom edges. */
.rating-sum { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); }
.rating-stars { color: var(--accent); letter-spacing: 1px; }
.rating-sum span:last-child { color: var(--ink-3); }

.videos { gap: 14px; margin-bottom: 40px; }
.vc { position: relative; aspect-ratio: 9 / 14; border: 0; padding: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); color: #fff; text-align: left; cursor: pointer; }
.vc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 0.8s ease; }
.vc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 15, 0.25) 0%, transparent 30%, transparent 50%, rgba(13, 13, 15, 0.82) 100%); }
.vc > span { position: absolute; z-index: 1; }
.vc-co { top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.vc-co i { width: 13px; height: 13px; flex: none; background: var(--ink); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.vc-play { top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
.vc-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.vc-meta { left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; }
.vc-meta b { font-size: var(--fs-md); }
.vc-meta span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.78); }
.vc-len { bottom: 16px; right: 14px; font-size: var(--fs-xs); font-weight: 600; }
.vc-meta { right: 56px; }
.vc:hover img { transform: scale(1.06); }
.vc:hover .vc-play { transform: scale(1.12); background: var(--accent); border-color: var(--accent); }

.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.wall-track { display: grid; gap: 16px; animation: wall-up 46s linear infinite; }
.wall-rev .wall-track { animation-direction: reverse; animation-duration: 52s; }
.wall:hover .wall-track { animation-play-state: paused; }
@keyframes wall-up { to { transform: translateY(calc(-50% - 8px)); } }
.rv { margin: 0; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 14px; }
.rv-stars { color: var(--accent); font-size: var(--fs-sm); letter-spacing: 2px; }
.rv blockquote { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink); }
.rv-out { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.rv-out::before { content: "↗"; }
.rv figcaption { display: flex; align-items: center; gap: 10px; }
.rv figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.rv figcaption b { display: block; font-size: var(--fs-sm); }
.rv figcaption span span { font-size: var(--fs-xs); color: var(--ink-3); }
.rv-feat { background: var(--ink); border-color: var(--ink); }
.rv-feat blockquote { font-family: var(--font-serif); font-size: var(--fs-xl); line-height: 1.3; color: #fff; }
.rv-feat figcaption b { color: #fff; }
.rv-feat figcaption span span { color: var(--on-dark-2); }
.rv-feat .rv-out { background: rgba(226, 83, 31, 0.18); color: #ffb08f; }

@media (max-width: 1080px) {
  .videos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .videos::-webkit-scrollbar { display: none; }
  .vc { flex: 0 0 min(42%, 240px); scroll-snap-align: start; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-col:nth-child(3) { display: none; }
}
@media (max-width: 600px) {
  .vc { flex-basis: 64%; }
  .wall { grid-template-columns: minmax(0, 1fr); height: 520px; }
  .wall-col:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wall { height: auto; -webkit-mask-image: none; mask-image: none; }
  .wall-track { animation: none; }
  .wall-track [aria-hidden="true"] { display: none; }
}
/* Play button, second pass: the frosted glass circle read as a grey smudge on light photos.
   Now a solid white disc with an ink triangle and a slow ring pulsing out of it; on hover the
   disc turns orange and the triangle white. */
.vc-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: #fff; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 24px -8px rgba(13, 13, 15, 0.5); }
/* Pulsing ring, removed (review: no animation, just the button):
.vc-play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); animation: vc-ring 2.4s ease-out infinite; }
*/
.vc-play svg { width: 18px; height: 18px; fill: var(--ink); margin-left: 3px; transition: fill 0.3s ease; }
.vc:hover .vc-play { transform: scale(1.1); background: var(--accent); }
.vc:hover .vc-play svg { fill: #fff; }
/* @keyframes vc-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } } */
/* @media (prefers-reduced-motion: reduce) { .vc-play::before { animation: none; opacity: 0; } } */
/* Soften the triangle's corners: stroke it in its own colour with round joins. */
.vc-play svg path { stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; transition: stroke 0.3s ease; }
.vc:hover .vc-play svg path { stroke: #fff; }


/* ---------- Blog (reworked) ----------
   Featured post on the left (large photo, category chip, excerpt), three compact posts with
   thumbnails on the right, separated by hairlines. Photos zoom gently and titles underline on hover. */
.blog { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
.bpost { display: grid; gap: 16px; color: inherit; text-decoration: none; }
.bpost-img { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.bpost-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.bpost:hover .bpost-img img { transform: scale(1.05); }
.bpost-feat .bpost-img { aspect-ratio: 16 / 10; }
.bpost-cat { position: absolute; left: 14px; top: 14px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); font-size: var(--fs-xs); font-weight: 600; }
.bpost-body { display: grid; gap: 8px; align-content: start; }
.bpost-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.bpost-meta b { color: var(--accent); font-weight: 600; }
.bpost h3 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; text-decoration: underline transparent; text-underline-offset: 4px; transition: text-decoration-color 0.25s ease; }
.bpost-feat h3 { font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.02em; }
.bpost-feat p { font-size: var(--fs-md); color: var(--ink-2); }
.bpost:hover h3 { text-decoration-color: currentColor; }
.blog-side { display: grid; align-content: start; }
.blog-side .bpost { grid-template-columns: 168px minmax(0, 1fr); align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.blog-side .bpost:first-child { padding-top: 0; border-top: 0; }
.blog-side .bpost-img { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
@media (max-width: 900px) { .blog { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .blog-side .bpost { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; } .blog-side .bpost h3 { font-size: var(--fs-md); } }

/* ---------- Closing CTA (reworked) ----------
   Split dark card: the ask on the left, three learners fanned out on the right over a faint
   graph-paper grid (the events section's pattern, in white). Cards straighten on hover. */
.cta2 { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-lg); background: var(--ink); color: var(--on-dark); isolation: isolate; }
.cta2::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 30%, #000 75%); }
.cta2::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -120px; bottom: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 83, 31, 0.4), transparent 70%); }
.cta2-live { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--dark-line); font-size: var(--fs-xs); font-weight: 600; color: var(--on-dark); }
.cta2-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2); }
.cta2 h2 { margin-top: 20px; font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.cta2-copy > p:not(.cta2-live) { margin: 16px 0 28px; max-width: 440px; font-size: var(--fs-lg); color: var(--on-dark-2); }
.cta2 .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cta2 .btn-light { background: transparent; color: var(--on-dark); border-color: var(--dark-line); }
.cta2-trust { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: var(--fs-sm); color: var(--on-dark-2); }
.cta2-trust b { color: #fff; }
.cta2-faces { display: flex; }
.cta2-faces img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.cta2-faces img + img { margin-left: -10px; }
.cta2-art { position: relative; height: 360px; }
.cta2-card { position: absolute; top: 50%; left: 50%; width: 44%; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); border: 4px solid #fff; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7); }
.cta2-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.cta2-card figcaption { position: absolute; left: 8px; bottom: 8px; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; }
.cta2-c1 { transform: translate(-112%, -46%) rotate(-8deg); }
.cta2-c2 { z-index: 1; transform: translate(-50%, -54%) rotate(2deg); }
.cta2-c3 { transform: translate(12%, -44%) rotate(9deg); }
/* Hover fan, removed (review: the card animation did not work): .cta2:hover .cta2-c1 { transform: translate(-118%, -50%) rotate(-4deg); } */
/* Hover fan, removed (review: the card animation did not work): .cta2:hover .cta2-c2 { transform: translate(-50%, -58%) rotate(0deg); } */
/* Hover fan, removed (review: the card animation did not work): .cta2:hover .cta2-c3 { transform: translate(18%, -48%) rotate(4deg); } */
@media (max-width: 900px) {
  .cta2 { grid-template-columns: minmax(0, 1fr); }
  .cta2-art { height: 300px; }
}
@media (max-width: 600px) { .cta2-art { height: 230px; } .cta2-card { border-width: 3px; } }
@media (prefers-reduced-motion: reduce) { .cta2-card { transition: none; } }/* Fan spread wider (first pass hid the third card's label behind the middle one). */
.cta2-card { width: 40%; }
.cta2-c1 { transform: translate(-128%, -46%) rotate(-8deg); }
.cta2-c3 { transform: translate(28%, -44%) rotate(9deg); }
.cta2-c3 figcaption { left: auto; right: 8px; }
/* Hover fan, removed (review: the card animation did not work): .cta2:hover .cta2-c1 { transform: translate(-134%, -50%) rotate(-4deg); } */
/* Hover fan, removed (review: the card animation did not work): .cta2:hover .cta2-c3 { transform: translate(34%, -48%) rotate(4deg); } */


/* Closing CTA, second pass: the fanned cards are gone; one student photo fills the right half
   edge to edge and fades into the black under the copy. The grid and glow are dropped. */
.cta2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; min-height: 440px; align-items: stretch; }
.cta2::before, .cta2::after { display: none; }
.cta2-copy { position: relative; z-index: 1; padding: clamp(32px, 5vw, 64px); align-self: center; }
.cta2-photo { position: relative; margin: 0; }
.cta2-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cta2-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(13, 13, 15, 0.55) 22%, transparent 55%); }
@media (max-width: 900px) {
  .cta2 { grid-template-columns: minmax(0, 1fr); }
  .cta2-photo { order: -1; height: 260px; }
  .cta2-photo::after { background: linear-gradient(0deg, var(--ink) 0%, transparent 60%); }
}

/* ---------- Closing CTA, third pass: orange card + callback form ----------
   The accent fills the card for the one time on the page; the copy sits in white on the left,
   a white form card on the right. Fields reuse the enquiry form's .field styles. */
.cta3 { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-lg); background: var(--accent); color: #fff; }
.cta3::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 20% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 20% 0%, #000, transparent 70%); }
.cta3-live { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.16); font-size: var(--fs-xs); font-weight: 600; }
.cta3-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
.cta3 h2 { margin-top: 20px; font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.cta3-copy > p:not(.cta3-live) { margin: 16px 0 24px; max-width: 460px; font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.88); }
.cta3-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cta3-points li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 500; }
.cta3-points li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #fff; color: var(--accent); font-size: var(--fs-xs); font-weight: 700; }
.cta3-form { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); }
.cta3-form-title { font-size: var(--fs-lg); letter-spacing: -0.01em; }
.cta3-form .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cta3-form .field { margin: 0; }
.cta3-form .btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta3-form .lead-note { font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 900px) { .cta3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .cta3-form .field-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer (reworked) ----------
   A colour of its own: deep navy, which no other section uses, with the vermilion kept for
   hovers. Real social marks in outlined circles, and an oversized "HumVersity" wordmark
   above the base line, faint and cropped by the bottom edge. */
.footer-navy { --navy: #0c1a33; --navy-line: rgba(255, 255, 255, 0.12); position: relative; overflow: hidden; margin-top: var(--section); padding-top: 72px; background: var(--navy); color: rgba(255, 255, 255, 0.68); }
.footer-navy .logo, .footer-navy .logo small { color: #fff; }
.footer-navy .logo-mark { background: #fff; color: var(--navy); }
.footer-navy .foot-grid h4 { color: rgba(255, 255, 255, 0.45); }
.footer-navy .foot-grid a { transition: color 0.2s ease; }
.footer-navy .foot-grid a:hover { color: #fff; }
.footer-navy .foot-grid li a:hover { color: var(--accent); }
.footer-navy .socials { display: flex; gap: 8px; margin-top: 20px; }
.footer-navy .socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--navy-line); background: transparent; transition: background 0.2s ease, border-color 0.2s ease; }
.footer-navy .socials i { width: 16px; height: 16px; background: #fff; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.footer-navy .socials a:hover { background: var(--accent); border-color: var(--accent); }
.foot-word { margin: 56px 0 -0.18em; font-size: clamp(40px, 10.5vw, 150px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; white-space: nowrap; color: rgba(255, 255, 255, 0.07); user-select: none; }
.foot-word .serif { margin-left: 0.18em; font-weight: 400; letter-spacing: -0.03em; }
.footer-navy .foot-base { position: relative; margin-top: 0; border-top-color: var(--navy-line); color: rgba(255, 255, 255, 0.45); }/* Base line removed on review: it cut through the wordmark. The rule was
   border-top: 1px solid var(--navy-line). */
.footer-navy .foot-base { border-top: 0; }
/* Wordmark a little more visible on review (was rgba(255, 255, 255, 0.07)). */
.foot-word { color: rgba(255, 255, 255, 0.14); }

/* ---------- Mobile pass ----------
   1. Hero batch line: the "Admissions open" tag wrapped onto two lines inside its pill and
      the date squeezed beside it. On phones the line wraps as a whole, the tag stays on one.
   2. Chancellor photo: 4:3 on phones cut him off at the chin, under the name plate. Taller
      frame and the crop moved up so the face clears the plate.
   3. Closing CTA intake pill: fixed 30px height clipped the date when it wrapped. */
.batch .tag { white-space: nowrap; }
@media (max-width: 600px) {
  .batch { display: flex; flex-wrap: wrap; row-gap: 6px; }
  .quote .chancellor-photo { aspect-ratio: 4 / 5; }
  .quote .chancellor-photo img { object-position: 50% 12%; }
  .cta3-live { height: auto; min-height: 30px; padding: 6px 12px; line-height: 1.35; }
}
.batch-date { white-space: nowrap; }
/* Intake pill on phones (review): the full line wrapped to two lines. Phones get a short
   date that fits one line, and the pill goes back to its fixed height. */
.cta3-live { white-space: nowrap; }
.cta3-short { display: none; }
@media (max-width: 600px) {
  .cta3-long { display: none; }
  .cta3-short { display: inline; }
  .cta3-live { height: 30px; min-height: 0; padding: 0 12px; }
}
/* The date spans are flex items, so the pill's 8px gap opened a hole before the dot. */
.cta3-long, .cta3-short { margin-left: -4px; }

/* Programs menu caret: a stroked chevron in place of the ▾ glyph; turns over when open. */
.caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.menu.open .caret { transform: rotate(180deg); }


/* Program cards link to their program page: the title's link covers the whole card, and
   "Enquire Now" sits above it so it still jumps to the form. */
.pcard { position: relative; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pcard-meta a { position: relative; z-index: 1; }

/* Footer wordmark: the brand is one word, HumVersity, so the serif half sits flush (it had a
   0.18em gap when it read "Hum University"). */
.foot-word .serif { margin-left: 0; }