/* ================================================================
   Good's Tree and Lawn Care — site styles
   Matches the visual language of goodstreecare.com:
   - cream page background, deep forest green + burgundy bands,
     full-bleed photos, grunge/torn dividers, Playfair display,
     Open Sans body, coral CTAs.
   ================================================================ */

/* ---------- BUTTONS ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.btn--coral {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(184, 90, 64, 0.6);
}
.btn--coral:hover { background: var(--coral-deep); transform: translateY(-1px); }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.btn--ghost-dark {
  background: transparent;
  color: var(--brown);
  border: 1.5px solid var(--brown);
}
.btn--ghost-dark:hover { background: var(--brown); color: #fff; }

.btn--cream {
  background: var(--cream);
  color: var(--brown);
}
.btn--cream:hover { background: #fff; transform: translateY(-1px); }


/* ===================================================================
   HEADER / NAV — single-row, with mega menus on hover
   =================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid rgba(63, 42, 34, 0.08);
}

/* Utility strip — phone + pay bill above the main nav */
.site-header__utility {
  background: var(--cream-2);
  border-bottom: 1px solid rgba(63, 42, 34, 0.06);
}
.site-header__utility-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 8px clamp(20px, 3vw, 44px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.utility-group {
  display: flex;
  align-items: center;
  gap: 18px;
}
.utility-group--right {
  gap: 14px;
}
.utility-group--right > * + *::before {
  content: "·";
  color: rgba(63, 42, 34, 0.35);
  margin-right: 14px;
  font-weight: 600;
}
.utility-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.utility-loc svg { width: 13px; height: 13px; color: var(--coral); flex-shrink: 0; }
.utility-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color .15s ease;
}
.utility-link:hover { color: var(--coral); }
.utility-link svg { width: 13px; height: 13px; color: var(--coral); }
.utility-link--phone { font-weight: 700; }
@media (max-width: 760px) {
  .utility-group--left { display: none; }
  .site-header__utility-inner { justify-content: center; gap: 18px; padding: 7px 16px; }
  .utility-group--right { gap: 10px; }
  .utility-group--right > * + *::before { margin-right: 10px; }
  .utility-link { font-size: 11.5px; }
}

/* Consistent radius tokens applied across photos & cards */
:root {
  --r-card: 32px;
  --r-photo: 32px;
}

.site-header__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 22px clamp(20px, 3vw, 44px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(20px, 2.5vw, 36px);
}

.site-header__logo {
  display: flex;
  align-items: end;
  flex-shrink: 0;
  min-width: 160px;
  /* Drop the logo so its wordmark baseline matches the nav baseline below */
  margin-bottom: 4px;
}
.site-header__logo img {
  height: 76px;
  width: auto;
  flex-shrink: 0;
  min-width: 140px;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  flex-wrap: nowrap;
}

.primary-nav__item {
  position: relative;
  flex-shrink: 0;
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brown);
  position: relative;
  cursor: pointer;
  transition: color .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.primary-nav__link:hover { color: var(--coral); }
.primary-nav__link svg {
  width: 9px; height: 9px;
  opacity: 0.7;
  transition: transform .2s ease;
}
.primary-nav__item:hover .primary-nav__link svg { transform: rotate(180deg); }

.primary-nav__link--active::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 4px;
  height: 2px;
  background: var(--coral);
  border-radius: 2px;
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--brown);
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--cream-2); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .x { display: none; }
.nav-toggle[aria-expanded="true"] .menu { display: none; }
.nav-toggle[aria-expanded="true"] .x { display: inline; }

/* Single-row, no-stack nav. Tighten typography + collapse low-priority
   items into a "More" menu on narrower viewports. */
