/* the client — Service page styles
 * Shared by all /service-*.html pages.
 * Layered on top of colors_and_type.css and site.css.
 */

/* ── Hero (split layout: copy left, photo right) ────────────────── */
.hero {
  position: relative;
  padding: 6rem 0 5rem;
  background: var(--color-surface-app);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient-hero-accent), var(--gradient-hero-accent-2);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4.5rem;
  align-items: center;
  position: relative;
}
.hero-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}
.hero-breadcrumb a { color: var(--color-text-secondary); transition: color 0.2s ease; }
.hero-breadcrumb a:hover { color: var(--color-brand-primary-700); }
.hero-breadcrumb .sep { width: 12px; height: 12px; opacity: 0.4; }
.hero-breadcrumb .current { color: var(--color-brand-primary-700); }

.hero-copy .eyebrow-pill { margin-bottom: 1.75rem; }
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero .t-lead {
  margin-bottom: 2.25rem;
  max-width: 56ch;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 2.75rem;
}
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border-subtle);
}
.hero-trust-item {
  display: flex; align-items: center; gap: 0.75rem;
}
.hero-trust-item .num {
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text-primary);
}
.hero-trust-item .lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}

.hero-media { position: relative; }
.hero-media .photo {
  border-radius: var(--radius-hero);
  overflow: hidden;
  box-shadow: var(--shadow-image-large);
  aspect-ratio: 4 / 5;
  position: relative;
}
.hero-media .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter 0.6s var(--ease-out);
}
.hero-media:hover .photo img { filter: grayscale(0%); }

.hero-overlay {
  position: absolute;
  z-index: 2;
  left: -2rem;
  bottom: 2rem;
  background: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-glass);
  max-width: 320px;
}
.hero-overlay .stars { margin-bottom: 0.6rem; color: var(--color-accent-gold); }
.hero-overlay .stars svg { width: 14px; height: 14px; fill: currentColor; }
.hero-overlay .quote {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.hero-overlay .meta {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.hero-cert-strip {
  position: absolute;
  z-index: 2;
  right: -2rem;
  top: 2rem;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: 0.7rem;
}
.hero-cert-strip .check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-surface-subtle-2);
  color: var(--color-brand-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-cert-strip .check svg { width: 16px; height: 16px; }
.hero-cert-strip strong { font-size: 0.8125rem; color: var(--color-text-primary); display: block; }
.hero-cert-strip span { font-size: 0.6875rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-cert-strip, .hero-overlay { display: none; }
}

/* `.svc-section`, `.svc-alt`, and the `.vapure*` family have moved to
   site.css so the homepage and service pages share one definition. */

/* ── Process stages (alternating photo/copy rows) ───────────── */
.stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
  padding: 5rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.stage:last-child { border-bottom: 0; }
.stage.reverse { direction: rtl; }
.stage.reverse > * { direction: ltr; }
.stage-photo {
  position: relative;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-image);
}
.stage-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter 0.6s var(--ease-out), transform 1s ease;
}
.stage:hover .stage-photo img { filter: grayscale(0%); transform: scale(1.03); }
.stage-photo .stage-tag {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-brand-primary-700);
  box-shadow: var(--shadow-subtle);
}
.stage-photo .stage-tag svg { width: 12px; height: 12px; color: var(--color-brand-secondary); }
.stage-copy .stage-num {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 800;
  color: var(--color-brand-secondary);
  margin-bottom: 1.5rem;
}
.stage-copy .stage-num strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  /* Client-approved number-badge composition (see theme.css). */
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-ring) border-box;
  color: var(--color-brand-primary-700);
  box-shadow: var(--shadow-badge);
  margin-right: 0.85rem;
  line-height: 0.9;
}
.stage-copy h3 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  margin-bottom: 1.25rem;
  text-wrap: balance;
  letter-spacing: -0.035em;
}
.stage-copy p {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 54ch;
}
.stage-copy .stage-bullets {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 0.65rem;
}
/* A trailing paragraph after a bullet list needs its own separation:
   .stage-bullets has no bottom margin and .stage-copy p has no top margin,
   so the two would otherwise collide. */
