/* ════════════════════════════════════════════════════════════════════════════
   Contemporary Travels — MOBILE STYLESHEET v3
   Loaded after inline styles. Phone (≤700) and tablet (≤1024).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── HARD VIEWPORT LOCK ───
   Forces every element to honor viewport width. This kills the right-side
   gap caused by sections having margins, fixed widths, or overflowing children. */
html { overflow-x: hidden !important; }
body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
* { -webkit-tap-highlight-color: rgba(232, 105, 62, 0.15); }

nav.top .logo .logo-dot,
.logo .logo-dot,
footer h4 .logo-dot,
footer .logo-dot {
  color: var(--country-accent, var(--accent, #e8693e)) !important;
}

.nav-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

button, a.btn, .vibe-pill, .budget-pill, .tab, .nav-cta-plan, .nav-link-simple {
  min-height: 44px;
}

/* Global nav dropdown guard. Some pages have older inline nav CSS; this keeps
   injected desktop menus hidden unless explicitly opened. */
nav.top .nav-dd { position: relative; }
nav.top .dd-panel {
  position: absolute !important;
  top: calc(100% + 1rem) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 80 !important;
}
nav.top .dd-panel.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}
@media (max-width: 1100px) {
  nav.top .dd-panel {
    left: auto !important;
    right: 0 !important;
    transform: translateY(-8px) !important;
  }
  nav.top .dd-panel.open {
    transform: translateY(0) !important;
  }
}

/* ─── MOBILE HAMBURGER (always present, hidden on desktop) ─── */
.mobile-menu-btn { display: none; }

.mobile-menu-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: 100vw;
  min-height: 100vh;
  min-height: calc(var(--ct-vh, 1vh) * 100);
  background: #0a0a0a;
  color: #fff;
  z-index: 100;
  padding: calc(4.75rem + env(safe-area-inset-top, 0px)) max(1.1rem, env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) max(1.1rem, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(101%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column; gap: 1.5rem;
  box-sizing: border-box;
}
.mobile-menu-panel * { font-style: normal !important; }
.mobile-menu-panel.open { transform: translateX(0); }
.mobile-menu-close {
  position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));
  background: transparent; border: none; color: #fff;
  cursor: pointer; padding: 0.5rem;
  min-width: 44px; min-height: 44px;
}
.mobile-menu-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1.5rem;
}
.mobile-menu-panel > .mobile-menu-section:first-of-type {
  margin-top: 0.85rem;
}
.mobile-menu-intro,
.mobile-drawer__intro,
.mobile-nav__intro {
  margin-bottom: 1.35rem;
}
.mobile-menu-intro + .mobile-menu-section,
.mobile-drawer__intro + .mobile-menu-section,
.mobile-nav__intro + .mobile-menu-section {
  margin-top: 0.5rem;
}
.mobile-menu-section:last-child { border-bottom: none; }
.mobile-menu-eye {
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  color: #c9a14b; font-size: 0.78rem; letter-spacing: 0.08em;
  margin-bottom: 1rem; text-transform: uppercase;
  font-weight: 700;
}
.mobile-menu-link {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 0;
  color: #fff; text-decoration: none;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 4.6vw, 1.16rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  min-height: 48px;
}
.mobile-menu-link .mm-icon {
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mobile-menu-link .mm-icon svg { width: 16px; height: 16px; }
.mobile-menu-cta {
  display: block; text-align: center; padding: 1.1rem;
  background: #c9a14b; color: #0a0a0a; border-radius: 12px;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-decoration: none; margin-top: 1rem;
  min-height: 48px;
  box-sizing: border-box;
}

@supports (height: 100dvh) {
  .mobile-menu-panel {
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-panel,
  .mobile-menu-btn,
  .mobile-menu-link {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ≤ 1024px — show hamburger
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav.top .nav-mid { display: none !important; }

  /* ── HIDE the Plan a Trip CTA on mobile — hamburger replaces it ── */
  nav.top .nav-cta-plan { display: none !important; }

  /* ── HAMBURGER: black background, white lines, top right ── */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: #0a0a0a !important;
    border-radius: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 65 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    animation: hamburger-hint 2.5s ease-out 1s 2 !important;
  }
  /* Even on dark navs the hamburger stays the same black-with-white look */
  nav.top.dark .mobile-menu-btn {
    background: #0a0a0a !important;
  }
  /* Force the SVG strokes white regardless of theme */
  .mobile-menu-btn svg { stroke: #ffffff !important; }
  .mobile-menu-btn svg path { stroke: #ffffff !important; }

  @keyframes hamburger-hint {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(232, 105, 62, 0.25), 0 2px 8px rgba(0,0,0,0.15); }
  }
  .mobile-menu-btn.tapped { animation: none !important; }

  /* Make the nav layout: logo on left, hamburger on right (no middle/cta) */
  nav.top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 62px !important;
    padding: .78rem 1rem !important;
    gap: .45rem !important;
  }

  nav.top .logo {
    font-size: 1.08rem !important;
    line-height: 1.18 !important;
    max-width: calc(100vw - 7.4rem) !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-bottom: .08em !important;
    white-space: nowrap !important;
  }

  nav.top .logo em {
    font-size: 1em !important;
    display: inline-block !important;
    line-height: 1.18 !important;
    padding-bottom: .08em !important;
  }

  nav.top .logo .logo-caps {
    font-size: .74rem !important;
    letter-spacing: .075em !important;
    line-height: 1 !important;
  }

  .ct-ai-trigger,
  .mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 10px !important;
  }

  .ct-ai-trigger {
    margin-left: auto !important;
    margin-right: .45rem !important;
  }

  .mobile-menu-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .atlas-control-stack {
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin: 1rem auto 0 !important;
    gap: .65rem !important;
    justify-items: center !important;
  }

  .atlas-control-group {
    width: 100% !important;
    padding: .72rem .68rem !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow: hidden !important;
  }

  .atlas-control-label {
    text-align: center !important;
    padding: 0 .18rem .18rem !important;
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-style: normal !important;
    font-size: .66rem !important;
    letter-spacing: .13em !important;
    line-height: 1.1 !important;
    text-transform: none !important;
  }

  .atlas-control-group .atlas-jump-nav,
  .atlas-jump-nav,
  .category-mode-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: .42rem !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: .15rem .1rem .35rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .atlas-jump-nav::-webkit-scrollbar,
  .category-mode-nav::-webkit-scrollbar {
    display: none;
  }

  .atlas-jump-nav a,
  .category-mode-nav a {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
    min-height: 34px !important;
    padding: .48rem .68rem !important;
    border-radius: 999px !important;
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-style: normal !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
  }

  .atlas-control-group .atlas-jump-nav::before,
  .atlas-control-group .atlas-jump-nav::after,
  .category-mode-nav::before,
  .category-mode-nav::after {
    content: "";
    flex: 0 0 clamp(.35rem, 8vw, 3rem);
  }

  .atlas-control-group .search-box,
  .atlas-control-group .atlas-search-box,
  .atlas-control-stack > .search-box,
  #atlasSearchForm {
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(100%, 460px) !important;
    justify-self: center !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ≤ 900px — Tablet & smaller
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  body > * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  nav.top {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  nav.top .logo { font-size: 1.1rem !important; }
  nav.top .nav-cta-plan {
    padding: 0.55rem 0.95rem !important;
    font-size: 0.82rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  h1 { font-size: clamp(2.4rem, 9vw, 3.6rem) !important; line-height: 1 !important; }
  .hero h1 { font-size: clamp(2.4rem, 9vw, 4rem) !important; }
  h2 { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; }
  h3 { font-size: 1.3rem !important; }

  section, header, main, article, aside {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* ── FOOTER FIX — full viewport, no clipping ── */
  footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 3rem 1.25rem 1.5rem !important;
    box-sizing: border-box !important;
    overflow: hidden;
    position: relative;
    left: 0;
    right: 0;
  }
  footer > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  footer .ftr-wrap,
  footer > div:not(.copy) {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1rem !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  footer .ftr-wrap > *,
  footer > div > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }
  footer h4 {
    font-size: 1.3rem !important;
    flex-wrap: wrap !important;
  }
  footer h5 { font-size: 1rem !important; }
  footer ul li { font-size: 0.9rem; }
  footer .copy {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    margin-top: 2rem !important;
  }

  .ch-grid, .row-2, .proof-inner,
  .immersion-content, .duo-grid, .lcsw-grid, .pillars,
  .stats-grid, .work-head, .stats-grid-3, .family-inner,
  .invite-grid, .origin-content, .film-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ≤ 700px — Phone
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  .hero { min-height: 60vh !important; padding: 6rem 1.25rem 2.5rem !important; overflow: hidden !important; }
  .hero-bg { overflow: hidden !important; }
  .hero-content { padding: 0 !important; }
  .hero-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  .hero-meta div { padding: 0.75rem 0 !important; }
  .breadcrumb { font-size: 0.7rem !important; margin-bottom: 1rem !important; }
  .mood-overlay { overflow: hidden !important; }

  .trip-widget-section { padding: 0 1rem !important; margin-top: -2rem !important; }
  .trip-widget {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
    gap: 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  .tw-head {
    border-right: none !important;
    border-bottom: 1px solid #e6e3dc !important;
    padding-right: 0 !important;
    padding-bottom: 1rem !important;
    text-align: center !important;
  }
  .tw-form {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
    justify-items: center !important;
  }
  .tw-field {
    width: 100% !important;
  }
  .tw-cta {
    width: min(100%, 360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .tab-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem !important;
  }
  .tab {
    flex-shrink: 1 !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.78rem !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .tab-content { padding: 1.5rem !important; }
  .tab-content-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }

  .places-grid, .food-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .back-btn {
    top: 4.45rem !important;
    left: 0.75rem !important;
    padding: 0.55rem 0.82rem !important;
    gap: 0.42rem !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
  .back-btn span {
    display: inline !important;
    white-space: nowrap !important;
  }

  .atlas-hero { padding: 5rem 1rem 2rem !important; }
  .search-wrap { margin-bottom: 1.5rem !important; }
  .search-box {
    padding: 0.4rem 0.4rem 0.4rem 1rem !important;
    border-radius: 28px !important;
  }
  .search-box svg { width: 16px !important; height: 16px !important; }
  .search-box input { padding: 0.7rem 0.4rem !important; }
  .search-btn { padding: 0.65rem 1rem !important; font-size: 0.85rem !important; }

  .vibes {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .vibe {
    flex-shrink: 1 !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.85rem !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    text-decoration: none !important;
  }

  .country-grid, .featured-grid, .continent-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .cat-section { padding: 4rem 1rem 2rem !important; }
  .cat-collage {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    gap: 0.6rem !important;
  }
  .cat-tile { aspect-ratio: 1 !important; }
  .cat-tile-0 {
    grid-column: span 2 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 11 !important;
  }
  .cat-tile-0 h3 { font-size: 1.5rem !important; }

  .form-card { padding: 1.5rem !important; margin-top: -3rem !important; }
  .vibe-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .vibe-pill { padding: 0.65rem 0.4rem !important; font-size: 0.8rem !important; }
  .budget-row { grid-template-columns: 1fr 1fr !important; }

  .ch-grid { grid-template-columns: 1fr !important; }
  .ch { padding: 1.75rem 1.5rem !important; }

  .family-inner { gap: 2rem !important; }
  .family-photo-wrap { aspect-ratio: 4 / 5 !important; }

  /* ── HOMEPAGE GLOBE — proper size & positioning ── */
  .globe-section {
    padding: 3.5rem 1.25rem !important;
  }
  .globe-head {
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
  }
  .globe-head h2 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  .globe-head p { font-size: 1rem !important; line-height: 1.5 !important; }
  #globeViz {
    height: 380px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .globe-legend { margin-top: 1rem !important; flex-wrap: wrap; gap: 1rem !important; font-size: 0.8rem !important; }

  .stories-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .stat-cell { padding: 1.5rem 0.5rem !important; }
  .num { font-size: 2.5rem !important; }
  .lab { font-size: 0.85rem !important; }

  .film-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .film.featured { grid-column: auto !important; }
  .film.featured .film-poster { aspect-ratio: 16 / 9 !important; }
  .film.featured h3 { font-size: 1.8rem !important; }

  .player-section { padding: 1.5rem 1rem 0 !important; }
  .title-strip { padding: 1.5rem 1rem 2.5rem !important; gap: 1.5rem !important; }
  .player-play-btn { width: 64px !important; height: 64px !important; }

  section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  body { font-size: 0.95rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ≤ 380px — small phones
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  nav.top { padding: 0.6rem 0.75rem !important; }
  nav.top .logo { font-size: 1rem !important; }
  nav.top .nav-cta-plan { padding: 0.45rem 0.75rem !important; font-size: 0.75rem !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; text-align: center !important; }
  .country-grid, .featured-grid, .continent-grid, .cat-collage {
    grid-template-columns: 1fr !important;
  }
  .cat-tile-0 { grid-column: auto !important; aspect-ratio: 16 / 9 !important; }
  footer .ftr-wrap, footer > div:not(.copy) { grid-template-columns: 1fr !important; }
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.6rem !important; }
  .hero { min-height: 55vh !important; }
  #globeViz { height: 320px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Touch / iOS specifics
   ════════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .country-card:hover, .featured-card:hover, .film:hover,
  .place:hover, .ch:hover, .cat-tile:hover { transform: none !important; }
}

@media (max-width: 700px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="url"], input[type="number"],
  textarea, select { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Disable the 1.18× hero zoom on mobile — overflow culprit
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-bg img {
    animation: slowzoom-mobile 30s ease-out forwards !important;
  }
  @keyframes slowzoom-mobile {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Country page — DARK THEME OVERRIDES
   The new immersive country page is fully dark. Some mobile.css rules from the
   old light-theme version need to NOT apply here so the immersive vibe stays.
   ════════════════════════════════════════════════════════════════════════════ */
.hero-immersive {
  /* Don't constrain — this is the full-bleed dark hero */
  max-width: none !important;
}
@media (max-width: 700px) {
  .hero-immersive {
    padding: 0 1.25rem 4rem !important;
    min-height: 90vh !important;
  }
  .hero-immersive .country-stat-row {
    grid-template-columns: 1fr 1fr !important;
    margin-top: 2.5rem !important;
  }
  .hero-immersive .country-stat:nth-child(2) { border-right: none !important }
  .hero-immersive .country-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.1) !important }
}
.country-name {
  /* Don't let the global mobile h1 rule shrink the giant hero text */
  font-size: clamp(3.5rem, 12vw, 11rem) !important;
}
@media (max-width: 700px) {
  .country-name { font-size: clamp(2.8rem, 14vw, 5rem) !important; line-height: 0.9 !important; }
  .country-tagline { font-size: 1.1rem !important; line-height: 1.5 !important; }
  .intro-block p { font-size: 1.2rem !important; line-height: 1.6 !important; }
  .tabs-section h2, .section-block h2, .cta-block h2 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important }
  .tab-content { padding: 1.5rem !important }
  .cultural-cell { padding: 2rem 1.5rem !important }
}

/* Country particle canvas — keep the immersive canvas active on mobile too. */
#particle-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 6 !important;
  opacity: .85 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE-ONLY POLISH — plan page spacing, footer spacing, logo centering
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Plan page: balance the green hero spacing & form gap ── */
@media (max-width: 768px) {
  /* Tighten the green hero so there's no big empty band below the text */
  .hero {
    padding: 6.5rem 1.5rem 3.5rem !important;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
    margin-bottom: 1rem !important;
  }
  .hero-sub {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
  }
  /* form-card on mobile: NO negative margin overlap, instead give breathing space */
  .form-card {
    margin: 2rem 1.2rem 0 !important;
    padding: 2rem 1.5rem !important;
    border-radius: 18px !important;
  }
  /* And reduce the form-section's own padding-top so total green-to-form is balanced */
  .form-section {
    padding: 0 0 4rem !important;
  }
  /* The "Build the itinerary." h2 needs breathing room from card top edge */
  .form-card h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ── Footer: cleaner mobile stack with proper spacing ── */
@media (max-width: 768px) {
  footer {
    padding: 4rem 1.5rem 2rem !important;
  }
  /* Stack all footer columns vertically with proper gap on mobile */
  footer > div:not(.copy):not(.ftr-bottom):not(.footer-bottom):not(.footer-mark) {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  footer .ftr-grid,
  footer .ftr-wrap,
  footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    margin-bottom: 0 !important;
  }
  footer h4 { margin-bottom: 1rem !important; font-size: 1.4rem !important; }
  footer h5 { margin-bottom: 0.8rem !important; margin-top: 0 !important; }
  footer .ftr-wrap > :first-child,
  footer .footer-grid > :first-child {
    margin-bottom: 0.9rem !important;
  }
  footer .ftr-wrap > :nth-child(2),
  footer .footer-grid > :nth-child(2) {
    margin-top: 0.35rem !important;
  }
  footer ul { padding-left: 0 !important; }
  footer .copy,
  footer .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    margin-top: 3rem !important;
    padding-top: 1.5rem !important;
  }
  /* Homepage "wonder." mark — keep it but compact on mobile */
  footer .footer-mark {
    font-size: clamp(3rem, 14vw, 6rem) !important;
    margin: 2rem 0 0 !important;
  }
}

/* ── Splash/initial state: keep logo centered if it's the only thing visible ── */
@media (max-width: 768px) {
  /* When nav is the only thing rendered (initial paint), make sure logo doesn't sit alone awkwardly */
  nav.top .logo {
    flex: 1;
    justify-content: flex-start;
    text-align: left;
  }
  /* Logo should never wrap onto two lines */
  nav.top .logo,
  nav.top .logo em,
  nav.top .logo .logo-caps {
    white-space: nowrap !important;
  }
  /* Reasonable logo size to fit on tiny screens */
  nav.top .logo em { font-size: 1.05rem !important; }
  nav.top .logo .logo-caps { font-size: 0.95rem !important; letter-spacing: 0.12em !important; }
}

/* ── Tighter logo on very small phones ── */
@media (max-width: 380px) {
  nav.top .logo em { font-size: 0.95rem !important; }
  nav.top .logo .logo-caps { font-size: 0.85rem !important; letter-spacing: 0.1em !important; }
  nav.top { padding: 0.7rem 1rem !important; }
}

/* ── Splash loader: keep wordmark on ONE line, centered, on mobile ── */
@media (max-width: 768px) {
  .loader-text {
    font-size: 1.6rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0 1rem !important;
  }
}
@media (max-width: 380px) {
  .loader-text {
    font-size: 1.3rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FINAL MOBILE QA OVERRIDES — current Atlas, country pages, drawers, concierge
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }

  nav.top {
    padding-top: max(0.75rem, env(safe-area-inset-top)) !important;
  }

  .mobile-menu-panel {
    z-index: 9999 !important;
    padding-top: calc(4.75rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
  }

  .search-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-results {
    width: calc(100vw - 2rem) !important;
    max-height: min(420px, 48vh) !important;
    border-radius: 18px !important;
    overscroll-behavior: contain !important;
  }

  .search-result {
    padding: 0.85rem 1rem !important;
    gap: 0.75rem !important;
  }

  .atlas-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: calc(1.25rem + env(safe-area-inset-top)) 1rem calc(1.4rem + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
  }

  .drawer-head {
    align-items: center !important;
    margin-bottom: 1rem !important;
  }

  .drawer-head h3 {
    font-size: 1.55rem !important;
  }

  .drawer-head p {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .drawer-search {
    top: 0.5rem !important;
    padding: 0.6rem 0.9rem !important;
    margin-bottom: 1rem !important;
  }

  .alpha-link {
    min-height: 58px !important;
    padding: 0.75rem 2.7rem 0.75rem 0.85rem !important;
  }

  .featured-row,
  .viral-grid,
  .continents {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.9rem !important;
  }

  .dest,
  .continent {
    border-radius: 16px !important;
  }

  .dest-content,
  .continent-content {
    padding: 1rem !important;
  }

  .immersive-shell {
    box-shadow: 0 16px 48px rgba(0,0,0,.12) !important;
  }

  .experience-panel {
    min-height: 0 !important;
    padding: 1.1rem !important;
  }

  .experience-panel p {
    font-size: 1.08rem !important;
  }

  .motion-card {
    min-height: 96px !important;
  }

  .drone-frame {
    min-height: 150px !important;
  }

  .cinema-stack {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .cinema-tile,
  .cinema-tile:first-child {
    aspect-ratio: 16 / 10 !important;
  }

  .concierge-launch {
    right: 1rem !important;
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .concierge-panel {
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    height: min(86vh, 720px) !important;
    max-width: 100vw !important;
    border-radius: 22px 22px 0 0 !important;
    bottom: 0 !important;
  }

  .concierge-planner {
    padding: 0.85rem 1rem !important;
  }

  .concierge-planner h4 {
    font-size: 1.2rem !important;
  }

  .concierge-planner p {
    display: none !important;
  }

  .concierge-fields {
    grid-template-columns: 1fr 1fr !important;
  }

  .concierge-messages {
    padding: 0.85rem !important;
  }

  .concierge-form {
    padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
  }

  .concierge-form button {
    min-width: 64px !important;
    justify-content: center !important;
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: auto !important;
    padding-top: calc(6rem + env(safe-area-inset-top)) !important;
  }

  .hero-sub {
    max-width: 100% !important;
  }

  .search-box {
    max-width: 100% !important;
    align-items: stretch !important;
  }

  .atlas-control-stack > .search-box,
  #atlasSearchForm {
    max-width: min(460px, calc(100vw - 2rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  .search-box input {
    min-width: 0 !important;
  }

  .search-btn {
    flex-shrink: 0 !important;
  }

  .section,
  .all-countries,
  .viral-strip,
  .cat-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .featured-row,
  .viral-grid,
  .continents {
    grid-template-columns: 1fr !important;
  }

  .cat-collage {
    grid-template-columns: 1fr !important;
  }

  .cat-tile,
  .cat-tile-0 {
    grid-column: auto !important;
    aspect-ratio: 16 / 11 !important;
  }

  .motion-board {
    grid-template-columns: 1fr !important;
  }

  .play-chip {
    font-size: 0.8rem !important;
    padding: 0.55rem 0.75rem !important;
  }

  .hero-immersive {
    min-height: 88svh !important;
    padding-top: calc(6rem + env(safe-area-inset-top)) !important;
    padding-bottom: 3rem !important;
  }

  .country-eyebrow {
    letter-spacing: 0.24em !important;
    font-size: 0.64rem !important;
  }

  .country-name {
    font-size: clamp(2.6rem, 18vw, 5rem) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .country-tagline {
    max-width: 100% !important;
  }

  .country-stat-row {
    width: 100% !important;
    gap: 0 !important;
  }

  .country-stat {
    min-width: 0 !important;
    padding: 0.85rem 0.65rem !important;
  }

  .country-stat .value {
    overflow-wrap: anywhere !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: clamp(.86rem, 2.45vw, 1.05rem) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .country-stat .value#bestTime {
    font-size: clamp(.74rem, 2.15vw, .94rem) !important;
    line-height: 1.25 !important;
  }

  .trip-widget-section,
  .tabs-section,
  .section-block,
  .cta-block,
  .intro-block {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .tab-bar {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0.4rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .concierge-panel {
    height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 420px) {
  .search-box {
    padding-left: 0.75rem !important;
  }

  .search-btn {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }

  .concierge-launch span:last-child {
    display: none !important;
  }

  .concierge-launch {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Legacy Mobile Compatibility
   Keeps the current design stable on older iOS Safari / Android WebView builds
   that lack dvh/svh, aspect-ratio, clamp(), env(), or backdrop-filter support.
   ════════════════════════════════════════════════════════════════════════════ */

@supports not (height: 100dvh) {
  .concierge-panel {
    height: 100vh !important;
    height: calc(var(--ct-vh, 1vh) * 100) !important;
  }
}

@supports not (min-height: 88svh) {
  .hero-immersive {
    min-height: 88vh !important;
    min-height: calc(var(--ct-vh, 1vh) * 88) !important;
  }
}

@supports not (padding-top: env(safe-area-inset-top)) {
  nav.top {
    padding-top: 0.85rem !important;
  }
  .mobile-menu-panel {
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-immersive {
    padding-top: 6rem !important;
  }
  .concierge-panel {
    padding-bottom: 0 !important;
  }
}

@supports (padding-top: constant(safe-area-inset-top)) {
  nav.top {
    padding-top: calc(0.75rem + constant(safe-area-inset-top)) !important;
  }
  .mobile-menu-panel {
    padding-top: calc(5rem + constant(safe-area-inset-top)) !important;
    padding-bottom: calc(2rem + constant(safe-area-inset-bottom)) !important;
  }
}

@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
  h1,
  .hero h1 {
    font-size: 3rem !important;
  }
  h2,
  .sec-title,
  .tabs-section h2,
  .section-block h2,
  .cta-block h2 {
    font-size: 2rem !important;
  }
  .country-name {
    font-size: 3.4rem !important;
  }
  .globe-head h2 {
    font-size: 2.2rem !important;
  }
}

@media (max-width: 520px) {
  @supports not (font-size: clamp(1rem, 2vw, 2rem)) {
    h1,
    .hero h1 {
      font-size: 2.45rem !important;
      line-height: 1 !important;
    }
    h2,
    .sec-title,
    .tabs-section h2,
    .section-block h2,
    .cta-block h2 {
      font-size: 1.85rem !important;
    }
    .country-name {
      font-size: 2.8rem !important;
      line-height: 0.95 !important;
    }
  }
}

@supports not (aspect-ratio: 1 / 1) {
  .cat-tile,
  .continent,
  .story-img,
  .film-poster,
  .family-photo-wrap,
  .food-img,
  .moment-media,
  .cinematic-card,
  .media-preview-card,
  .ct-video-frame {
    position: relative !important;
    min-height: 220px !important;
  }
  .cat-tile,
  .continent {
    height: 260px !important;
  }
  .cat-tile-0,
  .film.featured .film-poster {
    height: 240px !important;
  }
  .ct-video-frame {
    height: 52vw !important;
    max-height: 420px !important;
  }
  .cat-tile > img,
  .continent-img,
  .continent-img img,
  .story-img img,
  .film-poster img,
  .family-photo,
  .food-img img,
  .moment-media img,
  .moment-media video,
  .cinematic-card img,
  .media-preview-card img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav.top,
  .dd-panel,
  .mobile-menu-panel,
  .experience-panel,
  .film-play,
  .film-duration,
  .film-country,
  .concept-place,
  .immersion-panel,
  .ri-copy,
  .ri-portal,
  .ri-map,
  .ri-cards,
  .ri-actions {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  nav.top {
    background: rgba(250,250,247,0.98) !important;
  }
  nav.top.dark {
    background: rgba(10,10,10,0.88) !important;
  }
  .dd-panel,
  .experience-panel {
    background: rgba(255,255,255,0.96) !important;
  }
  .mobile-menu-panel,
  .immersion-panel,
  .ri-copy,
  .ri-portal,
  .ri-map,
  .ri-cards,
  .ri-actions {
    background: #0a0a0a !important;
  }
}

@supports not (display: grid) {
  .featured-row,
  .continents,
  .viral-grid,
  .cat-collage,
  .film-grid,
  .stories-grid,
  .ftr-wrap,
  .media-strip,
  .ch-grid,
  .proof-inner,
  .row-2,
  .budget-row,
  .vibe-grid {
    display: block !important;
  }
  .dest,
  .continent,
  .viral-card,
  .cat-tile,
  .film,
  .story,
  .media-preview-card,
  .channel,
  .proof {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE PLATFORM SAFETY LAYER
   Non-visual guardrails for narrow phones, regular phones, foldables/tablets,
   and ultra-wide displays. Keeps existing designs intact while preventing
   clipped text, horizontal drift, and awkward fixed-width panels.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ct-page-gutter: clamp(1rem, 3.2vw, 3rem);
  --ct-wide-shell: 1500px;
  --ct-ultra-shell: 1760px;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

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

input,
select,
textarea,
button {
  font-size: max(16px, 1rem);
}

main,
section,
header,
footer,
nav,
.hero,
.form-section,
.section,
.cat-section,
.films,
.player-section,
.title-strip,
.chapters,
.gallery,
.related,
.cta,
.proof,
.stats,
.stories,
.atlas,
.atlas-section,
.tabs-section,
.media-section,
.tour360-section,
.immersion-suite,
.bridge,
.lines,
.viral,
.channels,
.family,
.work,
.origin,
.welcome,
.invite {
  min-width: 0;
}

.hero-inner,
.hero-content,
.section-block,
.atlas-header,
.atlas-grid,
.footer-grid,
.ftr-wrap,
footer .copy,
.footer-bottom,
.proof-inner,
.stats-inner,
.stories-head,
.stories-grid,
.work-inner,
.family-inner,
.related-inner,
.gallery-head,
.gallery-grid,
.title-strip,
.player-section,
.films,
.section,
.bridge,
.lines-inner,
.tips-inner,
.viral,
.channels,
.form-card,
.form-inner,
.tabs-section,
.media-section,
.tour360-section,
.immersion-suite,
.country-content,
.booking-shell,
.concierge-panel {
  max-width: min(var(--ct-wide-shell), calc(100vw - (var(--ct-page-gutter) * 2)));
}

.hero-sub,
.section-sub,
.title-sub,
.film-sub,
.booking-section-copy,
.country-tagline,
.immersion-copy p,
.tour360-copy,
.concierge-planner p {
  overflow-wrap: break-word;
}

.dd-panel {
  max-width: min(560px, calc(100vw - 2rem)) !important;
}

.country-card,
.atlas-card,
.cat-card,
.cat-tile,
.film,
.result-card,
.choice-card,
.addon-chip,
.summary-card,
.traveler-card,
.media-card,
.moment-card,
.native-card,
.cruise-card,
.line-card,
.tip,
.story {
  min-width: 0;
}

/* Narrow mobile: older small phones and split-screen fold panels. */
@media (max-width: 390px) {
  :root { --ct-page-gutter: .85rem; }

  body { font-size: 15px; }

  h1,
  .hero h1 {
    font-size: clamp(2.25rem, 15vw, 3.35rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  h2,
  .section-title,
  .booking-section-title {
    font-size: clamp(1.55rem, 9vw, 2.2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  .hero,
  .cat-section,
  .form-section,
  .section,
  .films,
  .player-section,
  .title-strip,
  .proof,
  .stats,
  .stories,
  .cta,
  .channels,
  .media-section,
  .tour360-section,
  .immersion-suite {
    padding-left: var(--ct-page-gutter) !important;
    padding-right: var(--ct-page-gutter) !important;
  }

  .logo,
  nav.top .logo {
    min-width: 0;
    max-width: calc(100vw - 5rem);
    overflow: visible;
    text-overflow: clip;
  }

  .search-box,
  .atlas-search-wrap,
  .form-card,
  .concierge-panel {
    max-width: calc(100vw - 1rem) !important;
  }
}

/* Regular mobile: one-column flow and safe tap targets. */
@media (max-width: 700px) {
  :root { --ct-page-gutter: 1.1rem; }

  .row-2,
  .row-3,
  .proof-inner,
  .footer-grid,
  .ftr-wrap,
  .title-strip,
  .family-inner,
  .work-head,
  .immersion-hero,
  .immersion-grid,
  .channels .ch-grid,
  .gallery-grid,
  .stories-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-sub,
  .section-sub,
  .title-sub,
  .film-sub {
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
    line-height: 1.42 !important;
  }

  .search-box {
    border-radius: 18px !important;
    flex-wrap: wrap;
    gap: .55rem;
  }

  .search-box input {
    min-width: 0;
    flex-basis: 100%;
  }

  .search-box button,
  .submit,
  .hero-btn,
  .cta-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .result-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }

  .result-body h4,
  .card-title,
  .film h3 {
    overflow-wrap: break-word;
  }
}

@media (max-width: 900px) {
  .cta,
  .cta-inner,
  .cta-block {
    text-align: center !important;
  }

  .cta-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .cta .cta-btn,
  .cta-block .cta-btn,
  .stub-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: min(100%, 360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Foldables and compact tablets: use two-column surfaces where they fit. */
@media (min-width: 540px) and (max-width: 1024px) {
  :root { --ct-page-gutter: clamp(1.25rem, 4vw, 2.25rem); }

  .proof-inner,
  .stats-grid,
  .footer-grid,
  .ftr-wrap,
  .gallery-grid,
  .stories-grid,
  .media-strip,
  .choice-grid,
  .addon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-inner,
  .hero-content,
  .form-card,
  .section,
  .tabs-section,
  .media-section,
  .tour360-section,
  .immersion-suite {
    max-width: min(920px, calc(100vw - (var(--ct-page-gutter) * 2))) !important;
  }

  .booking-tabs {
    justify-content: stretch;
  }
}

/* Foldable cover displays: Galaxy Fold closed, split-screen panels, old narrow Android WebViews. */
@media (max-width: 360px) {
  :root { --ct-page-gutter: .72rem; }

  nav.top {
    padding-left: .72rem !important;
    padding-right: .72rem !important;
    min-height: 60px !important;
  }

  nav.top .logo {
    gap: .28rem !important;
    max-width: calc(100vw - 4.65rem) !important;
  }

  nav.top .logo em {
    font-size: .84rem !important;
  }

  nav.top .logo .logo-caps {
    font-size: .74rem !important;
    letter-spacing: .075em !important;
  }

  .mobile-menu-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9px !important;
  }

  .mobile-menu-panel {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    gap: .95rem !important;
  }

  .mobile-menu-section {
    padding-bottom: 1rem !important;
  }

  .mobile-menu-eye {
    font-size: .72rem !important;
    margin-bottom: .55rem !important;
  }

  .mobile-menu-link {
    gap: .65rem !important;
    padding: .66rem 0 !important;
    font-size: .96rem !important;
    min-height: 44px !important;
  }

  .mobile-menu-link .mm-icon {
    width: 29px !important;
    height: 29px !important;
    border-radius: 7px !important;
  }

  .atlas-control-stack {
    max-width: calc(100vw - .9rem) !important;
    gap: .5rem !important;
  }

  .atlas-control-group {
    padding: .58rem .52rem !important;
  }

  .atlas-jump-nav a,
  .category-mode-nav a {
    min-height: 32px !important;
    padding: .42rem .58rem !important;
    font-size: .72rem !important;
  }
}

/* Short landscape phones and foldables opened horizontally: keep the drawer usable without endless vertical clipping. */
@media (max-height: 520px) and (orientation: landscape) {
  .mobile-menu-panel {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: .85rem 1rem !important;
  }

  .mobile-menu-close {
    top: .65rem !important;
    right: .75rem !important;
    z-index: 2;
  }

  .mobile-menu-section {
    border-bottom: 0 !important;
    padding: 2.25rem 0 .25rem !important;
    min-width: 0;
  }

  .mobile-menu-link {
    padding: .52rem 0 !important;
    min-height: 40px !important;
    font-size: .92rem !important;
  }

  .mobile-menu-cta {
    padding: .78rem !important;
    min-height: 42px !important;
  }

  .atlas-control-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    max-width: min(980px, calc(100vw - 1.5rem)) !important;
  }

  .atlas-control-group {
    min-width: 0 !important;
  }
}

/* Unfolded portrait and square-ish foldables: use a readable drawer grid without crowding. */
@media (min-width: 600px) and (max-width: 920px) and (min-height: 700px) {
  .mobile-menu-panel {
    padding-left: max(2rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(2rem, env(safe-area-inset-right, 0px)) !important;
  }

  .mobile-menu-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem 1.25rem;
  }

  .mobile-menu-eye {
    grid-column: 1 / -1;
  }

  .mobile-menu-section:last-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .mobile-menu-cta {
    margin-top: 0;
  }
}

/* Fully opened foldables/tablets in landscape: desktop-like drawer density with safe touch targets. */
@media (min-width: 921px) and (max-width: 1366px) and (max-height: 900px) and (orientation: landscape) {
  .mobile-menu-panel {
    width: min(760px, 72vw) !important;
    left: auto !important;
    right: 0 !important;
    transform: translateX(101%);
    border-left: 1px solid rgba(255,255,255,.1);
    box-shadow: -24px 0 80px rgba(0,0,0,.32);
  }

  .mobile-menu-panel.open {
    transform: translateX(0);
  }
}

/* Landscape fold/tri-fold/tablet: avoid stretched single columns. */
@media (min-width: 900px) and (max-width: 1366px) and (min-height: 540px) {
  .form-card,
  .booking-shell,
  .concierge-panel {
    max-width: min(980px, calc(100vw - 3rem)) !important;
  }

  .atlas-grid,
  .cat-grid,
  .film-grid,
  .line-grid,
  .tips-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
}

/* Galaxy Fold / foldable correction: treat unfolded devices like normal mobile.
   No tablet-style drawer grids or oversized controls on country pages. */
@media (min-width: 600px) and (max-width: 920px) {
  nav.top {
    min-height: 62px !important;
    padding: .78rem 1rem !important;
    align-items: center !important;
  }

  nav.top .nav-mid,
  nav.top .nav-cta-plan {
    display: none !important;
  }

  nav.top .logo {
    max-width: calc(100vw - 5.4rem) !important;
  }

  .mobile-menu-panel {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    transform: translateX(101%) !important;
    display: block !important;
    padding: calc(4.8rem + env(safe-area-inset-top, 0px)) 1.15rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }

  .mobile-menu-panel.open {
    transform: translateX(0) !important;
  }

  .mobile-menu-section {
    display: block !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }

  .mobile-menu-link {
    min-height: 46px !important;
    padding: .72rem 0 !important;
  }

  .country-page-nav-section {
    padding: 1.35rem 1rem 0 !important;
    margin-bottom: 1.4rem !important;
    scroll-margin-top: 5.2rem !important;
  }

  .country-page-nav {
    padding: .72rem .62rem .7rem !important;
    border-radius: 14px !important;
  }

  .country-jump-nav {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: .22rem .18rem .34rem !important;
    gap: .4rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .country-jump-nav a {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: .52rem .68rem !important;
    white-space: nowrap !important;
  }

  .country-search-box {
    max-width: 100% !important;
    grid-template-columns: 1fr auto !important;
  }

  .back-btn {
    top: calc(4.7rem + env(safe-area-inset-top, 0px)) !important;
    left: 1rem !important;
    font-size: .76rem !important;
    padding: .56rem .86rem !important;
  }

  .back-btn span {
    display: inline !important;
    white-space: nowrap !important;
  }

  .hero-photo-credit {
    top: calc(8.15rem + env(safe-area-inset-top, 0px)) !important;
    left: 1rem !important;
    right: auto !important;
    z-index: 91 !important;
    max-width: calc(100vw - 2rem) !important;
    font-size: .62rem !important;
  }

  .hero-immersive {
    min-height: auto !important;
    padding: 0 1rem 2.25rem !important;
  }

  .hero-immersive .hero-content {
    padding-top: calc(12.9rem + env(safe-area-inset-top, 0px)) !important;
    max-width: 100% !important;
  }

  .country-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 1.15rem !important;
  }

  .country-name {
    font-size: clamp(3rem, 13vw, 5.4rem) !important;
    line-height: .9 !important;
    max-width: 100% !important;
  }

  .country-tagline {
    font-size: clamp(1rem, 3.2vw, 1.25rem) !important;
    line-height: 1.42 !important;
    margin-top: 1.25rem !important;
    max-width: 100% !important;
  }

  .country-stat-row {
    grid-template-columns: 1fr 1fr !important;
    margin-top: 1.45rem !important;
    gap: 0 !important;
  }

  .country-stat {
    min-width: 0 !important;
    padding: .85rem .65rem !important;
  }

  .country-stat .label {
    font-size: .72rem !important;
    letter-spacing: .22em !important;
  }

  .country-stat .value {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: clamp(.82rem, 2.05vw, 1.04rem) !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
  }

  .country-stat .value#bestTime {
    font-size: clamp(.72rem, 1.75vw, .9rem) !important;
    font-weight: 600 !important;
    line-height: 1.24 !important;
  }
}

@media (min-width: 641px) and (max-width: 1200px) {
  .back-btn {
    top: calc(4.7rem + env(safe-area-inset-top, 0px)) !important;
    left: 1rem !important;
  }

  .hero-photo-credit {
    top: calc(8.15rem + env(safe-area-inset-top, 0px)) !important;
    left: 1rem !important;
    right: auto !important;
    z-index: 91 !important;
    max-width: calc(100vw - 2rem) !important;
    white-space: nowrap !important;
  }

  .hero-immersive .hero-content {
    padding-top: calc(16.4rem + env(safe-area-inset-top, 0px)) !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1200px) {
  .back-btn {
    top: calc(4.7rem + env(safe-area-inset-top, 0px)) !important;
    left: 1rem !important;
    z-index: 92 !important;
  }

  .back-btn span {
    display: inline !important;
    white-space: nowrap !important;
  }

  .hero-photo-credit {
    top: calc(8.15rem + env(safe-area-inset-top, 0px)) !important;
    left: 1rem !important;
    right: auto !important;
    z-index: 91 !important;
    max-width: calc(100vw - 2rem) !important;
    white-space: nowrap !important;
  }

  .hero-immersive .hero-content {
    padding-top: calc(16.4rem + env(safe-area-inset-top, 0px)) !important;
  }

  .country-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    display: block !important;
    clear: both !important;
  }
}

@media (min-width: 700px) and (max-width: 920px) and (orientation: landscape) {
  .mobile-menu-panel {
    padding-top: calc(4.25rem + env(safe-area-inset-top, 0px)) !important;
  }

  .country-page-nav-section {
    padding-top: 1rem !important;
  }

  .hero-immersive .hero-content {
    padding-top: 11.4rem !important;
  }
}

@media (max-width: 640px) {
  .hero-immersive .hero-content {
    padding-top: calc(6.4rem + env(safe-area-inset-top, 0px)) !important;
  }

  .country-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    display: block !important;
    clear: both !important;
  }
}

/* Country hero header lock: keep Back to Atlas, Photo by, and region label
   at one consistent mobile/Fold distance instead of letting flex centering
   shift shorter country pages lower than longer ones. */
@media (max-width: 1200px) {
  .hero-immersive {
    justify-content: flex-start !important;
  }

  .hero-immersive .hero-content {
    margin-top: 1.2rem !important;
  }
}

/* Final shared desktop nav normalization. Older pages such as Contact define
   fewer inline nav styles before mobile-menu.js standardizes the markup, so
   keep dropdown triggers visually identical to Atlas links: no button box,
   same centerline, same spacing. */
@media (min-width: 821px) {
  nav.top {
    align-items: center !important;
  }

  nav.top .nav-mid {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
  }

  nav.top .nav-trigger,
  nav.top .nav-link-simple {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: .5rem .2rem !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit;
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: .95rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  nav.top .nav-trigger svg {
    flex: 0 0 auto !important;
    display: block !important;
    margin-top: 1px !important;
  }

  nav.top .dd-panel {
    position: absolute !important;
    top: calc(100% + 1rem) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-8px) !important;
    width: 560px !important;
    min-width: 560px !important;
    max-width: min(560px, calc(100vw - 2rem)) !important;
    max-height: min(70vh, 620px) !important;
    overflow: auto !important;
    padding: 1.5rem !important;
    background: #fff !important;
    border: 1px solid var(--rule, #e6e3dc) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.12) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1000 !important;
  }

  nav.top .dd-panel.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  nav.top .dd-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }

  nav.top .dd-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: .85rem !important;
    padding: .85rem 1rem !important;
    border-radius: 12px !important;
    color: #0a0a0a !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  nav.top .dd-item:hover {
    background: #f5f1e8 !important;
  }

  nav.top .dd-title {
    font-family: 'Fraunces', serif !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin-bottom: .15rem !important;
  }

  nav.top .dd-sub {
    color: #666 !important;
    font-size: .82rem !important;
    line-height: 1.3 !important;
  }

  body.home nav.top:not(.dark):not(.dark-nav):not(.is-dark) .nav-trigger,
  body.home nav.top:not(.dark):not(.dark-nav):not(.is-dark) .nav-link-simple {
    color: #0a0a0a !important;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  nav.top .dd-panel {
    left: auto !important;
    right: 0 !important;
    transform: translateY(-8px) !important;
    width: min(520px, calc(100vw - 2rem)) !important;
    min-width: 0 !important;
  }

  nav.top .dd-panel.open {
    transform: translateY(0) !important;
  }
}

/* Ultra-wide: keep reading width premium instead of stretching forever. */
@media (min-width: 1600px) {
  :root {
    --ct-page-gutter: clamp(3rem, 5vw, 6rem);
    --ct-wide-shell: var(--ct-ultra-shell);
  }

  .hero-inner,
  .hero-content,
  .section-block,
  .atlas-header,
  .atlas-grid,
  .footer-grid,
  .ftr-wrap,
  footer .copy,
  .footer-bottom,
  .proof-inner,
  .stats-inner,
  .stories-head,
  .stories-grid,
  .work-inner,
  .family-inner,
  .related-inner,
  .gallery-head,
  .gallery-grid,
  .title-strip,
  .player-section,
  .films,
  .section,
  .bridge,
  .lines-inner,
  .tips-inner,
  .viral,
  .channels,
  .tabs-section,
  .media-section,
  .tour360-section,
  .immersion-suite {
    max-width: var(--ct-ultra-shell) !important;
  }

  .hero h1 {
    max-width: 13ch;
  }
}

/* 27-inch AIO / iMac-class desktop tuning.
   Keep the cinematic media full-bleed, but hold actual interface/content inside
   a premium centered shell so 2560px+ screens do not feel stretched. */
@media (min-width: 1920px) {
  :root {
    --ct-aio-shell: 1480px;
    --ct-aio-reading: 1120px;
  }

  nav.top {
    padding-left: max(2.5rem, calc((100vw - var(--ct-aio-shell)) / 2)) !important;
    padding-right: max(2.5rem, calc((100vw - var(--ct-aio-shell)) / 2)) !important;
  }

  .hero-content,
  .film-feature-inner,
  .partners-inner,
  .book-now-inner,
  .founder-strip-inner,
  .social-feed-head,
  .social-feed-grid,
  .stats-grid,
  .stories-head,
  .stories-grid,
  .footer-grid,
  .footer-bottom,
  footer .copy {
    max-width: var(--ct-aio-shell) !important;
  }

  .hero {
    min-height: min(100vh, 980px) !important;
  }

  .hero-content {
    padding-top: 6.5rem !important;
  }

  .hero h1 {
    font-size: clamp(7rem, 6.8vw, 9rem) !important;
    max-width: 12ch !important;
  }

  .hero-sub {
    max-width: var(--ct-aio-reading) !important;
    gap: 4rem !important;
  }

  .film-feature,
  .stories,
  .globe-section {
    padding-left: max(2.5rem, calc((100vw - var(--ct-aio-shell)) / 2)) !important;
    padding-right: max(2.5rem, calc((100vw - var(--ct-aio-shell)) / 2)) !important;
  }

  .film-feature-inner {
    grid-template-columns: minmax(320px, 430px) minmax(0, 1fr) !important;
  }

  .vibe-shortcuts {
    max-width: 1060px !important;
  }

  .social-feed-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .contact-strip-inner,
  .globe-head {
    max-width: min(980px, var(--ct-aio-shell)) !important;
  }
}

@media (min-width: 2400px) {
  :root {
    --ct-aio-shell: 1560px;
  }

  .hero h1 {
    font-size: 9rem !important;
  }
}

/* Platform rule: dash-led editorial labels render lowercase, not forced caps. */
.eyebrow, [class*="eyebrow"], .tagline, .atlas-control-label, [class$="-eye"], [class*="-eye"], [class*="kicker"], [class*="readout-eye"], [class*="meta-eye"] {
  text-transform: none !important;
}