/* ============================================================
   Creekside — responsive layer
   The design source (colors_and_type.css / site.css / v3.css) is a
   fixed ~1280px desktop layout with NO media queries. This file is
   the ONLY responsive layer: it loads last and uses max-width
   queries exclusively, so desktop (>1024px) renders exactly as
   designed and everything below progressively adapts.
   Breakpoints (descending so smaller screens override larger):
     1024  large tablet / small laptop — tame display type, reflow hero meta
      900  portrait tablet — collapse multi-column grids to one column
      820  hide the topbar phone number
      680  wrap the topbar nav to its own row, shrink hero chrome
      560  phone — smallest type, tighter padding, single-column footer
      420  very small — stack the hero CTAs full width
   ============================================================ */

/* ---------- 1024: tame the oversized display type + hero meta ---------- */
@media (max-width: 1024px) {
  .container-wide { padding: 0 32px; }

  .v3 .hero { padding: 72px 0 92px; }
  .v3 .hero-h1 { font-size: clamp(56px, 13vw, 150px); line-height: 0.88; margin: 24px 0 28px; }
  .v3 .hero-h1 .word.indent { padding-left: 14%; }

  /* Lead spans the full width; the three stats sit in a row beneath it. */
  .v3 .hero-meta-row { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; align-items: start; }
  .v3 .hero-meta-row .lead { grid-column: 1 / -1; }

  .v3 .section { padding: 84px 0; }
  .v3 .section-head h2 { font-size: clamp(48px, 9vw, 96px); }

  .v3 .svc-item h3 { font-size: clamp(40px, 7vw, 60px); }

  .v3 .about { padding: 92px 0; }
  .v3 .about h2 { font-size: clamp(44px, 8vw, 80px); }

  .v3 .tt { padding: 84px 0; }
}

/* ---------- 900: collapse every multi-column grid ---------- */
@media (max-width: 900px) {
  /* Services: photo on top, body below — on EVERY row (reset the reverse order).
     The photo cell no longer stretches via the grid row, so give it an
     explicit aspect ratio or it collapses to zero height. */
  .v3 .svc-item { grid-template-columns: 1fr; min-height: 0; }
  .v3 .svc-item.reverse .svc-photo { order: 0; }
  .v3 .svc-item .svc-photo { aspect-ratio: 3 / 2; min-height: 240px; }
  .v3 .svc-body { padding: 44px 40px; }

  /* About: stacks photo then text */
  .v3 .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .v3 .about-photo { aspect-ratio: 3 / 2; max-width: 520px; }

  /* Testimonials: one column, swap the divider from right to bottom */
  .v3 .tt-grid { grid-template-columns: 1fr; }
  .v3 .tt-card { border-right: none; border-bottom: 1px solid var(--pine-700); }
  .v3 .tt-card:last-child { border-bottom: none; }

  /* Section head stacks its title and intro */
  .v3 .section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }

  /* Footer: 2 columns, brand spans the top */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .v3 .footer { padding-top: 72px; }
}

/* ---------- 820: drop the topbar phone number ---------- */
@media (max-width: 820px) {
  .topbar .phone-link { display: none; }
  .nav { gap: 20px; }
}

/* ---------- 768: container gutters ---------- */
@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .container-wide { padding: 0 24px; }
  .v3 .hero-h1 .word.indent { padding-left: 0; }
}

/* ---------- 680: collapse the nav into a hamburger dropdown ---------- */
@media (max-width: 680px) {
  /* Bar shows brand + toggle; the nav + actions drop down as a panel
     anchored to the (position:relative) .topbar, full-bleed. */
  .topbar .nav-toggle { display: inline-flex; }
  /* scoped under .topbar so these beat the base `.topbar-menu{display:contents}`
     by specificity regardless of stylesheet source order */
  .topbar .topbar-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column;
    background: var(--pine-900);
    border-top: 1px solid var(--pine-700);
    border-bottom: 1px solid var(--pine-700);
    box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.55);
    padding: 6px 0 18px;
  }
  .topbar .topbar-menu.open { display: flex; }
  .topbar .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .topbar .nav-link { padding: 15px 28px; font-size: 15px; border-bottom: 1px solid rgba(232, 236, 224, 0.10); }
  .topbar .tb-actions { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 28px 2px; }
  .topbar .phone-link { display: inline-flex; font-size: 15px; }
  .topbar .tb-actions .btn { justify-content: center; padding: 14px 22px; font-size: 15px; }

  .v3 .hero { padding: 52px 0 64px; }
  .v3 .hero-h1 .word.outline { -webkit-text-stroke-width: 1.5px; }

  .v3 .hero-marquee { font-size: 16px; padding: 10px 0; gap: 22px; }
  .v3 .hero-marquee span { gap: 22px; }

  .v3 .tt-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---------- 560: phone ---------- */
@media (max-width: 560px) {
  .container, .container-wide { padding: 0 16px; }

  .v3 .hero { padding: 44px 0 52px; }
  .v3 .hero-h1 { font-size: clamp(38px, 14vw, 82px); }
  .v3 .hero-meta-row { gap: 22px 18px; }
  .v3 .hero-meta-row .stat .val { font-size: 40px; }
  .v3 .hero-meta-row .stat .val .unit { font-size: 20px; vertical-align: 10px; }

  .v3 .section { padding: 56px 0; }
  .v3 .section-head h2 { font-size: clamp(36px, 12vw, 58px); }
  .v3 .svc-item h3 { font-size: clamp(34px, 11vw, 48px); }
  .v3 .svc-body { padding: 34px 24px; gap: 20px; }
  .v3 .svc-item .svc-photo .num { font-size: 56px; top: 18px; left: 20px; }
  .v3 .svc-item .svc-photo .badge { bottom: 18px; right: 18px; padding: 7px 12px; }

  .v3 .about { padding: 60px 0; }
  .v3 .about h2 { font-size: clamp(34px, 13vw, 56px); }
  .v3 .about p { font-size: 17px; }
  .v3 .about-photo { box-shadow: 10px 10px 0 var(--rust-600); }

  .v3 .tt { padding: 56px 0; }
  .v3 .tt-card { padding: 32px 24px 30px; }
  .v3 .tt-card .quote { font-size: 23px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding-bottom: 28px; }
  .v3 .footer { padding-top: 56px; }
  .footer-bottom { font-size: 10px; }
}

/* ---------- 420: stack the hero CTAs full width ---------- */
@media (max-width: 420px) {
  .v3 .hero-meta-row .lead .cta { flex-direction: column; align-items: stretch; }
  .v3 .hero-meta-row .lead .cta .btn { justify-content: center; }
  .btn-xl { padding: 18px 24px; font-size: 16px; }
}