/* ==========================================================================
   Components.

   Loaded after tailwind.css and animations.css. Everything here sits in
   Tailwind's `components` layer, so a utility class in a template still wins
   over a component default — the right way round. The few rules that must
   beat utilities (legacy colour roles re-pointed for a light page) are at the
   end, unlayered, and say why.

   Contents
     1. Forms            7. Glass & hero pieces
     2. Typography       8. Navigation
     3. Grounds          9. Sections
     4. Buttons         10. Overlays & widgets
     5. Links & icons   11. Responsive
     6. Cards           12. Accessibility & overrides
   Tokens live in src/tailwind.src.css; motion lives in animations.css.
   ========================================================================== */

@layer components {

/* 1. FORMS ================================================================= */
.field {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-soft);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--color-text);
  outline: none;
  transition: border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.field:hover { border-color: rgb(0 120 168 / 0.4); }
.field:focus {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgb(0 120 168 / 0.14);
}
.field-invalid { border-color: var(--color-destructive) !important; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230078A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
}
::placeholder { color: var(--color-text-muted); opacity: 1; }
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

/* Stepped forms (forms.js builds the bar). */
.step-title { color: var(--color-primary); }
.step-count { color: var(--color-muted-foreground); }
.step-track { background: var(--color-bg-section); }
.step-fill {
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  transition: width 420ms var(--ease-brand);
}

/* 2. TYPOGRAPHY ============================================================ */
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.9rem, 1.3rem + 5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
}
/* Three short statements need less size than one phrase, or the longest line
   runs into the stage beside it. */
.hero-title-stacked { font-size: clamp(2.3rem, 0.9rem + 3.6vw, 4.1rem); line-height: 1.02; }
.type-display-stacked { font-size: clamp(2rem, 1rem + 3vw, 3.4rem); line-height: 1.05; }

/* The highlighted phrase: primary gradient type over a cream swash that draws
   itself once the line has risen. */
.hero-accent { position: relative; display: inline-block; }
.hero-accent-text {
  background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-accent::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.06em;
  height: 0.26em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(253 212 76 / 0.55), rgb(252 239 198 / 0.95));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1000ms var(--ease-brand) 650ms;
}
.is-revealed .hero-accent::before { transform: scaleX(1); }

/* Legacy highlight used by inner-page titles: primary gradient on light,
   gold on a dark band. */
.hero-gold {
  background: linear-gradient(100deg, var(--color-primary), var(--color-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tone-dark .hero-gold, .bg-navy .hero-gold, .bg-navy-900 .hero-gold, .bg-ink .hero-gold {
  background-image: var(--gradient-gold);
}

.footer-statement { font-size: clamp(2.7rem, 1.2rem + 6vw, 6.25rem); }
.footer-statement-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 3. GROUNDS ===============================================================
   Section backgrounds fade in and out of white rather than switching, so
   bands read as one continuous surface: white → soft → white → section. */
.band-soft {
  background: linear-gradient(180deg, #fff 0, var(--color-bg-soft) 9rem, var(--color-bg-soft) calc(100% - 9rem), #fff 100%);
}
.band-section {
  background: linear-gradient(180deg, #fff 0, var(--color-bg-section) 10rem, var(--color-bg-section) calc(100% - 10rem), #fff 100%);
}
.hero-fade { background: linear-gradient(0deg, #fff, transparent); }

/* 4. BUTTONS ===============================================================
   One hover language: primary lifts and glows with a light sweep; the others
   shift their edge. The inner span is what the magnetic pull moves. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 450ms var(--ease-brand),
    box-shadow 450ms ease,
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease;
}
.btn-inner { display: inline-flex; align-items: center; gap: 0.55rem; transition: transform 300ms var(--ease-brand); }
.btn-arrow { display: inline-grid; transition: transform 450ms var(--ease-brand); }
.btn--sm { min-height: 2.65rem; padding: 0 1.1rem; font-size: 0.84rem; }

.btn--primary {
  background: linear-gradient(135deg, #00b4e6, #0078a8);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--yellow {
  background: linear-gradient(135deg, #ffe58a, var(--color-gold) 55%, #e6b423);
  color: var(--color-primary-navy);
  box-shadow: var(--shadow-gold);
}
.btn--primary::after,
.btn--yellow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-brand);
}
.btn--secondary {
  background: #fff;
  color: var(--color-primary-navy);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}
.btn--glass {
  background: rgb(255 255 255 / 0.62);
  color: var(--color-text);
  border-color: rgb(255 255 255 / 0.95);
  box-shadow: 0 1px 0 #fff inset, var(--shadow-soft);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.btn--ghost {
  background: rgb(255 255 255 / 0.04);
  color: #fff;
  border-color: rgb(255 255 255 / 0.35);
}

@media (hover: hover) {
  .btn:hover .btn-arrow { transform: translateX(3px); }
  .btn--primary:hover, .btn--yellow:hover { transform: translateY(-2px); }
  .btn--primary:hover { box-shadow: 0 1px 1px rgb(5 21 59 / 0.2), 0 18px 36px -10px rgb(0 120 168 / 0.6); }
  .btn--yellow:hover { box-shadow: 0 18px 36px -12px rgb(253 212 76 / 0.85); }
  .btn--primary:hover::after, .btn--yellow:hover::after { transform: translateX(120%); }
  .btn--secondary:hover { background: var(--color-soft-blue); border-color: var(--color-border); color: var(--color-primary-navy); transform: translateY(-2px); }
  .btn--glass:hover { background: #fff; border-color: rgb(0 120 168 / 0.3); color: var(--color-primary); transform: translateY(-1px); }
  .btn--ghost:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }
}
.btn:active { transform: translateY(0) scale(0.98); }

/* 5. LINKS & ICONS ========================================================= */
.link-underline {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 450ms var(--ease-brand), color 250ms ease;
}
.link-underline:hover, .link-underline:focus-visible { background-size: 100% 1px; }

/* A stretched link: the whole card is one target. */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Round icon control. Sizing and display come from utilities at the call
   site (so `hidden sm:grid` keeps working). */
.icon-btn {
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgb(255 255 255 / 0.85);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  transition: border-color 250ms ease, color 250ms ease, transform 350ms var(--ease-brand), background-color 250ms ease;
}
.icon-btn:hover { border-color: rgb(0 120 168 / 0.4); color: var(--color-primary); transform: translateY(-1px); }
.icon-btn:disabled { opacity: 0.4; pointer-events: none; }

.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-green);
  box-shadow: 0 0 0 0 rgb(120 185 78 / 0.5);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(120 185 78 / 0.5); }
  80%, 100% { box-shadow: 0 0 0 8px rgb(120 185 78 / 0); }
}

/* 6. CARDS ================================================================= */

/* Floating statistic */
.stat-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 1.6rem;
  border-radius: var(--r-lg);
  background: rgb(255 255 255 / 0.82);
  border: 1px solid #fff;
  box-shadow: 0 1px 0 #fff inset, var(--shadow-card);
  transition: transform 550ms var(--ease-brand), box-shadow 550ms ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stat-card { background: rgb(255 255 255 / 0.66); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
}
.stat-card-glow {
  position: absolute;
  right: -3rem;
  top: -3rem;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgb(0 120 168 / 0.16), transparent);
  transition: transform 700ms var(--ease-brand);
}

/* Route dock (quick discovery) */
.route-tile {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 1.35rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: background-color 400ms ease, transform 500ms var(--ease-brand);
}

/* Program card */
.program-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 500ms var(--ease-brand), box-shadow 500ms ease, border-color 500ms ease;
}
.program-card-media {
  position: relative;
  overflow: hidden;
  margin: 0.5rem 0.5rem 0;
  border-radius: calc(var(--r-xl) - 0.5rem);
}
.program-card-img { transition: transform 1300ms var(--ease-brand); }
.program-card-index {
  position: absolute;
  right: 1.25rem;
  bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 10px 30px rgb(5 21 59 / 0.35);
}
.program-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.program-card-cta-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 600ms var(--ease-brand), opacity 400ms ease;
}

/* Bento */
.bento-tile {
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: rgb(255 255 255 / 0.85);
  border: 1px solid #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 550ms var(--ease-brand), box-shadow 550ms ease;
}
.bento-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  transition: background-color 400ms ease, color 400ms ease, transform 500ms var(--ease-brand);
}
.bento-feature { box-shadow: var(--shadow-float); }