.stage-copy .stage-bullets + p {
  margin-top: 1.25rem;
}
.stage-copy .stage-bullets li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.9375rem;
  color: var(--color-text-body);
}
.stage-copy .stage-bullets svg {
  width: 18px; height: 18px;
  color: var(--color-brand-secondary);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* ── Closing CTA band ────────────────────────────────────────── */
.svc-closing {
  background-image: var(--gradient-brand-dark);
  padding: 7rem 0;
  position: relative; overflow: hidden;
  color: #fff;
}
.svc-closing::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
}
.svc-closing-inner {
  position: relative;
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
}
.svc-closing-inner .eyebrow-pill { margin-bottom: 1.5rem; }
.svc-closing-inner h2 {
  color: #fff;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
.svc-closing-inner p {
  color: rgba(255,255,255,0.78);
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}
.svc-closing-buttons {
  display: inline-flex; gap: 0.75rem; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.svc-closing-phone {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
}
.svc-closing-phone strong {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* ── Page-specific animation tweaks ──────────────────────────── */
/* Process stage rows use a gentler offset and a slow scale settle on
   the photo so it feels like the image is arriving, not jumping. */
.stage.fade-up { transform: translateY(28px); transition-duration: 0.9s; }
.stage.fade-up .stage-photo img { transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.stage.fade-up.in .stage-photo img { transform: scale(1); }

/* Vapure bullets slide in horizontally — paired with `.stagger` on
   the parent for a cascading reveal. */
.vapure-features li.fade-up {
  transform: translateX(-10px);
  transition-duration: 0.6s;
}
.vapure-features li.fade-up.in { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .stage.fade-up,
  .vapure-features li.fade-up {
    transform: none !important;
    transition: opacity 0.3s ease !important;
  }
  .stage.fade-up .stage-photo img { transform: none !important; transition: none !important; }
}

/* ── Responsive ──────────────────────────────────────────────── */
/* `.vapure` responsive collapse lives in site.css alongside the base. */
@media (max-width: 1100px) {
  .stage { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 0; }
  .stage.reverse { direction: ltr; }
}

/* ── Our-guides index strip ──────────────────────────────────────
   Flat, hairline-separated rows of internal guide links on
   /resources. Rewritten Sep 2026: it used to be a two-up card grid,
   which made it the third card set on a page whose sections already
   looked interchangeable. As a flat index it reads as a directory —
   nothing else on the page uses this treatment. */
.resource-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 900px;
  border-top: 1px solid var(--color-border-subtle);
}
.resource-list li { border-bottom: 1px solid var(--color-border-subtle); }
.resource-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.resource-list a:hover { background: #fff; color: var(--color-text-body); }
.resource-list a > span { flex: 1 1 auto; min-width: 0; }
.resource-list .guide-icon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--color-brand-secondary);
}
.resource-list .guide-arrow {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--color-brand-primary-700);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.resource-list a:hover .guide-arrow { opacity: 1; transform: translateX(0); }
.resource-list strong { color: var(--color-text-primary); font-weight: 700; }
@media (max-width: 640px) {
  .resource-list a { padding: 1.15rem 0.35rem; gap: 0.7rem; align-items: flex-start; }
  .resource-list .guide-icon { margin-top: 2px; }
  .resource-list .guide-arrow { display: none; }
}

/* ── Reference-page stage row ────────────────────────────────────
   A `.stage` whose copy column carries a full section heading
   (eyebrow + h2 + lead + CTA) rather than a numbered process step,
   and which stands alone inside its section rather than in a series.
   Used for the environmental-testing row on /resources so that block
   reads as an image-led feature instead of one more centered wall of
   text. The `.stage-copy` selectors below are inert on the service
   pages, which put an h3 and a `.stage-num` in that column. */
.stage-lead { padding: 0; border-bottom: 0; }
.stage-copy .eyebrow-pill { margin-bottom: 1.5rem; }
.stage-copy h2 {
  font-size: clamp(1.9rem, 1.3vw + 1.45rem, 2.5rem);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.stage-copy .t-lead { margin: 0 0 1.5rem; }
.stage-copy .evidence-coda { text-align: left; margin: 0 0 2rem; }

/* ── Outbound source link ────────────────────────────────────────
   One-line "go and read it" link at the foot of a source or agency
   card, with the external-link glyph from the vendored sprite.
   Colours default to the dark band; `.gov-card` re-tints for light. */
.source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--color-brand-primary-300);
  transition: color 0.2s ease, gap 0.2s var(--ease-out);
}
.source-link .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.source-link:hover { color: #fff; gap: 0.65rem; }

/* Inline prose link inside a dark section heading — `a.body-link`
   in site.css only sets its underline, and inherits colour, which is
   invisible against white lead text on navy. */
.svc-section.is-dark .section-heading a.body-link {
  color: var(--color-brand-primary-300);
  border-bottom-color: var(--color-white-border-hi);
}
.svc-section.is-dark .section-heading a.body-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ── Source cards on the dark band ───────────────────────────────
   Three-up reading list for /resources. Deliberately a 3-column
   grid: the page's other reference set is a 2x2 agency grid on a
   light band, so the two never read as the same section. */
.source-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1120px;
  margin: 0 auto;
}
.source-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2.25rem 1.9rem;
}
.source-card h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}
.source-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-white-text-muted);
  margin: 0;
}
.source-card .source-link { margin-top: auto; padding-top: 0.4rem; }
@media (max-width: 1000px) {
  .source-grid { grid-template-columns: 1fr; max-width: 640px; }
  .source-card { padding: 2rem 1.6rem; }
}

