/**
 * acf-hero — homepage marketing hero (scoped to --home modifier).
 * Ported from Html-css-components/hero/hero.css + stat-card.css.
 */

.acf-hero--home {
  position: relative;
  padding-block: var(--block-pad-hero-top) var(--block-pad-hero-bottom);
  padding-inline: var(--block-pad-inline);
  color: var(--color-light);
  overflow: hidden;
}

/* Background layer — checkerboard placeholder or photo <img> + gradient */
.acf-hero--home .acf-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-brand-forest);
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.acf-hero--home .acf-hero__media.has-photo {
  background-image: none;
  background-color: var(--color-brand-forest);
}

/* Green gradient overlay — above photo, below hero content */
.acf-hero--home .acf-hero__media.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--color-brand-forest) 0%, rgb(3 64 15 / 0) 100%);
  pointer-events: none;
}

/* Photo layer — responsive srcset img (service-single pattern) */
.acf-hero--home .acf-hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.acf-hero--home .acf-hero__media .acf-hero__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Green gradient overlay — placeholder heroes only */
.acf-hero--home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--color-brand-forest) 0%,
    rgb(3 64 15 / 0.8) 40%,
    rgb(3 64 15 / 0) 100%
  );
  pointer-events: none;
}

.acf-hero--home:has(.acf-hero__media.has-photo)::after {
  display: none;
}

.acf-hero--home .acf-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xl);
  min-block-size: 375px;
  padding-inline: 0;
}

.acf-hero--home .acf-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--block-content-gap);
  inline-size: 100%;
}

/* Kicker chip — gradient outline, transparent fill (all variants when style = chip). */
.acf-hero__kicker--chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-inline-size: 100%;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-chip);
  background: transparent;
}

.acf-hero__kicker--chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--color-brand-green) 0%, rgb(48 180 84 / 0) 100%);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.acf-hero__kicker--chip .acf-hero__kicker-text {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-sm);
}

/* Kicker plain — no chip border (local hero default in design). */
.acf-hero__kicker--plain {
  display: block;
  align-self: flex-start;
  max-inline-size: 100%;
  padding: 0;
  background: transparent;
}

.acf-hero__kicker--plain::before {
  display: none;
}

.acf-hero__kicker-text {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-light);
}

.acf-hero__kicker--plain .acf-hero__kicker-text {
  font-size: var(--font-size-base);
}

.acf-hero--service-hub .acf-hero__kicker-text {
  text-transform: uppercase;
  letter-spacing: 0.04em; /* styleguide-exception: hub kicker tracking */
}

.acf-hero--home .acf-hero__title {
  max-inline-size: min(897px, 100%);
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-hero-title);
  line-height: 1.09;
  color: var(--color-light);
}

.acf-hero--home .acf-hero__title-line {
  display: block;
}

/* Yellow accent only via [yellow: …] markup — not last-line CSS overrides. */
.acf-hero .heading-accent-yellow {
  color: var(--color-sunshine-yellow);
}

.acf-hero--home .acf-hero__text {
  max-inline-size: 572px; /* styleguide-exception: hero body */
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-light);
}

.acf-hero--home .acf-hero__text p {
  margin: 0;
}

/* Hero CTAs — Html-css-components/button (primary yellow + secondary white) */
/* Location homes use --home, not --local. Center the tel next to the 40px CTA. */
.acf-hero--home .acf-hero__actions {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--block-content-gap);
  padding-top: var(--block-content-gap);
}

/* Stat card — shared layout + typography (title block, then label body below) */
.acf-hero__stat-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-inline-size: 100%;
}

/* Title → body block only — unchanged from original stat-copy gap. */
.acf-hero__stat-value + .acf-hero__stat-bodies,
.acf-hero__stat-value + .acf-hero__stat-label {
  margin-block-start: var(--space-xs);
}

/* Body lines stack — 6px between labels only (not title → first body). */
.acf-hero__stat-bodies {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px; /* styleguide-exception: Figma stat body → body */
  max-inline-size: 100%;
}

.acf-hero__stat-value {
  display: block;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-hero-stat-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-hero-stat-title-leading);
  letter-spacing: 0;
  color: var(--color-brand-forest);
  white-space: normal;
}