/* Results wall */
.result-feature > div { box-shadow: var(--shadow-floating); }
.result-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 550ms var(--ease-brand), box-shadow 550ms ease, border-color 550ms ease;
}
.result-tile-mark {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgb(120 185 78 / 0.16);
  color: var(--color-green-ink);
}
.results-summary {
  background:
    radial-gradient(circle at 85% 20%, rgb(0 194 255 / 0.22), transparent 36%),
    linear-gradient(135deg, #05153b 0%, #0a2558 70%, #044466 100%);
  box-shadow: 0 30px 80px -30px rgb(5 21 59 / 0.55);
}
.rimc-band {
  background:
    radial-gradient(60% 120% at 100% 0%, rgb(234 243 255 / 0.9), transparent 60%),
    linear-gradient(120deg, var(--color-cream), #fff8e8 55%, #fff);
  box-shadow: inset 0 0 0 1px rgb(253 212 76 / 0.35);
}

/* Officers & MoUs */
.officer-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem 0.75rem 0.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 550ms var(--ease-brand), box-shadow 550ms ease, border-color 550ms ease;
}
.officer-card-mark { position: absolute; right: 1rem; top: 1rem; color: var(--color-gold); opacity: 0.8; }
.mou-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: #fff;
  transition: border-color 400ms ease, box-shadow 400ms ease;
}

/* Faculty rail */
.faculty-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 72vw;
  max-width: 19rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--color-bg-section);
  box-shadow: var(--shadow-soft);
}
.faculty-photo { transition: transform 1300ms var(--ease-brand), filter 600ms ease; }
.faculty-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgb(5 21 59 / 0.88));
  transition: opacity 600ms ease;
}
.faculty-info { position: absolute; inset-inline: 0; bottom: 0; padding: 1.4rem; }
.faculty-bio {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 600ms var(--ease-brand), opacity 400ms ease;
}
.is-dragging { scroll-snap-type: none !important; cursor: grabbing; user-select: none; }

/* Method cycle */
.method-step {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 550ms var(--ease-brand), box-shadow 550ms ease;
}
.method-node {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-bg-soft), var(--shadow-soft);
  transition: background-color 400ms ease, color 400ms ease, transform 500ms var(--ease-brand);
}

/* Parent video reviews */
.review-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 74vw;
  max-width: 18.5rem;
}
.review-tab {
  position: relative;
  z-index: 1;
  margin: 0 0.9rem -1px;
  padding: 0.6rem 0.9rem;
  border: 1px solid #fff;
  border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(180deg, var(--color-primary-light), #f3f8ff);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--color-text);
}
.review-body {
  position: relative;
  flex: 1;
  padding: 0.7rem 0.7rem 1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 550ms var(--ease-brand), box-shadow 550ms ease;
}
.review-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(var(--r-lg) - 0.45rem);
  background: var(--color-bg-section);
}
.review-photo { transition: transform 1300ms var(--ease-brand); }
.review-sparkle {
  position: absolute;
  top: 1.1rem;
  right: -1.05rem;
  z-index: 2;
  width: 1.3rem;
  height: 1.3rem;
  animation: ndi-twinkle 4s ease-in-out infinite;
}
.review-card:nth-child(3n + 2) .review-sparkle { animation-delay: -1.3s; }
.review-card:nth-child(3n) .review-sparkle { animation-delay: -2.6s; }
.review-card:last-child .review-sparkle { display: none; }
.review-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem 0.4rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.5);
  background: rgb(5 21 59 / 0.35);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  transition: background-color 300ms ease, color 300ms ease, transform 400ms var(--ease-brand), border-color 300ms ease;
}
.review-play-icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding-left: 2px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 0 0 0 rgb(255 255 255 / 0.55);
  animation: play-pulse 2.6s ease-out infinite;
  transition: background-color 300ms ease, color 300ms ease;
}
@keyframes play-pulse {
  0%        { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgb(255 255 255 / 0); }
}
.review-play:hover, .review-play:focus-visible { background: #fff; border-color: #fff; color: var(--color-text); }
.review-play:hover .review-play-icon, .review-play:focus-visible .review-play-icon { background: var(--color-primary); color: #fff; }
.review-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.review-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--color-primary);
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--color-primary-light);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

/* The shared video player (its display rule is in animations.css, beside
   the lightbox's, where it can beat the `hidden` utility). */
.review-player > [data-review-close], .review-player .review-player-panel {
  opacity: 0;
  transition: opacity 300ms ease, transform 450ms var(--ease-brand);
}
.review-player .review-player-panel { transform: translateY(16px) scale(0.97); }
.review-player.is-open > [data-review-close], .review-player.is-open .review-player-panel { opacity: 1; transform: none; }

/* Recent updates banners
   One banner per view on a snap track. Three themes share one layout: words
   on the left, a floating profile card with its badge in the middle, glowing
   score bars or figure tiles on the right. The bars and the card rise into
   place each time their banner becomes the current one. */
.upd-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: 32px;
}
.upd-slide {
  --upd-ink: #fff;
  --upd-soft: rgb(255 255 255 / 0.74);
  --upd-accent: #7cc0ff;
  position: relative;
  isolation: isolate;
  flex: 0 0 100%;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 32px;
  color: var(--upd-ink);
  background:
    radial-gradient(60% 90% at 78% 60%, rgb(0 120 168 / 0.55), transparent 70%),
    radial-gradient(40% 60% at 10% 0%, rgb(0 120 168 / 0.35), transparent 70%),
    linear-gradient(120deg, #081a38 0%, #0e2a55 55%, #0b2348 100%);
}
.upd--sky {
  --upd-ink: #0f2a5c;
  --upd-soft: #4a5f86;
  --upd-accent: #166ddb;
  background:
    radial-gradient(55% 80% at 78% 55%, rgb(255 255 255 / 0.85), transparent 70%),
    linear-gradient(120deg, #dcebfd 0%, #eaf3ff 50%, #cfe2fb 100%);
}
.upd--sunrise {
  --upd-ink: #1d2a44;
  --upd-soft: #5d5446;
  --upd-accent: #c98b16;
  background:
    radial-gradient(50% 80% at 80% 55%, rgb(0 120 168 / 0.16), transparent 70%),
    radial-gradient(45% 70% at 5% 10%, rgb(255 255 255 / 0.9), transparent 70%),
    linear-gradient(120deg, #fff6df 0%, #fcefc6 60%, #f6ddb0 100%);
}
.upd-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.upd-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000, transparent 75%);
}
.upd--sky .upd-grid, .upd--sunrise .upd-grid {
  background-image:
    linear-gradient(to right, rgb(0 120 168 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 120 168 / 0.07) 1px, transparent 1px);
}
.upd-glow {
  position: absolute;
  right: 8%;
  top: 50%;
  width: 22rem;
  height: 22rem;
  translate: 0 -50%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgb(124 192 255 / 0.35), transparent);
  filter: blur(8px);
}
.upd-trail {
  position: absolute;
  right: 2%;
  top: 8%;
  width: 34%;
  height: 70%;
  color: var(--upd-accent);
  opacity: 0.55;
}

