/* ==========================================================================
   DURGA PUBLIC SCHOOL, PILANI, RAJASTHAN
   MASTER EDITORIAL FRAMES STYLESHEET
   
   Directly derived from Client Reference Mockups:
   1. Veluno Floating Hero Canvas (Reference Image 1):
      - Ethereal ambient aura mesh canvas
      - Minimalist brand masthead with circular index pill ("01") + Luxury Serif Title
      - Elevated floating central card with 32px squircle radius and soft shadow
      - Card embedded navigation bar with search pill, bookmark, bell, and avatar
      - Headline with inline student photo pill badge
      - 2-Column Showcase: Featured card with social proof pill & CTA pill + stacked side cards
      - Interactive step counter (01 / 03) with arrow controls
      - Real-time Imagery Switcher (Authentic DPS Photos <-> Reference Design Clips)

   2. Golden Hour Arched Architectural Frames (Reference Image 2):
      - Luxury serif typography (Playfair Display) + warm latte/mocha foundation
      - Section 1: "About Us" with architectural arched backdrop & pedestal composition
      - Section 2: "Our Educational Pathway" with tombstone arch-topped photo frame
      - Section 3: "Our Academic Wings" with wavy arch canopy & 3 arch-topped cards
      - Section 4: "Frequently Asked Questions" with pill-shaped accordion rows & "+" toggles
      - Section 5: Dual Callout Cards (Light Sand / Deep Rich Burgundy)
      - Section 6: Newsletter / Admission Alerts Pill Bar
      - Section 7: Minimalist Editorial Footer
   ========================================================================== */

/* ==========================================================================
   PART 1: VELUNO FLOATING HERO CANVAS (Reference Image 1)
   ========================================================================== */

.veluno-hero-stage {
  position: relative;
  background: 
    radial-gradient(circle at 10% 20%, rgba(183, 168, 154, 0.25) 0%, transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(116, 25, 94, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(232, 220, 198, 0.4) 0%, transparent 55%),
    #fcfbf8;
  padding: 40px 20px 80px;
  overflow: hidden;
}

/* Subtle ambient blur glows */
.veluno-hero-stage::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 15%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(232, 220, 198, 0.45) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.veluno-hero-stage::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 12%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(116, 25, 94, 0.12) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Stately Brand Masthead above the card */
.veluno-masthead {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 32px;
}

.veluno-masthead-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(183, 168, 154, 0.3);
  color: #3c0930;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 12px;
  border: 1px solid rgba(183, 168, 154, 0.5);
}

.veluno-masthead-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin-bottom: 6px;
}

.veluno-masthead-sub {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7c7c82;
}

/* Central Floating Elevated Showcase Card */
.veluno-card {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.88) 0%, rgba(254, 248, 251, 0.76) 50%, rgba(125, 29, 63, 0.05) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 35px 85px -15px rgba(46, 8, 21, 0.12),
    0 15px 35px -5px rgba(46, 8, 21, 0.05),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px 0 rgba(125, 29, 63, 0.08);
  padding: 24px 34px 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card Internal Embedded Navigation */
.veluno-card-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
  gap: 16px;
}

.veluno-card-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1d1d1f;
}

.veluno-card-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #74195e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  font-family: var(--font-serif, serif);
  box-shadow: 0 4px 10px rgba(116, 25, 94, 0.25);
}


.veluno-card-logo-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(116, 25, 94, 0.22);
  border: 2px solid #ffffff;
  background: #fdfcee;
  padding: 2px;
}

.veluno-card-brand-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1d1d1f;
}

.veluno-card-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.veluno-card-links a {
  text-decoration: none;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: #4a4a4f;
  transition: color 0.2s ease;
}

.veluno-card-links a:hover,
.veluno-card-links a.active {
  color: #74195e;
  font-weight: 600;
}

.veluno-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.veluno-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  color: #7c7c82;
  border: 1px solid rgba(125, 29, 63, 0.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.veluno-search-pill svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.veluno-action-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a4a4f;
  cursor: pointer;
  transition: all 0.2s ease;
}

.veluno-action-icon-btn:hover {
  background: rgba(116, 25, 94, 0.08);
  color: #74195e;
  border-color: rgba(116, 25, 94, 0.2);
}

.veluno-avatar-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8dcc6;
}

.veluno-avatar-pill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Headline with Inline Photo Pill */
.veluno-headline-wrap {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 34px;
}

.veluno-headline {
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(1.85rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.25;
  color: #1d1d1f;
  letter-spacing: -0.025em;
}

/* The Signature Inline Photo Pill */
.inline-photo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 38px;
  border-radius: 9999px;
  overflow: hidden;
  vertical-align: middle;
  margin: 0 8px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(43, 24, 16, 0.18);
  position: relative;
  background: #e8dcc6;
}

.inline-photo-pill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.inline-photo-pill:hover img {
  transform: scale(1.15);
}

/* 2-Column Showcase Stage */
.veluno-showcase-grid {
  display: grid;
  grid-template-columns: 1.58fr 1fr;
  gap: 24px;
  margin-bottom: 26px;
}

/* Big Hero Feature Card (Left Column) */
.veluno-feature-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #2b1810;
  height: 440px;
  box-shadow: 0 16px 36px -8px rgba(43, 24, 16, 0.15);
}

.veluno-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.veluno-feature-stage:hover .veluno-feature-img {
  transform: scale(1.03);
}

/* Floating Social Proof Pill at Top-Left */
.veluno-merit-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 14px 6px 8px;
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

.veluno-avatar-stack {
  display: flex;
  align-items: center;
}

.veluno-avatar-stack img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  margin-left: -8px;
}

.veluno-avatar-stack img:first-child {
  margin-left: 0;
}

.veluno-merit-info {
  display: flex;
  flex-direction: column;
}

.veluno-merit-title {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.1;
}

.veluno-merit-sub {
  font-size: 0.68rem;
  color: #7c7c82;
  font-weight: 500;
}

/* Floating Dark Pill Action Button at Bottom-Right */
.veluno-cta-pill {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(46, 8, 21, 0.94) 0%, rgba(125, 29, 63, 0.92) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 9999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 26px -6px rgba(46, 8, 21, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  z-index: 3;
}

.veluno-cta-pill:hover {
  background: #74195e;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(116, 25, 94, 0.4);
}

.veluno-cta-pill svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.veluno-cta-pill:hover svg {
  transform: translate(2px, -2px);
}

/* Stacked Side Cards (Right Column) */
.veluno-side-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.veluno-subcard {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(254, 248, 251, 0.7) 60%, rgba(125, 29, 63, 0.05) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 28px -6px rgba(46, 8, 21, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.veluno-subcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -6px rgba(43, 24, 16, 0.1);
  border-color: rgba(116, 25, 94, 0.25);
}

.veluno-subcard-media {
  height: 135px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #ede9e0;
}

.veluno-subcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.veluno-subcard:hover .veluno-subcard-media img {
  transform: scale(1.06);
}

.veluno-subcard-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #74195e;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.veluno-subcard-content {
  padding: 14px 18px 16px;
}

.veluno-subcard-title {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 4px;
}

.veluno-subcard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

.veluno-subcard-desc {
  color: #6e6e73;
  font-weight: 500;
}

.veluno-subcard-action {
  color: #74195e;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Step Indicator & Controls at bottom of Veluno Card */
.veluno-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.veluno-step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.veluno-step-number {
  font-family: var(--font-mono, monospace);
  font-size: 0.92rem;
  font-weight: 700;
  color: #1d1d1f;
}

.veluno-step-progress {
  width: 90px;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.veluno-step-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33.33%;
  background: #74195e;
  transition: width 0.3s ease, left 0.3s ease;
}

.veluno-nav-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
}

.veluno-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1d1d1f;
  transition: all 0.2s ease;
}

.veluno-arrow-btn:hover {
  background: #111112;
  color: #ffffff;
  border-color: #111112;
}

/* Floating Image Switcher for Client Review */
.veluno-mode-switcher {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(183, 168, 154, 0.5);
  box-shadow: 0 10px 30px rgba(43, 24, 16, 0.18);
}

.veluno-switcher-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: #58585c;
  cursor: pointer;
  transition: all 0.2s ease;
}

.veluno-switcher-btn.active {
  background: #74195e;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(116, 25, 94, 0.3);
}


/* ==========================================================================
   PART 2: GOLDEN HOUR ARCHED ARCHITECTURAL SYSTEM (Reference Image 2)
   ========================================================================== */

/* Universal Section Styling for Golden Hour Layout */
.gh-section {
  padding: 85px 20px;
  position: relative;
  background: #ffffff;
}

.gh-section-alt {
  background: #fbf9f5;
  border-top: 1px solid rgba(183, 168, 154, 0.25);
  border-bottom: 1px solid rgba(183, 168, 154, 0.25);
}

.gh-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 52px;
}

.gh-section-eyebrow {
  display: inline-block;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #74195e;
  margin-bottom: 12px;
}

.gh-section-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.gh-section-subtitle {
  font-family: var(--font-sans, sans-serif);
  font-size: 1.05rem;
  color: #58585c;
  line-height: 1.65;
  margin: 0;
}

/* ----------------------------------------------------
   SECTION 1: "About Us" with Architectural Arch Backdrop
   ---------------------------------------------------- */
.gh-about-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}

.gh-about-narrative {
  padding-right: 20px;
}

.gh-about-lead {
  font-family: var(--font-sans, sans-serif);
  font-size: 1.12rem;
  font-weight: 500;
  color: #2b1810;
  line-height: 1.7;
  margin-bottom: 20px;
}

.gh-about-body {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.96rem;
  color: #6e6e73;
  line-height: 1.75;
  margin-bottom: 28px;
}

.gh-about-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.gh-about-pillar-chip {
  background: #f7f4ee;
  border: 1px solid rgba(183, 168, 154, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
}

.gh-about-pillar-chip strong {
  display: block;
  font-size: 0.95rem;
  color: #1d1d1f;
  margin-bottom: 4px;
}

.gh-about-pillar-chip span {
  font-size: 0.82rem;
  color: #7c7c82;
}

/* The Architectural Arch Composition Backdrop */
.gh-about-arch-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

/* Arch dome element behind the images */
.gh-arch-dome-backdrop {
  position: absolute;
  top: 20px;
  width: 320px;
  height: 420px;
  border-radius: 200px 200px 0 0;
  background: 
    linear-gradient(180deg, #ede4d3 0%, #e0d3bc 100%);
  box-shadow: 0 20px 40px -10px rgba(183, 168, 154, 0.35);
  z-index: 1;
}

/* Layered Arch Photo Cutouts & Pedestals */
.gh-arch-pedestal-group {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gh-arch-main-photo {
  width: 290px;
  height: 340px;
  border-radius: 180px 180px 20px 20px;
  overflow: hidden;
  box-shadow: 0 24px 50px -12px rgba(43, 24, 16, 0.25);
  border: 4px solid #ffffff;
  position: relative;
  z-index: 2;
}

.gh-arch-main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating Satellite Arch Card */
.gh-arch-satellite-card {
  position: absolute;
  bottom: -20px;
  right: 10px;
  width: 180px;
  height: 190px;
  border-radius: 90px 90px 16px 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px -10px rgba(43, 24, 16, 0.28);
  border: 4px solid #ffffff;
  background: #ffffff;
  z-index: 3;
}

.gh-arch-satellite-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gh-arch-floating-stamp {
  position: absolute;
  top: 40px;
  left: 0;
  background: #ffffff;
  border-radius: 9999px;
  padding: 8px 16px;
  box-shadow: 0 8px 24px rgba(43, 24, 16, 0.12);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  border: 1px solid rgba(183, 168, 154, 0.3);
}

.gh-stamp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #74195e;
}

.gh-stamp-text {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  color: #1d1d1f;
}

/* ----------------------------------------------------
   SECTION 2: "Our Process" / Educational Pathway
   With Signature Tombstone Arch Frame
   ---------------------------------------------------- */
.gh-process-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}

.gh-process-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gh-process-step {
  display: flex;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(183, 168, 154, 0.3);
  transition: all 0.25s ease;
}

.gh-process-step:hover {
  border-color: rgba(116, 25, 94, 0.25);
  transform: translateX(4px);
  box-shadow: 0 10px 25px -5px rgba(43, 24, 16, 0.08);
}

.gh-step-number {
  font-family: var(--font-mono, monospace);
  font-size: 1.25rem;
  font-weight: 800;
  color: #74195e;
  line-height: 1;
  padding-top: 2px;
}

.gh-step-content h3 {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.2rem;
  color: #1d1d1f;
  margin-bottom: 6px;
}

.gh-step-content p {
  font-size: 0.9rem;
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}

/* The Signature Tombstone Arch Frame */
.gh-tombstone-arch-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.gh-tombstone-arch {
  width: 100%;
  max-width: 380px;
  height: 480px;
  border-radius: 200px 200px 20px 20px;
  overflow: hidden;
  box-shadow: 0 28px 60px -15px rgba(43, 24, 16, 0.22);
  border: 6px solid #ffffff;
  position: relative;
  background: #2b1810;
}

.gh-tombstone-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.gh-tombstone-arch:hover img {
  transform: scale(1.05);
}

.gh-tombstone-caption-badge {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 9999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: #74195e;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------
   SECTION 3: "Our Collection" / Academic Wings Trio
   With 3 Arch-Topped Cards Side by Side
   ---------------------------------------------------- */
.gh-collection-wrap {
  max-width: 1140px;
  margin: 0 auto;
}

.gh-triple-arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gh-arch-card {
  background: linear-gradient(165deg, rgba(252, 247, 237, 0.92) 0%, rgba(246, 238, 224, 0.84) 50%, rgba(248, 234, 239, 0.78) 100%);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(183, 168, 154, 0.35);
  box-shadow: 0 12px 30px -8px rgba(43, 24, 16, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gh-arch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px -10px rgba(43, 24, 16, 0.16);
  border-color: rgba(116, 25, 94, 0.25);
}

.gh-arch-card-media {
  width: 100%;
  height: 260px;
  border-radius: 130px 130px 16px 16px;
  margin: 14px auto 0;
  width: calc(100% - 28px);
  overflow: hidden;
  position: relative;
  background: #ede9e0;
}

.gh-arch-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.gh-arch-card:hover .gh-arch-card-media img {
  transform: scale(1.08);
}

.gh-arch-card-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #74195e;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gh-arch-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gh-arch-card-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.gh-arch-card-desc {
  font-size: 0.9rem;
  color: #6e6e73;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.gh-arch-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 14px;
}

.gh-arch-card-meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: #74195e;
}

.gh-arch-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  color: #1d1d1f;
  transition: color 0.2s ease;
}

.gh-arch-card-link:hover {
  color: #74195e;
}

/* ----------------------------------------------------
   SECTION 4: Frequently Asked Questions (FAQ)
   With Pill-Shaped Accordion Rows & "+" Expanders
   ---------------------------------------------------- */
.gh-faq-container {
  max-width: 860px;
  margin: 0 auto;
}

.gh-pill-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gh-pill-faq-item {
  background: #fdfcf9;
  border: 1px solid rgba(183, 168, 154, 0.45);
  border-radius: 9999px;
  padding: 16px 28px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.gh-pill-faq-item.active {
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 14px 35px -8px rgba(43, 24, 16, 0.1);
  border-color: rgba(116, 25, 94, 0.25);
  padding-bottom: 22px;
}

.gh-pill-faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  width: 100%;
  gap: 16px;
}

.gh-pill-faq-question {
  font-family: var(--font-sans, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: #2b1810;
  margin: 0;
  line-height: 1.4;
}

.gh-pill-faq-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(183, 168, 154, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #74195e;
  font-size: 1.15rem;
  font-weight: 600;
  transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}

.gh-pill-faq-item.active .gh-pill-faq-toggle {
  transform: rotate(45deg);
  background: #74195e;
  color: #ffffff;
  border-color: #74195e;
}

.gh-pill-faq-body {
  display: none;
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-sans, sans-serif);
  font-size: 0.92rem;
  color: #58585c;
  line-height: 1.7;
}

.gh-pill-faq-item.active .gh-pill-faq-body {
  display: block;
  animation: ghFaqFadeIn 0.35s ease;
}

@keyframes ghFaqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------
   SECTION 5: Dual Callout Banners
   (Light Sand / Deep Rich Burgundy)
   ---------------------------------------------------- */
.gh-dual-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1140px;
  margin: 0 auto;
}

.gh-banner-card {
  border-radius: 28px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  box-shadow: 0 16px 40px -10px rgba(43, 24, 16, 0.12);
}

