/* ═══════════════════════════════════════════════════════════════════════
   MPS PREMIUM-3D.CSS — Advanced 3D Depth, Glassmorphism & Micro-interactions
   Mysore Public School · Premium Visual Layer v1.0
   ═══════════════════════════════════════════════════════════════════════

   This file layers ON TOP of the base CSS — it never removes base styles.
   Load order: after components.css and before responsive.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES — 3D & Depth Tokens
──────────────────────────────────────────────────────────────────────── */
:root {
  /* Perspective / Depth */
  --depth-near:      600px;
  --depth-mid:       1000px;
  --depth-far:       1600px;

  /* Ambient Light Colours */
  --ambient-royal:   rgba(15,61,145,0.18);
  --ambient-gold:    rgba(201,162,39,0.14);
  --ambient-white:   rgba(255,255,255,0.06);

  /* Glass Upgraded */
  --glass-ultra:     rgba(255,255,255,0.04);
  --glass-border-glow: rgba(201,162,39,0.18);

  /* Premium Shadow System */
  --shadow-depth-1:  0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-depth-2:  0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-depth-3:  0 20px 56px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.10);
  --shadow-depth-4:  0 32px 80px rgba(0,0,0,0.24), 0 12px 28px rgba(0,0,0,0.14);
  --shadow-gold-glow: 0 0 40px rgba(201,162,39,0.22), 0 8px 24px rgba(201,162,39,0.12);
  --shadow-royal-glow: 0 0 40px rgba(15,61,145,0.30), 0 8px 24px rgba(15,61,145,0.15);

  /* Easing */
  --ease-premium:    cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-elastic:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* ──────────────────────────────────────────────────────────────────────
   2. FLOATING CHAT BUTTON — Fixed ambient presence
──────────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────
   2. FLOATING CHAT BUTTON — visual placeholder for a future chatbot
──────────────────────────────────────────────────────────────────────── */
.mps-float-chat {
  position: fixed;
  bottom: 2.25rem;
  right: 2.25rem;
  z-index: 900;         /* below cursor, above content */
  pointer-events: auto;
  text-decoration: none;
  padding: 0;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  opacity: 1;               /* never render as a greyed-out disabled control */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Glass pill with double aura */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 0;
  font: inherit;
  color: #C9A227;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(28px) saturate(220%);
  -webkit-backdrop-filter: blur(28px) saturate(220%);
  border: 1.5px solid rgba(201,162,39,0.38);
  box-shadow:
    0 10px 36px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.12);

  /* Animation */
  animation: floatLogoRise 0.8s var(--ease-premium) 2s both,
             floatLogoBreath 6s ease-in-out 3s infinite;
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease-smooth),
    border-color 0.3s,
    background-color 0.3s;
  overflow: hidden;
}

.mps-float-chat:hover {
  transform: scale(1.1) translateY(-4px);
  border-color: rgba(201,162,39,0.85);
  background: rgba(15, 23, 42, 0.95);
  box-shadow:
    0 18px 52px rgba(0,0,0,0.5),
    0 0 28px rgba(201,162,39,0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.mps-float-chat svg {
  width: 28px;
  height: 28px;
  transition: transform 0.4s var(--ease-spring), opacity 0.3s;
  filter: drop-shadow(0 2px 8px rgba(201,162,39,0.35));
}

.mps-float-chat:hover svg {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(201,162,39,0.55));
}

/* Ripple on hover */
.mps-float-chat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(201,162,39,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s;
}

.mps-float-chat:hover::after {
  opacity: 1;
}

@keyframes floatLogoRise {
  from { opacity: 0; transform: translateY(24px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatLogoBreath {
  0%, 100% { box-shadow: 0 10px 36px rgba(0,0,0,0.4), 0 0 0 0 rgba(201,162,39,0.0); }
  50%       { box-shadow: 0 10px 36px rgba(0,0,0,0.4), 0 0 22px 3px rgba(201,162,39,0.22); }
}

/* Fluid responsive scaling */
@media (max-width: 768px) {
  .mps-float-chat {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 58px;
    height: 58px;
  }
  .mps-float-chat svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 480px) {
  .mps-float-chat {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 52px;
    height: 52px;
  }
  .mps-float-chat svg {
    width: 24px;
    height: 24px;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   3. HERO SECTION — Ambient Lights & Chromatic Depth
──────────────────────────────────────────────────────────────────────── */

/* Ambient orb system — purely decorative depth */
.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform, opacity;
  pointer-events: none;
}

.hero-ambient-orb--1 {
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(15,61,145,0.45) 0%, transparent 70%);
  top: -200px;
  left: -100px;
  animation: orbDrift1 18s ease-in-out infinite;
}

.hero-ambient-orb--2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201,162,39,0.18) 0%, transparent 70%);
  bottom: -100px;
  right: -50px;
  animation: orbDrift2 22s ease-in-out 3s infinite;
}

.hero-ambient-orb--3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(26,82,184,0.20) 0%, transparent 70%);
  top: 40%;
  right: 20%;
  animation: orbDrift3 15s ease-in-out 6s infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(60px, 40px) scale(1.06); }
  66%       { transform: translate(-30px, 80px) scale(0.96); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-80px, -40px) scale(1.08); }
  70%       { transform: translate(40px, -60px) scale(0.94); }
}

