/* ======================================================================
   FPL — Mobile Responsive Overrides
   Tiers: Tablet ≤900px · Phone ≤640px · Small ≤400px · Landscape ≤480px
   Loaded AFTER inline styles so these rules win.
   ====================================================================== */

/* ───────── TABLET & SMALL LAPTOP (≤900px) ───────── */
@media (max-width: 900px) {

  /* NAV — tighter, smaller tap targets sized right */
  nav { padding: 0 18px; height: 56px; }
  .nav-logo { font-size: 18px; letter-spacing: 3px; }
  .nav-cta { font-size: 9px; padding: 8px 14px; letter-spacing: 2px; }

  /* HERO — vertical stack, balanced padding, smaller type */
  .hero { min-height: 640px; height: auto; min-height: 100svh; }
  .hero-content {
    padding: 0 24px 56px;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .hero-content::before { height: 360px; }
  .hero-left, .hero-right { max-width: 100%; }
  .hero-right { text-align: left; }
  .hero-right .hero-sub { text-align: left !important; }
  .hero-over { font-size: 9px; letter-spacing: 3px; margin-bottom: 18px; gap: 10px; }
  .hero-over::before { width: 20px; }
  .hero-h1 { font-size: clamp(42px, 10vw, 68px); line-height: .9; letter-spacing: -1px; }
  .hero-sub { font-size: 15px; line-height: 1.55; }
  .hero-scroll { display: none; }

  /* STATEMENT BAND — scale down ghost + headline */
  .band { padding: 64px 24px; }
  .band-ghost { font-size: clamp(110px, 28vw, 180px); right: -12px; }
  .band-line { font-size: clamp(40px, 10vw, 64px); letter-spacing: -1px; }
  .band-divider { margin: 20px 0; width: 48px; }
  .band-quote { font-size: 17px; line-height: 1.5; }

  /* WHAT — single column */
  .what { grid-template-columns: 1fr; gap: 40px; padding: 72px 24px; }
  h2.H { font-size: clamp(38px, 8vw, 56px); }
  .lead { font-size: 16px; line-height: 1.7; }
  .facts { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 24px; margin-top: 32px; }
  .fact { padding: 18px 0; gap: 14px; }
  .fact h3 { font-size: 14px; }
  .fact p { font-size: 12px; }
  .vision-panel img { aspect-ratio: 16/10; }

  /* MANIFESTO VISUAL — car visible behind dark top-fade */
  .mv { min-height: 88vh; min-height: 88svh; }
  .mv-text { padding: 56px 20px; max-width: 100%; }
  .ml.lg { font-size: clamp(30px, 8.5vw, 48px); }
  .ml.sm { font-size: 14px; margin: 14px 0 18px; line-height: 1.55; max-width: 100%; }

  /* PILLARS — stacked, no right border */
  .pillars { grid-template-columns: 1fr; }
  .pillar { padding: 48px 24px; border-right: none; border-bottom: 1px solid var(--border); }
  .pillar:last-child { border-bottom: none; }
  .pnum { font-size: 72px; }
  .pillar h3 { font-size: 20px; }
  .pillar p { font-size: 13px; }

  /* GLASS BOX banner */
  .gb { height: clamp(340px, 62vw, 460px); }
  .gb-text { padding: 0 24px; }
  .gb-tag { font-size: 10px; letter-spacing: 3px; margin-bottom: 12px; }
  .gb-headline { font-size: clamp(32px, 8vw, 52px); }
  .gb-sub { font-size: 15px; margin-top: 12px; }

  /* FLYWHEEL */
  .flywheel-section { padding: 64px 24px; }
  .flywheel-hdr { margin-bottom: 48px; }
  .flywheel-hdr h2 { font-size: clamp(34px, 8vw, 52px); }
  .flywheel-hdr p { font-size: 16px; }
  .flywheel-layout { grid-template-columns: 1fr; gap: 40px; }
  .flywheel-svg-wrap { overflow: hidden; max-width: 100%; }
  .flywheel-svg-wrap svg { max-width: 320px; height: auto; }
  .stage-card { padding: 14px 0; gap: 14px; }
  .stage-badge { width: 32px; height: 32px; font-size: 14px; }
  .stage-body h4 { font-size: 14px; }
  .stage-body p { font-size: 12px; }
  .proven-strip { padding: 22px 20px; margin-top: 40px; gap: 14px; flex-direction: column; align-items: flex-start; }

  /* CITIES */
  .cities-hdr { grid-template-columns: 1fr; gap: 20px; padding: 64px 24px 36px; align-items: start; }
  .cities-reach { font-size: clamp(52px, 13vw, 84px); }
  .cities-desc { font-size: 16px; padding-bottom: 0; }
  .cities-grid { grid-template-columns: repeat(2, 1fr); }
  .cities-grid .city { border-bottom: 1px solid var(--border); }
  .cities-grid .city:nth-child(2n) { border-right: none; }
  .cities-grid .city:nth-child(5) { grid-column: 1 / -1; border-right: none; border-bottom: none; }
  .cities-row2 { border-top: none; }
  .city { padding: 22px 10px; }
  .cflag { font-size: 22px; }
  .cname { font-size: 13px; letter-spacing: 1px; }
  .cteam { font-size: 9.5px; }
  .crole { font-size: 9px; }

  /* ORIGIN */
  .origin-img { height: clamp(280px, 52vw, 380px); }
  .origin-img-txt { bottom: 28px; left: 24px; right: 24px; font-size: clamp(17px, 4.5vw, 24px); max-width: 100%; }
  .origin-body { padding: 64px 24px; }
  .origin-hdr { margin-bottom: 44px; }
  .origin-hdr h2 { font-size: clamp(34px, 8vw, 56px); }
  .origin-hdr p { font-size: 16px; }
  .acts { grid-template-columns: 1fr; gap: 1px; }
  .act { padding: 32px 24px; }
  .act h3 { font-size: 20px; }
  .act p { font-size: 13px; }

  /* FOUNDING */
  .founding { min-height: 0; }
  .founding-bg { object-position: center 35%; }
  .founding-grad { background: linear-gradient(to top, rgba(7,7,15,.96) 0%, rgba(7,7,15,.85) 45%, rgba(7,7,15,.35) 100%); }
  .founding-content { padding: 72px 24px; max-width: 100%; }
  .founding-h { font-size: clamp(42px, 11vw, 72px); letter-spacing: -1.5px; }
  .founding-sub { font-size: 15.5px; }
  .fstep { padding: 14px 0; gap: 14px; }
  .fstep-n { font-size: 28px; width: 36px; }
  .fstep h4 { font-size: 13px; }
  .fstep p { font-size: 11px; }

  /* CONTACT */
  .contact { padding: 80px 24px; }
  .contact-inner h2 { font-size: clamp(38px, 9vw, 60px); }
  .contact-inner .sub { font-size: 16px; margin-bottom: 36px; }
  .email-addr { font-size: clamp(20px, 6.5vw, 32px); letter-spacing: .5px; border-bottom-width: 2px; }
  .assurance { gap: 14px 20px; margin-top: 32px; }
  .ai { font-size: 9.5px; }

  /* FOOTER */
  footer { padding: 28px 20px; flex-direction: column; text-align: center; gap: 16px; }
  .foot-links { justify-content: center; gap: 20px; }
  .foot-links a { font-size: 9.5px; }
}

/* ───────── PHONE (≤640px) ───────── */
@media (max-width: 640px) {

  nav { padding: 0 16px; height: 54px; }
  .nav-cta { padding: 7px 12px; font-size: 8.5px; }

  .hero-content { padding: 0 20px 44px; gap: 24px; }
  .hero-h1 { font-size: clamp(38px, 11.5vw, 56px); }
  .hero-sub { font-size: 14px; }

  .band { padding: 56px 20px; }
  .band-ghost { font-size: clamp(90px, 30vw, 150px); opacity: .85; }
  .band-line { font-size: clamp(34px, 11vw, 52px); }
  .band-quote { font-size: 15.5px; }

  .what { padding: 56px 20px; gap: 32px; }
  h2.H { font-size: clamp(32px, 9vw, 44px); }
  .lead { font-size: 15px; }

  .mv-text { padding: 48px 16px; }
  .ml.lg { font-size: clamp(28px, 9vw, 42px); }
  .ml.sm { font-size: 13.5px; }

  .pillar { padding: 40px 20px; }
  .pnum { font-size: 64px; }
  .pillar h3 { font-size: 18px; }

  .gb { height: clamp(300px, 72vw, 420px); }
  .gb-text { padding: 0 20px; }
  .gb-headline { font-size: clamp(28px, 9vw, 42px); }
  .gb-sub { font-size: 14px; }

  .flywheel-section { padding: 56px 20px; }
  .flywheel-hdr h2 { font-size: clamp(30px, 9vw, 44px); }
  .flywheel-svg-wrap svg { max-width: 260px; }

  .cities-hdr { padding: 56px 20px 28px; }
  .cities-reach { font-size: clamp(44px, 14vw, 68px); }
  .city { padding: 18px 8px; }
  .cname { font-size: 12px; }

  .origin-body { padding: 56px 20px; }
  .origin-hdr h2 { font-size: clamp(30px, 9vw, 46px); }
  .act { padding: 28px 20px; }
  .act h3 { font-size: 18px; }

  .founding-content { padding: 64px 20px; }
  .founding-h { font-size: clamp(38px, 12vw, 60px); }

  .contact { padding: 64px 20px; }
  .contact-inner h2 { font-size: clamp(32px, 10vw, 48px); }
  .email-addr { font-size: clamp(18px, 7vw, 28px); }
  .assurance { gap: 12px 16px; }
}

/* ───────── SMALL PHONE (≤400px) ───────── */
@media (max-width: 400px) {

  nav { padding: 0 14px; }
  .nav-logo { font-size: 16px; letter-spacing: 2.5px; }
  .nav-cta { padding: 6px 10px; font-size: 8px; letter-spacing: 1.5px; }

  .hero-content { padding: 0 16px 36px; }
  .hero-h1 { font-size: clamp(32px, 12vw, 44px); }
  .hero-over { font-size: 8.5px; letter-spacing: 2.5px; }

  .band { padding: 48px 16px; }
  .band-line { font-size: clamp(30px, 12vw, 42px); }
  .band-quote { font-size: 14.5px; }

  .what { padding: 48px 16px; }
  .mv-text { padding: 40px 16px; }
  .pillar { padding: 36px 16px; }
  .gb-text { padding: 0 16px; }
  .flywheel-section { padding: 48px 16px; }
  .cities-hdr { padding: 48px 16px 24px; }

  /* Tight phones: cities can stay 2-col but tighter */
  .city { padding: 16px 6px; }
  .cteam { font-size: 9px; }
  .crole { font-size: 8.5px; }

  .origin-body { padding: 48px 16px; }
  .founding-content { padding: 56px 16px; }
  .founding-h { font-size: clamp(34px, 13vw, 52px); letter-spacing: -1px; }
  .contact { padding: 56px 16px; }
  .email-addr { font-size: clamp(15px, 6.2vw, 22px); letter-spacing: 0; word-break: break-all; }
  footer { padding: 24px 14px; }
  .foot-links { gap: 14px; }
  .foot-links a { word-break: break-all; }
}

/* ───────── MICRO PHONES (≤340px) ───────── */
@media (max-width: 340px) {
  .nav-logo { font-size: 15px; letter-spacing: 2px; }
  .nav-cta { padding: 6px 8px; font-size: 7.5px; letter-spacing: 1px; }
  .hero-h1 { font-size: clamp(28px, 12vw, 38px); }
  .email-addr { font-size: clamp(14px, 5.8vw, 20px); }
}

/* ───────── LANDSCAPE PHONES (short viewports) ───────── */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 460px; }
  .mv { min-height: 0; }
  .mv-text { padding: 36px 24px; }
  .mv-media { min-height: 46vh; }
}

/* ───────── TAP-FRIENDLY FIXES (all mobile) ───────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-only reveal effects so they don't get stuck */
  .pillar:hover, .act:hover, .city:hover { background: transparent; }
  .vision-panel:hover img { transform: none; }
  .email-cta:hover { transform: none; }
  /* Make all interactive targets at least 40px tall */
  .nav-cta, .foot-links a { min-height: 40px; display: inline-flex; align-items: center; }
}