@media (max-width: 1180px) {
  .primary-nav__link { padding: 11px 10px; font-size: 13.5px; }
  .site-header__phone span { display: none; }
  .primary-nav__item--secondary { display: none; }
  .primary-nav__item--more { display: flex !important; }
  .site-header__logo img { height: 64px; min-width: 120px; }
}
@media (max-width: 980px) {
  .primary-nav__link { padding: 10px 8px; font-size: 13px; }
  .site-header__inner { gap: 14px; padding: 16px 16px; }
  .site-header__logo img { height: 56px; min-width: 110px; }
  .site-header__phone { display: none; }
  .primary-nav__item--tertiary { display: none; }
}
@media (max-width: 760px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { grid-template-columns: auto 1fr auto; gap: 8px; }
  .primary-nav.is-open {
    display: flex;
    position: fixed;
    inset: 64px 0 0 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px;
    gap: 4px;
    overflow-y: auto;
    z-index: 49;
    border-top: 1px solid rgba(63, 42, 34, 0.08);
  }
  .primary-nav.is-open .primary-nav__item { width: 100%; border-bottom: 1px solid rgba(63, 42, 34, 0.06); }
  .primary-nav.is-open .primary-nav__item--secondary,
  .primary-nav.is-open .primary-nav__item--tertiary { display: block !important; }
  .primary-nav.is-open .primary-nav__item--more { display: none !important; }
  .primary-nav.is-open .primary-nav__link { width: 100%; padding: 14px 8px; font-size: 13px; letter-spacing: 0.12em; justify-content: space-between; }
  .primary-nav.is-open .megamenu {
    position: static; transform: none; box-shadow: none; background: transparent;
    padding: 0 8px 12px; min-width: 0; opacity: 1; pointer-events: auto;
  }
  .primary-nav.is-open .megamenu::before { display: none; }
  .primary-nav.is-open .megamenu__grid { grid-template-columns: 1fr; gap: 0; }
}

.primary-nav__item--more { display: none; }

/* Phone in header */
.site-header__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-header__phone {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--brown);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-header__phone svg { width: 14px; height: 14px; color: var(--coral); }
.site-header__phone span { display: none; }
@media (min-width: 1100px) {
  .site-header__phone span { display: inline; }
}

/* Mega menu */
.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 540px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 60px -24px rgba(40, 71, 52, 0.32), 0 8px 18px -10px rgba(0,0,0,0.08);
  padding: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
}
.primary-nav__item:hover .megamenu,
.primary-nav__item:focus-within .megamenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.megamenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  background: #fff;
  rotate: 45deg;
  border-radius: 3px;
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 28px;
}
.megamenu__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.megamenu__heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest);
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.megamenu__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: 0;
  text-transform: none;
  transition: background .15s ease, color .15s ease;
}
.megamenu__link small {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-3);
}
.megamenu__link:hover {
  background: var(--cream-2);
  color: var(--coral-deep);
}

.megamenu--narrow { min-width: 280px; }
.megamenu--narrow .megamenu__grid { grid-template-columns: 1fr; }


/* ===================================================================
   HERO — full-bleed photo with text bottom-left
   =================================================================== */

.hero {
  position: relative;
  min-height: 520px;
  height: clamp(520px, 68vh, 680px);
  background: #4a6b3e;
  overflow: hidden;
}

.hero__photo-wrap {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

/* Forest-tinted gradient — pops the type without darkening the family.
   Strongest top-left, fades transparent before the lower portion of the photo. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    155deg,
    rgba(19, 48, 36, 0.62) 0%,
    rgba(19, 48, 36, 0.34) 30%,
    rgba(19, 48, 36, 0.08) 52%,
    transparent 65%
  );
}

@media (max-width: 720px) {
  .hero {
    height: clamp(460px, 72vh, 620px);
  }
  .hero__photo {
    object-position: center 78%;
  }
  /* On mobile, gradient runs vertically — text is top, family is bottom */
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(19, 48, 36, 0.68) 0%,
      rgba(19, 48, 36, 0.42) 22%,
      rgba(19, 48, 36, 0.12) 42%,
      transparent 58%
    );
  }
}

.hero__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* On desktop, constrain text content to left half so it never overlaps family on the right */
}
.hero__inner > * {
  max-width: min(560px, 50%);
}
@media (max-width: 720px) {
  .hero__inner {
    align-items: center;
    text-align: center;
    padding-top: clamp(28px, 7vw, 48px);
  }
  .hero__inner > * {
    max-width: 100%;
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 18px;
}
.hero__eyebrow::before {
  content: "";
  width: 32px; height: 1.5px;
  background: var(--coral);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: #fff;
  max-width: 16ch;
  margin-bottom: 20px;
  text-wrap: balance;
  text-shadow: var(--hero-text-shadow, 0 2px 24px rgba(15, 25, 18, 0.55), 0 1px 3px rgba(0,0,0,0.3));
}

.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: #F0E0CF;
}