@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50%       { transform: translate(50px, -30px) scale(1.12); opacity: 1; }
}

/* Hero grid line overlay — premium depth texture */
.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
}

/* Hero corner accents — geometric decorations */
.hero-corner-accent {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0.3;
}

.hero-corner-accent--tl {
  top: 100px;
  left: 2rem;
}

.hero-corner-accent--br {
  bottom: 120px;
  right: 2rem;
  transform: rotate(180deg);
}

/* Enhanced hero h1 — letter spacing & shadow */
.hero-h1 {
  text-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 24px rgba(0,0,0,0.2);
}

/* Gold stat values — depth glow */
.h-stat-val {
  text-shadow: 0 0 20px rgba(201,162,39,0.3);
}

/* Hero stats bar — glassmorphic pill */
.hero-stats {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-8);
  display: inline-flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-top: 0;
}

/* Scroll indicator line */
.scroll-indicator::before {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4));
  margin-bottom: var(--space-2);
}


/* ──────────────────────────────────────────────────────────────────────
   4. SECTION TRANSITIONS — Depth Separators
──────────────────────────────────────────────────────────────────────── */

/* Premium section-to-section fade (visible between light/dark) */
.section-dark + .section,
.section-dark + .section-alt,
.section + .section-dark,
.section-alt + .section-dark {
  position: relative;
}

/* Decorative diagonal clip on dark sections */
.section-dark.has-clip {
  clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%);
}

/* Ambient background mesh for all sections */
.section::after,
.section-alt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(15,61,145,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(201,162,39,0.03) 0%, transparent 50%);
}

/* Section content sits above pseudo decorations */
.section > .container,
.section-alt > .container,
.section-dark > .container {
  position: relative;
  z-index: 1;
}


/* ──────────────────────────────────────────────────────────────────────
   5. WHY CARDS — Premium 3D Hover System
──────────────────────────────────────────────────────────────────────── */

.why-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
}

/* Animated top-edge accent line */
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
  z-index: 1;
}

.why-card:hover::before {
  opacity: 1;
}

/* Background shimmer on hover */
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(201,162,39,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}

.why-card:hover::after {
  opacity: 1;
}

.why-card:hover {
  box-shadow:
    var(--shadow-depth-3),
    0 0 0 1px rgba(201,162,39,0.15);
  transform: translateY(-8px) translateZ(0);
}

.why-card:hover .why-icon {
  transform: translateZ(20px) scale(1.08);
  box-shadow: 0 8px 24px rgba(15,61,145,0.35);
}

.why-icon {
  transition:
    background-color var(--dur-base),
    color var(--dur-base),
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease-smooth);
}

/* Gold number badge for why cards */
.why-card-num {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(201,162,39,0.07);
  line-height: 1;
  pointer-events: none;
  transition: color 0.4s;
  user-select: none;
}

.why-card:hover .why-card-num {
  color: rgba(201,162,39,0.12);
}


/* ──────────────────────────────────────────────────────────────────────
   6. GLASS CARDS — Upgraded Depth & Reflections
──────────────────────────────────────────────────────────────────────── */

/* Enhanced reflection shine — sweeps across on hover */
.glass-card {
  position: relative;
  isolation: isolate;
}

.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.08) 0%,
    transparent 30%,
    rgba(255,255,255,0.03) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}

.glass-card:hover::after {
  opacity: 1;
}

.glass-card:hover {
  box-shadow:
    var(--shadow-depth-4),
    0 0 0 1px rgba(255,255,255,0.1),
    inset 0 1px 0 rgba(255,255,255,0.08);
}


/* ──────────────────────────────────────────────────────────────────────
   7. PAGE HERO (Inner pages) — Cinematic Depth
──────────────────────────────────────────────────────────────────────── */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(6rem, 14vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 50%, var(--color-royal-dark) 100%);
}

/* Animated mesh background */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: meshDrift 30s linear infinite;
}