.acf-hero__stat-label {
  display: block;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-hero-stat-label-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-hero-stat-label-leading);
  letter-spacing: var(--text-hero-stat-label-tracking);
  color: var(--color-brand-forest);
  white-space: normal;
}

/* Stat card — hero variant (home: short number | label) */
.acf-hero--home .acf-hero__stat-card {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: min(100%, 320px); /* styleguide-exception: hero stat card */
  max-inline-size: 320px;
  padding-block: 18px var(--space-sm);
  padding-inline: 2rem; /* styleguide-exception: matches spacing-8 (32px) in stat-card */
  background: var(--color-light);
  border-radius: var(--radius-leaf-lg);
}

.acf-hero--home .acf-hero__stat-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.acf-hero--home .acf-hero__stat-rating {
  display: flex;
  gap: 0.25rem;
  line-height: 0;
}

/* Same icon size as overall rating (ui/star.svg @ 20px). */
.acf-hero--home .acf-hero__stat-rating img {
  display: block;
  inline-size: 20px;
  block-size: auto;
}

/* Home — larger numeric title when used as short stat (e.g. 10,000+). */
.acf-hero--home .acf-hero__stat-value {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-none);
}

/* One field only — wrap inside the leaf card. */
.acf-hero--home .acf-hero__stat-copy:not(:has(.acf-hero__stat-value)),
.acf-hero--home .acf-hero__stat-copy:not(:has(.acf-hero__stat-label)) {
  display: block;
}

.acf-hero--home .acf-hero__stat-copy:not(:has(.acf-hero__stat-value)) .acf-hero__stat-label,
.acf-hero--home .acf-hero__stat-copy:not(:has(.acf-hero__stat-label)) .acf-hero__stat-value {
  display: block;
  white-space: normal;
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}


@media (min-width: 1024px) {
  .acf-hero--home .acf-hero__container {
    min-block-size: 0;
    padding-block-end: 0;
    gap: var(--block-content-gap);
  }

  .acf-hero--home .acf-hero__stat-card {
    position: static;
    align-self: flex-start;
    inset-inline-start: auto;
  }
}

@media (max-width: 1023px) {
  .acf-hero--home .acf-hero__container {
    min-block-size: 0;
    gap: var(--space-xl);
  }

  .acf-hero--home .acf-hero__stat-card {
    position: static;
    align-self: flex-start;
    inset-inline-start: auto;
  }

  .acf-hero--home .acf-hero__kicker--chip .acf-hero__kicker-text {
    white-space: normal;
  }
}

/* Homepage hero — Figma Layout / Hero / Mobile (7310:5719, 430×830). */
@media (max-width: 639px) {
  .acf-hero--home {
    display: flex;
    flex-direction: column;
    min-block-size: 830px; /* styleguide-exception: Figma mobile hero frame */
  }

  .acf-hero--home .acf-hero__container {
    flex: 1 1 auto;
    min-block-size: 100%;
    gap: 0;
  }

  .acf-hero--home .acf-hero__title {
    font-size: 3.5rem; /* 56px — Figma mobile H1 */
    line-height: 1.1;
  }

  .acf-hero--home .acf-hero__text {
    font-size: 1rem; /* 16px — Figma mobile body */
    line-height: 1.5;
  }

  .acf-hero--home .acf-hero__kicker--chip .acf-hero__kicker-text {
    font-size: 0.875rem; /* 14px — Figma mobile kicker */
    letter-spacing: 0.06em; /* styleguide-exception: Figma kicker tracking */
  }

  .acf-hero--home .acf-hero__stat-card {
    margin-block-start: auto;
    max-inline-size: 284px;
    padding-block: 12px 10px;
    padding-inline: 20px;
  }

  .acf-hero--home .acf-hero__stat-group {
    gap: 0.125rem;
  }

  .acf-hero--home .acf-hero__stat-copy {
    flex-direction: row;
    align-items: baseline;
    gap: var(--spacing-2);
  }

  .acf-hero--home .acf-hero__stat-value + .acf-hero__stat-label,
  .acf-hero--home .acf-hero__stat-value + .acf-hero__stat-bodies {
    margin-block-start: 0;
  }

  .acf-hero--home .acf-hero__stat-bodies {
    flex-direction: row;
    align-items: baseline;
  }

  .acf-hero--home .acf-hero__stat-value {
    font-size: 1.5rem; /* 24px — Figma mobile stat number */
    line-height: 1.2;
  }

  .acf-hero--home .acf-hero__stat-label {
    font-size: 1rem; /* 16px — Figma mobile stat label */
    line-height: 1.5;
  }

  /* Photo anchor — keep lawn visible on narrow viewports. */
  .acf-hero--home .acf-hero__media .acf-hero__bg-img {
    object-position: 60% center;
  }
}

