/* ============================================
   Mobile pass — global responsive overrides.
   Loaded LAST so it overrides base.css,
   section-pages.css, and per-page inline <style>.

   Breakpoints:
     <= 768px  phone / small tablet
     <= 480px  narrow phone
   ============================================ */

@media (max-width: 768px) {

  /* ——— Page scaffolding ——— */
  main.section-page { padding: 92px 18px 32px; }

  /* ——— Topbar / footer chrome ——— */
  .topbar { padding: 12px 16px; font-size: 11px; }
  .topbar nav { gap: 14px; flex-wrap: wrap; }
  .topbar .mark { gap: 8px; }

  footer.site-footer { padding: 36px 18px 20px; margin-top: 56px; font-size: 11px; }
  footer.site-footer .row { gap: 18px; align-items: flex-start; }
  footer.site-footer .cols { gap: 28px; flex-wrap: wrap; }

  /* ——— Section heads ——— */
  .section-head { padding-top: 100px; padding-bottom: 14px; margin-bottom: 28px; }
  .section-head h2 { font-size: clamp(28px, 9vw, 48px); }

  /* ——— HERO ——— */
  .sp-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 0 56px;
  }
  .sp-hero .lead .kicker {
    font-size: 10px; letter-spacing: 0.2em; margin-bottom: 18px;
  }
  .sp-hero .numeral {
    font-size: clamp(96px, 36vw, 180px);
    margin: 0 0 4px;
  }
  .sp-hero h1 {
    font-size: clamp(34px, 9vw, 56px);
    line-height: 1;
    margin-bottom: 18px;
    max-width: none;
  }
  .sp-hero .sub { font-size: 15px; line-height: 1.55; max-width: none; }
  .sp-hero .ticker { font-size: 11px; line-height: 1.75; padding-left: 14px; }
  .sp-hero .ticker .trow { grid-template-columns: 90px 46px 1fr; gap: 8px; }

  /* ——— THESIS ——— */
  .thesis {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 56px 0;
  }
  .thesis .kicker { font-size: 10px; letter-spacing: 0.2em; }
  .thesis h2 {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.06;
    margin-bottom: 22px;
    max-width: none;
    /* Defeat per-page inline width: 750px / 700px on the thesis h2 */
    width: auto !important;
  }
  .thesis .body p { font-size: 15px; line-height: 1.6; max-width: none; }
  .thesis .pull {
    margin: 32px 0 0;
    padding: 18px 0;
    font-size: clamp(24px, 6.5vw, 36px);
    max-width: none;
  }

  /* ——— Chapter bands ——— */
  .chap-band { padding: 72px 0; gap: 12px; }
  .chap-band h3 { font-size: clamp(32px, 9vw, 56px); max-width: none; }

  /* ——— Case study ——— */
  .case { padding: 56px 0; scroll-margin-top: 80px; }

  .case-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 28px;
  }
  .case-head .specimen { font-size: clamp(48px, 14vw, 96px); }
  .case-head .specimen-logo img { height: clamp(58px, 12vw, 96px); }
  .case-head .pills {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    padding-top: 0;
  }
  .case-head .pills .pill {
    font-size: 9px;
    padding: 4px 9px;
    letter-spacing: 0.1em;
  }

  .case h2.claim {
    font-size: clamp(26px, 7.5vw, 40px);
    line-height: 1.1;
    margin-bottom: 28px;
    max-width: none;
  }

  .case-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .case-body .side {
    font-size: 10px;
    letter-spacing: 0.16em;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
  }
  .case-body .main p { font-size: 15px; line-height: 1.6; max-width: none; }
  .case-body .main h4 { margin: 32px 0 12px; }
  .case-body .main li { font-size: 15px; max-width: none; }

  /* Pull quotes (was negative-margined into the gutter) */
  .pullq {
    margin: 24px 0;
    padding: 18px 0;
    font-size: clamp(22px, 6vw, 32px);
    max-width: none;
  }

  /* Stat blocks default to 2 columns */
  .stats, .stats.c3, .stats.c2, .stats.c4 { grid-template-columns: repeat(2, 1fr); }
  .stats .s { padding: 18px; }
  .stats .s .v { font-size: clamp(26px, 8vw, 38px); }

  /* Tri-columns + partner cards stack */
  .tri, .tri.q4, .partner-cards { grid-template-columns: 1fr; }
  .tri .col, .partner-cards .pc { padding: 18px; }

  /* Partner intro line (inline pill row) */
  .partner-intro { font-size: clamp(18px, 5vw, 24px); line-height: 1.5; }
  .partner-intro .pp { padding: 1px 7px; margin: 1px 1px; font-size: 0.9em; white-space: nowrap; }
  .partner-sub { font-size: 14px; max-width: none; margin: 22px 0 4px; }

  /* Quadrants stack */
  .quads { grid-template-columns: 1fr; }
  .quads .q { padding: 22px; }
  .quads .q h5 { font-size: 16px; }
  .quads .q li { font-size: 13px; }

  /* Straji 7-cat grid → 1 col */
  .cat-grid { grid-template-columns: 1fr; }
  .cat-grid .cat { min-height: 0; padding: 18px; gap: 6px; }
  .cat-grid .cat h5 { font-size: 15px; }

  /* Vol — community strategy + value grid */
  #vol .vol-strategy { grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
  #vol .vs-card { padding: 22px 20px 24px; }
  #vol .vs-head { font-size: 20px; padding-bottom: 10px; }
  #vol .vs-value-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 12px;
  }
  #vol .vs-value-grid > div { font-size: 14px; }
  #vol .vs-pillars { grid-template-columns: 14px 1fr; gap: 10px; }
  #vol .vs-pillars-rail { font-size: 9px; }
  #vol .vs-p p { font-size: 14px; }
  #vol .vs-stmt p { font-size: 14px; }

  /* Vol hero figure + caption + X-Alps caption */
  #vol .vol-hero-fig { margin: 22px 0 8px; }
  #vol .vol-hero-caption,
  #vol .vol-xalps-cap,
  #parabuyer .pb-hero-caption,
  #parabuyer .pb-brand-meta {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    gap: 10px;
    padding-top: 8px;
  }

  /* ParaBuyer hero triptych — single column */
  #parabuyer .pb-hero-fig { grid-template-columns: 1fr; gap: 10px; }
  #parabuyer .pb-hero-img { aspect-ratio: 4 / 5; }

  /* ParaBuyer brand collage breathing room */
  #parabuyer .pb-brand { margin: 14px 0 18px; }

  /* GTM phasing grid stacks */
  .gtm-grid { grid-template-columns: 1fr; }
  .gtm-col {
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 18px 0 0;
  }
  .gtm-col:first-child { border-top: none; padding-top: 0; }
  .gtm-col:last-child { padding-right: 0; }
  .gtm-title { font-size: 16px; }
  .gtm-label { font-size: 13px; }
  .gtm-legend { gap: 14px; margin-top: 18px; }
  .gtm-leg { font-size: 9.5px; }

  /* Vertical-video reel carousels — keep horizontal scroll, slightly smaller cards */
  .vol-reel { margin: 22px 0 28px; }
  .vol-reel-card { width: 140px; }
  .vol-reel-meta { font-size: 9.5px; gap: 10px; }
  .vol-reel-card figcaption { font-size: 11px; }

  /* Tables */
  table.slim td, table.slim th { font-size: 13px; padding: 12px 0; }
  table.slim td.l { width: 40%; font-size: 10px; }
  table.slim td ol.inline-proof li { font-size: 13px; }

  /* Intake list (Straji) */
  .intake-list { font-size: 12px; line-height: 2; padding-left: 14px; margin: 16px 0; }

  /* Tenants list */
  .tenants .t { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .tenants .t .arrow { display: none; }

  /* Expand/details */
  .expand summary { padding: 14px 0; font-size: 11px; }
  .expand .exp-body { font-size: 13px; }

  /* Method side-rail */
  .method { font-size: 10.5px; padding-left: 14px; }

  /* Chapter close hero */
  .chapter-close { padding: 80px 0 56px; gap: 22px; }
  .chapter-close .front { font-size: clamp(28px, 8.5vw, 48px); max-width: none; padding: 0 8px; }
  .chapter-close .cta-row { gap: 18px; font-size: 11px; }

  /* Buttons — touch target */
  .btn { padding: 12px 18px; }

  /* Product collage — drop the absolute-positioned object grid;
     it relies on a 16/10 aspect ratio that's unreadable below ~600px. */
  .collage { aspect-ratio: 4 / 5; }
  .collage .obj { font-size: 8px; padding: 4px; }

  /* Floating marketing case-nav is already hidden at 900px */
}

@media (max-width: 480px) {

  main.section-page { padding: 86px 14px 28px; }

  /* Hero — push the giant numeral down further */
  .sp-hero .numeral { font-size: clamp(80px, 38vw, 128px); }
  .sp-hero h1 { font-size: clamp(30px, 10vw, 42px); }
  .sp-hero .ticker .trow { grid-template-columns: 80px 42px 1fr; gap: 6px; font-size: 10.5px; }

  /* Case pills get tinier */
  .case-head .pills .pill { font-size: 8.5px; padding: 3px 7px; letter-spacing: 0.08em; }

  /* Vol value grid → 1 col on tiny screens */
  #vol .vs-value-grid { grid-template-columns: 1fr; }

  /* Reel cards shrink slightly more */
  .vol-reel-card { width: 124px; }

  /* Stats: collapse to 1 column on tiny screens */
  .stats, .stats.c3, .stats.c2, .stats.c4 { grid-template-columns: 1fr; }

  /* Hide reel "drag / scroll" hint — space is too tight */
  .vol-reel-hint { display: none; }
}