/* ═══════════════════════════════════════════════════════════
   AMSA DIGITAL — RESPONSIVE LAYER
   v1.1.0

   Loaded LAST on every page, after each page's inline <style>
   block, so it wins on equal specificity without needing
   !important. Nothing here changes the desktop design: every
   rule is inside a max-width media query or an explicitly
   mobile-only feature query.

   Breakpoint ladder
     <= 1024px  tablet landscape and below  (nav becomes a menu)
     <=  900px  tablet portrait
     <=  768px  large phone / small tablet
     <=  600px  phone
     <=  400px  small phone
     landscape phones handled separately by height
   ═══════════════════════════════════════════════════════════ */

/* ── 0. GLOBAL BASELINE ────────────────────────────────────
   Stops iOS inflating text in landscape, stops long words
   (URLs, compound headings) pushing the layout sideways. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
h1, h2, h3, h4, blockquote, .hero-headline, .section-title {
  overflow-wrap: break-word;
}
img, video, iframe { max-width: 100%; }

/* Per-page desktop column counts that used to live in inline
   style attributes on the element. Inline styles beat every
   media query, which is why those grids never stacked. Moved
   here as classes so the breakpoints below can override them. */
.team-grid--2up { grid-template-columns: repeat(2, 1fr); }
.evgrid--3up { grid-template-columns: repeat(3, 1fr); }

/* Hamburger icon: the script toggles .active, the original CSS
   only styled .open, so the bars never formed an X. */
.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── 1. HERO HEIGHT ON MOBILE BROWSERS ─────────────────────
   100vh on iOS/Android measures the viewport WITHOUT the
   address bar, so the hero ran taller than the screen and the
   CTA sat below the fold until the user scrolled. svh is the
   small-viewport unit: always the visible height. */
@media (max-width: 1024px) {
  .hero-section,
  .hero-slider-section {
    height: 100vh;
    min-height: 540px;
  }
  .hero-slide { height: 100vh; min-height: 540px; }
}
@supports (height: 100svh) {
  @media (max-width: 1024px) {
    .hero-section,
    .hero-slider-section,
    .hero-slide {
      height: 100svh;
      min-height: 540px;
    }
    .page-hero { min-height: 46svh; }
  }
}

/* ── 2. TABLET AND BELOW (<= 1024px) ──────────────────────── */
@media (max-width: 1024px) {

  /* 2.1 Navigation
     Between 769px and 1023px the desktop menu was still on, and
     at 820px (iPad portrait) the logo and the first menu item
     were touching with zero gap. Tablets get the menu panel. */
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(250, 248, 244, 0.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 14px 18px 20px;
    border-bottom: 1px solid var(--am-border);
    gap: 2px;
    z-index: 999;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { display: flex; }
  .nav-toggle {
    display: flex;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    margin-right: -8px;
  }
  .nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    font-size: 0.95rem;
    color: var(--am-char);
    letter-spacing: 0;
  }
  .nav-link.active { background: var(--am-linen); }
  .nav-link-cta {
    margin-left: 0;
    margin-top: 10px;
    justify-content: center;
    font-size: 0.78rem;
    padding: 15px 22px;
  }
  /* While the panel is open the bar must be light whatever the
     scroll position, or the icon and logo vanish into the hero. */
  .navbar:has(.nav-links.open) {
    background: rgba(250, 248, 244, 0.98);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 var(--am-border);
  }
  .navbar:has(.nav-links.open) .nav-logo { color: var(--am-char); }
  .navbar:has(.nav-links.open) .nav-toggle span { background: var(--am-char); }

  /* 2.2 Touch targets. Links and buttons were 15px to 30px tall. */
  .nav-logo { min-height: 44px; }
  .am-btn, .hero-cta, .hero-slide-cta { min-height: 48px; }
  .subnav a { padding: 15px 14px; }
  .read-more, .article-back { padding: 10px 0; }
  .footer ul a { display: inline-block; padding: 10px 0; }
  .footer ul { gap: 2px; }
  .footer-bottom span { padding: 4px 0; }
  .team-name a { display: inline-block; padding: 8px 0; }

  /* 2.3 Form fields.
     Anything under 16px makes iOS Safari zoom the whole page in
     on focus and leave it zoomed. */
  .form input, .form select, .form textarea {
    font-size: 16px;
    padding: 15px 16px;
  }

  /* 2.4 Grids that were still running at desktop column counts */
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .evgrid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* 2.5 Process timeline: five steps side by side left each one
     about 150px wide on an iPad. Two rows instead, and the
     connector rule has to go since it only spans one row. */
  .process-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
  }
  .process-steps::before { display: none; }
  .step { padding-right: 0; }

  /* 2.6 The Amsa Standard: 110px + 1fr + 1.4fr squeezed the
     heading column to about 280px. Number beside the heading,
     body text underneath. */
  .std-item {
    grid-template-columns: 64px 1fr;
    gap: 14px 24px;
  }
  .std-item p { grid-column: 2; }

  /* 2.7 Horizontal card rail: align the first card with the
     section heading above it and snap cards into place. */
  .who-scroll {
    padding-left: 5vw;
    padding-right: 5vw;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5vw;
  }
  .who-card { scroll-snap-align: start; }

  .subnav-inner { -webkit-overflow-scrolling: touch; }
}