.hero__sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  color: rgba(255,255,255,0.95);
  margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(15, 25, 18, 0.5), 0 1px 2px rgba(0,0,0,0.25);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero__sub { white-space: normal; font-size: 17px; }
}

.hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Match hero text shadow on the hero CTA so it reads cleanly on the photo */
.hero__ctas .btn {
  text-shadow: var(--hero-cta-text-shadow, 0 1px 2px rgba(0,0,0,0.25));
  box-shadow: var(--hero-cta-box-shadow, 0 10px 28px -10px rgba(15, 25, 18, 0.65), 0 4px 10px -4px rgba(0,0,0,0.35));
}


/* ===================================================================
   SERVICES BAND — forest green with bullet list + photo
   =================================================================== */

.services-band {
  position: relative;
  background: var(--forest);
  color: #fff;
  padding: 0;
}

.services-band__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(30px, 4vw, 60px) clamp(20px, 4vw, 48px) clamp(30px, 4vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 860px) {
  .services-band__inner { grid-template-columns: 1fr; }
}

.services-band__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.1;
}
.services-band__title em {
  font-style: italic;
  font-weight: 500;
  color: #F2D6BF;
}
.services-band__lede {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin-bottom: 36px;
  max-width: 50ch;
}

.services-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 32px;
}
.services-list__item {
  position: relative;
}
.services-list__btn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  padding: 22px 8px 22px 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.005em;
  position: relative;
  transition: color .2s ease;
}
.services-list__leaf {
  position: absolute;
  left: 0;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%) scale(0.92);
  opacity: 0.45;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
  pointer-events: none;
}
.services-list__leaf--tree-care        { -webkit-mask-image: url("assets/icon-tree.svg");      mask-image: url("assets/icon-tree.svg"); }
.services-list__leaf--lawn-care        { -webkit-mask-image: url("assets/icon-grass.svg");     mask-image: url("assets/icon-grass.svg"); }
.services-list__leaf--plant-health     { -webkit-mask-image: url("assets/icon-plant.svg");     mask-image: url("assets/icon-plant.svg"); }
.services-list__leaf--holiday-lighting { -webkit-mask-image: url("assets/icon-holiday.svg");   mask-image: url("assets/icon-holiday.svg"); }
.services-list__leaf--commercial       { -webkit-mask-image: url("assets/icon-commercial.svg"); mask-image: url("assets/icon-commercial.svg"); }
.services-list__item.is-active .services-list__leaf {
  opacity: 1;
  background-color: #F2D6BF;
  transform: translateY(-50%) scale(1.04);
}
.services-list__item.is-active .services-list__btn { color: #fff; }
.services-list__btn:hover { color: #F2D6BF; }
.services-list__item.is-active .services-list__btn:hover { color: #fff; }
.services-list__name { flex: 1; }
.services-list__btn .arrow { display: none; }

.services-band__detail {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.services-band__photo {
  position: relative;
  aspect-ratio: 6 / 5;
  border-radius: var(--r-photo);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.2);
}
.services-band__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .45s ease, transform .9s ease;
  pointer-events: none;
}
.services-band__photo-img.is-active {
  opacity: 1;
  transform: scale(1);
}

.services-band__copy {
  position: relative;
  min-height: 180px;
}
.services-band__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.services-band__pane.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.services-band__pane h3 {
  font-family: var(--font-body);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: 0.005em;
}
.services-band__pane p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  margin: 0 0 18px;
  max-width: 52ch;
}
.services-band__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F2D6BF;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 214, 191, 0.4);
  padding-bottom: 4px;
  transition: color .15s ease, border-color .15s ease;
}
.services-band__link svg {
  width: 14px; height: 14px;
  transition: transform .2s ease;
}
.services-band__link:hover { color: #fff; border-color: #fff; }
.services-band__link:hover svg { transform: translateX(4px); }

@media (max-width: 600px) {
  .services-list__btn { font-size: 20px; padding: 18px 8px 18px 50px; }
  .services-list__leaf { width: 38px; height: 38px; }
}

/* Green grunge top divider on services band — brush rises up out of cream into solid green band */
.services-band__top-divider {
  position: relative;
  height: 110px;
  background: var(--cream);
  margin-bottom: -1px;
}
.services-band__top-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/divider-top-v3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
}