.upd-layout {
  display: grid;
  align-items: center;
  gap: 2rem;
  min-height: 23rem;
  padding: 2.4rem 3rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 0.7fr);
}
.upd-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.upd-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  background: #fff;
  color: #0f2a5c;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.4);
}
.upd-logo b { font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-primary); }
.upd-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--upd-ink); }
.upd-title {
  margin-top: 1.4rem;
  max-width: 30rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1rem + 1.9vw, 2.6rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--upd-ink);
}
.upd-title strong { display: block; font-weight: 800; }
.upd--ink .upd-title strong {
  background: linear-gradient(100deg, #fff 30%, #a9d2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.upd-body { margin-top: 0.9rem; max-width: 28rem; font-size: 0.9rem; line-height: 1.55; color: var(--upd-soft); }
.upd-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.45);
  transition: transform 400ms var(--ease-brand), box-shadow 400ms ease;
}
.upd--sky .upd-cta, .upd--sunrise .upd-cta {
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.upd-cta .btn-inner { gap: 0.6rem; }
.upd-cta-arrow { display: inline-grid; transition: transform 400ms var(--ease-brand); }

/* Profile card and badge */
.upd-visual { position: relative; display: grid; justify-items: center; perspective: 900px; }
.upd-profile {
  position: relative;
  width: min(100%, 15.5rem);
  padding: 0.55rem;
  border-radius: 22px;
  border: 1px solid rgb(255 255 255 / 0.9);
  background: rgb(255 255 255 / 0.92);
  color: #0f2a5c;
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.55);
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-brand), opacity 600ms ease;
}
.upd-profile-head { display: flex; min-height: 1.6rem; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.1rem 0.25rem 0.45rem; }
.upd-chip {
  overflow: hidden;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.upd-live { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #0f2a5c; }
.upd-live i { width: 6px; height: 6px; border-radius: 999px; background: #e5484d; animation: live-pulse 2s ease-out infinite; }
.upd-photo {
  position: relative;
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(160deg, #dcebfd, #b9d4f7);
}
.upd-photo-logo { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: contain; opacity: 0.8; }
.upd-person { padding: 0.65rem 0.35rem 0.2rem; }
.upd-person-name { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; line-height: 1.2; }
.upd-person-name i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 999px; background: var(--color-green); }
.upd-person-place { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem; padding-left: 0.1rem; font-size: 0.72rem; color: #5c6f93; }
.upd-badge {
  position: absolute;
  left: max(0rem, calc(50% - 10.8rem));
  top: 32%;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff4c2, #f5c84c 55%, #e2a93b);
  color: #1d2a44;
  box-shadow: 0 16px 30px -12px rgb(150 100 10 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.8);
  transform: rotate(-4deg);
  transition: transform 600ms var(--ease-brand), opacity 600ms ease;
}
.upd-badge small { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.upd-badge b { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }

/* Figures: glowing bars or tiles */
.upd-figures { display: flex; align-items: flex-end; justify-content: center; gap: 0.9rem; }
.upd-figures:not(.is-bars) { flex-direction: column; align-items: stretch; }
.upd-bar { display: grid; justify-items: center; gap: 0.5rem; height: 16rem; grid-template-rows: 1fr auto; }
.upd-bar-fill {
  position: relative;
  display: grid;
  align-self: end;
  justify-items: center;
  align-content: start;
  width: 4.2rem;
  height: var(--h);
  padding-top: 0.6rem;
  border-radius: 10px;
  border: 1px solid rgb(173 214 255 / 0.9);
  background: linear-gradient(180deg, rgb(64 150 255 / 0.95), rgb(0 120 168 / 0.55));
  color: #fff;
  box-shadow: 0 0 22px rgb(64 150 255 / 0.55), inset 0 0 12px rgb(255 255 255 / 0.25);
  transform-origin: bottom center;
  transition: transform 900ms var(--ease-brand), opacity 600ms ease;
}
.upd-bar:first-child .upd-bar-fill {
  border-color: rgb(255 214 140 / 0.95);
  background: linear-gradient(180deg, rgb(255 176 64 / 0.95), rgb(226 120 20 / 0.6));
  box-shadow: 0 0 26px rgb(255 160 60 / 0.6), inset 0 0 12px rgb(255 255 255 / 0.25);
}
.upd-bar-fill b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; line-height: 1; }
.upd-bar-fill small { margin-top: 0.15rem; padding-top: 0.15rem; border-top: 1.5px solid rgb(255 255 255 / 0.85); font-size: 0.8rem; font-weight: 700; line-height: 1; }
.upd-bar-fill em { margin-top: 0.2rem; font-size: 0.5rem; font-style: normal; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; }
.upd-bar-label {
  max-width: 5.2rem;
  overflow: hidden;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.2);
  color: var(--upd-ink);
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.upd--sky .upd-bar-label, .upd--sunrise .upd-bar-label { background: #fff; border-color: rgb(0 120 168 / 0.15); }
.upd-tile {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.08);
  transition: transform 700ms var(--ease-brand), opacity 600ms ease;
}
.upd-tile b { font-family: var(--font-display); font-size: clamp(1.05rem, 0.8rem + 0.8vw, 1.6rem); font-weight: 800; line-height: 1; color: var(--upd-ink); }
.upd-tile span { font-size: 0.74rem; font-weight: 600; color: var(--upd-soft); }
.upd--sky .upd-tile, .upd--sunrise .upd-tile { border-color: #fff; background: rgb(255 255 255 / 0.7); box-shadow: var(--shadow-soft); }

/* Arrows and dots */
.upd-arrow {
  position: absolute;
  top: calc(50% - 1.2rem);
  z-index: 3;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.7);
  background: rgb(255 255 255 / 0.88);
  color: #0f2a5c;
  box-shadow: var(--shadow-float);
  opacity: 0;
  translate: 0 -50%;
  transition: opacity 300ms ease;
}
.upd-arrow--prev { left: -1.1rem; }
.upd-arrow--next { right: -1.1rem; }
.upd-carousel:hover .upd-arrow, .upd-arrow:focus-visible { opacity: 1; }
.upd-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.upd-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgb(15 42 92 / 0.2);
  transition: width 450ms var(--ease-brand), background-color 300ms ease;
}
.upd-dot[aria-selected="true"] { width: 1.9rem; background: var(--color-primary); }

/* Rise-in each time a banner becomes current (only once the script runs). */
.js .upd-slide:not(.is-current) .upd-bar-fill { transform: scaleY(0.25); opacity: 0.4; }
.js .upd-slide:not(.is-current) .upd-profile { transform: translateY(24px) rotateX(10deg); opacity: 0.6; }
.js .upd-slide:not(.is-current) .upd-badge { transform: rotate(-4deg) scale(0.6); opacity: 0; }
.js .upd-slide:not(.is-current) .upd-tile { transform: translateX(16px); opacity: 0; }
.upd-slide.is-current .upd-bar:nth-child(2) .upd-bar-fill { transition-delay: 120ms; }
.upd-slide.is-current .upd-bar:nth-child(3) .upd-bar-fill { transition-delay: 240ms; }
.upd-slide.is-current .upd-badge { transition-delay: 250ms; }
.upd-slide.is-current .upd-tile:nth-child(2) { transition-delay: 100ms; }
.upd-slide.is-current .upd-tile:nth-child(3) { transition-delay: 200ms; }

@media (hover: hover) and (pointer: fine) {
  .upd-cta:hover { transform: translateY(-2px); }
  .upd-cta:hover .upd-cta-arrow { transform: translateX(3px); }
}

@media (max-width: 1023.98px) {
  .upd-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); padding: 2rem; }
  .upd-figures { grid-column: 1 / -1; flex-direction: row !important; justify-content: flex-start; }
  .upd-figures:not(.is-bars) .upd-tile { flex: 1; }
  .upd-bar { height: 10rem; }
}
@media (max-width: 639.98px) {
  .upd-track, .upd-slide { border-radius: 24px; }
  .upd-layout { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.5rem 1.25rem 1.6rem; min-height: 0; }
  .upd-title { margin-top: 1rem; font-size: 1.6rem; }
  .upd-cta { margin-top: 1.1rem; }
  .upd-profile { width: 12.5rem; }
  .upd-badge { left: 0; top: 28%; }
  .upd-badge b { font-size: 1.2rem; }
  .upd-trail { display: none; }
  .upd-figures { justify-content: center; }
  .upd-bar { height: 8.5rem; }
  .upd-bar-fill { width: 3.4rem; }
  .upd-tile { padding: 0.65rem 0.75rem; }
  .upd-tile b { font-size: 1.25rem; }
}

/* Results wall card
   A glass-edged card in three depths: the blue stage with the portrait at
   the back, the white panel riding over it on a curve, and the medal, score
   and arrow in front. It tilts as one piece (data-tilt); nothing on the way
   down clips, because a clipping box would flatten the 3D. */
.rc-scene { height: 100%; perspective: 1100px; container-type: inline-size; }
.rc-card {
  --rc-navy: #0f2a5c;
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 7px;
  border-radius: 26px;
  border: 1px solid rgb(255 255 255 / 0.95);
  background: linear-gradient(160deg, rgb(234 243 255 / 0.95), rgb(214 230 251 / 0.9));
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 40px -14px rgb(0 120 168 / 0.4),
    0 0 44px -6px rgb(0 120 168 / 0.16);
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-brand), box-shadow 500ms ease;
}
.rc-glare {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 0%), rgb(255 255 255 / 0.6), transparent 55%);
  mix-blend-mode: soft-light;
  transition: opacity 400ms ease;
}

/* Stage */
.rc-top { position: relative; transform-style: preserve-3d; }
.rc-media {
  position: relative;
  aspect-ratio: 1 / 0.98;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(70% 55% at 55% 30%, rgb(255 255 255 / 0.55), transparent 70%),
    linear-gradient(165deg, #cfe2fb 0%, #9cc3f3 55%, #7fb0ee 100%);
  transform: translateZ(4px);
}
/* Two panes of light cut across the stage, as in the brand artwork. */
.rc-beam { position: absolute; pointer-events: none; }
.rc-beam--a {
  left: -30%; top: -20%; width: 90%; height: 150%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.05));
  transform: rotate(28deg);
}
.rc-beam--b {
  right: -35%; top: 10%; width: 70%; height: 140%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.28), transparent);
  transform: rotate(-22deg);
}
/* The portrait fills the stage at full strength: no blend, no fade, so the
   photograph shows exactly as uploaded. */
