/* ============================================================
   MOBILE INNER-PAGE LAYER  (phones/tablets <=992px only)
   ------------------------------------------------------------
   Minimal mobile treatment for inner page templates, matching the
   approved minimal homepage: eyebrow + title, hairline rows instead
   of cards, one primary button, no decorative texture.

   Colours come only from the site's existing tokens (--text-dark-main,
   --text-dark-muted, --teal-soft, --card-dark-border, --bg-dark-*), so
   the dark palette is untouched and the white copy re-themes through
   its own white-override.css. Desktop (>=993px) is not affected.

   Template coverage so far: SERVICE PAGE (61 pages), CASE STUDY (20).
   Revert: remove the <link> to this file.
   ============================================================ */

@media (max-width: 992px){

  /* Universal heading & text overflow protection for mobile and iOS */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  h1, h2, h3, h4, .hero-tagline, .hero-tagline span, .sec-title, .page-title,
  .svc-hero h1, .contact-hero h1, .careers-hero h1, .cs-hero h1, .legal-hero h1,
  .post-hero h1, .blogs-hero h1 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
    max-width: 100% !important;
  }

  /* ---------- Hero: compact, left aligned, one button ---------- */
  .svc-hero{
    min-height:0 !important; max-height:none !important;
    padding:52px 22px 40px !important; display:block !important;
  }
  .svc-hero .landing-texture, .svc-hero .landing-grain,
  .svc-hero .svc-hero-particles, .svc-scroll{ display:none !important; }
  .svc-hero-inner{ text-align:left !important; margin:0 !important; }
  .svc-hero .division-badge{
    display:block !important; border:0 !important; background:none !important; padding:0 !important;
    margin:0 0 14px !important; font-size:11px !important; font-weight:700 !important;
    letter-spacing:.18em !important; text-transform:uppercase; color:var(--teal-soft) !important;
  }
  .svc-hero h1{ font-size:32px !important; line-height:1.15 !important; text-align:left !important; letter-spacing:-.3px; }
  .svc-hero-desc{ text-align:left !important; margin:14px 0 0 !important; font-size:15px !important; }
  .svc-hero-actions{ margin-top:28px !important; justify-content:flex-start !important; }
  .svc-hero .svc-btn-ghost{ display:none !important; }
  .svc-hero .svc-btn-primary{
    width:100%; height:54px; padding:0 22px !important; border-radius:999px !important;
    justify-content:center !important; font-size:15px !important; letter-spacing:.02em !important;
    text-transform:none !important; box-shadow:none !important; border:0 !important;
  }
  .svc-hero .svc-btn-primary svg{ display:none; }

  /* Our Network: grouped tabs (Clients / Channel Partners / Strategic Partners),
     3-column grid of uniform logo tiles. Tab and grid styles come from
     network-tabs.css, which network-strip.js loads. */
  main > .network-strip{ padding:36px 0 34px !important; overflow:hidden !important; }
  main > .network-strip .sec-head{ padding:0 22px; margin-bottom:16px !important; }
  main > .network-strip .logo-marquee-track{ padding:0 22px !important; }
  main > .network-strip .net-grid{ grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
  main > .network-strip .net-chip{ min-height:58px !important; padding:8px !important; border-radius:10px !important; box-shadow:none !important; }
  main > .network-strip .net-chip img{ max-width:72px !important; max-height:34px !important; }
  main > .network-strip .net-more{ min-height:58px !important; border-radius:10px !important; font-size:12px !important; }

  /* ---------- Section rhythm and headings ---------- */
  main > .sec-approach, main > .sec-commitment, main > .sec-values{ padding:44px 22px !important; }
  main .sec-wrap{ max-width:none !important; }
  main .sec-head{ text-align:left !important; margin-bottom:18px !important; }
  main .sec-eyebrow{
    display:block !important; border:0 !important; background:none !important; padding:0 !important;
    margin:0 0 10px !important; font-size:11px !important; letter-spacing:.18em !important;
  }
  main .sec-title{ font-size:22px !important; line-height:1.25 !important; text-align:left !important; margin-top:0 !important; }
  main .sec-sub{ display:none !important; }

  /* Overview prose */
  .svc-lead{ text-align:left !important; padding-top:0 !important; max-width:none !important; }
  .svc-lead::before{ display:none !important; }
  .svc-lead p{ font-size:15px !important; line-height:1.7 !important; }

  /* ---------- Card grids become hairline rows ---------- */
  main .mag-grid, main .svc-benefits.mag-grid, main .nx-grid, main .svc-matrix,
  main .ia-rows, main .svc-why, main .nx-flow{
    display:block !important; max-width:none !important; margin:0 !important; gap:0 !important;
    border:0 !important; border-top:1px solid var(--card-dark-border) !important; text-align:left !important;
  }
  main .mag-card, main .svc-benefits .mag-card, main .nx-grid-card, main .svc-cell,
  main .svc-matrix .svc-cell, main .ia-row, main .svc-why-item, main .nx-flow-step{
    display:block !important; background:none !important; border:0 !important;
    border-bottom:1px solid var(--card-dark-border) !important; border-radius:0 !important;
    padding:16px 0 !important; margin:0 !important; box-shadow:none !important;
    transform:none !important; text-align:left !important; min-height:0 !important;
  }

  /* Tap-to-open rows (title visible, detail folds). */
  main .mob-acc{ position:relative; cursor:pointer; padding-right:34px !important; }
  main .mob-acc .mob-plus{
    position:absolute; right:0 !important; top:15px !important; margin-top:0 !important;
    width:20px; height:20px; color:var(--teal-soft); font-size:21px; line-height:20px;
    text-align:center; transition:transform .28s ease; pointer-events:none;
  }
  main .mob-acc.open .mob-plus{ transform:rotate(45deg); }
  main .mob-acc .mob-body{ max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s ease, opacity .22s ease, margin-top .22s ease; }
  main .mob-acc.open .mob-body{ max-height:420px; opacity:1; margin-top:6px; }
  main .svc-cell > .mob-body, main .ia-row > .mob-body{ grid-column:2; }
  main .mob-acc .mag-title, main .mob-acc h3{ margin:0 !important; }
  .mag-card::before, .mag-card::after, .nx-grid-card::before, .nx-grid-card::after,
  .nx-flow-step::before, .nx-flow-step::after{ display:none !important; }
  .nx-grid-ic, .svc-why-ic, .nx-flow-dot, .mag-num{ display:none !important; }

  .mag-title, .nx-grid-card h3, .svc-cell h3, .ia-row h3, .svc-why-item h3, .nx-flow-step h3{
    font-size:16px !important; font-weight:700 !important; margin:0 0 4px !important;
    color:var(--text-dark-main) !important; line-height:1.35 !important;
  }
  .mag-desc, .nx-grid-card p, .svc-cell p, .ia-row p, .svc-why-item p, .nx-flow-step p{
    font-size:13.5px !important; line-height:1.55 !important; color:var(--text-dark-muted) !important; margin:0 !important;
  }
  main .svc-cell, main .svc-matrix .svc-cell, main .ia-row{
    display:grid !important; grid-template-columns:30px 1fr; column-gap:10px !important; row-gap:0 !important;
  }
  .svc-cell-n, .ia-row-n{
    grid-row:1 / span 2; font-family:inherit !important; font-size:13px !important; font-weight:700 !important;
    letter-spacing:0 !important; color:var(--teal-soft) !important; line-height:1.6 !important;
    transform:none !important; text-shadow:none !important;
  }
  .svc-cell h3{ margin-top:0 !important; }

  /* ---------- Compare (them vs us): two plain lists ---------- */
  .nx-compare{ display:block !important; max-width:none !important; }
  .nx-comp-col{
    border:0 !important; border-radius:0 !important; background:none !important; padding:0 !important;
    opacity:1 !important; transform:none !important;
  }
  .nx-comp-col + .nx-comp-col{ margin-top:24px !important; }
  .nx-comp-h{ margin-bottom:6px !important; }
  .nx-comp-li{ opacity:1 !important; transform:none !important; font-size:14px !important; padding:11px 0 !important; }

  /* ---------- Two-panel diagram: stacked, flat ---------- */
  .ia-duo{ display:block !important; }
  .ia-duo-panel{
    background:none !important; border:0 !important; border-top:1px solid var(--card-dark-border) !important;
    border-radius:0 !important; padding:16px 0 !important; text-align:left !important; transform:none !important;
  }
  .ia-duo-panel h3{ font-size:17px !important; }
  .ia-duo-link{ display:none !important; }
  main .ia-duo-note{
    text-align:left !important; background:none !important; border:0 !important; border-radius:0 !important;
    border-left:2px solid var(--teal-soft) !important; padding:2px 0 2px 14px !important;
    margin:18px 0 0 !important; font-size:14px !important; max-width:none !important;
  }

  /* ---------- Practical bits ---------- */
  main .ia-practical{
    display:block !important; background:none !important; border:0 !important;
    border-radius:0 !important; padding:0 !important; max-width:none !important;
  }
  .ia-practical-aside{ display:none !important; }
  main .ia-practical-body{
    background:none !important; border:0 !important; border-radius:0 !important;
    padding:0 !important; box-shadow:none !important;
  }
  .ia-pb-item{
    background:none !important; border:0 !important; border-top:1px solid var(--card-dark-border) !important;
    border-radius:0 !important; padding:16px 0 !important;
  }
  .ia-pb-item h3{ font-size:16px !important; margin-bottom:4px !important; }
  .ia-pb-item p{ font-size:13.5px !important; }

  /* ---------- Working together: six plain numbered lines ---------- */
  .svc-rail-wrap{ overflow:visible !important; padding:0 !important; }
  .progress-rail{
    display:block !important; max-width:none !important; counter-reset:step;
    border-top:1px solid var(--card-dark-border);
  }
  .progress-rail .rail-line, .progress-rail .rail-dot, .progress-rail .rail-desc{ display:none !important; }
  .progress-rail .rail-node{
    display:flex !important; align-items:center; gap:14px; text-align:left !important;
    padding:16px 0 !important; border-bottom:1px solid var(--card-dark-border);
  }
  .progress-rail .rail-node::before{
    counter-increment:step; content:counter(step, decimal-leading-zero);
    min-width:30px; font-size:13px; font-weight:700; color:var(--teal-soft);
  }
  .progress-rail .rail-label{ font-size:17px !important; margin:0 !important; color:var(--text-dark-main) !important; }

  /* ---------- Your team ---------- */
  .svc-team{ display:block !important; max-width:none !important; border-top:1px solid var(--card-dark-border); }
  .svc-team-sq{
    display:grid !important; grid-template-columns:44px 1fr; column-gap:14px; align-items:center;
    background:none !important; border:0 !important; border-bottom:1px solid var(--card-dark-border) !important;
    border-radius:0 !important; padding:14px 0 !important; text-align:left !important;
    transform:none !important; box-shadow:none !important;
  }
  .svc-team-badge{ grid-row:1 / span 2; margin:0 !important; width:40px !important; height:40px !important; }
  .svc-team-sq h3{ font-size:16px !important; letter-spacing:0 !important; }
  .svc-team-tip{
    position:static !important; transform:none !important; opacity:1 !important; background:none !important;
    color:var(--text-dark-muted) !important; padding:0 !important; font-size:13.5px !important;
    font-weight:400 !important; white-space:normal !important; pointer-events:auto;
    grid-column:2; grid-row:2; border-radius:0;
  }
  .svc-team-tip::after{ display:none !important; }
  .svc-team-sq h3{ grid-column:2; grid-row:1; }

  /* ---------- Why us: dropped on mobile ---------- */
  main > section:has(> .sec-wrap > .svc-why){ display:none !important; }

  /* ---------- Related services ---------- */
  .svc-pills{ justify-content:flex-start !important; gap:8px !important; max-width:none !important; }
  .svc-pill{ font-size:13px !important; padding:9px 14px !important; transform:none !important; }
  .svc-pill-divrow{ justify-content:flex-start !important; margin-top:12px !important; }

  /* ---------- FAQ ---------- */
  main > .faq-section-seamless{ padding:44px 22px 24px !important; }
  .faq-accordion{ max-width:none !important; }

  /* ---------- Footer CTA + footer ---------- */
  .footer-cta{ padding:26px 22px !important; text-align:left !important; margin:28px 0 0 !important; border-radius:14px !important; }
  .footer-cta-title{ font-size:20px !important; }
  .footer-cta-sub{ font-size:14px !important; }
  .footer-cta-actions{ display:none !important; }
  .site-footer{ padding:40px 22px 90px !important; }
  .site-footer .seo-pills-box{ display:none !important; }
  .site-footer .footer-columns{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:22px !important; text-align:left !important;
  }
  .site-footer .footer-brand-col{ grid-column:1 / -1; }
  .site-footer .footer-bottom-copy{ text-align:left !important; }
}