/* Bottom divider — green band fades down into white team band */
.services-band__bottom-divider {
  position: relative;
  height: 130px;
  margin-top: -1px;
  background: #ffffff;
}
.services-band__bottom-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/divider-bottom-v3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
}


/* ===================================================================
   INTRO BAND — cream, centered paragraph with green grunge top
   =================================================================== */

.intro-band {
  background: #ffffff;
  padding: clamp(60px, 7vw, 100px) clamp(20px, 4vw, 48px) clamp(40px, 5vw, 70px);
  text-align: left;
}
.intro-band__inner {
  max-width: 880px;
  margin: 0 auto;
}
.intro-band__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--brown);
  line-height: 1.2;
  margin-bottom: 12px;
}
.intro-band__locations {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.4;
  letter-spacing: 0.005em;
  margin: 0 0 28px;
}
.intro-band__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 18px;
}


/* ===================================================================
   TEAM BAND — cream, photo left + text right
   =================================================================== */

.team-band {
  background: var(--cream);
  padding: clamp(56px, 7vw, 100px) clamp(20px, 4vw, 48px);
  position: relative;
}
.team-band__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 800px) {
  .team-band__inner { grid-template-columns: 1fr; }
}
.team-band__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-photo);
  overflow: hidden;
  box-shadow: 0 16px 40px -22px rgba(0,0,0,0.3);
}
.team-band__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-band__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 24px;
  line-height: 1.15;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .team-band__title { white-space: normal; }
}
.team-band__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.team-band__cta {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}
.team-band__credentials {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.4vw, 18px);
  flex-wrap: nowrap;
  margin: 28px 0 8px;
}
.team-band__credentials img {
  height: clamp(56px, 6.5vw, 80px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  opacity: 0.92;
}


/* ===================================================================
   STATS — heading + lede
   =================================================================== */

.stats-band__heading {
  text-align: center;
  margin-bottom: 56px;
}
.stats-band__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 14px;
}
.stats-band__lede {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.6;
}

.stats-band {
  background: var(--cream-2);
  padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 48px);
  position: relative;
}
.stats-band__rough-edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background-image: url("assets/stats-rough-edge.svg?v=3");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.stats-band__wrap {
  max-width: 1320px;
  margin-inline: auto;
}
.stats-band__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 800px) {
  .stats-band__inner { grid-template-columns: 1fr; }
}

.stat-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 36px -20px rgba(0,0,0,0.3);
}
.stat-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 50%, rgba(40, 71, 52, 0.85) 100%);
  z-index: 2;
}
.stat-card__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 32px 28px 28px;
  color: #fff;
}
.stat-card__num {
  font-family: var(--font-body);
  font-size: clamp(54px, 6vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 8px;
}
.stat-card__num sup {
  font-size: 1em;
  font-weight: inherit;
  vertical-align: baseline;
  margin-left: 2px;
  opacity: 1;
}
.stat-card__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}


/* ===================================================================
   REVIEWS BAND — burgundy with cream cards
   =================================================================== */

.reviews-band {
  background: #ffffff;
  /* Top padding reduced by the wave-divider height (28-48px) */
  padding: clamp(42px, 5.5vw, 72px) clamp(20px, 4vw, 48px) clamp(70px, 9vw, 120px);
  position: relative;
}
.reviews-band__rough-edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background-image: url("assets/reviews-rough-edge.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.reviews-band__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 700;
  color: var(--brown);
  text-align: center;
  margin-bottom: 14px;
}
.reviews-band__sub {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 80ch;
  text-align: center;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.reviews-band__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 44px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s;
}
.reviews-band__rating:hover { color: var(--coral-deep); }
.reviews-band__rating strong {
  font-weight: 700;
  color: var(--ink);
}
.reviews-band__rating:hover strong { color: var(--coral-deep); }
.reviews-band__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--coral);
}
.reviews-band__stars svg {
  width: 18px;
  height: 18px;
}
.reviews-band__rating-text {
  font-size: 15px;
}
@media (max-width: 520px) {
  .reviews-band__rating {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 14px;
  }
  .reviews-band__rating-text { font-size: 14px; }
}

