/* Responsive layer — mobile + tablet. Loaded LAST so its media rules win. */

/* ── Hamburger button (injected on static pages, rendered on the React home) ── */
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: transparent; border: none; cursor: pointer;
  padding: 8px; margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--text, #fff); transition: transform .22s, opacity .22s;
}
nav.open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Tablet: tighten spacing so the full nav survives longer ── */
@media (max-width: 1080px) {
  .nav-links { gap: 20px !important; font-size: 13px !important; }
}

/* ── Mobile / narrow: collapse to hamburger drawer ── */
@media (max-width: 900px) {
  .nav-hamburger { display: flex !important; }

  nav .nav-links {
    display: none !important;
  }
  nav.open .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 2px !important;
    position: absolute; top: 100%; left: 12px; right: 12px;
    margin-top: 10px; padding: 12px; z-index: 60;
    background: var(--bg-alt, #13131A);
    border: 1px solid var(--line-s, rgba(255,255,255,0.14));
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20,18,28,.18);
  }
  nav.open .nav-links a {
    padding: 13px 14px !important;
    font-size: 16px !important;
    border-radius: 10px;
    color: var(--text, #fff) !important;
  }
  nav.open .nav-links a:hover { background: var(--bg-card, rgba(255,255,255,0.06)); }

  /* keep the CTA compact but visible next to the hamburger */
  nav .cta-sm { padding: 8px 14px !important; font-size: 12px !important; }
}

@media (max-width: 560px) {
  nav .cta-sm { padding: 8px 14px !important; font-size: 12px !important; box-shadow: none !important; }
  .logo { width: 140px !important; }
}

/* ── Components with fixed-width columns or content-length-dependent
   overflow need a wider breakpoint than the general 860px reflow guard
   below ── */
/* Each of these has a hard-to-predict minimum content width that can
   overflow anywhere from 861px up to ~1040px, well above the general
   860px breakpoint (confirmed by QA at 899-901px for two-col, 900px for
   outcomes-grid on copy-heavy pages, and 900-1039px for post-layout):
     - .post-layout: `1fr 760px 220px 1fr` — the two fixed content columns
       alone need 980px.
     - .two-col (about.html): `420px 1fr` — the 1fr text column's minimum
       content width doesn't fit what's left in the 860-1000px range.
     - .outcomes-grid (service landing pages): fixed `repeat(4, 1fr)` — on
       pages with longer outcome-stat copy, the 4 equal tracks force
       overflow around 900px since grid items default to min-width:auto.
   Stacking all three at the same wider breakpoint, independent of the
   860px rule, closes the dead zone for good instead of chasing it
   component by component. */
@media (max-width: 1040px) {
  .post-layout, .two-col, .outcomes-grid {
    grid-template-columns: 1fr !important;
  }
  .post-layout .body-col, .post-layout .toc-col { grid-column: auto !important; }
  .toc-col { padding-left: 0 !important; }
  .toc {
    position: static !important; border-left: none !important;
    padding-left: 0 !important; margin-top: 40px;
  }
}

/* ── Body reflow guards (mobile) ── */
@media (max-width: 860px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* stack any grid — inline or class-based */
  [style*="grid-template-columns"],
  .foot, .inc-grid, .proc-grid, .outcomes-grid, .related-grid, .svc-hero-grid, .cta-final,
  .svc-grid, .svc-process, .cta-band, .layer-map-row, .tiers, .layer-stack, .overview-row,
  .stack-bar, .layer-grid, .post-grid, .feature-card, .post-layout, .stat-row, .phase,
  .values, .two-col, .team, .contact-grid, .case, .metric-row, .compare-row,
  .hero-row, .problem-cards, .home-svc-grid, .layers-grid, .founder-grid, .testi-grid,
  .insights-grid, .cta-card, .hero-stats, .founder-stats,
  .problem-lede, .svc-hero-stats, .eeat, .grid {
    grid-template-columns: 1fr !important;
  }

  /* services.html's featured card spans 2 explicit columns — once .svc-grid
     above collapses to a single 1fr track, that span forces the browser to
     invent an implicit 2nd column and corrupts every card's placement after
     it (titles get crushed into a content-sized sliver column). Same root
     cause as the .post-layout fix below — reset the explicit placement too. */
  .svc-card.feat {
    grid-column: auto !important;
  }

  /* .post-layout's body/toc columns are pinned to explicit grid-column
     lines (2 and 3) that stop existing once the layout above collapses to
     a single track — reset them so the browser doesn't invent implicit
     columns to satisfy the old placement (which pushes content sideways
     and can cause horizontal overflow) and instead stacks in doc order. */
  .post-layout .body-col, .post-layout .toc-col {
    grid-column: auto !important;
  }

  .proc-grid::before { display: none !important; }
  .cta-final, .cta-band { text-align: left; }
  .cta-final [style*="text-align:right"], .cta-band [style*="text-align:right"] { text-align: left !important; }

  /* homepage: flex-based rows that should stack too */
  .hero-cta, .method-grid { flex-direction: column !important; }
  .method-grid .method-line { display: none !important; }
  .method-step { padding-right: 0 !important; margin-bottom: 32px; }
  .logos-strip .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .logos-row { display: flex !important; flex-wrap: wrap; }

  /* fluid type on the big headings */
  h1 { font-size: clamp(40px, 11vw, 76px) !important; line-height: 0.95 !important; }
  .svc-h1, .blog-h1, .post-title-hero { font-size: clamp(38px, 10vw, 64px) !important; }
  h2, .s-h2, .feature-title, .subscribe h2 { font-size: clamp(28px, 7vw, 44px) !important; }

  /* layers page: unstick the rail + toc */
  .layer-rail {
    position: static !important; border-right: none !important;
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
    padding: 0 0 12px !important; margin-bottom: 20px;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .layer-rail a { border-bottom: none !important; padding: 6px 12px !important; border: 1px solid var(--line, rgba(255,255,255,0.1)); border-radius: 999px; }
  .layer { padding-left: 0 !important; }
  .layer-num { font-size: 88px !important; }
  .layer-name { font-size: 44px !important; }
  .toc { position: static !important; border-left: none !important; padding-left: 0 !important; margin-top: 40px; }

  /* blog post reading column full-width */
  .post-body { margin: 48px 0 !important; }

  /* filter bar + subscribe form wrap */
  .subscribe form { flex-direction: column; border-radius: 20px !important; }
  .subscribe input { padding: 12px 16px !important; }
  .subscribe button { width: 100%; }
}

@media (max-width: 560px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: clamp(34px, 12vw, 52px) !important; }
  .svc-h1, .blog-h1, .post-title-hero { font-size: clamp(32px, 11vw, 48px) !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .s-band { padding: 56px 0 !important; }
}