/* ═══════════════════════════════════════════════════════════════
   MAHOGANY ROW — RESPONSIVE SYSTEM
   Fully responsive: phones → tablets → iPads → laptops → 
                     desktops → large TVs
   Mobile-first breakpoints:
     xs  : < 480px   (small phones)
     sm  : 480–767px (phones, large phones)
     md  : 768–1023px (tablets, iPads)
     lg  : 1024–1279px (laptops, small desktops)
     xl  : 1280–1535px (desktops)
     2xl : 1536–1919px (large desktops)
     tv  : ≥ 1920px  (large TVs / 4K)
═══════════════════════════════════════════════════════════════ */

/* ─── GLOBAL BOX MODEL SAFETY ───────────────────────────────── */
html {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
  min-width: 320px;
}
*, *::before, *::after {
  box-sizing: border-box;
}
/* NOTE: max-width:100% is NOT applied globally.
   Doing so breaks: (1) intro video height, (2) logo mask ellipse
   wider than element box, (3) pseudo-element sweep animations.
   We apply max-width selectively per-element instead.            */

/* ─── INTRO / LOADER ─────────────────────────────────────────
   The intro overlay is position:fixed inset:0 — already correct.
   The video uses width:100%;height:100%;object-fit:cover in 
   index.html — that is the correct approach. DO NOT override it.
   The opacity:0 + animation:intro-fade on the video must be 
   preserved — any position:absolute override here would break it.
   Only add safe non-conflicting safety rules here.              */

#intro-overlay {
  overflow: hidden;
}

/* Safety: ensure the wrap fills the overlay */
.intro-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* MR Loader (splash screen before intro video) */
.mr-loader {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── NAVIGATION ──────────────────────────────────────────────
   Prevent nav overflow on all screens                        */
.nav {
  max-width: 100vw;
}
.nav-logo {
  flex-shrink: 0;
  min-width: 0;
  white-space: nowrap;
}
.nav-links {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

/* Mobile nav overlay — full screen, centered links */
.mobile-nav {
  padding: 4rem 2rem;
  gap: 1.5rem;
  overflow-y: auto;
}
.mobile-nav a {
  font-size: clamp(1.4rem, 6vw, 2rem);
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* ─── CINEMA SYSTEM — RESPONSIVE ─────────────────────────────
   #mr-homepage = primary landing screen (no intro).
   Background: cinematic full-bleed image (images/mr-bg-cinema.jpg)
   Stack (text + buttons): #mr-homepage-stack                  */

/* Homepage: fixed viewport, no overflow */
#mr-homepage,
#mr-homepage-bg,
#mr-live-embers {
  max-width: 100vw;
}

/* Button container: narrower on small phones */
#mr-homepage-btns {
  max-width: 92vw;
  padding: 0 0.75rem;
  box-sizing: border-box;
}
.mrw-btn-grid {
  max-width: 100%;
}

/* Small phones */
@media (max-width: 480px) {
  #mrw-sound-btn   { bottom: 1rem; right: 1rem; }
  .mrw-tagline,
  #mr-homepage-tagline { font-size: 0.8rem; }
  /* Fewer live embers on small phones for perf */
  #mr-live-embers  { opacity: 0.6 !important; }
  /* On small phones: centre the whole stack, pull it slightly higher */
  #mr-homepage-stack {
    top: 74% !important;
    left: 50% !important;
    align-items: center !important;
    width: 90vw !important;
  }
  #mr-homepage-text  { text-align: center !important; }
  #mr-homepage-eyebrow { justify-content: center !important; }
  #mr-homepage-tagline { text-align: center !important; max-width: 90vw !important; }
  #mr-homepage-btns  { align-items: center !important; }
}

/* Wider stack container on tablet+ */
@media (min-width: 768px) {
  #mr-homepage-stack { width: clamp(280px, 30vw, 420px); }
}
@media (min-width: 1024px) {
  #mr-homepage-stack { width: clamp(280px, 28vw, 400px); }
}

/* ─── LEGACY CINEMATIC VIDEO HERO (stubs, kept for other pages) ── */
#mr-video-hero,
#mr-hero-video {
  width: 100%;
  max-width: 100vw;
}

