/* ════════════════════════════════════════════════════════════════════
   FMR ENTERPRISES — MOBILE STYLESHEET
   
   This file is loaded ONLY on screens ≤ 768px via:
   <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
   
   Desktop browsers (>768px) never load this file, so it cannot affect
   the desktop experience in any way.
   
   Design principles for mobile:
   - Single column flow throughout
   - Large readable typography (16px+ body)
   - Generous tap targets (44px minimum)
   - No 3D flips, no complex absolute positioning
   - Native-app-style navigation menu
   - Cards with breathing room, no horizontal overflow
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. UNIVERSAL OVERFLOW SAFETY
   No element anywhere can cause horizontal scroll.
   ────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

* {
  max-width: 100vw;
  box-sizing: border-box;
}

/* Exception: marquee/ticker tracks need to be wider than viewport for the
   scroll animation to actually travel across all items. Their containers
   (.marquee / .cap-ticker) clip the overflow. */
.marquee-track,
.ct-track {
  max-width: none !important;
}

img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────────────────────────
   2. CONTAINER & SECTION PADDING
   Tight but breathing — 20px horizontal everywhere.
   ────────────────────────────────────────────────────────────────── */
.sec-inner,
.ph-inner,
.cta-band > *,
.ft-inner,
.footer-inner {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.sec {
  padding-top: 60px;
  padding-bottom: 60px;
}

.ph {
  padding-top: 100px;
  padding-bottom: 60px;
}

/* ──────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY SCALING
   ────────────────────────────────────────────────────────────────── */
.hero-title {
  font-size: clamp(2.4rem, 9vw, 4rem);
  letter-spacing: -1.5px;
  line-height: 1.05;
}
.ph-title {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.sec-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sec-eyebrow, .ph-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
}
.card-title {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.card-desc, .card-body {
  font-size: 14px;
  line-height: 1.55;
}
.ph-sub {
  font-size: 15px;
  line-height: 1.55;
}

/* ──────────────────────────────────────────────────────────────────
   4. NAV BAR — Header strip
   ────────────────────────────────────────────────────────────────── */
.nav {
  height: 60px;
}
.nav-inner {
  padding: 0 16px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100vw;
}

/* Hide desktop nav links container & CTA */
.nav-menu {
  display: none;
}
.nav-cta,
.nav-inner > a.btn,
.nav-inner > .btn {
  display: none;
}

/* Show hamburger */
.nav-toggle {
  display: flex;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav.dark .nav-toggle span {
  background: var(--text-light);
}
.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ──────────────────────────────────────────────────────────────────
   5. MOBILE MENU — Full-screen slide-down drawer
   ────────────────────────────────────────────────────────────────── */
.nav-menu.open {
  display: flex !important;
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  background: var(--bg-dark) !important;
  flex-direction: column !important;
  padding: 20px 0 80px 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 200 !important;
  list-style: none !important;
  align-items: stretch !important;
}
.nav.light .nav-menu.open {
  background: var(--white);
}

/* Top-level menu items */
.nav-menu.open .nav-item {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  list-style: none;
}
.nav.light .nav-menu.open .nav-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.nav-menu.open .nav-item:last-child {
  border-bottom: none;
}

/* Top-level link rows */
.nav-menu.open .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  color: var(--text-light);
  text-decoration: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.nav.light .nav-menu.open .nav-link {
  color: var(--ink);
}

/* Suppress the desktop active-underline ::after inside mobile menu */
.nav-menu.open .nav-link::after {
  display: none;
  content: none;
}

/* + indicator for items with dropdowns (added via JS as <span>) */
/* JS sets inline style="display:none" so it's hidden on desktop;
   this rule overrides on mobile via specificity + !important. */
.nav-mobile-indicator {
  display: inline-block !important;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  opacity: 0.6;
  transition: transform 0.3s ease;
  margin-left: 12px;
  color: inherit;
  user-select: none;
}
.nav-item.open-mobile .nav-mobile-indicator {
  transform: rotate(45deg);
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
   6. MOBILE DROPDOWN — Collapsible sub-items
   ────────────────────────────────────────────────────────────────── */

/* Hide dropdown by default */
.nav-menu.open .nav-dropdown {
  display: none !important;
  position: static !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 8px 0 16px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  overflow: visible !important;
}
.nav.light .nav-menu.open .nav-dropdown {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Show when parent has .open-mobile — also force the transform reset that desktop applies */
.nav-item.open-mobile .nav-dropdown,
.nav-item.open-mobile .nav-dropdown.open {
  display: block !important;
  transform: none !important;
  position: static !important;
  left: 0 !important;
  right: auto !important;
}

/* Dropdown header (eyebrow) — hide on mobile to save space */
.nav-menu.open .nav-dropdown-header {
  display: none;
}

/* Dropdown grid — single column */
.nav-menu.open .nav-dropdown-grid {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  width: 100%;
  padding: 0;
}

/* Dropdown items — full-width tap rows */
.nav-menu.open .nav-dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: 14px 24px 14px 32px !important;
  margin: 0 !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
  border-radius: 0 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.nav-menu.open .nav-dropdown-item:active {
  background: rgba(255, 255, 255, 0.06);
}
.nav.light .nav-menu.open .nav-dropdown-item:active {
  background: rgba(0, 0, 0, 0.04);
}

.nav-menu.open .nav-dropdown-item .nd-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.3;
  margin: 0 0 3px 0;
  display: block;
}
.nav.light .nav-menu.open .nav-dropdown-item .nd-title {
  color: var(--ink);
}
.nav-menu.open .nav-dropdown-item .nd-sub {
  font-size: 12px;
  opacity: 0.65;
  color: var(--text-light);
  line-height: 1.4;
  margin: 0;
  display: block;
}
.nav.light .nav-menu.open .nav-dropdown-item .nd-sub {
  color: #666;
}

/* ──────────────────────────────────────────────────────────────────
   7. HERO SECTION — Force visible on mobile (GSAP animations may not fire reliably)
   
   The hero starts BLACK (during the FMR flash animation) then transitions
   to WHITE after the explosion via JS adding the .hero-white class.
   We must respect that toggle on mobile too.
   ────────────────────────────────────────────────────────────────── */

/* BEFORE explosion: dark hero */
#hero {
  min-height: 100vh !important;
}
#hero:not(.hero-white) {
  background: #0a0b0f !important;
  color: #fafaf9 !important;
}
#hero:not(.hero-white) .hero-title,
#hero:not(.hero-white) .eyebrow,
#hero:not(.hero-white) .stat-num,
#hero:not(.hero-white) .hb-sub,
#hero:not(.hero-white) .rr-label {
  color: #fafaf9 !important;
}
/* Default ht-word color in dark hero — only "plain" words get white;
   .burg and .blue keep their accent colors (matched to desktop) */
#hero:not(.hero-white) .ht-word.plain,
#hero:not(.hero-white) .ht-line {
  color: #fafaf9 !important;
}
#hero:not(.hero-white) .ht-word.burg {
  color: #ff4466 !important;
}
#hero:not(.hero-white) .ht-word.blue {
  color: #4d8fff !important;
}

