/* ─── Mobile responsiveness overrides ─────────────────────────────────
   Targets inline-style React components via classNames + !important.
   Breakpoint: 768px (tablet & below) */

@media (max-width: 768px) {

  /* ── NAV ───────────────────────────────────────────── */
  .vbm-nav-inner {
    padding: 0 18px !important;
    height: 60px !important;
  }
  .vbm-nav-links {
    display: none !important;
  }
  .vbm-nav-burger {
    display: inline-flex !important;
    margin-left: auto !important;
  }
  .vbm-mobile-menu {
    display: block !important;
  }

  /* ── HERO ──────────────────────────────────────────── */
  .vbm-hero {
    min-height: 100svh !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .vbm-hero-inner {
    padding: 56px 22px 36px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  .vbm-hero-h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.08 !important;
    margin: 0 0 14px !important;
  }
  .vbm-hero-sub {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 0 20px !important;
  }
  .vbm-hero-stats {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
  .vbm-hero-stats > div {
    padding: 0 0 0 12px !important;
    border-left: 1px solid rgba(255,255,255,0.14) !important;
    border-top: none !important;
  }
  .vbm-hero-stats > div:first-child {
    border-left: none !important;
    padding-left: 0 !important;
  }
  .vbm-hero-stats .serif {
    font-size: clamp(18px, 5.6vw, 22px) !important;
    line-height: 1 !important;
  }
  .vbm-hero-stats > div > div:last-child {
    font-size: clamp(10px, 3vw, 12px) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  .vbm-hero-dots {
    bottom: 12px !important;
    right: 16px !important;
  }

  /* ── BUTTON GROUPS — let CTAs span full width on phone ── */
  .vbm-hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  .vbm-hero-cta-row button {
    width: 100% !important;
    padding: 13px 16px !important;
    font-size: 13px !important;
  }

  /* ── OUTCOMES — collapse 12-col mosaic and numbered rows ─ */
  .vbm-mosaic {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .vbm-mosaic > * {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: 180px !important;
  }
  .vbm-numbered-row {
    grid-template-columns: 40px 1fr 18px !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding: 18px 0 !important;
  }
  .vbm-numbered-row .vbm-numbered-body {
    grid-column: 1 / -1 !important;
  }

  /* ── TEAM ──────────────────────────────────────────── */
  .vbm-team-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── UNIVERSAL GRID COLLAPSE ──────────────────────────
     Any inline grid-template-columns becomes single column on phone.
     Covers all the irregular fractional templates (1.6fr 1fr, minmax(0,400px) 1fr,
     1.5fr 1fr 1fr 1.2fr, 60px 1fr 1.4fr, etc) without enumerating each one. */
  [style*="grid-template-columns"]:not(.vbm-hero-stats):not(.vbm-mosaic):not(.vbm-numbered-row) {
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
  }

  /* Hero stats — stack vertically with horizontal dividers between rows */
  .vbm-hero-stats { grid-template-columns: 1fr !important; gap: 0 !important; }
  .vbm-hero-stats > div {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.14) !important;
    padding: 18px 0 0 !important;
  }
  .vbm-hero-stats > div:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }

  /* Restore: mosaic explicitly set above */

  /* ── GENERIC SECTION PADDING — bring 32px+ horizontal padding down ── */
  section[style*="padding: 80px 32px"],
  section[style*="padding: 72px 32px"],
  section[style*="padding: 96px 32px"],
  section[style*="padding: 64px 32px"],
  section[style*="padding: '72px 32px"],
  section[style*="padding: '80px 32px"],
  section[style*="padding: '96px 32px"],
  section[style*="padding: '64px 32px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* ── GENERIC HEADING SHRINK — large display headings ── */
  h1[style*="fontSize: 60"],
  h1[style*="fontSize: 56"],
  h1[style*="fontSize: 52"],
  h1[style*="fontSize: 48"],
  h1[style*="font-size: 60"],
  h1[style*="font-size: 56"],
  h1[style*="font-size: 52"],
  h1[style*="font-size: 48"] {
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
  }
  h2[style*="fontSize: 44"],
  h2[style*="fontSize: 40"],
  h2[style*="fontSize: 36"],
  h2[style*="font-size: 44"],
  h2[style*="font-size: 40"],
  h2[style*="font-size: 36"] {
    font-size: 26px !important;
    line-height: 1.18 !important;
  }
  h3[style*="fontSize: 28"],
  h3[style*="fontSize: 26"],
  h3[style*="fontSize: 24"] {
    font-size: 22px !important;
  }

  /* ── BODY COPY — long lines on phone ── */
  p[style*="fontSize: 19"],
  p[style*="fontSize: 18"],
  p[style*="fontSize: 17"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* ── BUTTONS — stretch CTAs full width when stacked ── */
  div[style*="display: flex"][style*="gap: 12"] > button,
  div[style*="display:flex"][style*="gap: 12"] > button {
    min-height: 44px !important;
  }

  /* ── PADDING on nested .sectionInner / generic containers ── */
  div[style*="maxWidth: 1200"][style*="padding"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ── Outcomes numbered rows + case-study rows — collapse multi-col internal grids ── */
  [style*="gridTemplateColumns: '120px"],
  [style*="gridTemplateColumns: '160px"],
  [style*="gridTemplateColumns: '80px"],
  [style*="grid-template-columns: 120px"],
  [style*="grid-template-columns: 160px"] {
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
  }

  /* ── Any minWidth/maxWidth pinning that exceeds viewport ── */
  [style*="minWidth: 720"],
  [style*="minWidth: 640"],
  [style*="minWidth: 560"],
  [style*="min-width: 720"],
  [style*="min-width: 640"],
  [style*="min-width: 560"] {
    min-width: 0 !important;
  }

  /* ── Kill huge vertical paddings on About-page-style sections ── */
  section[style*="padding: 120px"],
  section[style*="padding: 112px"],
  section[style*="padding: 110px"],
  section[style*="padding: 104px"],
  section[style*="padding: 100px"],
  section[style*="padding: 96px"],
  section[style*="padding: '120px"],
  section[style*="padding: '112px"],
  section[style*="padding: '104px"],
  section[style*="padding: '100px"],
  section[style*="padding: '96px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Engagement model cards: hide bullets + view more on mobile, keep name/lead/Explore */
  .vbm-oa-expandable,
  .vbm-oa-viewmore {
    display: none !important;
  }

  /* Case study scroller cards: fit to viewport, allow auto height */
  [data-cs-card] {
    flex: 0 0 calc(100vw - 64px) !important;
    min-height: 0 !important;
  }

  /* ── Trim oversized section vertical padding on mobile ── */
  section[style*="padding: '80px 0 88px"],
  section[style*="padding: 80px 0 88px"],
  section[style*="padding: '96px 0"],
  section[style*="padding: 96px 0"],
  section[style*="padding: '80px 0"],
  section[style*="padding: 80px 0"],
  section[style*="padding: '72px 0"],
  section[style*="padding: 72px 0"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* ── Make the last section flush with the footer on mobile (every page) ── */
  /* Ensure document ends exactly at footer bottom — no body bg showing past footer */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  #root, #root > div {
    min-height: 0 !important;
  }
  /* ── OUR APPROACH (services) page — smaller body, even card gap on mobile ── */
  /* Intro paragraph under the page title */
  section [style*="font-size: 19px"][style*="line-height: 1.6"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  /* Engagement-card title */
  section [style*="font-size: 28px"][style*="letter-spacing: -0.015em"] {
    font-size: 24px !important;
  }
  /* Engagement-card lead paragraph */
  section [style*="font-size: 15px"][style*="color: rgb(51, 65, 85)"][style*="line-height: 1.6"] {
    font-size: 15.5px !important;
  }
  /* Even gap between stacked engagement cards */
  section [style*="grid-template-columns: repeat(2, 1fr)"][style*="gap: 24px"] {
    gap: 20px !important;
  }
  /* Trim the OA cards section's tall bottom padding on mobile */
  section[style*="padding: 24px 32px 112px"] {
    padding: 8px 18px 32px !important;
  }

  /* ── CBO / MFO detail pages on mobile ─────────────────────────── */
  /* Hero section vertical breathing room */
  .vbm-page-hero-inner {
    /* Horizontal gutter is provided by `section` (20px) + inner sectionInner (32px) = 52px.
       Keep horizontal padding 0 here so the hero matches every other section. */
    padding: 36px 0 44px !important;
  }
  .vbm-page-hero-eyebrow {
    display: none !important;
  }
  .vbm-page-hero-eyebrow-OLD {
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 18px !important;
  }
  /* Hero H1 — 72px desktop → 42px mobile (larger, more presence) */
  .vbm-page-hero-h1,
  section [style*="font-size: 72px"] {
    font-size: 42px !important;
    line-height: 1.05 !important;
    margin-bottom: 18px !important;
  }
  /* Hero lead (28px serif) → 18px */
  section [style*="font-size: 28px"][style*="line-height: 1.35"] {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-bottom: 28px !important;
  }
  /* Hero two-column body paragraphs (15.5px) */
  section [style*="font-size: 15.5px"] {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }
  /* CBO/MFO hero — match Our Approach hero vertical rhythm on mobile.
     OA hero: section padding-top 44px → eyebrow → 20px gap → H1.
     We mirror that here: breadcrumb wrapper top 44px (arrow sits where eyebrow sits),
     then hero wrapper top 20px (H1 sits where H1 sits). */
  section > div[style*="padding: 60px 32px 100px"] {
    padding: 20px 18px 48px !important;
  }
  /* "The Reality" navy band h2 */
  section [style*="font-size: 38px"] {
    font-size: 24px !important;
    width: auto !important;
    line-height: 1.2 !important;
  }
  /* Reality list items (20px) */
  section li [style*="font-size: 20px"] {
    font-size: 16.5px !important;
    line-height: 1.5 !important;
  }
  /* Reality list number column — shrink 64px col */
  section li[style*="grid-template-columns: 64px 1fr"] {
    grid-template-columns: 44px 1fr !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }
  /* "Industries" / "How It Works" / "What Changes" h2 (40-44px) */
  section [style*="font-size: 40px"][style*="letter-spacing: -0.015em"],
  section [style*="font-size: 44px"][style*="letter-spacing: -0.015em"] {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin: 14px 0 12px !important;
  }
  /* Industries row: 6 items in flex space-between → 3-col grid 2 rows on mobile */
  section [style*="justify-content: space-between"][style*="gap: 32px"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px 16px !important;
    justify-items: center !important;
  }
  /* Industries label */
  section [style*="font-size: 18px"][style*="white-space: nowrap"] {
    font-size: 14px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  /* Timeline: 4-col grid → vertical stack with dot+phase pinned left */
  section [style*="grid-template-columns: repeat(4, 1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  /* Hide the horizontal connector line on mobile (it spans only desktop layout) */
  section [style*="position: absolute"][style*="height: 1px"][style*="background: rgb(209, 213, 219)"] {
    display: none !important;
  }
  /* Timeline item title (26px) */
  section [style*="font-size: 26px"][style*="letter-spacing: -0.01em"] {
    font-size: 22px !important;
    margin: 0 0 8px !important;
  }
  /* Stats grid 3-col → 1-col stacked */
  section [style*="grid-template-columns: repeat(3, 1fr)"][style*="border-top: 1px solid"] {
    grid-template-columns: 1fr !important;
  }
  section [style*="grid-template-columns: repeat(3, 1fr)"][style*="border-top: 1px solid"] > div {
    border-left: none !important;
    border-top: 1px solid rgb(199, 212, 225) !important;
    border-bottom: none !important;
    padding: 28px 4px 24px !important;
  }
  section [style*="grid-template-columns: repeat(3, 1fr)"][style*="border-top: 1px solid"] > div:first-child {
    border-top: none !important;
  }
  /* Stat value 64px → 44px */
  section [style*="font-size: 64px"] {
    font-size: 44px !important;
    margin-bottom: 10px !important;
  }
  /* "Next Step" h2 (32px serif) */
  section [style*="font-size: 32px"][style*="line-height: 1.3"] {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  /* Section vertical padding on mobile: 96/104px → 44px */
  section[style*="padding: 96px 32px"],
  section[style*="padding: 104px 32px"] {
    padding: 44px 18px !important;
  }
  /* CBO/MFO breadcrumb wrapper — tight to the header on mobile */
  section [style*="padding: 28px 32px 0"] {
    padding: 12px 18px 0 !important;
  }
  /* Reality split grid (400px + 1fr) collapse already by universal rule;
     tighten its gap */
  section [style*="grid-template-columns: minmax(0, 400px) 1fr"] {
    gap: 28px !important;
  }
  /* CBO hero two-column body grid collapse + reduced gap */
  section [style*="grid-template-columns: 1fr 1fr"][style*="gap: 56px"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-top: 24px !important;
  }
  /* Next-step buttons row should wrap, button shrink slightly */
  section [style*="flex-wrap: wrap"][style*="justify-content: space-between"] > div[style*="display: flex"] button {
    padding: 14px 22px !important;
    font-size: 15px !important;
  }

  /* MFO Our Commitment paragraphs — match MFO hero subhead (18px) on mobile */
  .vbm-mfo-commitment-p {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin: 0 0 14px !important;
  }

  /* ── CBO "Next Step" closing band — mobile cleanup ── */
  .vbm-cbo-nextstep {
    padding: 36px 18px 40px !important;
  }
  section .vbm-cbo-nextstep-row,
  .vbm-cbo-nextstep .vbm-cbo-nextstep-row,
  .vbm-cbo-nextstep-row.vbm-cbo-nextstep-row.vbm-cbo-nextstep-row {
    display: block !important;
    grid-template-columns: none !important;
    gap: 22px !important;
  }
  .vbm-cbo-nextstep-text {
    max-width: none !important;
    width: 100% !important;
  }
  .vbm-cbo-nextstep-text p[class="serif"],
  .vbm-cbo-nextstep-text .serif {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 10px 0 10px !important;
  }
  .vbm-cbo-nextstep-text p:not(.serif) {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
  .vbm-cbo-nextstep-text {
    display: block !important;
    margin-bottom: 22px !important;
  }
  .vbm-cbo-nextstep-btns {
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .vbm-cbo-nextstep-btns button {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Stop <main> from flex-stretching past its content (leaves a white band before footer) */
  main[style*="flex"] {
    flex: 0 0 auto !important;
  }
  section:last-of-type,
  main > section:last-child,
  #root > div > section:last-of-type {
    padding-bottom: 28px !important;
    margin-bottom: 0 !important;
  }
  section:last-of-type [class*="casesScroller"],
  section:last-of-type [data-cs-scroller],
  section:last-of-type > div:last-of-type {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Cases scroller specifically: kill the 8px scrollbar padding on mobile */
  section[style*="background: rgb(240, 245, 250)"] > div[style*="overflow"],
  section[style*="#F0F5FA"] > div[style*="overflow"],
  section[style*="F0F5FA"] > div[style*="scroll-snap"] {
    padding-bottom: 0 !important;
  }

  /* Disable sticky-centered inner columns on phone — they look misplaced when stacked */
  [style*="position: sticky"][style*="translateY(-50%)"],
  [style*="position:sticky"][style*="translateY(-50%)"] {
    position: static !important;
    transform: none !important;
  }

  /* ── Empty-spacer-style spacers ── */
  [style*="minHeight: 600"],
  [style*="minHeight: 580"],
  [style*="minHeight: 500"],
  [style*="minHeight: 480"],
  [style*="minHeight: 420"],
  [style*="minHeight: 380"],
  [style*="min-height: 600"],
  [style*="min-height: 580"],
  [style*="min-height: 500"],
  [style*="min-height: 480"],
  [style*="min-height: 420"],
  [style*="min-height: 380"] {
    min-height: 0 !important;
  }

  /* ── Tame oversized line-heights on display text ── */
  [style*="lineHeight: 1.04"],
  [style*="lineHeight: 1.05"] {
    line-height: 1.1 !important;
  }

  /* ── OUR APPROACH — make engagement cards tappable on mobile ── */
  .vbm-oa-card {
    cursor: pointer !important;
  }
  .vbm-oa-card:active {
    transform: translateY(-2px) !important;
  }

  /* ── BREADCRUMB on detail pages — show arrow only on mobile ── */
  .vbm-breadcrumb-label,
  .vbm-breadcrumb-current {
    display: none !important;
  }
  .vbm-breadcrumb-back {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* ── ABOUT PAGE — mobile typography ────────────────── */
  .vbm-about {
    padding: 44px 22px 56px !important;
  }
  .vbm-about-h1 {
    line-height: 1.05 !important;
    margin: 0 0 20px !important;
  }
  .vbm-about-p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 14px !important;
  }

  /* ── Allow long words / hyphens to break instead of overflow ── */
  h1, h2, h3, p {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ── SECTION PADDING — generic horizontal squeeze ───── */
  .vbm-section-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .vbm-section-pad {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ── HEADINGS — large desktop H1/H2s ────────────────── */
  .vbm-page-h1,
  .vbm-about-h1 {
    font-size: 42px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
  }
  /* Shrink only "Business management" so it fits on one line on mobile */
  .vbm-about-h1-l1 {
    font-size: 32px !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .vbm-page-h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  /* ── FOOTER ────────────────────────────────────────── */
  .vbm-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ── SITE-WIDE: tighten horizontal padding on all sections ── */
  section[style*="padding: 96px 32px"],
  section[style*="padding: 104px 32px"],
  section[style*="padding: 110px 32px"],
  section[style*="padding: 72px 32px"],
  section[style*="padding: 80px 32px"],
  section[style*="padding: 64px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── CONTACT META CARDS ─────────────────────────────── */
  .vbm-contact-meta {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .vbm-contact-meta > * {
    padding: 14px 16px !important;
  }

  /* CBO timeline — tighten phase-to-title gap on mobile, keep clear gap between items */
  .vbm-cbo-timeline-phase {
    margin-bottom: 6px !important;
  }
  .vbm-cbo-timeline-item + .vbm-cbo-timeline-item {
    margin-top: 22px !important;
  }

  /* CBO "What Changes" stats — force horizontal stack with top dividers on mobile */
  .vbm-cbo-stats {
    grid-template-columns: 1fr !important;
    border-top: none !important;
  }
  .vbm-cbo-stat {
    border-left: none !important;
    border-top: 1px solid #C7D4E1 !important;
    padding: 28px 4px 24px !important;
  }
  .vbm-cbo-stat:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
}

/* Hide the hamburger on desktop */
.vbm-nav-burger { display: none; }
.vbm-mobile-menu { display: none; }