/* UI padding: tighter on small screens */
#mr-video-ui {
  padding: 1.25rem;
  text-align: center;
}

/* Logo over video: smaller on phones */
.mrvh-logo {
  width: clamp(200px, 72vw, 620px);
}

/* Button grid: full width on small screens */
.mrvh-btn-grid {
  max-width: 100%;
  padding: 0 0.5rem;
}

/* Sound + Enter buttons: closer to edges on small */
@media (max-width: 480px) {
  #mrvh-sound-btn { bottom: 1rem; right: 1rem; font-size: 0.5rem; padding: 0.5rem 0.75rem; }
  #mrvh-enter-btn { bottom: 1rem; font-size: 0.5rem; }
  .mrvh-tagline   { font-size: 0.78rem; }
}

/* Tablet: wider buttons */
@media (min-width: 768px) {
  .mrvh-btn-grid { max-width: 400px; }
  .mrvh-logo     { width: clamp(300px, 52vw, 680px); }
}

/* Desktop: full size */
@media (min-width: 1024px) {
  .mrvh-logo     { width: clamp(400px, 44vw, 720px); }
  .mrvh-btn-grid { max-width: 380px; }
}

/* ─── HERO / BANNER STAGE ────────────────────────────────────
   Logo: centered, blended into background, no box/border.    */
.hero-scene,
.hero {
  min-height: 100svh; /* small viewport height for mobile browsers */
  overflow: hidden;
  position: relative;
}

/* Banner stage: spans full width, no background, centred content */
.mr-banner-stage {
  text-align: center;
  background: transparent !important;
  left: 0 !important;
  right: 0 !important;
}

/* Banner environment: no borders, no box artifacts.
   overflow:hidden clips the env background layers cleanly.       */
