/* Shared styles across directions */
:root {
  --navy-900: #061620;
  --navy-800: #0B2432;
  --navy-700: #133347;
  --navy-600: #1A4B5C;
  --teal-500: #2A6B7C;
  --cream-50: #F4EFE6;
  --cream-100: #ECE4D4;
  --cream-200: #DDD2BC;
  --ink-900: #0B2432;
  --ink-600: #3D5562;
  --ink-400: #6B7E89;
  --accent-cyan: oklch(0.78 0.13 210);
  --accent-ember: oklch(0.72 0.15 50);
  --accent-chart: oklch(0.82 0.14 130);
}

html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

* { box-sizing: border-box; }

.site-root { width: 100%; }

/* Scroll reveal helper */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Utility: no-scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Artboards show full content (no inner scroll in overview). */
.artboard-site { width: 100%; }

/* =============================================================
   MOBILE RESPONSIVENESS — scoped so desktop is untouched.
   Breakpoints:
     ≤ 900px  → tablet (stacks major two-column layouts)
     ≤ 640px  → phone  (tighter padding, hamburger nav)
   ============================================================= */

/* ---------- CONTACT ROW HOVER ---------- */
.sf-contact-row {
  position: relative;
}
.sf-contact-row:hover {
  padding-left: 10px;
}
.sf-contact-row:hover .sf-contact-row-k {
  color: var(--accent-cyan);
  font-style: italic;
}

/* ---------- MAP LEGEND BELOW (≤1100) ----------
   Below 1100px the map legend was overlapping San Antonio.
   Take it out of absolute positioning and let it flow below the map. */
@media (max-width: 1100px) {
  .sf-map-legend {
    position: static !important;
    margin-top: 16px !important;
    grid-template-columns: auto 1fr auto 1fr !important;
    gap: 10px 14px !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(11,36,50,0.12) !important;
  }
}
@media (max-width: 640px) {
  .sf-map-legend {
    grid-template-columns: auto 1fr !important;
    font-size: 11px !important;
  }
}