.reviews-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; max-width: 520px; }
}

.review-card {
  background: #ffffff;
  color: #1f1b16;
  border: 1px solid #E2E2E2;
  border-radius: 12px;
  padding: 24px 26px 26px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}
.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.review-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.review-card__avatar--g1 { background: #6B8E23; } /* olive */
.review-card__avatar--g2 { background: #B05B3B; } /* terracotta */
.review-card__avatar--g3 { background: #4A6B7C; } /* slate blue */
.review-card__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.review-card__name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #1f1b16;
  margin: 0;
  line-height: 1.2;
}
.review-card__loc {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #70757A;
  margin: 0;
  line-height: 1.2;
}
.review-card__google {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.review-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.review-card__stars {
  display: flex;
  gap: 1px;
  color: #FBBC04; /* google star yellow */
  margin: 0;
}
.review-card__stars svg { width: 16px; height: 16px; fill: currentColor; }
.review-card__date {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #70757A;
}
.review-card__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: #1f1b16;
  margin: 0;
}
.review-card__footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #EFEFEF;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #70757A;
  letter-spacing: 0.02em;
}
.review-card__footer svg { width: 14px; height: 14px; flex-shrink: 0; }

.reviews-band__cta {
  margin-top: 44px;
  text-align: center;
}


/* ===================================================================
   BLOG / KNOW-HOW BAND — cream, sits between reviews (white) and certs (cream)
   =================================================================== */

.blog-band {
  background: var(--cream);
  /* Top padding reduced by the wave-divider height (28-48px) */
  padding: clamp(12px, 2.5vw, 32px) clamp(20px, 4vw, 48px) clamp(60px, 7vw, 90px);
  position: relative;
}
.blog-band__rough-edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background-image: url("assets/certs-rough-edge.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.blog-band__inner {
  max-width: 1280px;
  margin-inline: auto;
}
.blog-band__heading {
  text-align: center;
  max-width: none;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.blog-band__sub { white-space: nowrap; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 18px;
}
.blog-band__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 700;
  color: var(--brown);
  line-height: 1.05;
  margin: 0 0 16px;
}
.blog-band__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--coral-deep);
}
.blog-band__sub {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}
.blog-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(40px, 5vw, 60px);
}
.blog-card {
  background: #ffffff;
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 1px 2px rgba(63, 42, 34, 0.04);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(63, 42, 34, 0.12);
}
.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.blog-card:hover .blog-card__media img {
  transform: scale(1.04);
}
.blog-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--forest);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
}
.blog-card__body {
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.blog-card__title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
}
.blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.blog-card__title a:hover {
  color: var(--coral);
}
.blog-card__sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  margin-top: 6px;
  transition: gap .2s ease;
}
.blog-card__more svg {
  width: 14px; height: 14px;
}
.blog-card__more:hover {
  gap: 12px;
}
.blog-band__cta {
  text-align: center;
}
@media (max-width: 960px) {
  .blog-band__grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   CERTIFICATIONS — green band with cert logos to the right
   =================================================================== */

.certs-band {
  background: var(--cream);
  padding: clamp(60px, 7vw, 100px) clamp(20px, 4vw, 48px);
  position: relative;
}
.certs-band__rough-edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background-image: url("assets/certs-rough-edge.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Generic section divider — uses wave-5-asymmetric curve as mask so any
   color works. Class kept named "rough-divider" for legacy usage; the
   underlying shape is now the smooth asymmetric wave. */
.rough-divider {
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: clamp(28px, 3.5vw, 48px);
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: url("assets/curves/wave-5-asymmetric.svg");
  mask-image: url("assets/curves/wave-5-asymmetric.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.rough-divider--white { background: #ffffff; }
.rough-divider--cream { background: var(--cream); }
.rough-divider--cream-2 { background: var(--cream-2); }
.rough-divider--cream-3 { background: var(--cream-3); }
.rough-divider--forest { background: var(--forest); }
.rough-divider--brown { background: #241509; }
/* Inverted: divider sits in the area ABOVE its parent, with the section's
   color anchored to the parent boundary (bottom of divider). The wave curve
   appears at the TOP edge of the divider, sticking up into the section above. */
.rough-divider--inverted {
  top: auto;
  bottom: 100%;
  margin-bottom: -1px;
}
/* Flips the wave horizontally — useful when stacking dividers so adjacent
   waves mirror each other instead of repeating the same direction. */
.rough-divider--flip {
  transform: scaleX(-1);
}

.certs-band__inner {
  max-width: 1200px;
  margin-inline: auto;
  text-align: center;
}

.certs-band__title-block {
  margin-bottom: clamp(36px, 4vw, 56px);
}
.certs-band__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: 0.02em;
  text-align: center;
}

.certs-band__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 5vw, 72px);
  flex-wrap: nowrap;
}
.certs-band__logos img {
  max-height: 130px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  flex: 0 1 auto;
}
@media (max-width: 720px) {
  .certs-band__logos { flex-wrap: wrap; gap: 32px; }
  .certs-band__logos img { max-height: 100px; }
}


/* ===================================================================
   HOW IT WORKS — forest green band with grunge top + bottom dividers
   =================================================================== */

.how-band-wrapper {
  position: relative;
  background: var(--cream);
}

/* Same brushy dividers as services band */
.how-band__top {
  position: relative;
  height: 110px;
  background: var(--cream);
  margin-bottom: -1px;
}
.how-band__top::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/divider-top-v3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.how-band__bottom {
  position: relative;
  height: 130px;
  background: var(--cream);
  margin-top: -1px;
}
.how-band__bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/divider-bottom-v3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
}

.how-band {
  background: var(--forest);
  color: #fff;
  padding: clamp(20px, 3vw, 50px) clamp(20px, 4vw, 48px) clamp(40px, 4vw, 60px);
  text-align: center;
}
.how-band__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 56px;
}