/* ─── Local hero variants (Html-css-components/local-hero) ─── */
.acf-hero--local,
.acf-hero--local-home,
.acf-hero--service-hub,
.acf-hero--reviews,
.acf-hero--contact,
.acf-hero--locations {
  position: relative;
  padding-block: var(--block-pad-hero-top) var(--block-pad-hero-bottom);
  padding-inline: var(--block-pad-inline);
  color: var(--color-light);
  overflow: hidden;
}

.acf-hero--local .acf-hero__media,
.acf-hero--local-home .acf-hero__media,
.acf-hero--service-hub .acf-hero__media,
.acf-hero--reviews .acf-hero__media,
.acf-hero--contact .acf-hero__media ,
.acf-hero--locations .acf-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-brand-forest);
}

.acf-hero--local .acf-hero__media.has-photo,
.acf-hero--local-home .acf-hero__media.has-photo,
.acf-hero--service-hub .acf-hero__media.has-photo,
.acf-hero--reviews .acf-hero__media.has-photo,
.acf-hero--contact .acf-hero__media.has-photo ,
.acf-hero--locations .acf-hero__media.has-photo {
  background-color: var(--color-brand-forest);
}

.acf-hero--local .acf-hero__media.has-photo::before,
.acf-hero--local-home .acf-hero__media.has-photo::before,
.acf-hero--service-hub .acf-hero__media.has-photo::before,
.acf-hero--reviews .acf-hero__media.has-photo::before,
.acf-hero--contact .acf-hero__media.has-photo::before ,
.acf-hero--locations .acf-hero__media.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--color-brand-forest) 0%, rgb(3 64 15 / 0) 100%);
  pointer-events: none;
}

.acf-hero--local .acf-hero__media picture,
.acf-hero--local-home .acf-hero__media picture,
.acf-hero--service-hub .acf-hero__media picture,
.acf-hero--reviews .acf-hero__media picture,
.acf-hero--contact .acf-hero__media picture ,
.acf-hero--locations .acf-hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.acf-hero--local .acf-hero__media .acf-hero__bg-img,
.acf-hero--local-home .acf-hero__media .acf-hero__bg-img,
.acf-hero--service-hub .acf-hero__media .acf-hero__bg-img,
.acf-hero--reviews .acf-hero__media .acf-hero__bg-img,
.acf-hero--contact .acf-hero__media .acf-hero__bg-img ,
.acf-hero--locations .acf-hero__media .acf-hero__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Mobile / tablet — all hero backgrounds anchor center. */
@media (max-width: 1023px) {
  .acf-hero .acf-hero__media .acf-hero__bg-img {
    object-position: center center;
  }
}

.acf-hero--local .acf-hero__container,
.acf-hero--local-home .acf-hero__container,
.acf-hero--service-hub .acf-hero__container,
.acf-hero--reviews .acf-hero__container,
.acf-hero--contact .acf-hero__container ,
.acf-hero--locations .acf-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--block-content-gap);
  padding-inline: 0;
}

.acf-hero--local .acf-hero__content,
.acf-hero--local-home .acf-hero__content,
.acf-hero--service-hub .acf-hero__content,
.acf-hero--reviews .acf-hero__content,
.acf-hero--contact .acf-hero__content ,
.acf-hero--locations .acf-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--block-content-gap);
  inline-size: 100%;
}

