/* Phone / tablet polish. Loaded last so it can refine everything above. */

html { -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; }

/* Mobile browsers: 100vh includes the collapsing URL bar, svh does not */
.hero-section { min-height: 100vh; min-height: 100svh; }

/* Notch / home-indicator safe areas */
.header-wrapper { padding-top: calc(1.25rem + env(safe-area-inset-top)); }
.header-wrapper.scrolled { padding-top: calc(0.7rem + env(safe-area-inset-top)); }
.footer-section { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

.modal-dialog { max-height: 90vh; max-height: calc(100dvh - 2rem); }

/* ---- Phones ---- */
@media (max-width: 640px) {
  .section-container,
  .header-wrapper {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }

  /* fluid headlines: the longest line always fits, down to 320px wide */
  .hero-headline { font-size: clamp(28px, calc((100vw - 2.5rem) / 8.3), 40px); }
  .section-headline-light,
  .section-headline-dark { font-size: clamp(26px, calc((100vw - 2.5rem) / 8.6), 38px); }
  .contact-title { font-size: clamp(30px, 10vw, 40px); }
  h2.text-\[36px\] { font-size: clamp(26px, 9vw, 36px); }

  /* never let a forced single line push the page wider than the screen */
  h1 .whitespace-nowrap,
  h2 .whitespace-nowrap,
  h3 .whitespace-nowrap { white-space: normal; }

  /* iOS zooms into inputs below 16px */
  .form-input,
  .contact-card .form-input { font-size: 16px; }

  /* text that was designed for desktop but is too small to read on a phone: floor at 11px
     (!important because Tailwind's arbitrary sizes like text-[9.5px] load after this file) */
  [class*='text-[8'],
  [class*='text-[9'],
  [class*='text-[10'],
  .kpi-label,
  .client-logos-kicker,
  .section-meta-right-text,
  .hero-eyebrow-text,
  .info-label,
  .topic-vertical-list,
  .lang-code { font-size: 11px !important; }

  /* the 3 stats under "Advising today" sit in one tidy row instead of wrapping */
  .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; width: 100%; }
  .stat-strip > div { padding: 0 !important; }
  .stat-strip > div[class*='w-[1px]'] { display: none; }

  .hero-content-container { padding-bottom: 1.5rem; }
  .hero-cta-row { gap: 1rem; }
  .hero-cta-row .btn-cyan-glow { width: 100%; justify-content: center; }

  /* every call-to-action button: full width, label + arrow centred as one group */
  .section-container .btn-cyan-glow,
  .cta-stack > button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .cta-stack { gap: 0.75rem; }
  .cta-stack > button { display: flex; align-items: center; justify-content: center; min-height: 3.2rem; }

  .contact-hero { padding-top: calc(7rem + env(safe-area-inset-top)); }
  .contact-main { padding: 2.5rem 0 3rem; }
  .contact-card { padding: 1.25rem; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn-cyan-glow { justify-content: center; width: 100%; }

  .modal-backdrop { padding: 0.75rem; align-items: flex-end; }
  .modal-dialog { border-radius: 1rem 1rem 0.75rem 0.75rem; padding: 1.25rem; }
}

/* ---- Touch screens: comfortable tap targets ---- */
@media (pointer: coarse) {
  .footer-list-btn,
  .footer-legal-links button,
  .drawer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .topic-chips button { min-height: 44px; padding-inline: 1rem; }
  .social-btn { width: 2.75rem; height: 2.75rem; }
  .faq-list summary { min-height: 52px; }
  .btn-watch-story { min-height: 48px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .card-learn-more-link,
  .client-logo-btn { min-height: 44px; }
  .dropdown-item,
  .lang-item { min-height: 44px; }
}

/* ---- Touch screens: no "stuck" hover states after a tap ---- */
@media (hover: none) {
  .novami-card:hover,
  .step-process-card:hover,
  .pillar-card-light:hover,
  .solution-card:hover,
  .industry-card:hover,
  .region-card:hover,
  .insight-article-card:hover,
  .info-link:hover,
  .client-logo-btn:hover,
  .btn-cyan-glow:hover,
  .btn-contact-outline:hover { transform: none; }

  .novami-card:hover .card-photo-header img,
  .novami-card:hover .card-photo-header::before,
  .novami-card:hover .card-art::before { transform: none; }
}

/* ---- Landscape phones (very little height) ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-section { min-height: auto; }
  .hero-content-container { padding-top: 5.5rem; }
  .contact-hero { padding-top: 6.5rem; }
}

/* ---- Tablets ---- */
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-headline { font-size: clamp(44px, 7.4vw, 60px); }
}

/* "Contact Us" ghost button: base.css resets button borders after Tailwind loads, so set it explicitly */
.cta-stack > button + button {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(3, 13, 30, 0.6);
}

.cta-stack > button + button:hover { border-color: rgba(0, 229, 255, 0.7); background: rgba(255, 255, 255, 0.08); }

@media (max-width: 640px) {
  /* trust points: one tidy aligned list instead of a ragged wrapped row */
  .trust-strip { display: grid !important; gap: 0.9rem; }
  .trust-strip > div { padding: 0 !important; }
  .trust-strip > div[class*='w-[1px]'] { display: none; }
}

@media (pointer: coarse) and (max-width: 639px) {
  .footer-list-btn { min-height: 38px; }
}