/* Ambient glows */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(15,61,145,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(201,162,39,0.12) 0%, transparent 45%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

/* Heading styles for page hero */
.hero-heading,
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: var(--tracking-tightest);
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.page-hero h1 em,
.hero-heading em {
  color: var(--color-gold);
  font-style: italic;
}

.page-hero .hero-sub {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-lg);
  max-width: 56ch;
  margin: var(--space-5) auto 0;
}

@keyframes meshDrift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* Page hero breadcrumb */
.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-5);
}

.page-breadcrumb a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.page-breadcrumb a:hover {
  color: var(--color-gold);
}

.page-breadcrumb span + span::before {
  content: '/';
  margin-right: var(--space-2);
  opacity: 0.4;
}


/* ──────────────────────────────────────────────────────────────────────
   8. MEDIA SLOTS — Premium Hover States
──────────────────────────────────────────────────────────────────────── */

/* Elevated media slot with depth */
.media-slot {
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-smooth);
}

/* Group hover: parent hovered → media lifts */
.two-col-layout:hover .col-visual .media-slot,
.two-col-layout--rev:hover .col-visual .media-slot {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-depth-4);
}

/* Media slot corner glow */
.media-slot:not(.full-bleed)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(201,162,39,0.08) 0%,
    transparent 40%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s;
}

.media-slot:not(.full-bleed):hover::after {
  opacity: 1;
}

/* Float badge — enhanced */
.float-badge {
  background: rgba(17,24,39,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(201,162,39,0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-depth-3);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}

.float-badge:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: var(--shadow-depth-4), 0 0 20px rgba(201,162,39,0.15);
}


/* ──────────────────────────────────────────────────────────────────────
   8b. FACILITY CARDS — Editorial Depth & Hover Experience
──────────────────────────────────────────────────────────────────────── */
.fac-card,
#cms-facilities-grid .card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform 0.45s var(--ease-premium),
    box-shadow 0.45s var(--ease-smooth),
    border-color 0.35s ease;
}

.fac-card:hover,
#cms-facilities-grid .card:hover {
  transform: translateY(-6px) translateZ(0);
  border-color: rgba(201,162,39,0.35);
  box-shadow:
    var(--shadow-depth-3),
    0 0 24px rgba(201,162,39,0.15);
}

.fac-card .media-slot img,
#cms-facilities-grid .card .media-slot img {
  transition: transform 0.7s var(--ease-premium);
}

.fac-card:hover .media-slot img,
#cms-facilities-grid .card:hover .media-slot img {
  transform: scale(1.06);
}

.fac-card .fac-name,
#cms-facilities-grid .card h3 {
  transition: transform 0.35s var(--ease-premium), color 0.3s;
}

.fac-card:hover .fac-name,
#cms-facilities-grid .card:hover h3 {
  color: var(--color-gold);
  transform: translateX(3px);
}


/* ──────────────────────────────────────────────────────────────────────
   9. GALLERY — Cinematic Card Hover
──────────────────────────────────────────────────────────────────────── */

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transform-origin: center;
  will-change: transform;
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-smooth);
}

.gal-item:hover {
  transform: scale(1.025) translateZ(0);
  box-shadow:
    var(--shadow-depth-4),
    0 0 0 2px rgba(201,162,39,0.25);
  z-index: 2;
}

.gal-slot {
  overflow: hidden;
}

.gal-slot img,
.gal-slot video {
  transition: transform 0.7s var(--ease-premium), filter 0.5s;
}

.gal-item:hover .gal-slot img,
.gal-item:hover .gal-slot video {
  transform: scale(1.08) translateZ(0);
}

/* Cinematic gradient overlay */
.gal-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17,24,39,0.9) 0%,
    rgba(17,24,39,0.4) 40%,
    rgba(17,24,39,0.0) 70%,
    rgba(15,61,145,0.10) 100%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  z-index: 1;
}

.gal-item:hover .gal-overlay {
  opacity: 1;
}

.gal-overlay span {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transform: translateY(8px);
  transition: transform 0.4s var(--ease-premium);
}

.gal-item:hover .gal-overlay span {
  transform: translateY(0);
}

/* Gold top accent on hover */
.gal-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

.gal-item:hover::before {
  opacity: 1;
}


/* ──────────────────────────────────────────────────────────────────────
   10. CAREER CARDS — Premium Presentation
──────────────────────────────────────────────────────────────────────── */

/* Openings list container */
#cms-openings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 900px;
  margin: 0 auto var(--space-16);
}

