/* ============================================================
   Responsive + readability layer.
   Loaded after global.css, so all rules below override.
   ============================================================ */

/* --- Default desktop padding for hero sections (was inline) --- */
.hero-meta { width: 100%; max-width: 1480px; margin: 0 auto; padding: 50px 32px 0; }
.hero-main { width: 100%; max-width: 1480px; margin: 0 auto; padding: 20px 32px 50px; }

/* ============================================================
   Mobile (≤ 720px)
   ============================================================ */
@media (max-width: 720px) {
  /* Hero size tokens step down on mobile */
  :root {
    --hero-pad-compact:  48px;
    --hero-pad-standard: 72px;
    --hero-pad-tall:     96px;
  }

  /* Site nav — mobile drawer takes over at ≤1024px (see the 1024 block below);
     only the contact micro-link is dropped here. */
  header a[href$="contact.html"].link-mono { display: none !important; }

  /* Hero */
  .hero-meta { padding: 24px 20px 0 !important; }
  .hero-main { padding: 36px 20px 32px !important; }
  .hero-meta-inner { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .hero-headline { font-size: clamp(44px, 12vw, 72px) !important; line-height: 0.92 !important; letter-spacing: -0.035em !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 32px !important; }
  .hero-lede { font-size: 16px !important; line-height: 1.55 !important; }
  .hero-ctas { gap: 10px !important; margin-top: 28px !important; }
  .hero-ctas a { font-size: 14.5px !important; padding: 14px 20px !important; }

  /* Container */
  div[class*="container"], section > div { padding-left: 20px !important; padding-right: 20px !important; }

  /* All section padding */
  section { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Headline downscaling — applies to every h2 in marketing sections */
  section h2 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; }
  section h3 { font-size: 19px !important; }

  /* Hero headlines: shrink + allow wrapping so nowrap splits don't bleed past the frame */
  section h1 { font-size: clamp(32px, 8.6vw, 52px) !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; }
  section h1 span { white-space: normal !important; }

  /* Body copy readability */
  section p { font-size: 15.5px !important; line-height: 1.6 !important; }

  /* Convert multi-col grids to stacks — covers every 2-col ratio used across bespoke pages */
  section [style*="grid-template-columns: 1fr 1fr"],
  section [style*="grid-template-columns: 1fr 1.05fr"],
  section [style*="grid-template-columns: 1fr 1.3fr"],
  section [style*="grid-template-columns: 1fr 1.4fr"],
  section [style*="grid-template-columns: 1fr 1.5fr"],
  section [style*="grid-template-columns: 1fr 1.6fr"],
  section [style*="grid-template-columns: 1.02fr 0.98fr"],
  section [style*="grid-template-columns: 1.05fr 0.95fr"],
  section [style*="grid-template-columns: 1.1fr 1fr"],
  section [style*="grid-template-columns: 1.15fr 0.85fr"],
  section [style*="grid-template-columns: 1.2fr 1fr"],
  section [style*="grid-template-columns: 1.25fr 1fr"],
  section [style*="grid-template-columns: 1.3fr 1fr"],
  section [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  section [style*="grid-template-columns: 1.4fr 1fr"],
  section [style*="grid-template-columns: 1.5fr 1fr"],
  section [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr"],
  section [style*="grid-template-columns: 1.6fr 2fr 1fr 1fr"],
  section [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"],
  section [style*="grid-template-columns: auto 1fr auto 1fr"],
  section [style*="grid-template-columns: repeat(2,"] { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Fractional hero — hide the founder's to-do animation, stack to one column */
  .frac-todo-chaos { display: none !important; }
  .frac-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  section [style*="grid-template-columns: repeat(3,"],
  section [style*="grid-template-columns: repeat(3 ,"] { grid-template-columns: 1fr !important; gap: 16px !important; }

  section [style*="grid-template-columns: repeat(4,"],
  section [style*="grid-template-columns: repeat(5,"],
  section [style*="grid-template-columns: repeat(6,"] { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }

  /* Service-card "span 2 / span 3" wrapper grid → stack */
  section [style*="grid-template-columns: repeat(6, 1fr)"] > div { grid-column: span 2 !important; }

  /* Hero live-card */
  .hero-grid > div:last-child { padding: 16px 18px !important; }

  /* Footer */
  footer { padding: 56px 20px 24px !important; }
  footer [style*="font-size: clamp(80px"] { font-size: 64px !important; margin-bottom: 36px !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  footer [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Marquee numbers */
  section [style*="font-size: 30px"] { font-size: 22px !important; }

  /* Sticky breadcrumb inner spacing */
  .sticky-breadcrumb > div { padding: 0 20px !important; font-size: 10px !important; gap: 10px !important; }

  /* Hero sits right under the breadcrumb, which already adds its own bar height.
     Drop the hero section's own top padding so breadcrumb pages don't sit a whole
     bar lower than pages without one (keeps hero start consistent site-wide). */
  .sticky-breadcrumb + section { padding-top: 24px !important; }

  /* Never let anything bleed past the viewport width.
     Use clip (not hidden) so it doesn't create a scroll container that kills position:sticky */
  html, body { overflow-x: clip !important; max-width: 100% !important; }
}

/* ============================================================
   Mobile hardening (≤ 720px)
   Catches the inline-styled cases the section-scoped rules above miss:
   nothing may be clipped, unreadable, or too small to tap on a phone.
   ============================================================ */
@media (max-width: 720px) {
  /* Grid/flex children default to min-width:auto and refuse to shrink,
     which is what pushes card content past its own edge. */
  #root [style*="grid-template-columns"] > *,
  #root [style*="display: flex"] > * { min-width: 0; }

  /* Long tokens (emails, URLs, slugs) wrap instead of widening the card */
  #root p, #root li, #root h1, #root h2, #root h3, #root h4, #root a, #root span { overflow-wrap: break-word; }

  /* Inline `white-space: nowrap` copy wraps on phones.
     Animated tickers/marquees (inline animation, width:max-content, or a
     marquee/ticker/march class) keep theirs — they scroll by design. */
  #root [style*="white-space: nowrap"]:not([style*="animation"]):not([style*="max-content"]):not([class*="marquee"]):not([class*="ticker"]):not([class*="march"]):not([class*="cycle"]) { white-space: normal !important; }

  /* Column grids declared outside a <section> stack too */
  #root [style*="grid-template-columns: repeat(3,"] { grid-template-columns: 1fr !important; }
  /* Fixed-width first tracks (sidebar/logo columns) stack */
  #root [style*="grid-template-columns: 320px"], #root [style*="grid-template-columns: 300px"],
  #root [style*="grid-template-columns: 280px"], #root [style*="grid-template-columns: 260px"],
  #root [style*="grid-template-columns: 240px"], #root [style*="grid-template-columns: 220px"],
  #root [style*="grid-template-columns: 200px"] { grid-template-columns: 1fr !important; }
  #root [style*="grid-template-columns: repeat(4,"],
  #root [style*="grid-template-columns: repeat(5,"],
  #root [style*="grid-template-columns: repeat(6,"] { grid-template-columns: 1fr 1fr !important; }

  /* Minimum legible type: mono micro-labels come up to 12px */
  #root [style*="font-size: 9px"], #root [style*="font-size: 9.5px"],
  #root [style*="font-size: 10px"], #root [style*="font-size: 10.5px"],
  #root [style*="font-size: 8px"], #root [style*="font-size: 8.5px"],
  #root [style*="font-size: 11px"], #root [style*="font-size: 11.5px"] { font-size: 12px !important; }

  /* Tap targets: standalone links get a finger-sized box (display left alone on
     buttons — many are cards, and flipping them to flex collapses their fill) */
  #root footer a, #root nav a, #root header a,
  #root a.link-mono, #root a[class*="cta"] { min-height: 40px; display: inline-flex; align-items: center; }
  #root button { min-height: 40px; }
  #root p a { min-height: 0; display: inline; }
}

/* ============================================================
   Nav collapse (≤ 1080px)
   The full desktop nav + CTA can't fit under ~1024px — labels wrap mid-word
   and the CTA pill breaks over three lines. Hand off to the burger drawer
   (NavFooter shows .nav-burger at the same breakpoint) for the whole
   tablet / small-laptop range.
   ============================================================ */
@media (max-width: 1080px) {
  header nav { display: none !important; }
  header > div:first-child { padding: 0 18px !important; height: 60px !important; gap: 8px !important; }
  /* breadcrumb rides under the 60px compact header, not the 128px desktop one */
  .sticky-breadcrumb { top: 60px !important; }
}
/* Just above the breakpoint the labels still need help: never break a label,
   and tighten the rhythm until there's room for the full desktop spacing. */
header nav a { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1240px) {
  header nav { gap: 0 !important; }
  header nav a { padding-left: 9px !important; padding-right: 9px !important; font-size: 12px !important; letter-spacing: 0.1em !important; }
}

/* ============================================================
   Tablet (721px – 1024px)
   ============================================================ */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero-headline { font-size: clamp(38px, 7.4vw, 104px) !important; line-height: 0.9 !important; }
  .hero-meta { padding: 22px 32px 0 !important; }
  .hero-main { padding: 18px 32px 22px !important; }
  .hero-grid { gap: 20px !important; }

  section [style*="grid-template-columns: repeat(4,"] { grid-template-columns: 1fr 1fr !important; }
  section [style*="grid-template-columns: repeat(5,"] { grid-template-columns: 1fr 1fr 1fr !important; }
  section [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  section [style*="grid-template-columns: repeat(6, 1fr)"] > div { grid-column: span 2 !important; }
}

/* ============================================================
   Services Index hero — hide decorative city ticker + the "nine lanes"
   list on tablet & mobile (they get cut off), and let the headline column
   span full width once the right column is gone.
   ============================================================ */
@media (max-width: 1024px) {
  .svc-city-ticker { display: none !important; }
  .svc-nine-lanes { display: none !important; }
  section [style*="grid-template-columns: 1.45fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Readability fixes (all viewports)
   ============================================================ */

/* Lighter body copy on dark sections — was var(--fg-2) #B8BCC5 (slate-blue),
   bump alpha-on-white for higher contrast against ink-100/ink-200. */
section[style*="background: var(--ink-000)"] p,
section[style*="background: var(--ink-100)"] p { color: rgba(255, 255, 255, 0.78); }

/* Slightly darker secondary text on paper sections */
.paper p { color: #2A2D33; }
.paper [style*="color: var(--fg-2-inv)"] { color: #2A2D33 !important; }

/* Tighter dark-card body copy */
section[style*="background: var(--ink-000)"] [style*="color: var(--fg-2)"],
section[style*="background: var(--ink-100)"] [style*="color: var(--fg-2)"] { color: rgba(255,255,255,0.78) !important; }