/* ── 3. TABLET PORTRAIT (<= 900px) ────────────────────────── */
@media (max-width: 900px) {
  /* Two dense checklists side by side left roughly 300px of
     readable width each once the 5vw padding was taken off. */
  .probsol-inner { grid-template-columns: 1fr; }
  .sol { border-left: none; border-top: 3px solid var(--am-gold); }

  .section-title { font-size: clamp(1.6rem, 4.4vw, 2.4rem); }
  .page-hero-body h1 { font-size: clamp(1.9rem, 5.6vw, 3rem); }
}

/* ── 4. LARGE PHONE / SMALL TABLET (<= 768px) ─────────────── */
@media (max-width: 768px) {
  .card-grid, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .off-grid { grid-template-columns: 1fr; }

  /* Footer: brand block and contact block full width, the two
     short link lists share a row, so the footer stays compact. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child { grid-column: 1 / -1; }

  /* Services rows: the 5vw gutters plus a 90px number column
     left very little room for the service name. */
  .svc-n { padding: 22px 0 22px 20px; min-width: 46px; font-size: 0.7rem; }
  .svc-label { padding: 22px 12px; }
  .svc-arr { padding: 22px 20px 22px 0; }
  .svc-detail { padding: 0 20px 28px 46px; }
  .svc-cta { padding: 24px 20px; margin-left: 20px; margin-right: 20px; }

  .why-img { min-height: 320px; }
  .why-stat-card {
    left: 20px; right: 20px; bottom: 20px;
    max-width: none;
    padding: 20px;
  }
  .why-stat-card p { font-size: 0.86rem; }

  .sticky-cta { display: block; }
  .scroll-indicator { display: none; }
}