/* Individual opening card */
#cms-openings-list .glass-card,
.job-card {
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s var(--ease-smooth),
    border-color 0.3s;
  backdrop-filter: none;
}

#cms-openings-list .glass-card::before,
.job-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-royal), var(--color-gold));
  border-radius: 0 2px 2px 0;
  transition: width 0.3s var(--ease-smooth);
}

#cms-openings-list .glass-card:hover,
.job-card:hover {
  transform: translateX(6px) translateY(-2px);
  border-color: rgba(15,61,145,0.2);
  box-shadow: var(--shadow-depth-3), -4px 0 0 var(--color-royal);
}

#cms-openings-list .glass-card:hover::before,
.job-card:hover::before {
  width: 4px;
}

/* Badge styling */
.badge-royal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(15,61,145,0.08);
  color: var(--color-royal);
  border: 1px solid rgba(15,61,145,0.18);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Why Teach section — glassmorphic upgrade */
.why-section .glass-card,
.section-light .glass-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Career benefits iconbox */
.career-benefit-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(201,162,39,0.12) 0%, rgba(15,61,145,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
  transition: transform 0.35s var(--ease-spring), background 0.3s;
}

.glass-card:hover .career-benefit-icon {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  color: var(--color-navy);
}


/* ──────────────────────────────────────────────────────────────────────
   11. TESTIMONIALS — Elevated Card Design
──────────────────────────────────────────────────────────────────────── */

.tst-card {
  position: relative;
  overflow: hidden;
}

/* Large decorative quote mark */
.tst-card::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  color: rgba(201,162,39,0.1);
  pointer-events: none;
  user-select: none;
}

.tst-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-depth-4), 0 0 0 1px rgba(255,255,255,0.12);
}


/* ──────────────────────────────────────────────────────────────────────
   12. NAVIGATION — Enhanced Premium State
──────────────────────────────────────────────────────────────────────── */

/* Scrolled state — deep blur glass */
.site-header.scrolled {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(32px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(220%) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.25),
    0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Nav link underline animation */
.nav-link:not(.nav-cta):not(.dropdown-trigger) {
  position: relative;
}

.nav-link:not(.nav-cta):not(.dropdown-trigger)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-premium);
}

.nav-link:not(.nav-cta):not(.dropdown-trigger):hover::after,
.nav-link.is-active:not(.nav-cta):not(.dropdown-trigger)::after {
  transform: scaleX(1);
}

/* Dropdown — enhanced glass */
.nav-dropdown {
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.3),
    0 4px 16px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}


/* ──────────────────────────────────────────────────────────────────────
   13. BUTTONS — Premium Depth & Glow
──────────────────────────────────────────────────────────────────────── */

/* Gold button — premium glow on hover */
.btn-gold:hover {
  box-shadow:
    var(--shadow-gold-glow),
    0 8px 20px rgba(201,162,39,0.35) !important;
}

/* Primary button — royal glow on hover */
.btn-primary:hover {
  box-shadow:
    var(--shadow-royal-glow),
    0 8px 20px rgba(15,61,145,0.4) !important;
}

/* Ghost button — frosted glass upgrade */
.btn-ghost {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.3) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* Ripple effect base */
.btn {
  isolation: isolate;
}

/* CTA button in nav */
.nav-cta {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%) !important;
  color: var(--color-navy) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(201,162,39,0.3) !important;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s var(--ease-smooth),
    background 0.3s !important;
}

.nav-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 28px rgba(201,162,39,0.4) !important;
}


/* ──────────────────────────────────────────────────────────────────────
   14. STAT / COUNTER CARDS — Premium Data Presentation
──────────────────────────────────────────────────────────────────────── */

.stat-card,
.board-stat-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s;
}

.stat-card:hover,
.board-stat-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-depth-4);
}

/* Number glow effect */
.stat-card .stat-val,
[class*="stat"] [class*="val"],
[class*="stat"] [class*="number"] {
  text-shadow: 0 0 30px rgba(201,162,39,0.2);
}


/* ──────────────────────────────────────────────────────────────────────
   15. REVEAL ANIMATIONS — More Organic Entries
──────────────────────────────────────────────────────────────────────── */

/* Blur + fade reveal */
.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-out),
    filter 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.is-visible.reveal-blur {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Scale from below */
.reveal-rise {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  transition:
    opacity 0.9s var(--ease-premium),
    transform 0.9s var(--ease-premium);
}

.is-visible.reveal-rise {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Clip reveal (left to right) */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-premium);
}

.is-visible.reveal-clip {
  clip-path: inset(0 0% 0 0);
}