/* AFTER explosion: white hero (.hero-white class added by JS) */
#hero.hero-white {
  background: #fafaf9 !important;
  color: #0f0d0b !important;
}
/* Only "plain" words get black; .burg and .blue keep accent colors */
#hero.hero-white .hero-title,
#hero.hero-white .ht-line,
#hero.hero-white .ht-word.plain {
  color: #0f0d0b !important;
}
#hero.hero-white .ht-word.burg {
  color: #7a1428 !important;
}
#hero.hero-white .ht-word.blue {
  color: #2563eb !important;
}
#hero.hero-white .eyebrow,
#hero.hero-white .stat-num,
#hero.hero-white .hb-sub,
#hero.hero-white .rr-label {
  color: #0f0d0b !important;
}
#hero.hero-white .hero-title em,
#hero.hero-white .hero-title .italic,
#hero.hero-white .hero-title i {
  color: #7a1428 !important;
}
#hero.hero-white .mc {
  border-bottom-color: rgba(15, 13, 11, 0.1) !important;
}

.hero-body {
  padding: 80px 20px 40px 20px !important;
  position: relative !important;
  z-index: 5 !important;
  opacity: 1 !important;
}
.hero-title {
  opacity: 1 !important;
  transform: none !important;
  font-size: clamp(2.4rem, 9vw, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -1.5px !important;
  margin: 24px 0 !important;
}
.hero-title em,
.hero-title .italic,
.hero-title i {
  color: #c8344e !important;
  opacity: 1 !important;
}
.eyebrow,
.hero-body .eyebrow,
.hero-body > .eyebrow {
  opacity: 1 !important;
  transform: none !important;
}
.fmr-flash-inner,
.fmr-flash-year,
.fmr-flash-fmr,
.fmr-flash-ent,
.fmr-flash-tag {
  opacity: 1 !important;
  transform: none !important;
}
#hero .progress-dots {
  display: none !important;
}
.metrics {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin-top: 24px !important;
}
.mc {
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding: 16px 12px !important;
  opacity: 1 !important;
  transform: none !important;
}
.stat-num {
  font-size: 22px !important;
  opacity: 1 !important;
}
.scroll-hint {
  display: none !important;
}
.hero-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 0 20px 40px 20px !important;
  opacity: 1 !important;
  transform: none !important;
}
#globe-canvas {
  opacity: 0.6 !important;
  pointer-events: auto !important;
}
#globe-hint, #globe-context {
  display: none !important;
}
.cap-ticker {
  overflow: hidden !important;
  max-width: 100vw !important;
}
/* Hero ticker on mobile — desktop is 22s, mobile is 16s (comfortable middle:
   readable but never feels stuck) */