.how-steps {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 760px) {
  .how-steps { grid-template-columns: 1fr; }
}

.how-step {
  text-align: center;
  padding: 0 12px;
}
.how-step__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-step__icon svg, .how-step__icon img {
  width: 100%;
  height: 100%;
  /* Force any colored icon source to render white */
  filter: brightness(0) invert(1);
}
.how-step__num {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.how-step__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.how-step__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  max-width: 28ch;
  margin: 0 auto;
}


/* ===================================================================
   EXPERIENCE BAND — dark brown with text + photo right
   =================================================================== */

.experience-band-wrapper {
  position: relative;
  background: var(--cream);
}

/* soft cream wave divider on top */
.experience-band__top-wave { display: none; }

.experience-band {
  background: var(--cream);
  color: var(--ink-1);
  padding: clamp(48px, 6vw, 90px) clamp(20px, 4vw, 48px) clamp(64px, 7vw, 100px);
}
.experience-band__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 860px) {
  .experience-band__inner { grid-template-columns: 1fr; }
}

/* ===================================================================
   CLOSER — 2-column conversion CTA on forest green, photo full-clarity
   =================================================================== */
.closer {
  background: var(--forest);
  /* Top padding reduced by the wave-divider height (28-48px) */
  padding: clamp(36px, 4.5vw, 62px) clamp(20px, 4vw, 48px) clamp(64px, 8vw, 110px);
  color: var(--cream);
  position: relative;
}
.closer__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 800px) {
  .closer__inner { grid-template-columns: 1fr; }
}
.closer__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--cream);
}
.closer__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}
.closer__sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.88;
  max-width: 52ch;
  margin: 0 0 32px;
}
.closer__ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.closer__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--cream);
  opacity: 0.88;
  transition: opacity .15s;
}
.closer__phone strong {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.closer__phone svg { width: 18px; height: 18px; }
.closer__phone:hover { opacity: 1; }
.closer__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-photo);
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.5), 0 8px 20px -10px rgba(0, 0, 0, 0.3);
}
.closer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 560px) {
  .closer__ctas { flex-direction: column; align-items: flex-start; gap: 18px; }
}

