/* ──────────────────────────────────────────────────────────────
   Comms Inc — responsive layer
   Loaded after each page's inline <style> block, so equal-specificity
   rules here win. Desktop presentation is deliberately untouched:
   everything below sits inside a media query or is a mobile-nav part
   that stays hidden until the breakpoint.
   ────────────────────────────────────────────────────────────── */

/* Nothing should be able to push the page sideways on a phone. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }

/* Fixed nav / sticky tabs would otherwise cover in-page anchor targets. */
[id] { scroll-margin-top: 90px; }
.service-block[id] { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }

/* ── Mobile nav trigger — hidden on desktop ── */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin: -10px -8px -10px 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: var(--sage-deep, #2d3d2e);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════
   ≤ 1024px — tablet / small laptop: relieve the widest grids
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav { padding: 20px 28px; }
  .nav-links { gap: 22px; }

  .manifesto,
  .grown-ups,
  .founder-section,
  .team-section,
  .values,
  .cta,
  .brands-section,
  .brands-wrap,
  .pricing,
  .a2a-banner,
  footer { padding-left: 28px; padding-right: 28px; }
  .service-inner { padding-left: 28px; padding-right: 28px; gap: 48px; }
  .service-tabs { padding-left: 28px; padding-right: 28px; }

  .ph-left { padding: 64px 32px; }
  .founder-grid { grid-template-columns: 300px 1fr; gap: 44px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid,
  .brands-grid.three,
  .brands-grid.four { grid-template-columns: repeat(3, 1fr); }
  .stats-bar { gap: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 900px — the main phone / large-phone breakpoint
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Nav becomes a collapsible panel ── */
  nav {
    flex-wrap: wrap;
    padding: 14px 20px;
    row-gap: 0;
  }
  .logo { order: 1; }
  .nav-toggle { display: flex; order: 2; }

  .nav-links {
    order: 3;
    flex: 0 0 100%;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-links li { border-top: 1px solid rgba(106, 154, 107, 0.14); }
  .nav-links a {
    display: block;
    padding: 15px 2px;
    font-size: 12px;
  }

  .nav-cta {
    order: 4;
    flex: 0 0 100%;
    display: none;
    text-align: center;
    padding: 14px 18px;
    margin: 14px 0 4px;
  }

  nav.open .nav-links { max-height: 60vh; overflow-y: auto; }
  nav.open .nav-cta { display: block; }

  /* ── Hero: stack, and give the image a real height of its own ── */
  .page-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 60px;
  }
  .ph-left {
    padding: 56px 22px 60px;
    order: 2;
  }
  .ph-left::before { font-size: 180px; right: -20px; bottom: -30px; }
  .ph-title { font-size: clamp(34px, 9vw, 46px) !important; }
  .ph-body { font-size: 15px; line-height: 1.8; max-width: none; }
  .ph-eyebrow { margin-bottom: 18px; }
  .ph-cta { padding: 13px 24px; }

  .ph-right {
    order: 1;
    height: 46vw;
    min-height: 200px;
    max-height: 320px;
  }
  /* Stacked, the image sits directly above the dark copy panel — fade it
     downward into that panel instead of sideways. */
  .ph-right-overlay {
    background: linear-gradient(to top, var(--sage-deep, #2d3d2e) 0%, rgba(45, 61, 46, 0.15) 55%, transparent 100%);
  }
  .ph-right-tag { top: 14px; right: 14px; }

  /* ── Generic section rhythm ── */
  .manifesto,
  .founder-section,
  .team-section,
  .values,
  .brands-section,
  .brands-wrap,
  .quote-strip,
  .cta { padding: 64px 22px; }
  .grown-ups,
  .pricing,
  .a2a-banner { padding: 56px 22px; }
  .service-block { padding: 56px 0; }
  .service-inner { padding: 0 22px; }

  .section-title { font-size: clamp(28px, 7vw, 36px); margin-bottom: 36px; }

  /* ── Two-column content blocks collapse ── */
  .manifesto-body { grid-template-columns: 1fr; gap: 24px; }
  .manifesto-statement { font-size: clamp(24px, 6.5vw, 34px); margin-bottom: 32px; }
  .manifesto-label { margin-bottom: 28px; }

  .grown-ups { grid-template-columns: 1fr; gap: 24px; }
  /* Desktop shows this as a giant nowrap watermark beside the copy, stacked
     over three lines with hard <br>s. Stacked into a narrow column that reads
     as broken text, so drop the breaks and keep it on one legible line.
     (The markup carries a space before the first <br>, which desktop collapses
     at the line end and mobile uses as the word gap.) */
  .gu-big {
    font-size: 34px;
    white-space: nowrap;
    line-height: 1;
    color: rgba(255, 255, 255, 0.3);
  }
  .gu-big br { display: none; }
  .gu-title { font-size: 30px; }
  .gu-body { font-size: 15px; }

  .founder-grid { grid-template-columns: 1fr; gap: 36px; }
  .founder-image { max-width: 320px; }
  .founder-name { font-size: 38px; }
  .founder-role { margin-bottom: 24px; }
  .bio .pull-quote { font-size: 20px; padding-left: 18px; margin: 24px 0; }

  .team-grid { grid-template-columns: 1fr; gap: 2px; margin-top: 36px; }
  .team-card { padding: 32px 24px 28px; }

  .values-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .value-card { padding: 28px 22px; }

  /* ── Services page ── */
  .service-tabs {
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    top: 60px;
  }
  .service-tabs::-webkit-scrollbar { display: none; }
  .stab { padding: 16px 14px; white-space: nowrap; flex: 0 0 auto; }

  .service-inner { grid-template-columns: 1fr; gap: 32px; }
  /* The desktop layout flips alternate rows with direction:rtl — undo it
     so stacked rows always read image-then-copy. */
  .service-inner.reverse { direction: ltr; }
  .service-image { order: 1; }
  .service-content { order: 2; }
  .service-num { font-size: 44px; top: 16px; left: 16px; }
  .service-tag { bottom: 16px; left: 16px; }
  .svc-title { font-size: clamp(28px, 7vw, 38px) !important; }
  .svc-body .pull { font-size: 19px; padding-left: 16px; }
  .svc-cta { display: block; text-align: center; padding: 14px 20px; }

  .a2a-inner { grid-template-columns: 1fr; gap: 28px; }
  .a2a-headline { font-size: clamp(32px, 8vw, 44px) !important; }

  .pricing-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .price-card { padding: 28px 24px; }

  /* ── Experience page ── */
  .stats-bar {
    flex-wrap: wrap;
    gap: 28px 36px;
    padding: 26px 22px;
  }
  .stat { flex: 1 1 40%; }
  .stat-n { font-size: 30px; }

  .brands-grid,
  .brands-grid.three,
  .brands-grid.four { grid-template-columns: repeat(2, 1fr); }
  .brand-card { min-height: 104px; padding: 18px 12px; }
  .brand-logo { height: 44px; }
  .sector-group { margin-bottom: 32px; }

  .quote-strip blockquote { font-size: clamp(21px, 5.5vw, 27px); }

  /* ── Closing CTA + footer ── */
  .cta h2 { font-size: clamp(30px, 7.5vw, 40px); }
  .cta p { font-size: 15px; margin-bottom: 28px; }
  .cta-btn { display: inline-block; padding: 15px 30px; }

  footer {
    flex-direction: column;
    gap: 28px;
    padding: 40px 22px 28px;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 6px 22px;
  }
  /* Comfortable touch targets — these were 21px tall rows on a phone. */
  .footer-links a { display: inline-block; padding: 12px 0; }

  /* Standalone text link is too thin to tap reliably; on mobile give it the
     same bordered-button treatment the other CTAs use. */
  .brands-more {
    display: inline-block;
    padding: 14px 24px !important;
    border: 1px solid var(--sage-pale) !important;
    border-bottom-width: 1px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 480px — small phones
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ph-left { padding: 44px 18px 48px; }
  .ph-left::before { font-size: 130px; }

  .manifesto,
  .founder-section,
  .team-section,
  .values,
  .brands-section,
  .brands-wrap,
  .quote-strip,
  .cta,
  .grown-ups,
  .pricing,
  .a2a-banner { padding-left: 18px; padding-right: 18px; }
  .service-inner { padding: 0 18px; }
  footer { padding-left: 18px; padding-right: 18px; }

  .gu-big { font-size: 28px; }
  .founder-name { font-size: 32px; }
  .brands-grid,
  .brands-grid.three,
  .brands-grid.four { grid-template-columns: 1fr; }
  .delivers-grid { grid-template-columns: 1fr; }
  .credentials { gap: 6px; }
  .stats-bar { gap: 24px 20px; }
}

/* Respect reduced-motion preferences for the entrance animations. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ph-eyebrow,
  .ph-title,
  .ph-body,
  .ph-cta { animation: none !important; }
}

/* Homepage proof-stat strip */
@media (max-width: 900px) {
  .home-stats-wrap { padding: 44px 24px; }
  .home-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .hs-num { font-size: 42px; }
}
@media (max-width: 480px) {
  .home-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .hs-num { font-size: 34px; }
  .hs-label { font-size: 9px; letter-spacing: 2px; }
}