.rc-photo {
  image-rendering: -webkit-optimize-contrast;
  transition: transform 1100ms var(--ease-brand);
}
.rc-initial {
  position: absolute;
  inset: 0 0 12% 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 6px 18px rgb(5 21 59 / 0.35);
}
.rc-motto {
  display: none;
  position: absolute;
  right: 0.8rem;
  top: 47%;
  gap: 0.28rem;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgb(10 30 70 / 0.7), 0 0 12px rgb(10 30 70 / 0.5);
  transform: translateZ(14px);
}
/* Only where the card is wide enough to keep the motto clear of the face. */
@container (min-width: 280px) {
  .rc-motto { display: grid; }
}
.rc-motto i { display: block; width: 1.6rem; height: 2px; margin-top: 0.25rem; border-radius: 2px; background: linear-gradient(90deg, #fff, rgb(255 255 255 / 0.2)); }

/* The white panel's curved edge, laid over the foot of the portrait. */
.rc-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 22%;
  fill: #fff;
  filter: drop-shadow(0 -6px 10px rgb(5 21 59 / 0.12));
  transform: translateZ(12px);
}

/* Medal: shield plate, ribbons, laurelled coin */
.rc-medal {
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
  z-index: 3;
  width: 4.1rem;
  height: 5.1rem;
  transform: translateZ(46px);
}
.rc-plate {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.12));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rc-medal--plain .rc-plate { display: none; }
.rc-ribbon {
  position: absolute;
  left: 50%;
  top: 3rem;
  width: 1.7rem;
  height: 1.7rem;
  translate: -50% 0;
  filter: drop-shadow(0 3px 4px rgb(15 79 174 / 0.35));
}
.rc-coin {
  position: absolute;
  left: 50%;
  top: 0.35rem;
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  margin-left: -1.65rem;
  place-content: center;
  justify-items: center;
  border-radius: 999px;
  color: #6a4508;
  transform-style: preserve-3d;
  filter: drop-shadow(0 6px 10px rgb(120 80 10 / 0.3));
  transition: transform 900ms var(--ease-brand);
}
.rc-coin-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-medal-num {
  position: relative;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.rc-medal-word { position: relative; margin-top: 1px; font-size: 0.42rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.rc-medal--silver .rc-coin { color: #3d4a5c; filter: drop-shadow(0 6px 10px rgb(60 70 90 / 0.28)); }
.rc-medal--bronze .rc-coin { color: #5e3113; filter: drop-shadow(0 6px 10px rgb(110 60 20 / 0.3)); }
.rc-medal--plain { width: 3.3rem; height: 3.6rem; left: 0.55rem; top: 0.5rem; }
.rc-medal--plain .rc-coin { top: 0; color: var(--color-primary); filter: drop-shadow(0 6px 10px rgb(5 21 59 / 0.25)); }
/* A slow light sweep across the metal coins. */
.rc-medal--gold .rc-coin::after, .rc-medal--silver .rc-coin::after, .rc-medal--bronze .rc-coin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.7) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  animation: rc-coin-sheen 4.5s ease-in-out infinite;
}
@keyframes rc-coin-sheen {
  0%, 60% { background-position: 130% 0; }
  100%    { background-position: -130% 0; }
}

/* Score: dark glass with a sparkle */
.rc-score {
  position: absolute;
  right: 0.45rem;
  top: 0.55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem 0.32rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: linear-gradient(120deg, rgb(0 120 168 / 0.92), rgb(15 60 150 / 0.92));
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 10px 20px -8px rgb(15 60 150 / 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateZ(40px);
}
.rc-score b { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; }
.rc-score small { font-size: 0.66rem; font-weight: 600; opacity: 0.85; }
.rc-score-spark { display: grid; width: 0.8rem; height: 0.8rem; color: #fff; }

/* Arrow, riding the wave */
.rc-go {
  position: absolute;
  right: 0.55rem;
  bottom: 4%;
  z-index: 4;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 999px;
  border: 2px solid rgb(255 255 255 / 0.9);
  background: radial-gradient(circle at 35% 30%, #4b9bf5, var(--color-primary) 55%, var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 8px 18px -6px rgb(0 120 168 / 0.75), 0 0 0 6px rgb(0 120 168 / 0.08);
  transform: translateZ(36px);
  transition: transform 400ms var(--ease-brand);
}

/* Body */
.rc-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.35rem 0.75rem 0.7rem;
  border-radius: 0 0 20px 20px;
  background: #fff;
  overflow: hidden;
  transform: translateZ(12px);
}
/* The corner flourish, bottom right. */
.rc-body::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 5rem;
  height: 3.2rem;
  border-radius: 60% 0 0 0;
  background: linear-gradient(135deg, rgb(0 120 168 / 0.05), rgb(0 120 168 / 0.22));
  transform: rotate(-12deg);
  pointer-events: none;
}
.rc-name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--rc-navy);
}
.rc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7fa6;
}
.rc-meta-dot { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.7; }
.rc-rows { margin-top: 0.85rem; display: grid; gap: 0.55rem; font-size: 0.8rem; }
.rc-row { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.rc-row dt { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; color: #7488b0; }
.rc-row dd { min-width: 0; font-weight: 700; line-height: 1.3; color: var(--rc-navy); }
.rc-row-icon {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #eef5ff, #dcebfd);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9);
  color: var(--color-primary);
}
.rc-sign {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #8a9bbd;
}
.rc-sign i { display: block; width: 1.5rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--color-primary), #7dd3fc); }

@media (max-width: 639.98px) {
  .rc-card { padding: 5px; border-radius: 20px; }
  .rc-media { border-radius: 16px 16px 0 0; }
  .rc-motto, .rc-sign, .rc-beam--b { display: none; }
  .rc-medal { width: 3.3rem; height: 4.1rem; left: 0.15rem; top: 0.15rem; }
  .rc-coin { width: 2.7rem; height: 2.7rem; margin-left: -1.35rem; }
  .rc-ribbon { top: 2.4rem; width: 1.4rem; height: 1.4rem; }
  .rc-medal--plain { width: 2.7rem; height: 3rem; }
  .rc-medal-num { font-size: 1rem; }
  .rc-score { right: 0.3rem; top: 0.35rem; padding: 0.25rem 0.5rem 0.25rem 0.4rem; }
  .rc-score b { font-size: 0.78rem; }
  .rc-go { width: 1.9rem; height: 1.9rem; right: 0.35rem; }
  .rc-body { padding: 0.25rem 0.45rem 0.55rem; border-radius: 0 0 16px 16px; }
  .rc-name { font-size: 0.92rem; padding-right: 0; }
  .rc-rows { font-size: 0.72rem; gap: 0.45rem; }
  .rc-row-icon { width: 1.55rem; height: 1.55rem; }
  /* Two narrow columns: let a value wrap rather than be cut off. */
  .rc-row { align-items: flex-start; flex-wrap: wrap; column-gap: 0.4rem; row-gap: 0.1rem; }
  .rc-row dd { white-space: normal; }
}

/* Campus collage */
.collage-tile { box-shadow: var(--shadow-soft); min-height: 12rem; }

/* Selection rail */
.selection-rail { content-visibility: auto; contain-intrinsic-size: auto 260px; }
.selection-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 450ms var(--ease-brand), box-shadow 450ms ease, border-color 450ms ease;
}

/* Comparison table */
.compare-panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--shadow-soft);
}

/* FAQ */
.faq-card {
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: inset 3px 0 0 transparent;
  transition: border-color 350ms ease, box-shadow 350ms ease;
}
.faq-card:hover { border-color: rgb(0 120 168 / 0.25); }
.faq-index { color: var(--color-text-muted); transition: color 350ms ease; }
.faq-mark { background: var(--color-primary-light); color: var(--color-primary); }
.faq-card:has([aria-expanded="true"]) {
  background: var(--color-soft-blue);
  border-color: rgb(0 169 232 / 0.35);
  box-shadow: inset 3px 0 0 var(--color-cyan), var(--shadow-float);
}
.faq-card:has([aria-expanded="true"]) .faq-index { color: var(--color-primary); }
.faq-card:has([aria-expanded="true"]) .faq-mark { background: var(--color-primary); color: #fff; }
.faq-card.is-dark { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.12); }

/* Contact rows */
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: rgb(255 255 255 / 0.8);
  transition: border-color 300ms ease, transform 400ms var(--ease-brand), box-shadow 400ms ease;
}
.contact-row:hover { border-color: rgb(0 120 168 / 0.4); transform: translateX(3px); box-shadow: var(--shadow-soft); }

/* Gallery */
.gallery-tile { box-shadow: var(--shadow-soft); transition: box-shadow 500ms ease, transform 600ms var(--ease-brand); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 0.55rem 1.05rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: border-color 300ms ease, color 300ms ease, background-color 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease-brand);
}
.filter-chip:hover { transform: translateY(-1px); border-color: rgb(0 120 168 / 0.4); color: var(--color-primary); }
.filter-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: var(--shadow-glow); }
[data-discovery-grid] > [hidden] { display: none; }