/* ============================================================
   CASE-STUDY ARTICLE (20 pages)
   ============================================================ */
@media (max-width: 992px){
  .cs-hero{ padding:44px 22px 36px !important; }
  .cs-hero::before, .cs-hero-art, .cs-crumbs{ display:none !important; }
  .cs-hero-inner{ text-align:left !important; }
  .cs-hero .sec-eyebrow{ text-align:left; }
  .cs-hero .hero-tagline{ text-align:left !important; margin:0 0 16px !important; letter-spacing:.3px !important; }
  .cs-hero .hero-tagline .line-white,
  .cs-hero .hero-tagline .line-teal{
    white-space:normal !important; font-size:27px !important; line-height:1.18 !important; display:block;
  }
  .cs-hero .hero-tagline .m-word{ white-space:normal !important; word-break:break-word !important; overflow-wrap:break-word !important; display:inline-block; }
  .cs-deck{ text-align:left !important; font-size:15px !important; line-height:1.65 !important; margin:0 !important; }
  .cs-meta{ justify-content:flex-start !important; gap:6px 12px !important; margin-top:16px !important; font-size:12.5px !important; }

  .cs-figs{ margin-top:26px !important; padding:0 !important; border:0 !important; background:none !important; }
  .cs-figs .stats-ticker-row{ display:block !important; border-top:1px solid var(--card-dark-border); }
  .cs-figs .stat-item{
    display:flex !important; align-items:baseline; justify-content:space-between; gap:16px;
    padding:14px 0 !important; border:0 !important; border-bottom:1px solid var(--card-dark-border) !important;
    flex:none !important; width:100% !important; text-align:left !important;
  }
  .cs-figs .stat-item::after, .cs-figs .stat-item::before{ display:none !important; }
  .cs-figs .stat-num{
    font-size:30px !important; line-height:1 !important; color:var(--text-dark-main) !important;
    min-width:0 !important; width:auto !important; text-align:left !important;
  }
  .cs-figs .stat-label{ font-size:14px !important; text-transform:none !important; letter-spacing:0 !important; text-align:right; }

  main > .cs-sec{ padding:44px 22px !important; }
  .cs-narrow{ max-width:none !important; }
  .cs-copy{ text-align:left !important; font-size:15px !important; line-height:1.7 !important; }
  main .cs-note, main .cs-disclaimer{
    background:none !important; border:0 !important; border-radius:0 !important;
    border-left:2px solid var(--teal-soft) !important; padding:2px 0 2px 14px !important;
    font-size:13px !important; text-align:left !important;
  }
  main .cs-disclaimer{ border-left-color:var(--card-dark-border) !important; font-size:12px !important; }

  main .glass-grid, main .unique-grid, main .val-row{
    display:block !important; max-width:none !important; margin:0 !important; gap:0 !important;
    border-top:1px solid var(--card-dark-border) !important;
  }
  main .glass-card, main .unique-card, main .val-card{
    display:block !important; background:none !important; border:0 !important; backdrop-filter:none !important;
    border-bottom:1px solid var(--card-dark-border) !important; border-radius:0 !important;
    padding:16px 0 !important; margin:0 !important; box-shadow:none !important;
    transform:none !important; text-align:left !important; animation:none !important;
  }
  main .glass-card::after, main .val-card::before, main .val-card::after{ display:none !important; }
  main .glass-inner, main .val-inner, main .cs-val-inner{
    display:block !important; text-align:left !important; align-items:flex-start !important;
    background:none !important; padding:0 !important; border-radius:0 !important;
  }
  main .unique-icon{ display:none !important; }
  .cs-glass-index, .cs-mag-index, .cs-val-label{
    font-size:11px !important; letter-spacing:.12em !important; margin:0 0 4px !important; color:var(--teal-soft) !important;
  }
  .cs-glass-title, .cs-mag-title, .unique-title, .cs-val-value{
    font-size:16px !important; font-weight:700 !important; margin:0 0 4px !important;
    color:var(--text-dark-main) !important; line-height:1.35 !important;
  }
  .cs-glass-desc, .cs-mag-desc, .unique-desc, .cs-val-copy{
    font-size:13.5px !important; line-height:1.55 !important; color:var(--text-dark-muted) !important; margin:0 !important;
  }

  main .cs-rail{ display:block !important; max-width:none !important; border-top:1px solid var(--card-dark-border); }
  main .cs-rail .rail-line{ display:none !important; }
  main .cs-rail .rail-node{
    display:grid !important; grid-template-columns:30px 1fr; column-gap:10px; row-gap:2px !important;
    align-items:start !important; text-align:left !important;
    padding:16px 0 !important; border-bottom:1px solid var(--card-dark-border); flex:none !important; width:auto !important;
  }
  main .cs-rail .rail-node::before{ content:none !important; display:none !important; }
  main .cs-rail .rail-dot{
    grid-column:1; grid-row:1 / span 2; align-self:start !important;
    width:auto !important; height:auto !important; border:0 !important; background:none !important;
    box-shadow:none !important; margin:0 !important; display:block !important; animation:none !important;
    font-size:13px !important; font-weight:700 !important; color:var(--teal-soft) !important; line-height:1.6 !important;
  }
  main .cs-rail .rail-step{ grid-column:2; grid-row:1; font-size:16px !important; font-weight:700 !important; color:var(--text-dark-main) !important; margin:0 0 3px !important; }
  main .cs-rail .rail-copy{ grid-column:2; grid-row:2; display:block !important; font-size:13.5px !important; line-height:1.55 !important; max-width:none !important; margin:0 !important; }

  main .cs-outcome{
    display:block !important; text-align:left !important; background:none !important; border:0 !important;
    padding:0 0 18px !important; margin:0 0 6px !important; border-radius:0 !important;
  }
  main .cs-outcome-num{ font-size:56px !important; line-height:1 !important; margin:0 0 10px !important; }
  main .cs-outcome-copy{ text-align:left !important; }
  main .cs-outcome-copy b{ display:block; font-size:16px !important; margin-bottom:4px; }
  main .cs-outcome-copy span{ font-size:13px !important; }

  main .cs-grid{ display:block !important; border-top:1px solid var(--card-dark-border); max-width:none !important; }
  main .cs-grid .cs-card{
    display:block !important; background:none !important; border:0 !important; border-radius:0 !important;
    border-bottom:1px solid var(--card-dark-border) !important; padding:16px 26px 16px 0 !important; margin:0 !important;
    box-shadow:none !important; transform:none !important; position:relative; min-height:0 !important;
  }
  main .cs-grid .cs-card::after{
    content:"\2192"; position:absolute; right:0; top:50%; transform:translateY(-50%);
    color:var(--text-dark-muted); font-size:18px;
  }
  main .cs-grid .cs-thumb, main .cs-grid .card-accent{ display:none !important; }
  main .cs-grid .cs-body{ padding:0 !important; }
  main .cs-grid .cs-division{ font-size:11px !important; margin:0 0 4px !important; }
  main .cs-grid .cs-title{ font-size:16px !important; line-height:1.35 !important; margin:0 0 4px !important; }
  main .cs-grid .cs-result{ font-size:13px !important; }
}

/* Full-width bottom contact bar on phones */
@media (max-width: 600px){
  .floating-dock{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    transform:none !important; width:100% !important; display:flex !important; flex-direction:row !important;
    gap:0 !important; padding:0 !important; border-radius:0 !important; z-index:1200;
    background-color:rgba(5,8,14,.97); border-top:1px solid var(--card-dark-border);
  }
  .floating-dock .dock-link{
    flex:1; min-width:0; height:54px; padding:0 !important; border:0 !important; border-radius:0 !important;
    display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-soft);
  }
  .floating-dock .dock-link + .dock-link{ border-left:1px solid var(--card-dark-border) !important; }
  .floating-dock .dock-link::after{ content:attr(aria-label); }
  .floating-dock .dock-icon{ width:19px; height:19px; }
}

/* ============================================================
   SERVICE PAGE REFRESH (61 pages): same logic as the approved mobile homepage.
   - no hairlines anywhere: space and soft cards separate things
   - one rhythm: 48px above and below every section, 22px at the sides
   - sections alternate plain / grey (tagged by mobile-inner.js, which skips hidden ones)
   - network "and more" is plain text, not a dotted box
   Scoped to pages whose <main> starts with .svc-hero (JS adds body.m-svc), so the
   case-study pages that share this file are untouched.
   ============================================================ */
