/* ==========================================================================
   Quantum Public School — World-Class Academic Portal Design System
   Elite Global Institution Aesthetic (Stanford/Harvard/Oxford/Exeter calibre)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Sora:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Royal Academic Palette */
  --qp-navy-950: #061520;
  --qp-navy-900: #0A2233;
  --qp-navy-800: #0F324A;
  --qp-navy-700: #164666;
  --qp-navy: #1A4A63;
  --qp-navy-500: #2C6B8D;
  --qp-navy-100: #DCE9F0;
  --qp-navy-50: #EFF6FA;

  /* Champagne Gold & Luxury Accents */
  --qp-gold-500: #C49138;
  --qp-gold: #D4A045;
  --qp-gold-300: #E8CB8C;
  --qp-gold-100: #FAF1DD;
  --qp-gold-50: #FCF8EE;

  /* Prestige Crimson */
  --qp-crimson: #C22026;
  --qp-crimson-dark: #9B161B;
  --qp-crimson-light: #FDE8E9;

  /* Emerald Academic Excellence */
  --qp-emerald: #10B981;
  --qp-emerald-dark: #059669;
  --qp-emerald-light: #ECFDF5;

  /* Editorial Neutrals */
  --qp-cream: #FAF7F2;
  --qp-cream-warm: #F4EFE6;
  --qp-cream-deep: #EDE5D8;
  --qp-ink: #0D1B22;
  --qp-slate: #546874;
  --qp-slate-light: #8CA0AC;
  --qp-white: #FFFFFF;

  /* Shadows & Elevations */
  --shadow-sm: 0 2px 8px rgba(10, 34, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 34, 51, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 34, 51, 0.12);
  --shadow-lift: 0 24px 60px -12px rgba(10, 34, 51, 0.18);
  --shadow-gold: 0 12px 36px rgba(196, 145, 56, 0.22);
  --shadow-crimson: 0 12px 32px rgba(194, 32, 38, 0.25);
}

/* --------------------------------------------------------------------------
   Reset & Base Standards
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--qp-ink);
  background-color: var(--qp-cream);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection {
  background: var(--qp-gold-300);
  color: var(--qp-navy-950);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--qp-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--qp-navy-700);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--qp-gold);
}

/* Global Subtle Noise Overlay */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Reading Progress Indicator */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--qp-crimson), var(--qp-gold), var(--qp-emerald));
  z-index: 1000;
  transition: width 0.08s linear;
  box-shadow: 0 1px 8px rgba(212, 160, 69, 0.4);
}

/* --------------------------------------------------------------------------
   Typography & Editorial Elements
   -------------------------------------------------------------------------- */
.font-display {
  font-family: 'Sora', system-ui, sans-serif;
}
.font-serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.font-mono {
  font-family: 'IBM Plex Mono', monospace;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qp-gold-500);
}
.kicker::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
  border-radius: 1px;
}
.kicker.on-dark {
  color: var(--qp-gold-300);
}
.kicker-num {
  color: var(--qp-crimson);
  font-weight: 700;
}
.on-dark .kicker-num {
  color: var(--qp-gold-300);
}

