/* ==========================================================================
   AHS — homepage variants
   --------------------------------------------------------------------------
   Loaded only on the front page. These are the field-driven variants the
   homepage introduces on shared components; every other page type would carry
   them as dead weight, and the CSS budget is measured per page.
   ========================================================================== */

/* C01 — photo behind the text (homepage hero) */
.hero--full .hero__card { position: relative; overflow: hidden; }
.hero--full .hero__backdrop { position: absolute; inset: 0; z-index: 0; border-radius: 24px; overflow: hidden; }
.hero--full .hero__backdrop img { width: 100%; height: 100%; object-fit: cover; }
.hero--full .hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(20, 61, 61, .4), var(--c-forest));
}
/* Not positioned: the rating card must resolve its offsets against the panel,
   not against this grid, which is already inset by the panel's own padding.
   z-index still applies because this is a flex item of .hero__card. */
.hero--full .hero__grid {
  z-index: 1;
  grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
}
.hero--full .hero__image { display: none; }
/* The frame hangs the rating card past the panel's bottom-right corner. The
   panel therefore cannot clip — the photograph is clipped by .hero__backdrop
   instead, which has its own radius and overflow. */
.hero--full .hero__card { overflow: visible; }
.hero--full .hero__media { position: static; }
.hero--full .hero__card-float {
  position: absolute;
  /* top must be released: the split layout sets top: 65% for the service
     heroes, and an absolutely positioned box with both top and bottom set has
     its height forced — which clipped this card to 185px. */
  top: auto;
  right: 56px;
  bottom: 56px;
  z-index: 2;
  width: clamp(288px, 20vw, 340px);
}
.hero--full .hero__cta--primary { background: var(--c-white); color: var(--c-ink-deep); }
.hero--full .hero__cta--primary .hero__cta-badge { background: rgba(243, 129, 0, .17); color: var(--c-orange); }
.hero--full .hero__cta--secondary,
.hero--full .hero__cta--phone {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .15);
  color: var(--c-white);
}

/* C06 — grouped links, and the dark ground the homepage uses */
.linkgrid--dark { background: var(--c-forest); color: var(--c-white); }
.linkgrid--dark .linkgrid__heading { color: var(--c-white); }
.linkgrid--dark .linkgrid__body { color: rgba(255, 255, 255, .6); }
.linkgrid--dark .linkgrid__eyebrow { color: #bababa; }
.linkgrid--dark .linkgrid__grid :is(a, .linkgrid__plain) {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: var(--c-white);
}
.linkgrid--dark .linkgrid__grid a:hover { border-color: var(--c-orange); color: var(--c-orange); }
.linkgrid--dark .linkgrid__grid svg { color: var(--c-orange); }

.linkgrid__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s-8); }
.linkgrid__group-heading {
  margin: 0 0 16px;
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-orange);
}

/* C07 — light ground, image side, button styles */
.why--light { background: var(--c-mist); color: var(--c-ink-deep); }
.why--light .why__heading { color: var(--c-ink-deep); }
.why--light .why__body { color: var(--c-muted); }
.why--light .why__eyebrow { color: var(--c-muted); }
.why--light .why__points li { color: var(--c-ink-soft); }
.why__body + .why__body { margin-top: 14px; }
.why__cta--orange { background: var(--c-orange); color: var(--c-white); }
.why__cta--orange .why__cta-badge { background: rgba(255, 255, 255, .2); }
.why__cta--dark { background: var(--c-forest); color: var(--c-white); }
.why__cta--dark .why__cta-badge { background: rgba(255, 255, 255, .15); }

/* C08 — time ago */

/* C10 — grouped questions, phone link */
/* Sampled from the frame: a 50px #a0d6c8 rule, a 12px gap, then the label in
   uppercase forest. It reads as a divider with a caption, not a bullet. */
