/* ============================================================
   Mobile responsive pass — load LAST so these rules win.
   Targets common breakpoints: tablet (≤1100px), phone landscape
   (≤900px), phone portrait (≤640px), small phone (≤420px).
   ============================================================ */

/* ---------- Universal first: prevent horizontal scroll ---------- */
/* IMPORTANT: do NOT use overflow-x: hidden on html/body — that
   creates a scroll container and breaks position: sticky in Section 02.
   `overflow-x: clip` hides overflow without creating a scroll context. */
body { overflow-x: clip; }
@supports not (overflow: clip) {
  /* Fallback for older browsers: tolerate horizontal scroll instead of
     killing sticky. Constrain known-wide elements with max-width below. */
  body { overflow-x: visible; }
}
img, svg, video { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* ---------- Tablet & smaller laptops ---------- */
@media (max-width: 1100px) {
  .connectivity__title { font-size: clamp(48px, 7vw, 84px); }

  .overview__title {
    white-space: normal;
    font-size: clamp(44px, 6.5vw, 76px);
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Phone landscape / small tablet portrait ---------- */
@media (max-width: 900px) {
  /* Nav — hide secondary links on tablets/phones, keep brand + CTA */
  .site-nav__links a:not(.site-nav__cta) { display: none; }
  .site-nav__links { gap: 12px; }

  /* Hero — title scales, particulars stack as block list */
  .hero__title-inner { font-size: clamp(40px, 9vw, 64px); }

  /* Section 02 atoll — stack vertically */
  .conn-atoll-stage--v2 {
    flex-direction: column;
    gap: 16px;
  }
  .conn-atoll-airport-stack {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .conn-atoll-airport-stack .conn-atoll-airport {
    flex: 1 1 calc(50% - 5px);
    min-width: 140px;
  }
  .conn-country-inset { display: none; }

  /* Section 03 — VR tour aspect tightened */
  .tour-viewer__frame {
    aspect-ratio: 16 / 10;
    min-height: clamp(360px, 60vh, 520px);
  }

  /* Section 04 inline label tap targets */
  .overview__inline-label { padding: 8px 12px; }
  .overview__inline-name  { font-size: 11px; }
  .overview__inline-sub   { font-size: 10px; }

  /* Site facts — 3 columns can be tight on tablets */
  .overview__facts--three {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .overview__fact { padding: 0 12px; }
  .overview__fact-figure { font-size: clamp(28px, 5vw, 40px); }
}

/* ---------- Phone portrait (the big one) ---------- */
@media (max-width: 640px) {
  /* Section padding tightened across the board */
  .section,
  .island__inner,
  .market__inner,
  .next-steps__inner,
  .overview__inner,
  .connectivity__sticky { padding-left: 18px; padding-right: 18px; }

  /* Section titles — shrink hard */
  .connectivity__title,
  .island__title,
  .market__title { font-size: clamp(38px, 10vw, 56px); }

  .overview__title { font-size: clamp(34px, 9vw, 50px); }

  /* Eyebrow tighter spacing */
  .section__eyebrow,
  .connectivity__eyebrow,
  .next-steps__eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    margin-bottom: 14px;
  }

  /* Hero — particulars hide on phones (already at 540px in style.css) */
  .hero__particulars { display: none; }

  /* Section 02 captions */
  .conn-caption__lede {
    font-size: clamp(18px, 5vw, 22px);
    padding: 0 12px;
  }
  .conn-caption__sub  { font-size: 13px; padding: 0 12px; }
  .conn-caption__bold { font-size: 14px; padding: 0 12px; }

  /* Section 02 atoll image */
  .conn-atoll-stage--v2 { min-height: 0; }
  .conn-atoll-image-stage { width: 100%; }
  .conn-atoll-image--v2  { max-height: 56vh; }

  /* Atoll airport cards — single column, tighter */
  .conn-atoll-airport-stack { gap: 6px; }
  .conn-atoll-airport-stack .conn-atoll-airport {
    flex: 1 1 100%;
    padding: 8px 10px;
  }
  .conn-atoll-airport__name { font-size: 11px; }
  .conn-atoll-airport__time { font-size: 10px; }

  /* Atoll heading sized down */
  .conn-atoll-heading__eyebrow { font-size: clamp(20px, 6vw, 28px); }
  .conn-atoll-heading__sub     { font-size: 9px; letter-spacing: 0.24em; }

  /* Section 04 aerial */
  .overview__aerial-stage { aspect-ratio: 4 / 3; }
  .overview__aerial-img   { object-fit: cover; }

  /* Section 04 — hide