.ct-track {
  animation-duration: 16s !important;
  animation-play-state: running !important;
}
.ct-track:hover, .ct-track:active, .ct-track:focus,
.cap-ticker:hover .ct-track, .cap-ticker:active .ct-track {
  animation-play-state: running !important;
}
.marquee {
  overflow: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}
/* Bottom marquee on mobile — desktop is 40s, mobile is 25s (comfortable
   middle: items are readable as they pass, not blurry, not slow-motion).
   JavaScript sets explicit pixel width on load via initMarquee() so the
   -50% translateX in @keyframes covers the full content */
.marquee-track {
  animation-duration: 25s !important;
  animation-play-state: running !important;
}
.marquee:hover .marquee-track, .marquee:active .marquee-track,
.marquee-track:hover, .marquee-track:active {
  animation-play-state: running !important;
}

/* ──────────────────────────────────────────────────────────────────
   8. UNIVERSAL GRID COLLAPSE
   Every grid on mobile = single column.
   ────────────────────────────────────────────────────────────────── */
.div-grid,
.disc-grid,
.intro-grid,
.eng-grid,
.ind-grid,
.role-grid,
.stages-grid,
.stage-grid,
.tier-grid,
.six-tier-grid,
.case-grid,
.case-file-grid,
.feature-grid,
.cap-grid,
.ops-grid,
.process-grid,
.path-grid,
.contact-grid,
.faq-grid,
.values-grid,
.principle-grid,
[class*="-grid"]:not(.nav-dropdown-grid):not(.stat-grid) {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────────
   9. CARDS — Universal card override
   ────────────────────────────────────────────────────────────────── */
.card,
.flip-card,
.case-card,
.role-card,
.stage-card,
.tier-card,
.path-card,
.case-file,
.ops-card,
.step-card,
.value-card,
.faq-card,
.principle-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 24px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Override inline-styled cards by targeting via attribute selector */
[style*="padding:40px 36px"],
[style*="padding: 40px 36px"],
[style*="padding:36px 32px"],
[style*="padding:48px"],
[style*="padding: 48px"] {
  padding: 24px 20px !important;
}

[style*="min-height:420px"],
[style*="min-height: 420px"],
[style*="min-height:380px"],
[style*="min-height:340px"] {
  min-height: 0 !important;
}

/* Catch ALL inline grid-template-columns variations:
   - repeat(N, ...) for any N
   - 1fr 1fr [1fr...] (literal multi-column)
   - 1.4fr 1fr / 1.15fr 1fr / 1fr 1.2fr (asymmetric)
   - 2fr 1fr 1fr 1fr 1fr (stat rows)
   On mobile, collapse them all to single column.
   
   EXCLUSIONS (these are intentionally compact layouts that work on mobile):
   - "1fr auto" (text + icon/badge) — keep as is
   - "54px 1fr" or "24px 1fr auto" (icon + content) — keep as is
   - "1fr" (already single column) — no override needed */
[style*="grid-template-columns:repeat"],
[style*="grid-template-columns: repeat"],
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"],
[style*="grid-template-columns:1.4fr 1fr"],
[style*="grid-template-columns:1.15fr 1fr"],
[style*="grid-template-columns:1.1fr 1fr"],
[style*="grid-template-columns:1fr 1.2fr"],
[style*="grid-template-columns:1fr 1.4fr"],
[style*="grid-template-columns:2fr"] {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* ──────────────────────────────────────────────────────────────────
   10. FLIP CARDS ON MOBILE — Proper 3D 180° flip, tap-driven
   
   Desktop: flip on hover OR .flipped class.
   Mobile: flip ONLY on .flipped class (added by tap handler in script.js).
   
   We keep all the 3D setup from desktop (perspective, preserve-3d,
   backface-visibility, .flip-back starting at rotateY(180deg)) so that
   when JS adds .flipped, the card does a proper 180° flip instead of
   visually inverting the text.
   ────────────────────────────────────────────────────────────────── */
.flip-card {
  perspective: 1400px !important;
  cursor: pointer !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 280px !important;
  position: relative !important;
}

.flip-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-style: preserve-3d !important;
  display: block !important;
  transform: none;
}

/* When .flipped class is added (by tap), rotate the inner 180° */
.flip-card.flipped .flip-inner {
  transform: rotateY(180deg) !important;
}

/* Disable :hover-triggered flip on touch devices (mobile) — only .flipped works */
@media (hover: none) {
  .flip-card:hover .flip-inner {
    transform: none !important;
  }
  .flip-card.flipped:hover .flip-inner,
  .flip-card.flipped .flip-inner {
    transform: rotateY(180deg) !important;
  }
}

.flip-front,
.flip-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  border-radius: 14px !important;
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 !important;
}

