/* =========================================================
   EVTM Premium — phone & iPhone (Safari) refinements.
   Loaded after premium.css and pass.css so these win on small screens.
   ========================================================= */

/* Touch basics for every device */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, .city, .fp-item, .fare, .port { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { -webkit-appearance: none; appearance: none; }

/* Contact buttons that were plain links before */
.footer-mail { background: none; border: 0; padding: 6px 0; font: 600 .86rem var(--font-body); color: var(--gold-2); cursor: pointer; }
.footer-mail:hover { color: #fff; }
.contact-line { margin-top: 24px; }
button.nav-cta { width: calc(100% - 20px); border: 1px solid var(--line-gold); background: transparent; cursor: pointer; font: 600 .66rem var(--font-body); color: var(--gold-2); line-height: 1.25; }
button.nav-cta:hover { background: rgba(232, 194, 122, .1); }

/* Use the *visible* screen height on iPhone (Safari's address bar changes 100vh) */
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
  .globe-stage { height: 112svh; }
}
/* The one-screen-tall pinned city section is a laptop/tablet-landscape feature only */
@media (min-width: 901px) { @supports (height: 100svh) { .presence-pin { height: 100svh; } } }

@media (max-width: 900px) {
  /* Top bar clears the notch / Dynamic Island */
  .side-menu { height: calc(64px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  body { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: flex-start; }

  @supports (height: 100svh) {
    .hero { min-height: calc(100svh - 64px - env(safe-area-inset-top, 0px)); }
    .globe-stage { height: 78svh; }
  }

  /* Comfortable 44px+ tap targets (Apple's minimum) */
  .btn { min-height: 46px; }
  .btn--sm { min-height: 44px; padding: 10px 16px; font-size: .84rem; }
  .fp-item { min-height: 64px; }
  .values-tabs button { min-height: 52px; }
  .board-open, .rail--pass .stub { min-height: 44px; }
  .g-label { min-height: 36px; }

  /* Search box: 16px text stops iPhone from zooming in on tap */
  .fp-search input { font-size: 16px; }
  .fp-search .btn { min-height: 44px; }

  /* Hero spacing on narrow phones */
  .hero-inner { padding: 44px 22px 36px; }
  .hero-title { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .hero-lead { margin-top: 22px; font-size: 1rem; }
  .hero-ctas { margin-top: 28px; gap: 12px; }
  .hero-stats { margin-top: 40px; }
  .eyebrow { margin-bottom: 22px; font-size: .66rem; letter-spacing: .1em; }

  /* City cards: full width, readable */
  .city { height: 420px; }
  .city-body { padding: 22px; }
  .city-body p { font-size: .9rem; }
  .city-actions .btn { flex: 1 1 auto; }

  /* Sections breathe a little less on phones */
  .sec-head { margin-bottom: 36px; padding: 0 22px; }
  .sec-title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .story { gap: 28px; }
  .story-badge { padding: 12px 16px; }
  .office-card .oc-actions .btn { flex: 1 1 auto; }
  .cta-band { padding: 100px 22px calc(100px + env(safe-area-inset-bottom, 0px)); }

  /* Office page */
  .op-hero { min-height: 62vh; padding: 110px 22px 46px; }
  .op-hero .back { top: 18px; left: 22px; }
  .op-grid, .op-others { padding-left: 20px; padding-right: 20px; }
  .op-details { padding: 24px; }

  /* Menus: overlays respect notch + home bar and scroll smoothly */
  .board, .pass { padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .board-close, .pass-close { min-height: 44px; }
  .fare { min-height: 76px; }
  .port { min-height: 52px; }

  /* City popover fits small screens */
  .city-pop { width: min(300px, calc(100vw - 32px)); }
}

/* Small iPhones (SE / mini) */
@media (max-width: 380px) {
  .hero-title { font-size: 2.35rem; }
  .hero-stats dd { font-size: 2rem; }
  .fp-list { grid-template-columns: 1fr; }
  .fares { grid-template-columns: 1fr 1fr; gap: 8px; }
  .f-code { font-size: 1.05rem; }
  .city { height: 400px; }
}

/* ---------- Any touchscreen (phones AND iPads, any orientation) ---------- */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn--sm { min-height: 44px; padding: 10px 16px; }
  .fp-item { min-height: 64px; }
  .values-tabs button { min-height: 52px; }
  .fp-search input { font-size: 16px; }
  .g-label { padding: 8px 13px; }
  .board-cta, .stub-cta { padding: 8px 12px; }
  /* no hover on touch: show tracker labels for the current port only */
  .voyage a em { display: none; }
  .voyage a.is-active em { display: inline; }
}

/* ---------- iPad / tablet landscape and small laptops (901–1200px) ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-inner { max-width: 640px; padding-left: clamp(28px, 5vw, 60px); padding-right: 24px; }
  .hero-title { font-size: clamp(3rem, 6.4vw, 4.6rem); }
  .hero-stats div { padding-right: 22px; margin-right: 22px; }
  .presence-head, .presence-track { padding-left: clamp(28px, 5vw, 60px); }
  .city { width: clamp(320px, 46vw, 460px); height: min(58vh, 520px); }
  .story { padding: 110px clamp(28px, 5vw, 60px); gap: 40px; }
  .stage-copy { left: clamp(28px, 5vw, 60px); max-width: 380px; }
  .fp-panel { padding-left: clamp(28px, 5vw, 60px); }
  .fp-body { grid-template-columns: 260px 1fr; }
  .values-box { grid-template-columns: 240px 1fr; }
  .values-stage { grid-template-columns: 1fr; }
  .v-emblem { width: 170px; margin: 0; order: -1; }
  .board-frame { width: 100%; }
  .board-ports { grid-template-columns: repeat(3, 1fr); }
  .fares { grid-template-columns: repeat(2, 1fr); }
  .pass-ports ul { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- iPad portrait & large phones in landscape (601–900px) ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-inner { padding: 60px 40px 40px; max-width: 680px; }
  .hero-title { font-size: clamp(3rem, 8vw, 4.4rem); }
  .city { height: 480px; }
  .story { padding: 90px 40px; }
  .story-media { aspect-ratio: 16 / 9; }
  .work-grid, .founder-list, .office-grid { padding: 0 40px; }
  .sec-head { padding: 0 40px; }
  .values-box { margin: 0 40px; }
  .fp-panel { padding: 0 40px 90px; }
  .fp-list { grid-template-columns: repeat(3, 1fr); }
  .stage-copy { left: 40px; right: 40px; }
  .fares { grid-template-columns: repeat(4, 1fr); }
  .pass-ports ul { grid-template-columns: repeat(5, 1fr); }
  .city-pop { width: 320px; }
}

/* Closed overlays must never sit on top of the page and swallow taps.
   (Their display:grid would otherwise override the hidden attribute.) */
.pass[hidden], .board[hidden], .city-pop[hidden], #loader[hidden] { display: none !important; }

@media (pointer: coarse) { .footer-mail { min-height: 44px; padding: 10px 0; } }

/* Values tabs: 2 x 2 grid on phones so every tab is visible (no hidden sideways scroll) */
@media (max-width: 600px) {
  .values-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .values-tabs button { justify-content: flex-start; padding: 14px 14px; font-size: .92rem; border-bottom: 1px solid var(--line); }
  .values-tabs button:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* Globe labels stay invisible until the globe positions them */
.g-label { opacity: 0; pointer-events: none; }

/* "Scroll to set sail" cue would collide with the stats on shorter screens / tablets */
@media (max-width: 1200px), (max-height: 860px) { .scroll-cue { display: none; } }

/* Voyage tracker: only the dots/labels you can see may catch clicks (hidden labels used to sit over content) */
.voyage { pointer-events: none; }
.voyage a { pointer-events: auto; }
.voyage a em { visibility: hidden; }
.voyage a:hover em, .voyage a:focus-visible em, .voyage a.is-active em { visibility: visible; opacity: 1; transform: none; }
.voyage:hover a:not(:hover):not(.is-active) em { opacity: 0; }

/* Hero stats: three in one row on phones */
@media (max-width: 600px) { .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; } }