/* Norton-Gauss · Mobile responsiveness
   ─────────────────────────────────────────────────────────────
   Additive, mobile-only layer. Everything here lives inside
   max-width media queries, so desktop rendering is byte-identical
   — this file only adapts the existing layout to small screens
   (stacking multi-column grids, reflowing the nav, tightening
   gutters/type). No redesign, no structural change.

   Loaded LAST so it wins over styles.css / styles-v3.css where the
   same property is set at a narrow breakpoint. Sections that ship
   their own mobile rules (book.css, cases-carousel.css,
   support-login.css) are intentionally left to those files. */

/* ═══════════════════════════════════════════════════════════════
   ≤ 900px — tablets / large phones: collapse the wide 2–3-col
   page grids that are unreadable below desktop.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
  .section-head .right { padding-bottom: 0; font-size: 16px; max-width: none; }

  .manifesto { grid-template-columns: 1fr; gap: 48px; }
  .manifesto .l { position: static; }

  .cs-hero .top { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .cs-section .row { grid-template-columns: 1fr; gap: 24px; }
  .cs-section h2 { max-width: none; }

  .svc-detail { grid-template-columns: 1fr; gap: 24px; }
  .svc-detail .num { font-size: 44px; }

  /* v2 sections that don't ship their own breakpoint here */
  .compounding-stops { grid-template-columns: 1fr 1fr; }
  .compounding-loops { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr; gap: 32px; }
  .innovation-inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 768px — primary mobile breakpoint
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --gutter: 22px; --gutter-sm: 16px; }

  .section-pad { padding: 72px 0; }
  .section-pad-sm { padding: 56px 0; }
  .section-tag { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px var(--gutter); font-size: 10px; }

  /* ── Nav: keep logo + actions on row 1, scroll the link row ──── */
  .nav-inner {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 12px 14px;
    padding: 12px var(--gutter);
  }
  .nav-logo { order: 1; }
  .nav-actions { order: 2; gap: 8px; }
  .nav-links {
    order: 3; width: 100%; justify-content: flex-start; gap: 2px;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links button { flex: 0 0 auto; white-space: nowrap; padding: 8px 13px; }

  /* ── Hero ─────────────────────────────────────────────────────── */
  .hero { min-height: 0; }
  .hero-inner { min-height: 0; padding: 104px var(--gutter) 64px; gap: 32px; }
  .hero-h1 { font-size: clamp(40px, 11.5vw, 76px); }
  .hero-sub { font-size: 16px; max-width: none; }
  .hero-ctas { gap: 10px; }
  .hero-counters { grid-template-columns: 1fr 1fr 1fr; }
  .hero-marquee-track { gap: 32px; padding: 12px 22px; }
  .hero-marquee span { font-size: 15px; gap: 18px; }

  /* ── Thesis ───────────────────────────────────────────────────── */
  .thesis-grid { grid-template-columns: 1fr; }
  .thesis-col { padding: 32px 22px; border-right: 0; border-bottom: 1px solid var(--ng-line); }
  .thesis-col:last-child { border-bottom: 0; }
  .thesis-col h3 { font-size: 28px; }
  .thesis-col .arrow-sep { display: none; }

  /* ── Practices ────────────────────────────────────────────────── */
  .featured-practice { grid-template-columns: 1fr; }
  .featured-practice .l { padding: 30px 22px; border-right: 0; border-bottom: 1px solid var(--ng-line); }
  .featured-practice .l ul { grid-template-columns: 1fr; }
  .featured-practice .r { min-height: 300px; }
  .prac-row { grid-template-columns: 30px 1fr auto; gap: 6px 16px; padding: 20px 18px; }
  .prac-row:hover { padding-left: 18px; padding-right: 18px; }
  .prac-row .meta { display: none; }
  .prac-row .ttl { font-size: 21px; }

  /* ── Framework ────────────────────────────────────────────────── */
  .fw-track { grid-template-columns: 1fr; }
  .fw-cell { border-right: 0; border-bottom: 1px solid var(--ng-line); padding: 22px var(--gutter); }
  .fw-cell:last-child { border-bottom: 0; }
  .fw-cell .arrow { display: none; }
  .fw-detail { grid-template-columns: 1fr; }
  .fw-detail > div { border-right: 0; border-bottom: 1px solid var(--ng-line); padding: 26px var(--gutter); }
  .fw-detail > div:last-child { border-bottom: 0; }
  .fw-detail .l h3 { font-size: 30px; }

  /* ── Cases ────────────────────────────────────────────────────── */
  .case-feature { grid-template-columns: 1fr; }
  .case-feature .l { padding: 30px 22px; border-right: 0; border-bottom: 1px solid var(--ng-line); }
  .case-feature .r { min-height: 320px; padding: 22px; }
  .case-secondary-grid { grid-template-columns: 1fr; }
  .case-secondary { padding: 28px 24px; }
  .cases-extra-grid { grid-template-columns: 1fr; }

  /* ── Industries ───────────────────────────────────────────────── */
  .ind-band { grid-template-columns: 1fr 1fr; }
  .ind-cell { min-height: 0; padding: 24px 18px 26px; border-bottom: 1px solid var(--ng-line); }
  .ind-cell:nth-child(2n) { border-right: 0; }

  /* ── Impact / strips ──────────────────────────────────────────── */
  .impact-strip { grid-template-columns: 1fr 1fr; }
  .impact-strip > div { border-bottom: 1px solid var(--ng-line); padding: 36px 22px; }
  .impact-strip > div:nth-child(2n) { border-right: 0; }
  .impact-detailed { grid-template-columns: 1fr 1fr; }
  .industry-strip { grid-template-columns: 1fr 1fr; }

  /* ── Manifesto ────────────────────────────────────────────────── */
  .manifesto .logo-stage { min-height: 0; padding: 8px 12px 8px; }
  .manifesto h2 { max-width: none; }
  .manifesto-stats { grid-template-columns: 1fr 1fr 1fr; }
  .manifesto-stats .cell { padding: 22px 14px 4px; }
  .manifesto-banner h2 { font-size: clamp(30px, 8vw, 56px); }

  /* ── Final CTA ────────────────────────────────────────────────── */
  .final-cta { padding: 96px 0 88px; }

  /* ── Footer ───────────────────────────────────────────────────── */
  .footer { padding: 72px 0 32px; }
  .footer .top { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 48px; }
  .footer .top .brand { grid-column: 1 / -1; }
  .footer .bottom { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }

  /* ── Compounding curve (wide SVG) keeps aspect via viewBox ─────── */
  .compounding-stops { grid-template-columns: 1fr; }

  /* ── Practices-detail (inline grid → override) ────────────────── */
  .pdetail-tabs { grid-template-columns: 1fr 1fr !important; }
  .pdetail-card { grid-template-columns: 1fr; }
  .pdetail-card .head, .pdetail-card .stack, .pdetail-card .outcomes { min-height: 0 !important; }

  /* ── World map ────────────────────────────────────────────────── */
  .worldmap-meta { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* ── Services page hero ───────────────────────────────────────── */
  .svc-hero { padding: 92px 0 56px; }

  /* ── Case study page ──────────────────────────────────────────── */
  .cs-results-grid { grid-template-columns: 1fr 1fr; }
  .cs-results-grid > div { border-bottom: 1px solid var(--ng-line); }
  .cs-results-grid > div:nth-child(2n) { border-right: 0; }
  .cs-timeline { grid-template-columns: 1fr; }
  .cs-timeline .step { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ng-line); }
  .cs-timeline .step:last-child { border-bottom: 0; }
  .cs-quote { padding: 96px 0; }
  .cs-quote blockquote { max-width: none; }
  .cs-quote blockquote::before { font-size: 96px; margin-bottom: 24px; }
  .cs-hero .meta { grid-template-columns: 1fr 1fr; gap: 18px 24px; }

  /* ── Careers ──────────────────────────────────────────────────── */
  .careers-hero .top { grid-template-columns: 1fr; gap: 36px; }
  .careers-perks .grid { grid-template-columns: 1fr 1fr; }
  .careers-values .vals { grid-template-columns: 1fr; }
  .job-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .job-row .go { display: none; }
  .job-section .row { grid-template-columns: 1fr; gap: 18px; }
  .job-meta-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 480px — phones: drop remaining 2-col grids to single column
   and tighten type a touch.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-counters { grid-template-columns: 1fr; }
  .hero-counters > div { border-right: 0; border-bottom: 1px solid var(--ng-line); }
  .hero-counters > div:last-child { border-bottom: 0; }

  .ind-band { grid-template-columns: 1fr; }
  .ind-cell { border-right: 0 !important; }

  .impact-strip { grid-template-columns: 1fr; }
  .impact-strip > div { border-right: 0; }
  .impact-detailed { grid-template-columns: 1fr; }
  .industry-strip { grid-template-columns: 1fr; }

  .manifesto-stats { grid-template-columns: 1fr; }
  .manifesto-stats .cell + .cell::before { display: none; }

  .footer .top { grid-template-columns: 1fr; }

  .case-feature .metrics { grid-template-columns: 1fr 1fr; gap: 16px; }
  .mini-dash { grid-template-columns: 1fr; }

  .compounding-stops { grid-template-columns: 1fr; }
  .pdetail-tabs { grid-template-columns: 1fr !important; }
  .careers-perks .grid { grid-template-columns: 1fr; }
  .job-meta-grid { grid-template-columns: 1fr; }

  .cs-results-grid { grid-template-columns: 1fr; }
  .cs-results-grid > div { border-right: 0; }
  .cs-hero .meta { grid-template-columns: 1fr; }

  .featured-practice .l .kpi { gap: 24px; flex-wrap: wrap; }
}