/* ── Agency reference grid ───────────────────────────────────────
   2x2 grid of official-guidance links. Badge-led and squarer than
   the glass source cards above it, so a reader can tell at a glance
   that this is the government shelf rather than the reading list. */
.gov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}
.gov-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.9rem 2rem;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  /* Top accent as an inset shadow, not a thick border: an inset clips
     to the corner radius instead of hooking round it. */
  box-shadow: inset 0 3px 0 0 var(--color-brand-primary-700);
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
.gov-card.fade-up.soft:hover {
  border-color: var(--color-border-brand-30);
  box-shadow:
    inset 0 3px 0 0 var(--color-brand-primary),
    0 14px 26px -18px rgba(10, 37, 65, 0.28);
  transform: translateY(-4px);
}
.gov-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-brand-primary-700);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.gov-card h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 0;
}
.gov-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}
.gov-card .source-link { margin-top: auto; padding-top: 0.35rem; color: var(--color-brand-primary-700); }
.gov-card .source-link:hover { color: var(--color-brand-secondary); }
@media (max-width: 820px) {
  .gov-grid { grid-template-columns: 1fr; max-width: 620px; }
  .gov-card { padding: 1.7rem 1.6rem; }
}

/* ── Whole-system coverage checklist ─────────────────────────────
   "What we clean" style inventory: a three-column grid of short
   check items. Written for a `.svc-section.is-dark` band (glass
   cells on navy); the light fallback keeps body colors. Added for
   the duct & HVAC cleaning page, Sep 2026. */
.svc-cover-grid {
  list-style: none;
  margin: 0 auto; padding: 0;
  max-width: 980px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem;
}
.svc-cover-grid li {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  font-weight: 600; font-size: 0.95rem;
  color: var(--color-text-body);
}
.svc-cover-grid .ic {
  width: 20px; height: 20px; flex: 0 0 auto;
  color: var(--color-brand-secondary);
}
.svc-section.is-dark .svc-cover-grid li {
  background: var(--color-white-surface);
  border-color: var(--color-white-border);
  color: #fff;
}
.svc-section.is-dark .svc-cover-grid .ic { color: var(--color-brand-primary-300); }
@media (max-width: 980px) {
  .svc-cover-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .svc-cover-grid { grid-template-columns: 1fr; }
}

/* ── Before/after proof pair ─────────────────────────────────────
   Two photographs of the same thing side by side with one shared
   caption underneath. Used for duct before-and-after job photos. */
.svc-proof-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 920px;
  margin: 3rem auto 0;
}
.svc-proof-pair img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}
.svc-proof-pair figcaption {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
@media (max-width: 640px) {
  .svc-proof-pair { grid-template-columns: 1fr; }
}

/* ── Grouped FAQ page helper ─────────────────────────────────────
   The FAQs page runs several accordion groups; this places the
   "read more" link that sits under a group. */
.faq-grouplink { margin: 1.5rem 0 0; }

/* ── Centred note under a section's main content ─────────────────
   For client-authored copy that belongs AFTER a grid or list rather
   than in the section heading above it. The duct & HVAC page carries
   three such passages from the client's own brief (the negative-air
   note under the whole-system grid, the "more than duct cleaning"
   coda, and the commitment sign-off on the dark band). Sep 2026. */
.svc-note {
  max-width: 760px;
  margin: 2.5rem auto 0;
  text-align: center;
}
.svc-note p {
  margin: 0 0 1rem;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.svc-note p:last-child { margin-bottom: 0; }
.svc-note strong { color: var(--color-text-primary); font-weight: 800; }
.svc-section.is-dark .svc-note p { color: var(--color-white-text-lead); }
.svc-section.is-dark .svc-note strong { color: #fff; }