/* Inner-page cards kept from the previous build, re-toned. */
.route-card { transition: box-shadow 450ms ease, border-color 450ms ease; }
.route-card:hover { border-color: rgb(0 120 168 / 0.35); box-shadow: 0 0 0 1px rgb(0 120 168 / 0.12), var(--shadow-float); }
.counsel-card {
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.06);
  transition: border-color 350ms ease, transform 450ms var(--ease-brand), box-shadow 350ms ease;
}
.counsel-card:hover { border-color: rgb(253 212 76 / 0.55); transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgb(0 0 0 / 0.5); }
.founder-portrait { box-shadow: var(--shadow-floating); }
.elig-tab.is-on { border-color: rgb(0 120 168 / 0.4); background: #fff; box-shadow: var(--shadow-soft); }
[data-elig-row][data-match="true"] { background: rgb(234 243 255 / 0.8); box-shadow: inset 3px 0 0 var(--color-primary); }
.fee-details > summary::-webkit-details-marker { display: none; }
.fee-details > summary::marker { content: ""; }
.fee-details .fee-details-mark { transition: transform 300ms var(--ease-brand); }
.fee-details[open] .fee-details-mark { transform: rotate(180deg); }

/* Journey rails */
.journey-step[data-on="true"] .journey-marker {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.06);
  box-shadow: var(--shadow-glow);
}
.journey-step[data-on="true"] .journey-index { color: var(--color-primary); }
.routine-step[data-on="true"] .routine-dot { transform: scale(1.25); box-shadow: 0 0 0 4px rgb(0 120 168 / 0.2); }

/* 7. GLASS & HERO PIECES =================================================== */
.hero-frame {
  position: relative;
  padding: 0.6rem;
  border-radius: 34px;
  background: rgb(255 255 255 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.9);
  box-shadow:
    0 1px 0 #fff inset,
    0 12px 30px rgb(18 18 18 / 0.06),
    0 50px 110px -30px rgb(5 21 59 / 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 120 168 / 0.22), transparent 70%);
  filter: blur(20px);
}
/* Denser than the standard glass: these sit over the photograph, so the
   figure has to stay legible whatever part of the picture is behind it. */
.hero-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 11.5rem;
  padding: 0.75rem 1.1rem 0.75rem 0.75rem;
  border-radius: 20px;
  border: 1px solid #fff;
  background: rgb(255 255 255 / 0.84);
  box-shadow: 0 1px 0 #fff inset, var(--shadow-floating);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.hero-chip-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.hero-badge {
  padding: 0.7rem 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--color-cream), #f3d9a6 60%, var(--color-gold));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.7) inset, var(--shadow-gold);
  text-align: center;
}
.hero-dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 999px;
  background: rgb(0 120 168 / 0.22);
  transition: width 500ms var(--ease-brand), background-color 400ms ease;
}
.hero-dot:hover { background: rgb(0 120 168 / 0.45); }
.hero-dot[aria-current="true"] { width: 1.75rem; background: var(--color-cyan-bright); }

.hero {
  background:
    radial-gradient(circle at 75% 45%, rgb(0 194 255 / 0.22), transparent 32%),
    radial-gradient(circle at 100% 20%, rgb(0 169 232 / 0.14), transparent 30%),
    linear-gradient(135deg, #05153b 0%, #0a2558 55%, #044466 100%);
  color: #fff;
}
.hero .hero-title {
  font-size: clamp(2.65rem, 4.55vw, 4.75rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.042em;
  color: #fff;
}
.hero-title .overflow-hidden:has(.hero-accent) {
  overflow: visible;
  padding-bottom: 0.22em;
}
.hero-lead {
  color: #c5d4e6;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.65;
  max-width: 34rem;
}
.hero-kicker, .hero-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.32rem 0.95rem 0.32rem 0.32rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.hero-kicker {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04));
  border: 1px solid rgb(90 210 255 / 0.75);
  box-shadow: 0 0 0 1px rgb(0 194 255 / 0.12), 0 8px 22px rgb(0 140 220 / 0.22);
  backdrop-filter: blur(12px);
}
.hero-kicker-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #3ad4ff, #0096d6);
  box-shadow: 0 0 12px rgb(0 194 255 / 0.55);
}
.hero-open {
  padding: 0.48rem 0.95rem;
  background: rgb(6 24 64 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.16);
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 13px;
  font-weight: 600;
  color: #e7f3ff;
}
.hero .hero-accent { padding-bottom: 0.16em; }
.hero .hero-accent::before { display: none; }
.hero-swoosh { display: none; }
.hero .hero-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.05em;
  bottom: 0.02em;
  height: 0.085em;
  min-height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00d0ff 0%, #7fd8ff 38%, #f3e07a 72%, #fdd44c 100%);
  box-shadow: 0 8px 18px rgb(0 194 255 / 0.28);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: hero-bar 700ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;
}
@keyframes hero-bar { to { transform: scaleX(1); } }
.hero .hero-accent-text {
  background: linear-gradient(90deg, #2ad8ff 0%, #6ecfff 32%, #e7e07a 68%, #fdd44c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 18px rgb(0 30 70 / 0.25));
}
.hero .hero-cta {
  min-height: 3.35rem;
  padding-inline: 1.55rem;
  font-size: 1rem;
  font-weight: 700;
}
.hero .hero-cta.btn--primary {
  background: linear-gradient(180deg, #3ad8ff, #00a4e8);
  box-shadow: 0 14px 32px -10px rgb(0 194 255 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.45);
}
.hero .hero-cta-outline {
  background: rgb(255 255 255 / 0.03);
  color: #fff;
  border-color: rgb(190 220 245 / 0.45);
  box-shadow: inset 0 0 0 1px rgb(0 194 255 / 0.12);
}
.hero-cta-ico { display: inline-flex; color: #d7e8f8; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 2.15rem;
  padding-top: 0.35rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 11.5rem;
  padding: 0 1.15rem 0 0;
}
.hero-trust li + li {
  padding-left: 1.15rem;
  border-left: 1px solid rgb(255 255 255 / 0.22);
}
.hero-trust-ico {
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}
.hero-trust-ico svg { width: 1.35rem; height: 1.35rem; }
.hero-cursor-glow {
  position: absolute;
  left: 72%;
  top: 42%;
  width: 22rem;
  height: 22rem;
  margin: -11rem 0 0 -11rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(0 194 255 / 0.28), transparent 68%);
  transform: translate3d(calc(var(--mx, 0) * 36px), calc(var(--my, 0) * 24px), 0);
  pointer-events: none;
}
.hero-orbit {
  position: absolute;
  right: -8%;
  top: 8%;
  width: 36rem;
  height: 36rem;
  border-radius: 999px;
  border: 1px solid rgb(0 194 255 / 0.16);
  box-shadow: inset 0 0 40px rgb(0 194 255 / 0.05);
}
.hero-floor {
  position: absolute;
  left: -12%;
  width: 78%;
  bottom: -28%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgb(214 236 255 / 0.55), rgb(0 194 255 / 0.08) 46%, transparent 70%);
}
.hero-floor::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 18%;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(190 230 255 / 0.9), transparent);
}
.hero-gem { position: absolute; perspective: 700px; }
.hero-gem-bob { display: block; animation: gem-bob 7.5s ease-in-out infinite; }
.hero-gem-cube {
  --s: 4.2rem;
  position: relative;
  display: block;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  animation: gem-spin 18s linear infinite;
}
.hero-gem-cube i {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid rgb(170 230 255 / 0.75);
  background: linear-gradient(145deg, rgb(0 210 255 / 0.32), rgb(255 255 255 / 0.05) 55%, rgb(0 80 160 / 0.18));
  box-shadow: inset 0 0 16px rgb(0 194 255 / 0.28);
}
.hero-gem-cube i:nth-child(1) { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); }
.hero-gem-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.hero-gem-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.hero-gem-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.hero-gem-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.hero-gem-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.hero-gem--mid { left: 1.5%; top: 26%; filter: drop-shadow(0 0 16px rgb(0 194 255 / 0.45)); }
.hero-gem--lg { left: -1%; bottom: 4%; opacity: 0.72; filter: blur(1.5px) drop-shadow(0 0 22px rgb(0 194 255 / 0.35)); }
.hero-gem--lg .hero-gem-cube { --s: 7.5rem; animation-duration: 26s; }
.hero-gem--lg .hero-gem-bob { animation-duration: 9s; }
.hero-gem--sm { left: 42%; bottom: 16%; filter: drop-shadow(0 0 12px rgb(0 194 255 / 0.5)); }
.hero-gem--sm .hero-gem-cube { --s: 2.35rem; animation-duration: 14s; animation-direction: reverse; }
.hero-gem--sm .hero-gem-bob { animation-duration: 6.5s; }
@keyframes gem-spin {
  from { transform: rotateX(-16deg) rotateY(28deg); }
  to { transform: rotateX(-16deg) rotateY(388deg); }
}
@keyframes gem-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(8px, -16px, 0); }
}
.hero-orb {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #00c2ff;
  box-shadow: 0 0 16px #00c2ff;
}
.hero-back {
  position: absolute;
  z-index: 0;
  left: -22%;
  top: 8%;
  width: 44%;
  pointer-events: none;
}
.hero-back-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  border: 1px solid rgb(170 225 255 / 0.75);
  transform: rotate(-8deg);
  box-shadow: 0 0 22px rgb(0 194 255 / 0.32), 0 18px 36px rgb(0 10 40 / 0.35);
  animation: hero-back-drift 8s ease-in-out infinite;
}
@keyframes hero-back-drift {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-8px); }
}
.hero-back-frame img { object-position: center center; }
.hero-controls { top: 0.75rem; right: auto; bottom: auto; left: 0.75rem; }
.hero-photo-wrap { position: relative; width: min(100%, 26.5rem); margin-left: auto; }
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6%;
  bottom: -16%;
  width: 72%;
  height: 28%;
  border-radius: 50%;
  border: 2px solid rgb(80 210 255 / 0.35);
  box-shadow: 0 0 26px rgb(0 194 255 / 0.28);
  pointer-events: none;
}
.hero .hero-photo {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgb(186 230 255 / 0.9);
  box-shadow:
    0 0 0 1px rgb(0 194 255 / 0.35),
    0 0 32px rgb(0 194 255 / 0.38),
    0 22px 48px rgb(0 12 40 / 0.4);
}
.hero-photo-frame { border-radius: 26px; }
.hero-photo-frame {
  aspect-ratio: 4 / 4.7;
  max-height: min(56vh, 30rem);
}
.hero .hero-photo img,
.hero-photo-img { object-position: center 62%; }
.hero-photo-copy { position: absolute; inset: auto 0 0 0; padding: 1.15rem 1.25rem 1.2rem; }
.hero-photo-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82);
}
.hero-photo-caption {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
}
.hero-photo-caption span { display: block; color: #f5c518; }
.hero-photo-caption::after {
  content: "";
  display: block;
  width: 38%;
  height: 3px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #00d0ff, rgb(0 208 255 / 0));
}
.hero-photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgb(5 21 59 / 0.82) 100%);
}
.hero-controls {
  position: absolute;
  left: 0.7rem;
  top: 0.65rem;
  bottom: auto;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-ctrl {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: rgb(5 21 59 / 0.45);
  color: #fff;
}
.hero-chip-slot, .hero-badge-slot { position: absolute; z-index: 20; }
.hero-chip-slot--a { left: -10%; top: 26%; }
.hero-chip-slot--b { right: -8%; top: 46%; }
.hero-chip-slot--c { left: -8%; bottom: 36%; }
.hero-badge-slot { right: -1%; top: -0.55rem; z-index: 30; }
.hero-chip-copy { display: flex; flex-direction: column; min-width: 4.5rem; }
.hero .hero-chip-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #2eb6f0, #0077c8);
  box-shadow: 0 6px 14px rgb(0 120 200 / 0.35);
}
.hero-chip-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: #05153b;
}
.hero-chip-label { margin-top: 0.15rem; font-size: 11px; font-weight: 600; color: #5b6e86; }
.hero-chip-go { margin-left: 0.25rem; color: #8aa0b8; }
.hero .hero-chip {
  min-width: 0;
  width: max-content;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.96);
  border: 1px solid rgb(255 255 255 / 0.85);
  box-shadow: 0 12px 28px rgb(5 21 59 / 0.18);
}
.hero .hero-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem 0.45rem 0.4rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffe56a, #f5c400);
  color: #05153b;
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.22);
}
.hero-badge-mark {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #05153b;
  color: #fdd44c;
}
.hero-badge-kicker {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.hero-badge-year {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 1023px) {
  .hero-back, .hero-orbit, .hero-gem, .hero-floor { display: none; }
  .hero-stage { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .hero-stage > .relative { width: 100%; }
  .hero-chip-slot { position: static; }
  .hero-badge-slot { right: 0.75rem; top: 0.75rem; }
}
@media (min-width: 1024px) {
  .hero { min-height: 0; height: auto; max-height: none; }
  .hero-visual { width: 100%; justify-self: end; }
  .hero-stage { width: 100%; }
  .hero-back { width: 42%; left: -20%; top: 8%; }
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(0 169 232 / 0.45), transparent);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7rem;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgb(0 194 255 / 0.22), transparent 70%);
}

