/* responsive.css - desktop is the reference, these stack it down */

@media (max-width: 1240px) {
  /* The scale steps down together so the relationships between levels
     hold at every width. Nothing here is ever larger than the desktop
     value it overrides. */
  :root {
    --fs-h1: 52px;
    --fs-h2: 42px;
    --fs-h3: 34px;
    --fs-h4: 29px;
    --fs-h5: 23px;
    --fs-h6: 19px;
    --fs-body: 17.5px;
    --fs-eyebrow: 15px;
    --pad-section: 76px;
  }
  .primary-nav__link { font-size: var(--fs-body); padding: 10px 8px; }
  .brand img { width: 126px; height: 48px; }
}

@media (max-width: 1150px) {
  .navtoggle { display: inline-flex; }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    transition: max-height .3s var(--ease);
  }

  .masthead { position: relative; }
  .masthead__inner { position: relative; flex-wrap: wrap; }
  .masthead__cta { display: none; }

  .primary-nav.is-open { max-height: 80vh; overflow-y: auto; }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 22px;
  }

  .primary-nav__item { border-bottom: 1px solid var(--line); }

  .primary-nav__link { padding: 13px 0; border-radius: 0; font-size: var(--fs-h6); }
  .primary-nav__link:hover,
  .primary-nav__link.is-active { background: transparent; }

  .submenu-toggle { right: 0; width: 40px; height: 44px; top: 22px; }
  .submenu-toggle::before { left: 14px; top: 18px; }
  .has-children.is-open > .submenu-toggle::before { transform: rotate(225deg); }

  .submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 12px 12px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-children:hover > .submenu { display: none; }
  .has-children.is-open > .submenu { display: block; }
}

@media (max-width: 1080px) {
  .cards,
  .rates,
  .steps,
  .tiles { grid-template-columns: repeat(2, 1fr); }

  .gallery { grid-template-columns: repeat(3, 1fr); }

  .sitefoot__grid { grid-template-columns: 1fr 1fr; }
  .sitemap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 35px;
    --fs-h3: 29px;
    --fs-h4: 25px;
    --fs-h5: 21px;
    --fs-h6: 18px;
    --fs-body: 17px;
    --fs-eyebrow: 14px;
    --fs-num-xl: 36px;
    --fs-num-lg: 27px;
    --pad-section: 62px;
    --pad-card: 24px;
  }

  .topbar__inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .topbar__contact { flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
  .topbar__social { justify-content: center; }

  .hero { --hero-h: clamp(440px, 68vh, 600px); --hero-h: clamp(440px, 68svh, 600px); }
  .hero__copy { padding-top: 56px; padding-bottom: 78px; }
  .hero__sub { font-size: var(--fs-body); }

  .split,
  .review { grid-template-columns: 1fr; gap: 34px; }

  .split--reverse .split__figure { order: 0; }

  .split__figure,
  .split__figure img { min-height: 300px; }

  .strip__grid { grid-template-columns: repeat(2, 1fr); }

  .ticklist--two { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root {
    /* A 60px headline is about six characters on a 360px screen. The whole
       ladder steps down together here so the relationships between levels
       still hold, and body text never drops below 16px because anything
       smaller makes iOS zoom the page when a field takes focus. */
    --fs-h1: 33px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 21px;
    --fs-h5: 19px;
    --fs-h6: 17px;
    --fs-body: 16.5px;
    --fs-eyebrow: 13.5px;
    --fs-num-xl: 31px;
    --fs-num-lg: 25px;
    --fs-num-md: 20px;
    --pad-section: 52px;
  }

  body { padding-bottom: 56px; }

  /* Sides only. The shorthand resets all four edges, and .shell is combined
   with blocks that set their own vertical padding, so `padding: 0 18px`
   silently wiped the top and bottom spacing on the footer, both banners and
   the strip at every width below 680px. */
  .shell { padding-left: 18px; padding-right: 18px; }

  .topbar { font-size: var(--fs-eyebrow); }
  .topbar__inner { flex-direction: column; gap: 6px; }
  .topbar__contact { gap: 4px 14px; text-align: center; }
  .topbar__contact li { line-height: 1.5; }

  .callbar { display: grid; }
  body { --callbar-h: 64px; }
  .sitefoot { padding-bottom: calc(28px + 64px + env(safe-area-inset-bottom)); }
  .wa-float { display: none; }

  .hero { --hero-h: clamp(430px, 66vh, 560px); --hero-h: clamp(430px, 66svh, 560px); }
  .hero__copy { padding-top: 46px; padding-bottom: 72px; }
  .hero__photo { object-position: center 50%; }
  .hero__title { max-width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__dots { bottom: 22px; }

  .cards,
  .rates,
  .steps,
  .tiles,
  .field-row { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); }

  .sitefoot__grid,
  .sitemap { grid-template-columns: 1fr; }

  .sitefoot__base-inner { flex-direction: column; text-align: center; }

  .split__panel { padding: 20px 18px 16px; }
  .split--form { gap: 30px; }
  .field--qty { grid-template-columns: auto 1fr; }

  .cta__actions .btn,
  .review__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .brand img { width: 116px; height: 44px; }
  .hero { --hero-h: clamp(400px, 64vh, 500px); --hero-h: clamp(400px, 64svh, 500px); }
  .hero__sub { font-size: var(--fs-body); margin-bottom: 24px; }
  .strip__grid { gap: 8px 14px; }
  .strip__key { font-size: var(--fs-num-md); }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item img { height: 210px; }
}

/* ---- inner page patterns ---- */
@media (max-width: 1040px) {
  .paylayout { grid-template-columns: 1fr; gap: 34px; }
  .featurerow { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .grid-gallery { grid-template-columns: repeat(3, 1fr); }
  .contactgrid,
  .offices { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .banner { min-height: 300px; }
  .banner__copy { padding-top: 72px; padding-bottom: 38px; }
  .banner__sub { font-size: var(--fs-body); }
  .dodont,
  .pairs { grid-template-columns: 1fr; }
  .featurerow,
  .contactgrid,
  .offices { grid-template-columns: 1fr !important; }
  .grid-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid-gallery figure:nth-child(7n + 1) { grid-column: span 2; }
  .grid-gallery img { height: 170px; }
  .paypanel { padding: 24px; }
  .pullquote { font-size: var(--fs-num-md); }
  .mapwrap iframe { height: 300px; }
  .ratetable thead { display: none; }
  .ratetable tbody tr { display: block; border-bottom: 1px solid var(--line); }
  .ratetable tbody td,
  .ratetable tbody th { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 9px 16px; }
  .ratetable tbody td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-small); }
  .timeline li { padding-left: 52px; }
}

@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .grid-gallery { grid-template-columns: 1fr; }
  .grid-gallery figure:nth-child(7n + 1) { grid-column: span 1; }
}


/* Short landscape phones: a 480px hero would be taller than the screen. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero { --hero-h: 400px; }
  .hero__copy { padding-top: 38px; padding-bottom: 60px; }
  .banner { min-height: 260px; }
}