/*
 * mobile-fixes.css — canonical mobile responsive overrides.
 *
 * Loaded after base.css on every page (per ds-mobile-fixes inclusion in
 * enrich-and-seo-pages.cjs). Fixes the recurring mobile problems that
 * the static audit found across 158 pages:
 *
 *   1. Multi-col grids (.itr-grid, .card-grid-3, .ind-*-grid, .kvs etc.)
 *      stay multi-col at 375px width, squishing card content to ~21px.
 *   2. Hero webgl-fluid canvas runs at full viewport on phones — GPU
 *      drain + load-time stall. We disable on mobile and let the static
 *      gradient under it carry the visual.
 *   3. Logo marquee runs at 60s/loop which feels stalled on small
 *      screens. Compressed to 40s on phones for more visible motion.
 *   4. Testimonial / lead / life grids and timelines stack vertically.
 *   5. Card padding scales down so content area doesn't shrink to nothing.
 *
 * Mobile breakpoints used across the site:
 *   - 960px : tablet pivot
 *   - 720px : small tablet / large phone
 *   - 640px : phone landscape
 *   - 480px : phone portrait (single-column commit point)
 */

/* ──────────────────────────────────────────────────────────────────────
   1. Multi-col grids — collapse to single or scroll rail on mobile.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Generic responsive grids: any explicit repeat(N, 1fr) collapses. */
  .card-grid-3,
  .ar-rel-grid,
  .ind-stat-grid,
  .ind-uc-grid,
  .ind-ws-grid,
  .ind-cs-grid,
  .ind-pain-grid,
  .office-grid,
  .insights-feature,
  .insights-grid,
  .ak-result-grid,
  .ak-stat-grid,
  .ak-process-flow,
  .process-flow,
  .stats-row,
  .stats-grid,
  .stat-grid,
  .stat-row,
  .duo-grid,
  .pain-grid,
  .solution-grid,
  .signature-grid,
  .feature-grid,
  .three-up,
  .four-up,
  .lead-grid,
  .kvs,
  .footer-grid,
  footer.site-footer .footer-grid,
  .blog-grid,
  .illust-cards-grid,
  .mag-list,
  .mag-picks,
  .mag-newsletter {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Two-up grids: keep as a single column for breathing room. */
  .two-up,
  .duo-cards,
  .insights-feature {
    grid-template-columns: 1fr !important;
  }

  /* Testimonial band: image on top, text below. */
  .testimonial-band {
    grid-template-columns: 1fr !important;
    padding: 32px 22px !important;
    gap: 22px !important;
  }
  .testimonial-band .visual {
    aspect-ratio: 16 / 9;
  }
  .testimonial-band .quote {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }

  /* Horizontal milestone timeline: vertical stack on mobile. */
  .timeline-h {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .timeline-h::before { display: none !important; }
  .t-era-dot { margin-bottom: 12px !important; }

  /* Life-at-Armakuni 4-col photo grid → 2-col. */
  .life-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 140px !important;
    gap: 8px !important;
  }
  .life-card.span-2,
  .life-card.span-2-row {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
}

/* Tablet: life-grid was still 4-col at 768 — drop to 2 cols. */
@media (max-width: 960px) {
  .life-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 180px !important;
  }
  .life-card.span-2 { grid-column: span 2 !important; }
  .life-card.span-2-row { grid-row: span 2 !important; }
}

@media (max-width: 720px) {
  /* Event gallery: two-up at mobile. */
  .event-gallery {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 130px !important;
  }
  .event-gallery-item:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
  .event-gallery-item:nth-child(4) { grid-column: span 2 !important; }
}