/* ──────────────────────────────────────────────────────────────────────
   16. LOADING SKELETON SHIMMER — Premium Placeholder
──────────────────────────────────────────────────────────────────────── */

.media-slot:not(.has-media) {
  background: linear-gradient(
    90deg,
    rgba(26,39,77,1) 0%,
    rgba(15,61,145,0.15) 35%,
    rgba(26,39,77,1) 60%,
    rgba(26,39,77,1) 100%
  );
  background-size: 300% 100%;
  animation: slotShimmer 2.5s ease-in-out infinite;
}

@keyframes slotShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}


/* ──────────────────────────────────────────────────────────────────────
   17. FOOTER — Premium Depth Bar
──────────────────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
}

/* Gold divider line at top of footer */
.footer-top::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.4), transparent);
  margin-bottom: 0;
}

/* Footer link hover — gold underline */
.f-link {
  position: relative;
  transition: color 0.2s;
}

.f-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-premium);
}

.f-link:hover::after {
  transform: scaleX(1);
}

/* Social icon buttons — if any exist */
.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  transition:
    transform 0.3s var(--ease-spring),
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.social-btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
  transform: translateY(-3px) scale(1.1);
}


/* ──────────────────────────────────────────────────────────────────────
   18. TILT CARDS — Depth Shadow Enhancement
──────────────────────────────────────────────────────────────────────── */

/* When JS applies 3D tilt, shadow responds to angle */
.tilt-card {
  position: relative;
}

/* Child elements stay in natural 2D plane for crisp click hit-testing */
.tilt-card > * {
  transform-style: flat;
}


/* ──────────────────────────────────────────────────────────────────────
   19. PROGRAMME LIST ITEMS — 3D Depth Hover
──────────────────────────────────────────────────────────────────────── */

.prog-item {
  position: relative;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  transition:
    background 0.3s var(--ease-smooth),
    transform 0.3s var(--ease-premium);
  cursor: default;
}

.prog-item:hover {
  background: rgba(255,255,255,0.04);
  transform: translateX(8px);
}

.prog-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--color-gold);
  transition: height 0.3s var(--ease-premium);
  border-radius: var(--radius-full);
}

.prog-item:hover::before {
  height: 60%;
}


/* ──────────────────────────────────────────────────────────────────────
   20. SCROLL PROGRESS — Colour Gradient
──────────────────────────────────────────────────────────────────────── */

.nav-progress {
  background: linear-gradient(
    90deg,
    var(--color-royal) 0%,
    var(--color-gold) 50%,
    var(--color-royal-light) 100%
  ) !important;
  height: 2.5px !important;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(201,162,39,0.4);
}


/* ──────────────────────────────────────────────────────────────────────
   21. ACCORDION — Premium Expand State
──────────────────────────────────────────────────────────────────────── */

.accordion-item {
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  transition:
    box-shadow 0.3s var(--ease-smooth),
    transform 0.3s var(--ease-premium);
}

.accordion-item.is-open {
  box-shadow: var(--shadow-depth-3) !important;
  transform: scale(1.005);
}

.accordion-trigger {
  transition:
    color 0.2s,
    padding 0.3s var(--ease-smooth) !important;
}

.accordion-item.is-open .accordion-trigger {
  color: var(--color-royal) !important;
}


/* ──────────────────────────────────────────────────────────────────────
   22. TEXT GRADIENT — Decorative Headlines
──────────────────────────────────────────────────────────────────────── */

/* Use class .text-gradient-gold for standout inline text */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: textGradientShift 4s linear infinite;
}

@keyframes textGradientShift {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* Royal gradient text */
.text-gradient-royal {
  background: linear-gradient(135deg, var(--color-royal-light) 0%, var(--color-royal) 60%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ──────────────────────────────────────────────────────────────────────
   23. STUDENT-LIFE MOSAIC — Cinematic Tile Hover
──────────────────────────────────────────────────────────────────────── */

.sl-tile {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-smooth);
}

.sl-tile:hover {
  transform: scale(1.03) translateZ(0);
  box-shadow: var(--shadow-depth-4);
  z-index: 2;
}

.sl-tile .sl-slot img {
  transition: transform 0.7s var(--ease-premium), filter 0.5s;
}

.sl-tile:hover .sl-slot img {
  transform: scale(1.08);
  filter: brightness(0.9) saturate(1.1);
}

/* Tile overlay text animation */
.sl-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: linear-gradient(to top, rgba(17,24,39,0.85) 0%, rgba(17,24,39,0.3) 40%, transparent 70%);
}

.sl-tile-title {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  transform: translateY(4px);
  transition: transform 0.4s var(--ease-premium);
}

.sl-tile:hover .sl-tile-title {
  transform: translateY(0);
}


/* ──────────────────────────────────────────────────────────────────────
   24. MAGAZINE SECTION — Cinematic Depth
──────────────────────────────────────────────────────────────────────── */

.magazine-card,
.news-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s;
}

