/* 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;
}
/* Grid items default to min-width:auto, so one unbreakable child (a long
   breadcrumb trail, a long city name in the H1) widens the whole column past the
   viewport. `overflow-x: clip` on html/body then hides the overflow instead of
   scrolling it, so this shows up as content cut off the right edge, not as a
   scrollbar. Found at 390px on the city hub pages, 3 Sep 2026. */
.hero-grid > * { min-width: 0; }
.hero-breadcrumb { flex-wrap: wrap; }
.hero-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem;
  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.8125rem;
  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;
  /* Was `right: -2rem` — exactly the container's own gutter, so at any width
     below 1464px the badge landed flush against the edge of the window and its
     caption ran to within 22px of it (audit 15 September 2026). */
  right: 0;
  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.75rem; 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.75rem;
  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.75rem;
  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;
  color: var(--color-brand-secondary);
  background-image: var(--gradient-brand);
  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;
}
.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; }
}

/* 16 Sep 2026 (M16): stacked CTA pairs kept content-sized widths, so a
   276px "Book Free Consultation" sat over a 245px "Call ..." with no
   shared left/right edge and a 2px height mismatch from the border. */
@media (max-width: 640px) {
  .hero-ctas, .svc-closing-buttons { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .svc-closing-buttons .btn { width: 100%; justify-content: center; }
}