.gh-banner-light {
  background: 
    linear-gradient(135deg, #f7f3eb 0%, #ebe2d3 100%);
  border: 1px solid rgba(183, 168, 154, 0.4);
  color: #1d1d1f;
}

.gh-banner-dark {
  background: 
    linear-gradient(135deg, #561045 0%, #36072d 100%);
  border: 1px solid rgba(116, 25, 94, 0.3);
  color: #ffffff;
}

.gh-banner-tag {
  display: inline-block;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.gh-banner-light .gh-banner-tag {
  color: #74195e;
}

.gh-banner-dark .gh-banner-tag {
  color: #e8dcc6;
}

.gh-banner-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

.gh-banner-light .gh-banner-title {
  color: #1d1d1f;
}

.gh-banner-dark .gh-banner-title {
  color: #ffffff;
}

.gh-banner-desc {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

.gh-banner-light .gh-banner-desc {
  color: #58585c;
}

.gh-banner-dark .gh-banner-desc {
  color: rgba(255, 255, 255, 0.85);
}

.gh-banner-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 9999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.gh-banner-light .gh-banner-btn {
  background: #111112;
  color: #ffffff;
}

.gh-banner-light .gh-banner-btn:hover {
  background: #74195e;
  transform: translateY(-2px);
}

.gh-banner-dark .gh-banner-btn {
  background: #ffffff;
  color: #3c0930;
}

.gh-banner-dark .gh-banner-btn:hover {
  background: #e8dcc6;
  transform: translateY(-2px);
}

/* ----------------------------------------------------
   SECTION 6: Newsletter / Admission Subscription Bar
   ---------------------------------------------------- */
.gh-subscribe-wrap {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 0;
}

.gh-subscribe-pill {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 9999px;
  border: 1px solid rgba(183, 168, 154, 0.45);
  box-shadow: 0 10px 30px rgba(43, 24, 16, 0.08);
  padding: 6px 6px 6px 20px;
  margin-top: 20px;
}

.gh-subscribe-input {
  flex-grow: 1;
  border: none;
  outline: none;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.95rem;
  color: #1d1d1f;
  background: transparent;
}

.gh-subscribe-input::placeholder {
  color: #9a9a9f;
}

.gh-subscribe-submit {
  border: none;
  border-radius: 9999px;
  background: #74195e;
  color: #ffffff;
  padding: 12px 26px;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gh-subscribe-submit:hover {
  background: #561045;
  transform: scale(1.02);
}

/* Responsive adjustments for Veluno and Golden Hour */
@media (max-width: 992px) {
  .veluno-showcase-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .veluno-side-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .gh-about-stage,
  .gh-process-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .gh-about-narrative {
    padding-right: 0;
  }
  
  .gh-triple-arch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gh-dual-banners {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .veluno-card {
    padding: 20px 20px 28px;
    border-radius: 24px;
  }
  
  .veluno-card-links {
    display: none;
  }
  
  .veluno-side-stack {
    grid-template-columns: 1fr;
  }
  
  .veluno-feature-stage {
    height: 340px;
  }
  
  .inline-photo-pill {
    width: 68px;
    height: 32px;
  }
  
  .gh-triple-arch-grid {
    grid-template-columns: 1fr;
  }
  
  .gh-subscribe-pill {
    flex-direction: column;
    border-radius: 20px;
    padding: 14px;
    gap: 10px;
  }
  
  .gh-subscribe-input {
    width: 100%;
    padding: 8px 12px;
  }
  
  .gh-subscribe-submit {
    width: 100%;
  }
}

/* ==========================================================================
   FOOTER CREST & BRAND LOCKUP (Official Logo Integration)
   ========================================================================== */
.footer-brand-signature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #1d1d1f;
}

.footer-crest-img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 4px 14px rgba(116, 25, 94, 0.22);
  border: 2px solid rgba(201, 147, 43, 0.4);
  background: #fdfcee;
  padding: 3px;
  transition: transform 0.3s ease;
}

.footer-brand-lockup:hover .footer-crest-img {
  transform: scale(1.06);
}

.footer-brand-title {
  font-family: var(--font-serif, serif);
  font-size: 1.3rem;
  font-weight: 700;
  display: block;
  color: #1d1d1f;
}

.footer-brand-subtitle {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.85rem;
  color: #7c7c82;
}

.footer-motto-tag {
  font-family: var(--font-serif, serif);
  font-style: italic;
  font-size: 0.95rem;
  color: #74195e;
  background: rgba(201, 147, 43, 0.12);
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(201, 147, 43, 0.3);
}

/* ==========================================================================
   PART 3: THE INSPIRATION HERO & MOCKUP SHOWCASE (Client Request 3)
   - Wine Colour Directional Shadow Overlay on Authentic Campus Photography
   - Playfair Display Typography & Luxury Campus Architecture Visuals
   - Interactive 01-04 Slider Indicators & Right Vertical Words
   - Bottom Docked 5-Pillar Feature Bar
   - 4-Card Full-Width Showcase Grid (01/04 - 04/04)
   - "Rooted in Values. Built for the Future." Philosophy Strip
   - Blue Translucent Flexible Draggable Button (Mouse & Touch)
   - Dynamic Ocean Tsunami Wave Canvas & Rising Iridescent Water Bubbles
   - Ultra-Luxury Dageroz Digital Agency Advertisement Modal (dageroz.onrender.com)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO STAGE WITH SIGNATURE CURVED PHOTO FRAME (Client Reference Match)
   - 1.5cm side margins on both sides of website
   - Lighter wine shade (delicate sheer warmth, does not take over image)
   - Signature curved photo frame with top-left & bottom-right concave notches
   - No bold text overwritten across the image
   - 2-Column balanced editorial composition that utilizes the space
   -------------------------------------------------------------------------- */
.inspire-hero-stage {
  position: relative;
  width: 100%;
  background: #ffffff;
  padding: 44px 0 32px;
  overflow: hidden;
  border-bottom: 1px solid rgba(116, 25, 94, 0.08);
}

.inspire-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-inline: 1.5cm;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .inspire-hero-grid {
    padding-inline: 18px;
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left Column: High-End Editorial Typography (Clean, Modern & Uncluttered) */
.hero-editorial-copy {
  display: flex;
  flex-direction: column;
  padding-right: 24px;
}

.hero-editorial-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  color: var(--wine-950, #2e0815);
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.hero-editorial-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--wine-700, #7d1d3f);
}

.hero-editorial-lead {
  font-family: var(--font-ui, sans-serif);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.6;
  color: var(--ink-700, #46303a);
  margin-bottom: 30px;
  max-width: 520px;
}

.hero-editorial-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--wine-700, #7d1d3f) 0%, var(--wine-900, #47102a) 100%);
  color: #ffffff;
  padding: 14px 30px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.96rem;
  text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(116, 25, 94, 0.4);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-hero-primary .arrow {
  transition: transform 0.25s ease;
}

.btn-hero-primary:hover {
  background: linear-gradient(135deg, #96274e 0%, var(--wine-800, #5c1636) 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -6px rgba(116, 25, 94, 0.55);
}

.btn-hero-primary:hover .arrow {
  transform: translateX(4px);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--wine-950, #2e0815);
  border: 1.5px solid rgba(116, 25, 94, 0.2);
  padding: 13px 26px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.btn-hero-secondary:hover {
  background: #ffffff;
  border-color: var(--wine-700, #7d1d3f);
  color: var(--wine-700, #7d1d3f);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(116, 25, 94, 0.12);
}

/* Minimalist Elevated Metrics (No clunky card boxes!) */
.hero-metrics-minimal {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(116, 25, 94, 0.1);
  margin-bottom: 22px;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-num {
  font-family: var(--font-display, serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--wine-700, #7d1d3f);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.metric-label {
  font-size: 0.72rem;
  color: var(--ink-500, #6e5560);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.metric-sep {
  width: 1px;
  height: 36px;
  background: rgba(116, 25, 94, 0.12);
}

/* Sleek Minimalist Photo Views Switcher */
.hero-photo-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: rgba(116, 25, 94, 0.04);
  padding: 4px 6px;
  border-radius: 9999px;
  width: fit-content;
  border: 1px solid rgba(116, 25, 94, 0.08);
}

.photo-pill-btn {
  background: none;
  border: none;
  font-family: var(--font-label, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-700, #46303a);
  padding: 6px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.photo-pill-btn:hover {
  color: var(--wine-700, #7d1d3f);
}

.photo-pill-btn.active {
  background: #ffffff;
  color: var(--wine-700, #7d1d3f);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   RIGHT COLUMN: SIGNATURE CURVED PHOTO FRAME (Client Attached Image Match)
   - Deep 44px outer squircle corners
   - Top-Left Notched Cutout with Avatars & Badge
   - Bottom-Right Notched Cutout with Pill Action Button
   - Lighter wine shade (delicate sheer warmth, 100% natural photo grace)
   - NO bold text overwritten across the image!
   - Pure seamless cutout curves into page background
   -------------------------------------------------------------------------- */

/* ============================================================================
   DUAL-ROW PARALLEL SMOOTH GALLERY SCROLL (Hero Showcase Integration)
   ============================================================================ */
.client-curved-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 460px;
  border-radius: 44px;
  overflow: hidden;
  background: linear-gradient(160deg, #FDFBF7 0%, #F5EFE6 50%, #ECE4D4 100%);
  box-shadow:
    0 24px 60px -15px rgba(46, 8, 21, 0.12),
    0 8px 24px -4px rgba(0, 0, 0, 0.04);
  border: 1.5px solid rgba(217, 184, 138, 0.45);
}

.client-curved-gallery-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  overflow: hidden;
}

.hero-slider-row {
  position: relative;
  width: 100%;
  height: calc(50% - 6px);
  min-height: 185px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.curved-notch-pill {
  z-index: 15 !important;
}

.curved-notch-gallery-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 15;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(217, 184, 138, 0.6);
  color: #7D1D3F;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(46, 8, 21, 0.12);
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.curved-notch-gallery-pill:hover {
  background: #7D1D3F;
  color: #FDE68A;
  border-color: #7D1D3F;
  transform: scale(1.08);
}

/* Original fallback */
.client-curved-card-fallback {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  min-height: 440px;
  border-radius: 44px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 24px 60px -15px rgba(46, 8, 21, 0.12),
    0 8px 24px -4px rgba(0, 0, 0, 0.04);
  border: none;
}

.client-curved-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.client-curved-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.client-curved-card:hover .client-curved-img {
  transform: scale(1.03);
}

/* LIGHTER WINE SHADE:
   Delicate, sheer ambient warmth at the edges.
   Does NOT darken or obscure the image! */
.client-curved-sheer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    linear-gradient(135deg, rgba(116, 25, 94, 0.04) 0%, transparent 45%, rgba(116, 25, 94, 0.02) 100%),
    radial-gradient(circle at 85% 15%, rgba(223, 175, 69, 0.04) 0%, transparent 60%);
  mix-blend-mode: multiply;
  opacity: 0.45;
}

/* TOP-LEFT NOTCHED CURVE PILL (Exact match to reference image) */
.curved-notch-pill.top-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background: #ffffff;
  padding: 12px 22px 14px 16px;
  border-bottom-right-radius: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: none;
}

/* Inverted Corner Fillets for Top-Left Notch */
.curved-notch-pill.top-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 24px;
  height: 24px;
  background: transparent;
  border-top-left-radius: 24px;
  box-shadow: -8px -8px 0 8px #ffffff;
  pointer-events: none;
}

.curved-notch-pill.top-left::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 24px;
  height: 24px;
  background: transparent;
  border-top-left-radius: 24px;
  box-shadow: -8px -8px 0 8px #ffffff;
  pointer-events: none;
}

.notch-avatar-group {
  display: flex;
  align-items: center;
}

.notch-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #ffffff;
  margin-left: -10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.notch-avatar:first-child {
  margin-left: 0;
}

.notch-pill-text {
  display: flex;
  flex-direction: column;
}

.notch-pill-text strong {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: #16040c;
  line-height: 1.15;
}

.notch-pill-text span {
  font-size: 0.72rem;
  color: #6e5560;
  font-weight: 600;
}

/* BOTTOM-RIGHT NOTCHED CURVE PILL BUTTON (Exact match to reference image) */
.curved-notch-pill.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
  background: #ffffff;
  padding: 14px 16px 14px 22px;
  border-top-left-radius: 32px;
  display: flex;
  align-items: center;
  box-shadow: none;
}

/* Inverted Corner Fillets for Bottom-Right Notch */
.curved-notch-pill.bottom-right::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 24px;
  height: 24px;
  background: transparent;
  border-bottom-right-radius: 24px;
  box-shadow: 8px 8px 0 8px #ffffff;
  pointer-events: none;
}

.curved-notch-pill.bottom-right::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 100%;
  width: 24px;
  height: 24px;
  background: transparent;
  border-bottom-right-radius: 24px;
  box-shadow: 8px 8px 0 8px #ffffff;
  pointer-events: none;
}

.notch-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(46, 8, 21, 0.94) 0%, rgba(125, 29, 63, 0.92) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 10px 18px 10px 22px;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px -4px rgba(46, 8, 21, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.notch-action-pill:hover {
  background: var(--wine-700, #7d1d3f);
  color: #ffffff;
  transform: translateY(-1px);
}

.notch-arrow-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #12030a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.notch-arrow-icon svg {
  width: 14px;
  height: 14px;
}

.notch-action-pill:hover .notch-arrow-icon {
  transform: translate(2px, -2px);
  color: var(--wine-700, #7d1d3f);
}

/* --------------------------------------------------------------------------
   HERO BOTTOM DOCKED 5-PILLAR FEATURE BAR (1.5cm side margin)
   -------------------------------------------------------------------------- */
.inspire-docked-bar {
  position: relative;
  z-index: 3;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(254, 248, 250, 0.6) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(125, 29, 63, 0.12);
  border-bottom: 1px solid rgba(125, 29, 63, 0.1);
  box-shadow: 0 8px 24px -6px rgba(46, 8, 21, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 16px 0;
}

.inspire-docked-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-inline: 1.5cm;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .inspire-docked-grid {
    padding-inline: 18px;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.inspire-dock-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-700, #46303a);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  padding: 4px 10px;
  border-right: 1px solid rgba(116, 25, 94, 0.1);
  transition: color 0.25s ease;
}

.inspire-dock-item:last-child {
  border-right: none;
}

.inspire-dock-item svg {
  width: 20px;
  height: 20px;
  color: var(--wine-700, #7d1d3f);
  flex-shrink: 0;
}

.inspire-dock-item:hover {
  color: var(--wine-900, #47102a);
}

.inspire-dock-item:hover svg {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   2. FOUR SIGNATURE PILLARS SHOWCASE (Modern, Clean & Premium)
   - Architectural ivory/cream background with soft warm ambient glow
   - 4 Individual elevated cards with 24px gap and 26px squircle radius
   - Dedicated top photo frame (clean, bright, zero text collisions)
   - Distinct bottom body with editorial typography, tags, and action buttons
   - 1.5cm side margin on desktop
   -------------------------------------------------------------------------- */
.inspire-showcase-section {
  width: 100%;
  background: 
    radial-gradient(circle at 10% 20%, rgba(116, 25, 94, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(201, 147, 43, 0.04) 0%, transparent 50%),
    #faf7f2;
  padding: 84px 1.5cm 96px;
  overflow: hidden;
  border-bottom: 1px solid rgba(116, 25, 94, 0.08);
}

@media (max-width: 768px) {
  .inspire-showcase-section {
    padding: 60px 18px 72px;
  }
}

.inspire-showcase-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Section Header */
.showcase-header {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.showcase-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--wine-950, #2e0815);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.showcase-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--wine-700, #7d1d3f);
}

.showcase-lead {
  font-family: var(--font-ui, sans-serif);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink-700, #46303a);
  margin: 0 auto;
}

/* 4-Card Grid */
.inspire-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 1100px) {
  .inspire-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .inspire-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }
}

/* Modern Pillar Card */
.modern-pillar-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.84) 0%, rgba(254, 248, 251, 0.7) 60%, rgba(125, 29, 63, 0.05) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 
    0 16px 36px -10px rgba(46, 8, 21, 0.07),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px 0 rgba(125, 29, 63, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease;
}

.modern-pillar-card:hover {
  transform: translateY(-8px);
  border-color: rgba(116, 25, 94, 0.24);
  box-shadow: 
    0 24px 50px -12px rgba(116, 25, 94, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.04);
}

/* Top Media Viewport */
.pillar-card-media {
  position: relative;
  width: calc(100% - 20px);
  margin: 10px 10px 0;
  aspect-ratio: 16 / 10.5;
  border-radius: 18px;
  overflow: hidden;
  background: #efe9e2;
}

.pillar-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modern-pillar-card:hover .pillar-card-media img {
  transform: scale(1.06);
}

/* Number index inside photo */

.pillar-card-num {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(18, 3, 10, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-label, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
}

/* Card Body */
.pillar-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pillar-card-title {
  font-family: var(--font-display, serif);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--wine-950, #2e0815);
  margin-bottom: 10px;
}

.pillar-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.modern-pillar-card:hover .pillar-card-title a {
  color: var(--wine-700, #7d1d3f);
}

.pillar-card-desc {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-700, #46303a);
  margin-bottom: 18px;
  flex: 1;
}

/* Highlight Mini Chips - Locked to 1 single line with 2 features */
.pillar-card-chips {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

.pillar-chip {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(116, 25, 94, 0.06) !important;
  color: var(--wine-800, #5c1636) !important;
  font-size: clamp(0.55rem, 1.8vw, 0.72rem) !important;
  font-weight: 600 !important;
  padding: 3px 5px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(116, 25, 94, 0.12) !important;
  line-height: 1.25 !important;
}

/* Card Action Link */
.pillar-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid rgba(116, 25, 94, 0.09);
  color: var(--wine-700, #7d1d3f);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.pillar-card-action .action-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(116, 25, 94, 0.08);
  color: var(--wine-700, #7d1d3f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.modern-pillar-card:hover .pillar-card-action {
  color: var(--wine-900, #47102a);
}

.modern-pillar-card:hover .pillar-card-action .action-circle {
  background: var(--wine-700, #7d1d3f);
  color: #ffffff;
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   3. PHILOSOPHY SECTION ("Rooted in Values. Built for the Future.")
   -------------------------------------------------------------------------- */
.inspire-philosophy-section {
  padding: 80px 1.5cm 90px;
  background: var(--cream, #fbf7ef);
  border-bottom: 1px solid rgba(93, 30, 51, 0.1);
}

@media (max-width: 768px) {
  .inspire-philosophy-section {
    padding: 60px 18px 70px;
  }
}

.inspire-philosophy-inner {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1.3fr;
  gap: 40px;
  align-items: center;
}

.philosophy-headline-wrap .philosophy-eyebrow {
  font-family: var(--font-label, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wine-700, #7d1d3f);
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.philosophy-headline-wrap .philosophy-title {
  font-family: var(--font-display, serif);
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--wine-950, #2e0815);
  letter-spacing: -0.015em;
}

.philosophy-values-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.philosophy-value-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(116, 25, 94, 0.1);
  box-shadow: 0 4px 18px rgba(35, 5, 20, 0.04);
  transition: all 0.25s ease;
}

.philosophy-value-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(116, 25, 94, 0.25);
  box-shadow: 0 8px 24px rgba(116, 25, 94, 0.08);
}

.philosophy-value-chip .value-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(116, 25, 94, 0.08);
  color: var(--wine-700, #7d1d3f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.philosophy-value-chip .value-icon svg {
  width: 20px;
  height: 20px;
}

.philosophy-value-chip .value-text strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--wine-950, #2e0815);
  line-height: 1.2;
}

.philosophy-value-chip .value-text span {
  font-size: 0.78rem;
  color: var(--ink-500, #6e5560);
}

.philosophy-quote-wrap {
  border-left: 2px solid var(--gold-500, #c9962e);
  padding-left: 24px;
}

.philosophy-quote {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--wine-900, #47102a);
}

/* --------------------------------------------------------------------------
   4. SMALL HOLLOW CIRCULAR ROYAL WINE TRANSPARENT BUTTON
   - Hollow circular floating glass ring
   - Colour fusion with Royal Wine (#7D1D3F / #2E0815) and Antique Gold (#D9B88A)
   - Draggable freely across screen
   - Tap/click triggers ocean tsunami wave surge + rising bubbles + Dageroz ad
   -------------------------------------------------------------------------- */
.dageroz-float-btn {
  position: fixed;
  z-index: 99990;
  bottom: 36px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  outline: none;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  padding: 0;
  background: transparent;
  border: none;
}

.dageroz-float-btn:active,
.dageroz-float-btn.is-dragging {
  cursor: grabbing;
  transform: scale(1.12);
}

/* Radiant atmospheric aura */
.dageroz-float-btn .dfb-halo {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 29, 63, 0.55) 0%, rgba(217, 184, 138, 0.25) 45%, transparent 72%);
  filter: blur(8px);
  animation: dfbPulse 2.8s infinite ease-in-out;
  pointer-events: none;
}

@keyframes dfbPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.22); opacity: 0.95; }
}

/* Hollow circular transparent glass body with royal wine fusion */
.dageroz-float-btn .dfb-inner {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Hollow translucent glass fusion using royal wine & antique gold */
  background: radial-gradient(circle at 35% 30%, rgba(125, 29, 63, 0.45) 0%, rgba(70, 11, 33, 0.25) 60%, rgba(46, 8, 21, 0.42) 100%);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 2px solid rgba(217, 184, 138, 0.75);
  box-shadow:
    0 10px 26px -4px rgba(46, 8, 21, 0.45), 0 0 16px 2px rgba(125, 29, 63, 0.55), inset 0 1.5px 2px rgba(255, 255, 255, 0.75), inset 0 -1.5px 3px rgba(125, 29, 63, 0.45);
  color: #FDE68A;
  transition: all 0.25s ease;
}

.dageroz-float-btn:hover .dfb-inner {
  background: radial-gradient(circle at 35% 30%, rgba(125, 29, 63, 0.65) 0%, rgba(70, 11, 33, 0.35) 60%, rgba(46, 8, 21, 0.55) 100%);
  border-color: #D9B88A; box-shadow: 0 14px 34px -4px rgba(46, 8, 21, 0.6), 0 0 24px 4px rgba(217, 184, 138, 0.65),
    inset 0 2px 3px rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}

/* Centered delicate water wave icon in royal wine & gold */
.dageroz-float-btn .dfb-wave-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDE68A;
}

.dageroz-float-btn .dfb-wave-icon svg {
  width: 22px;
  height: 22px;
  stroke: #FDE68A;
  filter: drop-shadow(0 1px 3px rgba(2, 132, 199, 0.4));
  animation: waveSway 2.5s infinite ease-in-out;
}

@keyframes waveSway {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Hide text and sparkle for pure minimalist hollow circular button */
.dageroz-float-btn .dfb-text,
.dageroz-float-btn .dfb-sparkle {
  display: none !important;
}

/* --------------------------------------------------------------------------
   5. HYPER-REALISTIC WATER RIPPLE ENGINE (Blurry Transparent Caustic Waves)
   Monochromatic refractive water ripples originating directly from button.
   -------------------------------------------------------------------------- */
.tsunami-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tsunami-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: none; /* Instant activation with zero lag */
}

#tsunamiCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bubble-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Concentric Blurry Transparent Glass Ripple Rings (DOM Refraction Layer) */
.water-ripple-ring {
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;

  /* Transparent refractive gradient */
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, 0.06) 76%,
    rgba(0, 0, 0, 0.04) 85%,
    rgba(255, 255, 255, 0.16) 94%,
    rgba(255, 255, 255, 0) 100%
  );

  /* Meniscus optical refraction: bright caustic crest line + dark trough shadow */
  box-shadow:
    inset 0 0 12px 2px rgba(255, 255, 255, 0.38),
    inset 0 0 22px 5px rgba(0, 0, 0, 0.1),
    0 0 10px 2px rgba(255, 255, 255, 0.45),
    0 0 26px 8px rgba(0, 0, 0, 0.07);

  /* Physically blurs whatever is behind the ripple on the website */
  backdrop-filter: blur(5px) contrast(1.12) brightness(1.04);
  -webkit-backdrop-filter: blur(5px) contrast(1.12) brightness(1.04);

  opacity: 0.95;
  animation-fill-mode: forwards;
}

.water-ripple-ring.wave-1 {
  width: 1300px;
  height: 1300px;
  animation: waterRippleSpread 1.4s cubic-bezier(0.12, 0.82, 0.34, 1) 0s forwards;
}

.water-ripple-ring.wave-2 {
  width: 1200px;
  height: 1200px;
  animation: waterRippleSpread 1.45s cubic-bezier(0.12, 0.82, 0.34, 1) 0.03s forwards;
  backdrop-filter: blur(4.5px) contrast(1.1);
  -webkit-backdrop-filter: blur(4.5px) contrast(1.1);
}

.water-ripple-ring.wave-3 {
  width: 1100px;
  height: 1100px;
  animation: waterRippleSpread 1.5s cubic-bezier(0.12, 0.82, 0.34, 1) 0.07s forwards;
  backdrop-filter: blur(4px) contrast(1.08);
  -webkit-backdrop-filter: blur(4px) contrast(1.08);
}

.water-ripple-ring.wave-4 {
  width: 1000px;
  height: 1000px;
  animation: waterRippleSpread 1.55s cubic-bezier(0.12, 0.82, 0.34, 1) 0.12s forwards;
  backdrop-filter: blur(3.5px) contrast(1.07);
  -webkit-backdrop-filter: blur(3.5px) contrast(1.07);
}

.water-ripple-ring.wave-5 {
  width: 900px;
  height: 900px;
  animation: waterRippleSpread 1.6s cubic-bezier(0.12, 0.82, 0.34, 1) 0.18s forwards;
  backdrop-filter: blur(3px) contrast(1.05);
  -webkit-backdrop-filter: blur(3px) contrast(1.05);
}

.water-ripple-ring.wave-6 {
  width: 800px;
  height: 800px;
  animation: waterRippleSpread 1.65s cubic-bezier(0.12, 0.82, 0.34, 1) 0.24s forwards;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}

.water-ripple-ring.wave-7 {
  width: 700px;
  height: 700px;
  animation: waterRippleSpread 1.7s cubic-bezier(0.12, 0.82, 0.34, 1) 0.31s forwards;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.water-ripple-ring.wave-8 {
  width: 600px;
  height: 600px;
  animation: waterRippleSpread 1.75s cubic-bezier(0.12, 0.82, 0.34, 1) 0.38s forwards;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

@keyframes waterRippleSpread {
  0% {
    transform: translate(-50%, -50%) scale(0.03);
    opacity: 0.95;
  }
  35% {
    opacity: 0.72;
  }
  70% {
    opacity: 0.22;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   6. DAGEROZ STUDENT FOUNDERS & APPLE "HELLO" TYPING INTRO
   Apple "hello" typing effect transitioning to luxury Gen-Z Student Freelancer Frame.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

.dageroz-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

.dageroz-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dageroz-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 17, 26, 0.42);
  transition: opacity 0.4s ease;
}

/* Luxury Architectural Founder Card (Zero Emojis, Crisp Hairline Borders, No Colorful Lines) */
.dageroz-card.dageroz-founder-card {
  position: relative;
  z-index: 2;
  width: 95vw;
  max-width: 860px;
  max-height: 90vh;
  background: #FFFFFF;
  border: 1px solid rgba(46, 8, 21, 0.14);
  border-radius: 24px;
  box-shadow:
    0 32px 85px -15px rgba(22, 6, 12, 0.28),
    0 10px 30px -5px rgba(22, 6, 12, 0.08);
  padding: 36px 40px;
  color: #2E0815;
  overflow-y: auto;
  transform: scale(0.95) translateY(18px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}

.dageroz-modal.active .dageroz-card.dageroz-founder-card {
  transform: scale(1) translateY(0);
}

.dageroz-founder-card .dageroz-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(46, 8, 21, 0.04);
  border: 1px solid rgba(46, 8, 21, 0.1);
  color: #46303A;
  font-size: 1.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  line-height: 1;
}

.dageroz-founder-card .dageroz-close-btn:hover {
  background: #2E0815;
  border-color: #2E0815;
  color: #FFFFFF;
  transform: rotate(90deg);
}

/* =========================================================================
   PHASE 1: APPLE "HELLO" TYPING INTRO STYLING
   ========================================================================= */
.dageroz-apple-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  text-align: center;
  padding: 40px 20px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.dageroz-apple-intro.intro-complete {
  display: none !important;
}

/* Apple Cursive "hello." Wrap & Sequential Letter-by-Letter Typing */
.apple-hello-wrap {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 20px;
  min-height: 80px;
}

.apple-hello-word {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 5.6rem;
  line-height: 1;
  color: #7D1D3F;
  letter-spacing: -0.02em;
}

.apple-hello-cursor {
  font-family: monospace;
  font-size: 4rem;
  font-weight: 300;
  color: #7D1D3F;
  margin-left: 2px;
  line-height: 1;
  animation: appleCursorBlink 0.7s infinite step-end;
}

/* Second Typing Line */
.apple-typewriter-container {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto 28px;
}

.apple-typewriter-text {
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #2E0815;
  line-height: 1.55;
}

.apple-typewriter-cursor {
  font-family: monospace;
  font-size: 1.35rem;
  font-weight: 400;
  color: #2E0815;
  margin-left: 2px;
  animation: appleCursorBlink 0.7s infinite step-end;
}

@keyframes appleCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.dageroz-skip-intro-btn {
  background: transparent;
  border: 1px solid rgba(46, 8, 21, 0.16);
  border-radius: 100px;
  padding: 8px 22px;
  font-family: var(--font-label, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: #6E5560;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.06em;
}

.dageroz-skip-intro-btn:hover {
  background: #2E0815;
  color: #FFFFFF;
  border-color: #2E0815;
  transform: translateY(-1px);
}

/* =========================================================================
   PHASE 2: STUDENT FREELANCER FOUNDER PROFILE FRAME
   ========================================================================= */
.dageroz-founder-content {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dageroz-founder-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Header: Logo & Student Status */
.founder-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(46, 8, 21, 0.1);
  margin-bottom: 20px;
}

.founder-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.founder-brand-row .dageroz-logo-symbol {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.founder-brand-row .dageroz-vector-logo {
  width: 44px;
  height: 44px;
}

.founder-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7D1D3F;
  margin-bottom: 3px;
}

.founder-kicker-pill .kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7D1D3F;
}

.founder-agency-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #2E0815;
  margin: 0;
  line-height: 1.1;
}

.founder-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #2E0815;
  background: #FAF7F2;
  border: 1px solid rgba(46, 8, 21, 0.12);
  border-radius: 100px;
  padding: 6px 14px;
  white-space: nowrap;
}

.founder-live-pill .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}

/* Mission Bar */
.founder-headline-bar {
  background: #FAF7F2;
  border: 1px solid rgba(46, 8, 21, 0.08);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 24px;
  text-align: center;
}

.founder-subhead-text {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: #46303A;
  line-height: 1.55;
  margin: 0;
}

/* =========================================================================
   TWO FOUNDERS DIVIDED BY CLEAN VERTICAL LINE
   ========================================================================= */
.founders-vertical-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 26px;
  align-items: stretch;
  margin-bottom: 22px;
}

.founders-vertical-divider {
  background: rgba(46, 8, 21, 0.12);
  width: 1px;
  height: 100%;
}

.founder-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.founder-profile-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.founder-avatar-wrap {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(46, 8, 21, 0.12);
  background: #FAF7F2;
  box-shadow: 0 4px 12px rgba(46, 8, 21, 0.06);
  flex-shrink: 0;
}

.founder-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.founder-role-tag {
  font-family: var(--font-label, monospace);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7D1D3F;
  background: rgba(125, 29, 63, 0.06);
  border: 1px solid rgba(125, 29, 63, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 4px;
}

.founder-name {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: #2E0815;
  margin: 0 0 2px;
  line-height: 1.2;
}

.founder-subrole {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  color: #6E5560;
}

.founder-quote {
  margin: 0;
  padding: 10px 14px;
  background: #FAF7F2;
  border-left: 2px solid #2E0815;
  border-radius: 0 10px 10px 0;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.84rem;
  font-style: italic;
  color: #46303A;
  line-height: 1.5;
}

/* Links List (Monochrome SVGs, No Colorful Borders, No Emojis) */
.founder-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.founder-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(46, 8, 21, 0.1);
  border-radius: 10px;
  text-decoration: none;
  color: #2E0815;
  transition: all 0.2s ease;
}

.founder-link-item:hover {
  background: #FAF7F2;
  border-color: #2E0815;
  transform: translateY(-1px);
}

.founder-link-icon {
  width: 17px;
  height: 17px;
  stroke: #7D1D3F;
  flex-shrink: 0;
}

.founder-link-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.founder-link-label {
  font-family: var(--font-label, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #866A73;
}

.founder-link-val {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: #2E0815;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.founder-link-arrow {
  font-size: 0.85rem;
  color: #866A73;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.founder-link-item:hover .founder-link-arrow {
  transform: translate(2px, -2px);
  color: #2E0815;
}

/* Skills Strip */
.founder-skills-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FAF7F2;
  border: 1px solid rgba(46, 8, 21, 0.08);
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.skills-strip-label {
  font-family: var(--font-label, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7D1D3F;
}

.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.founder-tag {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.74rem;
  font-weight: 600;
  color: #46303A;
  background: #FFFFFF;
  border: 1px solid rgba(46, 8, 21, 0.1);
  border-radius: 6px;
  padding: 4px 10px;
}

/* Footer Controls */
.founder-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(46, 8, 21, 0.1);
  gap: 12px;
}

.replay-intro-btn {
  background: transparent;
  border: 1px solid rgba(46, 8, 21, 0.14);
  border-radius: 100px;
  padding: 7px 18px;
  font-family: var(--font-label, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  color: #6E5560;
  cursor: pointer;
  transition: all 0.2s ease;
}

.replay-intro-btn:hover {
  background: #2E0815;
  color: #FFFFFF;
  border-color: #2E0815;
}

.founder-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.founder-close-link-btn {
  background: transparent;
  border: none;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  color: #866A73;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 6px 10px;
}

.founder-close-link-btn:hover {
  color: #2E0815;
}

.founder-agency-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2E0815;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.founder-agency-btn:hover {
  background: #7D1D3F;
  transform: translateY(-1px);
}

/* Responsive queries */
@media (max-width: 768px) {
  .dageroz-card.dageroz-founder-card {
    padding: 24px 20px;
    width: 98vw;
    border-radius: 20px;
  }
  .apple-hello-word {
    font-size: 4rem;
  }
  .apple-hello-cursor {
    font-size: 3rem;
  }
  .apple-typewriter-text {
    font-size: 1rem;
  }
  .founder-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .founders-vertical-split {
    grid-template-columns: 1fr 1px 1fr;
    gap: 10px;
  }
  .founders-vertical-divider {
    width: 1px;
    height: auto;
    min-height: 100%;
    margin: 0;
  }
  .founder-card-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .founder-footer-actions {
    flex-direction: column;
    width: 100%;
  }
  .founder-agency-btn,
  .replay-intro-btn,
  .founder-close-link-btn {
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE MEDIA QUERIES (Hero, 4-Card, Philosophy & Dageroz)
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .inspire-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .inspire-docked-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .inspire-philosophy-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .philosophy-quote-wrap {
    border-left: none;
    border-top: 2px solid var(--gold-500, #c9962e);
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 768px) {
  .inspire-hero-stage {
    min-height: auto;
    padding-bottom: 0;
  }

  .inspire-hero-container {
    padding: 40px 18px 24px;
  }

  .inspire-vertical-words {
    display: none;
  }

  .inspire-scroll-prompt {
    display: none;
  }

  .inspire-docked-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .inspire-dock-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
    justify-content: flex-start;
  }

  /* 2 at a time (2x2 grid) for Showcase Cornerstones on Mobile */
  .inspire-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 10px !important;
  }

  .modern-pillar-card {
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .pillar-card-media {
    width: calc(100% - 12px) !important;
    margin: 6px 6px 0 !important;
    aspect-ratio: 16 / 11 !important;
    border-radius: 13px !important;
  }

  .pillar-card-num {
    top: 6px !important;
    right: 6px !important;
    font-size: 0.58rem !important;
    padding: 2px 7px !important;
  }

  .pillar-card-body {
    padding: 10px 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .pillar-card-title {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
    font-weight: 700 !important;
  }

  .pillar-card-desc {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: block !important;
    color: var(--ink-700, #46303a) !important;
    text-overflow: clip !important;
  }

  .pillar-card-chips {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pillar-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(0.50rem, 2.1vw, 0.62rem) !important;
    padding: 2.5px 3px !important;
    border-radius: 5px !important;
    line-height: 1.2 !important;
  }

  .pillar-card-action {
    padding-top: 8px !important;
    font-size: 0.72rem !important;
    margin-top: auto !important;
  }

  .pillar-card-action .action-circle {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.76rem !important;
  }

  @media (max-width: 360px) {
    .inspire-showcase-grid {
      gap: 8px 6px !important;
    }
    .modern-pillar-card {
      border-radius: 14px !important;
    }
    .pillar-card-media {
      width: calc(100% - 8px) !important;
      margin: 4px 4px 0 !important;
      border-radius: 10px !important;
    }
    .pillar-card-body {
      padding: 8px 6px 10px !important;
    }
    .pillar-card-title {
      font-size: 0.80rem !important;
    }
    .pillar-card-chips {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 3px !important;
    }
  }

  .inspire-showcase-card {
    min-height: 360px;
  }

  /* 2 at a time (2x2 grid) for Philosophy Value Cards on Mobile */
  .philosophy-values-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .philosophy-value-chip {
    padding: 11px 10px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .philosophy-value-chip .value-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
  }

  .philosophy-value-chip .value-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .philosophy-value-chip .value-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .philosophy-value-chip .value-text strong {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .philosophy-value-chip .value-text span {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  @media (max-width: 360px) {
    .philosophy-values-row {
      gap: 6px !important;
    }
    .philosophy-value-chip {
      padding: 9px 6px !important;
      gap: 6px !important;
    }
    .philosophy-value-chip .value-icon {
      width: 28px !important;
      height: 28px !important;
    }
    .philosophy-value-chip .value-icon svg {
      width: 15px !important;
      height: 15px !important;
    }
    .philosophy-value-chip .value-text strong {
      font-size: 0.78rem !important;
    }
    .philosophy-value-chip .value-text span {
      font-size: 0.62rem !important;
    }
  }

  .dageroz-features-grid {
    grid-template-columns: 1fr;
  }

  .dageroz-card {
    padding: 26px 20px;
  }

  .dageroz-float-btn {
    bottom: 20px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   LAPTOP VIEW MEGA MENU OVERLAY & TRIGGER (Vestra Reference Match)
   ========================================================================== */
.header-left-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dps-mega-trigger-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(253, 247, 250, 0.5) 50%, rgba(125, 29, 63, 0.09) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(125, 29, 63, 0.18);
  padding: 8px 18px;
  border-radius: 9999px;
  font-family: var(--font-label, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine-900, #47102a);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(46, 8, 21, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.dps-mega-trigger-pill:hover {
  background: var(--wine-700, #7d1d3f);
  border-color: var(--wine-700, #7d1d3f);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(116, 25, 94, 0.35);
}

.dps-mega-trigger-pill.is-open {
  background: var(--wine-950, #2e0815);
  border-color: var(--wine-950, #2e0815);
  color: #ffffff;
}

.dps-mega-trigger-pill .trigger-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* Full Overlay Container */
.dps-mega-overlay {
  position: fixed;
  inset: 0;
  z-index: 99950;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dps-mega-overlay.active {
  pointer-events: auto;
  opacity: 1;
}

.dps-mega-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 5, 14, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Floating Elevated Card */
.dps-mega-card {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%) translateY(-18px);
  width: calc(100% - 3cm);
  max-width: 1260px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: linear-gradient(165deg, rgba(253, 248, 238, 0.96) 0%, rgba(247, 240, 226, 0.92) 50%, rgba(249, 236, 241, 0.88) 100%);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  border: 1px solid rgba(217, 184, 138, 0.45);
  border-radius: 28px;
  box-shadow:
    0 32px 80px -16px rgba(46, 8, 21, 0.22),
    inset 0 1px 2px rgba(255, 250, 238, 0.95);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
}

.dps-mega-overlay.active .dps-mega-card {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Card Header */
.dps-mega-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 38px 18px;
  border-bottom: 1px solid rgba(116, 25, 94, 0.08);
}

.mega-header-title {
  font-family: var(--font-label, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wine-950, #2e0815);
}

.mega-card-close-btn {
  background: none;
  border: none;
  font-family: var(--font-label, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wine-700, #7d1d3f);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.mega-card-close-btn:hover {
  color: var(--wine-950, #2e0815);
  transform: scale(1.05);
}

/* 4-Column Directory Grid */
.dps-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding: 34px 38px 40px;
}

.dps-mega-col {
  display: flex;
  flex-direction: column;
}

.mega-col-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(116, 25, 94, 0.06);
}

.mega-col-num {
  font-family: var(--font-label, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--wine-600, #9c274b);
}

.mega-col-title {
  font-family: var(--font-label, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wine-950, #2e0815);
}

.mega-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.mega-link-list a {
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--wine-950, #2e0815);
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
  line-height: 1.35;
}

.mega-link-list a:hover {
  color: var(--saffron-600, #c45b18);
  transform: translateX(4px);
}

/* Card Footer */
.dps-mega-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 38px;
  background: rgba(116, 25, 94, 0.03);
  border-top: 1px solid rgba(116, 25, 94, 0.08);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

.mega-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(254, 248, 251, 0.6) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(125, 29, 63, 0.16);
  padding: 8px 18px;
  border-radius: 9999px;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: #2E0815;
  box-shadow: 0 4px 16px -4px rgba(46, 8, 21, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.mega-badge-pill .kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E8641B;
  box-shadow: 0 0 0 3px rgba(232, 100, 27, 0.2);
}

.mega-footer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mega-portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, rgba(145, 35, 75, 0.95) 0%, rgba(105, 22, 52, 0.98) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 10px 24px;
  border-radius: 9999px;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 24px -6px rgba(125, 29, 63, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.mega-portal-btn:hover {
  background: linear-gradient(135deg, rgba(165, 42, 85, 0.98) 0%, rgba(125, 29, 63, 1) 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -6px rgba(125, 29, 63, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Responsive adjustment for mega menu */
@media (max-width: 1024px) {
  .dps-mega-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding: 28px 24px;
  }
  .dps-mega-card {
    width: calc(100% - 24px);
    top: 72px;
  }
}

@media (max-width: 640px) {
  .dps-mega-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 18px;
  }
  .dps-mega-card-header,
  .dps-mega-card-footer {
    padding: 16px 18px;
  }
}

/* End of Editorial Frames (Dark mode removed - pure luxury light liquid glass aesthetic) */



/* =========================================================================
   Z-BLACK PURE SHADER BACKDROP & FOUNDER CARD
   ========================================================================= */
.dageroz-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000000 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

.dageroz-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dageroz-backdrop {
  position: absolute;
  inset: 0;
  background: #000000 !important;
  overflow: hidden;
}

/* WebGL Bloomed Pixel Flower Canvas */
.dageroz-flower-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Luxury Architectural Founder Card */
.dageroz-card.dageroz-founder-card {
  position: relative;
  z-index: 2;
  width: 95vw;
  max-width: 880px;
  max-height: 90vh;
  background: rgba(14, 14, 18, 0.88);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow:
    0 32px 85px -15px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(196, 50, 126, 0.18);
  padding: 36px 40px;
  color: #FDFBF7;
  overflow-y: auto;
  transform: scale(0.95) translateY(18px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, background 0.45s ease, border-color 0.45s ease;
}

.dageroz-modal.active .dageroz-card.dageroz-founder-card {
  transform: scale(1) translateY(0);
}

/* Card is completely transparent during intro so glowing flower shines on Z-Black */
.dageroz-card.dageroz-founder-card.is-intro-playing {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dageroz-founder-card .dageroz-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-size: 1.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  line-height: 1;
}

.dageroz-founder-card .dageroz-close-btn:hover {
  background: #C4327E;
  border-color: #C4327E;
  color: #FFFFFF;
  transform: rotate(90deg);
}

/* =========================================================================
   PHASE 1: APPLE "HELLO" TYPING INTRO STYLING (Center -> Upper Shift -> Text 2)
   ========================================================================= */
.dageroz-apple-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 30px 16px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.dageroz-apple-intro.intro-complete {
  display: none !important;
}

/* Apple Hello Center Stage */
.apple-hello-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  width: 100%;
  position: relative;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-hello-wrap {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-hello-word {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: clamp(4.5rem, 12vw, 8.5rem);
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  text-shadow: 0 0 35px rgba(196, 50, 126, 0.65), 0 0 70px rgba(255, 217, 138, 0.35);
}

.apple-hello-cursor {
  font-family: monospace;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  font-weight: 300;
  color: #FFD98A;
  margin-left: 4px;
  line-height: 1;
  animation: appleCursorBlink 0.7s infinite step-end;
}

/* STAGE 3: Smooth translation upwards */
.apple-hello-stage.is-shifted-up .apple-hello-wrap {
  transform: translateY(-55px);
}

/* Second Typing Line */
.apple-typewriter-container {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin: 20px auto 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.apple-hello-stage.is-shifted-up .apple-typewriter-container {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.apple-typewriter-text {
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}

.apple-typewriter-cursor {
  font-family: monospace;
  font-size: 1.45rem;
  font-weight: 400;
  color: #FFD98A;
  margin-left: 2px;
  animation: appleCursorBlink 0.7s infinite step-end;
}

@keyframes appleCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.dageroz-skip-intro-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 8px 24px;
  font-family: var(--font-label, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFD98A;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.08em;
  margin-top: 24px;
}

.dageroz-skip-intro-btn:hover {
  background: #C4327E;
  color: #FFFFFF;
  border-color: #C4327E;
  transform: translateY(-1px);
}

/* =========================================================================
   PHASE 2: STUDENT FREELANCER FOUNDER PROFILE FRAME (Dark Luxury Glass)
   ========================================================================= */
.dageroz-founder-content {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dageroz-founder-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.founder-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 20px;
}

.founder-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.founder-brand-row .dageroz-logo-symbol {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.founder-brand-row .dageroz-vector-logo {
  width: 44px;
  height: 44px;
}

.founder-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD98A;
  margin-bottom: 3px;
}

.founder-kicker-pill .kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFD98A;
}

.founder-agency-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0;
}

.founder-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: #FFD98A;
  background: rgba(196, 50, 126, 0.16);
  border: 1px solid rgba(196, 50, 126, 0.35);
  padding: 6px 14px;
  border-radius: 100px;
}

.founder-live-pill .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
  animation: pulseDot 2s infinite;
}

.founder-headline-bar {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.founder-subhead-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.founders-vertical-split {
  display: grid !important;
  grid-template-columns: 1fr 1px 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
  position: relative !important;
  margin-bottom: 22px !important;
}

.founders-vertical-split::before {
  display: none !important;
}

.founders-vertical-divider {
  display: block !important;
  width: 1px !important;
  height: 100% !important;
  min-height: 100% !important;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(255, 217, 138, 0.45) 15%, 
    rgba(255, 217, 138, 0.95) 50%, 
    rgba(255, 217, 138, 0.45) 85%, 
    transparent 100%
  ) !important;
  box-shadow: 0 0 10px rgba(255, 217, 138, 0.4) !important;
}

.founder-col {
  display: flex;
  flex-direction: column;
}

.founder-profile-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.founder-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
  background: #000;
}

.founder-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-role-tag {
  display: inline-block;
  font-family: var(--font-label, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #FFD98A;
  margin-bottom: 2px;
}

.founder-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px;
}

.founder-subrole {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

.founder-quote {
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 20px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #C4327E;
  border-radius: 0 8px 8px 0;
}

.founder-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.founder-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.2s ease;
}

.founder-link-item:hover {
  background: rgba(196, 50, 126, 0.18);
  border-color: rgba(196, 50, 126, 0.4);
  transform: translateX(4px);
}

.founder-link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #FFD98A;
}

.founder-link-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.founder-link-label {
  font-family: var(--font-label, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.founder-link-val {
  font-size: 0.84rem;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.founder-link-arrow {
  color: #FFD98A;
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .founders-vertical-split {
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 10px !important;
  }
  .founders-vertical-divider {
    width: 1px !important;
    height: auto !important;
    min-height: 100% !important;
    background: linear-gradient(180deg, 
      transparent 0%, 
      rgba(255, 217, 138, 0.45) 15%, 
      rgba(255, 217, 138, 0.95) 50%, 
      rgba(255, 217, 138, 0.45) 85%, 
      transparent 100%
    ) !important;
    margin: 0 !important;
  }
}

/* =========================================================================
   12. HERITAGE ARCHIVAL SCRAPBOOK ALBUM STYLING (Chapter-Divided Polaroids)
   ========================================================================= */
.scrapbook-album-section {
  background: #FAF8F5;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(125, 29, 63, 0.02) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255, 217, 138, 0.04) 0%, transparent 40%);
  padding: 60px 0 100px;
  position: relative;
}

/* Control Dock: Sticky or Elevated Header & Category Navigation */
.scrapbook-control-dock {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(46, 8, 21, 0.1);
  border-radius: 24px;
  padding: 32px 36px;
  margin-bottom: 50px;
  box-shadow: 
    0 20px 45px -10px rgba(46, 8, 21, 0.08),
    0 4px 12px rgba(46, 8, 21, 0.03);
}

.scrapbook-dock-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 26px;
}

.scrapbook-dock-header .sec-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: #2E0815;
  margin: 8px 0 12px;
  line-height: 1.25;
}

.scrapbook-dock-header .sec-lead {
  font-size: 0.98rem;
  color: #6E5560;
  line-height: 1.6;
  margin: 0;
}

/* Category Filter Tabs Bar */
.scrapbook-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.scrapbook-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 240, 235, 0.7);
  border: 1px solid rgba(46, 8, 21, 0.12);
  border-radius: 100px;
  padding: 8px 16px;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  color: #46303A;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.scrapbook-filter-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #7D1D3F;
  color: #7D1D3F;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 8, 21, 0.08);
}

.scrapbook-filter-btn .btn-tab-count {
  font-family: var(--font-label, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(125, 29, 63, 0.08);
  color: #7D1D3F;
  border-radius: 100px;
  padding: 2px 7px;
  transition: all 0.25s ease;
}

.scrapbook-filter-btn.active {
  background: #2E0815;
  border-color: #2E0815;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(46, 8, 21, 0.22);
  transform: translateY(-1px);
}

.scrapbook-filter-btn.active .btn-tab-count {
  background: #FFD98A;
  color: #2E0815;
  font-weight: 800;
}

/* Scrapbook Album Book & Chapters */
.scrapbook-album-book {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.scrapbook-chapter {
  position: relative;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.scrapbook-chapter.hidden-chapter {
  display: none !important;
}

/* Chapter Heading */
.scrapbook-chapter-header {
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(46, 8, 21, 0.12);
  position: relative;
}

.chapter-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.chapter-number-stamp {
  font-family: var(--font-label, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7D1D3F;
  background: rgba(125, 29, 63, 0.08);
  border: 1px solid rgba(125, 29, 63, 0.2);
  padding: 4px 10px;
  border-radius: 6px;
}

.chapter-dots-line {
  width: 24px;
  height: 2px;
  background: repeating-linear-gradient(to right, #7D1D3F 0, #7D1D3F 3px, transparent 3px, transparent 6px);
}

.chapter-count-pill {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  color: #866A73;
}

.chapter-titles-row .chapter-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
  color: #2E0815;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.chapter-titles-row .chapter-lead {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.92rem;
  color: #6E5560;
  margin: 0;
  line-height: 1.55;
  max-width: 820px;
}

/* Scrapbook Cards Grid */
.scrapbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 36px 28px;
  align-items: start;
}

/* Scrapbook Card (Authentic Polaroid / Archival Memory Mount) */
.scrapbook-card {
  position: relative;
  background: #FFFFFF;
  padding: 14px 14px 22px 14px;
  border-radius: 4px;
  border: 1px solid rgba(46, 8, 21, 0.1);
  box-shadow: 
    0 10px 25px -6px rgba(46, 8, 21, 0.1),
    0 3px 8px rgba(46, 8, 21, 0.05);
  cursor: pointer;
  outline: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.35s;
  display: flex;
  flex-direction: column;
}

/* Alternating Handcrafted Organic Scrapbook Rotations */
.scrapbook-card:nth-child(6n + 1) { transform: rotate(-1.5deg); }
.scrapbook-card:nth-child(6n + 2) { transform: rotate(1.2deg); }
.scrapbook-card:nth-child(6n + 3) { transform: rotate(-0.8deg); }
.scrapbook-card:nth-child(6n + 4) { transform: rotate(1.7deg); }
.scrapbook-card:nth-child(6n + 5) { transform: rotate(-1.3deg); }
.scrapbook-card:nth-child(6n + 6) { transform: rotate(0.9deg); }

/* Tactile Washi Tape Strip */
.scrapbook-washi-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 72px;
  height: 18px;
  background: rgba(255, 245, 224, 0.85);
  border-left: 2px dashed rgba(196, 50, 126, 0.28);
  border-right: 2px dashed rgba(196, 50, 126, 0.28);
  box-shadow: 0 2px 6px rgba(46, 8, 21, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 3;
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* Card Hover Lift State */
.scrapbook-card:hover,
.scrapbook-card:focus-visible {
  transform: rotate(0deg) translateY(-10px) scale(1.03) !important;
  z-index: 10 !important;
  box-shadow: 
    0 26px 55px -10px rgba(46, 8, 21, 0.22),
    0 8px 20px -4px rgba(125, 29, 63, 0.15),
    0 0 22px rgba(255, 217, 138, 0.35) !important;
}

.scrapbook-card:hover .scrapbook-washi-tape {
  transform: translateX(-50%) rotate(0deg);
}

/* Photo Wrap */
.scrapbook-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
  background: #1A0D13;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.scrapbook-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.scrapbook-card:hover .scrapbook-photo-wrap img {
  transform: scale(1.06);
}

/* Zoom Magnifier Pill */
.scrapbook-zoom-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(22, 5, 14, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.25s ease;
}

.scrapbook-zoom-indicator svg {
  width: 16px;
  height: 16px;
  stroke: #FFD98A;
}

.scrapbook-card:hover .scrapbook-zoom-indicator {
  opacity: 1;
  transform: scale(1);
}

/* Card Caption (Handwritten Archival Vibe) */
.scrapbook-card-caption {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scrapbook-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.scrapbook-stamp {
  font-family: var(--font-label, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #866A73;
}

.scrapbook-cat-chip {
  font-family: var(--font-label, monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7D1D3F;
  background: rgba(125, 29, 63, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.scrapbook-photo-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #2E0815;
  line-height: 1.3;
  margin: 0;
}

.scrapbook-photo-note {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.8rem;
  color: #5A424B;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 768px) {
  .scrapbook-control-dock {
    padding: 22px 18px;
    border-radius: 18px;
  }
  .scrapbook-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .scrapbook-card {
    transform: none !important;
  }
  .scrapbook-filter-bar {
    gap: 8px;
  }
  .scrapbook-filter-btn {
    font-size: 0.78rem;
    padding: 7px 13px;
  }
}



/* =========================================================================
   DAGEROZ OFFICIAL LOGO STYLING (assets/dageroz-logo.png)
   ========================================================================= */
.dageroz-logo-symbol {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto !important;
  height: auto !important;
}

.dageroz-img-logo {
  height: 42px;
  width: auto;
  max-width: 105px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.4));
  transition: transform 0.25s ease;
}

.dageroz-img-logo:hover {
  transform: scale(1.05);
}

.dfb-logo-img {
  width: 32px;
  height: auto;
  max-height: 26px;
  object-fit: contain;
  filter: brightness(1.15) drop-shadow(0 1px 4px rgba(217, 184, 138, 0.65));
  pointer-events: none;
  transition: transform 0.25s ease;
}

.dageroz-float-btn:hover .dfb-logo-img {
  transform: scale(1.1);
}

.founder-agency-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
}

.agency-btn-mini-logo {
  height: 18px;
  width: auto;
  max-width: 38px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}


/* =========================================================================
   IMPERIAL THEATRICAL CURTAIN OPENING & RECTANGULAR LIQUID GLASS PRELOADER
   (Liquid Glassmorphism, Butter Yellow #FFD98A / #FFF3B0, Deep Wine #7D1D3F / #2E0815)
   ========================================================================= */
html.dps-loaded #gateLoader,
html.dps-loaded .dps-gate-loader,
html.dps-loaded .dps-curtain-loader,
html.dps-loaded .dps-logo-loader {
  display: none !important;
}

.dps-gate-loader,
.dps-curtain-loader,
.dps-logo-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(255, 252, 246, 0.98) 0%, rgba(250, 244, 232, 0.96) 60%, rgba(245, 236, 222, 0.98) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.dps-gate-loader.gate-open,
.dps-curtain-loader.gate-open,
.dps-logo-loader.gate-open {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.02);
}

.dps-gate-loader.gate-done,
.dps-curtain-loader.gate-done,
.dps-logo-loader.gate-done {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Permanent disable of theatrical stage curtains: loading animation is the School Logo with Name */
.curtain-panel-left,
.curtain-panel-right,
.curtain-top-valance,
.curtain-fabric,
.curtain-pleats,
.curtain-sheen,
.curtain-edge-braid {
  display: none !important;
}

/* ---------------------------------------------------------
   Sleek Rectangular Console Card (Wise Horizontal Space Layout)
   --------------------------------------------------------- */
.gate-center-stage.gate-rect-stage {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 22px 28px;
  max-width: 680px;
  width: 92vw;
  min-height: 168px;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(253, 249, 240, 0.95) 0%, rgba(248, 242, 230, 0.90) 50%, rgba(250, 238, 242, 0.92) 100%);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1.5px solid rgba(255, 243, 218, 0.85);
  box-shadow:
    0 12px 36px -8px rgba(46, 8, 21, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
  gap: 22px;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.dps-gate-loader.gate-open .gate-center-stage,
.dps-curtain-loader.gate-open .gate-center-stage {
  transform: scale(1.05) translateY(-8px);
  opacity: 0;
  pointer-events: none;
}

/* Left Column: School Crest Disc & Estd Badge */
.gate-rect-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  border-right: 1px solid rgba(255, 217, 138, 0.6);
  padding-right: 20px;
}

.gate-rect-left .gate-emblem-wrap {
  position: relative;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
}

.gate-rect-left .gate-emblem-halo {
  display: none !important;
  animation: none !important;
}

.gate-rect-left .gate-emblem-disc {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF8 100%);
  border: 1.5px solid rgba(125, 29, 63, 0.18);
  box-shadow: 0 3px 10px rgba(46, 8, 21, 0.08), inset 0 1px 1px #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gate-rect-left .gate-crest-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(46, 8, 21, 0.12));
}

.gate-rect-estd-pill {
  font-family: var(--font-label, monospace);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7D1D3F;
  background: rgba(255, 217, 138, 0.35);
  border: 1px solid rgba(255, 217, 138, 0.75);
  border-radius: 100px;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Right Column: Titles, Meta, and Inline Controls */
.gate-rect-right {
  flex: 1;
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gate-rect-header {
  margin-bottom: 10px;
}

.gate-kicker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.gate-kicker {
  font-family: var(--font-label, monospace);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #7D1D3F;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7D1D3F;
  box-shadow: none !important;
  display: inline-block;
  animation: none !important;
}

.gate-session-chip {
  font-family: var(--font-label, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  color: #7D1D3F;
  background: rgba(125, 29, 63, 0.06);
  border: 1px solid rgba(125, 29, 63, 0.16);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

.gate-school-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: #2E0815;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 3px;
}

.gate-lead-tag {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(46, 8, 21, 0.7);
  letter-spacing: 0.03em;
  margin: 0;
}

/* Inline Horizontal Controls: Progress Bar + Action Button */
.gate-rect-controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
}

.gate-rect-controls .gate-loader-bar-wrap {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.gate-loader-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-family: var(--font-label, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  color: #7D1D3F;
  letter-spacing: 0.05em;
}

.gate-loader-track {
  width: 100%;
  height: 5px;
  border-radius: 10px;
  background: rgba(46, 8, 21, 0.08);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gate-loader-fill {
  width: 0%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #7D1D3F 0%, #A52B55 100%) !important;
  box-shadow: none !important;
  transition: width 0.1s linear;
  position: relative;
}

.gate-loader-fill::after {
  display: none !important;
  animation: none !important;
}

.gate-skip-btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(125, 29, 63, 0.28);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--font-label, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7D1D3F;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0;
}

.gate-skip-btn:hover {
  background: #7D1D3F;
  color: #FFF3B0;
  border-color: #7D1D3F;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(125, 29, 63, 0.25);
}

.gate-btn-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.gate-skip-btn:hover .gate-btn-arrow {
  transform: translateX(3px);
}

/* ---------------------------------------------------------
   Responsive Adaptations
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .gate-center-stage.gate-rect-stage {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
    gap: 14px;
    max-width: 440px;
    width: 90vw;
  }
  .gate-rect-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 217, 138, 0.5);
    padding-right: 0;
    padding-bottom: 12px;
  }
  .gate-rect-right {
    text-align: center;
    width: 100%;
  }
  .gate-kicker-row {
    justify-content: center;
    gap: 10px;
  }
  .gate-rect-controls {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .gate-rect-controls .gate-loader-bar-wrap {
    width: 100%;
  }
  .gate-skip-btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================================
   SKILLS MATRIX & MODAL FOOTER (Ultra-High Contrast Butter Gold & Pure White)
   ========================================================================= */
.founder-subhead-text {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
}

.founder-headline-bar {
  margin-bottom: 22px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.founder-quote {
  font-style: italic !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 0 16px !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-left: 3px solid #FFD98A !important;
  border-radius: 0 10px 10px 0 !important;
}

.founder-subrole {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

.founder-link-label {
  color: #FFD98A !important;
  font-family: var(--font-label, monospace) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.founder-link-val {
  color: #FFFFFF !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
}

.founder-link-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.founder-link-item:hover {
  background: rgba(196, 50, 126, 0.22) !important;
  border-color: rgba(255, 217, 138, 0.5) !important;
  transform: translateX(4px) !important;
}

.founder-skills-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  margin: 18px 0 22px !important;
  flex-wrap: wrap !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.skills-strip-label {
  font-family: var(--font-label, monospace) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #FFD98A !important;
  text-shadow: 0 0 10px rgba(255, 217, 138, 0.4) !important;
}

.skills-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.founder-tag {
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
}

.founder-tag:hover {
  background: rgba(196, 50, 126, 0.25) !important;
  border-color: rgba(255, 217, 138, 0.5) !important;
  color: #FFD98A !important;
  transform: translateY(-1px) !important;
}

.founder-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  gap: 14px !important;
}

.replay-intro-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 217, 138, 0.35) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-family: var(--font-label, monospace) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #FFD98A !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease !important;
}

.replay-intro-btn:hover {
  background: rgba(255, 217, 138, 0.18) !important;
  border-color: #FFD98A !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(255, 217, 138, 0.35) !important;
}

.founder-footer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.founder-close-link-btn {
  background: transparent !important;
  border: none !important;
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  cursor: pointer !important;
  padding: 6px 12px !important;
  transition: color 0.2s ease !important;
}

.founder-close-link-btn:hover {
  color: #FFD98A !important;
}

.founder-agency-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #7D1D3F 0%, #C4327E 50%, #9B2C5B 100%) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: 9px 20px !important;
  border-radius: 100px !important;
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(255, 217, 138, 0.45) !important;
  box-shadow: 0 8px 24px rgba(196, 50, 126, 0.35) !important;
  transition: all 0.25s ease !important;
}

.founder-agency-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(196, 50, 126, 0.55), 0 0 15px rgba(255, 217, 138, 0.4) !important;
  border-color: #FFD98A !important;
}

/* Instantaneous Background Blur on Mega Menu Open (Zero 1-Second Delay) */
body.dps-menu-active main,
body.dps-menu-active header,
body.dps-menu-active footer {
  filter: blur(10px) brightness(0.92) !important;
  transition: filter 0.12s ease-out !important;
  will-change: filter;
}

.dps-mega-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99950 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.14s ease-out, visibility 0.14s ease-out !important;
}

.dps-mega-overlay.active {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.dps-mega-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(22, 5, 14, 0.52) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  will-change: opacity !important;
}


/* ==========================================================================
   LIQUID GLASS PREMIUM COOKIE DOCK (Matches Menu Page Aesthetic)
   ========================================================================== */
.cookie-dock {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  z-index: 9990 !important;
  max-width: 680px !important;
  width: calc(100% - 100px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.cookie-dock-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 13px 20px !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(254, 248, 251, 0.86) 50%, rgba(125, 29, 63, 0.08) 100%) !important;
  backdrop-filter: blur(34px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 24px 60px -12px rgba(46, 8, 21, 0.22),
    0 4px 16px rgba(46, 8, 21, 0.08),
    0 0 15px rgba(255, 217, 138, 0.28) !important;
  animation: cookieDockSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes cookieDockSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cookie-dock-copy {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.82rem !important;
  color: #46303A !important;
  line-height: 1.45 !important;
  flex: 1 !important;
  min-width: 220px !important;
}

.cookie-kicker-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-label, monospace) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #7D1D3F !important;
  background: rgba(125, 29, 63, 0.08) !important;
  border: 1px solid rgba(125, 29, 63, 0.18) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.cookie-kicker-pill .kicker-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #7D1D3F !important;
}

.cookie-dock-copy a {
  color: #7D1D3F !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s ease !important;
}

.cookie-dock-copy a:hover {
  color: #2E0815 !important;
}

.cookie-dock-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.cookie-btn-accept,
#cookieAcceptBtn {
  background: linear-gradient(135deg, #7D1D3F 0%, #C4327E 50%, #9B2C5B 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 217, 138, 0.45) !important;
  border-radius: 100px !important;
  padding: 7px 18px !important;
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 15px rgba(196, 50, 126, 0.28) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cookie-btn-accept:hover,
#cookieAcceptBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(196, 50, 126, 0.45), 0 0 12px rgba(255, 217, 138, 0.4) !important;
}

.cookie-btn-decline,
#cookieDeclineBtn {
  background: rgba(46, 8, 21, 0.04) !important;
  color: #46303A !important;
  border: 1px solid rgba(46, 8, 21, 0.12) !important;
  border-radius: 100px !important;
  padding: 7px 14px !important;
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cookie-btn-decline:hover,
#cookieDeclineBtn:hover {
  background: rgba(46, 8, 21, 0.08) !important;
  border-color: #2E0815 !important;
  color: #2E0815 !important;
}

@media (max-width: 640px) {
  .cookie-dock {
    width: calc(100% - 24px) !important;
    left: 12px !important;
    bottom: 12px !important;
  }
  .cookie-dock-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }
  .cookie-dock-actions {
    justify-content: flex-end !important;
    width: 100% !important;
  }
  .cookie-btn-accept, #cookieAcceptBtn,
  .cookie-btn-decline, #cookieDeclineBtn {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* =========================================================================
   GLOBAL OVERRIDES: NO COLOURFUL DOTS ANYWHERE
   ========================================================================= */
.pulse-dot,
.kicker-dot,
.status-dot,
.avail-dot,
.dot,
.dot-pulse {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================================
   APPLE HELLO INTRO: INLINE TYPING CURSOR (Never detached from text)
   ========================================================================= */
.apple-typewriter-container {
  min-height: 52px;
  display: block !important;
  text-align: center !important;
  max-width: 680px;
  margin: 18px auto 0 !important;
  padding: 0 16px;
}

.apple-typewriter-text {
  display: inline !important;
  vertical-align: baseline !important;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.1rem, 2.4vw, 1.38rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  letter-spacing: -0.01em;
}

.apple-typewriter-cursor {
  display: inline-block !important;
  vertical-align: baseline !important;
  font-family: monospace;
  font-size: 1.3em;
  line-height: 1;
  font-weight: 300;
  color: #FFD98A;
  margin-left: 3px;
  animation: appleCursorBlink 0.65s infinite step-end;
}

/* =========================================================================
   FOUNDER MODAL: WARM TINTED SHADE, NO MORE AI-GENERATED SQUARES (MINIMAL & BESPOKE)
   ========================================================================= */
.dageroz-modal {
  background: radial-gradient(circle at 50% 15%, rgba(125, 29, 63, 0.24) 0%, transparent 65%),
              linear-gradient(170deg, #1A050F 0%, #0F0309 60%, #070104 100%) !important;
}

.dageroz-backdrop {
  background: radial-gradient(circle at 50% 15%, rgba(125, 29, 63, 0.24) 0%, transparent 65%),
              linear-gradient(170deg, #1A050F 0%, #0F0309 60%, #070104 100%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

.dageroz-card.dageroz-founder-card {
  background: linear-gradient(165deg, rgba(46, 8, 21, 0.88) 0%, rgba(26, 5, 14, 0.94) 50%, rgba(14, 2, 7, 0.97) 100%) !important;
  border: 1.5px solid rgba(255, 217, 138, 0.28) !important;
  box-shadow:
    0 30px 80px -15px rgba(0, 0, 0, 0.85),
    0 0 50px rgba(125, 29, 63, 0.28),
    inset 0 1px 1.5px rgba(255, 243, 176, 0.35) !important;
  border-radius: 28px !important;
}

/* Redesign Links: Minimal, Elegant Editorial Rows (No Heavy Boxed Cards!) */
.founder-link-card,
.founder-links-list .founder-link-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 217, 138, 0.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.22s ease !important;
}

.founder-link-card:hover {
  background: rgba(255, 217, 138, 0.05) !important;
  border-bottom-color: rgba(255, 217, 138, 0.45) !important;
  padding-left: 10px !important;
  transform: none !important;
}

.founder-link-card .founder-link-icon {
  display: none !important;
}

.founder-link-card .founder-link-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px !important;
}

.founder-link-card .founder-link-type {
  font-family: var(--font-label, monospace) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #FFD98A !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.founder-link-card .founder-link-val {
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  text-align: right !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.founder-link-card:hover .founder-link-val {
  color: #FFFFFF !important;
}

.founder-link-card .founder-link-arrow {
  color: #FFD98A !important;
  font-size: 0.85rem !important;
  margin-left: 8px !important;
  transition: transform 0.2s ease !important;
}

.founder-link-card:hover .founder-link-arrow {
  transform: translate(2px, -2px) !important;
}

/* Minimal Skills Strip (No Boxed Buttons) */
.founder-skills-strip {
  background: rgba(255, 217, 138, 0.04) !important;
  border: 1px solid rgba(255, 217, 138, 0.16) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  margin-top: 20px !important;
  box-shadow: none !important;
}

.skills-tags-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
}

.skills-tags-wrap .skill-tag {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.skills-tags-wrap .skill-tag:not(:last-child)::after {
  content: "\2022";
  margin-left: 14px;
  color: rgba(255, 217, 138, 0.45);
}

/* =========================================================================
   WATER WAVES ENGINE: 5 CONCENTRIC WAVES ON TOP (z-index: 100005)
   ========================================================================= */
.tsunami-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100005 !important;
  pointer-events: none !important;
}

/* =========================================================================
   POLISHED LUXURY GALLERY: CLEAN EDITORIAL MASONRY (NO KITSCHY ROTATIONS OR WASHI TAPE)
   ========================================================================= */
.scrapbook-card {
  position: relative !important;
  background: linear-gradient(165deg, rgba(252, 247, 237, 0.95) 0%, rgba(246, 238, 224, 0.90) 50%, rgba(248, 234, 239, 0.86) 100%) !important;
  padding: 14px 14px 18px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(217, 184, 138, 0.45) !important;
  box-shadow: 0 14px 34px -8px rgba(46, 8, 21, 0.08), inset 0 1px 1.5px rgba(255, 248, 230, 0.9) !important;
  cursor: pointer !important;
  outline: none !important;
  transform: none !important; /* Discard crooked rotations */
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Discard Washi Tape entirely */
.scrapbook-washi-tape {
  display: none !important;
}

/* Polished Card Hover State */
.scrapbook-card:hover,
.scrapbook-card:focus-visible {
  transform: translateY(-8px) !important;
  border-color: rgba(125, 29, 63, 0.4) !important;
  box-shadow:
    0 24px 50px -12px rgba(125, 29, 63, 0.22),
    0 0 28px rgba(255, 217, 138, 0.35),
    inset 0 1px 2px rgba(255, 248, 230, 0.95) !important;
  z-index: 5 !important;
}

.scrapbook-photo-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #EDE8DE !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.scrapbook-photo-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.scrapbook-card:hover .scrapbook-photo-wrap img {
  transform: scale(1.06) !important;
}

/* Interactive View High-Res Badge on Hover */
.scrapbook-zoom-indicator {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(46, 8, 21, 0.32) !important;
  backdrop-filter: blur(2px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  border-radius: 14px !important;
}

.scrapbook-card:hover .scrapbook-zoom-indicator {
  opacity: 1 !important;
}

.scrapbook-zoom-indicator::after {
  content: "\2922  View High-Res";
  font-family: var(--font-label, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2E0815;
  background: rgba(255, 252, 244, 0.94);
  backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid rgba(201, 150, 46, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(6px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.scrapbook-card:hover .scrapbook-zoom-indicator::after {
  transform: translateY(0);
}

/* Polish Scrapbook Filter Bar */
.scrapbook-control-dock {
  background: rgba(255, 252, 244, 0.88) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1.5px solid rgba(217, 184, 138, 0.4) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px -10px rgba(46, 8, 21, 0.08) !important;
  padding: 24px 28px !important;
  margin-bottom: 44px !important;
}

.scrapbook-filter-btn {
  background: rgba(252, 246, 234, 0.85) !important;
  border: 1px solid rgba(217, 184, 138, 0.4) !important;
  color: #7D1D3F !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-family: var(--font-label, monospace) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  transition: all 0.22s ease !important;
  cursor: pointer !important;
}

.scrapbook-filter-btn:hover {
  background: rgba(255, 242, 212, 0.98) !important;
  border-color: #7D1D3F !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(125, 29, 63, 0.15) !important;
}

.scrapbook-filter-btn.active {
  background: #7D1D3F !important;
  color: #FFF3B0 !important;
  border-color: #7D1D3F !important;
  box-shadow: 0 8px 22px rgba(125, 29, 63, 0.28) !important;
}

.scrapbook-filter-btn .btn-tab-count {
  background: rgba(125, 29, 63, 0.1) !important;
  color: #7D1D3F !important;
  border-radius: 100px !important;
  padding: 2px 7px !important;
  font-size: 0.65rem !important;
  margin-left: 6px !important;
}

.scrapbook-filter-btn.active .btn-tab-count {
  background: rgba(255, 243, 176, 0.25) !important;
  color: #FFF3B0 !important;
}

/* =========================================================================
   DELUXE LIGHTBOX ENHANCEMENT: HIGH-DEFINITION CINEMATIC VIEWER
   ========================================================================= */
.lightbox-modal {
  z-index: 9999999 !important;
  background: rgba(16, 3, 9, 0.96) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.lightbox-stage {
  position: relative !important;
  width: min(1000px, 94vw) !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  animation: lightboxStageZoom 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes lightboxStageZoom {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.lightbox-main-img {
  max-width: 100% !important;
  max-height: 68vh !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(255, 217, 138, 0.45) !important;
  box-shadow: 
    0 35px 90px -20px rgba(0, 0, 0, 0.95),
    0 0 50px rgba(255, 217, 138, 0.22) !important;
}

.lightbox-meta {
  text-align: center !important;
  color: #FFFFFF !important;
  max-width: 760px !important;
  padding: 0 16px !important;
}

.lightbox-title {
  font-family: var(--font-display, 'Playfair Display', serif) !important;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem) !important;
  font-weight: 700 !important;
  color: #FFF3B0 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px !important;
}

.lightbox-caption {
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.94rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 !important;
}

.lightbox-category-chip {
  display: inline-block !important;
  font-family: var(--font-label, monospace) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #2E0815 !important;
  background: linear-gradient(135deg, #FFD98A 0%, #C9962E 100%) !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  margin: 12px 0 4px !important;
  box-shadow: 0 4px 14px rgba(201, 150, 46, 0.35) !important;
}

.lightbox-counter {
  font-family: var(--font-label, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 217, 138, 0.75) !important;
  margin-top: 6px !important;
}

.lightbox-nav-arrow {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10000005 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 217, 138, 0.45) !important;
  background: rgba(255, 248, 230, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #FFF3B0 !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lightbox-nav-arrow:hover {
  background: #7D1D3F !important;
  border-color: #FFD98A !important;
  color: #FFF3B0 !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 14px 35px rgba(125, 29, 63, 0.45), 0 0 20px rgba(255, 217, 138, 0.35) !important;
}

.lightbox-nav-arrow.prev { left: 24px !important; }
.lightbox-nav-arrow.next { right: 24px !important; }

.lightbox-btn-close {
  position: fixed !important;
  top: 24px !important;
  right: 28px !important;
  z-index: 10000005 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 217, 138, 0.45) !important;
  background: rgba(255, 248, 230, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #FFF3B0 !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lightbox-btn-close:hover {
  background: #7D1D3F !important;
  border-color: #FFD98A !important;
  color: #FFF3B0 !important;
  transform: scale(1.1) rotate(90deg) !important;
  box-shadow: 0 10px 25px rgba(125, 29, 63, 0.45) !important;
}

@media (max-width: 640px) {
  .lightbox-nav-arrow.prev { left: 10px !important; width: 42px !important; height: 42px !important; }
  .lightbox-nav-arrow.next { right: 10px !important; width: 42px !important; height: 42px !important; }
  .lightbox-btn-close { top: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; }
  .lightbox-main-img { max-height: 58vh !important; }
}

/* ==========================================================================
   FINAL POLISH: WARM BUTTER-YELLOW / CHAMPAGNE TINTED LOADER & NO-COLLISION SUITE
   ========================================================================== */

/* 1. Warm Tinted Liquid Glass for Theatrical Curtain Loader Console Card */
.gate-center-stage.gate-rect-stage {
  background: linear-gradient(165deg, rgba(253, 248, 238, 0.96) 0%, rgba(248, 240, 226, 0.94) 50%, rgba(245, 232, 237, 0.92) 100%) !important;
  backdrop-filter: blur(34px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 243, 218, 0.9) !important;
  box-shadow:
    0 24px 60px -12px rgba(46, 8, 21, 0.22),
    0 0 35px rgba(255, 217, 138, 0.35),
    inset 0 0 0 1px rgba(255, 243, 176, 0.6) !important;
}

.gate-rect-left .gate-emblem-disc {
  background: linear-gradient(135deg, #FFFDF8 0%, #FFF3B0 100%) !important;
  border: 2px solid #FFD98A !important;
  box-shadow:
    0 6px 18px rgba(46, 8, 21, 0.12),
    0 0 16px rgba(255, 217, 138, 0.45) !important;
}

/* 2. Eradicate all colourful dots globally */
.pulse-dot,
.kicker-dot,
.status-dot,
.dot,
.founder-live-pill .pulse-dot,
.founder-live-pill::before,
.hero-eyebrow-pill .kicker-dot,
.cookie-kicker-pill .kicker-dot,
.gate-kicker .kicker-dot {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Pure Minimalist Luxury Founder Live Badge */
.founder-live-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #FFD98A !important;
  background: rgba(255, 217, 138, 0.12) !important;
  border: 1px solid rgba(255, 217, 138, 0.35) !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* 4. Typewriter Inline Baseline Cursor (Zero Detachment) */
.apple-typewriter-container {
  min-height: 52px;
  display: block !important;
  text-align: center !important;
  max-width: 680px;
  margin: 18px auto 0 !important;
  padding: 0 16px;
}

.apple-typewriter-text {
  display: inline !important;
  vertical-align: baseline !important;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.1rem, 2.4vw, 1.38rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  letter-spacing: -0.01em;
}

.apple-typewriter-cursor {
  display: inline !important;
  vertical-align: baseline !important;
  font-family: monospace;
  font-size: 1.25em;
  line-height: 1;
  font-weight: 300;
  color: #FFD98A;
  margin-left: 2px !important;
  animation: appleCursorBlink 0.7s infinite step-end;
}

/* 5. Floating DDA Button and Cookie Dock Non-Collision Spacing */
.dageroz-float-btn {
  position: fixed !important;
  z-index: 99990 !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 52px !important;
  height: 52px !important;
}

.cookie-dock {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  z-index: 99980 !important;
  max-width: min(560px, calc(100vw - 110px)) !important;
  width: auto !important;
}

@media (max-width: 640px) {
  .cookie-dock {
    bottom: 84px !important;
    left: 14px !important;
    right: 14px !important;
    max-width: calc(100vw - 28px) !important;
    width: auto !important;
  }
  .dageroz-float-btn {
    bottom: 20px !important;
    right: 16px !important;
  }
}

/* =========================================================================
   CRITICAL FIX: 100% VISIBLE CONTRAST FOR FOUNDER MISSION BAR & BUTTONS
   Eliminates the white-on-white container box from Screenshot 2
   Ensures < Replay Intro and Back to School Portal are 100% clickable & responsive
   ========================================================================= */

/* 1. Eliminate the solid white container box - make it seamless luxury editorial header */
.founder-headline-bar {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 217, 138, 0.18) !important;
  border-radius: 0 !important;
  padding: 0 0 16px 0 !important;
  margin: 0 auto 24px auto !important;
  max-width: 720px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* 2. Text is crystal-clear bright white with high contrast on dark wine obsidian glass */
.founder-subhead-text {
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  line-height: 1.68 !important;
  margin: 0 auto !important;
  max-width: 680px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75) !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3. Footer Buttons: Clickable, Interactive, High Contrast */
.founder-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  gap: 14px !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.replay-intro-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 217, 138, 0.08) !important;
  border: 1.5px solid #FFD98A !important;
  border-radius: 100px !important;
  padding: 8px 22px !important;
  font-family: var(--font-label, monospace) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #FFD98A !important;
  cursor: pointer !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: all 0.22s ease !important;
  position: relative !important;
  z-index: 12 !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

.replay-intro-btn:hover {
  background: rgba(255, 217, 138, 0.22) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(255, 217, 138, 0.5) !important;
  transform: translateY(-1px) !important;
}

.replay-intro-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

.founder-close-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  cursor: pointer !important;
  padding: 8px 14px !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  position: relative !important;
  z-index: 12 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}

.founder-close-link-btn:hover {
  color: #FFD98A !important;
  text-shadow: 0 0 10px rgba(255, 217, 138, 0.5) !important;
  transform: translateY(-1px) !important;
}

.founder-close-link-btn:active {
  transform: translateY(0) scale(0.97) !important;
}


/* =========================================================================
   STRICT SIZING CAPPINGS: SCHOOL CREST NEVER OVERFLOWS UNDER ANY CONDITIONS
   ========================================================================= */
.gate-crest-img,
img.gate-crest-img,
.gate-emblem-disc img,
.gate-rect-left img {
  width: 54px !important;
  max-width: 54px !important;
  min-width: 32px !important;
  height: 54px !important;
  max-height: 54px !important;
  min-height: 32px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.gate-emblem-disc {
  width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  max-height: 64px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.gate-emblem-wrap {
  width: 64px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
}


/* =========================================================================
   LIGHTENED CURTAIN LOADER: LUMINOUS IVORY, CHAMPAGNE & BUTTER-YELLOW
   Replaces dark/heavy wine tint with regal, bright royal theatre drapery
   ========================================================================= */
.dps-gate-loader,
.dps-curtain-loader {
  background: radial-gradient(circle at 50% 50%, #FFFDF8 0%, #FFF9EC 45%, #F7EFE2 75%, #EFE1CF 100%) !important;
}

.curtain-fabric {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.85) 0%, transparent 65%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.98) 0px,
      rgba(255, 252, 244, 0.95) 14px,
      rgba(255, 244, 205, 0.90) 28px,
      rgba(255, 235, 175, 0.82) 42px,
      rgba(255, 217, 138, 0.38) 54px,
      rgba(255, 250, 238, 0.96) 68px
    ) !important;
  box-shadow: inset 0 0 24px rgba(46, 8, 21, 0.04) !important;
}

.curtain-pleats {
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(180, 140, 80, 0.02) 16px,
    rgba(180, 140, 80, 0.06) 32px,
    rgba(255, 255, 255, 0.28) 36px,
    transparent 52px
  ) !important;
}

.curtain-top-valance .valance-swag {
  background: linear-gradient(180deg, #FFFDF8 0%, #FFF6DF 70%, #F5E5C0 100%) !important;
  border-bottom: 2px solid #FFD98A !important;
}

.gate-center-stage.gate-rect-stage {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 244, 0.96) 50%, rgba(255, 248, 232, 0.94) 100%) !important;
  border: 1.5px solid rgba(125, 29, 63, 0.18) !important;
  box-shadow:
    0 12px 36px -8px rgba(46, 8, 21, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 2px rgba(255, 255, 255, 0.95) !important;
}


/* =========================================================================
   SLEEK HORIZONTAL RECTANGULAR LOADER ON MOBILE (NO SQUARE!)
   Uses screen width wisely in a compact landscape pill layout (~86px height)
   ========================================================================= */
@media (max-width: 640px) {
  .gate-center-stage.gate-rect-stage {
    flex-direction: row !important;
    text-align: left !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    gap: 12px !important;
    width: 94vw !important;
    max-width: 420px !important;
    min-height: 84px !important;
    height: auto !important;
    max-height: 104px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }
  .gate-rect-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    flex-shrink: 0 !important;
    border-right: 1px solid rgba(255, 217, 138, 0.55) !important;
    border-bottom: none !important;
    padding-right: 10px !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
  .gate-rect-left .gate-emblem-wrap {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0 !important;
  }
  .gate-rect-left .gate-emblem-halo {
    display: none !important;
    animation: none !important;
  }
  .gate-rect-left .gate-emblem-disc {
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    border-width: 1.5px !important;
  }
  .gate-rect-left .gate-crest-img {
    width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
  }
  .gate-rect-estd-pill {
    display: none !important;
  }
  .gate-rect-right {
    flex: 1 !important;
    text-align: left !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 2px !important;
  }
  .gate-kicker-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 2px !important;
    gap: 6px !important;
  }
  .gate-kicker {
    font-size: 0.58rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .gate-session-chip {
    display: none !important;
  }
  .gate-school-title {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .gate-lead-tag {
    display: none !important;
  }
  .gate-rect-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    width: 100% !important;
  }
  .gate-rect-controls .gate-loader-bar-wrap {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .gate-loader-status {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.56rem !important;
    margin-bottom: 2px !important;
  }
  .gate-loader-track {
    height: 3px !important;
  }
  .gate-skip-btn {
    flex-shrink: 0 !important;
    padding: 3px 9px !important;
    font-size: 0.60rem !important;
    height: 24px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    width: auto !important;
    min-height: unset !important;
  }
}


/* =========================================================================
   MOBILE EXPANDABLE CONTROLS SUITE (LIQUID GLASS DRAWER ARCHITECTURE)
   Inspired by the Apple-grade mega-menu drawer for ultra-clean mobile browsing
   ========================================================================= */

/* 1. Scrapbook Gallery Mobile Expandable Category Selector */
.scrapbook-mobile-category-drawer {
  display: none;
  width: 100%;
  margin-bottom: 14px;
}

.scrapbook-mobile-category-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 240, 0.92) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 217, 138, 0.75);
  border-radius: 16px;
  box-shadow:
    0 10px 28px -6px rgba(46, 8, 21, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.scrapbook-mobile-category-toggle:active {
  transform: scale(0.985);
}

.smct-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smct-eyebrow {
  font-family: var(--font-label, monospace);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7D1D3F;
  text-transform: uppercase;
}

.smct-title {
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: #1A0D08;
}

.smct-right {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(125, 29, 63, 0.08);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(125, 29, 63, 0.15);
}

.smct-action-text {
  font-family: var(--font-label, monospace);
  font-size: 0.70rem;
  font-weight: 700;
  color: #7D1D3F;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.smct-chevron {
  font-size: 0.75rem;
  color: #7D1D3F;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.scrapbook-mobile-category-drawer.is-open .smct-chevron {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .scrapbook-mobile-category-drawer {
    display: block !important;
  }

  .scrapbook-filter-bar {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 242, 0.95) 100%) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px -10px rgba(46, 8, 21, 0.18) !important;
  }

  .scrapbook-mobile-category-drawer.is-open + .scrapbook-filter-bar,
  .scrapbook-filter-bar.is-drawer-open {
    max-height: 520px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-top: 10px !important;
    padding: 12px !important;
    border: 1.5px solid rgba(255, 217, 138, 0.75) !important;
  }

  .scrapbook-filter-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 0.88rem !important;
    text-align: left !important;
  }

  .scrapbook-filter-btn.active {
    background: #7D1D3F !important;
    color: #FFFDF8 !important;
    border-color: #FFD98A !important;
  }

  .scrapbook-filter-btn.active .btn-tab-count {
    background: rgba(255, 217, 138, 0.25) !important;
    color: #FFD98A !important;
  }
}

/* 2. Generic Mobile Card Drawer Accordion (Academics Wings, Facilities Labs, Admissions) */
.mobile-card-expand-btn {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-top: 12px;
  background: rgba(125, 29, 63, 0.05);
  border: 1px solid rgba(125, 29, 63, 0.14);
  border-radius: 12px;
  color: #7D1D3F;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.mobile-card-expand-btn:active {
  background: rgba(125, 29, 63, 0.12);
}

.mobile-card-expand-btn .mce-chevron {
  font-size: 0.75rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-card-expand-btn.is-expanded .mce-chevron {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .mobile-card-expand-btn {
    display: flex !important;
  }

  .mobile-expand-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
  }

  .mobile-expand-content.is-open {
    max-height: 600px !important;
    opacity: 1 !important;
    margin-top: 10px !important;
  }
}


/* =========================================================================
   SAFETY HIGH-CONTRAST BUTTON STYLING (100% VISIBLE TEXT GUARANTEE)
   Fixes invisible text on white-background cards like "Come Visit Our Campus"
   ========================================================================= */
.cta-banner-saffron .btn,
.cta-banner:not(.cta-banner-wine) .btn {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, rgba(145, 35, 75, 0.94) 0%, rgba(105, 22, 52, 0.96) 50%, rgba(65, 12, 32, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 12px 28px -8px rgba(95, 18, 48, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.55) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.cta-banner-saffron .btn:hover,
.cta-banner:not(.cta-banner-wine) .btn:hover {
  background: linear-gradient(135deg, rgba(165, 42, 85, 0.98) 0%, rgba(125, 29, 63, 1) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 36px -8px rgba(95, 18, 48, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}


/* =========================================================================
   PERFECT MATHEMATICAL OPTICAL CENTERING FOR FAQ ACCORDION ICONS (+ and ×)
   Eradicates font-metric baseline offset so both + and × are 100% dead-centered
   ========================================================================= */
.faq summary {
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 18px 24px !important;
  user-select: none !important;
}

.faq summary::-webkit-details-marker,
.faq summary::marker {
  display: none !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
}

.faq-q {
  flex: 1 1 auto !important;
  margin: 0 !important;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--ink-900, #1A0D08) !important;
}

/* 36px Precision Optical Disc */
.faq-icon {
  position: relative !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(125, 29, 63, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='14' height='14'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%237D1D3F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 14px 14px !important;
  border: 1.5px solid rgba(125, 29, 63, 0.22) !important;
  box-shadow: 0 2px 6px rgba(46, 8, 21, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* Discard raw font character with baseline defect */
  color: transparent !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  transform-origin: center center !important;
  align-self: center !important;
}

/* Hover State */
.faq summary:hover .faq-icon {
  background-color: rgba(125, 29, 63, 0.14) !important;
  border-color: rgba(125, 29, 63, 0.35) !important;
  box-shadow: 0 4px 12px rgba(46, 8, 21, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
}

/* Open / Active State: Perfectly Rotates 45deg into an Exact Dead-Centered Close '×' */
.faq[open] .faq-icon {
  transform: rotate(45deg) !important;
  background-color: #7D1D3F !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='14' height='14'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(145, 35, 75, 0.96) 0%, rgba(105, 22, 52, 0.98) 50%, rgba(65, 12, 32, 1) 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 14px 14px !important;
  border-color: rgba(255, 217, 138, 0.6) !important;
  box-shadow: 0 4px 14px rgba(46, 8, 21, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

/* Also ensure Apple Expandable Accordions in Policy Pages have exact same dead-centered alignment */
details.apple-expandable-item > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 24px !important;
}

details.apple-expandable-item > summary::after {
  content: "" !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(125, 29, 63, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='14' height='14'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%237D1D3F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 14px 14px !important;
  border: 1.5px solid rgba(125, 29, 63, 0.22) !important;
  box-shadow: 0 2px 6px rgba(46, 8, 21, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease !important;
  transform-origin: center center !important;
  align-self: center !important;
}

details.apple-expandable-item[open] > summary::after {
  transform: rotate(45deg) !important;
  background-color: #7D1D3F !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='14' height='14'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(145, 35, 75, 0.96) 0%, rgba(105, 22, 52, 0.98) 50%, rgba(65, 12, 32, 1) 100%) !important;
  border-color: rgba(255, 217, 138, 0.6) !important;
  box-shadow: 0 4px 14px rgba(46, 8, 21, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}


/* =========================================================================
   FOUR-HOUSE SYSTEM: GANDHI, VIVEKANAND, PATEL & BOSE HOUSES
   ========================================================================= */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.card-house-gandhi,
.card-house-vivekanand,
.card-house-raman, .card-house-patel,
.card-house-bose {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 242, 0.90) 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 30px -8px rgba(46, 8, 21, 0.1) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.card-house-gandhi:hover,
.card-house-vivekanand:hover,
.card-house-raman, .card-house-patel:hover,
.card-house-bose:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 45px -10px rgba(46, 8, 21, 0.18) !important;
}


/* =========================================================================
   ROYAL TACTILE ARCHIVAL SCRAPBOOK SUITE (271 PRINTS, 6 CHAPTERS, SUBCATS)
   True craft-paper polaroid mounts, washi tape, brass corners & 3D hover physics
   ========================================================================= */

.scrapbook-album-book {
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin-top: 36px;
}

.scrapbook-chapter {
  position: relative;
  transition: opacity 0.3s ease;
}

.scrapbook-chapter.hidden-chapter {
  display: none !important;
}

.scrapbook-chapter-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(255, 217, 138, 0.6);
}

.chapter-badge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.chapter-number-stamp {
  font-family: var(--font-label, monospace);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #7D1D3F;
  background: rgba(255, 217, 138, 0.4);
  border: 1px solid rgba(255, 217, 138, 0.85);
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}

.chapter-dots-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(201, 150, 46, 0.5) 0, rgba(201, 150, 46, 0.5) 4px, transparent 4px, transparent 8px);
}

.chapter-count-pill {
  font-family: var(--font-label, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #5A444C;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2px 10px;
  border-radius: 100px;
}

.chapter-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  color: #2E0815;
  margin: 0 0 6px 0;
}

.chapter-lead {
  font-size: 0.95rem;
  color: #6E5560;
  max-width: 780px;
  margin: 0;
  line-height: 1.55;
}

/* Sub-Category Filter Bar */
.scrapbook-subcat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.scrapbook-subcat-pill {
  appearance: none;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(125, 29, 63, 0.16);
  color: #4A353D;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scrapbook-subcat-pill:hover {
  background: #FFFFFF;
  border-color: #7D1D3F;
  color: #7D1D3F;
}

.scrapbook-subcat-pill.active {
  background: #7D1D3F !important;
  color: #FFFDF8 !important;
  border-color: #7D1D3F !important;
  box-shadow: 0 4px 12px rgba(125, 29, 63, 0.25) !important;
}

/* Scrapbook 3-Column Grid */
.scrapbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
}

@media (max-width: 960px) {
  .scrapbook-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 20px;
  }
}

@media (max-width: 580px) {
  .scrapbook-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Tactile Scrapbook Item & Card */
.scrapbook-item {
  position: relative;
  transform: rotate(var(--item-tilt, 0deg));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.1s;
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: 320px 420px;
}

.scrapbook-item.hidden-item {
  display: none !important;
}

.scrapbook-item:hover {
  transform: translateY(-8px) scale(1.025) rotate(0deg) !important;
  z-index: 12;
}

.scrapbook-frame-card {
  position: relative;
  background: linear-gradient(155deg, #FFFFFF 0%, #FDFCF9 50%, #FAF5EC 100%);
  border-radius: 18px;
  padding: 12px 12px 16px 12px;
  border: 1.5px solid rgba(255, 240, 215, 0.85);
  box-shadow:
    0 12px 28px -10px rgba(46, 8, 21, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.scrapbook-item:hover .scrapbook-frame-card {
  border-color: #FFD98A !important;
  box-shadow:
    0 26px 55px -12px rgba(46, 8, 21, 0.22),
    0 0 24px rgba(255, 217, 138, 0.35),
    inset 0 1px 0 #FFF !important;
}

/* Washi Tape Accent */
.scrapbook-washi-tape {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 68px;
  height: 16px;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.scrapbook-washi-tape.washi-gold {
  background: rgba(255, 217, 138, 0.7);
  border-left: 2px dashed rgba(201, 150, 46, 0.5);
  border-right: 2px dashed rgba(201, 150, 46, 0.5);
}

.scrapbook-washi-tape.washi-wine {
  background: rgba(125, 29, 63, 0.22);
  border-left: 2px dashed rgba(125, 29, 63, 0.4);
  border-right: 2px dashed rgba(125, 29, 63, 0.4);
}

.scrapbook-washi-tape.washi-cream {
  background: rgba(235, 225, 205, 0.75);
  border-left: 2px dashed rgba(170, 150, 120, 0.45);
  border-right: 2px dashed rgba(170, 150, 120, 0.45);
}

/* Vintage Brass Photo Corner */
.scrapbook-corner-clip {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 3;
  border-style: solid;
  border-color: rgba(201, 150, 46, 0.65);
}

.scrapbook-corner-clip.corner-brass-left {
  top: 8px;
  left: 8px;
  border-width: 2px 0 0 2px;
}

.scrapbook-corner-clip.corner-brass-right {
  top: 8px;
  right: 8px;
  border-width: 2px 2px 0 0;
}

/* Photo Media Stage */
.scrapbook-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #EFE8DA;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.15);
  contain: paint;
}

.scrapbook-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.scrapbook-item:hover .scrapbook-photo {
  transform: scale(1.04);
}

.scrapbook-photo-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.65s ease;
  pointer-events: none;
}

.scrapbook-item:hover .scrapbook-photo-sheen {
  transform: translateX(120%);
}

.scrapbook-zoom-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 217, 138, 0.85);
  color: #7D1D3F;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.scrapbook-item:hover .scrapbook-zoom-badge {
  opacity: 1;
  transform: scale(1);
}

/* Scrapbook Card Body */
.scrapbook-body {
  padding: 12px 2px 2px 2px;
}

.scrapbook-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.scrapbook-cat-chip {
  font-family: var(--font-label, monospace);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7D1D3F;
  text-transform: uppercase;
}

.scrapbook-date-chip {
  font-family: var(--font-label, monospace);
  font-size: 0.58rem;
  font-weight: 700;
  color: #8C737E;
  letter-spacing: 0.06em;
}

.scrapbook-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: #2E0815;
  margin: 0 0 4px 0;
  line-height: 1.35;
}

.scrapbook-desc {
  font-size: 0.80rem;
  color: #5A444C;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================================================================
   PERFECT DOCKING & RESTRAINT FOR FLOATING BUTTON & VISUAL ARCH MINI
   Prevents button drift over cards/text and prevents visual-mini overflow
   ========================================================================= */
.dageroz-float-btn {
  position: fixed !important;
  z-index: 99990 !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 52px !important;
  height: 52px !important;
  left: auto;
  top: auto;
}

.dageroz-float-btn.is-dragging {
  bottom: auto !important;
  right: auto !important;
}

@media (max-width: 640px) {
  .dageroz-float-btn {
    bottom: 20px !important;
    right: 16px !important;
  }
}

/* Restrain visual-mini inside about snapshot section and position visual-caption on bottom-left to prevent overlap */
.visual-stack {
  position: relative !important;
  margin-bottom: 24px !important;
}

.visual-stack .visual-caption {
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 2 !important;
}

.visual-mini {
  position: absolute !important;
  right: 8px !important;
  bottom: -16px !important;
  width: 170px !important;
  max-width: 36% !important;
  aspect-ratio: 4/4.8 !important;
  border-radius: var(--arch, 48px 48px 16px 16px) !important;
  overflow: hidden !important;
  border: 4px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 36px -10px rgba(46, 8, 21, 0.28) !important;
  z-index: 3 !important;
}

/* =========================================================================
   EXPANDABLE WINGS ARCHITECTURE (ACADEMIC STAGES)
   Clean, uncluttered card face on mobile with expandable curriculum drawer
   ========================================================================= */

.wings-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.wing-card {
  display: flex;
  flex-direction: column;
}

.wing-grade-tag {
  display: inline-block;
  font-family: var(--font-label, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7D1D3F;
  background: rgba(125, 29, 63, 0.06);
  border: 1px solid rgba(125, 29, 63, 0.14);
  border-radius: 100px;
  padding: 2px 8px;
  margin-bottom: 6px;
  align-self: flex-start;
}

/* Apple-style Frosted Glass Expandable Button */
.wing-expandable {
  margin-top: auto;
  padding-top: 8px;
  width: 100%;
}

.wing-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 12px;
  background: rgba(125, 29, 63, 0.05);
  border: 1px solid rgba(125, 29, 63, 0.18);
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.70rem;
  font-weight: 700;
  color: #7D1D3F;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  list-style: none;
}

.wing-expand-btn::-webkit-details-marker {
  display: none;
}

.wing-expand-btn:active {
  background: rgba(125, 29, 63, 0.12);
  transform: scale(0.98);
}

.web-label {
  letter-spacing: 0.02em;
}

.web-caret {
  font-size: 0.70rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
}

.wing-expandable[open] .web-caret {
  transform: rotate(180deg);
}

.wing-expandable[open] .wing-expand-btn {
  background: rgba(125, 29, 63, 0.10);
  border-color: #7D1D3F;
  border-radius: 8px;
  margin-bottom: 6px;
}

/* Expandable Drawer Content */
.wing-expand-drawer {
  background: rgba(255, 252, 247, 0.95);
  border: 1px solid rgba(217, 184, 138, 0.45);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 3px 10px rgba(46, 8, 21, 0.04);
}

.wed-label {
  font-size: 0.60rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7D1D3F;
}

.wed-text {
  font-size: 0.68rem;
  line-height: 1.35;
  color: #4A3A42;
  margin: 0 !important;
}

.wed-link {
  font-size: 0.68rem;
  font-weight: 700;
  color: #7D1D3F;
  text-decoration: none;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
  transition: transform 0.15s ease;
}

.wed-link:hover {
  transform: translateX(2px);
}


/* =========================================================================
   COMPREHENSIVE MOBILE COMPATIBILITY SUITE (2-AT-A-TIME IMAGES & COMPACT TEXT)
   1. Two images per row side-by-side like desktop (2-col grid)
   2. Natural framing without excessive zoom or vertical cropping
   3. Refined, smaller typography scaled perfectly for mobile viewports
   ========================================================================= */

@media (max-width: 768px) {

  /* --- 0. ZERO-HORIZONTAL-OVERFLOW & ROCK-SOLID MOBILE VIEWPORT BOUNDS --- */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  .container,
  .container-narrow {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  main,
  section,
  article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- 1. TWO IMAGES PER ROW SIDE-BY-SIDE ON MOBILE --- */

  /* Gallery Scrapbook: Exactly 3 archival prints per row on mobile (Minimal & Snug) */
  .scrapbook-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px 6px !important;
  }

  /* Do not show heavy details in mobile view - keep cards crisp and image-focused */
  .scrapbook-desc {
    display: none !important;
  }

  .scrapbook-badge-row {
    display: none !important;
  }

  .scrapbook-washi-tape,
  .scrapbook-corner-clip {
    display: none !important;
  }

  .scrapbook-item {
    transform: none !important; /* No rotation tilts on mobile 3-col grid */
  }

  .scrapbook-item:hover,
  .scrapbook-item:active {
    transform: scale(0.98) !important;
  }

  .scrapbook-frame-card {
    padding: 3px 3px 5px 3px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(217, 184, 138, 0.4) !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(46, 8, 21, 0.05) !important;
  }

  .scrapbook-media {
    aspect-ratio: 4 / 3 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    background: #F4EFE6 !important;
  }

  .scrapbook-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .scrapbook-item:hover .scrapbook-photo,
  .scrapbook-item:active .scrapbook-photo {
    transform: scale(1.02) !important;
  }

  .scrapbook-body {
    padding: 3px 2px 1px 2px !important;
  }

  .scrapbook-title {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: #4A3A42 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.2 !important;
  }

  .scrapbook-zoom-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
    right: 3px !important;
    bottom: 3px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  @media (max-width: 360px) {
    .scrapbook-grid {
      gap: 6px 4px !important;
    }
    .scrapbook-frame-card {
      padding: 2px 2px 4px 2px !important;
      border-radius: 8px !important;
    }
    .scrapbook-media {
      border-radius: 6px !important;
    }
    .scrapbook-title {
      font-size: 0.52rem !important;
    }
    .scrapbook-zoom-badge {
      width: 15px !important;
      height: 15px !important;
      font-size: 0.55rem !important;
    }
  }

  /* Academic Wings, Houses, and Featured 4-Grids: 2 cards per row */
  .grid-4,
  .bento-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 10px !important;
  }

  /* Photo Galleries & Visual Mini-Grids: 2 images per row */
  .gal-grid,
  .gallery-grid,
  .photo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 10px !important;
  }

  /* Rich Text & Curriculum Grids (Academic Streams, Terms, Policies, Facilities):
     Full-width 1 column on mobile — uses space wisely, eliminates squeezed receipt cards */
  .grid-2,
  .grid-3,
  .bento-grid-2,
  .bento-grid-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .grid-3 > article:last-child:nth-child(odd),
  .grid-3 > div:last-child:nth-child(odd),
  .bento-grid-3 > article:last-child:nth-child(odd),
  .bento-grid-3 > div:last-child:nth-child(odd) {
    grid-column: auto !important;
  }

  /* Four Wings Showcase Grid on Mobile (Exactly 2-at-a-time, clean and balanced) */
  .wings-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 10px !important;
  }

  .wing-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 14px !important;
  }

  .wing-card .arch-media {
    aspect-ratio: 16 / 11 !important;
    max-height: 120px !important;
  }

  .wing-card .arch-body {
    padding: 8px 8px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .wing-card .arch-title {
    font-size: 0.84rem !important;
    line-height: 1.20 !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .wing-card .arch-text {
    font-size: 0.68rem !important;
    line-height: 1.32 !important;
    color: #55444D !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .wing-grade-tag {
    font-size: 0.58rem !important;
    padding: 1px 6px !important;
    margin-bottom: 4px !important;
  }

  /* --- 2. CONTROLLED PHOTO FRAMING (DO NOT ZOOM TOO MUCH) --- */

  /* Academic Wings Arch Cards & Facility Cards */
  .arch-card,
  .card {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .arch-media,
  .card-media {
    aspect-ratio: 16/11 !important;
    max-height: 135px !important;
    border-radius: 12px 12px 4px 4px !important;
    overflow: hidden !important;
  }

  .arch-media img,
  .card-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: 135px !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .arch-card:hover .arch-media img,
  .card:hover .card-media img {
    transform: scale(1.02) !important;
  }

  /* Campus Visual Arches & Hero Media: Wide aspect ratio, no vertical zoom */
  .visual-arch img {
    height: auto !important;
    min-height: 0 !important;
    max-height: 200px !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .visual-mini {
    width: 120px !important;
    max-width: 34% !important;
    bottom: -12px !important;
    right: 6px !important;
  }

  .visual-mini img {
    object-fit: cover !important;
  }

  .hero-curve-frame img,
  .client-curved-img {
    height: auto !important;
    max-height: 210px !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .client-curved-img-wrap {
    max-height: 210px !important;
    aspect-ratio: 16/10 !important;
  }

  .page-hero-photo {
    max-height: 195px !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .page-hero-stage-card {
    max-height: 230px !important;
  }

  /* --- 3. REFINED SMALLER TYPOGRAPHY FOR MOBILE --- */

  /* Main Headings */
  h1,
  .hero-editorial-title,
  .page-hero-title,
  .gate-school-title {
    font-size: clamp(1.35rem, 5.2vw, 1.75rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 10px !important;
  }

  /* Section Headings */
  h2,
  .sec-title {
    font-size: clamp(1.15rem, 4.2vw, 1.42rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 7px !important;
  }

  /* Card and Sub-Headings */
  h3,
  .card-title,
  .arch-title {
    font-size: clamp(0.88rem, 3.2vw, 1.02rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  h4 {
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
  }

  /* Lead / Introduction Text */
  .sec-lead,
  .hero-editorial-lead,
  .page-hero-lead,
  .lead-p,
  .chapter-lead {
    font-size: 0.82rem !important;
    line-height: 1.46 !important;
    margin-bottom: 14px !important;
  }

  /* Body Copy */
  p,
  .card-text,
  .arch-text,
  .tile p,
  li {
    font-size: 0.77rem !important;
    line-height: 1.42 !important;
  }

  /* Card Bodies in 2-Column Grid */
  .arch-body,
  .card-body {
    padding: 8px 8px 10px 8px !important;
  }

  .card-foot,
  .arch-foot {
    font-size: 0.68rem !important;
    padding-top: 6px !important;
    margin-top: 6px !important;
  }

  .card-foot a,
  .arch-foot a {
    font-size: 0.70rem !important;
  }

  /* House System Cards in 2-Column Grid */
  .card-house-gandhi,
  .card-house-vivekanand,
  .card-house-raman, .card-house-patel,
  .card-house-bose {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  .card-house-gandhi h3,
  .card-house-vivekanand h3,
  .card-house-raman, .card-house-patel h3,
  .card-house-bose h3 {
    font-size: 0.90rem !important;
    margin-bottom: 4px !important;
  }

  .card-house-gandhi p,
  .card-house-vivekanand p,
  .card-house-raman, .card-house-patel p,
  .card-house-bose p {
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
  }

  /* Scrapbook Captions in 2-Column Mobile Grid */
  .scrapbook-card-caption {
    padding: 5px 2px 2px 2px !important;
  }

  .scrapbook-card-caption h4 {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .scrapbook-card-caption p {
    font-size: 0.65rem !important;
    line-height: 1.28 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .photo-num {
    font-size: 0.56rem !important;
  }

  .photo-subcat-chip {
    font-size: 0.54rem !important;
    padding: 2px 5px !important;
  }

  .photo-date-tag {
    font-size: 0.52rem !important;
  }

  /* Micro Tags, Badges & Eyebrows */
  .eyebrow,
  .kicker,
  .hero-kicker,
  .tile-kicker,
  .card-tag,
  .arch-chip,
  .chapter-count-pill,
  .cta-tag {
    font-size: 0.62rem !important;
    letter-spacing: 0.07em !important;
    padding: 2px 7px !important;
  }

  /* Interactive Buttons */
  .btn,
  .btn-hero-primary,
  .btn-hero-secondary,
  .btn-wine {
    font-size: 0.78rem !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
  }

  .hero-editorial-actions {
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  /* Hero Minimal Metrics Strip */
  .hero-metrics-minimal {
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .metric-num {
    font-size: 1.15rem !important;
  }

  .metric-label {
    font-size: 0.62rem !important;
  }

  /* Section Spacing & Viewport Padding */
  .section {
    padding: 40px 0 !important;
  }

  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Subcategory horizontal swipeable pills bar */
  .scrapbook-subcat-bar,
  .scrapbook-subcat-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    gap: 8px !important;
    padding: 6px 2px 10px 2px !important;
    margin-top: 14px !important;
    margin-bottom: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .scrapbook-subcat-bar::-webkit-scrollbar,
  .scrapbook-subcat-nav::-webkit-scrollbar {
    display: none !important;
  }

  .scrapbook-subcat-pill {
    flex-shrink: 0 !important;
    min-height: 42px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* Ultra-compact screens (e.g. 360px - 400px devices) */
  .grid-4,
  .gal-grid {
    gap: 10px 8px !important;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .scrapbook-grid {
    gap: 8px 6px !important;
  }

  .scrapbook-frame-card {
    padding: 3px 3px 5px 3px !important;
  }

  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  h1,
  .hero-editorial-title {
    font-size: 1.32rem !important;
  }

  h2,
  .sec-title {
    font-size: 1.12rem !important;
  }
}


/* =========================================================================
   APPLE / GOOGLE / META STYLE MOBILE NAVIGATION ARCHITECTURE
   - Top Bar: Slim (56px), clean & fixed with School Crest Logo + Menu Button
   - Bottom Dock: Fixed 5-tab quick navigation bar with liquid glass styling
   - Zero visual clutter, ergonomic thumb-reach, 100% mobile-native feel
   ========================================================================= */

/* Desktop: Hide bottom navigation dock */
@media (min-width: 769px) {
  .mobile-bottom-dock {
    display: none !important;
  }
}

/* Mobile & Tablet View (<= 768px) */
@media (max-width: 768px) {

  body {
    padding-top: 0 !important;
  }

  /* --- 1. DUAL DYNAMIC ISLAND TOP NAVIGATION BARS (CENTER LOGO PILL + TOP-RIGHT MENU PILL) --- */
  /* Transparent zero-height wrapper - passes all screen clicks through to underlying content */
  .dps-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9990 !important;
    pointer-events: none !important;
    display: block !important;
  }

  .dps-header-inner {
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    pointer-events: none !important;
  }

  /* --- 1. UNIFIED FLOATING DYNAMIC ISLAND TOP NAVIGATION (MOBILE <= 768px) ---
     Sleek liquid-glass capsule floating at top center:
     [ ≡ MENU ]  [ (Crest) Durga Public School ]
     - Tap Logo: Redirects directly to Home (index.html)
     - Tap Menu: Opens navigation directory
     - Slide / Swipe: Expands drawer as an authentic Apple Dynamic Island
  ------------------------------------------------------------------------- */
  .header-left-group {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 3px 6px 3px 5px !important;
    gap: 8px !important;
    background: linear-gradient(135deg, rgba(255, 252, 246, 0.92) 0%, rgba(250, 243, 230, 0.86) 48%, rgba(253, 239, 244, 0.88) 100%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(217, 184, 138, 0.45) !important;
    border-radius: 9999px !important;
    box-shadow:
      0 10px 28px -6px rgba(46, 8, 21, 0.14),
      0 2px 8px rgba(125, 29, 63, 0.05),
      inset 0 1px 2px rgba(255, 255, 255, 0.95),
      inset 0 -1px 2px rgba(200, 160, 100, 0.14),
      inset 0 0 14px rgba(255, 248, 235, 0.3) !important;
    z-index: 10005 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    max-width: calc(100vw - 20px) !important;
    width: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: pan-x pan-y !important;
    cursor: pointer !important;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease, background 0.24s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .header-left-group:active {
    transform: translateX(-50%) scale(0.97) !important;
  }

  /* When menu is active, island morphs gracefully */
  body.dps-menu-active .header-left-group {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(253, 247, 250, 0.92) 100%) !important;
    box-shadow: 0 14px 34px -4px rgba(46, 8, 21, 0.18), inset 0 1px 2px #FFFFFF !important;
    border-color: rgba(125, 29, 63, 0.25) !important;
  }

  /* Integrated Menu Pill inside Island */
  .dps-mega-trigger-pill,
  #dpsMegaMenuTrigger {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 11px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.90) 0%, rgba(254, 245, 248, 0.85) 100%) !important;
    border: 1px solid rgba(125, 29, 63, 0.22) !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px rgba(46, 8, 21, 0.05), inset 0 1px 1.5px #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-family: var(--font-ui, sans-serif) !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #7D1D3F !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .dps-mega-trigger-pill:active,
  .dps-mega-trigger-pill.is-open {
    background: #7D1D3F !important;
    border-color: #7D1D3F !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(125, 29, 63, 0.28) !important;
  }

  .dps-mega-trigger-pill .trigger-icon {
    font-size: 0.76rem !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  /* Integrated Brand Logo & Name inside Island */
  .dps-brand {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px 0 2px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: opacity 0.18s ease !important;
  }

  .dps-brand:active {
    opacity: 0.7 !important;
    transform: none !important;
  }

  .dps-brand img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(46, 8, 21, 0.15) !important;
    display: block !important;
  }

  .dps-brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .dps-brand-name {
    font-family: var(--font-display, Georgia, serif) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: var(--wine-950, #2E0815) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
  }

  /* Hide subtext on mobile header to keep it 100% uncluttered */
  .dps-brand-sub {
    display: none !important;
  }

  /* Hide desktop links from top bar */
  .dps-nav {
    display: none !important;
  }

  /* Hide CTA and desktop actions from mobile top */
  .dps-header-actions,
  .dps-header-actions .btn-saffron,
  .dps-header-actions .btn,
  .mobile-nav-toggle {
    display: none !important;
  }

  /* Fine-tuning for narrow mobile screens (<= 375px) */
  @media (max-width: 375px) {
    .header-left-group {
      gap: 5px !important;
      padding: 3px 5px 3px 4px !important;
    }
    .dps-brand {
      padding: 0 6px 0 1px !important;
      gap: 5px !important;
    }
    .dps-brand-name {
      font-size: 0.72rem !important;
    }
    .dps-brand img {
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      min-height: 22px !important;
    }
    .dps-mega-trigger-pill {
      padding: 0 8px !important;
      font-size: 0.60rem !important;
    }
  }

  /* Body offsets for dynamic island top bar and bottom dock (compact so content appears first) */
  body {
    padding-top: calc(48px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- 2. DYNAMIC ISLAND LIQUID GLASS BOTTOM NAVIGATION DOCK (COMPACT & SLEEK) --- */
  .mobile-bottom-dock {
    position: fixed !important;
    bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
    left: 10px !important;
    right: 10px !important;
    margin: 0 auto !important;
    width: calc(100% - 20px) !important;
    max-width: 440px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 2px 4px !important;
    background: linear-gradient(135deg, rgba(254, 250, 244, 0.84) 0%, rgba(248, 241, 230, 0.76) 45%, rgba(252, 238, 244, 0.78) 100%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(217, 184, 138, 0.4) !important;
    border-radius: 100px !important;
    box-shadow:
      0 10px 32px -4px rgba(46, 8, 21, 0.16),
      0 3px 10px rgba(125, 29, 63, 0.08),
      inset 0 1px 1.5px rgba(255, 255, 255, 0.95),
      inset 0 -1px 2px rgba(200, 160, 100, 0.12),
      inset 0 0 14px rgba(255, 248, 235, 0.25) !important;
    z-index: 99990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    box-sizing: border-box !important;
  }

  .dock-tab-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 2px 2px !important;
    text-decoration: none !important;
    color: #6E5560 !important;
    border-radius: 100px !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease, background 0.18s ease !important;
    position: relative !important;
    min-width: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .dock-tab-item:active {
    transform: scale(0.92) !important;
    background: rgba(125, 29, 63, 0.06) !important;
  }

  .dock-tab-icon-wrap {
    width: 22px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: all 0.2s ease !important;
  }

  .dock-icon {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    transition: all 0.2s ease !important;
  }

  .dock-tab-label {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
    color: inherit !important;
  }

  /* Active Tab State (Highlight in Royal Wine & Tinted Pill) */
  .dock-tab-item.is-active {
    color: #7D1D3F !important;
  }

  .dock-tab-item.is-active .dock-tab-label {
    font-weight: 800 !important;
    color: #7D1D3F !important;
  }

  .dock-tab-item.is-active .dock-icon {
    stroke: #7D1D3F !important;
    stroke-width: 2.3 !important;
    transform: translateY(-0.5px) !important;
  }

  /* Active Indicator Pill at top of tab */
  .dock-tab-item.is-active::after {
    content: '' !important;
    position: absolute !important;
    top: 1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 12px !important;
    height: 2px !important;
    background: #7D1D3F !important;
    border-radius: 10px !important;
    box-shadow: 0 0 6px rgba(125, 29, 63, 0.45) !important;
  }

  /* Primary Accent Tab (Apply Now / Admissions) */
  .dock-tab-item.dock-tab-primary .dock-icon-primary {
    background: linear-gradient(135deg, rgba(145, 35, 75, 0.12) 0%, rgba(217, 119, 6, 0.14) 100%) !important;
    border: 1px solid rgba(201, 150, 46, 0.35) !important;
    border-radius: 6px !important;
    padding: 1.5px !important;
    box-shadow: 0 1px 3px rgba(145, 35, 75, 0.08) !important;
  }

  .dock-tab-item.dock-tab-primary.is-active .dock-icon-primary {
    background: linear-gradient(135deg, rgba(125, 29, 63, 0.95) 0%, rgba(180, 83, 9, 0.95) 100%) !important;
    border-color: rgba(180, 83, 9, 0.4) !important;
    box-shadow: 0 2px 8px rgba(125, 29, 63, 0.35) !important;
  }

  .dock-tab-item.dock-tab-primary.is-active .dock-icon-primary .dock-icon {
    stroke: #FFFFFF !important;
  }

  /* --- 3. DOCK COORDINATION FOR FLOATING DA BADGE & COOKIE BANNER --- */
  .dageroz-float-btn {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 99980 !important;
  }

  .dageroz-float-btn .dfb-inner {
    width: 42px !important;
    height: 42px !important;
  }

  .cookie-dock {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 99970 !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
  }

  .cookie-dock .cookie-text {
    font-size: 0.70rem !important;
  }

  .cookie-dock .cookie-btn {
    font-size: 0.68rem !important;
    padding: 5px 10px !important;
  }
}


/* =========================================================================
   BULLETPROOF MENU BUTTON CLICKABILITY & OVERLAY DISPLAY
   Ensures menu button is 100% responsive, never blocked by header layers
   ========================================================================= */
.dps-mega-trigger-pill,
#dpsMegaMenuTrigger {
  position: relative !important;
  z-index: 10005 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (min-width: 769px) {
  .dps-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--header-h, 72px) !important;
    min-height: var(--header-h, 72px) !important;
    z-index: 9990 !important;
    pointer-events: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
  }

  .dps-header-inner {
    height: var(--header-h, 72px) !important;
    min-height: var(--header-h, 72px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    pointer-events: auto !important;
  }

  .header-left-group {
    position: static !important;
    transform: none !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body {
    padding-top: var(--header-h, 72px) !important;
  }

  html {
    scroll-padding-top: var(--header-h, 72px);
  }
}

.dps-mega-overlay {
  z-index: 99995 !important;
}

.dps-mega-card {
  z-index: 99996 !important;
  pointer-events: auto !important;
}


/* =========================================================================
   MOBILE DE-CLUTTER & PREMIUM MINIMALISM SUITE (CLEAN, AIRY & UNCLUTTERED)
   Eliminates visual heaviness, clamps verbose card paragraphs to 1-2 lines,
   hides repetitive gallery caption filler, and introduces luxury breathing room
   ========================================================================= */

@media (max-width: 768px) {

  /* --- 1. CLEAN SCRAPBOOK GALLERY (VISUAL-FIRST, ZERO TEXT CLUTTER) --- */
  /* Hide the redundant boilerplate paragraph on mobile prints */
  .scrapbook-card-caption p {
    display: none !important;
  }

  .scrapbook-card-caption {
    padding: 6px 2px 3px 2px !important;
  }

  .scrapbook-card-caption h4 {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--wine-950, #2E0815) !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .caption-top-line {
    margin-bottom: 3px !important;
    gap: 4px !important;
  }

  .photo-num {
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    color: var(--saffron-700, #B45309) !important;
  }

  .photo-subcat-chip {
    font-size: 0.52rem !important;
    padding: 1px 5px !important;
    font-weight: 600 !important;
  }

  .photo-date-tag {
    font-size: 0.50rem !important;
    opacity: 0.75 !important;
  }

  /* --- 2. CARD PARAGRAPH CLAMPING (MAX 2 CRISP LINES ACROSS ALL PAGES) --- */
  /* Eliminates 6-8 line text walls inside 2-column mobile cards */
  .card-text,
  .arch-text,
  .card:not(.leadership-card):not(.card-wine) p,
  .arch-card p,
  .tile p,
  .modern-pillar-card p,
  .stat-card p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.73rem !important;
    line-height: 1.38 !important;
    color: #5E4E56 !important; /* Soft espresso-charcoal, never heavy black */
    margin-bottom: 6px !important;
    font-weight: 400 !important;
  }

  /* Leadership & Institutional Desk Messages: On mobile, quote clamps to 2 lines with 3 dots until expanded */
  .leadership-card p:not(.leadership-quote),
  .card-wine p:not(.leadership-quote),
  .leadership-expandable-wrap p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.92rem !important;
    line-height: 1.68 !important;
    margin-bottom: 12px !important;
  }

  .leadership-card .leadership-quote.quote-clamped,
  .leadership-card .principal-quote.quote-clamped {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.94rem !important;
    line-height: 1.65 !important;
    margin-bottom: 6px !important;
    cursor: pointer !important;
  }

  .leadership-card .leadership-quote.quote-expanded,
  .leadership-card .principal-quote.quote-expanded {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.94rem !important;
    line-height: 1.68 !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
  }

  /* Leadership 3-Dots Expand Button (Mobile Only) */
  .leadership-quote-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .leadership-quote-dots-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(217, 184, 138, 0.16);
    border: 1px solid rgba(217, 184, 138, 0.45);
    color: #F6E2C6;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .leadership-director .leadership-quote-dots-btn {
    background: rgba(217, 184, 138, 0.16);
    border-color: rgba(217, 184, 138, 0.45);
    color: #F6E2C6;
  }

  .leadership-director .leadership-quote-dots-btn:hover,
  .leadership-director .leadership-quote-dots-btn:active {
    background: rgba(217, 184, 138, 0.28);
    color: #FFFFFF;
    border-color: #D9B88A;
  }

  .leadership-principal .leadership-quote-dots-btn,
  .leadership-coordinator .leadership-quote-dots-btn {
    background: rgba(125, 29, 63, 0.08);
    border-color: rgba(125, 29, 63, 0.28);
    color: #7D1D3F;
  }

  .leadership-principal .leadership-quote-dots-btn:hover,
  .leadership-principal .leadership-quote-dots-btn:active,
  .leadership-coordinator .leadership-quote-dots-btn:hover,
  .leadership-coordinator .leadership-quote-dots-btn:active {
    background: rgba(125, 29, 63, 0.16);
    color: #501328;
    border-color: #7D1D3F;
  }

  /* House System Cards: Clean 2-line motto */
  .card-house-gandhi p,
  .card-house-vivekanand p,
  .card-house-raman, .card-house-patel p,
  .card-house-bose p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    color: #55444D !important;
    margin-bottom: 0 !important;
  }

  /* --- 3. SECTION LEADS & INTROS (AIRY & CONCISE) --- */
  .sec-lead,
  .chapter-lead,
  .page-hero-lead,
  .hero-editorial-lead,
  .lead-p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.80rem !important;
    line-height: 1.48 !important;
    color: #635059 !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
    font-weight: 400 !important;
  }

  /* Left-aligned leads on mobile */
  .section-head .sec-lead,
  .hero-editorial-copy .hero-editorial-lead {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- 4. HERO SECTION MINIMALISM --- */
  /* Sleek swipeable photo pill bar on mobile */
  .hero-photo-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 4px 6px !important;
    margin: 0 auto 16px auto !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
  }
  .hero-photo-pills::-webkit-scrollbar {
    display: none !important;
  }
  .photo-pill-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
  }

  .hero-editorial-actions {
    margin-bottom: 18px !important;
  }

  .hero-metrics-minimal {
    padding: 10px 0 !important;
    margin-bottom: 18px !important;
    border-top: 1px solid rgba(125, 29, 63, 0.08) !important;
    border-bottom: 1px solid rgba(125, 29, 63, 0.08) !important;
  }

  .metric-item {
    gap: 2px !important;
  }

  .metric-num {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #7D1D3F !important;
  }

  .metric-label {
    font-size: 0.62rem !important;
    color: #7A656E !important;
    font-weight: 600 !important;
  }

  /* --- 5. CLEAN AIRY LISTS & BULLET POINTS --- */
  .list-check {
    margin-bottom: 14px !important;
    padding-left: 0 !important;
  }

  .list-check li {
    font-size: 0.82rem !important;
    line-height: 1.48 !important;
    color: #4A3A42 !important;
    margin-bottom: 6px !important;
    padding-left: 20px !important;
    position: relative !important;
  }

  .list-check li::before {
    top: 7px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
  }

  .list-check li strong {
    font-weight: 700 !important;
    color: #2E0815 !important;
  }

  /* --- 6. CLEAN CARD FOOTERS & ACTIONS --- */
  .card-foot,
  .arch-foot {
    font-size: 0.66rem !important;
    border-top: 1px solid rgba(125, 29, 63, 0.08) !important;
    padding-top: 5px !important;
    margin-top: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .card-foot span,
  .arch-foot span {
    font-size: 0.62rem !important;
    color: #8C757F !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 55% !important;
  }

  .card-foot a,
  .arch-foot a {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #7D1D3F !important;
    white-space: nowrap !important;
  }

  /* --- 7. LUXURY PROPORTIONS & EXECUTIVE CARD LAYOUT ON MOBILE --- */
  .card:not(.card-wine),
  .arch-card,
  .tile {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 250, 244, 0.94) 100%) !important;
    border: 1px solid rgba(217, 184, 138, 0.45) !important;
    border-radius: 18px !important;
    padding: 22px 18px !important;
    box-shadow: 0 6px 20px -6px rgba(46, 8, 21, 0.07) !important;
  }

  /* Dedicated High-Contrast Luxury Wine Card (e.g. Science Stream) */
  .card-wine {
    background: linear-gradient(145deg, #420A1E 0%, #290412 100%) !important;
    border: 1px solid rgba(255, 217, 138, 0.40) !important;
    border-radius: 18px !important;
    padding: 22px 18px !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 28px -6px rgba(46, 8, 21, 0.35) !important;
  }

  .card-wine h2,
  .card-wine h3,
  .card-wine h4 {
    color: #FFFFFF !important;
    font-family: var(--font-display, Georgia, serif) !important;
  }

  .card-wine p,
  .card-wine .card-text {
    color: rgba(255, 248, 235, 0.94) !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    font-size: 0.96rem !important;
    line-height: 1.72 !important;
  }

  .card-wine .tile-kicker {
    color: #FFD98A !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
  }

  .card-wine .list-check li {
    color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .card-wine .list-check li strong {
    color: #FFD98A !important;
  }

  .card-wine .list-check li::before {
    background: #FFD98A !important;
  }

  /* --- 8. EXPANDABLE FAQ & ACCORDIONS ON MOBILE --- */
  .faq,
  details.apple-expandable-item {
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  .faq summary,
  details.apple-expandable-item > summary {
    padding: 12px 14px !important;
  }

  .faq-q {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }

  .faq-a,
  .apple-expandable-body {
    padding: 0 14px 14px 14px !important;
    font-size: 0.76rem !important;
    line-height: 1.44 !important;
    color: #55444D !important;
  }

  /* --- 9. STREAMLINED FOOTERS ON MOBILE --- */
  .foot-cols {
    gap: 20px !important;
  }

  .foot-col h4 {
    font-size: 0.80rem !important;
    margin-bottom: 8px !important;
  }

  .foot-col p,
  .foot-col a,
  .foot-col li {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }

  .foot-legal-bar {
    font-size: 0.68rem !important;
    padding: 14px 0 !important;
  }
}

@media (max-width: 480px) {
  /* Ultra-compact screens (360px - 400px) */
  .card-text,
  .arch-text {
    -webkit-line-clamp: 1 !important; /* Single crisp summary line on small phones */
  }

  .sec-lead,
  .chapter-lead,
  .page-hero-lead {
    font-size: 0.77rem !important;
    line-height: 1.42 !important;
  }
}


/* =========================================================================
   DELUXE MOBILE HERO ARCHITECTURE (HOMEPAGE & SUBPAGES)
   - Warm luxury tinted ivory background (no stark white)
   - Balanced, cinematic 16:10 campus photo card without awkward notch blocks
   - Refined serif headline & compact action buttons side-by-side
   - Clean horizontal frosted-glass metric strip
   ========================================================================= */

@media (max-width: 768px) {

  /* --- 1. HOMEPAGE HERO STAGE (Warm Tinted Champagne Surface) --- */
  .inspire-hero-stage {
    position: relative !important;
    width: 100% !important;
    background: linear-gradient(180deg, #FAF5EB 0%, #FFFDF8 100%) !important;
    padding: 24px 0 20px !important;
    border-bottom: 1px solid rgba(125, 29, 63, 0.10) !important;
    overflow: hidden !important;
  }

  .inspire-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding-inline: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Place Image on Top on Mobile */
  .inspire-hero-grid .client-curved-card {
    order: 1 !important;
  }

  /* Rest (Title, Lead Copy, CTAs, Metrics) Down Below Image */
  .inspire-hero-grid .hero-editorial-copy {
    order: 2 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
  }

  /* Refined Luxury Serif Headline */
  .hero-editorial-title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(1.60rem, 6.4vw, 2.05rem) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    color: #2E0815 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 10px !important;
  }

  .hero-editorial-title em {
    font-style: italic !important;
    font-weight: 600 !important;
    color: #7D1D3F !important;
  }

  /* Concise, Inspiring Subtitle */
  .hero-editorial-lead {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 0.84rem !important;
    line-height: 1.48 !important;
    color: #5E4E56 !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    font-weight: 400 !important;
  }

  /* Two Ergonomic Action Buttons */
  .hero-editorial-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-hero-primary {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 8px !important;
    font-size: clamp(0.70rem, 3.1vw, 0.80rem) !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #8C1D40 0%, #5A0E25 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 14px rgba(95, 18, 48, 0.35) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  .btn-hero-secondary {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 8px !important;
    font-size: clamp(0.70rem, 3.1vw, 0.80rem) !important;
    font-weight: 600 !important;
    color: #7D1D3F !important;
    background: rgba(255, 255, 255, 0.90) !important;
    border: 1.5px solid rgba(125, 29, 63, 0.22) !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  /* Frosted Glass Trust Metrics Strip */
  .hero-metrics-minimal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(125, 29, 63, 0.10) !important;
    border-radius: 14px !important;
    padding: 10px 8px !important;
    margin: 0 0 16px 0 !important;
    box-shadow: 0 4px 16px rgba(46, 8, 21, 0.05) !important;
  }

  .hero-metrics-minimal .metric-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
  }

  .hero-metrics-minimal .metric-num {
    font-family: var(--font-display, Georgia, serif) !important;
    font-size: 1.20rem !important;
    font-weight: 800 !important;
    color: #7D1D3F !important;
    line-height: 1 !important;
  }

  .hero-metrics-minimal .metric-label {
    font-size: 0.60rem !important;
    font-weight: 600 !important;
    color: #7A656E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  .hero-metrics-minimal .metric-sep {
    width: 1px !important;
    height: 24px !important;
    background: rgba(125, 29, 63, 0.12) !important;
  }

  /* --- 2. CINEMATIC CAMPUS PHOTO CARD (NO HUGE OVERLAPPING BLOCKS) --- */
  .client-curved-card {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 230px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #EFE8DA !important;
    box-shadow:
      0 16px 36px -10px rgba(46, 8, 21, 0.18),
      0 4px 12px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(255, 217, 138, 0.6) !important;
    margin: 0 !important;
  }

  .client-curved-img-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .client-curved-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 35% !important;
    transform: none !important;
  }

  /* Top-Left: Sleek Floating Glass Pill (Clean, Notched Fillets Removed on Mobile) */
  .curved-notch-pill.top-left {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 6 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 217, 138, 0.7) !important;
    border-radius: 100px !important;
    padding: 5px 12px 5px 6px !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  }

  .curved-notch-pill.top-left::before,
  .curved-notch-pill.top-left::after {
    display: none !important; /* Eradicate broken inverted corner fillets on mobile */
  }

  .notch-avatar {
    width: 22px !important;
    height: 22px !important;
    border: 1.5px solid #FFFFFF !important;
    margin-left: -6px !important;
  }

  .notch-avatar:first-child {
    margin-left: 0 !important;
  }

  .notch-pill-text strong {
    font-size: 0.68rem !important;
    color: #2E0815 !important;
    line-height: 1 !important;
  }

  .notch-pill-text span {
    display: none !important; /* Hide subtitle to keep pill super clean */
  }

  /* Bottom-Right: Hide redundant second CTA on mobile so photo stays 100% visible */
  .curved-notch-pill.bottom-right {
    display: none !important;
  }

  /* --- 3. SUBPAGE EDITORIAL HEROES (.page-hero on all other pages) --- */
  .page-hero {
    position: relative !important;
    background: linear-gradient(180deg, #FAF5EB 0%, #FFFDF8 100%) !important;
    padding: 24px 0 20px !important;
    border-bottom: 1px solid rgba(125, 29, 63, 0.10) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-hero .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .page-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Place Image on Top on Mobile */
  .page-hero-grid .page-hero-media-wrap {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  /* Rest (Eyebrow, Title, Lead, Badges) Down Below Image */
  .page-hero-grid .page-hero-content {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-eyebrow-pill {
    margin-bottom: 8px !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-hero h1 {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(1.40rem, 5.5vw, 1.80rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    color: #2E0815 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  .page-hero h1 em {
    font-style: italic !important;
    color: #7D1D3F !important;
  }

  .page-hero .hero-lead {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    color: #5E4E56 !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  /* Horizontal Scrolling Sub-Category Pills (Contained, smooth scroll without breaking container width) */
  .hero-badge-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  .hero-badge-row::-webkit-scrollbar {
    display: none !important;
  }

  .hero-badge-row .hero-pill {
    flex-shrink: 0 !important;
    font-size: 0.68rem !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
  }

  /* Page Hero Stage Card */
  .page-hero-stage-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 217, 138, 0.7) !important;
    box-shadow: 0 12px 30px -8px rgba(46, 8, 21, 0.14) !important;
    position: relative !important;
  }

  .page-hero-photo-inner {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 200px !important;
  }

  .page-hero-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Subpage floating badge: Sleek glass pill in bottom-right */
  .page-hero-float-badge {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 217, 138, 0.6) !important;
    border-radius: 100px !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  }

  .page-hero-badge-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.62rem !important;
  }

  .page-hero-badge-text strong {
    font-size: 0.68rem !important;
    color: #2E0815 !important;
    line-height: 1 !important;
  }

  .page-hero-badge-text span {
    display: none !important;
  }
}

/* =========================================================================
   DESKTOP PRESERVATION FOR MEGA MENU DIRECTORY (DESKTOP STAYS 4 FULL COLUMNS)
   ========================================================================= */
@media (min-width: 769px) {
  .mega-col-meta {
    display: none !important;
  }
  .mega-col-heading {
    cursor: default !important;
  }
  .mega-link-list {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
  }
}

/* =========================================================================
   MOBILE EXPANDABLE MENU PILL BUTTONS (FROSTED GLASS ACCORDIONS 01–04)
   Mobile View Only: Transforms 4-col directory into sleek 2x2 expandable pill buttons
   ========================================================================= */
@media (max-width: 768px) {

  .dps-mega-overlay {
    z-index: 99995 !important;
    padding: 12px 10px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .dps-mega-overlay:not(.active) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .dps-mega-overlay.active {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .dps-mega-backdrop {
    background: rgba(18, 4, 11, 0.72) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .dps-mega-card {
    position: relative !important;
    top: calc(max(8px, env(safe-area-inset-top, 8px)) + 46px) !important;
    left: auto !important;
    transform: translateY(-14px) scale(0.96) !important;
    opacity: 0 !important;
    width: 100% !important;
    max-width: 460px !important;
    max-height: calc(100vh - 110px) !important;
    border-radius: 28px !important;
    background: #FAF6ED !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(217, 184, 138, 0.45) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    transform-origin: top center !important;
    transition: transform 0.20s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.16s ease !important;
    will-change: transform, opacity;
  }

  .dps-mega-overlay.active .dps-mega-card {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }

  .dps-mega-card-header {
    padding: 12px 16px 10px 16px !important;
    border-bottom: 1px solid rgba(125, 29, 63, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .mega-header-title {
    font-family: var(--font-label, monospace) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--wine-950, #2E0815) !important;
  }

  .mega-card-close-btn {
    font-family: var(--font-label, monospace) !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #7D1D3F !important;
    background: rgba(125, 29, 63, 0.06) !important;
    border: 1px solid rgba(125, 29, 63, 0.18) !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .mega-card-close-btn:hover,
  .mega-card-close-btn:active {
    background: rgba(125, 29, 63, 0.14) !important;
    color: #2E0815 !important;
  }

  /* 2x2 Grid of Expandable Pill Buttons */
  .dps-mega-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px 12px 14px 12px !important;
    align-items: start !important;
  }

  /* When an accordion column is open, it smoothly spans full width for spacious readability */
  .dps-mega-col.is-open {
    grid-column: 1 / -1 !important;
  }

  .dps-mega-col {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Frosted Glass Pill Button Header (Dynamic Island Shape) */
  .mega-col-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 7px 10px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(217, 184, 138, 0.45) !important;
    border-radius: 100px !important;
    box-shadow: 0 2px 8px rgba(46, 8, 21, 0.04), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(217, 184, 138, 0.45) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mega-col-heading:active {
    transform: scale(0.96) !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .dps-mega-col.is-open .mega-col-heading {
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 246, 249, 0.95) 100%) !important;
    border-color: #7D1D3F !important;
    box-shadow: 0 4px 14px rgba(125, 29, 63, 0.12), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
  }

  .mega-col-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Number Badge Tag [01], [02], [03], [04] */
  .mega-col-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(125, 29, 63, 0.07) !important;
    color: #7D1D3F !important;
    font-family: var(--font-label, monospace) !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(125, 29, 63, 0.12) !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Title (Uppercase, Compact, Ellipsis if constrained) */
  .mega-col-title {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--wine-950, #2E0815) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
  }

  /* Right Meta: Link Count + Caret */
  .mega-col-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
  }

  .mega-col-count {
    font-family: var(--font-ui, sans-serif) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #8C727D !important;
    line-height: 1 !important;
  }

  .mega-col-caret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8C727D !important;
    font-size: 0.68rem !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
    line-height: 1 !important;
  }

  .dps-mega-col.is-open .mega-col-caret {
    transform: rotate(180deg) !important;
    color: #7D1D3F !important;
  }

  .dps-mega-col.is-open .mega-col-count {
    color: #7D1D3F !important;
    font-weight: 800 !important;
  }

  /* Expandable Link Drawer on Mobile */
  .mega-link-list {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-4px) !important;
    transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.24s ease,
                transform 0.24s ease,
                padding 0.28s ease,
                margin 0.28s ease,
                visibility 0.32s ease !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: rgba(255, 253, 248, 0.92) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(217, 184, 138, 0.35) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 4px 14px rgba(46, 8, 21, 0.04) !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .dps-mega-col.is-open .mega-link-list {
    max-height: 520px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    margin-top: 6px !important;
    padding: 6px 10px !important;
  }

  .mega-link-list li {
    border-bottom: 1px solid rgba(125, 29, 63, 0.06) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-link-list li:last-child {
    border-bottom: none !important;
  }

  .mega-link-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 4px !important;
    font-family: var(--font-ui, sans-serif) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #2E0815 !important;
    text-decoration: none !important;
    min-height: 38px !important;
    line-height: 1.3 !important;
    transition: color 0.16s ease, transform 0.16s ease !important;
  }

  .mega-link-list a::after {
    content: '→' !important;
    font-size: 0.76rem !important;
    color: rgba(125, 29, 63, 0.35) !important;
    transition: transform 0.16s ease, color 0.16s ease !important;
  }

  .mega-link-list a:hover,
  .mega-link-list a:active {
    color: #7D1D3F !important;
    transform: translateX(3px) !important;
  }

  .mega-link-list a:hover::after,
  .mega-link-list a:active::after {
    color: #7D1D3F !important;
    transform: translateX(2px) !important;
  }

  /* Card Footer on Mobile (Menu modal utility bar - stacked cleanly for full readability) */
  .dps-mega-card-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px 14px 14px !important;
    background: rgba(116, 25, 94, 0.03) !important;
    border-top: 1px solid rgba(217, 184, 138, 0.35) !important;
  }

  .mega-badge-pill {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(217, 184, 138, 0.45) !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: #2E0815 !important;
    box-shadow: 0 2px 6px rgba(46, 8, 21, 0.04) !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .mega-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mega-portal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 9px 8px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-align: center !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
  }

  .mega-footer-actions a:first-child.mega-portal-btn {
    background: rgba(125, 29, 63, 0.08) !important;
    color: #7D1D3F !important;
    border: 1px solid rgba(125, 29, 63, 0.28) !important;
    box-shadow: none !important;
  }

  .mega-footer-actions a:last-child.mega-portal-btn {
    background: linear-gradient(135deg, rgba(145, 35, 75, 0.96) 0%, rgba(105, 22, 52, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(125, 29, 63, 0.22) !important;
  }
}

/* =========================================================================
   MOBILE HARDWARE ACCELERATION & ZERO-LAG PERFORMANCE ENGINE (<= 768px)
   Eliminates multi-pass GPU blur bottlenecks, enables 60/120Hz smooth scrolling
   ========================================================================= */
@media (max-width: 768px) {
  /* Consistent Mobile Ordering: Photo at top (order: 1), Narrative text below (order: 2) */
  .section .split-2 > .visual-stack {
    order: 1 !important;
    margin-bottom: 4px !important;
  }
  .section .split-2 > div:not(.visual-stack) {
    order: 2 !important;
  }
  #about, #results {
    scroll-margin-top: calc(var(--header-h, 72px) + 20px) !important;
  }

  /* 1. Fully unhindered native touch scrolling on mobile */
  html {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    min-height: 100% !important;
    scroll-behavior: auto !important;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100% !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-behavior: auto !important;
  }

  /* 2. Completely eliminate GPU-saturating backdrop-filters on all mobile elements */
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 3. Solidify backgrounds with lightweight luxury champagne tint (0 GPU shader overhead) */
  .card:not(.card-wine),
  .metric-card,
  .facility-card,
  .wing-card,
  .stream-card,
  .philosophy-card,
  .scrapbook-frame-card {
    background: #FFFCF7 !important;
  }

  .dps-mega-card {
    background: #FAF6ED !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28) !important;
  }

  .dps-mega-backdrop {
    background: rgba(18, 4, 11, 0.72) !important;
  }

  .header-left-group {
    background: #FAF6ED !important;
  }

  .mobile-bottom-dock {
    background: rgba(254, 250, 244, 0.96) !important;
  }

  .mega-col-heading,
  .mega-link-list {
    background: #FFFFFF !important;
  }

  /* 4. Disable continuous floating keyframes that constantly repaint on mobile */
  .hero-curve-frame,
  .hero-float-card,
  .hero-rank-card,
  .hero-editorial-badge,
  .dfb-pulse,
  .dfb-wave {
    animation: none !important;
  }

  /* 5. Hardware promote fixed navigation bars to isolated compositor layers */
  .header-left-group,
  .mobile-bottom-dock,
  #dagerozFloatBtn {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* 6. Ensure sections NEVER collapse or trap mobile touch scrolling */
  .section,
  .scrapbook-album-chapter {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }

  /* 7. Remove expensive 3D perspective compositing on gallery cards */
  .scrapbook-item {
    perspective: none !important;
    transform: none !important;
  }

  /* 8. Instant mobile content rendering (eliminates scroll reveal jank & layer memory bloat) */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* 9. Lightweight single-layer mobile shadows (eliminates multi-pass Gaussian blur overhead) */
  .client-curved-card,
  .page-hero-stage-card,
  .card,
  .founder-card,
  .facility-card,
  .wing-card,
  .stream-card,
  .stat-band,
  .editorial-frame,
  .tile {
    box-shadow: 0 4px 14px rgba(46, 8, 21, 0.08) !important;
  }

  /* 10. Hardware-only transitions on mobile: animate transform & opacity only (0 CPU repaints) */
  .btn,
  .hero-pill,
  .photo-pill-btn,
  .scrapbook-filter-btn,
  .mobile-card-expand-btn,
  .faq-icon,
  details.apple-expandable-item > summary::after,
  .scrapbook-mobile-category-toggle,
  .dps-header {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.16s ease !important;
  }

  /* 11. GPU-smooth drawer & accordion expansions */
  .scrapbook-filter-bar,
  .mobile-expand-content,
  .dps-mega-col .mega-link-list {
    transition: opacity 0.20s ease, transform 0.20s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
  }

  /* 12. De-escalate Layer Explosion: Prevent 20+ separate GPU composite layers on static cards */
  .arch-card,
  .card,
  .tile,
  .modern-pillar-card,
  .visual-arch,
  .visual-mini,
  .visual-stack,
  .section-head,
  .section-head-center {
    transform: none !important;
    -webkit-transform: none !important;
  }

  /* 13. Section Containment Isolation: Eliminates scroll jank before, during, and after Pedagogical Pathway */
  #hero,
  #showcase,
  #about,
  #wings,
  #results,
  .stat-band {
    contain: layout paint !important;
  }

  /* 14. Keep visual-mini cleanly inside frame without overlapping visual-caption */
  .visual-mini {
    bottom: 6px !important;
    right: 6px !important;
    width: 110px !important;
    max-width: 32% !important;
    box-shadow: 0 4px 12px rgba(46, 8, 21, 0.12) !important;
    z-index: 3 !important;
  }

  /* Keep visual-caption in visual-stack at bottom-left so visual-mini never overlaps text */
  .visual-stack .visual-caption {
    left: 10px !important;
    right: auto !important;
    bottom: 10px !important;
    transform: none !important;
    -webkit-transform: none !important;
    font-size: 0.68rem !important;
    padding: 5px 11px !important;
    max-width: calc(100% - 128px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 2 !important;
  }

  /* General responsive visual-caption across all pages */
  .visual-caption {
    font-size: 0.72rem !important;
    padding: 6px 14px !important;
    bottom: 12px !important;
  }

  /* 15. Simplify stat-band on mobile */
  .stat-band {
    background: #FAF6ED !important;
    border-block: 1px solid rgba(125, 29, 63, 0.10) !important;
    box-shadow: none !important;
  }
}


/* =====================================================================
   VESTRA-STYLE CATEGORIZED EXPANDABLE FOOTER ACCORDIONS
   ===================================================================== */
.vestra-footer-nav {
  width: 100%;
  max-width: 980px;
  margin: 36px auto 28px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 20;
}

.vestra-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.vestra-nav-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  padding: 9px 20px;
  border-radius: 9999px;
  font-family: var(--font-label, 'Cabinet Grotesk', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vestra-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(223, 175, 69, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

.vestra-nav-btn[aria-expanded="true"] {
  background: rgba(223, 175, 69, 0.16);
  border-color: var(--gold-400, #dfaf45);
  color: var(--gold-300, #f2cf78);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(223, 175, 69, 0.35);
}

.vestra-nav-label {
  display: inline-block;
}

.vestra-nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: currentColor;
  width: 13px;
  height: 13px;
}

.vestra-nav-btn[aria-expanded="true"] .vestra-nav-chevron {
  transform: rotate(180deg);
}

.vestra-panels-container {
  position: relative;
  width: 100%;
}

.vestra-panel {
  background: rgba(18, 3, 9, 0.96) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(223, 175, 69, 0.38) !important;
  border-radius: 18px;
  padding: 28px 34px;
  margin-top: 6px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: vestraPanelFade 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #F8FAFC !important;
}

.vestra-panel[hidden] {
  display: none !important;
}

@keyframes vestraPanelFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vestra-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.vestra-col {
  display: flex;
  flex-direction: column;
}

.vestra-kicker {
  font-family: var(--font-label, 'Cabinet Grotesk', system-ui, sans-serif);
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: #FBBF24 !important;
  margin-bottom: 14px;
  display: block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.25) !important;
}

.vestra-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vestra-list li a {
  color: #FFFFFF !important;
  font-size: 0.90rem !important;
  font-weight: 600 !important;
  line-height: 1.45;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  opacity: 0.95;
}

.vestra-list li a:hover {
  color: #FDE68A !important;
  opacity: 1;
  transform: translateX(4px);
}

.vestra-contact-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem !important;
  color: #F8FAFC !important;
  line-height: 1.55;
}

.vestra-contact-details p {
  margin: 0 !important;
  color: #F8FAFC !important; /* Critical override against p { color: var(--ink-700) } */
  font-size: 0.88rem !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
}

.vestra-contact-details strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

.vestra-contact-details a {
  color: #FDE68A !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
  transition: color 0.15s ease;
}

.vestra-contact-details a:hover {
  color: #FFFFFF !important;
}

/* Vestra-style bottom statutory line */
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

.foot-stats-row {
  display: flex;
  gap: 16px;
  row-gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.foot-stats-row a {
  font-family: var(--font-label, 'Cabinet Grotesk', system-ui, sans-serif);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.18s ease;
}

.foot-stats-row a:hover {
  color: #FDE68A;
}

@media (max-width: 680px) {
  .vestra-btn-row {
    gap: 8px;
  }
  .vestra-nav-btn {
    padding: 8px 14px;
    font-size: 0.67rem;
    letter-spacing: 0.08em;
    gap: 6px;
  }
  .vestra-panel {
    padding: 20px 18px;
    border-radius: 14px;
  }
  .vestra-panel-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .foot-stats-row {
    gap: 10px;
  }
  .foot-stats-row a {
    font-size: 0.63rem;
    letter-spacing: 0.1em;
  }
}


/* =========================================================================
   DAGEROZ FOUNDERS MODAL: MOBILE CENTERING & VERTICALLY PARALLEL (BOTH AT ONCE)
   ========================================================================= */
@media (max-width: 768px) {
  /* Ensure modal container is strictly centered with zero horizontal overflow */
  .dageroz-modal {
    padding: 12px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Exactly centered card with equal left/right margins and no screen clipping */
  .dageroz-card.dageroz-founder-card {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    max-height: 92vh !important;
    margin: 0 auto !important;
    padding: 18px 12px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), inset 0 1px 1px rgba(255, 243, 176, 0.3) !important;
  }

  .dageroz-founder-card .dageroz-close-btn {
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1.15rem !important;
  }

  .founder-brand-row {
    gap: 8px !important;
  }

  .dageroz-logo-symbol {
    width: 34px !important;
    height: 34px !important;
  }

  .founder-agency-title {
    font-size: 1.15rem !important;
  }

  .founder-kicker-pill {
    font-size: 0.52rem !important;
    padding: 2px 6px !important;
  }

  .founder-live-pill {
    font-size: 0.52rem !important;
    padding: 2px 6px !important;
    margin-top: 4px !important;
  }

  .founder-headline-bar {
    padding: 6px 10px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }

  .founder-subhead-text {
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
  }

  /* BOTH FOUNDERS SIDE-BY-SIDE IN VERTICALLY PARALLEL TRACKS (BOTH AT A TIME) */
  .founders-vertical-split {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .founders-vertical-divider {
    display: block !important;
    width: 1px !important;
    height: auto !important;
    min-height: 100% !important;
    background: linear-gradient(180deg, 
      transparent 0%, 
      rgba(255, 217, 138, 0.35) 15%, 
      rgba(255, 217, 138, 0.85) 50%, 
      rgba(255, 217, 138, 0.35) 85%, 
      transparent 100%
    ) !important;
    box-shadow: 0 0 6px rgba(255, 217, 138, 0.3) !important;
    margin: 0 !important;
  }

  .founder-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .founder-profile-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 5px !important;
  }

  .founder-avatar-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }

  .founder-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .founder-role-tag {
    font-size: 0.52rem !important;
    letter-spacing: 0.08em !important;
    padding: 2px 5px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }

  .founder-name {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 1px 0 !important;
    white-space: nowrap !important;
  }

  .founder-subrole {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .founder-quote {
    font-size: 0.66rem !important;
    line-height: 1.32 !important;
    padding: 6px 8px !important;
    margin: 2px 0 !important;
    border-radius: 0 6px 6px 0 !important;
    background: rgba(255, 217, 138, 0.04) !important;
    border-left: 2px solid #FFD98A !important;
  }

  .founder-links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .founder-link-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 217, 138, 0.16) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    text-decoration: none !important;
  }

  .founder-link-icon {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
    color: #FFD98A !important;
  }

  .founder-link-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  .founder-link-label {
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.15 !important;
    color: #FFD98A !important;
  }

  .founder-link-val {
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .founder-link-arrow {
    font-size: 0.74rem !important;
    color: #FFD98A !important;
    flex-shrink: 0 !important;
  }

  .founder-skills-strip {
    padding: 8px 10px !important;
    margin: 10px 0 12px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  .skills-strip-label {
    font-size: 0.58rem !important;
  }

  .skills-tags {
    gap: 4px !important;
  }

  .skill-tag {
    font-size: 0.56rem !important;
    padding: 2px 5px !important;
  }

  .founder-footer-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .founder-agency-btn,
  .replay-intro-btn,
  .founder-close-link-btn {
    padding: 7px 10px !important;
    font-size: 0.68rem !important;
    flex: 1 1 auto !important;
  }
}


/* =========================================================================
   COMPREHENSIVE MOBILE UI FIXES (HERO SECTION & DAGEROZ FOUNDERS MODAL)
   ========================================================================= */
@media (max-width: 768px) {

  /* -----------------------------------------------------------------------
     1. HERO SECTION: COMPLETE HORIZONTAL CONTAINMENT & ZERO SHIFT
     ----------------------------------------------------------------------- */
  .inspire-hero-stage,
  #hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 16px 0 20px !important;
  }

  .inspire-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .inspire-hero-grid .client-curved-card {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .inspire-hero-grid .hero-editorial-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-editorial-title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(1.60rem, 6.2vw, 2.05rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #2E0815 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .hero-editorial-title em {
    font-style: italic !important;
    font-weight: 600 !important;
    color: #7D1D3F !important;
  }

  .hero-editorial-lead {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    color: #5E4E56 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .hero-editorial-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 0 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 8px !important;
    font-size: clamp(0.70rem, 3.1vw, 0.80rem) !important;
    white-space: nowrap !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .hero-metrics-minimal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(125, 29, 63, 0.10) !important;
    border-radius: 14px !important;
    padding: 10px 8px !important;
    margin: 0 0 14px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(46, 8, 21, 0.05) !important;
  }

  /* 2x2 Clean Grid for Photo Pills on Mobile (NO OVERFLOW, NO CUT-OFF!) */
  .hero-photo-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 4px !important;
    margin: 0 0 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(125, 29, 63, 0.08) !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .photo-pill-btn {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 7px 6px !important;
    font-size: 0.68rem !important;
    font-family: var(--font-label, monospace) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* -----------------------------------------------------------------------
     2. DAGEROZ FOUNDERS MODAL: ZERO OVERLAP, PIXEL-PERFECT SYMMETRY
     ----------------------------------------------------------------------- */
  .dageroz-modal {
    padding: 12px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .dageroz-card.dageroz-founder-card {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    max-height: 92vh !important;
    margin: 0 auto !important;
    padding: 18px 12px 14px 12px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), inset 0 1px 1px rgba(255, 243, 176, 0.3) !important;
  }

  /* Header without overlap */
  .founder-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    padding-top: 4px !important;
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .founder-brand-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .dageroz-logo-symbol {
    height: 32px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
  }

  .dageroz-img-logo {
    height: 32px !important;
    width: auto !important;
    max-width: 78px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .founder-kicker-pill {
    font-family: var(--font-label, monospace) !important;
    font-size: 0.52rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: #FFD98A !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .founder-agency-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    color: #FFFFFF !important;
    margin: 1px 0 !important;
    line-height: 1.1 !important;
  }

  .founder-live-pill {
    font-family: var(--font-ui, sans-serif) !important;
    font-size: 0.50rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 2px 8px !important;
    background: rgba(255, 217, 138, 0.08) !important;
    border: 1px solid rgba(255, 217, 138, 0.25) !important;
    border-radius: 999px !important;
    color: #FFD98A !important;
    margin-top: 3px !important;
    display: inline-block !important;
  }

  .dageroz-founder-card .dageroz-close-btn {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    color: #FFFFFF !important;
    z-index: 20 !important;
  }

  .founder-headline-bar {
    background: rgba(255, 217, 138, 0.03) !important;
    border: 1px solid rgba(255, 217, 138, 0.12) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .founder-subhead-text {
    font-size: 0.72rem !important;
    line-height: 1.38 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
  }

  /* Both Profiles in Vertically Parallel Columns */
  .founders-vertical-split {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .founders-vertical-divider {
    display: block !important;
    width: 1px !important;
    height: auto !important;
    min-height: 100% !important;
    background: linear-gradient(180deg, 
      transparent 0%, 
      rgba(255, 217, 138, 0.35) 15%, 
      rgba(255, 217, 138, 0.85) 50%, 
      rgba(255, 217, 138, 0.35) 85%, 
      transparent 100%
    ) !important;
    box-shadow: 0 0 6px rgba(255, 217, 138, 0.3) !important;
    margin: 0 !important;
  }

  .founder-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .founder-profile-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
  }

  .founder-avatar-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }

  .founder-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .founder-role-tag {
    font-size: 0.52rem !important;
    letter-spacing: 0.08em !important;
    padding: 2px 5px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }

  .founder-name {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 1px 0 !important;
    white-space: nowrap !important;
  }

  .founder-subrole {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Equalized Quote Heights so Buttons Below Always Align Horizontally */
  .founder-quote {
    font-size: 0.65rem !important;
    line-height: 1.34 !important;
    padding: 6px 8px !important;
    margin: 2px 0 6px 0 !important;
    border-radius: 0 6px 6px 0 !important;
    background: rgba(255, 217, 138, 0.04) !important;
    border-left: 2px solid #FFD98A !important;
    min-height: 82px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .founder-links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .founder-link-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 217, 138, 0.16) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    text-decoration: none !important;
  }

  .founder-link-icon {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
    color: #FFD98A !important;
  }

  .founder-link-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  .founder-link-label {
    font-family: var(--font-label, monospace) !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.15 !important;
    color: #FFD98A !important;
  }

  .founder-link-val {
    font-size: 0.60rem !important;
    line-height: 1.15 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .founder-link-arrow {
    font-size: 0.74rem !important;
    color: #FFD98A !important;
    flex-shrink: 0 !important;
  }

  /* Compact Inline Skills Matrix (NO GIANT BLOCKS, NO CUT-OFF) */
  .founder-skills-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    margin: 8px 0 10px !important;
    background: rgba(255, 217, 138, 0.04) !important;
    border: 1px solid rgba(255, 217, 138, 0.16) !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .skills-strip-label {
    font-family: var(--font-label, monospace) !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    color: #FFD98A !important;
    text-transform: uppercase !important;
  }

  .skills-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .skill-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-ui, sans-serif) !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 217, 138, 0.22) !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    width: auto !important;
    box-shadow: none !important;
  }

  /* Footer Actions */
  .founder-card-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-top: 8px !important;
    margin-top: 2px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .founder-footer-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .founder-agency-btn,
  .replay-intro-btn,
  .founder-close-link-btn {
    padding: 7px 10px !important;
    font-size: 0.66rem !important;
    flex: 1 1 auto !important;
    text-align: center !important;
    border-radius: 8px !important;
  }
}


/* =========================================================================
   VESTRA FOOTER: STRICT 1-LINE HORIZONTAL ACCORDION BUTTONS (ALL SCREEN SIZES)
   ========================================================================= */
.vestra-footer-nav {
  width: 100% !important;
  max-width: 980px !important;
  margin: 30px auto 20px auto !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.vestra-btn-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.vestra-nav-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px 6px !important;
  font-family: var(--font-label, 'Cabinet Grotesk', system-ui, sans-serif) !important;
  font-size: clamp(0.54rem, 2.3vw, 0.68rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

.vestra-nav-label {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: inherit !important;
}

.vestra-nav-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
}

.vestra-nav-chevron svg {
  width: 10px !important;
  height: 10px !important;
}

@media (max-width: 480px) {
  .vestra-btn-row {
    gap: 4px !important;
  }
  .vestra-nav-btn {
    padding: 7px 3px !important;
    font-size: clamp(0.50rem, 2.2vw, 0.62rem) !important;
    letter-spacing: 0.02em !important;
    gap: 3px !important;
  }
}


/* Universal Safe Scroll Margins for All Hash Targets (Header Breathing Room) */
:target,
[id="senior"],
[id="senior-science"],
[id="senior-commerce"],
[id="secondary"],
[id="middle"],
[id="preparatory"],
[id="foundational"],
[id="leadership"],
[id="history"],
[id="location"],
[id="fees"],
[id="eligibility"],
[id="enquiry"],
[id="visit"],
[id="houses"],
[id="cultural"],
[id="spiritual"],
[id="library"],
[id="labs"],
[id="safety"],
[id="disclosure"] {
  scroll-margin-top: calc(var(--header-h, 72px) + 24px) !important;
}

/* ==========================================================================
   OFFICIAL FEE STRUCTURE TABLE & PDF PREVIEW LIGHTBOX
   ========================================================================== */
.fee-highlight-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 24px 0 26px;
}
.fee-highlight-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(125, 29, 63, 0.14);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 14px rgba(46, 8, 21, 0.04);
}
.fee-highlight-kicker {
  font-family: var(--font-label, 'Cabinet Grotesk', system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-700);
  font-weight: 700;
}
.fee-highlight-val {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-900);
}
.fee-highlight-sub {
  font-size: 0.80rem;
  color: var(--ink-500);
  line-height: 1.35;
}

.fee-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.fee-actions-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 10px 20px;
}

.fee-table-wrap {
  border: 1px solid rgba(125, 29, 63, 0.16);
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(46, 8, 21, 0.06);
}
.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.90rem;
  min-width: 620px;
}
.fee-table thead th {
  background: var(--wine-900);
  color: #ffffff;
  font-family: var(--font-label, 'Cabinet Grotesk', system-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 16px;
  text-align: right;
  border: none;
  white-space: nowrap;
}
.fee-table thead th:first-child {
  text-align: left;
}
.fee-table thead th:last-child {
  background: #5a1027;
  color: #fce7b6;
}
.fee-table tbody td {
  padding: 12px 16px;
  border-top: 1px solid rgba(125, 29, 63, 0.08);
  color: var(--ink-800);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}
.fee-table tbody td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--ink-900);
}
.fee-table tbody td:last-child {
  font-weight: 800;
  color: var(--wine-800);
  background: rgba(125, 29, 63, 0.03);
}
.fee-table tbody tr:hover td {
  background: rgba(125, 29, 63, 0.04);
}
.fee-table tbody tr:hover td:last-child {
  background: rgba(125, 29, 63, 0.08);
}
.fee-stage-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-family: var(--font-label, system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.fee-stage-tag.tag-foundational {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.fee-stage-tag.tag-primary {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.fee-stage-tag.tag-middle {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.fee-stage-tag.tag-secondary {
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}
.fee-stage-tag.tag-senior {
  background: rgba(190, 24, 93, 0.12);
  color: #9d174d;
}

/* Document Showcase Card */
.fee-doc-showcase-card {
  margin-top: 36px;
  background: linear-gradient(145deg, #ffffff 0%, #faf6f0 100%);
  border: 1px solid rgba(125, 29, 63, 0.18);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 35px rgba(46, 8, 21, 0.06);
}
.fee-doc-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(125, 29, 63, 0.1);
}
.fee-doc-showcase-meta h3 {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.15rem;
  color: var(--ink-900);
  margin: 0 0 4px 0;
}
.fee-doc-showcase-meta p {
  font-size: 0.84rem;
  color: var(--ink-500);
  margin: 0;
}
.fee-doc-showcase-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fee-preview-thumbnail-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(125, 29, 63, 0.14);
  background: #ffffff;
  cursor: pointer;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(46, 8, 21, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fee-preview-thumbnail-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(46, 8, 21, 0.14);
}
.fee-preview-img {
  width: 100%;
  height: auto;
  display: block;
}
.fee-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46, 8, 21, 0.85) 0%, rgba(46, 8, 21, 0.25) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.fee-preview-thumbnail-wrap:hover .fee-preview-overlay {
  opacity: 1;
}
.fee-overlay-badge {
  background: rgba(255, 255, 255, 0.96);
  color: var(--wine-900);
  font-family: var(--font-label, 'Cabinet Grotesk', system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Lightbox Modal */
.fee-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.fee-pdf-modal[hidden] {
  display: none !important;
}
.fee-pdf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 4, 9, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.fee-pdf-modal-dialog {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: feeModalZoom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes feeModalZoom {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.fee-pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--wine-900);
  color: #ffffff;
}
.fee-modal-kicker {
  display: block;
  font-family: var(--font-label, system-ui, sans-serif);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fce7b6;
  font-weight: 700;
}
.fee-modal-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.15rem;
  color: #ffffff;
  margin: 2px 0;
}
.fee-modal-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}
.fee-modal-close {
  appearance: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.fee-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}
.fee-pdf-modal-body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f7f3ee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fee-modal-doc-img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  display: block;
}
.fee-pdf-modal-footer {
  padding: 12px 20px;
  background: #ffffff;
  border-top: 1px solid rgba(125, 29, 63, 0.1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .fee-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .fee-actions-bar .btn {
    justify-content: center;
    width: 100%;
  }
  .fee-highlight-ribbon {
    grid-template-columns: 1fr;
  }
  .fee-doc-showcase-card {
    padding: 16px 14px;
  }
  .fee-doc-showcase-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .fee-pdf-modal {
    padding: 8px;
  }
  .fee-pdf-modal-dialog {
    max-height: 94vh;
  }
}

/* ==========================================================================
   CONTACT PAGE: LOCATION VISUAL ARCH & RESPONSIVE MEDIA COMPACTNESS
   ========================================================================== */
.contact-location-arch {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
}

@media (min-width: 901px) {
  .contact-location-arch {
    height: 100%;
    min-height: 580px;
    align-self: stretch;
  }
  .contact-location-arch img {
    width: 100%;
    height: 100% !important;
    min-height: 580px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block;
    border-radius: inherit;
  }
}

@media (max-width: 900px) {
  .contact-location-arch {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 24px !important;
    align-self: auto !important;
  }
  .contact-location-arch img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 250px !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    object-position: center 22% !important;
    display: block;
    border-radius: inherit;
  }
}


/* Dynamic Island Smart Auto-Hide on Mobile Scroll Down */
@media (max-width: 768px) {
  .header-left-group {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, box-shadow 0.24s ease, background 0.24s ease !important;
  }
  .header-left-group.island-hidden {
    transform: translate(-50%, -150%) scale(0.92) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Safe breathing room for section headings */
  .section, section[id], .showcase-header, .section-head-center {
    scroll-margin-top: 76px !important;
  }
}

/* Mobile Table Horizontal Swipe Hint & Sticky First Column */
.mobile-table-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(125, 29, 63, 0.06);
  border: 1px dashed rgba(125, 29, 63, 0.22);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--font-label, monospace);
  font-size: 0.74rem;
  color: var(--wine-900, #47102a);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .mobile-table-hint {
    display: flex;
  }

  .fee-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--wine-900) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  }

  .fee-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #FFFFFF !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  }

  .fee-table tbody tr:hover td:first-child {
    background: #FAF5F0 !important;
  }
}


/* ==========================================================================
   UNIFORM PHOTO GRID ALIGNMENT & PERFECT HORIZONTAL BASELINE OVERRIDES
   - Eliminates asymmetrical lancet arches, uneven card heights, and crooked tops
   - Forces identical 16:10 aspect ratio and 16px rounded borders on all cards
   - Aligns card titles, descriptions, and action buttons in straight level rows
   ========================================================================== */

/* 1. Global Card Flex & Height Normalization */
.arch-card,
.card,
.modern-pillar-card,
.wing-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 2. Override all asymmetric nth-child card crowns */
.arch-card:nth-child(odd),
.arch-card:nth-child(even),
.arch-card:nth-child(1),
.arch-card:nth-child(2),
.arch-card:nth-child(3),
.arch-card:nth-child(4),
.arch-card:nth-child(5),
.arch-card:nth-child(6) {
  border-radius: 16px !important;
}

/* 3. Media Containers - Uniform 16:10 Ratio & Identical Top Radii */
.arch-media,
.card-media {
  margin: 0 !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  max-height: none !important;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--cream-200, #EDE8DE) !important;
  flex-shrink: 0 !important;
}

/* Override all asymmetric lancet arch media radii from premium.css */
.arch-card:nth-child(1) .arch-media,
.arch-card:nth-child(2) .arch-media,
.arch-card:nth-child(3) .arch-media,
.arch-card:nth-child(4) .arch-media,
.arch-card:nth-child(odd) .arch-media,
.arch-card:nth-child(even) .arch-media {
  border-radius: 16px 16px 0 0 !important;
}

/* 4. Card Media Images - Uniform Cover & Exact Sizing */
.arch-media img,
.card-media img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
}

.arch-card:hover .arch-media img,
.card:hover .card-media img {
  transform: scale(1.03) !important;
}

/* 5. Card Body & Content Uniformity */
.arch-body,
.card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 20px 20px 22px !important;
  box-sizing: border-box !important;
}

.arch-title,
.card-title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 1.15rem !important;
  line-height: 1.3 !important;
}

.arch-text,
.card-text {
  margin-bottom: 14px !important;
  flex: 1 1 auto !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--ink-700, #46303a) !important;
}

.arch-foot,
.card-foot,
.pillar-card-action {
  margin-top: auto !important;
}

/* 6. Mobile Refinements (<= 768px): Straight lines, equal height cards */
@media (max-width: 768px) {
  .arch-media,
  .card-media {
    aspect-ratio: 16 / 10 !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .arch-card,
  .card,
  .wing-card {
    border-radius: 14px !important;
    height: 100% !important;
  }

  .arch-body,
  .card-body {
    padding: 14px 12px 16px !important;
  }

  .arch-title,
  .card-title {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

  .arch-text,
  .card-text {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
  }

  /* Single-line feature descriptions on mobile pillars */
  .pillar-card-desc {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 8px !important;
  }
}

/* 7. Footer Secretariat High-Contrast Address Legibility */
.vestra-contact-details p {
  color: #FFFFFF !important;
  font-size: 0.90rem !important;
  line-height: 1.6 !important;
}

.vestra-contact-details strong {
  color: #FBBF24 !important;
  font-weight: 700 !important;
}

.vestra-contact-details a {
  color: #FDE68A !important;
  text-decoration: underline !important;
}

/* ============================================================================
   RECTANGULAR LEADERSHIP PORTRAIT FRAME
   ============================================================================ */
.visual-rect {
  border-radius: var(--radius-lg, 24px) !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;
  position: relative !important;
  margin: 0 !important;
  box-shadow: 0 20px 48px -12px rgba(46, 8, 21, 0.18), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  border: 1.5px solid rgba(217, 184, 138, 0.45) !important;
  background: #FFFFFF !important;
}

.visual-rect picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.visual-rect img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}

/* Coordinator Portrait Framing (Ensures Head and Face are Fully Visible) */
.coordinator-portrait-img,
.coordinator-portrait-frame img,
img[src*="coordinator.jpg"] {
  object-fit: cover !important;
  object-position: center top !important;
}


/* ============================================================================
   FLOATING DDA BUTTON: ROYAL WINE THEME (#7D1D3F / #2E0815)
   Replaced cold blue (#d7efff) with signature Royal Wine & Antique Gold
   ============================================================================ */
.dageroz-float-btn .dfb-halo {
  background: radial-gradient(circle, rgba(125, 29, 63, 0.6) 0%, rgba(217, 184, 138, 0.28) 45%, transparent 72%) !important;
}

.dageroz-float-btn .dfb-inner {
  background: radial-gradient(circle at 35% 30%, rgba(125, 29, 63, 0.5) 0%, rgba(70, 11, 33, 0.28) 60%, rgba(46, 8, 21, 0.48) 100%) !important;
  border: 2px solid rgba(217, 184, 138, 0.8) !important;
  box-shadow:
    0 10px 26px -4px rgba(46, 8, 21, 0.45),
    0 0 18px 2px rgba(125, 29, 63, 0.6),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.75),
    inset 0 -1.5px 3px rgba(125, 29, 63, 0.45) !important;
  color: #FDE68A !important;
}

.dageroz-float-btn:hover .dfb-inner {
  background: radial-gradient(circle at 35% 30%, rgba(125, 29, 63, 0.72) 0%, rgba(70, 11, 33, 0.4) 60%, rgba(46, 8, 21, 0.65) 100%) !important;
  border-color: #D9B88A !important;
  box-shadow:
    0 14px 34px -4px rgba(46, 8, 21, 0.65),
    0 0 24px 4px rgba(217, 184, 138, 0.7),
    inset 0 2px 3px rgba(255, 255, 255, 0.95) !important;
}

.dageroz-float-btn .dfb-wave-icon svg {
  stroke: #FDE68A !important;
  filter: drop-shadow(0 1px 3px rgba(46, 8, 21, 0.6)) !important;
}

.dfb-logo-img {
  filter: brightness(1.2) drop-shadow(0 1px 4px rgba(217, 184, 138, 0.75)) !important;
}

/* Desktop: Never clamp leadership quotes and hide 3-dots button */
@media (min-width: 769px) {
  .leadership-quote-dots-btn {
    display: none !important;
  }
  .leadership-card .leadership-quote {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    cursor: default !important;
  }
}

@media (max-width: 380px) {
  .visual-stack .visual-caption {
    left: 8px !important;
    bottom: 8px !important;
    font-size: 0.62rem !important;
    padding: 4px 8px !important;
    max-width: calc(100% - 105px) !important;
  }
  .visual-mini {
    width: 95px !important;
    max-width: 30% !important;
    bottom: 6px !important;
    right: 4px !important;
  }
}