.magazine-card:hover,
.news-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-depth-3);
}

.news-card .news-slot img {
  transition: transform 0.6s var(--ease-premium);
}

.news-card:hover .news-slot img {
  transform: scale(1.06);
}


/* ──────────────────────────────────────────────────────────────────────
   25. GLOBAL — Pointer cursor on interactive items
──────────────────────────────────────────────────────────────────────── */

.why-card,
.gal-item,
.sl-tile,
.magazine-card,
.news-card,
.tst-card,
.fac-card {
  cursor: default;
}

.gal-item,
.sl-tile[onclick],
.sl-tile[role="button"],
.sl-tile[tabindex] {
  cursor: pointer;
}

/* Ensure all interactive cards have cursor:pointer */
a.glass-card,
button.glass-card {
  cursor: pointer;
}


/* ──────────────────────────────────────────────────────────────────────
   REDUCED MOTION OVERRIDES
──────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-ambient-orb,
  .hero-grid-lines,
  .mps-float-chat,
  .text-gradient-gold,
  .reveal-blur,
  .reveal-rise,
  .reveal-clip,
  .page-hero::before,
  .slot-shimmer,
  .adm-ring,
  .adm-badge {
    animation: none !important;
    transition: none !important;
  }

  .mps-float-chat {
    opacity: 1 !important;
    transform: none !important;
  }

  .is-visible.reveal-blur,
  .is-visible.reveal-rise,
  .is-visible.reveal-clip {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   26. INTERIOR PAGE — PREMIUM POLISH LAYER (careers, legacy, magazine)
   QA-reviewed: all unconditional animations gated or removed, no ::before
   conflicts, reduced-motion safe, mobile touch-target safe.
────────────────────────────────────────────────────────────────────── */

/* ── Culture strip word shimmer (hover-only, safe) ── */
@keyframes culturePulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; text-shadow: 0 0 12px rgba(201,162,39,0.35); }
}

.culture-strip .culture-item:hover .culture-word {
  animation: culturePulse 2.5s ease-in-out infinite;
}

/* ── Timeline dot: hover-only pulse (not constant) ── */
/* REMOVED constant .lt-dot animation — too much ambient motion */
/* Only subtle glow on timeline row hover */
.lt-entry:hover .lt-dot {
  box-shadow: 0 0 0 8px rgba(201,162,39,0.15), 0 0 0 4px rgba(201,162,39,0.25);
}

/* ── Glass card shimmer ── */
/* NOTE: ::before is already used by job-card left-border accent rule. */
/* We use ::after instead — but ::after is used for the shine reflection in section 6. */
/* Solution: use a box-shadow top-edge instead to avoid any pseudo conflict. */
.glass-card:hover {
  outline: none; /* prevent double ring */
}

/* Top gold edge sweep on non-job-card glass cards, using outline trick */
/* We do NOT touch ::before or ::after here — those are managed above */

/* ── Interior hero pill entrance (scroll-reveal driven, not autoplay) ── */
/* Pills use reveal-up class — no separate unconditional animation needed */
/* REMOVED pillFadeIn unconditional animation — pills already use reveal-up */

/* ── Career benefit icon: hover rotation ── */
.career-benefit-card:hover .career-benefit-icon svg {
  transform: scale(1.12) rotate(-4deg);
}

.career-benefit-icon svg {
  transition: transform 0.35s var(--ease-spring);
}

/* ── Crown badge: no autoplay spin (disorienting) ── */
/* REMOVED spinIn animation — badge appears naturally with reveal-fade */
.crown-badge svg {
  /* no animation — just display normally */
}

/* ── Section-dark container z-index ── */
/* Already handled in section 4 — not repeated here */

/* ── Job listing entrance: only fires when CMS adds is-loaded ── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

#cms-openings-list.is-loaded .glass-card {
  animation: slideInLeft 0.4s var(--ease-premium) both;
}
#cms-openings-list.is-loaded .glass-card:nth-child(2) { animation-delay: 0.08s; }
#cms-openings-list.is-loaded .glass-card:nth-child(3) { animation-delay: 0.16s; }
#cms-openings-list.is-loaded .glass-card:nth-child(4) { animation-delay: 0.24s; }

/* ── Tilt card ── */
/* NOTE: .tilt-card transform-style is already in animations.css. */
/* We only add the hover state here — no re-declaration of transform-style. */
.tilt-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-1.5deg) translateZ(4px);
  box-shadow: var(--shadow-depth-3);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s;
}