.acf-hero--local .acf-hero__title,
.acf-hero--local-home .acf-hero__title,
.acf-hero--service-hub .acf-hero__title,
.acf-hero--reviews .acf-hero__title,
.acf-hero--contact .acf-hero__title ,
.acf-hero--locations .acf-hero__title {
  max-inline-size: min(820px, 100%); /* styleguide-exception: local hero title */
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-hero-title);
  line-height: 1.09;
  color: var(--color-light);
}

.acf-hero--local .acf-hero__title-line,
.acf-hero--local-home .acf-hero__title-line,
.acf-hero--service-hub .acf-hero__title-line,
.acf-hero--reviews .acf-hero__title-line,
.acf-hero--contact .acf-hero__title-line ,
.acf-hero--locations .acf-hero__title-line {
  display: block;
}

.acf-hero--local .acf-hero__text,
.acf-hero--local-home .acf-hero__text,
.acf-hero--service-hub .acf-hero__text,
.acf-hero--reviews .acf-hero__text,
.acf-hero--contact .acf-hero__text ,
.acf-hero--locations .acf-hero__text {
  max-inline-size: min(720px, 100%); /* styleguide-exception: local hero body */
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-light);
}

.acf-hero--local .acf-hero__text p,
.acf-hero--local-home .acf-hero__text p,
.acf-hero--service-hub .acf-hero__text p,
.acf-hero--reviews .acf-hero__text p,
.acf-hero--contact .acf-hero__text p ,
.acf-hero--locations .acf-hero__text p {
  margin: 0;
}

.acf-hero--local .acf-hero__actions,
.acf-hero--local-home .acf-hero__actions,
.acf-hero--service-hub .acf-hero__actions,
.acf-hero--reviews .acf-hero__actions,
.acf-hero--contact .acf-hero__actions ,
.acf-hero--locations .acf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
  margin-block-start: var(--spacing-2);
}

.acf-hero--local .acf-hero__button:not(.acf-hero__phone-link),
.acf-hero--local-home .acf-hero__button:not(.acf-hero__phone-link),
.acf-hero--service-hub .acf-hero__button:not(.acf-hero__phone-link),
.acf-hero--reviews .acf-hero__button:not(.acf-hero__phone-link),
.acf-hero--contact .acf-hero__button:not(.acf-hero__phone-link),
.acf-hero--locations .acf-hero__button:not(.acf-hero__phone-link) {
  min-block-size: 56px; /* styleguide-exception: tall CTA */
  padding-inline: var(--spacing-6);
  font-size: 15px; /* styleguide-exception: CTA label */
  font-weight: 700;
  letter-spacing: 0.4px; /* styleguide-exception: tracking */
  /* No text-transform — button labels use editor casing as entered in ACF. */
}

.acf-hero--local .acf-hero__call .icon,
.acf-hero--local-home .acf-hero__call .icon,
.acf-hero--service-hub .acf-hero__call .icon,
.acf-hero--reviews .acf-hero__call .icon,
.acf-hero--contact .acf-hero__call .icon ,
.acf-hero--locations .acf-hero__call .icon {
  inline-size: var(--spacing-3);
  block-size: var(--spacing-3);
  color: var(--color-brand-green);
}

/* Breadcrumbs */
.acf-hero__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin-block-end: var(--spacing-6);
  font-family: var(--font-family-base);
  font-size: var(--text-announcement-size);
  font-weight: 500;
  line-height: var(--text-announcement-leading);
  color: var(--color-light);
}

.acf-hero__crumb {
  color: var(--color-light);
  text-decoration: none;
  opacity: 0.85;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

/* Beat global a:hover (legacy blue --color-primary). Brand yellow on crumb links. */
a.acf-hero__crumb:is(:hover, :focus-visible) {
  color: var(--color-brand-yellow);
  opacity: 1;
  text-decoration: underline;
}

.acf-hero__crumb-sep {
  opacity: 0.6;
}

@media (min-width: 769px) {
  .acf-hero__breadcrumbs {
    font-size: var(--text-breadcrumb-size);
    line-height: var(--text-breadcrumb-leading);
  }
}

.acf-hero__crumb--current {
  opacity: 1;
  font-weight: 600;
}

.acf-hero--service-hub .acf-hero__crumb--current {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* CTA button — white with arrow (matches site-header .button--cta). */
.acf-hero .button--cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  background-color: var(--color-light);
  color: var(--color-brand-forest);
  text-decoration: none;
}

.acf-hero .button--cta:is(:hover, :focus-visible) {
  background-color: var(--color-off-white);
}

/* Phone link — plain white tel text on hero photo (no pill background). */
.acf-hero .acf-hero__phone-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0;
  color: var(--color-light);
  text-decoration: none;
  min-block-size: auto;
  inline-size: auto;
  cursor: pointer;
}