/* Default flip-front background — uses !important ONLY for fallback,
   but inline style="background:..." on individual cards will still win
   because inline styles beat external !important. We use no !important here
   so card 5's burgundy background (inline) survives. */
.flip-front {
  background: var(--white, #ffffff);
  border: 1px solid var(--border-light, rgba(0,0,0,0.08));
  transform: none !important;
}
/* If a flip-front has an inline burgundy/accent background, force white text */
.flip-front[style*="background:var(--accent)"],
.flip-front[style*="background: var(--accent)"],
.flip-front[style*="background:#7a1428"],
.flip-front[style*="background:#7A1428"] {
  color: #ffffff !important;
}
.flip-front[style*="background:var(--accent)"] *,
.flip-front[style*="background: var(--accent)"] *,
.flip-front[style*="background:#7a1428"] *,
.flip-front[style*="background:#7A1428"] * {
  color: inherit !important;
}

.flip-back {
  background: var(--bg-dark, #0a0b0f) !important;
  color: var(--text-light, #fafaf9) !important;
  /* CRITICAL: flip-back starts rotated 180° so when parent rotates 180°,
     it faces the user correctly. WITHOUT this, the back text shows MIRRORED. */
  transform: rotateY(180deg) !important;
  border: 1px solid var(--border-dark-strong, rgba(255,255,255,0.1)) !important;
}

/* Dark sections: front card adapts (only if no inline background override) */
.sec.dark .flip-front:not([style*="background:"]),
.dark-section .flip-front:not([style*="background:"]) {
  background: var(--bg-card-dark, #14161c);
  border-color: var(--border-dark, rgba(255,255,255,0.1));
  color: var(--text-light, #fafaf9);
}

/* Override the earlier flip-back text color rules — let the dark BG show with light text */
.flip-back,
.flip-back * {
  color: var(--text-light, #fafaf9) !important;
  opacity: 1 !important;
}
.flip-back em,
.flip-back .italic {
  color: #c8344e !important;
}

/* Light section: the back's eyebrow should be readable */
.flip-back .card-eyebrow,
.flip-back [class*="eyebrow"] {
  color: #c8344e !important;
}

/* ──────────────────────────────────────────────────────────────────
   11. SIX-TIER WORKFORCE CARDS — Special case (was severely broken)
   ────────────────────────────────────────────────────────────────── */
.six-tier-grid,
.tier-grid,
.workforce-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.six-tier-grid > *,
.tier-grid > *,
.workforce-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  padding: 20px !important;
}

/* ──────────────────────────────────────────────────────────────────
   12. ENGAGEMENT CASE FILES (Index page)
   ────────────────────────────────────────────────────────────────── */
.eng-grid,
.engagement-grid,
.case-file-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.eng-grid > *,
.engagement-grid > *,
.case-file-grid > * {
  width: 100% !important;
  padding: 24px 20px !important;
}

/* ──────────────────────────────────────────────────────────────────
   13. HOW WE OPERATE STAGES
   ────────────────────────────────────────────────────────────────── */
.stages-row,
.stage-row,
.how-stages,
.process-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}
.stages-row > *,
.stage-row > *,
.how-stages > *,
.process-row > * {
  width: 100% !important;
  flex: none !important;
  padding: 20px !important;
}

/* ──────────────────────────────────────────────────────────────────
   14. CAREERS PAGE — Role cards (was severely broken)
   ────────────────────────────────────────────────────────────────── */
.role-grid,
.roles-grid,
.hiring-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.role-grid > *,
.roles-grid > *,
.hiring-grid > *,
.role-card {
  width: 100% !important;
  padding: 24px 20px !important;
  min-height: 0 !important;
}

/* Application process cards */
.process-grid,
.application-grid,
.path-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.process-grid > *,
.application-grid > *,
.path-grid > * {
  width: 100% !important;
  padding: 24px 20px !important;
  min-height: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   15. CONTACT PAGE PATHS
   ────────────────────────────────────────────────────────────────── */
.contact-paths,
.path-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.contact-paths > *,
.path-cards > *,
.path-card {
  width: 100% !important;
  padding: 24px 20px !important;
  min-height: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   16. STAT GRIDS — Keep 2 columns for stats (looks better)
   ────────────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}
.stat-grid > * {
  padding: 20px 12px !important;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.stat-grid > *:nth-child(2n) {
  border-right: none;
}
.stat-grid > *:last-child,
.stat-grid > *:nth-last-child(2) {
  border-bottom: none;
}

/* ──────────────────────────────────────────────────────────────────
   17. FOOTER
   ────────────────────────────────────────────────────────────────── */
.ft-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  padding-bottom: 32px;
}
.ft-bottom {
  flex-direction: column !important;
  gap: 16px !important;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────
   18. CTA BAND
   ────────────────────────────────────────────────────────────────── */
.cta-band {
  padding: 60px 20px;
}
.cta-title {
  font-size: 28px;
  line-height: 1.15;
}
.cta-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.btn {
  justify-content: center;
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────────
   19. SHOWREEL — Mobile optimized: stack videos instead of pinned scrub
   ────────────────────────────────────────────────────────────────── */
#showreel-wrapper {
  width: 100vw !important;
  overflow: hidden !important;
  position: relative !important;
  height: auto !important;
}
/* Disable sticky pinning on mobile — too complex, too tall */
#showreel-sticky {
  position: relative !important;
  height: auto !important;
  top: auto !important;
  width: 100% !important;
  background: #000 !important;
}
/* Hide invisible scroll spacers on mobile (they create 6×100vh of dead scroll) */
.sr-spacer {
  display: none !important;
  height: 0 !important;
}
/* Stage and videos: stack them vertically, each visible */
.sr-video-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: auto !important;
  transform: none !important;
}
.sr-vid {
  position: relative !important;
  width: 100% !important;
  height: 56.25vw !important; /* 16:9 aspect ratio */
  min-height: 220px !important;
  max-height: 60vh !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: 0 !important;
}
.sr-vid video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: none !important;
}
.sr-vid:not(.active) {
  /* On mobile, show ALL videos stacked (not just active one) */
  display: block !important;
}
.clip-info,
.clip-left,
.clip-right {
  font-size: 11px !important;
  padding: 8px !important;
  /* Force visible on mobile — desktop hides clip-info until .sr-vid.active,
     but on mobile all videos are stacked so all texts should show */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.clip-title {
  font-size: 1.3rem !important;
  opacity: 1 !important;
}
/* FMR brand overlay (clip 2) — keep as the centerpiece for that video.
   On mobile, the FMR ENTERPRISES brand moment is the strongest visual,
   so we hide the secondary clip-info to prevent overlap with the brand text. */
.fmr-brand-overlay {
  font-size: 1.5rem !important;
  opacity: 1 !important;
}
/* Hide the secondary clip-info on the video that has the FMR brand overlay
   (its parent .sr-vid contains .fmr-brand-overlay, so we target via :has) */
.sr-vid:has(.fmr-brand-overlay) .clip-info {
  display: none !important;
}
/* Fallback for browsers without :has() — directly target video #vid-1 (clip 2) */
#vid-1 .clip-info {
  display: none !important;
}
/* Any other text overlay inside a clip */
.sr-vid .clip-meta,
.sr-vid .clip-eyebrow,
.sr-vid .clip-tag,
.sr-vid .clip-num,
.sr-vid [class*="clip-"] {
  opacity: 1 !important;
}
/* Progress bar */
#showreel-progress-bar,
.sr-progress {
  display: none !important;
}
#transition-overlay,
#flash-overlay {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   20. EXTRA SMALL PHONES (≤380px) — iPhone SE, small Androids
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .sec-inner,
  .ph-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sec-title { font-size: 22px; }
  .ph-title { font-size: 26px; }
  .card-title { font-size: 19px; }
  .hero-title {
    font-size: clamp(1.9rem, 8vw, 3rem);
  }
  .nav-inner {
    padding: 0 12px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   21. FINAL OVERFLOW GUARDS
   Last line of defense — anything wider than viewport gets cropped.
   ────────────────────────────────────────────────────────────────── */
section, header, footer, main, article, aside, div {
  max-width: 100vw;
}
[class*="grid"] > * {
  min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────
   22. DEFEAT SCROLL-REVEAL ANIMATIONS ON MOBILE
   On mobile, GSAP ScrollTrigger may not fire reliably. Force all
   reveal-class elements to be visible immediately so content never
   stays hidden.
   ────────────────────────────────────────────────────────────────── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger > *,
[class*="reveal"],
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Hero flash elements — show immediately, don't wait for GSAP */
.fmr-flash-overlay,
.fmr-flash-inner,
.fmr-flash-year,
.fmr-flash-fmr,
.fmr-flash-ent,
.fmr-flash-tag,
.fmr-flash-line {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Any element with inline opacity:0 from GSAP setup gets unhidden */
[style*="opacity:0"],
[style*="opacity: 0"] {
  opacity: 1 !important;
}

/* Cards waiting for reveal */
.card, .case-card, .role-card, .stage-card, .tier-card, .path-card,
.flip-card, .case-file, .ops-card {
  opacity: 1 !important;
}