@media (min-width: 1024px) {
  .hero { min-height: 100svh; display: flex; align-items: center; }
  .hero-layout { width: 100%; }
}
.site-nav.is-home:not(.is-scrolled) {
  padding: 0;
  background: transparent;
}
.site-nav.is-home:not(.is-scrolled) .nav-shell {
  max-width: 80rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 1.25rem;
}
.site-nav.is-home:not(.is-scrolled) .nav-link,
.site-nav.is-home:not(.is-scrolled) .font-display,
.site-nav.is-home:not(.is-scrolled) [class*="text-foreground"] {
  color: #fff;
}
.site-nav.is-home:not(.is-scrolled) .nav-brand-sub { color: rgb(213 229 245 / 0.82); }
.site-nav.is-home:not(.is-scrolled) .nav-link {
  background: transparent;
}
.site-nav.is-home:not(.is-scrolled) .nav-link:hover,
.site-nav.is-home:not(.is-scrolled) .nav-link[aria-expanded="true"] {
  color: #fff;
  background: transparent;
}
.site-nav.is-home:not(.is-scrolled) .nav-link.is-active {
  color: #00c2ff;
  background: transparent;
  box-shadow: none;
}
.site-nav.is-home:not(.is-scrolled) .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: #00c2ff;
}
.site-nav.is-home:not(.is-scrolled) .icon-btn {
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / 0.45);
  box-shadow: none;
}
.site-nav.is-home:not(.is-scrolled) img {
  background: transparent;
  box-shadow: none;
}
.site-nav.is-home:not(.is-scrolled) .btn--primary {
  background: linear-gradient(135deg, #00c2ff, #00a9e8);
  border-radius: 999px;
}

/* 8. NAVIGATION ============================================================ */
.site-nav { padding: 0.75rem 0.75rem 0; transition: padding 500ms var(--ease-brand); }
.nav-shell {
  padding: 0 0.5rem 0 0.9rem;
  border-radius: 999px;
  border: 1px solid rgb(220 234 244 / 0.9);
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 10px 30px -18px rgb(5 21 59 / 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    background-color 500ms ease,
    border-color 500ms ease,
    box-shadow 500ms ease,
    padding 500ms var(--ease-brand);
}
.nav-shell [data-navbar-inner] { transition: height 500ms var(--ease-brand); }
.site-nav.is-scrolled { padding-top: 0.5rem; }
.site-nav.is-scrolled .nav-shell {
  background: rgb(255 255 255 / 0.92);
  border-color: rgb(220 234 244 / 0.95);
  box-shadow: 0 1px 0 #fff inset, 0 14px 40px -16px rgb(5 21 59 / 0.28);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav.is-scrolled .nav-shell {
    background: rgb(255 255 255 / 0.68);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
  }
}
.site-nav.is-scrolled [data-navbar-inner] { height: 4rem; }

.nav-link { color: var(--color-text-secondary); transition: color 250ms ease, background-color 250ms ease; }
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--color-primary); background: rgb(0 120 168 / 0.07); }
.nav-link.is-active { color: var(--color-primary); background: var(--color-primary-light); }

.nav-mega {
  border: 1px solid #fff;
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.nav-mega-card { border: 1px solid transparent; background: var(--color-bg-soft); transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.nav-mega-card:hover, .nav-mega-card.is-on { border-color: rgb(0 120 168 / 0.2); background: #fff; box-shadow: var(--shadow-float); }

.mobile-link { color: var(--color-text); transition: color 250ms ease; }
.mobile-link:hover, .mobile-link.is-on { color: var(--color-primary); }

/* 9. SECTIONS ============================================================== */
.campus-panorama { box-shadow: var(--shadow-floating); }
.cta-destination { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9) inset, 0 40px 120px -40px rgb(5 21 59 / 0.35); }
.testimonial-slide { flex-shrink: 0; }

.footer-social {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.15);
  color: rgb(255 255 255 / 0.8);
  transition: background-color 300ms ease, color 300ms ease, transform 400ms var(--ease-brand);
}
.footer-social:hover { background: #fff; color: var(--color-ink); transform: translateY(-2px); }
.footer-contact {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: var(--r-md);
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.04);
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.9);
  transition: background-color 300ms ease, border-color 300ms ease;
}
.footer-contact:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); }
.footer-contact-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.1);
  color: var(--color-blue-300);
}

/* 10. OVERLAYS & WIDGETS =================================================== */

/* Cursor companion (desktop, motion allowed; interactions.js decides).
   The system arrow stays; the ring trails it and the pill labels actions.
   Size changes are scale transforms, never width, so nothing re-lays out. */
.cursor-layer { opacity: 0; transition: opacity 300ms ease; }
.cursor-layer.is-ready { opacity: 1; }
.cursor-layer.is-over-field { opacity: 0 !important; }