/* Home + local: tel shares the CTA row height so it sits on the vertical center. */
.acf-hero--home .acf-hero__phone-link {
  align-self: center;
  min-block-size: 40px; /* styleguide-exception: match bpa-button--md on --home */
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.acf-hero--local .acf-hero__phone-link,
.acf-hero--local-home .acf-hero__phone-link,
.acf-hero--service-hub .acf-hero__phone-link,
.acf-hero--reviews .acf-hero__phone-link,
.acf-hero--contact .acf-hero__phone-link,
.acf-hero--locations .acf-hero__phone-link {
  align-self: center;
  min-block-size: 56px; /* styleguide-exception: match tall local CTA */
}

.acf-hero .acf-hero__phone-link:is(:hover, :focus-visible) {
  color: var(--color-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Stat card — service-hub / reviews / contact shell (white). */
.acf-hero--service-hub .acf-hero__stat-card:not(.acf-hero__stat-card--local-contact),
.acf-hero--reviews .acf-hero__stat-card:not(.acf-hero__stat-card--local-contact),
.acf-hero--contact .acf-hero__stat-card:not(.acf-hero__stat-card--local-contact),
.acf-hero--locations .acf-hero__stat-card:not(.acf-hero__stat-card--local-contact),
.acf-hero__stat-card--reviews,
.acf-hero__stat-card--contact {
  padding-block: 18px var(--space-sm);
  padding-inline: 2rem;
  background: var(--color-light);
  border-radius: var(--radius-leaf-lg);
}

/* Local contact emergency card — brand forest + yellow phone (separate from white --contact). */
.acf-hero--contact .acf-hero__stat-card.acf-hero__stat-card--local-contact,
.acf-hero--locations .acf-hero__stat-card.acf-hero__stat-card--local-contact,
.acf-hero--service-hub .acf-hero__stat-card.acf-hero__stat-card--local-contact,
.acf-hero--reviews .acf-hero__stat-card.acf-hero__stat-card--local-contact,
.acf-hero__stat-card--local-contact {
  inline-size: min(100%, 343px);
  max-inline-size: 343px; /* styleguide-exception: local contact emergency card */
  padding: var(--spacing-5);
  background-color: var(--color-brand-forest);
  border: 1px solid color-mix(in srgb, var(--color-sunshine-yellow) 40%, transparent);
  border-radius: var(--radius-leaf-lg);
  box-sizing: border-box;
}

.acf-hero__stat-card--local-contact .acf-hero__stat-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.acf-hero__stat-card--local-contact .acf-hero__stat-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-inline-size: 100%;
}

/* Figma — 16px between title row and first body line only. */
.acf-hero__stat-card--local-contact .acf-hero__stat-head + .acf-hero__stat-label {
  margin-block-start: var(--spacing-4);
}

.acf-hero__stat-card--local-contact .acf-hero__stat-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.acf-hero__stat-card--local-contact .acf-hero__stat-icon {
  display: block;
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
}

.acf-hero--contact .acf-hero__stat-card--local-contact .acf-hero__stat-value,
.acf-hero--locations .acf-hero__stat-card--local-contact .acf-hero__stat-value,
.acf-hero__stat-card--local-contact .acf-hero__stat-value {
  inline-size: auto;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-sunshine-yellow);
}

.acf-hero--contact .acf-hero__stat-card--local-contact .acf-hero__stat-label,
.acf-hero--locations .acf-hero__stat-card--local-contact .acf-hero__stat-label,
.acf-hero__stat-card--local-contact .acf-hero__stat-label {
  inline-size: 100%;
  font-weight: var(--font-weight-normal);
  color: var(--color-light);
}

.entry-content .acf-hero__stat-card--local-contact,
.wp-block-post-content .acf-hero__stat-card--local-contact {
  border-radius: var(--radius-leaf-lg);
}

/*
 * Reviews-style card (service-hub + reviews) — same leaf as Figma financing hero.
 */
.acf-hero--service-hub .acf-hero__stat-card,
.acf-hero--reviews .acf-hero__stat-card,
.acf-hero__stat-card--reviews {
  inline-size: min(100%, 320px);
  max-inline-size: 320px; /* styleguide-exception: trust stat card (Figma) */
}

.acf-hero--service-hub .acf-hero__stat-group,
.acf-hero--reviews .acf-hero__stat-group,
.acf-hero__stat-card--reviews .acf-hero__stat-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.acf-hero--service-hub .acf-hero__stat-rating,
.acf-hero--reviews .acf-hero__stat-rating,
.acf-hero__stat-card--reviews .acf-hero__stat-rating {
  display: flex;
  gap: 0.25rem;
  line-height: 0;
}

.acf-hero--service-hub .acf-hero__stat-rating img,
.acf-hero--reviews .acf-hero__stat-rating img,
.acf-hero__stat-card--reviews .acf-hero__stat-rating img {
  display: block;
  inline-size: 20px;
  block-size: auto;
}

/* Contact emergency card — title + body stack (local-contact-hero). */
.acf-hero--contact .acf-hero__stat-card,
.acf-hero--locations .acf-hero__stat-card,
.acf-hero__stat-card--contact {
  inline-size: min(100%, 343px);
  max-inline-size: 343px; /* styleguide-exception: contact emergency card */
  padding-block: 18px;
  padding-inline: 18px;
}

.acf-hero--contact .acf-hero__stat-group,
.acf-hero--locations .acf-hero__stat-group,
.acf-hero__stat-card--contact .acf-hero__stat-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.acf-hero--contact .acf-hero__stat-copy,
.acf-hero--locations .acf-hero__stat-copy,
.acf-hero__stat-card--contact .acf-hero__stat-copy {
  max-inline-size: 100%;
}

.acf-hero--contact .acf-hero__stat-value,
.acf-hero--locations .acf-hero__stat-value,
.acf-hero__stat-card--contact .acf-hero__stat-value {
  inline-size: 100%;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); /* styleguide-exception: ~21px card title */
  line-height: 1.2;
}

