/* =========================================================================
   PHASE 4A — MOBILE EXPERIENCE PASS
   AI Solutions + AI Products + all solution/product detail templates.

   This file is mobile-only. Every rule lives under @media (max-width: 767px).
   Desktop layout, cinematic widgets, and multi-column grids are untouched.

   Naming:
   - hero classes targeted: .aisol-hero, .pp-hero, .aa-hero, .au-hero, .vc-hero,
     .asv-hero, .inf-hero, .cmp-hero, .ro-hero-cine, .prod-hero (and the older
     .inf-hero usages reused by CV, LLM, Dat, Apt, Cap, Cloud).
   - section-nav classes (added by mobile-section-nav.js): .bgmn-rail, .bgmn-chip
   - "expand technical view" classes (added by mobile-section-nav.js):
     [data-bgmn-expand], .bgmn-expand-btn
   ========================================================================= */

@media (max-width: 767px) {

  /* -----------------------------------------------------------------------
     1. HERO COMPRESSION
     Goal: visible CTA above the fold (~ 6–700 px), no huge empty cinematic
     space, premium dark look preserved.
     ----------------------------------------------------------------------- */

  /* Generic hero reset — every product/solution/industry/vertical hero in scope.
     Phase 4A: AI Solutions/Products families.
     Phase 4B: Industries, Blockchain, Stablecoin, Aviation, Traceability,
     vertical product/detail pages, and their cinematic shell pages.
     Phase 4C: Homepage rotator + Company/Contact/Gallery/Legal heroes. */
  .aisol-hero,
  .pp-hero,
  .aa-hero,
  .au-hero,
  .vc-hero,
  .asv-hero,
  .inf-hero,
  .cmp-hero,
  .ro-hero-cine,
  .prod-hero,
  /* Phase 4B additions — vertical product/identity/wallet/marketplace */
  .ssi-hero,
  .bc-hero,
  .pb-hero,
  .rt-hero,
  .io-hero,
  .lw-hero,
  .dtp-hero,
  .dw-hero,
  .gem-hero,
  .esg-hero,
  .nf-hero,
  .dfc-hero,
  .cx-hero,
  .tg-hero,
  .wc-hero,
  /* Aviation + Stablecoin + Traceability cinematic heroes */
  .av-hero,
  .av-c-hero,
  .av-s-hero,
  .st-hero,
  .st-c-hero,
  .st-s-hero,
  .tri-hero,
  /* Industry templates */
  .ind-hero,
  .ihc-hero,
  .ni-hero,
  .rh-hero,
  .psec-hero,
  .tc-hero,
  .tc-deep-hero,
  .fin-hero,
  .fc-hero,
  .hc-hero,
  .sc-hero,
  /* Phase 4C — Homepage rotating hero + Company/Contact/Gallery/Legal */
  .oth,
  .ct-hero,
  .gal-hero,
  .legal-hero {
    min-height: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    overflow: hidden;
  }

  /* H1 sizing — let the heroes breathe but cap the cinematic font */
  .aisol-hero h1,
  .pp-hero-left h1, .pp-hero h1,
  .aa-hero h1, .aa-hero .aa-hero-h,
  .au-hero h1, .au-hero .au-hero-h,
  .vc-hero h1, .vc-hero .vc-hero-h,
  .asv-hero h1, .asv-hero .inf-hero-h,
  .inf-hero h1, .inf-hero .inf-hero-h,
  .cmp-hero h1,
  .ro-hero-cine h1, .ro-hero-cine .ro-hero-h,
  .prod-hero h1,
  /* Phase 4B */
  .ssi-hero h1, .ssi-hero .ssi-hero-h,
  .bc-hero h1, .bc-hero .bc-hero-h,
  .pb-hero h1, .pb-hero .pb-hero-h,
  .rt-hero h1, .rt-hero .rt-hero-h,
  .io-hero h1, .io-hero .io-hero-h,
  .lw-hero h1, .lw-hero .lw-hero-h,
  .dtp-hero h1, .dtp-hero .dtp-hero-h,
  .dw-hero h1, .dw-hero .dw-hero-h,
  .gem-hero h1, .gem-hero .gem-hero-h,
  .esg-hero h1, .esg-hero .esg-hero-h,
  .nf-hero h1,
  .dfc-hero h1,
  .cx-hero h1,
  .tg-hero h1,
  .wc-hero h1,
  .av-hero h1, .av-c-hero h1, .av-s-hero h1,
  .st-hero h1, .st-c-hero h1, .st-s-hero h1,
  .tri-hero h1, .tri-hero .tri-h1,
  .ind-hero h1, .ihc-hero h1, .ni-hero h1, .rh-hero h1,
  .psec-hero h1, .psec-hero .psec-hero-h,
  .tc-hero h1, .tc-deep-hero h1, .tc-deep-h1,
  .fin-hero h1, .fin-hero .fin-hero-h,
  .fc-hero h1, .fc-hero .fc-hero-h,
  .hc-hero h1, .hc-hero .hc-hero-h,
  .sc-hero h1, .sc-hero .sc-hero-h,
  /* Phase 4C — Homepage rotator + Contact + Gallery + Legal */
  .oth-h1, .oth h1,
  .ct-hero h1, .ct-hero-title,
  .gal-hero h1, .gal-hero-h,
  .legal-hero h1, .legal-title {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin-bottom: 14px !important;
  }

  /* Hero subheads — short on mobile via line-clamp; full text remains for SEO */
  .aisol-hero-sub,
  .pp-hero-lede,
  .aa-hero-sub,
  .au-hero-sub,
  .vc-hero-sub,
  .inf-hero-sub,
  .asv-hero .inf-hero-sub,
  .ro-hero-cine .ro-hero-sub,
  .prod-hero-sub,
  /* Phase 4B subheads + lede classes */
  .ssi-hero-sub,
  .bc-hero-sub,
  .pb-hero-sub,
  .rt-hero-sub,
  .io-hero-sub,
  .lw-hero-sub,
  .dtp-hero-sub,
  .dw-hero-sub,
  .gem-hero-sub, .gem-hero-lede,
  .esg-hero-sub,
  .nf-hero-sub,
  .dfc-hero-sub,
  .cx-hero-sub,
  .tg-hero-sub,
  .wc-hero-sub,
  .av-hero-sub, .av-c-hero-sub, .av-s-hero-sub, .av-c-sub, .av-s-sub,
  .st-hero-sub, .st-c-hero-sub, .st-s-hero-sub, .st-c-sub, .st-s-sub,
  .tri-hero-sub, .tri-sub,
  .ind-hero-sub,
  .ihc-hero-sub,
  .ni-hero-sub,
  .rh-hero-sub,
  .psec-hero-sub,
  .tc-hero-sub, .tc-sub,
  .fin-hero-sub, .fin-sub,
  .fc-hero-sub, .fc-sub,
  .hc-hero-sub, .hc-sub,
  .sc-hero-sub, .sc-sub,
  /* Phase 4C subheads */
  .gal-hero-sub,
  .ct-hero-sub,
  .legal-intro {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
  }

  /* CTA rows — stack vertically, full-width primary, tappable */
  .aisol-hero-ctas,
  .pp-hero-ctas,
  .aa-hero-ctas,
  .au-hero-ctas,
  .vc-hero-ctas,
  .inf-hero-ctas,
  .ro-hero-cine .ro-hero-ctas,
  .prod-hero-cta,
  /* Phase 4B */
  .ssi-hero-ctas,
  .bc-hero-ctas,
  .pb-hero-ctas,
  .rt-hero-ctas,
  .io-hero-ctas,
  .lw-hero-ctas,
  .dtp-hero-ctas,
  .dw-hero-ctas,
  .gem-hero-ctas,
  .esg-hero-ctas,
  .nf-hero-ctas,
  .dfc-hero-ctas,
  .cx-hero-ctas,
  .tg-hero-ctas,
  .wc-hero-ctas,
  .av-hero-ctas, .av-c-hero-ctas, .av-s-hero-ctas,
  .st-hero-ctas, .st-c-hero-ctas, .st-s-hero-ctas,
  .tri-hero-ctas,
  .ind-hero-ctas, .ihc-hero-ctas, .ni-hero-ctas, .rh-hero-ctas,
  .psec-hero-ctas,
  .tc-hero-ctas, .tc-deep-hero-ctas,
  .fin-hero-ctas, .fc-hero-ctas,
  .hc-hero-ctas, .sc-hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .aisol-hero-ctas > *,
  .pp-hero-ctas > *,
  .aa-hero-ctas > *,
  .au-hero-ctas > *,
  .vc-hero-ctas > *,
  .inf-hero-ctas > *,
  .ro-hero-cine .ro-hero-ctas > *,
  .prod-hero-cta > *,
  .ssi-hero-ctas > *,
  .bc-hero-ctas > *,
  .pb-hero-ctas > *,
  .rt-hero-ctas > *,
  .io-hero-ctas > *,
  .lw-hero-ctas > *,
  .dtp-hero-ctas > *,
  .dw-hero-ctas > *,
  .gem-hero-ctas > *,
  .esg-hero-ctas > *,
  .nf-hero-ctas > *,
  .dfc-hero-ctas > *,
  .cx-hero-ctas > *,
  .tg-hero-ctas > *,
  .wc-hero-ctas > *,
  .av-hero-ctas > *, .av-c-hero-ctas > *, .av-s-hero-ctas > *,
  .st-hero-ctas > *, .st-c-hero-ctas > *, .st-s-hero-ctas > *,
  .tri-hero-ctas > *,
  .ind-hero-ctas > *, .ihc-hero-ctas > *, .ni-hero-ctas > *, .rh-hero-ctas > *,
  .psec-hero-ctas > *,
  .tc-hero-ctas > *, .tc-deep-hero-ctas > *,
  .fin-hero-ctas > *, .fc-hero-ctas > *,
  .hc-hero-ctas > *, .sc-hero-ctas > * {
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
  /* Primary CTA gets full width row on its own, then secondaries share next row */
  .aisol-hero-ctas .aisol-btn-primary,
  .pp-hero-ctas .btn-primary,
  .aa-hero-ctas .btn-primary,
  .au-hero-ctas .btn-primary,
  .vc-hero-ctas .btn-primary,
  .inf-hero-ctas .btn-cta.primary,
  .inf-hero-ctas .btn-cta:first-child,
  .ro-hero-cine .ro-hero-ctas .btn-primary,
  .prod-hero-cta .btn-mint,
  .prod-hero-cta .btn-primary,
  .ssi-hero-ctas .btn-primary,
  .bc-hero-ctas .btn-primary,
  .pb-hero-ctas .btn-primary,
  .rt-hero-ctas .btn-primary,
  .io-hero-ctas .btn-primary,
  .lw-hero-ctas .btn-primary,
  .dtp-hero-ctas .btn-primary,
  .dw-hero-ctas .btn-primary,
  .gem-hero-ctas .btn-primary,
  .esg-hero-ctas .btn-primary,
  .nf-hero-ctas .btn-primary,
  .dfc-hero-ctas .btn-primary,
  .cx-hero-ctas .btn-primary,
  .tg-hero-ctas .btn-primary,
  .wc-hero-ctas .btn-primary,
  .av-hero-ctas .btn-primary, .av-c-hero-ctas .btn-primary, .av-s-hero-ctas .btn-primary,
  .st-hero-ctas .btn-primary, .st-c-hero-ctas .btn-primary, .st-s-hero-ctas .btn-primary,
  .tri-hero-ctas .btn-primary,
  .ind-hero-ctas .btn-primary,
  .psec-hero-ctas .btn-primary, .psec-hero-ctas .psec-cta.primary,
  .tc-hero-ctas .btn-primary, .tc-deep-hero-ctas .btn-primary,
  .fin-hero-ctas .btn-primary, .fc-hero-ctas .btn-primary,
  .hc-hero-ctas .btn-primary, .sc-hero-ctas .btn-primary {
    flex: 1 1 100% !important;
    min-height: 50px !important;
    font-size: 14px !important;
  }
  /* Tertiary CTAs (3rd button in some hero CTA rows) — shrink to a ghost link */
  .inf-hero-ctas > .btn-cta.ghost:nth-child(3),
  .prod-hero-cta > .btn-ghost:nth-child(n+3) {
    background: transparent !important;
    border: 0 !important;
    text-decoration: underline;
    text-decoration-color: rgba(79, 200, 255, 0.35);
    text-underline-offset: 4px;
    min-height: 40px !important;
    padding: 0 6px !important;
  }

  /* Hero side console / dashboard / cinematic graphic — keep but bound height,
     hide overflow, and let it sit *below* the H1/CTA pair so users see the
     CTA above the fold. */
  .pp-hero-grid2,
  .inf-hero-grid-2,
  .aa-hero-grid,
  .au-hero-grid,
  .vc-hero-grid:not(.vc-hero-grid-bg),
  .asv-hero .inf-hero-grid-2,
  .ro-hero-cine .container,
  .prod-hero-grid,
  /* Phase 4B side panels */
  .ssi-hero-grid2,
  .bc-hero-grid2,
  .pb-hero-grid2,
  .rt-hero-grid2,
  .io-hero-grid2,
  .lw-hero-grid2,
  .dtp-hero-grid2,
  .dw-hero-grid2,
  .gem-hero-grid2, .gem-hero-grid,
  .esg-hero-grid2,
  .nf-hero-grid2,
  .dfc-hero-inner,
  .cx-hero-grid2,
  .tg-hero-grid2,
  .wc-hero-grid2,
  .av-hero-grid2, .av-c-hero-grid, .av-s-hero-grid,
  .st-hero-grid2, .st-c-hero-grid, .st-s-hero-grid,
  .tri-hero-grid,
  .ind-hero-grid, .ihc-hero-grid, .ni-hero-grid, .rh-hero-grid,
  .psec-hero-grid2,
  .tc-hero-grid2, .tc-deep-hero-inner,
  .fin-hero-grid2, .fc-hero-grid2,
  .hc-hero-grid2, .sc-hero-grid2 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* The side panel — console / dashboard / animation — comes last on mobile */
  .pp-hero-grid2 > :nth-child(2),
  .inf-hero-grid-2 > :nth-child(2),
  .asv-hero .inf-hero-grid-2 > :nth-child(2),
  .inf-cmd,
  .asv-console,
  .vc-hv-grid,
  .aa-hv-grid,
  .au-hv-grid,
  /* Phase 4B side mockups */
  .bc-hv-grid,
  .pb-hero-mock,
  .rt-hero-mock,
  .io-hero-mock,
  .lw-cmd, .lw-cmd-map,
  .dtp-hero-mock,
  .dw-hero-mock,
  .gem-hero-mock,
  .esg-hero-mock,
  .nf-hero-mock,
  .dfc-hero-mock,
  .cx-hero-mock,
  .tg-hero-mock,
  .wc-hero-mock,
  .av-hero-mock, .av-c-hero-mock, .av-s-hero-mock,
  .st-hero-mock, .st-c-hero-mock, .st-s-hero-mock,
  .tri-hero-mock,
  .ind-hero-stack, .ihc-stage, .ni-hero-stack, .rh-hero-stack,
  .psec-hero-mock,
  .tc-hero-mock, .tc-deep-img,
  .fin-hero-mock, .fc-hero-mock,
  .hc-hero-mock, .sc-hero-mock {
    order: 2 !important;
    max-height: 320px !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
  }

  /* Hero stat strips — tighten to 2-column on the smallest phones */
  .aisol-hero-stats,
  .pp-hero-stats,
  .aa-hero-stats,
  .au-hero-stats,
  .vc-hero-stats,
  .inf-hero-stats,
  .prod-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 14px !important;
    margin-top: 14px !important;
  }
  .aisol-hero-stats .num,
  .pp-stat-num,
  .aa-hero-stats .num,
  .au-hero-stats .num,
  .inf-hero-stats .num {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .aisol-hero-stats .lab,
  .pp-stat-lab,
  .aa-hero-stats .lab,
  .au-hero-stats .lab,
  .inf-hero-stats .lab {
    font-size: 10.5px !important;
    letter-spacing: 0.14em;
  }

  /* Hero badges row — wrap, tighter type */
  .inf-hero-badges,
  .aa-hero-badges,
  .au-hero-badges,
  .asv-hero .inf-hero-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }
  .inf-badge,
  .inf-hero-badges .inf-badge,
  .aa-hero-badges .inf-badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Subdue hero decorative orbs/glows — keep premium feel, less GPU thrash */
  .aisol-hero-orb,
  .aa-hero-glow,
  .au-hero-glow,
  .inf-hero-glow,
  .asv-hero-glow,
  .vc-hero-glow,
  .ro-hero-cine-glow,
  /* Phase 4B glows */
  .ssi-hero-glow,
  .bc-hero-glow,
  .pb-hero-glow,
  .rt-hero-glow,
  .io-hero-glow,
  .lw-hero-glow,
  .dtp-hero-glow,
  .dw-hero-glow,
  .gem-hero-orb,
  .esg-hero-glow,
  .av-hero-glow,
  .st-hero-glow,
  .tri-hero-glow,
  .ihc-hero-glow,
  .psec-hero-glow,
  .tc-hero-glow,
  .fin-hero-glow, .fc-hero-glow,
  .hc-hero-glow, .sc-hero-glow {
    opacity: 0.4 !important;
    transform: scale(0.7) !important;
  }
  .aa-hero-grid:not(.aa-hero-grid-2),
  .au-hero-grid:not(.au-hero-grid-2),
  .inf-hero-grid:not(.inf-hero-grid-2),
  .asv-hero-grid:not(.asv-hero-grid-2),
  .vc-hero-grid:not(.vc-hero-grid-2),
  .ro-hero-cine-grid,
  /* Phase 4B grid overlays */
  .ssi-hero-grid,
  .bc-hero-grid,
  .pb-hero-grid,
  .rt-hero-grid,
  .io-hero-grid,
  .lw-hero-grid,
  .dtp-hero-grid,
  .dw-hero-grid,
  .esg-hero-grid,
  .av-hero-grid,
  .st-hero-grid,
  .tri-grid-bg,
  .psec-hero-grid,
  .tc-hero-grid-overlay,
  .fc-hero-grid {
    opacity: 0.35 !important;
  }

  /* Hero tag / breadcrumb row — slightly smaller */
  .inf-hero-tag,
  .aa-hero-tag,
  .au-hero-tag,
  .vc-hero-tag,
  .pp-hero-tag {
    font-size: 10px !important;
    letter-spacing: 0.12em;
    margin-bottom: 12px !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }

  /* -----------------------------------------------------------------------
     2. SECTION NAV CHIPS (mobile-section-nav.js mounts these)
     ----------------------------------------------------------------------- */

  .bgmn-rail-wrap {
    position: sticky;
    top: 56px; /* under nav */
    z-index: 60;
    background: linear-gradient(180deg,
      rgba(4, 7, 15, 0.92) 0,
      rgba(4, 7, 15, 0.92) 70%,
      rgba(4, 7, 15, 0.85) 100%);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 0;
  }
  .bgmn-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 20px;
    /* Edge fade */
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .bgmn-rail::-webkit-scrollbar { display: none; }
  .bgmn-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    min-height: 36px;
    padding: 0 13px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: var(--site-text-2, rgba(236, 240, 250, 0.78));
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
  }
  .bgmn-chip:hover,
  .bgmn-chip:focus-visible {
    color: #fff;
    border-color: rgba(79, 200, 255, 0.4);
    outline: none;
  }
  .bgmn-chip.bgmn-chip-active {
    color: #04060F;
    background: var(--site-cyan, #4FC8FF);
    border-color: var(--site-cyan, #4FC8FF);
  }
  .bgmn-chip:focus-visible {
    outline: 2px solid var(--site-cyan, #4FC8FF);
    outline-offset: 2px;
  }

  /* -----------------------------------------------------------------------
     3. TECHNICAL / CINEMATIC SECTION TREATMENT
     Default: tall console / dashboard / diagram mocks get a max-height +
     "Expand technical view" affordance applied by mobile-section-nav.js.
     ----------------------------------------------------------------------- */

  /* Architecture / console / dashboard mockups in product pages */
  .inf-cmd,
  .inf-cmd-grid,
  .inf-cmd-tools,
  .asv-console,
  .asv-cam-grid-2x2,
  .vc-hv-grid,
  .aa-hv-grid,
  .au-hv-grid,
  .prod-hero-mock,
  .dat-cmd-grid,
  .llm-cmd-grid,
  .ro-vision-feed,
  .lw-cmd-map,
  .lw-cmd-route {
    max-width: 100% !important;
  }

  /* Comparison panels — desktop is 2-col side-by-side; on mobile stack and
     give each a slightly muted look so the contrast still reads */
  .inf-cmp-grid,
  .aa-cmp-grid,
  .au-cmp-grid,
  .cap-cmp-grid,
  .vc-cmp-grid,
  .llm-cmp-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .inf-cmp-list,
  .aa-cmp-list,
  .au-cmp-list,
  .cap-cmp-list {
    font-size: 13.5px !important;
  }

  /* Process flow / step rows — convert horizontal flow strips into
     horizontal scroll on mobile so the visual rhythm is preserved */
  .tc-flow,
  .au-flow,
  .aa-flow,
  .inf-flow,
  .llm-flow,
  .dat-flow,
  .av-s-flow-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding: 4px 20px 12px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .tc-flow::-webkit-scrollbar,
  .au-flow::-webkit-scrollbar,
  .aa-flow::-webkit-scrollbar,
  .inf-flow::-webkit-scrollbar,
  .llm-flow::-webkit-scrollbar,
  .dat-flow::-webkit-scrollbar { display: none; }
  .tc-flow-step,
  .au-flow-step,
  .aa-flow-step,
  .inf-flow-step {
    flex: 0 0 64% !important;
    scroll-snap-align: start;
  }
  .tc-flow-arrow,
  .au-flow-arrow,
  .aa-flow-arrow,
  .inf-flow-arrow {
    flex: 0 0 auto !important;
    align-self: center;
  }

  /* Builder / try-it widgets — long forms on mobile become a single column */
  .inf-builder-grid,
  .llm-builder-grid,
  .dat-builder-grid,
  .vc-builder-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Industry/sector grids in solutions/products that are NOT capped (already
     compact lists) — keep them readable */
  .inf-ind-grid,
  .llm-ind-grid,
  .dat-ind-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .inf-ind-list,
  .llm-ind-list,
  .dat-ind-list {
    font-size: 13px !important;
    line-height: 1.55;
  }

  /* "Expand technical view" affordance applied to opt-in tall blocks */
  [data-bgmn-expand="collapsed"] {
    position: relative;
    max-height: 360px !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
  }
  [data-bgmn-expand="expanded"] {
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .bgmn-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    min-height: 46px;
    padding: 0 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(79, 200, 255, 0.22);
    border-radius: 4px;
    color: #ECF0FA;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
  }
  .bgmn-expand-btn:hover,
  .bgmn-expand-btn:focus-visible {
    background: rgba(79, 200, 255, 0.08);
    border-color: rgba(79, 200, 255, 0.45);
    color: #fff;
    outline: none;
  }
  .bgmn-expand-btn:focus-visible {
    outline: 2px solid var(--site-cyan, #4FC8FF);
    outline-offset: 2px;
  }
  .bgmn-expand-arrow {
    width: 14px;
    height: 14px;
    transition: transform 220ms ease;
  }
  .bgmn-expand-btn[aria-expanded="true"] .bgmn-expand-arrow {
    transform: rotate(180deg);
  }

  /* -----------------------------------------------------------------------
     4. SECTION SPACING — compress big section paddings on mobile
     ----------------------------------------------------------------------- */

  /* Common section padding classes — every page in scope */
  .aa-section,
  .au-section,
  .vc-section,
  .inf-section,
  .asv-section,
  .cap-section,
  .apt-section,
  .llm-section,
  .dat-section,
  .cv-section,
  .pp-section,
  .ro-section,
  .prod-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .aa-section + .aa-section,
  .au-section + .au-section,
  .vc-section + .vc-section,
  .inf-section + .inf-section,
  .asv-section + .asv-section,
  .cap-section + .cap-section,
  .apt-section + .apt-section,
  .llm-section + .llm-section,
  .dat-section + .dat-section,
  .cv-section + .cv-section {
    padding-top: 20px !important;
  }

  /* Section headers — tighten margin */
  .aa-section-head,
  .au-section-head,
  .vc-section-head,
  .inf-section-head,
  .asv-section-head,
  .aisol-section-head,
  .cap-section-head,
  .apt-section-head,
  .llm-section-head,
  .dat-section-head,
  .prod-section-head {
    margin-bottom: 18px !important;
  }
  .aa-section-head h2,
  .au-section-head h2,
  .vc-section-head h2,
  .inf-section-head h2,
  .asv-section-head h2,
  .aisol-section-head h2,
  .cap-section-head h2,
  .apt-section-head h2,
  .llm-section-head h2,
  .dat-section-head h2,
  .prod-section-head h2,
  .aisol-hero-stats + section h2,
  .pp-section h2,
  .ro-section h2 {
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin-bottom: 10px !important;
  }
  .aa-section-head .kicker,
  .au-section-head .kicker,
  .vc-section-head .kicker,
  .inf-section-head .kicker,
  .cap-section-head .kicker,
  .apt-section-head .kicker,
  .llm-section-head .kicker,
  .dat-section-head .kicker,
  .kicker {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* AI Solutions hub specifics — sections were tall on mobile */
  .aisol-marquee { padding: 14px 0 !important; }
  .aisol-cinema { min-height: 280px !important; padding: 40px 0 !important; }
  .aisol-cinema h2 { font-size: 24px !important; }
  .aisol-stack { padding: 36px 0 !important; }
  .aisol-outcomes { padding: 36px 0 !important; }
  .aisol-industries { padding: 36px 0 !important; }
  .aisol-final { padding: 48px 0 !important; }
  .aisol-final h2 { font-size: 26px !important; }

  /* AI Products hub — pp-hero plus the toolbar */
  .pp-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .pp-toolbar .pp-search { width: 100% !important; }
  .pp-cat-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .pp-cat-head h2 { font-size: 22px !important; }

  /* -----------------------------------------------------------------------
     5. END-OF-PAGE CTA + FOOTER
     ----------------------------------------------------------------------- */

  /* Final CTAs are usually wide bordered blocks — compress padding + type */
  .inf-cta,
  .aa-cta,
  .au-cta,
  .vc-cta,
  .asv-cta,
  .cap-cta,
  .apt-cta,
  .llm-cta,
  .dat-cta,
  .prod-cta,
  .ro-final-cta {
    padding: 28px 20px !important;
  }
  .inf-cta-h,
  .aa-cta-h,
  .au-cta-h,
  .vc-cta-h,
  .asv-cta-h,
  .cap-cta-h,
  .apt-cta-h,
  .llm-cta-h,
  .dat-cta-h,
  .prod-cta-h {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  .inf-cta-ctas,
  .aa-cta-ctas,
  .au-cta-ctas,
  .vc-cta-ctas,
  .asv-cta-ctas,
  .cap-cta-ctas,
  .apt-cta-ctas,
  .llm-cta-ctas,
  .dat-cta-ctas,
  .prod-cta-ctas {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .inf-cta-ctas > *,
  .aa-cta-ctas > *,
  .au-cta-ctas > *,
  .vc-cta-ctas > *,
  .asv-cta-ctas > *,
  .cap-cta-ctas > *,
  .apt-cta-ctas > *,
  .llm-cta-ctas > *,
  .dat-cta-ctas > *,
  .prod-cta-ctas > * {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Sticky-CTA safety — page's last section gets bottom padding so the
     sticky bar never overlays the final CTA or footer */
  body.bgsc-has .inf-cta,
  body.bgsc-has .aa-cta,
  body.bgsc-has .au-cta,
  body.bgsc-has .vc-cta,
  body.bgsc-has .asv-cta,
  body.bgsc-has .cap-cta,
  body.bgsc-has .apt-cta,
  body.bgsc-has .llm-cta,
  body.bgsc-has .dat-cta,
  body.bgsc-has .prod-cta,
  body.bgsc-has .ro-final-cta,
  body.bgsc-has .aisol-final,
  body.bgsc-has .pp-final {
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* Universal overflow belt */
  .aisol-hero,
  .pp-hero,
  .aa-hero,
  .au-hero,
  .vc-hero,
  .asv-hero,
  .inf-hero,
  .cmp-hero,
  .ro-hero-cine,
  .prod-hero,
  .ssi-hero, .bc-hero, .pb-hero, .rt-hero, .io-hero, .lw-hero,
  .dtp-hero, .dw-hero, .gem-hero, .esg-hero, .nf-hero, .dfc-hero,
  .cx-hero, .tg-hero, .wc-hero,
  .av-hero, .av-c-hero, .av-s-hero,
  .st-hero, .st-c-hero, .st-s-hero,
  .tri-hero, .ind-hero, .ihc-hero, .ni-hero, .rh-hero,
  .psec-hero, .tc-hero, .tc-deep-hero,
  .fin-hero, .fc-hero, .hc-hero, .sc-hero,
  /* Phase 4C */
  .oth, .ct-hero, .gal-hero, .legal-hero {
    overflow-x: hidden;
  }

  /* =======================================================================
     PHASE 4C — Homepage rotating-hero (`.oth`)
     ======================================================================= */
  .oth .oth-slide-stack { min-height: 0 !important; }
  .oth-h1 {
    font-size: clamp(28px, 8.5vw, 38px) !important;
    line-height: 1.08 !important;
    margin-top: 14px !important;
  }
  .oth-sub,
  .oth .oth-slide-text p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* The cinematic right-side art (people grid) is already display:none below
     1100px via the existing .oth-stage-art rule — keep it hidden. */
  /* Compress the homepage rotator chrome — dots/eyebrow/counter */
  .oth-eyebrow,
  .oth-rotator-meta,
  .oth-dots-row,
  .oth-pill,
  .oth-counter {
    font-size: 10.5px !important;
    letter-spacing: 0.12em;
  }

  /* OneTeamHero homepage hero specifics — the real class is .oth-cta
     (not .oth-ctas). Stack the buttons full-width on mobile and surface
     the primary CTA above the secondary. */
  .oth { padding-top: 0 !important; padding-bottom: 0 !important; }
  .oth-stage { padding: 28px 18px 24px !important; }
  .oth-h1 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.06 !important;
    margin-top: 14px !important;
    letter-spacing: -0.025em;
  }
  .oth-sub {
    margin-top: 14px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .oth-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }
  .oth-cta > * {
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }
  .oth-cta .oth-btn-primary { order: -1; }
  .oth-controls {
    margin-top: 24px !important;
    padding-top: 14px !important;
    gap: 12px !important;
    flex-wrap: wrap;
  }
  .oth-arrows { gap: 8px !important; }
  .oth-arrow { min-width: 38px; min-height: 38px; }
  .oth-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    margin-top: 22px !important;
  }
  .oth-stat { padding: 16px 14px 14px !important; }
  .oth-stat-n { font-size: 24px !important; line-height: 1.1 !important; }
  .oth-stat-l { font-size: 10.5px !important; letter-spacing: 0.12em; }
  .oth-ticker { display: none !important; } /* GlobalTicker already provides this */
  .oth-grid { opacity: 0.35 !important; }

  /* =======================================================================
     PHASE 4C — Homepage cinematic sections (hc-* + bgpd + bcs-suite)
     Compress the long cinematic scroll so the CTA + product picker is
     reachable within 2-3 swipes. Hide pure-decorative chrome on mobile,
     keep all SEO content.
     ======================================================================= */

  /* Generic section padding for every homepage section */
  .hc-trust,
  .hc-ops,
  .hc-cinema,
  .hc-stats,
  .hc-deploy,
  .hc-cases,
  .hc-testim,
  .hc-cta,
  .bcs-suite,
  .bgpd {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Tighter spacing between adjacent cinematic sections */
  .hc-trust + section,
  .hc-ops + section,
  .hc-cinema + section,
  .hc-stats + section,
  .hc-deploy + section,
  .hc-cases + section,
  .hc-testim + section,
  .bcs-suite + section,
  .bgpd + section {
    padding-top: 22px !important;
  }
  /* Homepage hX scale */
  .hc-trust h2,
  .hc-ops h2,
  .hc-cinema h2,
  .hc-stats h2,
  .hc-deploy h2,
  .hc-cases h2,
  .hc-testim h2,
  .hc-cta h2,
  .bcs-suite h2,
  .bgpd h2 {
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin-bottom: 10px !important;
  }
  /* Final homepage CTA */
  .hc-cta {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .hc-cta h2 { font-size: 24px !important; }
  /* Product Discovery grid — full-width cards stack */
  .bgpd-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bgpd-h {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .bgpd-filters {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    margin-left: -18px;
    margin-right: -18px;
    padding: 0 18px;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .bgpd-filters::-webkit-scrollbar { display: none; }
  .bgpd-filter {
    flex: 0 0 auto !important;
    white-space: nowrap;
    min-height: 36px !important;
  }
  .bgpd-card-img { max-height: 160px !important; overflow: hidden !important; }
  /* HomeChainSuite — long bento. Capped + readable. */
  .bcs-suite .bcs-grid,
  .bcs-suite [class*='grid'] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* =======================================================================
     PHASE 4C — Contact / Lets Talk hero + form (`.ct-hero`, `.ct-form`)
     ======================================================================= */
  .ct-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ct-hero-chips {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .ct-hero-chip {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* Contact form — one column, large taps, no overlap */
  .ct-form { padding: 18px !important; }
  .ct-form .ct-form-row,
  .ct-form .ct-form-grid,
  .ct-form .ct-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ct-form label,
  .ct-form .ct-label {
    font-size: 12px !important;
    letter-spacing: 0.12em;
  }
  .ct-form input,
  .ct-form select,
  .ct-form textarea {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
    padding: 12px 14px !important;
    border-radius: 6px !important;
  }
  .ct-form textarea { min-height: 120px !important; }
  .ct-form button[type="submit"],
  .ct-form .ct-submit {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }
  /* Sticky-CTA safety on contact pages — keep submit clear of the bar */
  body.bgsc-has .ct-form,
  body.bgsc-has .ct-final {
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
  /* Contact-page right-side helper card (offices / hours / details) stacks
     under the form on mobile */
  .ct-right,
  .ct-side {
    margin-top: 14px !important;
  }

  /* =======================================================================
     PHASE 4C — Gallery hero (`.gal-hero`)
     The hero is a full-bleed cinematic image carousel. On mobile, reduce
     decorative chips/dots so the H1 + sub read cleanly. */
  .gal-hero { padding: 32px 0 !important; }
  .gal-hero-meta {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 14px !important;
    margin-top: 14px !important;
  }
  .gal-hero-meta .v { font-size: 22px !important; }
  .gal-hero-meta .l { font-size: 10.5px !important; letter-spacing: 0.14em; }
  .gal-hero-dots { margin-top: 14px !important; }
  /* Hide the floating decorative chips on mobile — they crowd the H1 */
  .gal-hero-chip-1,
  .gal-hero-chip-2 { display: none !important; }
  .gal-hero-bg .gal-hero-img { opacity: 0.35 !important; }
  /* Gallery grid lives below — make filter tabs scrollable + compact tiles */
  .gal-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .gal-tabs::-webkit-scrollbar { display: none; }
  .gal-tab { flex: 0 0 auto !important; white-space: nowrap; min-height: 36px !important; }

  /* =======================================================================
     PHASE 4C — Legal pages (`.legal-hero` + `.legal-page`)
     ======================================================================= */
  .legal-page { padding: 24px 0 60px !important; }
  .legal-hero { padding: 16px 0 !important; }
  .legal-hero h1, .legal-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }
  .legal-intro {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
  .legal-meta {
    font-size: 11px !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .legal-container,
  .legal-page .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .legal-body,
  .legal-content {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    max-width: 62ch !important;
  }
  .legal-body h2, .legal-content h2,
  .legal-page h2 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin-top: 26px !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.005em;
  }
  .legal-body h3, .legal-content h3,
  .legal-page h3 {
    font-size: 15.5px !important;
    margin-top: 18px !important;
    margin-bottom: 6px !important;
  }
  .legal-body p, .legal-content p,
  .legal-page p {
    margin: 0 0 12px !important;
  }
  .legal-body ul, .legal-body ol,
  .legal-page ul, .legal-page ol {
    padding-left: 18px !important;
  }
  /* Legal grid backdrop (cinematic flourish) — subdue on mobile */
  .legal-grid-bg { opacity: 0.3 !important; }
  .legal-sections { padding-left: 0 !important; }
  .legal-section {
    margin-bottom: 22px !important;
    padding-left: 0 !important;
  }
  .legal-section-h {
    font-size: 17px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em;
    margin: 0 0 8px !important;
  }
  .legal-section-p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
  }
  .legal-foot-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .legal-foot-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .legal-foot-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  /* =======================================================================
     PHASE 4C — Company / Careers / Leadership / Partners
     Shared .cmp-hero, Leadership .ld-*, Careers .cr-*, Partners .pt-*.
     ======================================================================= */

  /* Generic company hero (.cmp-hero is shared across Locations / Leadership /
     Careers / Partners). Already added to the universal compression list
     above — these rules add the inner-content tightening. */
  .cmp-hero {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .cmp-hero h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    margin: 12px 0 14px !important;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .cmp-hero p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }
  .cmp-hero-eyebrow {
    font-size: 10.5px !important;
    letter-spacing: 0.14em;
  }

  /* Generic .loc-section + .gal-section + similar scaffolds */
  .loc-section,
  .gal-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* LOCATIONS ------------------------------------------------------------ */
  .loc-worldmap {
    margin-top: 16px !important;
    padding: 14px !important;
  }
  .loc-worldmap-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .loc-worldmap-legend {
    flex-wrap: wrap;
    gap: 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.1em;
  }
  /* The cinematic world-map stage is fine, but cap height and hide pin labels
     by default — too many overlap on mobile */
  .loc-worldmap-stage {
    aspect-ratio: 2 / 1.05 !important;
    min-height: 180px !important;
  }
  .loc-pin-label {
    font-size: 10px !important;
    transform: translate(8px, -50%) scale(0.85);
    transform-origin: left center;
  }
  /* Stats grid — 2-up on mobile */
  .loc-map { padding: 18px !important; margin-top: 22px !important; }
  .loc-map-title {
    font-size: 10.5px !important;
    letter-spacing: 0.14em;
    margin-bottom: 14px !important;
  }
  .loc-map-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 18px !important;
  }
  .loc-map-stat .num { font-size: 22px !important; line-height: 1 !important; }
  .loc-map-stat .lbl { font-size: 10.5px !important; letter-spacing: 0.12em; }

  /* GlobalOffices block — used by Locations page */
  .gof-grid,
  .gof-list,
  .gof-offices {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* LEADERSHIP ----------------------------------------------------------- */
  .ld-roster-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  .ld-meta {
    flex-wrap: wrap;
    gap: 10px 14px !important;
    font-size: 11.5px !important;
  }
  .ld-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ld-card {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .ld-portrait {
    aspect-ratio: 16 / 7 !important;
    min-height: 0 !important;
  }
  .ld-body { padding: 16px !important; }
  .ld-title { font-size: 17px !important; line-height: 1.2 !important; }
  .ld-bio { font-size: 13.5px !important; line-height: 1.55 !important; }
  .ld-foot {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px 14px !important;
    margin-top: 12px !important;
  }
  .ld-values-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ld-value { padding: 18px !important; }
  .ld-value h4 { font-size: 16px !important; line-height: 1.2 !important; margin: 6px 0 8px !important; }
  .ld-value p { font-size: 13.5px !important; line-height: 1.55 !important; }
  .ld-cta {
    padding: 24px 18px !important;
    margin-top: 28px !important;
  }
  .ld-cta h3 { font-size: 22px !important; line-height: 1.15 !important; margin-bottom: 8px !important; }
  .ld-cta-row {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .ld-cta-row .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  /* CAREERS -------------------------------------------------------------- */
  .cr-head { margin-bottom: 18px !important; margin-top: 32px !important; }
  .cr-head .section-title { font-size: 24px !important; line-height: 1.15 !important; }
  .cr-head .section-sub { font-size: 14px !important; line-height: 1.55 !important; }
  .cr-cats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .cr-cat {
    grid-template-columns: 48px 1fr auto !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .cr-cat-glyph { width: 48px !important; height: 48px !important; font-size: 14px !important; }
  .cr-cat-body h3 { font-size: 16px !important; }
  .cr-cat-body p { font-size: 12.5px !important; line-height: 1.5 !important; }
  .cr-cat-tags { gap: 4px !important; margin-top: 6px !important; }
  .cr-cat-tag { font-size: 10px !important; padding: 2px 7px !important; }
  .cr-cat-count b { font-size: 18px !important; }
  .cr-cat-count span { font-size: 10px !important; letter-spacing: 0.1em; }

  /* Roles list — horizontal table on desktop, stacked card on mobile */
  .cr-filt {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-left: -18px;
    margin-right: -18px;
    padding: 0 18px 4px;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .cr-filt::-webkit-scrollbar { display: none; }
  .cr-pill {
    flex: 0 0 auto !important;
    white-space: nowrap;
    min-height: 34px !important;
    font-size: 11.5px !important;
  }
  .cr-roles-wrap { margin-top: 28px !important; }
  .cr-role {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "id   ar"
      "ti   ti"
      "meta meta" !important;
    gap: 4px 10px !important;
    padding: 14px !important;
    min-height: 0 !important;
  }
  .cr-role .id { grid-area: id; font-size: 10.5px !important; letter-spacing: 0.1em; }
  .cr-role .ti { grid-area: ti; font-size: 15px !important; line-height: 1.25 !important; }
  .cr-role .ca,
  .cr-role .lo {
    font-size: 11.5px !important;
    color: var(--site-text-3, rgba(200,210,226,0.55));
  }
  .cr-role .ca { grid-area: meta; }
  .cr-role .lo { grid-area: meta; justify-self: end; }
  .cr-role .ar { grid-area: ar; align-self: start; }

  .cr-locs {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cr-loc { padding: 16px !important; }
  .cr-loc-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 14px !important;
  }
  .cr-proc,
  .cr-proc-5 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .cr-step { padding: 16px !important; }
  .cr-step-h { font-size: 17px !important; line-height: 1.2 !important; margin: 4px 0 8px !important; }
  .cr-step p { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* Careers + Partners forms (.cr-form / .pt-apply) */
  .cr-pool {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .cr-form { padding: 18px !important; }
  .cr-form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cr-form label {
    font-size: 12px !important;
    letter-spacing: 0.1em;
  }
  .cr-form input,
  .cr-form select,
  .cr-form textarea {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS auto-zoom */
    padding: 12px 14px !important;
    border-radius: 6px !important;
    box-sizing: border-box;
  }
  .cr-form textarea { min-height: 120px !important; }
  .cr-form-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cr-form-foot .btn {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  /* PARTNERS ------------------------------------------------------------- */
  .pt-types {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pt-type { padding: 18px !important; }
  .pt-type-h { font-size: 18px !important; line-height: 1.2 !important; margin: 6px 0 8px !important; }
  .pt-type-d { font-size: 13.5px !important; line-height: 1.55 !important; }
  .pt-type-list { font-size: 13px !important; }
  .pt-apply {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .pt-apply-list { font-size: 13.5px !important; line-height: 1.55 !important; }
  .pt-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .pt-radio-btn {
    flex: 1 1 calc(50% - 3px);
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    justify-content: center;
  }
  .pt-faq-item { padding: 14px 16px !important; }
  .pt-faq-q span:first-child { font-size: 14px !important; line-height: 1.35 !important; }
  .pt-faq-a p { font-size: 13.5px !important; line-height: 1.6 !important; }

  /* =======================================================================
     PHASE 4C — Contact extras (rendered by contact.jsx beyond the form)
     ======================================================================= */
  .ct-block-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ct-block .container { padding-left: 18px !important; padding-right: 18px !important; }
  .ct-info { padding: 14px !important; height: auto !important; min-height: 64px; }
  .ct-info-lbl { font-size: 10.5px !important; letter-spacing: 0.14em; }
  .ct-info-val { font-size: 16px !important; }
  /* The animated hero console — bound height + soft mask */
  .ct-hv {
    max-height: 280px !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
  }
  /* Offices section — 1-column tiles, larger tap area */
  .ct-off-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ct-off-card { padding: 16px !important; }
  .ct-off-city { font-size: 17px !important; line-height: 1.2 !important; }
  .ct-off-addr { font-size: 13.5px !important; line-height: 1.55 !important; }
  .ct-offices-title { font-size: 24px !important; line-height: 1.15 !important; }
  /* Compress the form inner grid (already mostly set above) */
  .ct-form-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .ct-form-foot .btn,
  .ct-form-foot .ct-form-submit {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: center !important;
  }

  /* =======================================================================
     PHASE 4C — In The Media (.m-hero etc.) — page uses its own .m-* prefix
     ======================================================================= */
  .m-hero { padding: 28px 0 !important; overflow: hidden; }
  .m-hero-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .m-hero-h {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin-bottom: 12px !important;
  }
  .m-hero-sub {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .m-hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }
  .m-hero-ctas .m-btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 13.5px !important;
  }
  .m-hero-meta {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 14px !important;
    margin-top: 18px !important;
  }
  .m-hero-meta div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.12em;
  }
  .m-hero-meta div b { font-size: 18px !important; letter-spacing: 0; }
  /* Newsroom console — bound height with mask */
  .m-console {
    max-height: 380px !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
  }
  .m-console-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Generic media-page sections */
  .m-band,
  .m-coverage,
  .m-spotlight,
  .m-global,
  .m-events,
  .m-videos,
  .m-listings,
  .m-updates,
  .m-timeline,
  .m-authority,
  .m-press,
  .m-kit,
  .m-final {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .m-band-head h2,
  .m-coverage h2,
  .m-spotlight h2,
  .m-global h2,
  .m-events h2,
  .m-videos h2,
  .m-listings h2,
  .m-updates h2,
  .m-timeline h2,
  .m-authority h2,
  .m-press h2,
  .m-kit h2,
  .m-final h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  /* =======================================================================
     PHASE 4C — Gallery extras (gal-section beyond the hero)
     ======================================================================= */
  .gal-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .gal-tile {
    aspect-ratio: 16 / 10 !important;
    min-height: 200px !important;
  }
  .gal-tile.s-tall,
  .gal-tile.s-wide,
  .gal-tile.s-lg {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .gal-tile-meta {
    padding: 12px !important;
  }
  .gal-tile-meta .ttl { font-size: 13.5px !important; line-height: 1.3 !important; }
  .gal-tile-meta .tag {
    font-size: 10px !important;
    letter-spacing: 0.12em;
  }
  .gal-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px !important;
    text-align: center;
  }
  .gal-cta .btn {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  /* =======================================================================
     PHASE 4C — Sticky CTA bottom-clear safety for new contact + legal sections
     ======================================================================= */
  body.bgsc-has .ct-block,
  body.bgsc-has .ct-offices,
  body.bgsc-has .legal-foot-card,
  body.bgsc-has .ld-cta,
  body.bgsc-has .cr-pool,
  body.bgsc-has .pt-apply,
  body.bgsc-has .pt-faq,
  body.bgsc-has .hc-cta,
  body.bgsc-has .bgpd {
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* -----------------------------------------------------------------------
     7. REDUCED MOTION
     If user prefers reduced motion, hide the soft mask-image transitions
     on the expand-toggle and rail. */
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .bgmn-rail { scroll-behavior: auto; }
  .bgmn-expand-btn .bgmn-expand-arrow { transition: none; }
  [data-bgmn-expand] { transition: none; }
}