.cursor-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}
.cursor-ring-core {
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid rgb(0 120 168 / 0.35);
  background: radial-gradient(circle, rgb(0 120 168 / 0.06), transparent 70%);
  box-shadow: 0 0 0 0 rgb(0 120 168 / 0);
  transform: scale(0.8);
  transition:
    transform 450ms var(--ease-brand),
    border-color 300ms ease,
    background-color 300ms ease,
    box-shadow 450ms ease;
}
[data-cursor-ring][data-active="true"] .cursor-ring-core {
  transform: scale(1.35);
  border-color: rgb(0 120 168 / 0.55);
  background: rgb(0 120 168 / 0.07);
  box-shadow: 0 0 24px -4px rgb(0 120 168 / 0.35);
}
[data-cursor-ring][data-label="true"] .cursor-ring-core {
  transform: scale(1.6);
  border-color: rgb(253 212 76 / 0.8);
  background: rgb(252 239 198 / 0.25);
}
[data-cursor-ring][data-press="true"] .cursor-ring-core { transform: scale(0.6); transition-duration: 150ms; }

.cursor-pill-anchor { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor-pill {
  position: absolute;
  left: 18px;
  top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem 0.35rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: var(--shadow-glow);
  opacity: 0;
  transform: translateY(4px) scale(0.85);
  transform-origin: 0 0;
  transition: opacity 250ms ease, transform 400ms var(--ease-brand);
}
.cursor-layer[data-label="true"] .cursor-pill { opacity: 1; transform: none; }

/* Enquiry modal fields share the page field. */
.lead-modal .step-back { font-size: 0.84rem; }

} /* end @layer components */

/* Keep the hero composition still. The stage tilt was knocking the cards off the photo. */
.hero .hero-stage { transform: none !important; }

/* Unlayered so these beat the light mesh utilities on the navy hero. */
.hero .gradient-blob {
  background: radial-gradient(circle, rgb(0 194 255 / 0.22), transparent 68%);
}

/* 11. RESPONSIVE ============================================================
   Hover states only where there is a real pointer; touch gets the resting
   state that already carries the information. Unlayered so the transforms
   compose with the component defaults above. */