.acf-hero--contact .acf-hero__stat-label,
.acf-hero--locations .acf-hero__stat-label,
.acf-hero__stat-card--contact .acf-hero__stat-label {
  inline-size: 100%;
}

/* Contact: full message in label only — keep leaf width, bold wrap like title. */
.acf-hero--contact .acf-hero__stat-copy:not(:has(.acf-hero__stat-value)) .acf-hero__stat-label ,
.acf-hero--locations .acf-hero__stat-copy:not(:has(.acf-hero__stat-value)) .acf-hero__stat-label {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
}


@media (max-width: 1023px) {
  .acf-hero--service-hub .acf-hero__stat-card--reviews,
  .acf-hero--reviews .acf-hero__stat-card {
    max-inline-size: min(320px, 100%);
  }

  .acf-hero--service-hub .acf-hero__stat-card--contact,
  .acf-hero--contact .acf-hero__stat-card,
  .acf-hero--locations .acf-hero__stat-card,
  .acf-hero__stat-card--local-contact {
    max-inline-size: min(343px, 100%);
  }
}

@media (max-width: 639px) {
  .acf-hero--service-hub {
    block-size: auto;
    min-block-size: 747px; /* styleguide-exception: mobile hub hero frame */
  }

  /* Keep the CTA and the phone on one row, packed to the left edge of the copy. */
  .acf-hero--local .acf-hero__actions,
  .acf-hero--local-home .acf-hero__actions,
  .acf-hero--service-hub .acf-hero__actions,
  .acf-hero--reviews .acf-hero__actions,
  .acf-hero--contact .acf-hero__actions,
  .acf-hero--locations .acf-hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
  }

  .acf-hero--local .acf-hero__call.button,
  .acf-hero--local-home .acf-hero__call.button,
  .acf-hero--service-hub .acf-hero__call.button,
  .acf-hero--reviews .acf-hero__call.button,
  .acf-hero--contact .acf-hero__call.button,
  .acf-hero--locations .acf-hero__call.button,
  .acf-hero--local .acf-hero__button:not(.acf-hero__phone-link),
  .acf-hero--local-home .acf-hero__button:not(.acf-hero__phone-link),
  .acf-hero--service-hub .acf-hero__button:not(.acf-hero__phone-link),
  .acf-hero--reviews .acf-hero__button:not(.acf-hero__phone-link),
  .acf-hero--contact .acf-hero__button:not(.acf-hero__phone-link),
  .acf-hero--locations .acf-hero__button:not(.acf-hero__phone-link) {
    inline-size: auto;
    justify-content: center;
  }

  .acf-hero .acf-hero__phone-link {
    justify-content: flex-start;
    inline-size: auto;
    text-align: start;
  }

  /* After variant base padding — mobile inset below fixed location banner. */
  .acf-hero--local,
  .acf-hero--local-home,
  .acf-hero--service-hub,
  .acf-hero--reviews,
  .acf-hero--contact,