.experience-band__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1.15;
  margin-bottom: 32px;
  max-width: 14ch;
}
.experience-band__photo {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-photo);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.5);
}
.experience-band__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}


/* ===================================================================
   FOOTER
   =================================================================== */

.site-footer {
  position: relative;
  background-color: #241509; /* deep bark brown */
  color: rgba(255, 245, 230, 0.78);
  /* No horizontal padding here — pushed onto __inner so header and footer
     content align to the same effective max-width (1280 - 2*pad). */
  padding: clamp(36px, 3.5vw, 48px) 0 clamp(28px, 3vw, 40px);
  isolation: isolate;
}
/* Rough bark-like top edge — sits in normal flow above the footer, with negative margin so footer pulls up under it */
.site-footer__rough-edge {
  position: relative;
  height: 30px;
  margin-bottom: -1px; /* hairline overlap with footer to avoid sub-pixel gap */
  background-image: url("assets/footer-rough-edge.svg?v=3");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
/* Bark texture overlay removed */
.site-footer::before { display: none; }
/* Subtle top-to-bottom darkening so footer feels grounded as it descends */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
  z-index: 0;
}
.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  /* Match header's internal padding so footer content aligns horizontally
     with header content (logo to right edge of phone icon). */
  padding-inline: clamp(16px, 4vw, 32px);
}


/* Top columns */
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 245, 230, 0.14);
}
@media (max-width: 1080px) {
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}

.site-footer__brand .site-footer__logo-img {
  /* Same scale as the header logo. Painted in the same cream tone as the
     social icons via mask + background-color. */
  height: clamp(50px, 5.5vw, 79px);
  width: clamp(140px, 15vw, 220px);
  margin-bottom: 18px;
  /* Use the logo as a mask and paint it with the same color as body text.
     Guarantees pixel-exact match — no filter chain approximation. */
  -webkit-mask-image: url('/assets/logo-full.png');
  mask-image: url('/assets/logo-full.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: rgba(255, 245, 230, 0.78);
  /* The img's own pixels are now hidden by the mask — only the masked
     background-color shows through. Setting visibility/opacity to clear any
     leftover from previous filter rules. */
  filter: none;
  opacity: 1;
}
.site-footer__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 245, 230, 0.72);
  margin-bottom: 22px;
  max-width: 30ch;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F4DDB6;
  margin-bottom: 20px;
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__links a {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 245, 230, 0.82);
  transition: color .15s ease;
}
.site-footer__links a:hover { color: #F4DDB6; }

/* Social icons — solid light pills */
.site-footer__social {
  display: flex;
  gap: 16px;
}
.site-footer__social a {
  width: 37px; height: 37px;
  border-radius: 999px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: transform .15s ease, opacity .15s ease;
  border: 0;
}
.site-footer__social a:hover {
  transform: translateY(-2px);
  opacity: 1;
}
.site-footer__social img { width: 100%; height: 100%; display: block; }

/* Contact band */
.site-footer__contact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(36px, 4vw, 56px) 0 clamp(28px, 3vw, 40px);
  border-bottom: 1px solid rgba(255, 245, 230, 0.14);
}
@media (max-width: 860px) {
  .site-footer__contact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .site-footer__contact { grid-template-columns: 1fr; }
}
.site-footer__contact-item {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 245, 230, 0.82);
}
.site-footer__contact-item a {
  color: #F4DDB6;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  transition: color .15s ease;
}
.site-footer__contact-item a:hover { color: #fff; }
.site-footer__contact-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 245, 230, 0.55);
  margin-bottom: 8px;
}

/* Legal */
.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  flex-wrap: wrap;
}
.site-footer__copy {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(255, 245, 230, 0.50);
  margin: 0;
}
.site-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}
.site-footer__legal-links a {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(255, 245, 230, 0.50);
  transition: color .15s ease;
}
.site-footer__legal-links a:hover { color: #F4DDB6; }