/* ── 5. PHONE (<= 600px) ──────────────────────────────────── */
@media (max-width: 600px) {

  /* 5.1 Type.
     The fluid floors were set for desktop: the hero headline
     could not go below 38px and inner-page H1s below 35px, so
     headings ran to seven and eight lines and touched both
     gutters. Lower floors, viewport-relative middles. */
  .hero-headline,
  .hero-slide-headline { font-size: clamp(1.85rem, 8.2vw, 3.2rem); }
  .hero-sub, .hero-slide-sub { font-size: 1rem; margin-bottom: 28px; }
  .page-hero-body h1 { font-size: clamp(1.6rem, 7.2vw, 2.4rem); }
  .page-hero-body p { font-size: 0.95rem; }
  .section-title { font-size: clamp(1.45rem, 6.4vw, 2rem); }
  .prob h2, .sol h2,
  .why-body h2, .cta-text h2 { font-size: clamp(1.4rem, 6.2vw, 1.9rem); }
  .quote-inner blockquote { font-size: clamp(1.05rem, 4.8vw, 1.4rem); }
  .quote-mark { font-size: 4rem; }
  .who-card-ghost { font-size: 3.6rem; }
  .off-num { font-size: clamp(2rem, 9vw, 2.8rem); }

  /* 5.2 Consistent 20px gutters for the hero copy, matching the
     rest of the page instead of a 90% width. */
  .hero-overlay--intro,
  .hero-slide-content,
  .hero-intro-overlay {
    width: auto;
    left: 20px;
    right: 20px;
    transform: none;
  }
  .hero-overlay--intro.visible { transform: none; }
  .hero-overlay--intro { bottom: clamp(48px, 9vh, 90px); }

  /* 5.3 One column everywhere that still had two. */
  .pillars-grid { grid-template-columns: 1fr; }
  .evgrid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 28px; }
  .why-pts { grid-template-columns: 1fr; }

  /* 5.4 The stat card covered most of the photo on a phone.
     Image on top, card underneath, still inside the same block. */
  .why-img {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 230px;
  }
  .why-stat-card {
    position: static;
    left: auto; right: auto; bottom: auto;
    max-width: none;
    border-left: none; border-right: none; border-bottom: none;
  }

  /* 5.5 Section rhythm: desktop padding wastes a lot of a
     phone screen without adding clarity. */
  .section { padding-top: clamp(56px, 11vw, 80px); padding-bottom: clamp(56px, 11vw, 80px); }
  .pillars, .who, .process, .insights, .cta-sec, .std { padding-top: 56px; padding-bottom: 56px; }
  .quote-sec { padding-top: 64px; padding-bottom: 64px; }
  .section-header { margin-bottom: 32px; }
  .process-head, .ins-head, .std-head { margin-bottom: 36px; }

  .std-item { grid-template-columns: 48px 1fr; gap: 10px 16px; padding: 26px 0; }
  .std-n { font-size: 1.9rem; }

  .minicta, .svc-cta { padding: 22px 18px; }
  .svc-cta strong, .minicta strong { font-size: 1rem; }

  .cta-details dd { font-size: 0.88rem; word-break: break-word; }
  .footer-bottom { justify-content: flex-start; gap: 8px; }
}

/* ── 6. SMALL PHONE (<= 400px) ────────────────────────────── */
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-headline, .hero-slide-headline { font-size: clamp(1.7rem, 8.4vw, 2.3rem); }
  .page-hero-body h1 { font-size: clamp(1.5rem, 7.6vw, 2rem); }
  .am-btn, .hero-cta, .hero-slide-cta {
    padding-left: 22px; padding-right: 22px;
    font-size: 0.7rem; letter-spacing: 0.12em;
    white-space: normal; text-align: center;
  }
  .who-card { flex-basis: 84vw; }
}

/* ── 7. PHONES IN LANDSCAPE ─────────────────────────────────
   A full-height hero on a 390px-tall landscape screen leaves no
   room for the headline, sub and button at once. Let it grow to
   the height of its own content instead. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-section,
  .hero-slider-section,
  .hero-slide {
    height: auto;
    min-height: 0;
    padding: 110px 0 56px;
  }
  .hero-overlay--intro,
  .hero-intro-overlay,
  .hero-slide-content {
    position: relative;
    bottom: auto; left: auto; right: auto;
    transform: none;
    margin: 0 auto;
    padding: 0 5vw;
    width: 100%;
  }
  .hero-overlay--intro.visible { transform: none; }
  .hero-headline, .hero-slide-headline { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .hero-sub, .hero-slide-sub { margin-bottom: 22px; }
  .nav-links { max-height: calc(100vh - 72px); }
  .page-hero { min-height: 0; padding-bottom: 8px; }
}

/* ── 8. MOTION ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  .scroll-line { animation: none; }
  html { scroll-behavior: auto; }
}