.acf-hero--locations {
    padding-block: var(--spacing-10) var(--block-pad-hero-bottom);
  }

  /* Any hero when location banner is present (local-homepage often uses --home variant). */
  body:has(.acf-local-location-banner) .acf-hero {
    padding-block-start: calc(var(--spacing-10) + var(--space-md));
    padding-block-end: var(--block-pad-hero-bottom);
  }
}

/* iPhone / small Android — extra clearance under 2-row location banner. */
@media (min-width: 390px) and (max-width: 440px) {
  body:has(.acf-local-location-banner) .acf-hero {
    padding-block-start: calc(var(--spacing-10) + var(--space-lg));
  }
}

@media (min-width: 1024px) {
  .acf-hero--local .acf-hero__content,
  .acf-hero--local-home .acf-hero__content {
    max-inline-size: 720px; /* styleguide-exception: local hero content */
  }

  .acf-hero--reviews .acf-hero__media .acf-hero__bg-img {
    object-position: 70% 24%;
  }

  .acf-hero--contact .acf-hero__media .acf-hero__bg-img ,
.acf-hero--locations .acf-hero__media .acf-hero__bg-img {
    object-position: 72% 22%;
  }

  .acf-hero--contact .acf-hero__title-line ,
.acf-hero--locations .acf-hero__title-line {
    white-space: normal;
  }

  .acf-hero--service-hub .acf-hero__container,
  .acf-hero--reviews .acf-hero__container,
  .acf-hero--contact .acf-hero__container ,
.acf-hero--locations .acf-hero__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: var(--spacing-8);
    align-items: stretch;
    min-block-size: 420px; /* styleguide-exception: hub hero frame */
  }

  .acf-hero--service-hub .acf-hero__breadcrumbs,
  .acf-hero--reviews .acf-hero__breadcrumbs,
  .acf-hero--contact .acf-hero__breadcrumbs ,
.acf-hero--locations .acf-hero__breadcrumbs {
    grid-column: 1 / -1;
    margin-block-end: 0;
  }

  .acf-hero--service-hub .acf-hero__content,
  .acf-hero--reviews .acf-hero__content,
  .acf-hero--contact .acf-hero__content ,
.acf-hero--locations .acf-hero__content {
    grid-column: 1;
    align-self: start;
    max-inline-size: min(640px, 100%);
  }

  .acf-hero--service-hub .acf-hero__stat-card,
  .acf-hero--reviews .acf-hero__stat-card,
  .acf-hero--contact .acf-hero__stat-card ,
.acf-hero--locations .acf-hero__stat-card {
    position: static;
    grid-column: 2;
    align-self: end;
    justify-self: end;
  }

  /* Without kicker, do not reserve vertical space at the top of the content column. */
  .acf-hero--service-hub.acf-hero--no-kicker .acf-hero__container,
  .acf-hero--reviews.acf-hero--no-kicker .acf-hero__container,
  .acf-hero--contact.acf-hero--no-kicker .acf-hero__container,
  .acf-hero--locations.acf-hero--no-kicker .acf-hero__container {
    min-block-size: 0;
  }
}