/* ── Gold rule ── */
/* Fix: hr needs transform-origin: left for scaleX to work from left edge */
.gold-rule {
  transform-origin: left center;
  animation: ruleExpand 0.7s var(--ease-premium) 0.2s both;
}

@keyframes ruleExpand {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.5; }
}

/* ── Eyebrow gold in page-hero ── */
.page-hero .eyebrow-gold::after {
  display: none;
}

/* ─── REDUCED MOTION OVERRIDES for section 26 ─── */
@media (prefers-reduced-motion: reduce) {
  .culture-strip .culture-item:hover .culture-word,
  .lt-entry:hover .lt-dot,
  #cms-openings-list.is-loaded .glass-card,
  .gold-rule {
    animation: none !important;
    transition: none !important;
  }
  .tilt-card:hover {
    transform: none !important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   27. SIGNATURE INSTITUTIONAL VISUAL PRIMITIVES
   - The Continuum Stream
   - Campus Memory Map Foundations
   - Archival Cards & Founder's Journey Nodes
   - Hero Perspective Stage & Section Seams
──────────────────────────────────────────────────────────────────────── */

/* ── 1. The Continuum Stream ── */
.continuum-stream {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
  margin: var(--space-12) 0;
  perspective: 1000px;
}

.continuum-card {
  position: relative;
  background: rgba(15, 25, 50, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition:
    transform 0.45s var(--ease-premium),
    border-color 0.35s ease,
    box-shadow 0.45s var(--ease-smooth);
  overflow: hidden;
}

.continuum-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.3;
  transition: opacity 0.4s;
}

.continuum-card:hover {
  transform: translateY(-8px) translateZ(12px);
  border-color: rgba(201, 162, 39, 0.6);
  box-shadow: var(--shadow-depth-4), 0 0 30px rgba(201, 162, 39, 0.18);
}

.continuum-card:hover::before {
  opacity: 1;
}

.continuum-epoch {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.continuum-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--color-white);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.continuum-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

/* ── 2. Campus Memory Map Foundations ── */
.memory-map-stage {
  position: relative;
  background: radial-gradient(ellipse at center, rgba(15, 61, 145, 0.12) 0%, rgba(17, 24, 39, 0.95) 100%);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: var(--radius-3xl);
  padding: var(--space-8);
  overflow: hidden;
  box-shadow: var(--shadow-depth-4);
}

.memory-spot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.memory-spot-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform 0.4s var(--ease-premium),
    border-color 0.3s,
    box-shadow 0.4s;
}

.memory-spot-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: var(--shadow-depth-3), 0 0 24px rgba(201, 162, 39, 0.15);
}

.memory-spot-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.memory-spot-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-premium);
}

.memory-spot-card:hover .memory-spot-media img {
  transform: scale(1.06);
}

.memory-spot-tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--color-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.memory-spot-content {
  padding: var(--space-5);
}

.memory-spot-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.memory-spot-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* ── 3. Archival Photo Cards ── */
.archival-card {
  position: relative;
  padding: var(--space-3);
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-depth-3);
  border: 1px solid rgba(201, 162, 39, 0.2);
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s var(--ease-smooth);
}

.archival-card:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: var(--shadow-depth-4), 0 0 20px rgba(201, 162, 39, 0.15);
}

.archival-corner-tl,
.archival-corner-br {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--color-gold);
  pointer-events: none;
}

.archival-corner-tl {
  top: 6px; left: 6px;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
}

.archival-corner-br {
  bottom: 6px; right: 6px;
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
}

/* ── 4. Founder's Journey Node ── */
.founder-journey-node {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(201, 162, 39, 0.12);
}

.founder-journey-node:last-child {
  border-bottom: none;
}

.founder-node-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold);
  text-align: right;
  line-height: 1.2;
}

.founder-node-body h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.founder-node-body p {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  line-height: 1.7;
}

/* ── 5. Hero Perspective Stage & Ambient Watermark ── */
.hero-perspective-stage {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.hero-watermark-crest {
  position: absolute;
  right: -5%;
  bottom: -10%;
  width: min(500px, 50vw);
  height: auto;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  animation: crestBreath 8s ease-in-out infinite;
}

/* ── 6. Editorial Section Seams ── */
.seam-gold {
  position: relative;
}

.seam-gold::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.4), transparent);
  pointer-events: none;
}

.section-divider-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-12) auto;
  max-width: 400px;
}

.section-divider-crest::before,
.section-divider-crest::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.35));
}