@media (hover: hover) and (pointer: fine) {
  .stat-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 #fff inset, var(--shadow-floating); }
  .stat-card:hover .stat-card-glow { transform: scale(1.35); }
  .route-tile:hover { transform: translateY(-3px); }
  .program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-floating); border-color: rgb(0 169 232 / 0.45); }
  .program-card:hover .program-card-img { transform: scale(1.04); }
  .program-card:hover .program-card-cta { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-glow); }
  .program-card:hover .program-card-cta-label { max-width: 10rem; opacity: 1; }
  .bento-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
  .bento-tile:hover .bento-icon { background: var(--color-primary); color: #fff; transform: rotate(-6deg); }
  .result-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); border-color: rgb(0 120 168 / 0.2); }
  .officer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: rgb(253 212 76 / 0.7); }
  .mou-chip:hover { border-color: rgb(0 120 168 / 0.3); box-shadow: var(--shadow-soft); }
  .faculty-card:hover .faculty-photo, .faculty-card:focus-within .faculty-photo { transform: scale(1.05); }
  .faculty-card:hover .faculty-bio { max-height: 8rem; opacity: 1; }
  .method-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
  .method-step:hover .method-node { background: var(--color-primary); color: #fff; transform: rotate(-6deg); }
  .selection-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: rgb(0 120 168 / 0.22); }
  .gallery-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
  .review-card:hover .review-body { transform: translateY(-6px); box-shadow: var(--shadow-floating); }
  /* The tilt script lifts and turns the card; these add the rest. */
  .rc-card:hover { box-shadow: inset 0 1px 0 #fff, 0 34px 60px -18px rgb(0 120 168 / 0.5), 0 0 60px -4px rgb(0 120 168 / 0.28); }
  .rc-card:hover .rc-glare { opacity: 1; }
  .rc-card:hover .rc-photo { transform: scale(1.05); }
  .rc-card:hover .rc-go { transform: translateX(3px); }
  /* The medallion turns over like a coin. */
  .rc-card:hover .rc-coin { transform: rotateY(360deg); }
  .review-card:hover .review-photo { transform: scale(1.04); }
}
/* Touch: the program CTA shows its label, since there is no hover to reveal it. */
@media (hover: none) {
  .program-card-cta { background: var(--color-primary); color: #fff; }
  .program-card-cta-label { max-width: 10rem; opacity: 1; }
  .faculty-bio { max-height: 8rem; opacity: 1; }
}

@media (min-width: 640px) {
  .faculty-card { width: 42vw; }
  .review-card { width: 18.5rem; }
}
@media (min-width: 768px) {
  /* The route dock becomes one continuous panel with hairline dividers. */
  .route-dock {
    border-radius: var(--r-xl);
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }
  .route-dock .route-tile { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .route-dock > li + li .route-tile { box-shadow: inset 1px 0 0 var(--color-border); }
  .route-dock .route-tile:hover { background: var(--color-bg-soft); transform: none; }
  .faculty-card { width: 30vw; }
}
@media (min-width: 1024px) {
  .faculty-card { width: 22vw; }

  /* Up to six portraits share the row and open under the pointer. */
  .faculty-rail.is-accordion {
    height: 32rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    gap: 0.75rem;
  }
  .faculty-rail.is-accordion .faculty-card {
    width: auto;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    flex: 1 1 0;
    transition: flex-grow 800ms var(--ease-brand);
  }
  .faculty-rail.is-accordion .faculty-card:hover,
  .faculty-rail.is-accordion .faculty-card:focus-within { flex-grow: 2; }
  .faculty-rail.is-accordion:hover .faculty-card:not(:hover) .faculty-photo { filter: saturate(0.75) brightness(0.96); }
}
@media (min-width: 1280px) {
  /* On the widest screens the method cycle drops its cards and reads as nodes
     strung along one track. */
  .method-step { padding: 0 0.5rem; border: 0; background: none; box-shadow: none; text-align: center; }
  .method-step:hover { box-shadow: none; }
  .method-node { margin-inline: auto; }
}
@media (max-width: 1023.98px) {
  .result-feature > div { min-height: 26rem; }
}

/* Mobile app shell — phones only. The tab bar is light glass with a raised
   primary action; call and WhatsApp float above it. */
@media (max-width: 639.98px) {
  :root { --mobile-bar: 4.25rem; }

  .app-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--color-border);
    background: rgb(255 255 255 / 0.94);
    box-shadow: 0 -12px 40px -18px rgb(5 21 59 / 0.25);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-bar { background: rgb(255 255 255 / 0.78); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
  }
  .app-bar-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    height: var(--mobile-bar);
    margin: 0;
    padding: 0 0.25rem;
    list-style: none;
  }
  .app-bar-list > li { display: flex; justify-content: center; height: 100%; }
  .app-bar-tab {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 0;
    background: none;
    color: var(--color-muted-foreground);
    font: inherit;
    cursor: pointer;
    transition: color 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .app-bar-tab:hover, .app-bar-tab:focus-visible { color: var(--color-text); }
  .app-bar-tab.is-on { color: var(--color-primary); }
  .app-bar-tab.is-on::after {
    content: "";
    position: absolute;
    bottom: 0.4rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold);
  }
  .app-bar-label { font-size: 0.6875rem; font-weight: 600; line-height: 1; }
  .app-bar-tab.is-on .app-bar-label { font-weight: 700; }
  .app-bar-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: 0.7rem;
    color: var(--color-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .app-bar-action-ring {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    margin-top: -1.9rem;
    border-radius: 50%;
    border: 4px solid #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 12px 26px -8px rgb(0 120 168 / 0.6);
    transition: transform 220ms var(--ease-brand);
  }
  .app-bar-action:active .app-bar-action-ring { transform: scale(0.94); }
  .app-bar-action .app-bar-label { font-weight: 700; }

  .app-fab-stack {
    position: fixed;
    right: 14px;
    bottom: calc(var(--mobile-bar) + env(safe-area-inset-bottom) + 14px);
    z-index: 44;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* The assistant sits directly above the two quick contacts, at the same
     size, so the three read as one quiet column rather than a pile. */
  .ndi-asst[data-mode="public"] .ndi-asst-launcher {
    width: 2.75rem;
    height: 2.75rem;
    bottom: calc(var(--mobile-bar) + env(safe-area-inset-bottom) + 14px + 2 * (2.75rem + 10px));
  }
  .ndi-asst[data-mode="public"] .ndi-asst-launcher-icon { width: 2.2rem; height: 2.2rem; }
  .app-fab {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    box-shadow: var(--shadow-float);
    transition: transform 220ms var(--ease-brand);
    -webkit-tap-highlight-color: transparent;
  }
  .app-fab:active { transform: scale(0.94); }
  .app-fab--wa { background: #fff; color: var(--color-green-ink); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-float); }
  .app-fab--call { background: var(--color-primary); color: #fff; }

  /* Programs pop-up, hinged at its tab. */
  body.app-pop-open .app-bar { z-index: 48; }
  .app-pop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 47;
    background: rgb(5 21 59 / 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 320ms ease;
  }
  .app-pop-backdrop.is-open { opacity: 1; }
  .app-pop {
    --hinge: 30%;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-bar) + env(safe-area-inset-bottom) + 14px);
    z-index: 49;
    perspective: 1100px;
    perspective-origin: var(--hinge) 100%;
    pointer-events: none;
  }
  .app-pop.is-open { pointer-events: auto; }
  .app-pop-card {
    position: relative;
    max-height: calc(100dvh - var(--mobile-bar) - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 14px;
    border: 1px solid #fff;
    border-radius: 26px;
    background:
      radial-gradient(120% 70% at var(--hinge) 110%, rgb(234 243 255 / 0.9), transparent 60%),
      #fff;
    box-shadow: var(--shadow-floating);
    transform-origin: var(--hinge) 100%;
    transform-style: preserve-3d;
    opacity: 0;
    transform: rotateX(-30deg) translateY(30px) scale(0.94);
    transition: transform 520ms var(--ease-brand), opacity 280ms ease;
  }
  .app-pop.is-open .app-pop-card { opacity: 1; transform: none; }
  .app-pop-caret {
    position: absolute;
    left: calc(var(--hinge) - 8px);
    bottom: -7px;
    width: 16px;
    height: 16px;
    border-bottom-right-radius: 4px;
    background: #fff;
    transform: rotate(45deg) scale(0);
    transition: transform 360ms var(--ease-brand) 120ms;
  }
  .app-pop.is-open .app-pop-caret { transform: rotate(45deg) scale(1); }
  .app-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .app-pop-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
  .app-pop-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
  }
  .app-pop-label {
    margin: 12px 0 8px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
  .app-pop-grid, .app-pop-routes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .app-pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-pop-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-pop-item {
    opacity: 0;
    transform: translateY(10px);
    transition: transform 480ms var(--ease-brand), opacity 300ms ease;
  }
  .app-pop.is-open .app-pop-item { opacity: 1; transform: none; transition-delay: calc(100ms + var(--i, 0) * 45ms); }
  .app-pop-feature, .app-pop-route {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-bg-soft);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 200ms ease, border-color 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .app-pop-feature { padding: 14px 12px; }
  .app-pop-route { align-items: center; padding: 12px 6px; text-align: center; }
  .app-pop-feature:active, .app-pop-route:active { transform: scale(0.97); }
  .app-pop-feature.is-on, .app-pop-route.is-on { border-color: var(--color-primary); background: #fff; }
  .app-pop-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--color-primary-light);
    color: var(--color-primary);
  }
  .app-pop-icon--sm { width: 32px; height: 32px; border-radius: 10px; background: var(--color-cream); color: var(--color-gold-ink); }
  .app-pop-name { font-size: 0.86rem; font-weight: 700; line-height: 1.25; }
  .app-pop-note { font-size: 0.7rem; line-height: 1.35; color: var(--color-muted-foreground); }
  .app-pop-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .app-pop-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
  }
  .app-pop-link--gold { background: var(--color-cream); color: var(--color-text); box-shadow: inset 0 0 0 1px rgb(253 212 76 / 0.6); }
  .app-bar-tab[data-programs-toggle] svg { transition: transform 520ms var(--ease-brand); }
  .app-bar-tab[data-programs-toggle][aria-expanded="true"] { color: var(--color-primary); }
  .app-bar-tab[data-programs-toggle][aria-expanded="true"] svg { transform: translateY(-3px); }

  /* The floating nav pill sits a little tighter on a phone. */
  .site-nav { padding: 0.6rem 0.6rem 0; }
  .nav-shell { padding-left: 0.65rem; padding-right: 0.35rem; }
  .nav-shell [data-navbar-inner] { height: 4rem; }
}
@media (min-width: 640px) {
  .app-bar, .app-fab-stack, .app-pop, .app-pop-backdrop { display: none !important; }
}

/* Below the desktop bar the nav is always a glass pill, since it sits over
   content from the first scroll. */
@media (max-width: 1279.98px) {
  .nav-shell {
    background: rgb(255 255 255 / 0.72);
    border-color: rgb(255 255 255 / 0.9);
    box-shadow: 0 1px 0 #fff inset, 0 10px 30px -12px rgb(5 21 59 / 0.2);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
  }
}

/* The concierge widget on the public site takes the ink-and-primary palette
   instead of its own neon one. Scoped to data-mode="public" so the admin copy
   of the widget is untouched. */
.ndi-asst[data-mode="public"] {
  --a-midnight: #11243e;
  --a-surface: #11315b;
  --a-cyan: #96bdef;
  --a-sky: #96bdef;
  --a-ice: #f4f8ff;
  --a-gold: #e2b474;
  --a-line: rgb(255 255 255 / 0.14);
  --a-soft: rgb(244 248 255 / 0.72);
  --a-well: #0e2644;
}

/* 12. ACCESSIBILITY & OVERRIDES ============================================= */

/* The results portrait is seated low and a little left of centre, head and
   shoulders with blue above it, leaving the right edge for the motto. Placed
   here, unlayered, because it overrides media_fill's own inset utilities. */
.rc-media .rc-photo { inset: 0; width: 100%; height: 100%; }

/* Soft bands from earlier templates fade in and out of white like the new
   ones, rather than switching with a hard edge. Unlayered: it layers an
   image over the utility's background colour. */
section.bg-lightblue {
  background-image: linear-gradient(180deg, #fff 0, var(--color-bg-soft) 8rem, var(--color-bg-soft) calc(100% - 8rem), #fff 100%);
}

/* Gold as *text* must be the readable gold (4.8:1 on white); raw gold is for
   fills. Inside a dark band --color-gold-ink is re-pointed to raw gold. Must
   be unlayered to beat the generated utility. */
.text-yellow { color: var(--color-gold-ink); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .icon-btn, .stat-card, .route-tile, .program-card, .program-card-img,
  .bento-tile, .result-tile, .officer-card, .faculty-card, .faculty-photo, .method-step,
  .selection-card, .gallery-tile, .contact-row, .footer-social, .live-dot, .hero-accent::before,
  .review-body, .review-photo, .review-sparkle, .review-play-icon, .review-play, .review-player-panel,
  .rc-card, .rc-photo, .rc-coin, .rc-coin::after, .rc-glare,
  .upd-bar-fill, .upd-profile, .upd-badge, .upd-tile, .upd-live i, .upd-cta, .upd-dot {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover, .stat-card:hover, .route-tile:hover, .bento-tile:hover, .result-tile:hover,
  .officer-card:hover, .method-step:hover, .selection-card:hover, .gallery-tile:hover,
  .contact-row:hover, .footer-social:hover { transform: none !important; }
  .program-card:hover .program-card-img, .faculty-card:hover .faculty-photo { transform: none !important; }
  .hero-accent::before { transform: scaleX(1); }
  .faculty-rail.is-accordion .faculty-card { transition: none; }
}

/* Windows high-contrast: keep the controls outlined. */
@media (forced-colors: active) {
  .btn, .icon-btn, .field, .faq-card, .program-card, .stat-card { border: 1px solid CanvasText; }
  .hero-accent-text, .hero-gold, .footer-statement-gold, .text-gradient-blue { color: CanvasText; background: none; }
}

/* 12. PAGE GUIDE ============================================================
   The "In brief" copy each page carries (sections/seo-guide.php): a short
   lead on the left, readable prose with its own headings and links on the
   right. Plain editorial type, so it reads as information, not a banner. */
.seo-guide { border-top: 1px solid var(--color-border); }
.seo-guide-grid { display: grid; gap: 2rem; }
.seo-guide-intro {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-foreground);
}
.seo-guide-body { max-width: 40rem; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.75; }
.seo-guide-body > * + * { margin-top: 1rem; }
.seo-guide-body h2,
.seo-guide-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-foreground);
}
.seo-guide-body h2 { margin-top: 2.25rem; font-size: 1.3rem; line-height: 1.3; }
.seo-guide-body h3 { margin-top: 1.5rem; font-size: 1.05rem; }
.seo-guide-body > :first-child { margin-top: 0; }
.seo-guide-body h2 + *, .seo-guide-body h3 + * { margin-top: 0.6rem; }
.seo-guide-body ul { display: grid; gap: 0.5rem; padding-left: 0; list-style: none; }
.seo-guide-body li { position: relative; padding-left: 1.35rem; }
.seo-guide-body li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.7em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-cyan);
}
.seo-guide-body strong { color: var(--color-foreground); font-weight: 700; }
.seo-guide-body a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(0 120 168 / 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 250ms ease, color 250ms ease;
}
.seo-guide-body a:hover { color: var(--color-primary-dark); text-decoration-color: currentColor; }
.seo-guide-body a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }
@media (min-width: 1024px) {
  .seo-guide-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; }
  .seo-guide-aside { position: sticky; top: 7rem; align-self: start; }
}