.faq__group-heading {
  display: flex; align-items: center; gap: 12px;
  margin: 36px 0 0;
  font-family: var(--f-body);
  font-size: .6875rem; font-weight: var(--w-semi);
  letter-spacing: .11em; text-transform: uppercase; color: var(--c-forest);
}
.faq__list > .faq__group-heading:first-child { margin-top: 0; }
.faq__dot { flex: none; width: 50px; height: 1px; border-radius: 0; background: #a0d6c8; }
/* The frame gives 56px from a group label down to its first question. */
.faq__group-heading + .faq__item > .faq__q { padding-top: 36px; }
.faq__phone { margin: 20px 0 0; }
.faq__phone a { font-size: var(--t-base); font-weight: var(--w-semi); color: var(--c-ink-deep); text-decoration: none; }
.faq__phone a:hover { color: var(--c-orange); }

/* C14 — green panel */
.dualpath__panel--green {
  background: linear-gradient(203deg, rgba(144, 209, 192, .82) 69%, rgb(29, 103, 96) 76%),
              linear-gradient(90deg, rgba(2, 47, 49, .9), rgba(2, 47, 49, .9)), var(--c-white);
  color: var(--c-white);
}
.dualpath__panel--green .dualpath__panel-body { color: rgba(255, 255, 255, .7); }

/* C15 — numbered stat cards, quote band */
.statsbar__stat { position: relative; padding: 28px; border-radius: 16px; background: var(--c-white); }
.statsbar--white .statsbar__stat { background: var(--c-mist); }
.statsbar__num {
  position: absolute; top: 24px; right: 24px;
  font-size: var(--t-xs); font-weight: var(--w-bold);
  color: var(--c-orange); font-variant-numeric: tabular-nums;
}
.statsbar__quote {
  /* Quote and attribution stack on the left; the button sits opposite them,
     as in the frame. A plain flex row would put all three side by side. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  color: var(--c-white);
  background: linear-gradient(203deg, rgba(144, 209, 192, .82) 69%, rgb(29, 103, 96) 76%),
              linear-gradient(90deg, rgba(2, 47, 49, .9), rgba(2, 47, 49, .9)), var(--c-white);
}
.statsbar__quote-text { min-width: 0; }
.statsbar__quote blockquote { max-width: 62ch; font-size: 1.25rem; margin: 0; }
.statsbar__quote figcaption { margin-top: 10px; color: rgba(255, 255, 255, .65); }
.statsbar__quote-name, .statsbar__quote-role { color: inherit; }
.statsbar__quote-cta {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 13px 22px; border-radius: 999px; background: var(--c-white); color: var(--c-forest);
  font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none;
}
.statsbar__quote-badge { background: rgba(243, 129, 0, .17); color: var(--c-orange); }

/* --------------------------------------------------------------------------
   29. C19 — Service List
   -------------------------------------------------------------------------- */

.svclist { padding: 80px var(--gutter); background: var(--c-mist); }
.svclist__inner {
  display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 880fr); gap: 64px;
  align-items: start; width: 100%; max-width: var(--wrap); margin-inline: auto;
}
.svclist__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--t-label); color: var(--c-muted); }
.svclist__body { margin: 20px 0 0; font-size: var(--t-base); line-height: 1.625; color: var(--c-muted); }

.svclist__main { position: relative; }
.svclist__link {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px; background: var(--c-forest); color: var(--c-white);
  font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none;
}
.svclist__group + .svclist__group { margin-top: 40px; }
.svclist__group-heading {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-family: var(--f-head); font-size: 1.4rem; font-weight: var(--w-semi); color: var(--c-ink-deep);
}
.svclist__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--c-orange); }

.svclist__rows { margin: 0; padding: 0; list-style: none; }
.svclist__row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--c-rule);
}
/* First row of each group: no top rule, so no separator sits directly under the
   group heading — lines fall between rows only. */
.svclist__rows .svclist__row:first-child { border-top: 0; }
.svclist__num { font-size: var(--t-label); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.svclist__thumb { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-white); }
.svclist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.svclist__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svclist__title { font-family: var(--f-head); font-size: 1.125rem; font-weight: var(--w-semi); color: var(--c-ink-deep); }
.svclist__desc { font-size: var(--t-label); line-height: 1.5; color: var(--c-muted); }
.svclist__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--c-white); color: var(--c-ink-deep);
  box-shadow: 0 2px 6px rgba(20, 61, 61, .1);
}
.svclist__go:hover { background: var(--c-orange); color: var(--c-white); }

@media (max-width: 899px) {
  .svclist__inner { grid-template-columns: 1fr; gap: 32px; }
  .svclist__link { position: static; margin-bottom: 24px; }
  .hero--full .hero__grid { grid-template-columns: 1fr; }
  /* Released from the corner once the hero stacks; an absolutely
     positioned 288px card cannot fit beside a 320px viewport. */
  .hero--full .hero__card-float {
    position: static; width: 100%; margin-left: 0;
    right: auto; bottom: auto;
  }
}
@media (max-width: 599px) {
  .svclist__row { grid-template-columns: minmax(0, 1fr) 36px; gap: 12px; }
  .svclist__thumb { display: none; }

  /* These override main.css's mobile rule purely by load order, so the reset
     belongs here: the auto-width button otherwise squeezes the quote to 53px. */
  .statsbar__quote { flex-direction: column; align-items: flex-start; }

}