.mr-banner-env {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Logo image: block, centred, no box artifacts.
   Mask and sizing defined in index.html — only safety rules here. */
.mr-img-title {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Hero content: don't let it touch edges */
.hero-content {
  width: 100%;
  max-width: 100%;
}

/* Hero tagline: don't overflow small screens */
.hero-tagline,
.hero-main-title,
.hero-pre {
  max-width: 100%;
  word-break: break-word;
}

/* Hero button grid: stacked on small, horizontal on larger */
.hero-btn-grid {
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* HX entry button: full width, text always visible */
.hx-entry-wrap {
  width: 100%;
  max-width: 400px;
}
/* The button uses overflow:hidden for the sweep animation — this is fine.
   Ensure the inner layout always gives text enough room.                  */
.hx-entry-btn {
  width: 100%;
  min-width: 0;
}
/* Label: flex:1 so it fills remaining space after icon and arrow.
   white-space:nowrap is correct — we reduce letter-spacing instead
   to prevent clipping on narrower widths.                           */
.hx-entry-label {
  flex: 1;
  min-width: 0;
}
/* Icon and arrow must not grow — they're fixed-size decorative elements */
.hx-entry-icon {
  flex-shrink: 0;
}
.hx-entry-arrow {
  flex-shrink: 0;
}

/* Scroll hint: always visible and centered */
.hero-scroll-hint {
  left: 50%;
  transform: translateX(-50%);
}

/* ─── GENERAL SECTIONS ───────────────────────────────────────  */
.section,
.section-sm,
.section-lg {
  width: 100%;
  overflow: hidden;
}

.container,
.container-sm {
  width: 100%;
  padding: 0 1rem;
}

/* Quote block: no overflow */
.quote-block {
  overflow: hidden;
  word-break: break-word;
}
.quote-block p {
  max-width: 100%;
}

/* ─── CARDS ──────────────────────────────────────────────────  */
.card-inner {
  padding: clamp(1rem, 3vw, 2.5rem);
}

/* ─── FRANCHISE SECTION ──────────────────────────────────────  */
.franchise-strip {
  padding: 4rem 2rem;
}
.franchise-items {
  gap: 1.5rem;
}
.franchise-item {
  min-width: 140px;
  flex: 1 1 140px;
}

/* ─── UNIVERSE INTRO GRID ────────────────────────────────────  */
.univ-inner {
  width: 100%;
}

/* ─── TEASER CARDS ───────────────────────────────────────────  */
.teaser-section {
  overflow: hidden;
}
.teaser-cards {
  overflow: hidden;
}

/* ─── OMEGA GRID ─────────────────────────────────────────────  */
.omega-prev-grid {
  overflow: hidden;
}
.omega-prev-item {
  min-width: 0;
  overflow: hidden;
}

/* ─── FRANCHISE GRID ─────────────────────────────────────────  */
.franchise-grid {
  overflow: hidden;
}
.franchise-item {
  min-width: 0;
}

/* ─── SIGNAL / FOOTER ────────────────────────────────────────  */
.signal-section {
  overflow: hidden;
}
.signal-inner {
  width: 100%;
}
.signal-email {
  min-width: 0;
  width: 100%;
}

/* ─── MEDIA (images/videos) ──────────────────────────────────  */
img, iframe {
  max-width: 100%;
  height: auto;
}
/* General video: capped width, block display */
video {
  max-width: 100%;
  display: block;
}

/* ── Legacy video wrappers (other pages) ── */
.intro-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-wrapper {
  max-width: 100%;
}

/* ─── FOOTER ─────────────────────────────────────────────────  */
.footer {
  overflow: hidden;
}
.footer-grid {
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: TV / ULTRA-WIDE (≥ 1920px)
   Scale typography and spacing up; retain cinematic layout.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  html { font-size: 18px; }

  .nav { padding: 2rem 6rem; }
  .nav.scrolled { padding: 1.25rem 6rem; }

  .section { padding: 10rem 6rem; }
  .section-sm { padding: 6rem 6rem; }
  .section-lg { padding: 14rem 6rem; }

  .container { max-width: 1600px; }
  .container-sm { max-width: 1100px; }

  .hero-content { padding: 0 6rem; }

  .univ-intro { padding: 12rem 6rem; }
  .teaser-section { padding: 10rem 6rem; }
  .arch-section { padding: 12rem 6rem; }
  .omega-section { padding: 10rem 6rem; }
  .franchise-section { padding: 12rem 6rem; }
  .signal-section { padding: 8rem 6rem; }

  /* Banner stage: full 16:9 on TV */
  .mr-banner-stage { top: 56vh; }
  .mr-banner-spacer { height: clamp(200px, 32vw, 480px); max-height: 480px; }
  .mr-banner-env { height: clamp(200px, 32vw, 480px); }
  .mr-img-title { width: clamp(500px, 48vw, 960px); }

  /* Intro sound/skip btns: more room */
  #skip-intro-btn { top: 2.5rem; right: 3rem; }
  #intro-sound-btn { bottom: 3rem; right: 3rem; }
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: LARGE DESKTOP (1536px – 1919px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 1536px) and (max-width: 1919px) {
  html { font-size: 17px; }

  .nav { padding: 1.75rem 5rem; }
  .nav.scrolled { padding: 1rem 5rem; }

  .container { max-width: 1400px; }

  .hero-content { padding: 0 5rem; }
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: DESKTOP (1280px – 1535px)
   Standard design reference. Minor tweaks only.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1535px) {
  /* No major overrides needed — base styles are designed for this range */
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: LAPTOP / SMALL DESKTOP (1024px – 1279px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav { padding: 1.5rem 3rem; }
  .nav.scrolled { padding: 1rem 3rem; }
  .nav-links { gap: 1.8rem; }

  .section { padding: 7rem 3rem; }
  .section-sm { padding: 4.5rem 3rem; }
  .section-lg { padding: 10rem 3rem; }

  .hero-content { padding: 0 3rem; padding-top: clamp(7rem, 10vh, 10rem); }

  .univ-intro { padding: 8rem 3rem; }
  .univ-inner { gap: 4rem; }
  .teaser-section { padding: 7rem 3rem; }
  .arch-section { padding: 8rem 3rem; }
  .omega-section { padding: 7rem 3rem; }
  .franchise-section { padding: 8rem 3rem; }
  .signal-section { padding: 5rem 3rem; }

  .omega-prev-grid { grid-template-columns: repeat(5, 1fr); }
  .franchise-grid { grid-template-columns: repeat(4, 1fr); }
  .teaser-cards { grid-template-columns: repeat(3, 1fr); }
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: TABLET / IPAD (768px – 1023px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  html { font-size: 15px; }

  /* Nav */
  .nav { padding: 1.25rem 2.5rem; }
  .nav.scrolled { padding: 0.9rem 2.5rem; }
  .nav-links, .nav-cta, .nav-cta-ghost { display: none; }
  .nav-burger { display: flex; }
  /* Keep About button visible on tablet beside burger */
  .nav-about-btn { display: inline-flex; font-size: 0.62rem; padding: 0.40rem 0.85rem; }

  /* Hero */
  .hero-scene, .hero { min-height: 100svh; }
  .hero-content {
    padding: 0 2.5rem;
    padding-top: clamp(6rem, 11vh, 9rem);
    max-width: 100%;
  }
  .hero-main-title { font-size: clamp(3.5rem, 9vw, 7rem); }
  .hero-tagline { font-size: clamp(0.85rem, 1.8vw, 1rem); max-width: 90%; }
  .hero-btn-grid {
    flex-direction: column;
    align-items: flex-start;
    max-width: 400px;
  }
  .hero-prime-btn {
    width: 100%;
    padding: 1rem 1.5rem;
  }
  .hx-entry-wrap { max-width: 400px; }
  .hx-entry-btn { letter-spacing: 0.18em; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }

  /* Banner / logo — tablet */
  .mr-banner-stage { top: 54vh; }
  .mr-banner-spacer { height: clamp(120px, 40vw, 320px); max-height: 320px; }
  .mr-banner-env { height: clamp(120px, 40vw, 320px); }
  .mr-img-title { width: clamp(260px, 60vw, 640px); }
  #logo-pulse-glow { top: 54vh; }

  /* Sections */
  .section { padding: 5.5rem 2.5rem; }
  .section-sm { padding: 3.5rem 2.5rem; }
  .section-lg { padding: 8rem 2.5rem; }

  /* Universe intro */
  .univ-intro { padding: 6rem 2.5rem; }
  .univ-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Teaser cards: 2-column */
  .teaser-section { padding: 6rem 2.5rem; }
  .teaser-cards { grid-template-columns: repeat(2, 1fr); }
  .teaser-card { padding: 2rem; }

  /* Architect */
  .arch-section { padding: 6rem 2.5rem; }
  .arch-data { gap: 2rem; }

  /* Omega preview: 3-column */
  .omega-section { padding: 6rem 2.5rem; }
  .omega-prev-grid { grid-template-columns: repeat(3, 1fr); }

  /* Franchise: 2-column */
  .franchise-section { padding: 6rem 2.5rem; }
  .franchise-grid { grid-template-columns: repeat(2, 1fr); }

  /* Signal */
  .signal-section { padding: 4rem 2.5rem; }
  .signal-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .signal-form { flex-direction: column; gap: 0; }
  .signal-email { border-right: 1px solid var(--border); border-bottom: none; }

  /* Grid utilities */
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer { padding: 4rem 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .footer-bottom { padding: 1.5rem 0 0; }
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: PHONE (480px – 767px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767px) {
  html { font-size: 15px; }

  /* Nav */
  .nav { padding: 1.2rem 1.5rem; }
  .nav.scrolled { padding: 0.85rem 1.5rem; }
  .nav-links, .nav-cta, .nav-cta-ghost { display: none; }
  .nav-burger { display: flex; }
  /* Keep About visible on small screens */
  .nav-about-btn { display: inline-flex; font-size: 0.60rem; padding: 0.38rem 0.78rem; letter-spacing: 0.18em; }

  /* Hero */
  .hero-scene, .hero { min-height: 100svh; }
  .hero-content {
    padding: 0 1.5rem;
    padding-top: clamp(5.5rem, 13vh, 8rem);
    max-width: 100%;
  }
  .hero-main-title { 
    font-size: clamp(2.8rem, 12vw, 5.5rem);
    line-height: 0.92;
  }
  .hero-tagline {
    font-size: 0.9rem;
    max-width: 100%;
    margin-bottom: 2.5rem;
  }
  .hero-eyebrow-text { font-size: 0.58rem; }
  .hero-btn-grid {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    gap: 0.7rem;
  }
  .hero-prime-btn {
    width: 100%;
    padding: 0.95rem 1.4rem;
    font-size: 0.7rem;
    justify-content: center;
  }
  .hx-entry-wrap { max-width: 100%; }
  .hx-entry-btn {
    font-size: 0.78rem;
    padding: 1rem 1.2rem;
    letter-spacing: 0.16em;
    min-height: 52px;
    justify-content: center;
  }
  .hero-actions { flex-direction: column; gap: 0.85rem; align-items: stretch; }

  /* Banner / logo — phone */
  .mr-banner-stage { top: 48vh; transform: translateY(-50%); }
  .mr-banner-spacer { height: clamp(140px, 55vw, 260px); max-height: 260px; }
  .mr-banner-env { height: clamp(140px, 55vw, 260px); }
  .mr-img-title { width: clamp(200px, 72vw, 340px); }
  #logo-pulse-glow { top: 48vh; }

  /* Skip / sound buttons */
  #skip-intro-btn { top: 1.2rem; right: 1.2rem; font-size: 0.55rem; }
  #intro-sound-btn { bottom: 1.4rem; right: 1.2rem; padding: 0.6rem 0.9rem; font-size: 0.54rem; }
  .intro-bar { bottom: 2rem; }
  .intro-bar-track { width: 160px; }

  /* Sections */
  .section { padding: 4.5rem 1.5rem; }
  .section-sm { padding: 3rem 1.5rem; }
  .section-lg { padding: 6rem 1.5rem; }

  /* Universe intro */
  .univ-intro { padding: 5rem 1.5rem; }
  .univ-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .univ-quote { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }

  /* Teaser: single column */
  .teaser-section { padding: 4.5rem 1.5rem; }
  .teaser-cards { grid-template-columns: 1fr; }
  .teaser-card { padding: 2rem 1.5rem; }
  .teaser-num { font-size: 3rem; margin-bottom: 1rem; }

  /* Architect */
  .arch-section { padding: 5rem 1.5rem; }
  .arch-data { gap: 1.5rem; }
  .arch-classified { gap: 0.75rem; }

  /* Omega: 2-column */
  .omega-section { padding: 4.5rem 1.5rem; }
  .omega-prev-grid { grid-template-columns: repeat(2, 1fr); }
  .omega-prev-item { padding: 1.5rem 1rem; }
  .omega-prev-name { font-size: 0.78rem; }

  /* Franchise: 2-column */
  .franchise-section { padding: 4.5rem 1.5rem; }
  .franchise-grid { grid-template-columns: repeat(2, 1fr); }
  .franchise-item { padding: 1.5rem 1.2rem; }

  /* Signal */
  .signal-section { padding: 3.5rem 1.5rem; }
  .signal-inner { grid-template-columns: 1fr; gap: 2rem; }
  .signal-form { flex-direction: column; }
  .signal-email { border-right: 1px solid var(--border); border-bottom: none; }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer { padding: 3.5rem 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  /* Section header */
  .section-header { margin-bottom: 3rem; }
  .section-header.centered { max-width: 100%; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2.2rem); }

  /* Scroll hint */
  .hero-scroll-hint { bottom: 1.8rem; }
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: SMALL PHONE (< 480px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  html { font-size: 14px; }

  /* Nav */
  .nav { padding: 1rem 1.2rem; }
  .nav.scrolled { padding: 0.75rem 1.2rem; }
  .nav-links, .nav-cta, .nav-cta-ghost { display: none; }
  .nav-burger { display: flex; }
  .nav-logo { font-size: 0.88rem; letter-spacing: 0.2em; }
  /* About stays visible on phone, very compact */
  .nav-about-btn { font-size: 0.58rem; padding: 0.35rem 0.65rem; letter-spacing: 0.14em; gap: 0.3rem; }

  /* Hero */
  .hero-scene, .hero { min-height: 100svh; }
  .hero-content {
    padding: 0 1.2rem;
    padding-top: clamp(5rem, 14vh, 7.5rem);
  }
  .hero-main-title {
    font-size: clamp(2.4rem, 13vw, 4rem);
    line-height: 0.93;
    letter-spacing: 0.04em;
  }
  .hero-tagline {
    font-size: 0.85rem;
    max-width: 100%;
    margin-bottom: 2rem;
    line-height: 1.55;
  }
  .hero-eyebrow { gap: 0.6rem; }
  .hero-eyebrow-line { width: 24px; }
  .hero-eyebrow-text { font-size: 0.55rem; letter-spacing: 0.32em; }
  .hero-main-row { font-size: 0.32em; letter-spacing: 0.45em; }

  /* Button grid: stacked, full-width */
  .hero-btn-grid {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    gap: 0.65rem;
  }
  .hero-prime-btn {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .hx-entry-wrap { max-width: 100%; }
  .hx-entry-btn {
    font-size: 0.72rem;
    padding: 0.95rem 1rem;
    letter-spacing: 0.14em;
    min-height: 50px;
    justify-content: center;
  }
  .hx-entry-label { text-align: center; }
  .hx-entry-arrow { display: none; }
  .hx-entry-sub { font-size: 0.52rem; letter-spacing: 0.3em; }
  .hero-actions { flex-direction: column; gap: 0.75rem; align-items: stretch; }

  /* Banner / logo — small phone */
  .mr-banner-stage { top: 48vh; transform: translateY(-50%); }
  .mr-banner-spacer { height: clamp(110px, 48vw, 200px); max-height: 200px; }
  .mr-banner-env { height: clamp(110px, 48vw, 200px); }
  .mr-img-title { width: clamp(180px, 76vw, 300px); }
  #logo-pulse-glow { top: 48vh; }

  /* Intro overlay buttons */
  #skip-intro-btn {
    top: 1rem; right: 1rem;
    font-size: 0.52rem;
    letter-spacing: 0.3em;
    padding: 0.4rem 0;
  }
  #intro-sound-btn {
    bottom: 1.2rem; right: 1rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.5rem;
    letter-spacing: 0.28em;
    gap: 0.45rem;
  }
  .intro-bar { bottom: 1.6rem; }
  .intro-bar-track { width: 140px; }
  .intro-bar-text { font-size: 0.55rem; letter-spacing: 0.28em; }

  /* Loader */
  .mr-loader__logo { max-width: 200px; }
  .mr-loader__classify,
  .mr-loader__sysid,
  .mr-loader__corner { display: none; }

  /* Scroll hint */
  .hero-scroll-hint { bottom: 1.5rem; }
  .scroll-line { height: 32px; }

  /* Sections */
  .section { padding: 4rem 1.2rem; }
  .section-sm { padding: 2.5rem 1.2rem; }
  .section-lg { padding: 5rem 1.2rem; }
  .section-title { font-size: clamp(1.4rem, 7vw, 2rem); }
  .section-header { margin-bottom: 2.5rem; }

  /* Universe intro */
  .univ-intro { padding: 4rem 1.2rem; }
  .univ-inner { grid-template-columns: 1fr; gap: 2rem; }
  .univ-quote { font-size: clamp(1.1rem, 5vw, 1.5rem); line-height: 1.35; }
  .univ-text { font-size: 0.88rem; }

  /* Teaser: single column */
  .teaser-section { padding: 4rem 1.2rem; }
  .teaser-cards { grid-template-columns: 1fr; }
  .teaser-card { padding: 1.75rem 1.2rem; }
  .teaser-num { font-size: 2.5rem; margin-bottom: 0.75rem; }
  .teaser-title { font-size: 0.9rem; }

  /* Architect */
  .arch-section { padding: 4rem 1.2rem; }
  .arch-title { font-size: clamp(1.6rem, 7vw, 2.5rem); }
  .arch-classified { flex-direction: column; gap: 0.5rem; align-items: center; }
  .arch-cl-line { width: 40px; }
  .arch-data { gap: 1.2rem; flex-direction: column; align-items: center; }
  .arch-data-item { text-align: center; }

  /* Omega: single column on xs */
  .omega-section { padding: 4rem 1.2rem; }
  .omega-prev-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .omega-prev-item { padding: 1.2rem 0.9rem; }
  .omega-prev-name { font-size: 0.72rem; }
  .omega-prev-spec { font-size: 0.52rem; }

  /* Franchise: 1-column on xs */
  .franchise-section { padding: 4rem 1.2rem; }
  .franchise-grid { grid-template-columns: 1fr; }
  .franchise-item { padding: 1.5rem 1.2rem; }

  /* Signal */
  .signal-section { padding: 3rem 1.2rem; }
  .signal-inner { grid-template-columns: 1fr; gap: 2rem; }
  .signal-form { flex-direction: column; }
  .signal-email { border-right: 1px solid var(--border); }
  .signal-title { font-size: clamp(1.2rem, 5vw, 1.7rem); }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 1.2rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Footer */
  .footer { padding: 3rem 1.2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; padding-top: 1.5rem; }
  .footer-bottom-links { gap: 1.2rem; flex-wrap: wrap; justify-content: center; }

  /* Card */
  .card-inner { padding: 1.5rem 1.2rem; }

  /* Quote block */
  .quote-block { padding: 1.2rem 1.5rem; }
  .quote-block p { font-size: clamp(0.95rem, 3.5vw, 1.2rem); }

  /* Section line */
  .section-line { width: 40px; }

  /* Modal */
  .modal { padding: 2rem 1.5rem; width: 95%; }
}


/* ══════════════════════════════════════════════════════════════
   HERO LOGO: MOBILE-SPECIFIC CINEMATIC STAGE TREATMENT
   The new .mr-banner-env wrapper handles the visual extension.
   These rules ensure no box artifacts on any mobile viewport.
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .mr-banner-stage {
    left: 0;
    right: 0;
  }
  /* Env: full width, no clipping of the background gradients */
  .mr-banner-env {
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
  }
  /* Logo image on mobile: no mask override — inherits from index.html
     mask definition. Only sizing constraints added here.              */
  .mr-img-title {
    display: block;
    margin: 0 auto;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
  }
  /* Prevent hero text from overlapping logo */
  .hero-content { padding-bottom: 1rem; }
  .hero-eyebrow { margin-bottom: 1.25rem; }
}


/* ══════════════════════════════════════════════════════════════
   INTRO OVERLAY: MOBILE REFINEMENTS
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Fallback logo (text): center it cleanly */
  .intro-logo-fallback .mr-title {
    font-size: clamp(2rem, 10vw, 4rem);
    letter-spacing: 0.12em;
  }
  .intro-logo-fallback .mr-sub {
    font-size: 0.62rem;
    letter-spacing: 0.38em;
  }

  /* Progress bar: compact */
  .intro-bar { bottom: 1.5rem; }
  .intro-bar-track { width: 150px; }
  .intro-bar-text { font-size: 0.55rem; }
}


/* ══════════════════════════════════════════════════════════════
   MR LOADER: MOBILE (splash screen)
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .mr-loader {
    padding: 1.5rem;
  }
  .mr-loader__logo {
    max-width: clamp(160px, 55vw, 260px) !important;
  }
  .mr-loader__title {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
  }
  .mr-loader__sub {
    font-size: 0.58rem !important;
    letter-spacing: 0.35em !important;
  }
  .mr-loader__bar {
    width: 160px !important;
  }
  .mr-loader__classify,
  .mr-loader__sysid { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE NAV: FULL-SCREEN CINEMATIC MENU
══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .mobile-nav {
    background: #000;
    padding: 5rem 2rem 3rem;
  }
  .mobile-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 40%,
      rgba(201,168,76,0.04) 0%,
      transparent 70%);
    pointer-events: none;
  }
  .mobile-nav a {
    font-size: clamp(1.3rem, 5.5vw, 1.9rem);
    opacity: 0;
    animation: none;
  }
  .mobile-nav.open a {
    animation: mn-fade-in 0.4s ease both;
  }
  .mobile-nav.open a:nth-child(1) { animation-delay: 0.05s; }
  .mobile-nav.open a:nth-child(2) { animation-delay: 0.10s; }
  .mobile-nav.open a:nth-child(3) { animation-delay: 0.15s; }
  .mobile-nav.open a:nth-child(4) { animation-delay: 0.20s; }
  .mobile-nav.open a:nth-child(5) { animation-delay: 0.25s; }
  .mobile-nav.open a:nth-child(6) { animation-delay: 0.30s; }
  .mobile-nav.open a:nth-child(7) { animation-delay: 0.35s; }
  .mobile-nav.open a:nth-child(8) { animation-delay: 0.40s; }
  .mobile-nav.open a:nth-child(9) { animation-delay: 0.45s; }

  @keyframes mn-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .mobile-nav-close {
    top: 1.2rem; right: 1.2rem;
    font-size: 1.4rem;
    color: rgba(201,168,76,0.5);
    transition: color 0.2s;
  }
  .mobile-nav-close:hover { color: rgba(201,168,76,0.9); }
}


/* ══════════════════════════════════════════════════════════════
   MEDIA BLENDING — dark cinematic backgrounds
   Images/videos blend into dark background on ALL devices.
══════════════════════════════════════════════════════════════ */

/* Page hero images */
.page-hero-bg img,
.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: luminosity;
  opacity: 0.35;
}

/* Character cards / featured images */
.char-photo,
.architect-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video wrappers never overflow */
.video-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL PREVENTION — nuclear option
   These selectors are common overflow culprits.
══════════════════════════════════════════════════════════════ */
.hero,
.hero-scene,
.section,
.teaser-section,
.arch-section,
.omega-section,
.franchise-section,
.signal-section,
.univ-intro,
.footer,
.mobile-nav {
  overflow-x: hidden;
}

/* Wide content that could escape: clamp it */
.univ-inner,
.signal-inner,
.arch-inner,
.teaser-cards,
.omega-prev-grid,
.franchise-grid,
.footer-grid,
.hero-btn-grid,
.hero-actions {
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY / TOUCH TARGETS
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Minimum 44×44px touch targets */
  .btn,
  .hero-prime-btn,
  .hx-entry-btn,
  .nav-burger,
  .mobile-nav-close,
  .modal-close,
  .ig-submit,
  .signal-submit {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ensure tap targets don't overlap */
  #skip-intro-btn,
  #intro-sound-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ══════════════════════════════════════════════════════════════
   PAGE-HERO (sub-pages: characters, archive, etc.)
══════════════════════════════════════════════════════════════ */
.page-hero {
  overflow: hidden;
}

@media (max-width: 767px) {
  .page-hero {
    padding: 8rem 1.5rem 4rem;
  }
  .page-hero h1 {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }
}

@media (max-width: 479px) {
  .page-hero {
    padding: 7rem 1.2rem 3.5rem;
  }
  .page-hero h1 {
    font-size: clamp(1.7rem, 10vw, 2.8rem);
  }
}


/* ══════════════════════════════════════════════════════════════
   SIGNAL SECTION FORM — never breaks layout
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .signal-form {
    flex-direction: column;
  }
  .signal-email {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .signal-submit {
    width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════
   FOOTER BOTTOM ROW — wraps on mobile
══════════════════════════════════════════════════════════════ */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

@media (max-width: 767px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   STAT GRID — stays 2-col even on small phones
══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .stat-item {
    text-align: center;
  }
}


/* ══════════════════════════════════════════════════════════════
   MODAL — full screen on phone
══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  .modal {
    width: 96%;
    max-width: 96%;
    padding: 2rem 1.2rem;
    margin: 0.5rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS — centered variant on mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .section-header.centered {
    text-align: center;
    max-width: 100%;
    padding: 0 0.5rem;
  }
  .section-header.centered .section-line {
    margin: 1rem auto;
  }
  .section-header.centered .section-desc {
    margin: 0 auto;
    max-width: 100%;
    font-size: 0.9rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   INVESTOR GATE / PRODUCER GATE — mobile tweaks
══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  .ig-card {
    padding: 2.2rem 1.5rem 2rem;
    width: 95%;
  }
  .ig-pin-input {
    font-size: 1.5rem;
    letter-spacing: 0.28em;
    padding: 0.9rem 3rem 0.9rem 1.2rem;
  }
  .ig-title {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
  }
}


/* ══════════════════════════════════════════════════════════════
   UTILITY: HIDE ON MOBILE / SHOW ON DESKTOP
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .show-mobile-only { display: none !important; }
}