.serif-italic-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Decorative Swash Underline */
.qp-swash {
  position: relative;
  display: inline-block;
}
.qp-swash__line {
  position: absolute;
  left: 0;
  right: -0.08em;
  bottom: 0.04em;
  width: 100%;
  height: 0.3em;
  color: var(--qp-gold);
  overflow: visible;
  pointer-events: none;
}
.qp-swash__line path {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.animated-word.active .qp-swash__line path,
.qp-swash.active .qp-swash__line path {
  stroke-dashoffset: 0;
}

/* --------------------------------------------------------------------------
   Hero Typography
   -------------------------------------------------------------------------- */
/* The old clamp(38px, 4.8vw, 64px) only became fluid above 792px, so every
   phone got a flat 38px. This one runs 33px at 360 -> 64px at 1440. */
.hero-title {
  font-size: clamp(33px, 1.375rem + 2.96vw, 64px);
  letter-spacing: -0.025em;
  text-wrap: balance;       /* stops "Board excellence / meets" splitting lopsided */
}
@media (min-width: 768px) {
  .hero-title { letter-spacing: -0.035em; }
}

.hero-desc,
.hero-social-proof p {
  text-wrap: pretty;        /* no single word stranded on the last line */
}
/* "Meet team ->" was breaking before the arrow, leaving it alone on its own line. */
.hero-social-proof a {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Animated Words Rotator
   -------------------------------------------------------------------------- */
.animated-words-wrapper {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  overflow: hidden;
  height: 1.48em;
  line-height: 1.16em;
  padding-bottom: 0.32em;
  padding-right: 0.15em;
  padding-left: 0.04em;
  margin-bottom: -0.1em;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: width;
}

.animated-words-container {
  display: inline-flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}

.animated-word {
  display: inline-flex;
  align-items: flex-start;
  font-size: 1.12em;
  height: 1.3214em;         /* 1.48 / 1.12 - keeps the slot at 1.48 h1-em */
  line-height: 1.0357em;    /* 1.16 / 1.12 */
  white-space: nowrap;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(18px);
  padding-bottom: 0.2857em; /* 0.32 / 1.12 */
  padding-right: 0.134em;   /* 0.15 / 1.12 */
  padding-left: 0.0357em;   /* 0.04 / 1.12 */
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.animated-word.active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Physical Gliding Multi-Card Hero Orbit (Top -> Center -> Bottom)
   -------------------------------------------------------------------------- */
#hero-orbit-stage {
  position: relative;
  perspective: 1200px;
}

.orbit-card {
  position: absolute;
  inset: 0;
  border-radius: 2.2rem;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: 0 20px 45px -15px rgba(10, 34, 51, 0.28);
  background-color: var(--qp-navy-950);
  transition: transform 0.7s cubic-bezier(0.34, 1.25, 0.64, 1),
              opacity 0.6s ease,
              filter 0.6s ease,
              box-shadow 0.6s ease,
              z-index 0s 0.2s;
  /* ponytail: no persistent will-change - the compositor promotes during the transition anyway */
  cursor: pointer;
}

/* 1. Center Position: Large, 100% Sharp, Active Front */
.orbit-card.is-center {
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  opacity: 1;
  filter: blur(0);
  z-index: 25;
  pointer-events: auto;
}
.orbit-card.is-center .card-center-ui {
  opacity: 1;
  transition: opacity 0.4s ease 0.3s;
}
.orbit-card.is-center .card-bottom-ui {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 2. Top-Left Position: Small, Faded, Blurred Background */
.orbit-card.is-top {
  transform: translate3d(-34%, -18%, 0) scale(0.38) rotate(-4deg);
  transform-origin: top left;
  opacity: 0.62;
  filter: blur(1.8px);
  z-index: 10;
  pointer-events: auto;
}
.orbit-card.is-top .card-center-ui,
.orbit-card.is-top .card-bottom-ui {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 3. Bottom-Right Position: Small, Faded Overlay */
.orbit-card.is-bottom {
  transform: translate3d(32%, 22%, 0) scale(0.42) rotate(3deg);
  transform-origin: bottom right;
  opacity: 0.82;
  filter: blur(0.7px);
  z-index: 35;
  pointer-events: auto;
}
.orbit-card.is-bottom .card-center-ui {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.orbit-card.is-bottom .card-bottom-ui {
  opacity: 1;
  transition: opacity 0.4s ease 0.3s;
}

/* 4. Hidden Queue Position: Off-stage smooth reset */
.orbit-card.is-hidden {
  transform: translate3d(-45%, -28%, 0) scale(0.22) rotate(-8deg);
  opacity: 0;
  filter: blur(4px);
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Floating Island Navbar & Dropdowns
   -------------------------------------------------------------------------- */
#nav {
  /* The floating navbar used a hardcoded `top-12` (48px). At 390px the
     credentials bar above it wraps to two rows and grows past 48px, so the
     navbar sat on top of the UDISE and DARPAN codes and cut them in half.
     initNavOffset() in main.js measures the bar and sets --qp-topbar-h; the
     48px fallback is what the utility class used to hardcode, so a page with
     JS disabled behaves exactly as it did before. The #id beats Tailwind's
     .top-12 on specificity. */
  top: calc(var(--qp-topbar-h, 48px) + 8px);
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(10, 34, 51, 0.08);
  box-shadow: 0 10px 32px rgba(10, 34, 51, 0.06);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#nav.scrolled,
#nav.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(212, 160, 69, 0.3);
  box-shadow: 0 16px 48px rgba(6, 21, 32, 0.12);
  top: 12px;
}
.nav-link {
  position: relative;
  color: var(--qp-navy-900);
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
}
#nav a,
#nav button {
  white-space: nowrap !important;
}
.nav-link:hover {
  color: var(--qp-crimson);
}
.nav-link.active {
  color: var(--qp-navy-950);
  font-weight: 700;
}
.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2.5px;
  border-radius: 9999px;
  background: var(--qp-gold);
}

.nav-dropdown-menu {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  opacity: 1 !important;
  isolation: isolate;
  border: 1px solid rgba(10, 34, 51, 0.12);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(10, 34, 51, 0.22), 0 6px 20px rgba(10, 34, 51, 0.08);
  padding: 16px;
  position: relative;
  z-index: 99999 !important;
  transform-origin: top center;
  animation: navDropdownFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   Section 05: Academic Routine Interactive System
   -------------------------------------------------------------------------- */
.routine-tab-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(10, 34, 51, 0.1);
  color: var(--qp-navy-900);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.routine-tab-btn:hover {
  background: #FFFFFF;
  border-color: var(--qp-gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(10, 34, 51, 0.08);
}

.routine-tab-btn.active {
  background: var(--qp-navy-950) !important;
  border-color: var(--qp-gold) !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 35px rgba(10, 34, 51, 0.25);
  transform: translateY(-2px);
}

.routine-tab-btn.active .tab-indicator {
  background: var(--qp-gold) !important;
  box-shadow: 0 0 12px var(--qp-gold);
}

.routine-tab-btn.active .tab-subtext {
  color: rgba(255, 255, 255, 0.7) !important;
}

.routine-tab-btn.active .tab-num {
  color: var(--qp-gold) !important;
}

.routine-stage-panel {
  animation: routineFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes routineFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes navDropdownFade {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.tree-node-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  transition: all 0.2s ease;
  position: relative;
}
.tree-node-link:hover {
  background: rgba(10, 34, 51, 0.04);
  transform: translateX(3px);
}
.tree-node-link .tree-node-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.tree-node-link:hover .tree-node-icon {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Glassmorphism & Surface Cards
   -------------------------------------------------------------------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(10, 34, 51, 0.08);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(196, 145, 56, 0.35);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.faculty-card, .teacher-card-qps {
  background: #ffffff;
  border-radius: 1.75rem;
  border: 1px solid rgba(14, 46, 64, 0.09);
  box-shadow: 0 6px 24px rgba(14, 46, 64, 0.05);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.teacher-card-qps:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(14, 46, 64, 0.12);
  border-color: rgba(26, 74, 99, 0.25);
}

.teacher-photo-container {
  position: relative;
  background: #EEF5F8;
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher-photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.teacher-card-qps:hover .teacher-photo-container img {
  transform: scale(1.06);
}

.teacher-check-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0E2E40;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(14, 46, 64, 0.25);
  z-index: 10;
}

.teacher-dept-banner {
  position: absolute;
  bottom: 8px;
  left: -4px;
  background: #0E2E40;
  color: #ffffff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 14px 6px 16px;
  transform: rotate(-6.5deg);
  transform-origin: bottom left;
  box-shadow: 0 4px 12px rgba(14, 46, 64, 0.25);
  z-index: 10;
}

.teacher-exp-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 13px;
  border-radius: 9999px;
  background: #FCF8EE;
  border: 1px solid rgba(212, 160, 69, 0.4);
  color: #B27B22;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.02em;
}

.glass-card-dark {
  background: rgba(10, 34, 51, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.glass-card-dark:hover {
  border-color: rgba(232, 203, 140, 0.35);
  transform: translateY(-3px);
}

.glass-card-gold {
  background: linear-gradient(135deg, rgba(250, 241, 221, 0.75), rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(196, 145, 56, 0.3);
  box-shadow: var(--shadow-gold);
}

/* Ambient Backlight Glow */
.ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
}
.ambient-glow-navy {
  background: radial-gradient(circle, var(--qp-navy-500), transparent 70%);
}
.ambient-glow-gold {
  background: radial-gradient(circle, var(--qp-gold), transparent 70%);
}
.ambient-glow-crimson {
  background: radial-gradient(circle, var(--qp-crimson), transparent 70%);
}

/* --------------------------------------------------------------------------
   Buttons & Interactive Elements
   -------------------------------------------------------------------------- */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, background 0.2s ease;
  will-change: transform;
}
.btn-magnetic:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(10, 34, 51, 0.18);
}
.btn-magnetic:active {
  transform: translateY(0) scale(0.98);
}

.btn-slide {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-slide > .btn-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-slide:hover > .btn-fill {
  transform: translateY(0);
}

/* Link Hover Underline */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Hero Photo Plate & Rotating Seal
   -------------------------------------------------------------------------- */
.qp-paper {
  background:
    radial-gradient(115% 85% at 94% -10%, rgba(22, 70, 102, 0.12) 0%, transparent 60%),
    radial-gradient(75% 60% at 5% 105%, rgba(196, 145, 56, 0.12) 0%, transparent 62%),
    var(--qp-cream);
}
.qp-rules {
  background-image: linear-gradient(90deg, rgba(10, 34, 51, 0.06) 0 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(#000 0 55%, transparent 92%);
  mask-image: linear-gradient(#000 0 55%, transparent 92%);
}

.qp-plate {
  transform: rotate(1.2deg);
  transition: transform 0.4s ease;
}
.qp-plate:hover {
  transform: rotate(0deg);
}
.qp-plate__frame {
  position: absolute;
  inset: -14px -14px 22px 18px;
  border: 1.5px solid rgba(196, 145, 56, 0.55);
  border-radius: 2.5rem;
  transform: rotate(-3.4deg);
  pointer-events: none;
}
.qp-plate__img img {
  transition: opacity 0.35s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Rotating Crest Seal */
.qp-seal {
  position: absolute;
  left: -32px;
  bottom: -28px;
  width: 140px;
  height: 140px;
  transform: rotate(-1.2deg);
  z-index: 25;
}
.qp-seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--qp-cream);
  box-shadow: 0 16px 36px rgba(10, 34, 51, 0.24), inset 0 0 0 1.5px rgba(196, 145, 56, 0.5);
}
.qp-seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: qp-spin 24s linear infinite;
}
.qp-seal__ring text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #8A5F1C;
  text-transform: uppercase;
}
.qp-seal__crest {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@keyframes qp-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 1023px) {
  .qp-seal {
    width: 108px;
    height: 108px;
    left: 4px;
    bottom: -16px;
  }
  .qp-seal__ring text {
    font-size: 13.5px;
  }
}

/* Spec bar */
.qp-spec {
  position: relative;
  padding: 24px 24px 8px 0;
  border-right: 1px solid rgba(10, 34, 51, 0.12);
  transition: background 0.2s ease;
}
.qp-spec:last-child {
  border-right: 0;
}
.qp-spec:not(:first-child) {
  padding-left: 24px;
}
@media (max-width: 767px) {
  .qp-spec:nth-child(2n) {
    border-right: 0;
  }
  .qp-spec:nth-child(n+3) {
    border-top: 1px solid rgba(10, 34, 51, 0.12);
  }
}
.qp-spec__i {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--qp-gold-500);
  display: block;
  margin-bottom: 8px;
}
.qp-spec__k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qp-slate);
}
.qp-spec__v {
  margin-top: 6px;
  font-weight: 700;
  font-size: 16px;
  color: var(--qp-navy-950);
}

/* --------------------------------------------------------------------------
   Marquee & Live Notice Ticker Band
   -------------------------------------------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  position: relative;
}
.marquee:hover .marquee__track,
.marquee__track:hover,
section[aria-label*="Notice"]:hover .marquee__track {
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
}
.marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  animation: qp-marq 60s linear infinite;
  -webkit-animation: qp-marq 60s linear infinite;
  will-change: transform;
}
@keyframes qp-marq {
  to {
    transform: translateX(-50%);
  }
}
@-webkit-keyframes qp-marq {
  to {
    -webkit-transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Live Scholarship & Fee Waiver Calculator
   -------------------------------------------------------------------------- */
.scholarship-slider-container {
  position: relative;
  padding: 10px 0;
}

/* Range input styling */
input[type=range].calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #10B981 0%, #C49138 60%, #C22026 100%);
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
input[type=range].calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--qp-navy-900);
  box-shadow: 0 4px 12px rgba(10, 34, 51, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
input[type=range].calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  border-color: var(--qp-gold-500);
}
input[type=range].calc-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--qp-navy-900);
  box-shadow: 0 4px 12px rgba(10, 34, 51, 0.35);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Integrated Model Comparison Matrix
   -------------------------------------------------------------------------- */
.compare-card-quantum {
  background: linear-gradient(135deg, rgba(10, 34, 51, 0.95), rgba(6, 21, 32, 0.98));
  border: 1.5px solid rgba(232, 203, 140, 0.4);
  box-shadow: 0 20px 50px rgba(6, 21, 32, 0.35);
}
.compare-card-traditional {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(10, 34, 51, 0.12);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Daily Routine & Scholar Timeline
   -------------------------------------------------------------------------- */
.routine-step {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.routine-step:hover {
  transform: translateY(-3px);
}
.routine-step::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 60px;
  bottom: -20px;
  width: 2px;
  background: rgba(10, 34, 51, 0.12);
  z-index: 0;
}
.routine-step:last-child::before {
  display: none;
}

/* --------------------------------------------------------------------------
   Three Live Artifact Cards (Why Quantum 3-Column Architecture)
   -------------------------------------------------------------------------- */
.artifact-card-modern {
  background: linear-gradient(180deg, rgba(8, 28, 42, 0.8) 0%, rgba(4, 16, 24, 0.95) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2.25rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.artifact-card-modern:hover {
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
  transform: translateY(-4px);
}
.artifact-card-modern.card-theme-gold:hover {
  border-color: rgba(212, 160, 69, 0.45);
}
.artifact-card-modern.card-theme-green:hover {
  border-color: rgba(16, 185, 129, 0.45);
}
.artifact-card-modern.card-theme-red:hover {
  border-color: rgba(239, 68, 68, 0.45);
}

.shuffle-stack {
  position: relative;
  height: 150px;
}
.shuffle-card {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  padding: 1.25rem;
  cursor: pointer;
  user-select: none;
  background: #0B2232;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, box-shadow 0.4s ease;
}

.telemetry-hud-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  padding: 0.6rem 0.5rem;
  text-align: center;
  transition: all 0.25s ease;
}
.telemetry-hud-tile:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(16, 185, 129, 0.3);
}

.tt-day-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.tt-day-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border-color: rgba(220, 38, 38, 0.5);
}
.tt-day-btn.active {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  border-color: #EF4444;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}

.tt-schedule-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  animation: ttRowIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tt-schedule-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(212, 160, 69, 0.3);
}
@keyframes ttRowIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tt-save {
  transition: all 0.2s ease;
}
.tt-save:active {
  transform: scale(0.94);
}

/* --------------------------------------------------------------------------
   Comparison Matrix 2-Card Dual Blueprint & Scroll Animations
   -------------------------------------------------------------------------- */
.compare-deck-container {
  perspective: 1600px;
}

.compare-card-traditional {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF6EE 100%);
  border: 1.5px solid rgba(194, 32, 38, 0.22);
  box-shadow: 0 15px 35px -10px rgba(13, 27, 34, 0.08);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.compare-card-traditional:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -15px rgba(194, 32, 38, 0.15);
  border-color: rgba(194, 32, 38, 0.45);
}

.compare-card-quantum {
  background: radial-gradient(circle at 85% 15%, rgba(212, 160, 23, 0.22), transparent 50%),
              radial-gradient(circle at 15% 85%, rgba(16, 185, 129, 0.12), transparent 45%),
              linear-gradient(135deg, #0a2540 0%, #061520 60%, #0c2b48 100%);
  border: 1.5px solid rgba(212, 160, 23, 0.45);
  box-shadow: 0 25px 60px -15px rgba(6, 21, 32, 0.5), 0 0 35px rgba(212, 160, 23, 0.12) inset;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.compare-card-quantum:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 35px 70px -20px rgba(6, 21, 32, 0.7), 0 0 45px rgba(212, 160, 23, 0.2) inset;
  border-color: rgba(212, 160, 23, 0.7);
}

/* --------------------------------------------------------------------------
   Stacking Journey Cards (Modern & Professional)
   -------------------------------------------------------------------------- */
.journey-card {
  position: sticky;
  will-change: transform, filter;
}

.journey-inner {
  will-change: transform, filter;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.3s ease;
}

/* Card Themes */
.journey-theme-blue {
  background: radial-gradient(circle at 85% 20%, rgba(212, 160, 23, 0.16), transparent 45%),
              linear-gradient(135deg, #0a2540 0%, #061520 60%, #0d2e4d 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(212, 160, 23, 0.45);
  box-shadow: 0 25px 60px -15px rgba(6, 21, 32, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.journey-theme-light {
  background: radial-gradient(circle at 85% 20%, rgba(212, 160, 23, 0.12), transparent 45%),
              linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #edf3f7 100%);
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-top: 1px solid rgba(10, 37, 64, 0.25);
  box-shadow: 0 25px 60px -15px rgba(10, 37, 64, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.journey-theme-dark {
  background: radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.16), transparent 50%),
              linear-gradient(135deg, #05131e 0%, #02090e 65%, #082438 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 30px 65px -15px rgba(2, 9, 14, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Modern Icon Orb Enclosure */
.journey-icon-orb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.journey-inner:hover .journey-icon-orb {
  transform: translateY(-4px) scale(1.03);
}

.journey-icon-box {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.35s ease;
}

.journey-icon-box-blue {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 0 25px rgba(212, 160, 23, 0.15) inset;
}

.journey-icon-box-light {
  background: linear-gradient(135deg, #ffffff, #f0f4f8);
  border: 1px solid rgba(10, 37, 64, 0.12);
  box-shadow: 0 15px 35px -5px rgba(10, 37, 64, 0.08), 0 0 20px rgba(212, 160, 23, 0.08) inset;
}

.journey-icon-box-dark {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.45), 0 0 25px rgba(16, 185, 129, 0.18) inset;
}

.journey-icon-chip {
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Educational Artifacts Tabs (Scorecard & Timetable)
   -------------------------------------------------------------------------- */
[data-score-tab] {
  transition: all 0.2s ease;
}
[data-score-tab].active {
  background: var(--qp-gold);
  color: var(--qp-navy-950);
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.3);
}
[data-tt-day] {
  transition: all 0.2s ease;
}
[data-tt-day].active {
  background: #DC2626;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.gallery-tab {
  transition: all 0.25s ease;
}
.gallery-tab.active {
  background: var(--qp-navy-950);
  color: #FFFFFF;
  border-color: var(--qp-navy-950);
  box-shadow: 0 4px 16px rgba(10, 34, 51, 0.25);
}
.gallery-item {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item.hidden-item {
  display: none !important;
  opacity: 0;
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   FAQ Accordion
   -------------------------------------------------------------------------- */
.faq-item {
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item.active {
  border-color: var(--qp-gold);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(10, 34, 51, 0.08);
}
.faq-trigger i {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.active .faq-trigger i {
  transform: rotate(180deg);
}
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  opacity: 0;
}
.faq-content > * {
  min-height: 0;
  overflow: hidden;
}
.faq-item.active .faq-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Floating Action Dock
   -------------------------------------------------------------------------- */
.floating-action-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(6, 21, 32, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 8px 12px 8px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(232, 203, 140, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.floating-action-bar:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border-color: var(--qp-gold-300);
}

/* --------------------------------------------------------------------------
   Modern Clean FAQ Accordion System
   -------------------------------------------------------------------------- */
.faq-filter-btn {
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  user-select: none;
}
.faq-filter-btn.active {
  background-color: #061520 !important;
  color: #ffffff !important;
  border-color: #061520 !important;
  box-shadow: 0 6px 18px rgba(6, 21, 32, 0.22);
}

.faq-card {
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid rgba(13, 27, 34, 0.1);
  background: #ffffff;
  border-left: 4px solid transparent;
}
.faq-card:hover {
  border-color: rgba(212, 160, 23, 0.45);
  border-left-color: rgba(212, 160, 23, 0.6);
  box-shadow: 0 12px 28px -6px rgba(10, 37, 64, 0.08);
  transform: translateY(-2px);
}
.faq-card.is-open {
  border-color: rgba(212, 160, 23, 0.5);
  border-left-color: #D4A017;
  background: #ffffff;
  box-shadow: 0 16px 36px -8px rgba(10, 37, 64, 0.12);
}

.faq-header {
  user-select: none;
  cursor: pointer;
}

.faq-icon-pill {
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), background-color 0.25s ease, color 0.25s ease;
}
.faq-card.is-open .faq-icon-pill {
  transform: rotate(180deg);
  background-color: #061520;
  color: #E2B024;
}

/* Bulletproof Expandable FAQ Body */
.faq-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.faq-card.is-open .faq-body {
  max-height: 600px;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Status Dot & Media Zoom (replaces animate-pulse / group-hover:scale-105)
   -------------------------------------------------------------------------- */
/* A status dot states a fact; it does not loop. Settle in once, then hold. */
@keyframes qp-dot-settle {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.qp-dot {
  animation: qp-dot-settle 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Restrained zoom for genuinely clickable media. Smaller move reads as more expensive. */
.qp-media-zoom {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.group:hover .qp-media-zoom,
.group:focus-visible .qp-media-zoom,
.group:focus-within .qp-media-zoom {
  transform: scale(1.03);
}

/* Native <details>: ease the open instead of snapping. Progressive - no-op where unsupported. */
@supports selector(::details-content) {
  details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.2s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.2s allow-discrete;
    interpolate-size: allow-keywords;
  }
  details[open]::details-content {
    block-size: auto;
  }
}

/* --------------------------------------------------------------------------
   Reveal & Reduced Motion Fallback
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 1;
  transform: none;
}
.reveal-done [data-reveal], .no-anim [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee__track {
    animation: none;
  }
  .type-cursor, .live-dot::after {
    animation: none;
  }
  .qp-seal__ring {
    animation: none;
  }
  .qp-swash__line path {
    animation: none;
    stroke-dashoffset: 0;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Tailwind utility keyframes have no reduce guard of their own - kill them here. */
  .animate-pulse, .animate-ping, .animate-bounce, .animate-spin {
    animation: none !important;
  }
  .qp-dot {
    animation: none !important;
  }
  [class*="group-hover:scale"] {
    transform: none !important;
  }
  .group:hover .qp-media-zoom,
  .group:focus-visible .qp-media-zoom,
  .group:focus-within .qp-media-zoom {
    transform: none;
  }
  details::details-content, details[open]::details-content {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Institutional Legal Pages Scope (.klc-legal)
   -------------------------------------------------------------------------- */
.klc-legal {
  color: var(--qp-ink);
  line-height: 1.75;
}
.klc-legal h1,
.klc-legal h2,
.klc-legal h3 {
  color: var(--qp-navy-950);
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.klc-legal h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid rgba(10, 34, 51, 0.08);
  padding-bottom: 0.5rem;
}
.klc-legal h3 {
  font-size: 1.2rem;
}
.klc-legal p {
  margin-bottom: 1.25rem;
  color: var(--qp-slate);
}
.klc-legal ul,
.klc-legal ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
  color: var(--qp-slate);
}
.klc-legal li {
  margin-bottom: 0.5rem;
}
.klc-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.klc-legal th,
.klc-legal td {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(10, 34, 51, 0.1);
  text-align: left;
}
.klc-legal th {
  background-color: var(--qp-cream-deep);
  color: var(--qp-navy-950);
  font-weight: 700;
}
.klc-legal tr:nth-child(even) {
  background-color: rgba(250, 247, 242, 0.5);
}

/* --------------------------------------------------------------------------
   Hero — Layered Stage Composition
   -------------------------------------------------------------------------- */
.qp-stage__frame {
  position: absolute;
  inset: -18px -18px 26px 18px;
  border: 1.5px solid rgba(196, 145, 56, 0.5);
  border-radius: 3rem;
  pointer-events: none;
}
.qp-stage__img img {
  transition: opacity 0.35s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.qp-stage:hover .qp-stage__img img {
  transform: scale(1.03);
}
.qp-float {
  animation: qp-float 6.5s ease-in-out infinite;
}
.qp-float--slow {
  animation-duration: 9s;
  animation-delay: -2.5s;
}
@keyframes qp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.qp-dots {
  background-image: radial-gradient(rgba(10, 34, 51, 0.18) 1.4px, transparent 1.4px);
  background-size: 14px 14px;
}
.hero-photo-thumb {
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hero-photo-thumb:hover { transform: translateY(-2px); }
.hero-photo-thumb.active { border-color: #D4A045; }
@media (prefers-reduced-motion: reduce) {
  .qp-float { animation: none; }
  .qp-stage:hover .qp-stage__img img { transform: none; }
}
.qp-seal--right {
  left: auto;
  right: -30px;
  bottom: -30px;
}
@media (max-width: 1023px) {
  .qp-seal--right {
    left: auto;
    right: 2px;
    bottom: -18px;
  }
}

/* --------------------------------------------------------------------------
   Hero — Arch Gateway Composition
   -------------------------------------------------------------------------- */
.qp-arch {
  border-radius: 999px 999px 30px 30px;
}
.qp-arch-ring {
  position: absolute;
  inset: -16px;
  border: 1.5px solid rgba(196, 145, 56, 0.55);
  border-radius: 999px 999px 46px 46px;
  pointer-events: none;
}
.qp-arch-ring--dashed {
  inset: -32px;
  border: 1.5px dashed rgba(26, 74, 99, 0.20);
  border-radius: 999px 999px 62px 62px;
}
.qp-watermark {
  position: absolute;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(26, 74, 99, 0.09);
  user-select: none;
  pointer-events: none;
}
.qp-rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.34em;
}

/* --------------------------------------------------------------------------
   Apple-Style Horizontal "Pin & Slide" Panoramic Showcase
   -------------------------------------------------------------------------- */
.horizontal-showcase-section {
  position: relative;
  background-color: #061520;
  box-sizing: border-box;
}

.horizontal-showcase-pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.horizontal-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.horizontal-track-wrapper:active {
  cursor: grabbing;
}

.horizontal-track {
  display: flex;
  width: max-content;
  will-change: transform;
  align-items: stretch;
}

.panoramic-card {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  transform: translateZ(0);
  background: #0A2233;
}

.panoramic-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7);
  border-color: rgba(212, 160, 23, 0.45);
}

.panoramic-card-glass {
  background: linear-gradient(180deg, rgba(6, 21, 32, 0) 0%, rgba(6, 21, 32, 0.82) 35%, rgba(6, 21, 32, 0.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}