@media (max-width: 480px) {
  /* Phone portrait: anything still in two columns collapses. */
  .life-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 160px !important;
  }
  .life-card.span-2,
  .life-card.span-2-row { grid-column: auto !important; }
  .event-gallery { grid-template-columns: 1fr !important; }
  .event-gallery-item:nth-child(n) { grid-column: auto !important; grid-row: auto !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   2. .itr-grid (homepage offerings tile row) — scroll-snap rail on
      mobile + tablet (everything below desktop). Better than collapsing
      to 1 col because there are 8-9 tiles. The horizontal rail keeps the
      section compact and signals "more →" via the scroll edge.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .itr-grid,
  .itr-grid[data-cols="4"],
  .itr-grid[data-cols="3"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 16px !important;
    margin: 0 -24px !important;
    scrollbar-width: none;
  }
  .itr-grid::-webkit-scrollbar { display: none; }
  .itr-tile {
    flex: 0 0 280px !important;
    scroll-snap-align: start !important;
    min-width: 0;
  }

  /* blog-grid (homepage recent insights, 4-col desktop) → swipeable rail. */
  .blog-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 16px !important;
    margin: 0 -24px !important;
    scrollbar-width: none;
  }
  .blog-grid::-webkit-scrollbar { display: none; }
  .blog-grid > * {
    flex: 0 0 300px !important;
    scroll-snap-align: start !important;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .itr-tile { flex: 0 0 76% !important; }
  .blog-grid > * { flex: 0 0 80% !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   3. Hero background canvas — disable webgl-fluid on mobile.
      Significant GPU/CPU cost on phones for an effect that's already
      faded under a gradient. The .hero-bg-canvas display:none lets the
      hero's CSS gradient backdrop carry the visual.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .hero-bg-canvas,
  canvas.hero-bg-canvas,
  canvas.fluid-canvas,
  canvas.hero-canvas { display: none !important; }
  .hero {
    background:
      radial-gradient(60% 40% at 20% 18%, var(--accent-a08, rgba(45,98,255,0.10)), transparent 60%),
      radial-gradient(50% 35% at 85% 80%, color-mix(in srgb, var(--accent-cyan, #009be5) 8%, transparent), transparent 60%),
      linear-gradient(180deg, var(--bg, #05050c), color-mix(in srgb, var(--bg, #05050c) 95%, #0a1530 5%));
  }
  .mouse-glow { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   4. Logo marquee — fixed size + grayscale on all viewports.
      The .logo-trust class has zero CSS sizing in the design system, so
      logos render at intrinsic size (often 1000+px wide). Cap height to
      28px desktop / 22px mobile + grayscale so the row reads as a logo
      bar and not as a row of giant brand wordmarks.
   ────────────────────────────────────────────────────────────────────── */

.logo-marquee-track,
.trust-strip-track,
.ak-logo-rail-track {
  align-items: center;
}
img.logo-trust,
.logo-marquee img,
.trust-strip img {
  height: 28px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain !important;
  flex-shrink: 0;
  opacity: 0.65;
  filter: grayscale(1) brightness(1.1);
  transition: opacity 0.18s ease;
}
img.logo-trust:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}
.logo-marquee {
  padding: 8px 0 !important;
  overflow: hidden;
}

@media (max-width: 720px) {
  .logo-marquee-track,
  .trust-strip-track,
  .ak-logo-rail-track {
    animation-duration: 32s !important;
    gap: 28px !important;
  }
  img.logo-trust,
  .logo-marquee img,
  .trust-strip img {
    height: 22px !important;
    max-width: 100px !important;
  }
  .ak-logo-tile {
    width: 84px !important;
    height: 36px !important;
  }
  .logo-name {
    font-size: 15px !important;
    opacity: 0.7;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   5. Card padding scales down at mobile so content has room.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .card,
  .feat .feat-body,
  .ins .ins-body,
  .ind-stat-card,
  .ind-pain-card,
  .ind-uc-card,
  .ind-ws-card,
  .office,
  .ind-offering {
    padding: 18px 18px 20px !important;
  }
  .feat-title { font-size: 20px !important; }
  .ins-title { font-size: 16px !important; }
  .ind-stat-num { font-size: 40px !important; }
  .ar-hero-title { font-size: 30px !important; line-height: 1.1 !important; }
  .ar-hero-excerpt { font-size: 16px !important; }
  .hero h1 { font-size: 30px !important; line-height: 1.1 !important; }
  .section h2 { font-size: 24px !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   6. Generic horizontal-overflow safety net — anything that grows wider
      than the viewport at <=720px gets clamped. Catches accidental
      fixed-width content from inline styles or third-party embeds.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  img, video, canvas, iframe { max-width: 100%; height: auto; }
  pre, code { max-width: 100%; overflow-x: auto; }
}

/* ──────────────────────────────────────────────────────────────────────
   7. Case-studies index: long industry labels (e.g. "Event Management
      and Volunteer Coordination") were overflowing because the inline
      flex-shrink:0 declaration on .cs-cat-industry refused to wrap.
      Allow wrap + right-align so long labels stack to a second line.
   ────────────────────────────────────────────────────────────────────── */

.cs-cat-head { flex-wrap: wrap !important; }
.cs-cat-industry {
  flex-shrink: 1 !important;
  flex-basis: auto;
  text-align: right;
  max-width: 60%;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .cs-cat-head { flex-direction: column !important; align-items: flex-start !important; gap: 6px; }
  .cs-cat-industry { text-align: left; max-width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────
   8. Reserve image dimensions for nav / footer / proof-strip imgs that
      ship without width/height attrs. Without reserved space they
      cause CLS as they load late. aspect-ratio:1 + an explicit display
      size is correct for square-ish nav/brand icons (42x42 typical).
   ────────────────────────────────────────────────────────────────────── */

.nav-brand-mark { height: 17px; width: auto; }
.nav-dd-icon { width: 42px; height: 42px; }
.nav-industry-thumb { width: 38px; height: 38px; }
.footer-brand-mark { height: 24px; width: auto; }

/* Defensive cap on customer-logo images. Any img sourced from
   /assets/customer-logos/ that isn't inside an explicitly-sized container
   gets capped at 32px height with auto width and contain fit. Stops the
   recurring "customer logos are insanely big" bug when a new page renders
   a logo without the trust-strip / logo-marquee / logo-wall classes. */
img[src*="/customer-logos/"]:not(.tm-quote-card-logo):not(.cs-hero-mark-logo):not(.logo-trust):not(.cs-related-card-logo) {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}

/* Reserve aspect ratio for unsized images so they don't cause layout
   shift as they decode. */
.nav-dd-icon img,
.nav-industry-thumb img,
.nav-industry-icon img,
.aws-badge-tile img,
.ak-aws-badge img { aspect-ratio: 1; max-width: 100%; }
.feat-img img,
.ins-img img,
.ar-rel-img img { aspect-ratio: 16 / 9; }
.logo-marquee img,
.ak-logo-tile img,
.trust-strip img { max-width: 100%; height: auto; }

/* ──────────────────────────────────────────────────────────────────────
   9. Stop cropping illustrations. The design system has object-fit:cover
      on roughly two dozen illustration container classes — that crops
      the edges of every illustrated tile, nav icon, and card visual.
      Photos (life-card, event-gallery, lead-card headshots) keep cover
      because cropping a face/scene to fit is fine. ILLUSTRATIONS get
      contain so the whole composition stays visible.
   ────────────────────────────────────────────────────────────────────── */

.nav-dd-icon img,
.nav-industry-thumb img,
.nav-industry-icon img,
.itr-img img,
.illust-card-img img,
.illust-card-visual img,
.feature-card-illus img,
.bento-illus-img,
.bento-illus-side-img,
.bento-v-illustration-hero img,
.scroll-card-img img,
.sticky-panel img,
.before-after-illus img,
.offering-tile .offering-img img,
/* .ind-card-img REMOVED — it's the full-bleed background of an industry
   card on offering pages. components-full.css §.ind-card-img sets
   object-fit: cover so the image fills the card edge-to-edge; forcing
   contain here pillar-boxed every industry card with empty space
   above/below the image. User-reported regression 2026-05-17. */
.aws-badge-tile img,
.ak-aws-badge img,
.cvs-image img,
/* .feat-img / .ins-img / .ar-rel-img / .card-link .card-img / .card-img
   REMOVED — these are blog/insights/related card visuals (newspaper-photo
   pattern: image fills top of card, text underneath). Same UX as
   .ind-card-img: the image is the card's visual identity and should fill.
   Their source illustrations are ~2:1 or 16:10, container is 16:9, so a
   small crop with `cover` reads better than the letterbox `contain` made.
   User-reported regression 2026-05-17 ("cards empty, not filled with image"). */
.ar-figure img,
.mag-pick-img img,
.mag-pick-row-img img,
.mag-cover img,
.mag-row-thumb img,
.mag-longread-img img,
.blog-thumb img,
.blog-thumb-img,
.ws-card-illus img,
.ws-card-illus picture {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(5,5,12,0.4);
}

/* Defensive: any <img> sourced from /illustrations/ or /nav-icons/ defaults
   to contain. Backstop for new illustration containers that haven't been
   added to the explicit list above. Photos override this on their own
   classes (life-card, lead-card .photo, event-gallery-item, etc.). */
img[src*="/illustrations/"]:not(.hero-static):not(.cover-img):not(.ind-card-img):not([data-keep-cover]),
img[src*="/nav-icons/"]:not([data-keep-cover]) {
  object-fit: contain;
}

/* Photos keep cover — cropping a face or a scene to fit is fine. */
.life-card img,
.event-gallery-item img,
.lead-card .photo img,
.testimonial-band .visual img,
.testimonial-band .who .face img,
.cover-hero .hero-static,
.hero-bg-canvas,
canvas.hero-bg-canvas {
  object-fit: cover !important;
}

/* ──────────────────────────────────────────────────────────────────────
   10. Sticky-scroll storytelling sections on offering pages.
       Desktop: image stays pinned on the left while text steps scroll
       past on the right. On mobile this collapses to one over-tall
       container (the modernization page's AK Way section was 2,553px
       tall on iPhone). Disable the sticky pin and lay out the image +
       each step vertically.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .sticky-scroll,
  .sticky-scroll-section,
  [class*="sticky-scroll"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .sticky-scroll-left,
  .sticky-scroll-right,
  .sticky-visual,
  .sticky-steps {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .sticky-visual,
  .sticky-panel-stack {
    aspect-ratio: 16 / 10;
    margin-bottom: 24px;
  }
  .sticky-panel {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 16px;
  }
  .sticky-panel-img,
  .sticky-panel img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    border-radius: var(--r-md, 16px) !important;
  }
  .akv-rail,
  .ak-way-vnav {
    position: static !important;
    height: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   11. Mobile menu — convert from "dropdown pushes content down" to a
       proper full-screen drawer. Larger tap targets, body-scroll lock
       via overlay backdrop. The existing JS toggles data-open="true"
       on the <nav>; we just restyle.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] {
    position: fixed !important;
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    padding: 14px 18px 22px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(8, 11, 22, 0.98), rgba(4, 6, 14, 0.96)) !important;
    backdrop-filter: blur(40px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.2) !important;
    z-index: 1100 !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-links {
    padding-top: 12px !important;
    gap: 6px !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-link {
    padding: 14px 12px !important;
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
    border-radius: 12px !important;
    color: var(--text, #ebf1fb) !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-link:active {
    background: rgba(123, 198, 255, 0.08) !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-menu-row {
    padding: 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-dd-title {
    font-size: 15px !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-dd-desc {
    font-size: 12px !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-cta {
    margin-top: 10px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    width: 100%;
    justify-content: center;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: -1;
    pointer-events: none;
  }
  /* Prevent body scroll behind the open drawer */
  html:has(nav[data-open="true"]) body { overflow: hidden; }
}

/* ──────────────────────────────────────────────────────────────────────
   12. Footer — condense on mobile. The desktop 5-col footer with full
       offices block + 4 link columns stacks to ~1500px on phones.
       Tighten padding + spacing, shrink offices to a single condensed
       block, and let column headings act as visual anchors.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  footer.site-footer {
    margin-top: 56px !important;
    padding: 36px 0 24px !important;
  }
  footer.site-footer .footer-grid {
    gap: 24px !important;
  }
  footer.site-footer .footer-tagline {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  footer.site-footer .footer-col {
    gap: 8px !important;
  }
  footer.site-footer .footer-col-heading {
    font-size: 9.5px !important;
    margin-bottom: 2px;
  }
  footer.site-footer .footer-col a {
    font-size: 12.5px !important;
    padding: 4px 0;
  }
  footer.site-footer .footer-office {
    gap: 0 !important;
  }
  footer.site-footer .footer-office-city {
    font-size: 12px !important;
  }
  footer.site-footer .footer-office-addr {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  footer.site-footer .footer-office-phone {
    font-size: 10.5px !important;
    margin-top: 1px;
  }
  footer.site-footer .footer-bottom {
    margin-top: 24px !important;
    padding-top: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  footer.site-footer .footer-copyright,
  footer.site-footer .footer-bottom-link {
    font-size: 11px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   13. Card grids that previously collapsed to 1-col on mobile and grew
       endlessly tall now become horizontal scroll-snap rails (one card
       at a time + a peek of the next). Lets the page stay short while
       letting the user swipe through the set.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Insights featured (was 1-col, 874px tall on mobile) */
  .insights-feature {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 16px !important;
    margin: 0 -24px !important;
    scrollbar-width: none;
  }
  .insights-feature::-webkit-scrollbar { display: none; }
  .insights-feature > .feat {
    flex: 0 0 84% !important;
    scroll-snap-align: start !important;
    min-width: 0;
  }

  /* Insights catalogue grid: rail for the first 6, then list */
  .insights-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 16px !important;
    margin: 0 -24px !important;
    scrollbar-width: none;
  }
  .insights-grid::-webkit-scrollbar { display: none; }
  .insights-grid > .ins {
    flex: 0 0 80% !important;
    scroll-snap-align: start !important;
    min-width: 0;
  }

  /* Industry stat / pain / use-case / workshop grids — short collections,
     better as a swipe rail than a 1-col stack. */
  .ind-stat-grid,
  .ind-uc-grid,
  .ind-ws-grid,
  .ind-pain-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 4px 24px 8px !important;
    margin: 0 -24px !important;
    scrollbar-width: none;
  }
  .ind-stat-grid::-webkit-scrollbar,
  .ind-uc-grid::-webkit-scrollbar,
  .ind-ws-grid::-webkit-scrollbar,
  .ind-pain-grid::-webkit-scrollbar { display: none; }
  .ind-stat-grid > *,
  .ind-uc-grid > *,
  .ind-ws-grid > *,
  .ind-pain-grid > * {
    flex: 0 0 80% !important;
    scroll-snap-align: start !important;
  }

  /* AWS results / stat row */
  .ak-result-grid,
  .ak-stat-grid,
  .stats-row,
  .stat-row,
  .stat-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 4px 24px 8px !important;
    margin: 0 -24px !important;
    scrollbar-width: none;
  }
  .ak-result-grid > *,
  .ak-stat-grid > *,
  .stats-row > *,
  .stat-row > *,
  .stat-grid > * {
    flex: 0 0 80% !important;
    scroll-snap-align: start !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   14. Testimonial carousel — make sure card content (long quotes) wraps
       and doesn't clip on the right at mobile width. Reduce dot size /
       spacing, ensure tap targets are still ≥24x24 via padding.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Only the OUTER carousel containers get overflow:hidden + 100% width.
     `.tm-track` is intentionally NOT constrained — it's the flex row that
     holds all slides side-by-side and must be free to grow as wide as its
     children require. Forcing the track to width:100% + overflow:hidden
     (the previous behaviour) made the track only as wide as one slide and
     clipped every slide past index 0 — leaving the carousel area black
     after every "next" tap (discovered 2026-05-22). */
  .tm-viewport,
  .testimonial-viewport {
    overflow: hidden !important;
    width: 100% !important;
  }
  /* Slides sized to the visible viewport area (full-bleed minus the
     viewport's 24px horizontal padding). Setting `flex-basis: 100%` (of
     the .tm-track's content box, which IS the viewport content width)
     gives the same result as calc(100vw - 48px) without the calc
     resolution edge cases. The track is then automatically wider than
     its parent because flex-shrink is forced to 0. */
  .tm-slide,
  .testimonial-slide {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
  /* Let the track grow to its natural content width on mobile — without
     this the parent's width: 100% propagates and the slides past index 0
     end up at the same flex position as slide 0 (flex collapses). */
  .tm-track,
  .testimonial-track {
    width: max-content !important;
    min-width: 100% !important;
  }
  .tm-slide .testimonial-quote,
  .testimonial-slide p,
  .tm-slide p {
    white-space: normal !important;
    overflow-wrap: anywhere;
    padding-right: 8px;
  }
  .tm-nav {
    gap: 10px !important;
    padding: 8px 0 0 !important;
  }
  .tm-dot {
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
    /* Tap target via outer hit area, visual stays small */
    box-shadow: 0 0 0 8px transparent;
  }
  .tm-dot.active {
    width: 18px !important;
    border-radius: 3px;
  }
  .tm-arrow,
  .tm-prev,
  .tm-next {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   15. Photo containers on About + Insights — make photos work harder.
       life-card photos were rendering at 140px square at mobile (too
       small). Insights detail page hero was already fixed in prior pass.
       Push photo crops to render larger + bumpier border-radius +
       opacity hover.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .life-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 180px !important;
    gap: 10px !important;
  }
  .life-card { border-radius: 14px; }
  .life-card.span-2 {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  .life-card.span-2-row { grid-row: auto !important; }
  .life-card .caption {
    font-size: 9.5px !important;
    padding: 4px 9px !important;
    bottom: 8px !important;
    left: 8px !important;
  }
}

@media (max-width: 480px) {
  .life-grid {
    grid-auto-rows: 220px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   15. Mobile tap targets (UX audit 2026-05-19). Apple's HIG and WCAG
   2.5.5 require interactive targets ≥44×44pt. The brand link in the
   nav was rendering at 17×107 (whole height of the brand mark image,
   no surrounding padding). Hamburger button was 35×30. Expand both
   to 44×44 minimum without changing the visible glyph size.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .nav-brand,
  a.nav-brand {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 6px;
    margin: -4px -6px; /* keep visual position; only the hit area grows */
  }
  .nav-mobile-toggle,
  button.nav-mobile-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    line-height: 1 !important;
    font-size: 24px !important;
  }
  /* Nav links on mobile need adequate touch area (AP-50).
     .nav-cta is intentionally excluded — the design system hides the
     Contact-us pill on mobile (.nav-cta { display: none } in inline
     page CSS) and only re-shows it inside the open hamburger drawer.
     Listing .nav-cta here previously forced display: inline-flex on
     it, overriding the hide rule and leaving the pill stuck in the
     mobile nav bar (discovered 2026-05-22). The in-drawer
     re-appearance has its own 44px treatment via the
     [data-open="true"] rules further down. */
  .nav-link,
  .nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Footer links — same standard */
  .site-footer a,
  footer a {
    min-height: 32px; /* footer is denser; 32 is the floor we'll accept */
    display: inline-flex;
    align-items: center;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   15.5. Grid 12px overflow on mobile (UX audit 2026-05-19). Several
   grid containers measured 442px wide on a 430px viewport — the
   classic "grid item with implicit min-width: auto overflowing its
   track" bug. Without `min-width: 0` on items, a long word in a
   blockquote/card forces the track to grow to fit, busting the layout.
   Pages affected: /, /about (lead-grid), /insights (insights-feature
   + insights-grid), /industries/* (ind-stat-grid + ind-pain-grid +
   ind-uc-grid), home blog-grid.

   Also enforce box-sizing: border-box on grid items so padding
   doesn't compound the overflow.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .lead-grid,
  .insights-feature,
  .insights-grid,
  .blog-grid,
  .ind-stat-grid,
  .ind-pain-grid,
  .ind-uc-grid,
  .ind-ws-grid,
  .ind-cs-grid,
  .ind-card-grid,
  .card-grid-3,
  .stat-grid,
  .stats-grid,
  .feature-grid {
    max-width: 100% !important;
    overflow-x: hidden;
  }
  .lead-grid > *,
  .insights-feature > *,
  .insights-grid > *,
  .blog-grid > *,
  .ind-stat-grid > *,
  .ind-pain-grid > *,
  .ind-uc-grid > *,
  .ind-ws-grid > *,
  .ind-cs-grid > *,
  .ind-card-grid > *,
  .card-grid-3 > *,
  .stat-grid > *,
  .stats-grid > *,
  .feature-grid > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   16. Case-studies index — readable single-column cards on mobile.
       The previous pass (2-col + display:none on .cs-cat-block) hid the
       "What we did" description AND the outcome paragraph entirely, so
       every card read as just title + industry + a single number. User
       feedback 2026-05-19: "case studies dont even show content" on
       mobile. Reverted to one column with the description block visible
       and legible body sizes, accepting that 36 cards now scrolls
       further. Comprehension beats density — the cards exist to sell
       the case study, not to flex how many we have.
   ────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   16.5. iOS 12px legibility floor (UX audit 2026-05-19). 15+ instances
   per page of 10-11px text: eyebrows, footer, form labels, copyright.
   Mobile users with default text-size accessibility settings can't read
   below ~12px without zoom; iOS dynamic-type users get clipped layouts
   when text resizes from this small a baseline.

   Push everything that was 10-11px up to a 12px floor on mobile. The
   tracking/letter-spacing on eyebrows is preserved so the brand voice
   doesn't change — only the rendered cap height moves.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .eyebrow,
  [class*="eyebrow"],
  .ak-proof-eyebrow,
  .ak-badge-caption,
  .footer-copy,
  .foot-copy,
  .footer-link,
  .nav-link,
  .blog-meta,
  .blog-meta span,
  .blog-category,
  .ar-hero-date,
  .ar-hero-author,
  .ar-hero-sep,
  .stat-l,
  .ar-hero-stats .stat-l,
  .cs-cat-block-lbl,
  .cs-cat-industry,
  .ind-card-meta,
  .ws-card-meta,
  .form-label,
  .form-row label,
  .trust-strip,
  .trust-strip-track,
  .trust-item,
  .itr-meta {
    font-size: 12px !important;
  }
  /* Footer copyright + secondary footer lines were 10.5px */
  .site-footer .footer-copy,
  .site-footer .foot-copy,
  .site-footer small,
  .site-footer .legal { font-size: 12px !important; line-height: 1.5 !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   16.7. Horizontal carousels need a swipe affordance on mobile. The
   `.tm-rail-track` on offering subpages and workshop pages is
   ~4800px wide, but the viewport gives no visual cue that there's
   more content offscreen. UX audit 2026-05-19. Add a right-edge fade
   mask + force scroll-snap so users see "there's more →" and the
   carousel lands cleanly after a swipe.

   Applies to `.tm-rail-viewport` rails on offering subpages/workshops
   (native scroll) and generic `.horizontal-scroll` rails.

   NOT applied to `.tm-viewport` (homepage testimonial carousel) — that
   carousel uses JS-driven transform on `.tm-track`, and giving the
   viewport `overflow-x: auto` + `scroll-snap-type: x mandatory` here
   was making the snap fight the transform and causing a 700+px scroll
   jump on every arrow click (discovered 2026-05-22). The earlier rule
   at line ~722 correctly sets `.tm-viewport { overflow: hidden }`.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .tm-rail-viewport,
  .horizontal-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tm-rail-viewport::-webkit-scrollbar,
  .horizontal-scroll::-webkit-scrollbar { display: none; }
  .tm-rail-track,
  .tm-track { display: flex !important; gap: 12px; }
  .tm-rail-card,
  .tm-slide,
  .horizontal-scroll > * {
    flex: 0 0 86%;
    scroll-snap-align: start;
    min-width: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   17. Case-study hero hierarchy on mobile. The base CSS in each
       case-study page sets:
         .ar-hero-title { clamp(40px, 4.8vw, 60px) } → 40px floor at mobile
         .ar-hero-stats .stat-n { clamp(22px, 2.2vw, 28px) } → 22px floor
         with color: var(--accent-bright) — bright cyan
       Then the page's own @media (max-width: 720px) ALSO drops the
       title to 34px, making the bright-cyan 22px stats visually
       compete with (or dominate) the title. UX audit 2026-05-19:
       "case-study hero has inverted hierarchy". Bump the title and
       tone the stat-n brightness so H1 reads as the headline.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ar-hero { padding-top: 110px !important; padding-bottom: 24px !important; }
  .ar-hero-title { font-size: 44px !important; line-height: 1.05 !important; margin-bottom: 16px !important; }
  .ar-hero-excerpt { font-size: 16px !important; line-height: 1.5 !important; }
  .ar-hero-stats {
    gap: 18px 28px !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
  }
  .ar-hero-stats .stat-n {
    font-size: 18px !important;
    color: var(--text, #ebf1fb) !important; /* drop bright-cyan so H1 wins */
    font-weight: 400 !important;
  }
  .ar-hero-stats .stat-l { font-size: 9.5px !important; }
}

/* Case-study customer-leader photo card (injected by
   injectCaseStudyCustomerPhoto in enrich-and-seo-pages.cjs). Sits above
   the testimonial blockquote in the article body — separate from the
   blockquote's <cite> so the customer's exec photo can always appear
   even when the quote was given by an account manager / partner rep. */
.ar-body .ar-customer-figure {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 -16px;
  padding: 12px 16px;
  border-radius: var(--r-md, 12px);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  max-width: 480px;
}
.ar-body .ar-customer-figure picture,
.ar-body .ar-customer-figure img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.ar-body .ar-customer-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--f-m, monospace);
  font-size: 12px;
  color: var(--text-m, rgba(235,241,251,0.6));
  letter-spacing: 0.02em;
}
.ar-body .ar-customer-figure figcaption strong {
  font-family: var(--f-b, sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--text, #ebf1fb);
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .cs-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .cs-cat-card {
    padding: 20px 20px 18px !important;
    gap: 14px !important;
  }
  .cs-cat-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  .cs-cat-industry {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
  /* Show the description block — this is the content users came for. */
  .cs-cat-block { display: flex !important; }
  .cs-cat-block-lbl { font-size: 10px !important; }
  .cs-cat-block-body { font-size: 14px !important; line-height: 1.55 !important; -webkit-line-clamp: 4 !important; }
  .cs-cat-stat-num { font-size: 32px !important; }
  .cs-cat-stat-claim { font-size: 13px !important; line-height: 1.4 !important; }
  .cs-cat-foot { padding-top: 12px !important; }
  .cs-cat-foot .ar-hero-tag { font-size: 10px !important; padding: 4px 10px !important; }
  .cs-cat-arrow { font-size: 11px !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   10. MAY 2026 mobile UX pass — addresses concrete user feedback:
       a) Mobile menu: bleeds through to page body, mixed alignment.
       b) Footer: 1403px tall on mobile (170% of viewport).
       c) AK Way / testimonial card on home: 570px tall, body too long.
       d) Empty testimonial avatar circle reads too prominent.
       e) Case studies index: .cs-grid stays 2-col at 375px.
       f) About leadership grid: each photo card 443px tall, takes over
          the viewport. Same problem on life-grid below.
       g) Multiple card grids never collapse to a swipe rail.
   ────────────────────────────────────────────────────────────────────── */

/* a) MOBILE MENU — full-overlay drawer with consistent alignment.
   The existing nav at <=880px goes to a single column but the drawer
   doesn't cover the viewport, so the page body shows through and the
   close affordance is unclear. Override:
     - position: fixed full-viewport when open
     - solid background so body is hidden
     - left-align every row
     - swap hamburger -> X glyph when open                              */
@media (max-width: 880px) {
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding: 18px 22px !important;
    transform: none !important;
    background: rgba(5,5,12,0.985) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    overflow-y: auto !important;
    grid-template-columns: 1fr auto !important;
    align-content: start !important;
    gap: 0 !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-links {
    grid-column: 1 / -1 !important;
    margin-top: 24px !important;
    padding: 0 !important;
    border-top: 0 !important;
    gap: 0 !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-links > * {
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-link {
    font-size: 14px !important;
    letter-spacing: 0.14em !important;
    padding: 0 !important;
    text-align: left !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-cta {
    width: 100% !important;
    margin: 18px 0 0 !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-dd-panel {
    padding-left: 0 !important;
    padding-top: 8px !important;
  }
  /* X glyph when open (CSS-only, no JS change). */
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-mobile-toggle {
    position: absolute !important;
    top: 18px !important;
    right: 22px !important;
    font-size: 26px !important;
    color: var(--text) !important;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-mobile-toggle::before {
    content: '×';
    font-weight: 200;
  }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-mobile-toggle { font-size: 0 !important; }
  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-mobile-toggle::before { font-size: 32px !important; line-height: 1; }
  /* Prevent body scroll behind the open menu. */
  body:has(nav[data-open="true"]) { overflow: hidden; }
}

/* b) MOBILE FOOTER — condense from 1403px to ~520px.
   Hide the office column entirely on mobile (the same address+phone
   lives on /contact at much bigger size). Tighten brand row, link
   typography, and the bottom legal strip. Industries column trimmed
   to top 5 (the long 9-item list was the biggest single contributor
   to mobile footer height).                                            */
@media (max-width: 720px) {
  footer.site-footer { margin-top: 48px !important; padding: 32px 0 20px !important; }
  footer.site-footer .footer-grid { gap: 20px !important; margin-bottom: 24px !important; }
  footer.site-footer .footer-brand-col { gap: 8px !important; }
  footer.site-footer .footer-brand-mark { height: 22px !important; width: auto !important; }
  footer.site-footer .footer-brand-name { font-size: 15px !important; letter-spacing: 0.14em !important; }
  footer.site-footer .footer-tagline { font-size: 12px !important; line-height: 1.5 !important; max-width: none !important; }
  footer.site-footer .footer-col { gap: 8px !important; }
  footer.site-footer .footer-col-heading { font-size: 9px !important; letter-spacing: 0.18em !important; margin-bottom: 2px !important; }
  footer.site-footer .footer-col a { font-size: 12.5px !important; line-height: 1.35 !important; }
  footer.site-footer .footer-col ul { gap: 6px !important; }

  /* Hide the entire Offices column on mobile — info lives on /contact. */
  footer.site-footer .footer-col-offices { display: none !important; }
  footer.site-footer .footer-office,
  footer.site-footer .footer-office-city,
  footer.site-footer .footer-office-addr,
  footer.site-footer .footer-office-phone { display: none !important; }

  /* Industries column (3rd footer-col) has 9 items — keep first 6
     visible, the rest live on /industries. Services stays full
     (7 offerings is the catalogue). */
  footer.site-footer .footer-grid > .footer-col:nth-of-type(3) ul li:nth-child(n+7) { display: none !important; }

  footer.site-footer .footer-bottom { margin-top: 18px !important; padding-top: 14px !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  footer.site-footer .footer-copyright,
  footer.site-footer .footer-bottom-link { font-size: 10.5px !important; }
}

/* c) TESTIMONIAL slide — cap height + clamp body so the card fits one
   viewport instead of stretching over 570px. Also center the
   stats/quote tighter.                                                 */
@media (max-width: 720px) {
  .tm-section, .tm-sec { padding-top: 36px !important; padding-bottom: 36px !important; }
  .tm-slide {
    padding: 24px 22px !important;
    border-radius: 18px !important;
  }
  .tm-slide .tm-quote, .tm-slide blockquote {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tm-slide .tm-headline,
  .tm-slide h3 { font-size: 19px !important; line-height: 1.2 !important; }
  .tm-slide .tm-stats { gap: 8px !important; font-size: 11px !important; }
  /* d) Avatar — placeholder circle is reading too big on mobile. */
  .tm-avatar,
  .tm-author-photo,
  .tm-author .face,
  .tm-slide [class*="avatar"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  /* Carousel nav dots — bump tap target while keeping the dot pill small. */
  .tm-nav { gap: 14px !important; margin-top: 14px !important; }
  .tm-dot { width: 8px !important; height: 8px !important; }
  .tm-dot.active { width: 22px !important; height: 8px !important; border-radius: 999px !important; }
  .tm-arrow { width: 36px !important; height: 36px !important; }
}

/* e) Case-studies index .cs-grid — single column at all phone widths. */
@media (max-width: 720px) {
  .cs-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cs-cat-card { padding: 22px 22px 20px !important; }
}

/* f) About .lead-grid — horizontal scroll-snap rail on mobile so 8
   leadership cards don't claim 8 full screens of vertical scroll. Each
   photo is reasonable-size (200px tall) instead of 325px.              */
@media (max-width: 960px) {
  .lead-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 16px !important;
    margin: 0 -24px !important;
    gap: 12px !important;
    scrollbar-width: none;
  }
  .lead-grid::-webkit-scrollbar { display: none; }
  .lead-card {
    flex: 0 0 240px !important;
    scroll-snap-align: start !important;
    min-width: 0;
  }
  .lead-card .photo { aspect-ratio: 4 / 5 !important; max-height: 280px !important; }
}

/* g) Logo marquee — keep the marquee but give logos a touch more
   presence on mobile so they read as deliberate brands, not a stream
   of squinted names. Pause the animation if a user taps a logo to
   stop motion.                                                         */
@media (max-width: 720px) {
  .logo-marquee {
    padding: 8px 0 !important;
  }
  .logo-marquee-track { gap: 32px !important; }
  .logo-name { font-size: 18px !important; opacity: 0.78 !important; }
  .ak-logo-tile, .logo-tile {
    width: 92px !important;
    height: 36px !important;
  }
  /* the "TRUSTED BY ..." heading above marquee should fit. */
  .logo-wall-lbl { font-size: 10.5px !important; letter-spacing: 0.12em !important; padding: 0 12px !important; }
}

/* h) AK Way "in production" section header — make sure the eyebrow +
   headline don't push the testimonial card off-screen on phones.       */
@media (max-width: 720px) {
  .tm-sec .section-head,
  .tm-sec .head,
  .tm-section .head { padding-top: 24px !important; margin-bottom: 16px !important; }
  .tm-sec h2, .tm-section h2 { font-size: 26px !important; line-height: 1.15 !important; }
}

/* i) Body / page padding tightening at <=480px so card content has
   more room. The 24px wrap padding ate 48px of the 375 viewport. */
@media (max-width: 480px) {
  .wrap, .wrap-narrow { padding-left: 18px !important; padding-right: 18px !important; }
  section.section, section.hero { padding-left: 0 !important; padding-right: 0 !important; }
}

/* j) Force-wrap long unbreakable strings in article body so they don't push
   the page wider than the viewport. Catches bare-URL anchors (legacy
   insights pieces) AND author content with no-space sequences (e.g.
   ASCII rules like "=====…"). The 2026-05-16 audit flagged 2 insights
   articles for tablet H-scroll caused by exactly this pattern. */
.ar-body p,
.ar-body li,
.ar-body td,
.ar-body p a,
.ar-body li a,
.ar-body td a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ──────────────────────────────────────────────────────────────────────
   12.5. Char-glow headlines — force fully visible on mobile.

   On desktop a JS+GSAP routine splits headline text into per-char spans,
   sets them to opacity 0.2 (the CSS baseline), then ScrollTrigger fires
   onEnter and animates each char up to opacity 1. The dim-blue
   pre-animation state is a feature on desktop where the animation IS
   the headline reveal.

   On mobile the animation either fires too late or doesn't fire at all
   (ScrollTrigger's "top 95%" math + mobile viewport can race the
   IntersectionObserver), leaving half the H1 stuck at opacity 0.2 —
   dim cyan text on the dark background, effectively unreadable. User
   feedback 2026-05-19 ("...engineering discipline isn't faster" trailing
   chars invisible, "kept the value flowing" barely readable).

   Override the baseline opacity to 1 on phones so the headline is
   always legible, animation or no. Desktop behavior is unchanged.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  [data-char-glow] .char,
  [data-char-glow] .char.lit,
  [data-char-glow] .char.settled {
    opacity: 1 !important;
    color: var(--text, #ebf1fb) !important;
    text-shadow: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   13. Mobile GPU/battery budget. The inline ornaments on every page
       (fog blobs at 92px blur with 26-32s infinite transforms, fixed
       body radial gradients, the bg-dot-grid 24x24 mask) run a constant
       compositor cost. iPhone Pro Max measurably warms up after 60s on
       any offering page. None of these visuals carry meaning at <=768px
       (phone viewport hides most of them by the wrap padding), so on
       mobile we keep a single static accent gradient and kill the rest.

       Why this matters more than the canvas cutoff (§3): WebGL on phones
       is rare because most phones use software-WebGL with throttling,
       but the fog-blob keyframes hit GPU compositor on EVERY phone, every
       paint, regardless of scroll. Bigger drain than the canvas was.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .fog-layer,
  .fog-blob,
  .fog-blob-1,
  .fog-blob-2,
  .fog-blob-3 {
    display: none !important;
    animation: none !important;
  }
  .bg-dot-grid,
  .bg-continuity-lines,
  .bg-line-center {
    display: none !important;
  }
  body {
    background:
      radial-gradient(60% 40% at 50% 0%, var(--accent-a08, rgba(45,98,255,0.10)), transparent 60%),
      linear-gradient(180deg, #04040a, #05050c 38%, #070c15 100%) !important;
    background-attachment: scroll !important;
  }
  .nav,
  .trust-strip {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .ind-card-shade,
  .feat-img::after,
  .ins-img::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .trust-strip-track,
  .ak-logo-rail-track,
  .logo-marquee-track { will-change: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fog-layer, .fog-blob, .fog-blob-1, .fog-blob-2, .fog-blob-3,
  .trust-strip-track, .ak-logo-rail-track, .logo-marquee-track,
  .scroll-progress { animation: none !important; }
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   14. Customer-logo image-size discipline. Source PNGs are 1200-1280px
       wide (downloaded at brand-kit resolution), but they render at
       22-32px height in marquees and trust strips. Without intrinsic
       size hints the browser decodes the full raster before scaling
       down, costing both bandwidth and decode time.
   ────────────────────────────────────────────────────────────────────── */

img.logo-trust,
img.ak-logo-tile,
.logo-marquee img,
.trust-strip img,
.ak-logo-rail-track img,
.logo-marquee-track img,
img[src*="/customer-logos/"]:not(.tm-quote-card-logo):not(.cs-hero-mark-logo):not(.cs-related-card-logo) {
  content-visibility: auto;
  contain-intrinsic-size: 100px 28px;
}

/* ──────────────────────────────────────────────────────────────────────
   15. Testimonial-carousel avatars (homepage `#case-studies` slides).
       injectCarouselAvatars in scripts/enrich-and-seo-pages.cjs wires a
       customer-photo into each `<div class="tm-avatar">` whose company
       has a matching folder in knowledge/assets/customer-photos/. The
       legacy inline `<style>` on the homepage defines `.tm-avatar` as a
       gradient blob with no rules for child <img>; without that the
       photo overflows the 44px circle or doesn't render at all. The
       `.tm-avatar-img` modifier (added by the injection) signals
       "image present" so we can drop the placeholder gradient.
   ────────────────────────────────────────────────────────────────────── */

.tm-avatar.tm-avatar-img {
  background: transparent !important;
  overflow: hidden;
  padding: 0;
}
.tm-avatar img,
.tm-avatar picture,
.tm-avatar picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block;
}

/* Carousel logo-marks: Comic Relief and Digital.ai use small square
   raster/SVG sources that read as an afterthought against the wide
   wordmark logos used on neighbour slides. Min-height on the container
   + max-height on the image normalize the visual weight. */
.tm-logo-mark {
  min-height: 32px;
  display: flex !important;
  align-items: center;
}
.tm-logo-mark--colored img,
.tm-logo-mark--colored picture img {
  height: 32px !important;
  width: auto !important;
  max-width: 120px;
  object-fit: contain;
}