.section-divider-crest::after {
  background: linear-gradient(270deg, transparent, rgba(201, 162, 39, 0.35));
}

.section-divider-crest svg {
  color: var(--color-gold);
  opacity: 0.7;
}

/* ─── REDUCED MOTION OVERRIDES for section 27 ─── */
@media (prefers-reduced-motion: reduce) {
  .continuum-card:hover,
  .memory-spot-card:hover,
  .archival-card:hover {
    transform: none !important;
  }
  .hero-watermark-crest {
    animation: none !important;
  }
}



/* Small gold presence dot - signals "chat" without implying live availability. */
.mps-float-chat .mps-chat-dot {
  position: absolute;
  top: 15px; right: 15px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C9A227;
  box-shadow: 0 0 0 2px rgba(15,23,42,0.9);
}
@media (max-width: 480px) {
  .mps-float-chat .mps-chat-dot { top: 12px; right: 12px; width: 7px; height: 7px; }
}

/* ─── CHAT NUDGE ─────────────────────────────────────────────────────────────
   A short prompt beside the chat button. Deliberately NOT always-on: it appears
   after the visitor has actually scrolled a meaningful distance, holds briefly,
   then fades. Absolutely positioned against the same corner as the button, so
   it can never shift page layout. */
.mps-chat-nudge {
  position: fixed;
  right: 6.25rem;
  bottom: 2.4rem;
  z-index: 195;
  max-width: 14rem;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--color-white);
  background: rgba(12,22,48,0.95);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 14px 14px 2px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.34);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity .38s var(--ease-premium), transform .38s var(--ease-premium);
  pointer-events: none;      /* never intercepts a click meant for the page */
  white-space: nowrap;
}
.mps-chat-nudge[hidden] { display: none; }
.mps-chat-nudge.is-visible { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 768px) {
  .mps-chat-nudge { right: 5.75rem; bottom: 2rem; font-size: 0.78rem; max-width: 11rem; }
}
@media (max-width: 480px) {
  /* Sits above the button rather than beside it, so it cannot run under the
     viewport edge or cover page controls on a narrow screen. */
  .mps-chat-nudge {
    right: 1.25rem;
    bottom: 5.4rem;
    border-radius: 14px 14px 14px 2px;
    max-width: calc(100vw - 2.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mps-chat-nudge { transition: none; transform: none; }
  .mps-chat-nudge.is-visible { transform: none; }
}
/* ─── HOMEPAGE SEARCH ────────────────────────────────────────────────────────
   An ordinary field sitting in the hero under the call-to-action buttons, NOT a
   floating icon over the page — a second floating control next to the chat
   button read as clutter and duplicated it. The results panel is absolutely
   positioned against this wrapper, so opening it never pushes the hero around. */
.hero-search { position: relative; margin-top: var(--space-6); max-width: 480px; }
.hs-field { position: relative; display: flex; align-items: center; }
.hs-icon { position: absolute; left: 16px; color: var(--color-gold); pointer-events: none; }
.hero-search input {
  width: 100%;
  padding: 0.85rem 1.1rem 0.85rem 2.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-white);
  background: rgba(12,22,48,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  transition: border-color .25s var(--ease-premium), background .25s var(--ease-premium);
}
.hero-search input::placeholder { color: rgba(255,255,255,0.55); }
.hero-search input:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(12,22,48,0.78);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.2);
}
.hs-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0;
  z-index: 60;
  max-height: min(52vh, 380px);
  overflow-y: auto;
  background: rgba(12,22,48,0.97);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.42);
  text-align: left;
}
.hs-panel[hidden] { display: none; }
.hs-panel .ss-list { list-style: none; margin: 0; padding: 0.4rem; }
.hs-panel .ss-list a { display: block; padding: 0.6rem 0.75rem; border-radius: 9px; text-decoration: none; }
.hs-panel .ss-list a:hover,
.hs-panel .ss-list a:focus-visible,
.hs-panel .ss-list a.is-active { background: rgba(201,162,39,0.14); outline: none; }
.hs-panel .ss-t { display: block; font-family: var(--font-display); font-size: 0.95rem; color: var(--color-white); }
.hs-panel .ss-d { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.45; color: rgba(255,255,255,0.62); }
.hs-panel .ss-empty { margin: 0; padding: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.66); }

@media (max-width: 768px) { .hero-search { max-width: 100%; } }
@media (max-width: 480px) {
  .hero-search input { font-size: 16px; }  /* 16px stops iOS zooming the page on focus */
}
@media (prefers-reduced-motion: reduce) { .hero-search input { transition: none; } }