@media (min-width: 1440px) {
  .acf-hero--reviews .acf-hero__media .acf-hero__bg-img {
    object-position: 72% 12%;
  }

  .acf-hero--contact .acf-hero__media .acf-hero__bg-img {
    object-position: 74% 18%;
  }
}

.acf-hero--locations {
  min-block-size: 32.8125rem; /* Figma 7230:5054 — 525px */
}

/* Beat .entry-content h1 — locations title stays white serif 64px. */
.acf-hero--locations .acf-hero__title,
.acf-hero--locations h1.acf-hero__title,
.entry-content .acf-hero--locations h1.acf-hero__title,
.wp-block-post-content .acf-hero--locations h1.acf-hero__title {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-hero-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.09;
  color: var(--color-light);
}

.acf-hero--locations .acf-hero__title .heading-accent-yellow {
  color: var(--color-light);
}

/* Locations finder — ZIP row (Figma 7230:5062–5067). */
.acf-hero--locations .acf-hero__text--locations,
.acf-hero--locations .acf-hero__text--locations p {
  font-weight: var(--font-weight-medium);
}

.acf-hero__zip-form {
  inline-size: 100%;
  max-inline-size: 34.1875rem; /* Figma ~547px row */
}

.acf-hero__zip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--spacing-2);
}

.acf-hero__zip-input {
  flex: 1 1 9rem;
  min-inline-size: 0;
  block-size: 2.5625rem; /* Figma 41px */
  margin: 0;
  padding: 0.5rem var(--spacing-4);
  border: 1px solid var(--color-deep-teal);
  border-radius: var(--radius-button);
  background-color: var(--color-light);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem;
  color: var(--color-brand-forest);
}

.acf-hero__zip-input::placeholder {
  color: var(--color-brand-forest);
  opacity: 1;
}

.acf-hero__zip-input:focus-visible {
  outline: 2px solid var(--color-franchise-green-bright);
  outline-offset: 1px;
}

.acf-hero__zip-submit.button {
  flex: 0 0 auto;
  min-block-size: 2.5625rem;
  padding-block: var(--button-pad-block);
  padding-inline: var(--button-pad-inline);
}

@media (max-width: 639px) {
  .acf-hero__zip-row {
    flex-direction: column;
    align-items: stretch;
  }

  .acf-hero__zip-input {
    flex: 0 0 auto;
    inline-size: 100%;
    block-size: 2.5625rem;
    min-block-size: 2.5625rem;
    max-block-size: 2.5625rem;
  }

  .acf-hero__zip-submit.button {
    inline-size: 100%;
    justify-content: center;
  }
}

/* Editor focal-point overrides. Beat variant crops (70% 24%, 72% 22%, etc.). */
.acf-hero--img-x-left {
  --hero-img-pos-x: left;
}

.acf-hero--img-x-center {
  --hero-img-pos-x: center;
}

.acf-hero--img-x-right {
  --hero-img-pos-x: right;
}

.acf-hero--img-y-top {
  --hero-img-pos-y: top;
}

.acf-hero--img-y-center {
  --hero-img-pos-y: center;
}

.acf-hero--img-y-bottom {
  --hero-img-pos-y: bottom;
}

.acf-hero.acf-hero--img-pos .acf-hero__media .acf-hero__bg-img,
.acf-hero.acf-hero--img-x-left .acf-hero__media .acf-hero__bg-img,
.acf-hero.acf-hero--img-x-center .acf-hero__media .acf-hero__bg-img,
.acf-hero.acf-hero--img-x-right .acf-hero__media .acf-hero__bg-img,
.acf-hero.acf-hero--img-y-top .acf-hero__media .acf-hero__bg-img,
.acf-hero.acf-hero--img-y-center .acf-hero__media .acf-hero__bg-img,
.acf-hero.acf-hero--img-y-bottom .acf-hero__media .acf-hero__bg-img {
  object-position: var(--hero-img-pos-x, center) var(--hero-img-pos-y, center);
}