/* ================================================================
   ALTA INTEGRA — PREMIUM MOBILE-FIRST SYSTEM v3
   ================================================================
   SCOPE: Phone (≤640px) and iPad/Tablet (≤1024px) ONLY.
   Desktop (≥1025px) is 100% untouched.
   ================================================================ */

@media (max-width: 1024px) {
  :root {
    --ai-px-phone:   20px;
    --ai-px-tablet:  28px;
    --ai-r-card:     20px;
    --ai-r-btn:      999px;
    --ai-shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
    --ai-shadow-md:  0 1px 3px rgba(0,0,0,0.05), 0 8px 28px rgba(0,0,0,0.08);
    --ai-shadow-lg:  0 2px 6px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.10);
  }
}

*,*::before,*::after { box-sizing: border-box; }
html,body { overflow-x: hidden; max-width: 100vw; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img,video,canvas,svg { max-width: 100%; height: auto; display: block; }

@media (max-width: 1024px) {
  * { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
  button, input, select, textarea { min-width: revert; }
}

[style*="maxWidth: 1280"],[style*="max-width: 1280"] { max-width: min(1280px, 100%) !important; }

@media (max-width: 1024px) {
  .nav-links-desktop,.nav-util-desktop { display: none !important; }
}

@media (max-width: 1024px) {
  body .nav-menu-pill {
    display: inline-flex !important; width: 48px !important; height: 48px !important;
    padding: 0 !important; background: transparent !important; border: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    align-items: center !important; justify-content: center !important;
  }
}

@media (max-width: 860px) {
  .display,.display-xl { font-size: clamp(34px, 9vw, 52px) !important; letter-spacing: -0.025em !important; line-height: 1.06 !important; }
}
@media (max-width: 480px) {
  .display,.display-xl { font-size: clamp(28px, 9vw, 38px) !important; line-height: 1.08 !important; }
}

@media (max-width: 860px) {
  h1[style*="clamp"],h2[style*="clamp"] { font-size: clamp(26px, 6vw, 44px) !important; }
}
@media (max-width: 480px) {
  h1[style*="clamp"],h2[style*="clamp"] { font-size: clamp(22px, 7.5vw, 34px) !important; }
}

@media (max-width: 640px) { p { font-size: max(15px, 1em); line-height: 1.65; } }

@media (max-width: 860px) {
  [style*="padding: 120px"]:not(#home) { padding-top: clamp(64px, 10vw, 96px) !important; padding-bottom: clamp(64px, 10vw, 96px) !important; }
  [style*="padding: 100px"]:not(#home),[style*="padding: 140px"]:not(#home) { padding-top: clamp(56px, 10vw, 80px) !important; padding-bottom: clamp(56px, 10vw, 80px) !important; }
}
@media (max-width: 640px) {
  [style*="padding: 120px"]:not(#home) { padding-top: clamp(48px, 12vw, 68px) !important; padding-bottom: clamp(48px, 12vw, 68px) !important; }
  [style*="padding: 100px"]:not(#home),[style*="padding: 140px"]:not(#home) { padding-top: clamp(40px, 12vw, 60px) !important; padding-bottom: clamp(40px, 12vw, 60px) !important; }
}

@media (max-width: 860px) {
  [style*="padding: 120px 24px"],[style*="padding: 100px 24px"],[style*="0 24px"] { padding-left: var(--ai-px-tablet, 28px) !important; padding-right: var(--ai-px-tablet, 28px) !important; }
}
@media (max-width: 640px) {
  [style*="padding: 120px 24px"],[style*="padding: 100px 24px"],[style*="0 24px"] { padding-left: var(--ai-px-phone, 20px) !important; padding-right: var(--ai-px-phone, 20px) !important; }
}
@media (max-width: 380px) {
  [style*="padding: 120px 24px"],[style*="padding: 100px 24px"],[style*="0 24px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 640px) { #home { padding-top: 96px !important; padding-bottom: 60px !important; } }
@media (max-width: 480px) { #home { padding-top: 80px !important; padding-bottom: 52px !important; } }

@media (max-width: 480px) {
  .ai-hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; }
  .ai-hero-ctas > a,.ai-hero-ctas > button { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; font-size: 15px !important; }
}

@media (max-width: 760px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] > * { border-right: none !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] > *:nth-child(1),[style*="grid-template-columns: repeat(4, 1fr)"] > *:nth-child(2) { border-bottom: 1px solid #d2d2d7 !important; }
}
@media (max-width: 460px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] > *:not(:last-child) { border-bottom: 1px solid #d2d2d7 !important; }
}

@media (max-width: 860px) {
  .ai-grid-2 { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ai-stack-on-mobile { flex-direction: column !important; align-items: flex-start !important; }
  .ai-header-2 { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
}
@media (max-width: 640px) {
  .ai-grid-3,.ai-grid-4 { grid-template-columns: 1fr !important; gap: 20px !important; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .ai-grid-3,.ai-grid-4 { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
}

@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr !important; gap: 14px !important; } }

/* Services overview group header: title/blurb/arrow share one flex row with
   minWidth:0 on the title block — on narrow screens it gets squeezed until
   the heading's clamp() font has no room and wraps one letter per line. */
@media (max-width: 768px) {
  .svc-group-header-link { flex-wrap: wrap !important; }
  .svc-group-header-link > div:first-child { flex: 1 1 100% !important; }
}

/* Careers role row: fixed 5-column grid (44px 1.4fr 1fr 0.8fr auto) has no
   room on narrow screens — title/track/location text get squeezed into
   single-word-fragment columns. Stack into one column instead. */
@media (max-width: 768px) {
  .ai-role-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 20px !important; }
}

/* Navbar language/search icon buttons are 36x36 — below the 48x48 minimum
   tap-target size. Bumped on touch-sized screens only; the hamburger menu
   button is already mobile-only so it's sized directly in sections.jsx. */
@media (max-width: 768px) {
  .nav-lang-btn, .nav-search-btn { width: 48px !important; height: 48px !important; }
}

@media (max-width: 1024px) {
  [style*="grid-template-columns: 1.4fr 1fr"],[style*="grid-template-columns: 1.3fr 1fr"],[style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],[style*="grid-template-columns: 1fr 1.2fr"],[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 32px !important; align-items: start !important;
  }
}
@media (max-width: 640px) {
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; }
}

@media (max-width: 860px) { .ai-contact-inner { grid-template-columns: 1fr !important; gap: 40px !important; align-items: start !important; } }
@media (max-width: 640px) { #contact > div > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } }

@media (max-width: 860px) {
  .svc-teaser-head { grid-template-columns: 1fr !important; gap: 20px !important; }
  .page-hero-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

@media (max-width: 540px) {
  .ai-case-grid,[style*="minmax(360px"],[style*="minmax(280px"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px) {
  .ai-filter-row,.svc-scope-tabs,.ai-pill-group {
    display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important;
    overflow-x: auto !important; overflow-y: hidden !important; gap: 8px !important;
    padding: 2px 0 10px !important; margin: 0 !important; background: transparent !important;
    border-radius: 0 !important; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .ai-filter-row::-webkit-scrollbar,.svc-scope-tabs::-webkit-scrollbar,.ai-pill-group::-webkit-scrollbar { display: none; }
  .ai-filter-row > button,.svc-scope-tabs > button,.ai-pill-group > button {
    flex: 0 0 auto !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important;
    background: #fff !important; color: #0a0a0a !important; border: 1px solid #d2d2d7 !important;
    border-radius: 999px !important; padding: 10px 16px !important; min-height: 40px !important;
    font-size: 13px !important; scroll-snap-align: start;
  }
  .ai-filter-row > button[aria-pressed="true"],.svc-scope-tabs > button[aria-pressed="true"],.ai-pill-group > button[aria-pressed="true"] {
    background: #7A212E !important; color: #fff !important; border-color: #7A212E !important;
  }
}

@media (max-width: 860px) {
  .ai-featured-insight { grid-template-columns: 1fr !important; gap: 28px !important; align-items: start !important; }
}
@media (max-width: 860px) { .ai-insights-teaser-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } }
@media (max-width: 540px) { .ai-insights-teaser-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }
@media (max-width: 420px) { .ai-insights-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }

@media (max-width: 720px) {
  .ai-team-card { grid-template-columns: 1fr !important; }
  .ai-team-card > div:last-child { padding: 0 24px 28px !important; }
}

@media (max-width: 1024px) {
  .ai-org-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px 16px !important; justify-items: center !important; align-items: center !important; }
  .ai-org-logo { height: 56px !important; max-width: 100% !important; width: auto !important; }
}
@media (max-width: 460px) { .ai-org-row { gap: 20px 12px !important; } .ai-org-logo { height: 44px !important; } }

@media (max-width: 860px) { .ai-orgs-header { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 40px !important; } }

@media (max-width: 640px) {
  .ai-contact-form { flex-direction: column !important; max-width: 100% !important; align-items: stretch !important; gap: 10px !important; }
  .ai-contact-form input,.ai-contact-form button { width: 100% !important; max-width: 100% !important; border-radius: 16px !important; min-height: 52px !important; font-size: 15px !important; }
}

@media (max-width: 1024px) { button,.ai-tap { min-height: 48px; } }

@media (max-width: 640px) {
  .ai-compro-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; border-radius: 20px !important; }
  .ai-compro-tabs > button { flex: none !important; white-space: normal !important; line-height: 1.2 !important; padding: 10px 6px !important; min-height: 48px !important; font-size: 12px !important; }
}

/* Insights stream filter reuses .ai-compro-tabs but has 4 items, not 6 —
   the shared 3-column grid leaves the 4th ("Article"/Perspective) orphaned
   alone on its own row. Override to 2 columns just for this instance. */
@media (max-width: 640px) {
  .ai-insights-tabs { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Contact page office address: line 1 is forced to one line (intentional —
   it fits the wide desktop card), but on a narrow mobile card it overflows
   past the card edge instead of wrapping. Let it wrap on phones only. */
@media (max-width: 640px) {
  .contact-addr-line1 { white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
}

@media (max-width: 860px) { .alta-mscard { text-align: left !important; max-width: 100% !important; display: block !important; } }

@media (max-width: 640px) {
  .ai-social-row { flex-wrap: nowrap !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; max-width: 320px !important; }
  .ai-social-row > a { flex: 0 0 auto !important; width: 48px !important; height: 48px !important; }
}

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