/* =============================================================
   MOBILE FIXES — comprehensive responsive cleanup (load AFTER brand/modern)
   Targets: < 768px (tablet), < 480px (phone narrow)
   ============================================================= */

/* ---- 1. Kill horizontal overflow at root level ---- */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: hidden; max-width: 100%; }

/* ---- 2. Generic: make all top-level containers respect viewport ---- */
* { min-width: 0; }
img, video, iframe { max-width: 100%; height: auto; }

/* =============================================================
   TABLET / SMALL DESKTOP  (≤ 1024px)
   ============================================================= */
@media (max-width: 1024px) {
  /* Header: allow wrapping if needed */
  .header-inner { gap: 0.75rem; }
  .header-tools { gap: 0.5rem; }
  /* Founder home grid: stack instead of 2 columns earlier */
  .founder-home-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; max-width: 760px !important; }
  .founder-home-grid figure { max-width: 360px; margin: 0 auto !important; }
}

/* =============================================================
   TABLET PORTRAIT  (≤ 768px)
   ============================================================= */
@media (max-width: 768px) {
  /* Hero: allow long words to wrap */
  .hero h1 { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
  .hero p.lead { font-size: 1rem; }

  /* Container padding: reduce */
  .container, .container-narrow, .container-wide {
    padding-left: 1rem; padding-right: 1rem;
  }

  /* Section padding: reduce vertical breathing room */
  .section { padding: 3rem 0; }

  /* Trust strip: prevent z-index overlap on hero */
  .hero .trust-strip { position: relative; z-index: 1; margin-top: 1.5rem; }

  /* Disable parallax on all background-attachment:fixed sections */
  #pricing, #portfolio { background-attachment: scroll !important; }
}

/* =============================================================
   PHONE  (≤ 480px)
   ============================================================= */
@media (max-width: 480px) {
  /* Header: tighter */
  .header-inner { padding: 0.6rem 0.75rem; }

  /* Logo: smaller */
  .brand-lockup img { height: 48px !important; }
  .logo-text { font-size: 0.95rem !important; }

  /* GET A QUOTE button: compact */
  .header-tools .btn-primary {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.04em;
  }
  .header-tools .lang-trigger {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Nav links: smaller, but still scrollable */
  .nav-link { font-size: 0.75rem !important; padding: 0.25rem 0.35rem !important; }

  /* Utility bar (TOGETHER FOR A NET ZERO FUTURE): smaller */
  .utility-bar, [data-utility="motto"] {
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
    padding: 0.35rem 0.75rem !important;
  }

  /* Hero h1 — narrower and break properly */
  .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.15;
  }
  .hero p.lead { font-size: 0.95rem; max-width: 100%; }
  .hero .btn { font-size: 0.85rem; padding: 0.7rem 1.1rem; }

  /* Hero CTAs: stack vertically on very narrow */
  .hero-ctas, .hero [data-hero="ctas"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  /* Ticker bar: smaller */
  .ticker-bar { padding: 0.5rem 0; font-size: 0.7rem; }
  .ticker-item { padding: 0 1rem; gap: 0.4rem; }

  /* Trust strip pills: wrap nicely */
  .trust-strip {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.7rem !important;
  }

  /* Sticky CTA: compact, label can ellipsis */
  .sticky-cta {
    left: 0.5rem; right: 0.5rem; bottom: 0.5rem;
    padding: 0.65rem 0.85rem;
    gap: 0.6rem;
  }
  .sticky-cta .label {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .sticky-cta a {
    padding: 0.4rem 0.85rem;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  /* Portfolio / Insights cards: full-width single column */
  .cert-grid, .std-row-grid {
    /* Already horizontal-scroll on mobile via earlier rules — keep that */
  }

  /* Section: tighter */
  .section { padding: 2.5rem 0; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; }
  h3 { font-size: 1.05rem !important; }

  /* Footer: stack */
  .footer-grid-5 { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .certified-by-strip { justify-content: center !important; }
}

/* =============================================================
   VERY NARROW  (≤ 360px) — old/small phones
   ============================================================= */
@media (max-width: 360px) {
  .header-tools .btn-primary { padding: 0.4rem 0.6rem !important; font-size: 0.65rem !important; }
  .hero h1 { font-size: 1.6rem !important; }
}