/* =========================================================================
   Survey Techies — responsive.css
   Mobile-first breakpoints per blueprint §13
   ========================================================================= */

/* ---------------- Large mobile / small tablet: 600px+ ---------------- */
@media (min-width: 600px) {
  .hero__actions { gap: 1rem; }
  .form__grid { gap: 1.1rem; }
}

/* Hero text panel stays right-aligned and clears the side arrows while the
   page container is narrower than the viewport-wide desktop layout. */
@media (min-width: 600px) and (max-width: 1439.98px) {
  .hero__content { margin-left: auto; margin-right: 5rem; }
}

/* Narrow tablets: reserve the tallest description so every slide's panel
   keeps exactly the same size. */
@media (min-width: 600px) and (max-width: 767.98px) {
  .hero__text { min-height: calc(4 * 1.6em); }
  /* Equal-width actions so the panel never changes height between slides */
  .hero__actions { flex-wrap: nowrap; }
  .hero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
}

/* ---------------- Phones / small tablets: below 768px ---------------- */
@media (max-width: 767.98px) {
  .services__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .previews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valueprop__grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .contact__grid { grid-template-columns: 1fr; gap: 2rem; }
  .form__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .footer__brand-cell { grid-column: auto; }
  .traverse { grid-template-columns: 1fr; row-gap: 2rem; }
  .traverse::before { display: none; }
  .rvw-card { flex-basis: 100%; }
  .about__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about__media { max-width: none; margin-inline: auto; }
}

/* ---------------- Tablet: 768px+ ---------------- */
@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .previews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .valueprop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__media { max-width: 620px; margin-inline: auto; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand-cell { grid-column: 1 / -1; }
  .traverse { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.75rem; }
  .traverse::before { display: none; }
  .rvw-card { flex-basis: calc((100% - clamp(0.85rem, 1.8vw, 1.4rem)) / 2); }
}

/* Tablet widths keep a narrower panel so more of the photograph shows */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .hero__content { max-width: 480px; }
}

/* ---------------- Laptop: 1024px+ ---------------- */
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .previews__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .valueprop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about__grid { grid-template-columns: 1.05fr 1fr; }
  .traverse { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  .traverse::before { display: block; }
  .contact__grid { grid-template-columns: 1fr 1.15fr; }
  .footer__top { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__brand-cell { grid-column: auto; }
  .rvw-card { flex-basis: calc((100% - (clamp(0.85rem, 1.8vw, 1.4rem) * 2)) / 3); }
}

/* ---------------- Desktop: 1280px+ ---------------- */
@media (min-width: 1280px) {
  .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__content { margin-right: 5rem; }
}

/* =========================================================================
   MOBILE NAVIGATION — collapses below 1024px
   ========================================================================= */
@media (max-width: 1023.98px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    /* The header's backdrop-filter makes it the containing block, so 100%
       anchors the drawer exactly under it at any scroll position. */
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 0.5rem var(--gutter) 1.25rem;
    max-height: calc(100svh - var(--header-h) - var(--topbar-h));
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s var(--ease), opacity 0.24s var(--ease), visibility 0.24s;
    z-index: 99;
  }
  .nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__link {
    padding: 0.95rem 0.25rem;
    font-size: 1.06rem;
    border-bottom: 1px solid var(--border);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--orange-dark); }
  .nav__link.is-active::before {
    content: "";
    position: absolute;
    left: -0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 60%;
    background: var(--orange);
    border-radius: 999px;
  }
  .nav__cta {
    margin: 1.1rem 0 0;
    width: 100%;
  }
  .nav__cta .btn { width: 100%; }

  /* When the drawer is closed, hide it from tab order too */
  .nav:not(.is-open) { pointer-events: none; }

  /* Keep the info bar on one line across tablet widths */
  .topbar__hours,
  .topbar__item--loc { display: none; }
}

/* =========================================================================
   Small mobile — 599.98px and below
   ========================================================================= */
@media (max-width: 599.98px) {
  :root {
    --topbar-h: 34px;
    --header-h: 74px;
  }

  /* Top bar: phone + email stay, the long address is dropped */
  .topbar { font-size: 0.72rem; }
  .topbar__inner { justify-content: center; gap: 0.3rem 0.75rem; min-height: var(--topbar-h); flex-wrap: nowrap; }
  .topbar__list { gap: 0.75rem; flex-wrap: nowrap; }
  .topbar__hours,
  .topbar__item--loc { display: none; }
  .topbar__item { gap: 0.32rem; }
  .topbar__item svg { width: 13px; height: 13px; }
  .topbar__item span { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }

  /* Brand */
  .brand { gap: 0.55rem; }
  .brand__logo { width: 56px; height: 56px; }
  .brand__name { font-size: 20px; letter-spacing: 0.03em; }
  .brand__tag { font-size: 9px; letter-spacing: 1.5px; }

  /* Footer brand */
  .footer__brand { gap: 0.7rem; align-items: center; }
  .footer__logo { width: 60px; height: 60px; }
  .footer__name { font-size: 20px; letter-spacing: 0.03em; }
  .footer__tag { font-size: 9px; letter-spacing: 1.5px; }

  /* ---------- Hero: content floats over the photograph ---------- */
  .hero__viewport { min-height: 0; }
  .hero__slide { min-height: clamp(470px, 84svh, 640px); }
  .hero__inner {
    min-height: clamp(470px, 84svh, 640px);
    align-items: flex-end;
    padding-block: 1.5rem 3.25rem;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    height: auto;
  }
  .hero__media img {
    object-position: var(--hero-pos-m, 50% 40%);
  }
  .hero__content {
    background: linear-gradient(118deg,
      rgba(9, 22, 28, 0.8) 0%,
      rgba(9, 22, 28, 0.64) 60%,
      rgba(9, 22, 28, 0.5) 100%);
    padding: 1.15rem 1.15rem 1.25rem;
    margin: 0 12px;
    max-width: none;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(6, 16, 20, 0.32);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero__kicker { min-height: calc(2 * 1.6em); font-size: 0.72rem; }
  .hero__title {
    font-size: clamp(1.35rem, 1.02rem + 2vw, 1.75rem);
    min-height: calc(4 * 1.14em);
  }
  .hero__text {
    font-size: 0.95rem;
    margin-bottom: 1.15rem;
    min-height: calc(4 * 1.6em);
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .hero__nav { display: none; }
  .hero__dots { bottom: 1.1rem; }
  .hero__dot { width: 26px; }
  .hero__dot[aria-selected="true"] { width: 42px; }
  .hero__counter { display: none; }

  /* About */
  .about__badge {
    position: static;
    margin-top: 1rem;
    max-width: none;
    display: flex;
    align-items: center;
  }


  /* FAQ */
  .faq__q { font-size: 1rem; }
  .faq__banner img { height: 190px; }

  /* Request-a-quote band */
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { width: 100%; }
}

/* Narrow phones: shrink the info bar so phone + email still fit one line */
@media (max-width: 339.98px) {
  .topbar { font-size: 0.66rem; }
  .topbar__inner { gap: 0.25rem 0.5rem; }
  .topbar__list { gap: 0.55rem; }
  .topbar__item { gap: 0.28rem; }
  .topbar__item svg { width: 12px; height: 12px; }
}