@media (max-width: 992px){
  .m-svc{ --m-sec-y:32px; --m-sec-x:22px; --m-gap:12px; --m-r:14px;
          --m-card:rgba(255,255,255,.045); --m-bg:#05080E; --m-bg2:#10141C; }

  /* sections: no borders, no textures, one padding rule, alternating tone */
  .m-svc main > section, .m-svc main > .network-strip{
    border-top:0 !important; border-bottom:0 !important; box-shadow:none !important;
    background-image:none !important; background-color:var(--m-bg) !important;
    padding:var(--m-sec-y) var(--m-sec-x) !important;
  }
  .m-svc main > section::before, .m-svc main > section::after{ display:none !important; }
  .m-svc main > .network-strip{ padding:var(--m-sec-y) 0 !important; }
  .m-svc main > .m-alt{ background-color:var(--m-bg2) !important; }
  .m-svc .site-footer{ border-top:0 !important; background-color:var(--m-bg) !important; background-image:none !important; padding-top:var(--m-sec-y) !important; }
  .m-svc .site-footer.m-alt{ background-color:var(--m-bg2) !important; }

  /* network: keep the logo tiles, make "and more" plain text */
  .m-svc main > .network-strip .net-more{
    border:0 !important; min-height:0 !important; padding:4px 0 0 !important;
    font-size:13px !important; letter-spacing:.02em; color:var(--teal-soft) !important;
  }

  /* rows -> soft cards with space between (no dividers) */
  .m-svc main .mag-grid, .m-svc main .svc-benefits.mag-grid, .m-svc main .nx-grid, .m-svc main .svc-matrix,
  .m-svc main .ia-rows, .m-svc main .svc-why, .m-svc main .nx-flow{
    display:grid !important; gap:var(--m-gap) !important; border:0 !important;
  }
  .m-svc main .mag-card, .m-svc main .svc-benefits .mag-card, .m-svc main .nx-grid-card, .m-svc main .svc-cell,
  .m-svc main .svc-matrix .svc-cell, .m-svc main .ia-row, .m-svc main .svc-why-item, .m-svc main .nx-flow-step{
    background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:16px 18px !important;
  }
  .m-svc main .mob-acc{ padding-right:48px !important; }
  .m-svc main .mob-acc .mob-plus{ right:16px !important; top:16px !important; }

  /* compare (them vs us) */
  .m-svc .nx-comp-col{ background:var(--m-card) !important; border-radius:var(--m-r) !important; padding:16px 18px !important; }
  .m-svc .nx-comp-col + .nx-comp-col{ margin-top:var(--m-gap) !important; }
  .m-svc .nx-comp-li{ border:0 !important; padding:8px 0 !important; }

  /* two-panel diagram + its note */
  .m-svc .ia-duo{ display:grid !important; gap:var(--m-gap) !important; }
  .m-svc .ia-duo-panel{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:16px 18px !important; }
  .m-svc main .ia-duo-note{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:14px 18px !important; margin-top:var(--m-gap) !important; }

  /* practical bits */
  .m-svc main .ia-practical-body{ display:grid !important; gap:var(--m-gap) !important; }
  .m-svc .ia-pb-item{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:16px 18px !important; }

  /* working together: six numbered cards */
  .m-svc .progress-rail{ display:grid !important; gap:var(--m-gap) !important; border-top:0 !important; }
  .m-svc .progress-rail .rail-node{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:14px 18px !important; }

  /* your team: four cards */
  .m-svc .svc-team{ display:grid !important; gap:var(--m-gap) !important; border-top:0 !important; }
  .m-svc .svc-team-sq{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:14px 16px !important; }

  /* related services: chips */
  .m-svc .svc-pill{ background:var(--m-card) !important; border:0 !important; }

  /* FAQ: toggle summary + one card per question, then the connect card */
  .m-svc main > .faq-section-seamless{ padding:var(--m-sec-y) var(--m-sec-x) !important; }
  .m-svc .faq-mobile-toggle{ background:none !important; border:0 !important; padding:0 !important; }
  .m-svc .faq-mobile-toggle > summary{ background:var(--m-card); border-radius:var(--m-r); padding:16px 18px; }
  .m-svc .faq-accordion{ display:grid !important; gap:var(--m-gap) !important; margin-top:var(--m-gap) !important; }
  .m-svc .faq-row{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; margin:0 !important; }
  .m-svc .footer-cta{ background:var(--m-card) !important; border:0 !important; margin-top:var(--m-gap) !important; }
}

/* White theme: logo teal (#26A99A) instead of the dark teal; cards flip to white on grey sections. */
@media (max-width: 992px){
  .m-svc{ --teal-soft:#26A99A; --teal-primary:#26A99A; --m-card:#F3F4F5; --m-bg:#FFFFFF; --m-bg2:#F3F4F5; --m-teal:#26A99A; }
  .m-svc main > .m-alt{ --m-card:#FFFFFF; }
  .m-svc main .sec-eyebrow, .m-svc .svc-hero .division-badge, .m-svc .faq-mobile-count{ color:var(--m-teal) !important; }
  .m-svc .svc-hero .svc-btn-primary{ background:var(--m-teal) !important; color:#FFFFFF !important; }
}

/* Service page refresh, follow-up: full-width step cards, divider-free bottom bar in the logo teal. */
@media (max-width: 992px){
  .m-svc .progress-rail .rail-node{ width:100% !important; max-width:none !important; margin:0 !important; box-sizing:border-box; }
  .m-svc .svc-rail-wrap{ padding:0 !important; }
}
@media (max-width: 600px){
  .m-svc .floating-dock .dock-link + .dock-link{ border-left:0 !important; }
  .m-svc .floating-dock .dock-link{ color:var(--m-teal) !important; }
}

/* ============================================================
   ABOUT US REFRESH (1 page): same logic as the approved mobile homepage and Service page.
   JS (mobile-inner.js) adds body.m-svc + body.m-about on this page, so the shared section rules
   above (48px rhythm, no borders, alternating tones, FAQ cards, bottom bar) apply too.
   ============================================================ */
@media (max-width: 992px){
  .m-about{ --m-icobg:rgba(38,169,154,.12); }

  /* hero: the company tagline, centred, one flat block (no texture, grain or scroll cue) */
  .m-about .about-landing{ margin-top:75px !important; min-height:calc(100vh - 139px) !important; max-height:none !important;
    display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .m-about .about-landing .landing-texture, .m-about .about-landing .landing-grain, .m-about .about-landing .scroll-hint{ display:none !important; }
  .m-about .about-landing .hero-tagline{ text-align:center !important; max-width:100% !important; padding:0 12px !important; }
  .m-about .about-landing .hero-tagline .line-white, .m-about .about-landing .hero-tagline .line-teal{
    display:block !important; white-space:normal !important; word-break:break-word !important; overflow-wrap:break-word !important;
    font-size:clamp(18px, 5.8vw, 24px) !important; line-height:1.25 !important;
    font-weight:800 !important; letter-spacing:.02em !important; text-transform:uppercase; max-width:100% !important; }

  /* section headings: plain label, no pill outline */
  .m-about .about-sec{ text-align:left !important; }
  .m-about .pill-eyebrow{ display:block !important; border:0 !important; border-radius:0 !important; padding:0 !important;
    margin:0 0 18px !important; font-size:11px !important; letter-spacing:.18em !important; text-align:left !important;
    color:var(--teal-soft) !important; background:none !important; }
  .m-about .about-sec .sec-title{ font-size:22px !important; line-height:1.25 !important; text-align:left !important; margin:0 0 var(--m-gap) !important; }

  /* Your Vision: headline + three plain cards (the dotted diagram is replaced by JS) */
  .m-about .expertise-wrap{ display:block !important; padding:0 !important; max-width:none !important; margin:0 !important; }
  .m-about .expertise-left{ display:flex !important; gap:10px; align-items:baseline; margin:0 0 var(--m-gap) !important; }
  .m-about .expertise-left .exp-your, .m-about .expertise-left .exp-vision{ font-size:32px !important; }
  .m-about .expertise-svg{ display:none !important; }
  .m-about .m-pts{ display:grid; gap:var(--m-gap); }
  .m-about .m-pt{ background:var(--m-card); border-radius:var(--m-r); padding:16px 18px; font-size:16px; font-weight:700; color:var(--text-dark-main); }

  /* mission and vision: two cards, no connector */
  .m-about .mv-section{ max-width:none !important; margin:0 !important; }
  .m-about .mv-grid{ display:grid !important; grid-template-columns:1fr !important; gap:var(--m-gap) !important; text-align:left !important; }
  .m-about .mv-grid > div:not(.mv-divider){ background:var(--m-card); border-radius:var(--m-r); padding:18px; }
  .m-about .mv-divider{ display:none !important; }
  .m-about .mv-label{ text-align:left !important; color:var(--teal-soft) !important; }
  .m-about .mv-text{ max-width:none !important; margin:0 !important; text-align:left !important; font-size:15px !important; color:var(--text-dark-main) !important; }

  /* values */
  .m-about .values-row{ display:grid !important; gap:var(--m-gap) !important; max-width:none !important; margin:0 !important; border:0 !important; }
  .m-about .val-glass{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    backdrop-filter:none !important; padding:18px !important; text-align:left !important; transform:none !important; box-shadow:none !important; }
  .m-about .val-glass-title{ margin:0 0 6px !important; font-size:16px !important; color:var(--teal-soft) !important; }
  .m-about .val-glass-desc{ font-size:13.5px !important; line-height:1.55 !important; }

  /* strategic direction: three cards with a small icon */
  .m-about .rail-wrap{ display:grid !important; gap:var(--m-gap) !important; margin:0 !important; max-width:none !important; align-items:stretch !important; }
  .m-about .rail-line-h{ display:none !important; }
  .m-about .rail-node{ display:grid !important; grid-template-columns:40px 1fr; column-gap:14px; align-items:start;
    background:var(--m-card); border-radius:var(--m-r); padding:16px 18px; text-align:left !important; }
  .m-about .rail-icon{ grid-row:1 / span 2; width:40px !important; height:40px !important; margin:0 !important; border:0 !important;
    background:var(--m-icobg) !important; box-shadow:none !important; animation:none !important; }
  .m-about .rail-title{ grid-column:2; margin:0 0 2px !important; font-size:16px !important; text-align:left; }
  .m-about .rail-desc{ grid-column:2; max-width:none !important; margin:0 !important; text-align:left; font-size:13.5px !important; }

  /* what makes us unique: six cards */
  .m-about .unique-grid{ display:grid !important; gap:var(--m-gap) !important; margin:0 !important; max-width:none !important; border:0 !important; }
  .m-about .unique-card{ display:flex !important; background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:16px 18px !important; transform:none !important; box-shadow:none !important; gap:14px; align-items:flex-start; }
  .m-about .unique-icon{ display:flex !important; background:var(--m-icobg) !important; }
  .m-about .unique-title{ font-size:16px !important; margin-bottom:4px !important; }
  .m-about .unique-desc{ font-size:13.5px !important; }

  /* how we're organized: three cards */
  .m-about .v-timeline{ display:grid; gap:var(--m-gap); margin:0 !important; max-width:none !important; text-align:left !important; }
  .m-about .v-tl-item{ background:var(--m-card); border-radius:var(--m-r); padding:16px 18px !important; }
  .m-about .v-tl-label{ text-align:left !important; }
  .m-about .v-tl-text{ font-size:13.5px !important; line-height:1.55 !important; text-align:left !important; }

  /* industries: soft chips, no outline */
  .m-about .industry-pills{ justify-content:flex-start !important; margin:0 !important; gap:8px !important; max-width:none !important; }
  .m-about .ind-pill{ background:var(--m-card) !important; border:0 !important; padding:9px 14px !important; font-size:13px !important; }
}

/* White theme: logo teal, soft teal tint behind icons */
@media (max-width: 992px){
  .m-about{ --m-icobg:rgba(38,169,154,.14); }
  .m-about .pill-eyebrow, .m-about .mv-label, .m-about .v-tl-label, .m-about .val-glass-title,
  .m-about .expertise-left .exp-vision, .m-about .about-landing .hero-tagline .line-teal{ color:var(--m-teal) !important; }
  .m-about .rail-icon svg, .m-about .unique-icon svg{ stroke:var(--m-teal) !important; }
}

/* ============================================================
   ABOUT US COMPACT: titles only, details open on tap (same pattern as the FAQ rows).
   Cuts the page length by showing one line per item instead of a paragraph per item.
   ============================================================ */
@media (max-width: 992px){
  /* labels only: the big section titles repeat the label above them */
  .m-about .about-sec .sec-title, .m-about .about-sec .sec-sub{ display:none !important; }
  .m-about .pill-eyebrow{ margin:0 0 14px !important; }

  /* Your Vision: one line, then three tiles side by side */
  .m-about .expertise-left{ margin:0 0 12px !important; }
  .m-about .expertise-left .exp-your, .m-about .expertise-left .exp-vision{ font-size:26px !important; }
  .m-about .m-pts{ grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
  .m-about .m-pt{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:72px;
    padding:10px 8px !important; font-size:13px !important; line-height:1.25; }

  /* mission and vision: tighter cards */
  .m-about .mv-grid > div:not(.mv-divider){ padding:14px 16px !important; }
  .m-about .mv-label{ margin-bottom:6px !important; }
  .m-about .mv-text{ font-size:14px !important; line-height:1.5 !important; }

  /* tap-to-open cards: values, strategic direction, what makes us unique, how we're organized */
  .m-about .val-glass, .m-about .rail-node, .m-about .unique-card, .m-about .v-tl-item{ padding:14px 16px !important; }
  .m-about .mob-acc{ padding-right:48px !important; }
  .m-about .val-glass .mob-plus, .m-about .v-tl-item .mob-plus{ top:15px !important; right:16px !important; }
  .m-about .rail-node .mob-plus, .m-about .unique-card .mob-plus{ top:24px !important; right:16px !important; }
  .m-about .val-glass-title, .m-about .rail-title, .m-about .unique-title{ margin:0 !important; font-size:16px !important; }
  .m-about .v-tl-label{ margin:0 !important; font-size:12px !important; letter-spacing:.14em !important; }
  .m-about .mob-acc.open .mob-body{ margin-top:8px !important; }
  .m-about .unique-card{ align-items:center !important; }
  .m-about .unique-card.open{ align-items:flex-start !important; }
  .m-about .rail-node .rail-icon{ grid-row:1 !important; }
  .m-about .rail-node.open .rail-icon{ grid-row:1 / span 2 !important; }

  /* industries: fewer pixels per chip */
  .m-about .ind-pill{ padding:8px 12px !important; font-size:12.5px !important; }
}

/* ABOUT US TWEAK: line each + sign up with the middle of its title row */
@media (max-width: 992px){
  .m-about .val-glass .mob-plus{ top:17px !important; }
  .m-about .v-tl-item .mob-plus{ top:13px !important; }
  .m-about .rail-node .mob-plus, .m-about .unique-card .mob-plus{ top:22px !important; }
}

/* ABOUT US ALIGN: exact + sign position. Same specificity as the service-page rule so it actually wins. */
@media (max-width: 992px){
  .m-svc.m-about main .val-glass .mob-plus{ top:17px !important; }
  .m-svc.m-about main .v-tl-item .mob-plus{ top:13.5px !important; }
  .m-svc.m-about main .rail-node:not(.open){ align-items:center !important; }
  .m-svc.m-about main .rail-node:not(.open) .mob-plus{ top:24px !important; }
  .m-svc.m-about main .rail-node.open .mob-plus{ top:15px !important; }
  .m-svc.m-about main .unique-card:not(.open) .mob-plus{ top:22px !important; }
  .m-svc.m-about main .unique-card.open .mob-plus{ top:15px !important; }
}

/* HIDE SCROLLBAR: phone-width pages scroll without a visible scrollbar line (touch devices overlay it anyway;
   this removes the always-on bar seen when a sample is previewed inside the Mobile View phone frame). */
@media (max-width: 600px){
  html{ scrollbar-width:none; -ms-overflow-style:none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0; }
}

/* ============================================================
   BLOGS LISTING REFRESH (1 page): compact, same logic as the homepage.
   mobile-inner.js adds body.m-svc + body.m-blogs on this page, so the shared section rules
   (48px rhythm, no borders, alternating tones, FAQ cards, bottom bar) apply too.
   ============================================================ */
@media (max-width: 992px){
  /* header: title + six division chips in a 3 x 2 grid, no texture or scroll cue */
  .m-blogs .blogs-hero{ margin-top:75px !important; min-height:0 !important; max-height:none !important;
    display:block !important; text-align:left !important; padding-bottom:24px !important; }
  .m-blogs .blogs-hero .landing-texture, .m-blogs .blogs-hero .landing-grain, .m-blogs .blogs-scroll-hint{ display:none !important; }
  .m-blogs .blogs-hero h1{ font-size:28px !important; line-height:1.15 !important; margin:0 0 20px !important; text-align:left !important; }
  .m-blogs .blog-filters{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:8px !important; justify-content:stretch !important; }
  .m-blogs .blog-filter-pill{ height:40px; padding:0 !important; border:0 !important; border-radius:12px !important;
    background:var(--m-card) !important; color:var(--text-dark-muted) !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:.08em !important; text-align:center; }
  .m-blogs .blog-filter-pill.active{ background:var(--teal-primary) !important; color:#fff !important; }

  /* articles: one short row each (division and topic, date, two-line title). No picture, no excerpt. */
  .m-blogs .blogs-listing{ padding-top:24px !important; }
  .m-blogs .blogs-grid{ display:grid !important; grid-template-columns:1fr !important; gap:var(--m-gap) !important; max-width:none !important; margin:0 !important; }
  .m-blogs .blog-card{ display:block !important; background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:14px 16px !important; transform:none !important; box-shadow:none !important; overflow:hidden; }
  .m-blogs .blog-card::after, .m-blogs .blog-card .card-accent, .m-blogs .blog-card .blog-thumb, .m-blogs .blog-card .blog-excerpt{ display:none !important; }
  .m-blogs .blog-card .blog-card-body{ display:grid !important; grid-template-columns:1fr auto; gap:4px 12px; padding:0 !important;
    text-align:left !important; align-items:baseline; }
  .m-blogs .blog-card .blog-category{ grid-column:1; grid-row:1; font-size:11px !important; letter-spacing:.12em !important;
    color:var(--teal-soft) !important; text-align:left; }
  .m-blogs .blog-card .blog-date{ grid-column:2; grid-row:1; margin:0 !important; padding:0 !important; font-size:11.5px !important;
    letter-spacing:0 !important; white-space:nowrap; }
  .m-blogs .blog-card .blog-title{ grid-column:1 / -1; grid-row:2; font-size:16px !important; line-height:1.3 !important;
    margin:2px 0 0 !important; text-align:left; }

  /* "Show all N articles": a real button, hidden once everything is showing */
  .m-blogs .m-hide{ display:none !important; }
  .m-blogs .m-more-btn{ display:block; width:100%; height:48px; margin-top:var(--m-gap); border:0; border-radius:var(--m-r);
    background:var(--m-card); color:var(--teal-soft); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .m-blogs .m-more-btn[hidden]{ display:none; }
}

/* ABOUT TILES AND BLOGS FILTER FIX
   1) About Us "Your Vision" tiles: every tile is two lines ("Our" / the key word), stacked and centred.
   2) Blogs: the page's own division filter hides cards with an inline style (display:none), which the phone
      layout's display:block !important was overriding, so every filter showed all 18 articles. This lets the
      inline hide win again. */
@media (max-width: 992px){
  .m-about .m-pt{ flex-direction:column !important; padding:10px 6px !important; gap:1px; }
  .m-about .m-pt span{ display:block; white-space:nowrap; }
  .m-blogs .blog-card[style*="display: none"], .m-blogs .blog-card[style*="display:none"]{ display:none !important; }
}

/* ============================================================
   CONNECT CTA (every page that has the footer CTA): "More Questions?" / "Let's Connect." on two lines,
   the sub line removed, and a Connect button that opens a contact bottom sheet (built by mobile-inner.js).
   ============================================================ */
.m-connect{ display:none; }
@media (max-width: 992px){
  .footer-cta-sub{ display:none !important; }
  .footer-cta-title .m-t1, .footer-cta-title .m-t2{ display:block; }
  /* centred: both title lines and the button; tight gap between title and button */
  .footer-cta{ align-items:stretch !important; text-align:center !important; gap:0 !important; }
  .footer-cta-copy{ width:100%; text-align:center !important; }
  .footer-cta-title{ text-align:center !important; margin:0 !important; }
  .m-connect{ display:block; width:100%; height:50px; margin:18px auto 0; border:0; border-radius:999px;
    background:var(--teal-primary); color:#fff; font:inherit; font-size:15px; font-weight:700; letter-spacing:.02em; cursor:pointer; }

  .m-sheet-ov{ --s-bg:#10141C; --s-ink:#D4DCE8; --s-muted:#94A3B8; --s-field:rgba(255,255,255,.07);
    --s-teal:#26A99A; --s-btn:#26A99A; --s-err:#F87171;
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:2000; display:flex; align-items:flex-end; justify-content:center;
    background:rgba(2,6,12,.62); visibility:hidden; opacity:0; transition:opacity .25s ease, visibility 0s linear .25s; }
  .m-sheet-ov.open{ visibility:visible; opacity:1; transition:opacity .25s ease; }
  .m-sheet{ position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; background:var(--s-bg); color:var(--s-ink);
    border-radius:22px 22px 0 0; padding:26px 22px 28px; transform:translateY(100%); transition:transform .32s cubic-bezier(.16,1,.3,1); }
  .m-sheet-ov.open .m-sheet{ transform:none; }
  .m-sheet-x{ position:absolute; top:10px; right:12px; width:44px; height:44px; border:0; background:none; color:var(--s-muted);
    font-size:30px; line-height:1; cursor:pointer; }
  .m-sheet-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--s-teal); margin:0 0 8px; }
  .m-sheet-title{ font-size:22px; line-height:1.2; font-weight:800; margin:0 44px 8px 0; color:var(--s-ink); }
  .m-sheet-sub{ font-size:14px; line-height:1.5; color:var(--s-muted); margin:0 0 18px; }
  .m-form{ display:grid; gap:12px; }
  .m-field{ display:grid; gap:6px; }
  .m-field span{ font-size:13px; font-weight:600; color:var(--s-ink); }
  .m-field i{ color:var(--s-teal); font-style:normal; }
  .m-field input, .m-field textarea{ width:100%; border:0; border-radius:12px; background:var(--s-field); color:var(--s-ink);
    font:inherit; font-size:16px; padding:0 14px; height:48px; }
  .m-field textarea{ height:auto; min-height:92px; padding:12px 14px; resize:vertical; }
  .m-field input::placeholder, .m-field textarea::placeholder{ color:var(--s-muted); opacity:.8; }
  .m-field input:focus-visible, .m-field textarea:focus-visible, .m-send:focus-visible,
  .m-sheet-x:focus-visible, .m-connect:focus-visible{ outline:2px solid var(--s-teal, #26A99A); outline-offset:2px; }
  .m-form-err{ font-size:13px; color:var(--s-err); }
  .m-send{ width:100%; height:52px; border:0; border-radius:999px; background:var(--s-btn); color:#fff; font:inherit;
    font-size:15px; font-weight:700; cursor:pointer; }
  .m-send[disabled]{ opacity:.65; cursor:default; }
  .m-done{ display:grid; gap:10px; justify-items:center; text-align:center; padding:18px 0 4px; }
  .m-done-ic{ width:56px; height:56px; border-radius:50%; background:rgba(38,169,154,.15); color:var(--s-teal);
    display:grid; place-items:center; font-size:26px; font-weight:700; }
  .m-done h3{ font-size:20px; margin:0; color:var(--s-ink); }
  .m-done p{ margin:0; font-size:14px; line-height:1.5; color:var(--s-muted); }
  .m-done .m-demo{ font-size:12px; font-style:italic; }
  .m-done .m-send{ margin-top:8px; }
  .m-sheet [hidden]{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){ .m-sheet-ov, .m-sheet{ transition:none !important; } }

/* White theme for the Connect CTA: logo teal and a light sheet */
@media (max-width: 992px){
  body .m-connect{ background:#26A99A; }
  .m-sheet-ov{ --s-bg:#FFFFFF; --s-ink:#1C1A17; --s-muted:#4A5154; --s-field:#F3F4F5; --s-teal:#26A99A; --s-btn:#26A99A; --s-err:#B91C1C; }
  .m-sheet-ov .m-done-ic{ background:rgba(38,169,154,.14); }
}

/* ============================================================
   CASE STUDIES LISTING REFRESH (1 page): compact, same logic as Blogs and the homepage.
   mobile-inner.js adds body.m-svc + body.m-cases on this page, so the shared section rules
   (48px rhythm, no borders, alternating tones, FAQ cards, bottom bar, Connect CTA) apply too.
   ============================================================ */
@media (max-width: 992px){
  /* header: title + six division chips in a 3 x 2 grid, no eyebrow, texture or scroll cue */
  .m-cases .cs-hero{ margin-top:75px !important; min-height:0 !important; max-height:none !important;
    display:block !important; text-align:left !important; padding:32px 22px 24px !important; }
  .m-cases .cs-hero .landing-texture, .m-cases .cs-hero .landing-grain, .m-cases .cs-scroll-hint, .m-cases .cs-hero .sec-eyebrow{ display:none !important; }
  /* one line only: sized to the phone width so "The Stravision Case Studies" never wraps */
  .m-cases .cs-hero h1{ font-size:clamp(19px,6.2vw,24px) !important; line-height:1.2 !important; margin:0 0 20px !important; text-align:left !important; white-space:normal !important; word-break:break-word !important; overflow-wrap:break-word !important; }
  .m-cases .cs-hero > div[style]{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:8px !important; justify-content:stretch !important; }
  .m-cases .cs-filter-pill{ height:40px; padding:0 !important; border:0 !important; border-radius:12px !important;
    background:var(--m-card) !important; color:var(--text-dark-muted) !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:.08em !important; text-align:center; }
  .m-cases .cs-filter-pill.active{ background:var(--teal-primary) !important; color:#fff !important; }

  /* case studies: one short card each (division, two-line title, result). No picture. */
  .m-cases .cs-listing{ padding:24px 22px 48px !important; }
  /* The article pages' "related case studies" rules (main .cs-grid ...) are more specific, so these start with .m-cases main */
  .m-cases main .cs-grid{ display:grid !important; grid-template-columns:1fr !important; gap:var(--m-gap) !important; max-width:none !important; margin:0 !important; border-top:0 !important; }
  .m-cases main .cs-grid .cs-card{ display:block !important; background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:14px 16px !important; margin:0 !important; transform:none !important; box-shadow:none !important; overflow:hidden; }
  .m-cases main .cs-grid .cs-card::after, .m-cases main .cs-grid .card-accent, .m-cases main .cs-grid .cs-thumb{ display:none !important; }
  .m-cases main .cs-grid .cs-body{ display:grid !important; grid-template-columns:1fr; gap:4px; padding:0 !important;
    text-align:left !important; align-items:start !important; justify-items:start !important; }
  .m-cases main .cs-grid .cs-division{ font-size:11px !important; letter-spacing:.14em !important; color:var(--teal-soft) !important; margin:0 !important; }
  .m-cases main .cs-grid .cs-title{ font-size:16px !important; line-height:1.3 !important; margin:0 !important; text-align:left; }
  .m-cases main .cs-grid .cs-result{ display:block; max-width:100%; font-size:12.5px !important; line-height:1.35 !important; margin:2px 0 0 !important; padding:0 !important;
    letter-spacing:0 !important; color:var(--text-dark-muted) !important; font-weight:500 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* page filter toggles inline display:none; keep that working, plus "Show all N" handling */
  .m-cases main .cs-grid .cs-card[style*="display: none"]{ display:none !important; }
  .m-cases main .cs-grid .cs-card.m-hide{ display:none !important; }
  .m-cases .m-more-btn{ display:block; width:100%; height:48px; margin-top:var(--m-gap); border:0; border-radius:var(--m-r);
    background:var(--m-card); color:var(--teal-soft); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .m-cases .m-more-btn[hidden]{ display:none; }
}

/* ============================================================
   CAREERS PAGE REFRESH (1 page): compact, same logic as the homepage and the other inner pages.
   mobile-inner.js adds body.m-svc + body.m-careers, so the shared section rules (48px rhythm, no borders,
   alternating tones, FAQ cards, bottom bar, Let's Connect CTA) apply too. One line per item; details open on tap.
   ============================================================ */
@media (max-width: 992px){
  /* header: one-line title + short intro; no eyebrow, texture or scroll cue */
  .m-careers main > section.careers-hero{ margin-top:75px !important; min-height:0 !important; max-height:none !important;
    display:block !important; text-align:left !important; padding:32px 22px 24px !important; }
  .m-careers .careers-hero .landing-texture, .m-careers .careers-hero .landing-grain,
  .m-careers .careers-scroll-hint, .m-careers .careers-hero .pill-ey{ display:none !important; }
  .m-careers .careers-hero h1{ font-size:clamp(19px,6.2vw,24px) !important; line-height:1.2 !important; margin:0 0 12px !important;
    text-align:left !important; white-space:normal !important; word-break:break-word !important; overflow-wrap:break-word !important; }
  .m-careers .careers-hero .hero-sub{ font-size:15px !important; line-height:1.55 !important; margin:0 !important; text-align:left !important; }

  /* section headers: the small label only. The big heading and the intro line stay in the page for
     search engines and screen readers but are visually hidden. */
  .m-careers main > .careers-sec{ text-align:left !important; }
  .m-careers .careers-sec .pill-ey{ display:block !important; border:0 !important; border-radius:0 !important; padding:0 !important;
    margin:0 0 18px !important; background:none !important; text-align:left !important; font-size:11px !important;
    letter-spacing:.18em !important; color:var(--teal-soft) !important; }
  .m-careers .careers-sec > h2, .m-careers .careers-sec > p{ position:absolute !important; width:1px !important; height:1px !important;
    margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }

  /* culture and divisions: one row per item, detail opens on tap */
  .m-careers .culture-grid{ display:grid !important; grid-template-columns:1fr !important; gap:var(--m-gap) !important; margin:0 !important; max-width:none !important; }
  .m-careers .culture-card{ display:grid !important; grid-template-columns:1fr auto; align-items:center; column-gap:12px;
    background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:14px 16px !important;
    text-align:left !important; transform:none !important; box-shadow:none !important; cursor:pointer; }
  .m-careers .culture-icon{ display:none !important; }
  .m-careers .culture-title{ grid-column:1; grid-row:1; margin:0 !important; font-size:16px !important; text-align:left !important; }
  .m-careers .culture-card .m-fold-plus{ grid-column:2; grid-row:1; }

  /* growth: three numbered rows */
  .m-careers .growth-path{ display:grid !important; gap:var(--m-gap) !important; margin:0 !important; max-width:none !important; }
  .m-careers .growth-line{ display:none !important; }
  .m-careers .growth-node{ display:grid !important; grid-template-columns:auto 1fr auto; align-items:center; column-gap:14px;
    background:var(--m-card); border-radius:var(--m-r); padding:14px 16px; text-align:left !important; cursor:pointer; }
  .m-careers .growth-circle{ grid-column:1; grid-row:1; width:auto !important; height:auto !important; min-width:20px; margin:0 !important;
    border:0 !important; background:none !important; box-shadow:none !important; animation:none !important;
    font-size:13px !important; font-weight:700 !important; color:var(--teal-soft) !important; }
  .m-careers .growth-label{ grid-column:2; grid-row:1; margin:0 !important; font-size:16px !important; text-align:left !important; }
  .m-careers .growth-node .m-fold-plus{ grid-column:3; grid-row:1; }
  .m-careers .growth-node .m-fold-body{ grid-column:2 / -1; }

  /* tap-to-open body and + sign (shared by culture, growth, divisions) */
  .m-careers .m-fold-plus{ color:var(--teal-soft); font-size:22px; line-height:1; transition:transform .28s ease; pointer-events:none; }
  .m-careers .m-fold.open .m-fold-plus{ transform:rotate(45deg); }
  .m-careers .m-fold-body{ grid-column:1 / -1; grid-row:2; max-height:0; overflow:hidden; opacity:0; margin:0 !important; max-width:none !important;
    text-align:left !important; font-size:14px !important; line-height:1.55 !important; color:var(--text-dark-muted) !important;
    transition:max-height .3s ease, opacity .22s ease, margin-top .22s ease; }
  .m-careers .m-fold.open .m-fold-body{ max-height:260px; opacity:1; margin-top:8px !important; }

  /* traits: soft pills, no outlines */
  .m-careers .values-strip{ justify-content:flex-start !important; gap:8px !important; margin:0 !important; max-width:none !important; }
  .m-careers .value-chip{ border:0 !important; background:var(--m-card) !important; border-radius:999px !important;
    padding:9px 14px !important; font-size:13px !important; }

  /* numbers: 2 x 2 cards */
  .m-careers .perks-grid{ grid-template-columns:1fr 1fr !important; gap:var(--m-gap) !important; margin:0 !important; max-width:none !important; }
  .m-careers .perk-item{ background:var(--m-card); border-radius:var(--m-r); padding:20px 12px !important; min-height:104px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
  .m-careers .perk-num{ font-size:34px !important; line-height:1 !important; margin:0 !important; }
  .m-careers .perk-label{ font-size:13px !important; }

  /* Ready to join: one card, one full-width button */
  .m-careers .careers-cta{ max-width:none !important; margin:0 !important; padding:26px 22px !important; background:var(--m-card) !important;
    border:0 !important; border-radius:var(--m-r) !important; text-align:center !important; }
  .m-careers .careers-cta h3{ font-size:20px !important; margin:0 0 8px !important; }
  .m-careers .careers-cta p{ font-size:14px !important; margin:0 0 18px !important; }
  .m-careers .careers-cta a{ display:block !important; width:100%; height:50px; line-height:50px; padding:0 !important; border-radius:999px !important;
    background:var(--teal-primary); color:#fff; font-size:15px !important; font-weight:700; transform:none !important; }
}

/* CAREERS: header centred (title and intro) */
@media (max-width: 992px){
  .m-careers main > section.careers-hero, .m-careers .careers-hero h1, .m-careers .careers-hero .hero-sub{ text-align:center !important; }
}

/* FAQ QUESTIONS: every question card is the same height and every question is one or two lines, never more */
@media (max-width: 992px){
  .faq-row .faq-q{ min-height:68px; padding:12px 18px !important; align-items:center !important; gap:14px;
    font-size:15px !important; line-height:1.35 !important; text-align:left !important; }
  .faq-row .faq-q .m-faq-t{ flex:1 1 auto; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
  .faq-row .faq-q .faq-plus{ flex:none; margin-left:auto; font-size:22px !important; line-height:1; }
}

/* FAQ QUESTIONS, ONE LINE: smaller text, one line per question in the list. A long question ends in "..."
   and shows in full once its card is opened. */
@media (max-width: 992px){
  .faq-row .faq-q{ min-height:52px; padding:0 16px !important; font-size:13.5px !important; gap:12px; }
  .faq-row .faq-q .m-faq-t{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; line-clamp:unset; }
  .faq-row.open .faq-q{ padding:14px 16px !important; align-items:flex-start !important; }
  .faq-row.open .faq-q .m-faq-t{ white-space:normal; overflow:visible; text-overflow:clip; }
  .faq-row .faq-q .faq-plus{ font-size:20px !important; }
}

/* SECTION TITLES CENTRED (every page that loads the mobile layer): the small section labels, section titles,
   and the page titles on Blogs and Case studies. Hero blocks that are part of a left-aligned article header stay as they were. */
@media (max-width: 992px){
  main .sec-head, main .sec-eyebrow, main .sec-title{ text-align:center !important; }
  main .cs-hero .sec-eyebrow, main .cs-hero .sec-head{ text-align:left !important; }
  .m-about .pill-eyebrow, .m-about .about-sec .sec-title{ text-align:center !important; }
  .m-careers .careers-sec .pill-ey{ text-align:center !important; }
  .m-blogs .blogs-hero h1, .m-cases .cs-hero h1{ text-align:center !important; }
}

/* ============================================================
   DIVISION PAGES, CONTACT, BLOG ARTICLE, CASE-STUDY ARTICLE, LEGAL: first pass, same logic as the other pages.
   mobile-inner.js adds body.m-svc plus m-division / m-contact / m-post / m-article / m-legal.
   Compact, no hairlines, soft cards, one line per item, centred section titles.
   ============================================================ */
@media (max-width: 992px){

  /* ---------- DIVISION ---------- */
  .m-division .svc-hero-inner{ text-align:center !important; }
  .m-division .division-badge{ display:block !important; border:0 !important; background:none !important; padding:0 !important;
    margin:0 0 10px !important; font-size:11px !important; letter-spacing:.18em !important; text-transform:uppercase;
    color:var(--teal-soft) !important; text-align:center !important; }
  .m-division .svc-hero h1{ font-size:24px !important; line-height:1.2 !important; text-align:center !important; margin:0 !important; }
  .m-division .cat-count{ display:flex !important; justify-content:center; margin:14px 0 0 !important; font-size:11px !important; }
  .m-division .cat-count b{ font-size:20px !important; }
  .m-division .svc-hero-actions{ display:grid !important; gap:10px; margin-top:20px !important; }
  .m-division .svc-hero-actions .svc-btn-ghost{ display:none !important; }
  .m-division .svc-hero-actions .svc-btn, .m-division main > section.svc-cta-band .svc-btn{
    display:flex !important; width:100%; height:50px; justify-content:center; align-items:center; gap:8px; border-radius:999px !important; }
  .m-division .cat-lead{ text-align:left !important; max-width:none !important; }
  .m-division .cat-lead p{ font-size:15px !important; line-height:1.65 !important; text-align:left !important; }

  .m-division main .cat-reg{ display:grid !important; gap:var(--m-gap) !important; border-top:0 !important; max-width:none !important; margin:0 !important; }
  .m-division main .cat-reg .cat-reg-row{ display:grid !important; grid-template-columns:26px 1fr 20px !important; align-items:center;
    gap:2px 12px !important; background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:13px 16px !important; min-height:0 !important; }
  .m-division main .cat-reg .cat-reg-row::before{ display:none !important; }
  .m-division main .cat-reg .cat-reg-n{ grid-column:1; grid-row:1 / span 2; font-size:13px !important; color:var(--teal-soft) !important; }
  .m-division main .cat-reg .cat-reg-name{ grid-column:2; grid-row:1; font-size:15px !important; line-height:1.3 !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .m-division main .cat-reg .cat-reg-new{ margin-left:8px; border:0 !important; padding:2px 6px !important; background:rgba(38,169,154,.16) !important; }
  .m-division main .cat-reg .cat-reg-desc{ grid-column:2; grid-row:2; font-size:12.5px !important; line-height:1.4 !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; color:var(--text-dark-muted) !important; }
  .m-division main .cat-reg .cat-reg-go{ grid-column:3; grid-row:1 / span 2; width:auto !important; height:auto !important;
    border:0 !important; background:none !important; justify-self:end; transform:none !important; }
  .m-division main .cat-reg .cat-reg-go svg{ width:16px; height:16px; fill:var(--teal-soft) !important; }
  .m-division main .cat-reg .cat-reg-row.m-hide{ display:none !important; }
  .m-division .m-more-btn{ display:block; width:100%; height:48px; margin-top:var(--m-gap); border:0; border-radius:var(--m-r);
    background:var(--m-card); color:var(--teal-soft); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .m-division .m-more-btn[hidden]{ display:none; }

  .m-division main .cat-divs{ display:grid !important; gap:var(--m-gap) !important; border-top:0 !important; max-width:none !important; margin:0 !important; }
  .m-division main .cat-divs .cat-div-row{ display:grid !important; grid-template-columns:70px 1fr auto !important; align-items:center;
    gap:0 12px !important; background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:14px 16px !important; }
  .m-division main .cat-divs .cat-div-mark{ grid-column:1 !important; font-size:11px !important; letter-spacing:.16em !important; color:var(--teal-soft) !important; }
  .m-division main .cat-divs .cat-div-copy{ grid-column:2 !important; min-width:0; }
  .m-division main .cat-divs .cat-div-copy h3{ font-size:14px !important; margin:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .m-division main .cat-divs .cat-div-copy p{ display:none !important; }
  .m-division main .cat-divs .cat-div-n{ grid-column:3 !important; font-size:12px !important; }

  .m-division main > section.svc-cta-band{ text-align:center !important; }
  .m-division main > section.svc-cta-band p{ font-size:16px !important; font-weight:700; line-height:1.4; margin:0 0 16px !important; }

  /* ---------- CONTACT ---------- */
  .m-contact main > section.contact-hero{ margin-top:75px !important; min-height:0 !important; max-height:none !important;
    display:block !important; text-align:center !important; padding:32px 22px 24px !important; }
  .m-contact .contact-hero .landing-texture, .m-contact .contact-hero .landing-grain,
  .m-contact .contact-scroll-hint, .m-contact .contact-hero .sec-eyebrow{ display:none !important; }
  .m-contact .contact-hero h1{ font-size:clamp(19px,6.2vw,24px) !important; line-height:1.2 !important; margin:0 0 12px !important;
    text-align:center !important; white-space:normal !important; word-break:break-word !important; overflow-wrap:break-word !important; }
  .m-contact .contact-hero p{ font-size:15px !important; line-height:1.55 !important; margin:0 !important; text-align:center !important; }

  .m-contact .contact-body{ display:block !important; padding:0 22px 24px !important; max-width:none !important; margin:0 !important; background:transparent !important; }
  .m-contact .contact-form-card{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:22px !important; margin:0 0 var(--m-gap) !important; }
  .m-contact .contact-form-card h2{ font-size:20px !important; text-align:center !important; margin:0 0 6px !important; }
  .m-contact .contact-form-card .form-sub{ font-size:14px !important; text-align:center !important; margin:0 0 18px !important; }
  .m-contact .form-group{ margin-bottom:12px !important; }
  .m-contact .form-group label{ font-size:13px !important; margin-bottom:6px !important; }
  .m-contact .form-group input, .m-contact .form-group select, .m-contact .form-group textarea{
    height:48px; border:0 !important; border-radius:12px !important; background:var(--m-bg) !important;
    font-size:16px !important; padding:0 14px !important; color:var(--text-dark-main) !important; }
  .m-contact .form-group textarea{ height:auto; min-height:96px; padding:12px 14px !important; }
  .m-contact .form-group select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394A3B8' stroke-width='1.6'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 14px center !important; padding-right:36px !important; }
  .m-contact .form-submit{ height:50px; border-radius:999px !important; font-size:15px !important; padding:0 !important; transform:none !important; }
  .m-contact .contact-cards{ display:grid !important; gap:var(--m-gap) !important; height:auto !important; }
  .m-contact .contact-info-card{ display:grid !important; grid-template-columns:36px 1fr; column-gap:14px; row-gap:1px; align-items:center;
    background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important; padding:14px 16px !important; flex:none !important; }
  .m-contact .contact-icon{ grid-row:1 / span 3; width:36px !important; height:36px !important; margin:0 !important; border:0 !important;
    background:rgba(38,169,154,.14) !important; border-radius:50% !important; }
  .m-contact .contact-icon svg{ width:16px !important; height:16px !important; }
  .m-contact .contact-info-card h3{ grid-column:2; font-size:13px !important; margin:0 !important; color:var(--text-dark-muted) !important; }
  .m-contact .contact-info-card a{ grid-column:2; font-size:15px !important; font-weight:700; margin:0 !important; overflow-wrap:anywhere; }
  .m-contact .contact-info-card .card-note{ grid-column:2; font-size:12px !important; }
  .m-contact .contact-map{ padding:0 22px 48px !important; max-width:none !important; margin:0 !important; background:transparent !important; }
  .m-contact .map-wrap{ border:0 !important; border-radius:var(--m-r) !important; height:220px !important; }

  /* ---------- BLOG ARTICLE ---------- */
  .m-post main > section.post-hero{ margin-top:75px !important; min-height:0 !important; max-height:none !important;
    display:block !important; text-align:center !important; padding:28px 22px 12px !important; }
  .m-post .post-breadcrumbs, .m-post .post-hero-art{ display:none !important; }
  .m-post .post-hero-inner{ max-width:none !important; text-align:center !important; }
  .m-post .post-cat{ display:block !important; border:0 !important; background:none !important; padding:0 !important; margin:0 0 10px !important;
    font-size:11px !important; letter-spacing:.18em !important; text-transform:uppercase; color:var(--teal-soft) !important; text-align:center !important; }
  .m-post .post-hero h1{ font-size:24px !important; line-height:1.22 !important; margin:0 0 12px !important; text-align:center !important; }
  .m-post .post-deck{ font-size:15px !important; line-height:1.55 !important; margin:0 0 14px !important; text-align:center !important; color:var(--text-dark-muted) !important; }
  .m-post .post-meta{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:4px 8px; font-size:12px !important; }
  .m-post .post-layout{ display:block !important; padding:12px 22px 48px !important; max-width:none !important; margin:0 !important; background:transparent !important; }
  .m-post .post-main{ max-width:none !important; width:auto !important; padding:0 !important; }
  .m-post .post-toc, .m-post #readingStatus{ display:none !important; }
  .m-post .post-body p{ font-size:16px !important; line-height:1.7 !important; margin:0 0 14px !important; text-align:left !important; }
  .m-post .post-body p.lead{ font-size:17px !important; }
  .m-post .post-body h2{ font-size:20px !important; line-height:1.25 !important; margin:28px 0 10px !important; text-align:left !important; }
  .m-post .post-body ul, .m-post .post-body ol{ padding-left:20px !important; margin:0 0 14px !important; }
  .m-post .post-body li{ font-size:16px !important; line-height:1.65 !important; margin-bottom:6px !important; }
  .m-post .post-figs-label{ margin:22px 0 10px !important; font-size:11px !important; letter-spacing:.18em !important; color:var(--teal-soft) !important; text-align:center !important; }
  .m-post .post-figs{ display:grid !important; grid-template-columns:1fr !important; gap:var(--m-gap) !important; margin:0 0 8px !important; }
  .m-post .post-fig{ display:grid !important; grid-template-columns:104px 1fr; align-items:center; column-gap:14px; background:var(--m-card) !important;
    border:0 !important; border-radius:var(--m-r) !important; padding:14px 16px !important; text-align:left !important; }
  .m-post .post-fig .num{ font-size:17px !important; font-weight:800; color:var(--teal-soft) !important; margin:0 !important; }
  .m-post .post-fig .cap{ font-size:13px !important; line-height:1.4 !important; margin:0 !important; }
  .m-post .post-table{ display:block; width:100%; overflow-x:auto; border:0 !important; font-size:14px !important; margin:0 0 16px !important; }
  .m-post .post-table th, .m-post .post-table td{ border:0 !important; padding:10px 12px !important; text-align:left !important; vertical-align:top; }
  .m-post .post-table tbody tr:nth-child(odd){ background:var(--m-card); }
  .m-post .post-table th{ color:var(--teal-soft) !important; font-size:12px !important; letter-spacing:.08em; text-transform:uppercase; }
  .m-post .post-callout, .m-post .post-disclaimer{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:16px 18px !important; font-size:14px !important; line-height:1.6 !important; margin:18px 0 !important; }
  .m-post .post-callout .lbl, .m-post .post-disclaimer .lbl{ display:block; color:var(--teal-soft) !important; font-size:11px !important;
    letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px; }
  .m-post .post-tags{ display:flex !important; flex-wrap:wrap; gap:8px; margin:18px 0 !important; }
  .m-post .post-tags .tag{ background:var(--m-card) !important; border:0 !important; border-radius:999px !important; padding:7px 12px !important; font-size:12.5px !important; }
  .m-post .post-divider{ display:none !important; }
  .m-post .author-card{ display:grid !important; grid-template-columns:48px 1fr; gap:14px; background:var(--m-card) !important; border:0 !important;
    border-radius:var(--m-r) !important; padding:16px 18px !important; margin-top:18px !important; }
  .m-post .author-card .avatar{ width:48px !important; height:48px !important; font-size:11px !important; }
  .m-post .author-card .a-bio{ font-size:13px !important; }
  .m-post .keep-reading-inner{ padding:0 !important; max-width:none !important; }
  .m-post .reading-grid{ display:grid !important; grid-template-columns:1fr !important; gap:var(--m-gap) !important; max-width:none !important; margin:0 !important; }
  .m-post main .reading-grid .blog-card{ display:block !important; background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:14px 16px !important; transform:none !important; box-shadow:none !important; overflow:hidden; }
  .m-post main .reading-grid .blog-card::after, .m-post main .reading-grid .blog-card .card-accent,
  .m-post main .reading-grid .blog-card .blog-thumb, .m-post main .reading-grid .blog-card .blog-excerpt{ display:none !important; }
  .m-post main .reading-grid .blog-card .blog-card-body{ display:grid !important; grid-template-columns:1fr auto; gap:4px 12px; padding:0 !important;
    text-align:left !important; align-items:baseline; }
  .m-post main .reading-grid .blog-card .blog-category{ grid-column:1; grid-row:1; font-size:11px !important; letter-spacing:.12em !important; color:var(--teal-soft) !important; text-align:left; }
  .m-post main .reading-grid .blog-card .blog-date{ grid-column:2; grid-row:1; margin:0 !important; padding:0 !important; font-size:11.5px !important; white-space:nowrap; }
  .m-post main .reading-grid .blog-card .blog-title{ grid-column:1 / -1; grid-row:2; font-size:16px !important; line-height:1.3 !important; margin:2px 0 0 !important; text-align:left; }

  /* ---------- CASE-STUDY ARTICLE (replaces the earlier hairline version) ---------- */
  .m-article main > section.cs-hero{ padding:32px 22px 24px !important; min-height:0 !important; }
  .m-article .cs-hero-inner, .m-article .cs-hero .hero-tagline, .m-article .cs-deck{ text-align:center !important; }
  .m-article main .cs-hero .sec-eyebrow, .m-article main .cs-hero .sec-head{ text-align:center !important; }
  .m-article .cs-hero .hero-tagline .line-white, .m-article .cs-hero .hero-tagline .line-teal{ font-size:24px !important; line-height:1.2 !important; }
  .m-article .cs-meta{ justify-content:center !important; }
  .m-article main .cs-figs .stats-ticker-row{ display:grid !important; gap:var(--m-gap) !important; border-top:0 !important; }
  .m-article main .cs-figs .stat-item{ background:var(--m-card) !important; border:0 !important; border-bottom:0 !important;
    border-radius:var(--m-r) !important; padding:14px 16px !important; margin:0 !important; }
  .m-article main .cs-note, .m-article main .cs-disclaimer{ background:var(--m-card) !important; border:0 !important; border-left:0 !important;
    border-radius:var(--m-r) !important; padding:14px 16px !important; }
  .m-article main .glass-grid, .m-article main .unique-grid, .m-article main .val-row{ display:grid !important; gap:var(--m-gap) !important; border-top:0 !important; }
  .m-article main .glass-card, .m-article main .unique-card, .m-article main .val-card{ background:var(--m-card) !important;
    border:0 !important; border-bottom:0 !important; border-radius:var(--m-r) !important; padding:14px 16px !important; }
  .m-article main .cs-rail{ display:grid !important; gap:var(--m-gap) !important; border-top:0 !important; }
  .m-article main .cs-rail .rail-node{ background:var(--m-card) !important; border:0 !important; border-bottom:0 !important;
    border-radius:var(--m-r) !important; padding:14px 16px !important; }
  .m-article main .cs-outcome{ text-align:center !important; }
  .m-article main .cs-grid{ display:grid !important; grid-template-columns:1fr !important; gap:var(--m-gap) !important; border-top:0 !important; max-width:none !important; margin:0 !important; }
  .m-article main .cs-grid .cs-card{ display:block !important; background:var(--m-card) !important; border:0 !important; border-bottom:0 !important;
    border-radius:var(--m-r) !important; padding:14px 16px !important; margin:0 !important; transform:none !important; box-shadow:none !important; }
  .m-article main .cs-grid .cs-card::after, .m-article main .cs-grid .card-accent, .m-article main .cs-grid .cs-thumb{ display:none !important; }
  .m-article main .cs-grid .cs-body{ display:grid !important; gap:4px; padding:0 !important; text-align:left !important; justify-items:start !important; align-items:start !important; }
  .m-article main .cs-grid .cs-division{ font-size:11px !important; letter-spacing:.14em !important; color:var(--teal-soft) !important; margin:0 !important; }
  .m-article main .cs-grid .cs-title{ font-size:16px !important; line-height:1.3 !important; margin:0 !important; }
  .m-article main .cs-grid .cs-result{ font-size:12.5px !important; margin:2px 0 0 !important; padding:0 !important; color:var(--text-dark-muted) !important; font-weight:500 !important; }

  /* ---------- LEGAL ---------- */
  .m-legal main > section.legal-hero{ margin-top:75px !important; min-height:0 !important; max-height:none !important;
    display:block !important; text-align:center !important; padding:32px 22px 20px !important; }
  .m-legal .legal-hero .division-badge{ display:block !important; border:0 !important; background:none !important; padding:0 !important; margin:0 0 10px !important;
    font-size:11px !important; letter-spacing:.18em !important; text-transform:uppercase; color:var(--teal-soft) !important; text-align:center !important; }
  .m-legal .legal-hero h1{ font-size:clamp(18px,5.8vw,24px) !important; line-height:1.2 !important; margin:0 0 12px !important; text-align:center !important; white-space:normal !important; word-break:break-word !important; overflow-wrap:break-word !important; }
  .m-legal .legal-hero p{ font-size:14.5px !important; line-height:1.55 !important; margin:0 0 10px !important; text-align:center !important; }
  .m-legal .legal-updated{ font-size:12px !important; text-align:center !important; }
  .m-legal .legal-jump{ display:flex !important; gap:8px; overflow-x:auto; padding:0 22px 8px !important; margin:0 !important; scrollbar-width:none;
    border:0 !important; background:none !important; position:static !important; }
  .m-legal .legal-jump::-webkit-scrollbar{ display:none; }
  .m-legal .legal-jump a{ flex:none; white-space:nowrap; background:var(--m-card) !important; border:0 !important; border-radius:999px !important;
    padding:9px 14px !important; font-size:13px !important; }
  .m-legal .legal-wrap{ max-width:none !important; padding:12px 22px 48px !important; margin:0 !important; }
  .m-legal .legal-part{ margin:28px 0 14px !important; padding:0 !important; border:0 !important; text-align:center !important; }
  .m-legal .legal-part-head > *:not(.legal-part-eyebrow){ display:none !important; }
  .m-legal .legal-part-eyebrow{ display:block !important; font-size:11px !important; letter-spacing:.18em !important; text-transform:uppercase;
    color:var(--teal-soft) !important; text-align:center !important; border:0 !important; background:none !important; padding:0 !important; }
  .m-legal .legal-part-title{ font-size:20px !important; font-weight:800; margin:6px 0 8px !important; text-align:center !important; }
  .m-legal .legal-part-lead{ font-size:14px !important; line-height:1.55 !important; text-align:center !important; margin:0 !important; }
  .m-legal .legal-wrap > section.m-lfold{ background:var(--m-card) !important; border:0 !important; border-radius:var(--m-r) !important;
    padding:0 16px !important; margin:0 0 var(--m-gap) !important; }
  .m-legal .m-lfold > h2{ display:flex !important; align-items:center; gap:12px; margin:0 !important; padding:14px 0 !important; font-size:15px !important;
    line-height:1.3 !important; cursor:pointer; text-align:left !important; border:0 !important; }
  .m-legal .m-lfold > h2 .legal-n{ color:var(--teal-soft) !important; font-size:13px !important; min-width:22px; }
  .m-legal .m-lfold > h2 .m-fold-plus{ margin-left:auto; color:var(--teal-soft); font-size:22px; line-height:1; transition:transform .28s ease; }
  .m-legal .m-lfold.open > h2 .m-fold-plus{ transform:rotate(45deg); }
  .m-legal .m-lbody{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
  .m-legal .m-lfold.open > .m-lbody{ grid-template-rows:1fr; }
  .m-legal .m-lbody-in{ overflow:hidden; min-height:0; }
  .m-legal .m-lfold.open .m-lbody-in{ padding-bottom:16px; }
  .m-legal .m-lbody-in p, .m-legal .m-lbody-in li{ font-size:14.5px !important; line-height:1.65 !important; color:var(--text-dark-muted) !important; text-align:left !important; }
  .m-legal .m-lbody-in h3{ font-size:15px !important; margin:14px 0 6px !important; color:var(--text-dark-main) !important; text-align:left !important; }
  .m-legal .m-lbody-in ul{ padding-left:18px !important; margin:0 0 10px !important; }
  .m-legal .m-lbody-in .legal-note{ background:var(--m-bg) !important; border:0 !important; border-radius:12px !important; padding:12px 14px !important; font-size:13.5px !important; }
}

/* CTAs REMOVED ON PHONES: no "More Questions? Let's Connect" card on Careers and Legal, and no closing
   "Tell us ... We'll map the route" band on any division page. */
@media (max-width: 992px){
  .m-careers .footer-cta, .m-legal .footer-cta, .m-division main > section.svc-cta-band{ display:none !important; }
}

/* SERVICE PAGES: "Working Together" section hidden on phones (the section is tagged m-gone by mobile-inner.js) */
@media (max-width: 992px){
  main > section.m-gone{ display:none !important; }
}

/* DIVISION HERO BUTTONS: both buttons shown ("Request a proposal" and "Browse the services"), stacked and centred */
@media (max-width: 992px){
  .m-division .svc-hero-actions{ display:flex !important; flex-direction:column !important; align-items:center !important;
    justify-content:center !important; gap:10px !important; margin:20px auto 0 !important; width:100% !important; }
  .m-division .svc-hero-actions .svc-btn{ display:flex !important; width:100% !important; max-width:300px; height:50px; margin:0 auto !important;
    justify-content:center !important; align-items:center !important; text-align:center !important; gap:8px; border-radius:999px !important; }
  .m-division .svc-hero-actions .svc-btn-ghost{ display:flex !important; border:0 !important; background:var(--m-card) !important; color:var(--teal-soft) !important; }
}

/* ABOUT US: mission and vision text centred in both boxes; industry chips centred */
@media (max-width: 992px){
  .m-about .mv-grid > div:not(.mv-divider), .m-about .mv-grid > div:not(.mv-divider) *{ text-align:center !important; }
  .m-about .mv-label{ text-align:center !important; }
  .m-about .industry-pills{ justify-content:center !important; }
  .m-about .ind-pill{ text-align:center !important; }
}

/* ============================================================
   ROUND 3: service, division, case-study article, blog article, legal, blogs, case studies, careers, contact, about.
   Centred text, one-line titles, equal boxes, shared pop-up.
   ============================================================ */
@media (max-width: 992px){

  /* ---- pop-up extras (division select + CV file used by "Send your CV") ---- */
  .m-field select{ width:100%; border:0; border-radius:12px; background:var(--s-field); color:var(--s-ink); font:inherit; font-size:16px; padding:0 14px; height:48px; }
  .m-field input[type=file]{ height:auto; padding:12px 14px; font-size:14px; }

  /* ---- section titles: one line each (a comma starts a second line), sized to fit ---- */
  .m-tl{ display:block; white-space:nowrap; }
  .m-wrap .m-tl{ white-space:normal; }
  main .sec-title{ text-wrap:balance; }

  /* ---- service pages ---- */
  .m-svc main .svc-hero .svc-hero-inner, .m-svc .svc-hero .division-badge, .m-svc .svc-hero h1, .m-svc .svc-hero p{ text-align:center !important; }
  .m-svc .svc-hero .division-badge{ display:block !important; margin-left:auto !important; margin-right:auto !important; }
  .m-svc .svc-hero-actions{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:10px !important; margin:20px auto 0 !important; width:100% !important; }
  .m-svc .svc-hero-actions .svc-btn{ display:flex !important; width:100% !important; max-width:300px; height:50px; margin:0 auto !important;
    justify-content:center !important; align-items:center !important; text-align:center !important; gap:8px; border-radius:999px !important; }
  .m-svc .svc-lead .mob-more{ display:block !important; margin:12px auto 0 !important; }
  .m-svc .ia-duo-panel, .m-svc .ia-duo-panel *{ text-align:center !important; }
  .m-svc .ia-duo-link{ justify-self:center; }
  .m-svc main .ia-duo-note{ background:rgba(38,169,154,.14) !important; color:var(--teal-soft) !important; font-weight:700 !important;
    text-align:center !important; }
  .m-svc .ia-practical-aside, .m-svc .ia-practical-aside *, .m-svc .ia-pb-item, .m-svc .ia-pb-item h3{ text-align:center !important; }
  .m-svc .ia-pb-item p{ display:flex !important; align-items:center; justify-content:center; text-align:center !important; text-wrap:balance; margin:0 !important; }
  .m-svc .svc-pills{ display:flex !important; flex-wrap:wrap; justify-content:center !important; gap:10px !important; }
  .m-svc .svc-pill{ text-align:center !important; justify-content:center !important; }
  .m-svc .svc-pill-divrow{ width:100%; display:flex; justify-content:center; }
  .m-svc .svc-pill-division{ justify-content:center !important; text-align:center !important; }

  /* ---- division ---- */
  .m-division .cat-lead, .m-division .cat-lead p{ text-align:center !important; }

  /* ---- about ---- */
  .m-about .expertise-left, .m-about .expertise-left *{ justify-content:center !important; text-align:center !important; }

  /* ---- blogs, case studies and related cards: everything centred ---- */
  .m-blogs main .blog-card .blog-card-body, .m-post main .reading-grid .blog-card .blog-card-body{
    grid-template-columns:1fr !important; justify-items:center !important; text-align:center !important; }
  .m-blogs main .blog-card .blog-category, .m-post main .reading-grid .blog-card .blog-category{ grid-column:1 !important; grid-row:1 !important; text-align:center !important; }
  .m-blogs main .blog-card .blog-title, .m-post main .reading-grid .blog-card .blog-title{ grid-column:1 !important; grid-row:2 !important; text-align:center !important; }
  .m-blogs main .blog-card .blog-date, .m-post main .reading-grid .blog-card .blog-date{ grid-column:1 !important; grid-row:3 !important; text-align:center !important; }
  .m-cases main .cs-grid .cs-body, .m-article main .cs-grid .cs-body{ justify-items:center !important; text-align:center !important; }
  .m-cases main .cs-grid .cs-division, .m-cases main .cs-grid .cs-title, .m-cases main .cs-grid .cs-result,
  .m-article main .cs-grid .cs-division, .m-article main .cs-grid .cs-title, .m-article main .cs-grid .cs-result{ text-align:center !important; }

  /* ---- careers and contact ---- */
  .m-careers .values-strip{ justify-content:center !important; }
  .m-contact .footer-cta{ display:none !important; }

  /* ---- case-study article ---- */
  .m-article .cs-meta{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; }
  .m-article .cs-meta i{ display:none !important; }
  .m-article main .cs-figs .stat-item{ display:block !important; text-align:center !important; }
  .m-article main .cs-figs .stat-num, .m-article main .cs-figs .stat-label{ display:block !important; text-align:center !important; width:auto !important; }
  .m-article .cs-copy, .m-article .cs-narrow, .m-article main .cs-note, .m-article main .cs-disclaimer{ text-align:center !important; }
  .m-article .glass-inner, .m-article .cs-val-inner{ display:contents !important; }
  .m-article main .m-afold{ display:grid !important; grid-template-columns:1fr auto; column-gap:12px; align-items:center; text-align:center !important; cursor:pointer; }
  .m-article .m-afold .cs-glass-index, .m-article .m-afold .cs-mag-index{ grid-column:1; grid-row:1; text-align:center !important; margin:0 !important; }
  .m-article .m-afold .cs-glass-title, .m-article .m-afold .cs-mag-title{ grid-column:1; grid-row:2; text-align:center !important; margin:2px 0 0 !important; }
  .m-article .m-afold .m-afold-plus{ grid-column:2; grid-row:1 / span 2; color:var(--teal-soft); font-size:22px; line-height:1; transition:transform .28s ease; pointer-events:none; }
  .m-article .m-afold.m-open .m-afold-plus{ transform:rotate(45deg); }
  .m-article .m-afold .m-afold-body{ grid-column:1 / -1; grid-row:3; max-height:0; overflow:hidden; opacity:0; margin:0 !important; text-align:center !important;
    transition:max-height .3s ease, opacity .22s ease, margin-top .22s ease; }
  .m-article .m-afold.m-open .m-afold-body{ max-height:320px; opacity:1; margin-top:8px !important; }
  .m-article .unique-card, .m-article .unique-card *, .m-article .val-card, .m-article .val-card *,
  .m-article main .cs-outcome, .m-article main .cs-outcome *{ text-align:center !important; }
  .m-article .unique-desc, .m-article .cs-val-copy{ text-wrap:balance; }
  .m-article .cs-rail .rail-copy{ font-size:13px !important; }

  /* ---- blog article: all text centred, no divider lines, even margins, table fits the screen ---- */
  .m-post .post-body, .m-post .post-body p, .m-post .post-body p.lead, .m-post .post-body h2, .m-post .post-body h3, .m-post .post-body li,
  .m-post .post-callout, .m-post .post-callout *, .m-post .post-disclaimer, .m-post .post-disclaimer *, .m-post .author-card, .m-post .author-card *{ text-align:center !important; }
  .m-post .post-body ul, .m-post .post-body ol{ list-style:none !important; padding:0 !important; margin:0 0 14px !important; }
  .m-post .post-body h2{ margin:36px 0 14px !important; }
  .m-post .post-body h3{ margin:30px 0 14px !important; max-width:none !important; }
  .m-post .post-body p{ margin:0 0 14px !important; max-width:none !important; }
  .m-post .post-body .lead{ margin:0 0 20px !important; }
  .m-post .post-tags{ justify-content:center !important; }
  .m-post .post-figs{ border:0 !important; max-width:none !important; margin:12px 0 8px !important; }
  .m-post .post-figs::before, .m-post .post-figs::after{ display:none !important; }
  .m-post .post-fig{ grid-template-columns:104px 1fr !important; border:0 !important; text-align:center !important; }
  .m-post .post-fig .num{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center !important; }
  .m-post .post-fig .m-n1{ font-size:24px; font-weight:800; line-height:1; color:var(--teal-soft); }
  .m-post .post-fig .m-n2{ font-size:12px; font-weight:600; margin-top:4px; color:var(--text-dark-muted); }
  .m-post .post-fig .cap{ text-align:center !important; }
  .m-post .post-table{ display:table !important; table-layout:fixed; width:100% !important; max-width:none !important; overflow:visible !important;
    margin:14px 0 24px !important; font-size:13px !important; }
  .m-post .post-table thead, .m-post .post-table tbody{ display:table-row-group !important; min-width:0 !important; width:auto !important; }
  .m-post .post-table th, .m-post .post-table td{ width:50% !important; border:0 !important; padding:10px 12px !important; overflow-wrap:anywhere; }
  .m-post .author-card{ grid-template-columns:1fr !important; justify-items:center; border:0 !important; }
  .m-post .author-card .avatar{ display:none !important; }

  /* ---- legal: company card on three lines ---- */
  .m-ln{ display:block; text-align:center; }
  .m-legal .m-lbody-in .legal-note{ text-align:center !important; }
}

/* SECTION SPACING: the space above a section's title equals the space between the title and the content below it (32px both),
   and the bottom of a section matches its top. Same on every page. */
@media (max-width: 992px){
  main .sec-head{ margin-bottom:32px !important; }
  main > .network-strip{ padding:32px 0 !important; }
  main > .network-strip .sec-head{ margin-bottom:32px !important; }
  .m-about .pill-eyebrow{ margin:0 0 32px !important; }
  .m-careers .careers-sec .pill-ey{ margin:0 0 32px !important; }
  .m-legal .legal-part{ margin:32px 0 32px !important; }
  .m-post .post-body h2{ margin:32px 0 18px !important; }
}

/* SERVICE PAGES, LOGIC CHECK: centred overview text; the "All <division> services" button centred (an older rule pinned it
   to the left with !important); practical-bits descriptions on one fixed line height. */
@media (max-width: 992px){
  .m-svc .svc-lead, .m-svc .svc-lead p{ text-align:center !important; }
  .m-svc .svc-pills{ justify-content:center !important; }
  .m-svc .svc-pill-divrow{ display:flex !important; width:100% !important; justify-content:center !important; margin-top:12px !important; }
  .m-svc .svc-pill-division{ margin:0 auto !important; }
  .m-svc .ia-pb-item p{ font-size:13px; line-height:1.5 !important; }
}

/* FLAGSHIP SERVICE BLOCK (SOP page): a normal section with one soft card, a short stack and the same curved button as the CTAs.
   The big gap came from the text block having a 380px flex-basis inside a column. */
@media (max-width: 992px){
  .m-svc .flagship-teaser{ background:none !important; border:0 !important; padding:var(--m-sec-y) var(--m-sec-x) !important; }
  .m-svc .flagship-teaser-inner{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important;
    text-align:center !important; background:var(--m-card); border-radius:var(--m-r); padding:22px !important; max-width:none !important; margin:0 !important; }
  .m-svc .flagship-teaser-badge{ border:0 !important; background:none !important; padding:0 !important; color:var(--teal-soft) !important;
    font-size:11px !important; letter-spacing:.18em !important; }
  .m-svc .flagship-teaser-copy{ flex:none !important; width:100% !important; min-width:0 !important; text-align:center !important; }
  .m-svc .flagship-teaser-copy h3{ font-size:18px !important; line-height:1.3 !important; margin:0 0 8px !important; text-align:center !important; }
  .m-svc .flagship-teaser-copy p{ font-size:14px !important; line-height:1.55 !important; margin:0 !important; text-align:center !important; }
  .m-svc .flagship-teaser-cta{ flex:none !important; width:100% !important; margin-top:6px !important; }
  .m-svc .flagship-teaser-cta .svc-btn-flagship{ display:flex !important; width:100% !important; height:50px; padding:0 !important; justify-content:center;
    align-items:center; gap:8px; border-radius:999px !important; background:var(--teal-primary) !important; border:0 !important; color:#fff !important;
    font-size:15px !important; font-weight:700 !important; white-space:normal; box-shadow:none !important; transform:none !important; }
  .m-svc .flagship-teaser-cta .svc-btn-flagship svg{ fill:#fff !important; }
}

/* ============================================================
   ABOUT US ONLY: Our Network shows the three groups one under the other (as on the homepage)
   instead of tabs. Every other inner page keeps the Clients / Channel Partners / Strategic Partners tabs.
   ============================================================ */
@media (max-width: 992px){
  .m-about main > .network-strip .net-tabs{ display:none !important; }
  .m-about main > .network-strip .net-panel{ display:block !important; margin:0 0 20px; }
  .m-about main > .network-strip .net-panel:last-child{ margin-bottom:0; }
  .m-about main > .network-strip .net-panel::before{ content:attr(data-panel); display:block; margin:0 0 10px;
    font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#26A99A; }
  .m-about main > .network-strip .net-more{ color:#26A99A !important; }
}