/* ---------- TABLET (≤900) ---------- */
@media (max-width: 900px) {
  /* Global section padding trim */
  .sf-nav { padding: 22px 32px !important; }
  .sf-hero { padding: 130px 32px 110px !important; }
  .sf-funnel { padding: 72px 32px !important; }
  .sf-map-head { padding: 80px 32px 32px !important; }
  .sf-map-wrap { padding: 0 32px 32px !important; }
  .sf-map-explainer { padding: 0 32px 80px !important; }
  .sf-latency { padding: 120px 32px !important; }
  .sf-founder { padding: 110px 32px !important; }
  .sf-contact { padding: 110px 32px 64px !important; }
  .sf-formula { padding: 120px 32px 140px !important; }

  /* Stack two-column grids */
  .sf-funnel-grid,
  .sf-map-head-grid,
  .sf-map-explainer-grid,
  .sf-latency-grid,
  .sf-founder-grid,
  .sf-contact-grid,
  .sf-formula-head,
  .sf-formula-panel,
  .sf-whytx-narrow {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .sf-whytx-pillars { grid-template-columns: 1fr 1fr !important; }
  .sf-whytx-pillar:nth-child(3) { border-left: none !important; border-top: 1px solid rgba(11,36,50,0.14); }
  .sf-whytx-pillar:nth-child(4) { border-top: 1px solid rgba(11,36,50,0.14); }

  /* Map head — right-align kicker re-aligns left */
  .sf-map-head-grid > div:last-child {
    text-align: left !important;
    max-width: 640px !important;
  }
  .sf-formula-head > div:last-child {
    text-align: left !important;
  }

  /* Map explainer kicker goes above body copy */
  .sf-map-explainer-grid > div:first-child {
    padding-bottom: 0 !important;
  }

  /* Founder headshot — cap at reasonable size when stacked */
  .sf-founder-grid > div:first-child {
    max-width: 360px !important;
  }

  /* Map — give the SVG a real min-height on tablets so it doesn't squish into a sliver */
  .sf-map-svg {
    min-height: 420px;
  }
}

/* ---------- PHONE (≤640) ---------- */
@media (max-width: 640px) {
  /* Map section — hide entirely on mobile; the dense interactive map doesn't read at this size */
  #map { display: none !important; }
}

@media (max-width: 640px) {
  /* Map — viewBox is 1440x760 (~1.9:1). At mobile widths Texas renders too small. Overscan the SVG width so the shape fills more vertical space; outer container clips. */
  .sf-map-frame { overflow: hidden; }
  .sf-map-svg {
    width: 180%;
    margin-left: -40%;
    height: auto;
    display: block;
    pointer-events: none;
  }
  .sf-map-frame { display: flex; flex-direction: column; gap: 12px; }
  .sf-map-hint {
    display: block !important;
    font-family: "Inter Tight", Inter, system-ui, sans-serif;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-400);
    text-align: center;
    padding: 0 8px;
  }

  /* Latency h2 — kill the nowrap on phones; let it wrap naturally */
  .sf-latency-h2 .sf-latency-line {
    white-space: normal !important;
  }
  .sf-latency-h2 {
    font-size: clamp(32px, 8.5vw, 48px) !important;
  }

  /* Formula equation — kill nowrap and let terms wrap onto multiple lines */
  .sf-formula-eq {
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: flex-start !important;
  }

  /* Founder arc — switch from 5-up to a compact 5-row vertical strip on phones,
     keeping the "linear arc" reading order. Glyphs scale down. */
  .sf-founder-arc {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .sf-founder-arc > div {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 18px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(11,36,50,0.1);
  }
  .sf-founder-arc > div:last-child { border-bottom: none; }
  .sf-founder-arc > div > div:first-child {
    margin-bottom: 0 !important;
    width: 56px !important; flex-shrink: 0;
  }
  /* The number / label / sub stack — align vertically next to the glyph */
  .sf-founder-arc > div > div:nth-child(2),
  .sf-founder-arc > div > div:nth-child(3),
  .sf-founder-arc > div > div:nth-child(4) {
    text-align: left !important;
  }
  /* Hide the horizontal connector line on phones — wrong axis */
  .sf-founder-arc > div[aria-hidden="true"],
  .sf-founder-creds [aria-hidden="true"] {
    display: none !important;
  }
}

/* ---------- PHONE-EXTRAS (≤640) — keep this block compatible with the next stylesheet ---------- */
@media (max-width: 640px) {
  /* Nav — hide link set, keep logo */
  .sf-nav { padding: 18px 20px !important; }
  .sf-nav-logo { height: 32px !important; }
  .sf-nav-links { display: none !important; }

  /* Hero */
  .sf-hero { padding: 110px 20px 88px !important; }
  .sf-hero h1 { font-size: clamp(36px, 10vw, 52px) !important; letter-spacing: -0.02em !important; }
  .sf-hero p { font-size: 17px !important; margin-top: 28px !important; }
  .sf-hero a { padding: 12px 18px !important; font-size: 11px !important; }

  /* Funnel — rungs stack vertically, numbers scaled */
  .sf-funnel { padding: 56px 20px !important; }
  .sf-funnel h3 { font-size: 26px !important; }
  .sf-funnel-rungs { grid-template-columns: 1fr !important; gap: 40px !important; }
  .sf-funnel-rung { padding: 0 !important; border-left: none !important; border-top: 1px solid rgba(11,36,50,0.14); padding-top: 32px !important; }
  .sf-funnel-rung:first-child { border-top: none !important; padding-top: 0 !important; }
  .sf-funnel-rung > div:first-child { font-size: clamp(96px, 32vw, 148px) !important; }

  /* Why-Texas pillars — stack single column on mobile */
  .sf-whytx-pillars { grid-template-columns: 1fr !important; }
  .sf-whytx-pillar { border-left: none !important; border-top: 1px solid rgba(11,36,50,0.14) !important; padding: 32px 0 !important; }
  .sf-whytx-pillar:first-child { border-top: none !important; padding-top: 8px !important; }
  .sf-whytx-narrow { grid-template-columns: 1fr !important; gap: 48px !important; }
  .sf-whytx-narrow > div:last-child { padding-left: 0 !important; border-left: none !important; border-top: 1px solid rgba(11,36,50,0.14); padding-top: 40px !important; }

  /* Map section */
  .sf-map-head { padding: 64px 20px 24px !important; }
  .sf-map-wrap { padding: 0 20px 24px !important; }
  .sf-map-explainer { padding: 0 20px 64px !important; }
  .sf-map h2 { font-size: clamp(30px, 7.5vw, 42px) !important; }
  .sf-map-explainer p { font-size: 17px !important; }

  /* Latency */
  .sf-latency { padding: 96px 20px !important; }
  .sf-latency h2 { font-size: clamp(32px, 8.5vw, 48px) !important; }
  .sf-latency p { font-size: 17px !important; }

  /* Founder */
  .sf-founder { padding: 88px 20px !important; }
  .sf-founder h3 { font-size: clamp(36px, 9vw, 52px) !important; }
  .sf-founder-grid > div:first-child { max-width: 100% !important; }
  .sf-founder-creds { grid-template-columns: 1fr 1fr !important; }

  /* Contact */
  .sf-contact { padding: 88px 20px 56px !important; }
  .sf-contact h3 { font-size: clamp(36px, 9.5vw, 56px) !important; }
  .sf-footer { flex-direction: column !important; gap: 16px !important; text-align: left !important; }

  /* Formula */
  .sf-formula { padding: 88px 20px 112px !important; }
  .sf-formula h2 { font-size: clamp(32px, 8vw, 48px) !important; }
  .sf-formula-eq { font-size: clamp(34px, 9.5vw, 54px) !important; gap: 6px 10px !important; margin-bottom: 56px !important; }
  .sf-formula-tabs { grid-template-columns: 1fr !important; border-top: 1px solid rgba(11,36,50,0.14) !important; }
  .sf-formula-tabs button { padding: 22px 0 !important; border-right: none !important; border-bottom: 1px solid rgba(11,36,50,0.1) !important; }
}