/* Components — buttons, section dividers, eyebrow, cards, icon badges, wave divider */

/* ========== BUTTONS ========== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.btn svg {
  flex-shrink: 0;
}

/* Accent buttons use the brand's deeper shade (#d43800) instead of
   --color-primary (#ff634a) so white button text meets WCAG AA contrast
   (4.81:1 vs 2.94:1). Still the brand orange, just compliant. */
.btn-accent {
  background-color: var(--color-primary-active);
  color: var(--color-white);
  border-color: var(--color-primary-active);
}

.btn-accent:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-text);
}

.btn-outline-accent {
  background-color: transparent;
  /* primary-dark label clears AA (4.5:1) on cream section grounds, where the
     brighter -active lands at ~4.47:1; the border stays -active (non-text). */
  color: var(--color-primary-dark);
  border-color: var(--color-primary-active);
}

.btn-outline-accent:hover {
  background-color: var(--color-primary-active);
  color: var(--color-white);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* Two-button row used by the final CTA sections. Centers at desktop
   widths; on phones the two btn-lg buttons do not fit side-by-side
   and wrap 1+1 unevenly. Stack full-width on phones so both buttons
   become equal-width stacked targets. */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

@media (max-width: 640px) {
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========== SECTION DIVIDER ========== */

.section-divider {
  height: 4px;
  width: 60px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 2px;
  margin-bottom: var(--space-6);
}

.section-divider-center {
  margin-left: auto;
  margin-right: auto;
}

/* ========== EYEBROW TEXT ========== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* AA-compliant brand shade (#d43800, ~4.8:1 on white) — same token the Phase 1 button fix used */
  color: var(--color-primary-active);
  margin-bottom: var(--space-3);
}

/* ========== CARDS ========== */

.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.card-stone {
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-md);
}

/* ========== ICON BADGE ========== */

.icon-badge {
  width: 3rem;
  height: 3rem;
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-badge-lg {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
}

.icon-badge svg {
  color: var(--color-primary);
}

/* ========== WAVE DIVIDER ========== */

.wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
}

.wave-bottom svg {
  display: block;
  width: 100%;
}

/* Homepage-only: the hero wave meets the cream trust bar directly below,
   so it takes the band's token instead of the SVG's default white fill.
   Other pages keep white waves over white content. */
.wave-bottom-cream svg path {
  fill: var(--color-cream);
}

/* ========== TRUST BAR ========== */

/* Standalone band directly under the hero. No border-top: the hero wave
   above is cream (wave-bottom-cream) specifically so it meets this band
   with no visible seam. Icons use the accent shade (#d43800) so they meet
   WCAG non-text contrast (3:1) on the light cream band — gold/green would
   not. Items flex-wrap and stay centered, so the row reflows on narrow
   screens; the media query just tightens the gap. */
.trust-bar {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-gray-100);
  padding: var(--space-6) 0;
}

.trust-bar-items {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

.trust-bar-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.trust-bar-item svg {
  color: var(--color-primary-active);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .trust-bar-items {
    gap: var(--space-3) var(--space-5);
  }
}

/* ========== EMOTIONAL BRAND ========== */

/* Centered statement section — narrower measure and larger body text than an
   information section, so it reads as a brand pause rather than a feature list. */
.emotional-brand {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.emotional-brand-body {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  line-height: 1.8;
}

.emotional-brand-body p + p {
  margin-top: var(--space-5);
}

/* ========== WHY CHOOSE CARDS ========== */

/* Desktop: pull the section up so its heading peeks above the fold just
   under the trust bar (approved 2026-07-04; start at 64px, eyeballed in
   dev). Tablet and mobile keep the standard .section-py rhythm. */
@media (min-width: 1024px) {
  #why-choose {
    padding-top: var(--space-16);
  }
}

/* Shared heading/body styling for the six trust cards, scoped to #why-choose
   so it doesn't touch the Services cards (which still inline these values).
   Replaces the identical inline styles that were repeated on every card. */
#why-choose .card h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

#why-choose .card p {
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Why Choose + Emotional section headings and intro — off inline styles.
   (Other sections still inline this heading idiom; a shared section-heading
   refactor across all sections is a separate cleanup.) */
#why-choose h2,
.emotional-brand h2 {
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  font-weight: 700;
}

#why-choose h2 {
  margin-bottom: var(--space-4);
}

.emotional-brand h2 {
  margin-bottom: var(--space-6);
}

#why-choose .text-center p:not(.eyebrow) {
  color: var(--color-gray-600);
  line-height: 1.8;
}

.emotional-brand-cta {
  margin-top: var(--space-8);
}

/* ========== SHARED SECTION HEADER UTILITIES ========== */

/* Shared across Services and Process section headers. */
.section-heading {
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section-intro { color: var(--color-gray-600); }

/* ========== SERVICE CARDS (homepage) ========== */

/* Visual styling (background, border, shadow, hover lift) comes from .card.
   position: relative anchors the stretched explore link below, which makes
   the whole card clickable while keeping a single, well-named anchor —
   wrapping the card in <a> would turn all of the card copy into the link's
   accessible name. */
.service-card {
  position: relative;
}

.service-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* The stretched link makes the whole card the click target, so the keyboard
   focus ring should trace the whole card, not just the small explore text —
   but only in browsers that can express that with :has(). Suppressing the
   link's own ring is only safe inside this same gate: an unconditional
   suppression paired with a :has()-only replacement would leave browsers
   without :has() support with no focus indicator at all on the card link.
   Browsers outside this gate keep this site's existing global
   :focus-visible ring (base.css) on just the link text, instead of losing
   the indicator entirely. */
@supports selector(:has(a:focus-visible)) {
  .service-card:has(.service-card-link:focus-visible) {
    outline: 2px solid var(--color-primary-active);
    outline-offset: 2px;
  }

  .service-card-link:focus-visible {
    outline: none;
  }
}

/* The shipped photos are pre-cropped to 4:3; the slightly wider 16:10 slot
   center-crops a little more top/bottom via object-fit so the card grid
   keeps one consistent media height regardless of source photo shape. */
.service-card-media {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* The benefit reads as the card's promise — heavier and in body color so it
   stands apart from the supporting paragraph below it. */
.service-card-benefit {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.service-card-body {
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.service-card-bestfor {
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

/* Deeper brand shade so the link clears WCAG AA (4.8:1) on white — the lighter
   --color-primary fails contrast for text. */
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-primary-active);
}

.service-card-link:hover {
  color: var(--color-primary-dark);
}

/* ========== PROCESS TIMELINE ========== */

/* Connected 4-step timeline: numbered circles joined by a single line that
   sits behind them (z-index), so the geometry holds regardless of column gaps.
   Vertical stack on mobile/tablet, horizontal row on desktop (≥1024px). */
.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.process-timeline::before {
  content: "";
  position: absolute;
  top: 2.5rem;       /* vertical center of a 5rem circle */
  bottom: 2.5rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--color-gray-200);
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;        /* circles paint over the connecting line */
  text-align: center;
}

/* Deeper brand shade (#d43800 ≈ 4.8:1) so the white number clears the 3:1
   large-text contrast threshold; --color-primary (#ff634a) would fail it. */
.process-step-circle {
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-active);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
}

.process-step-icon {
  color: var(--color-primary-active);
  margin-bottom: var(--space-2);
}

.process-step-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.process-step-body {
  color: var(--color-gray-600);
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .process-timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
  .process-timeline::before {
    top: 2.5rem;
    bottom: auto;
    left: 12.5%;     /* center of first column */
    right: 12.5%;    /* center of last column */
    width: auto;
    height: 2px;
    transform: none;
  }
}

/* REVIEW-EXCEPTION: the four Phase-2 section banners below (LOCATION CHIP, SITE
   BANNER, BLOG LINKS, LEGAL PAGES) keep the file-wide `===== SECTION =====`
   convention shared by all 15+ existing sections; removing only the new ones
   would fragment the file's organization. Deliberate trade-off (🔵). */

/* ========== LOCATION CHIP ========== */

/* Service-area tags on the home and contact pages. Background is a 10% primary
   tint composited over white (#ffefed). Using --color-primary-dark for text
   gives 7.35:1 on that composited tint, clearing WCAG AA (4.5:1). */
.location-chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
}

.location-chip-lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
}

/* ========== SERVICE AREA CARD ========== */

/* Text-only card until a real map image exists (spec 2026-07-13) — the old
   16:9 gray placeholder failed WCAG AA at 2.33:1 and carried no information. */
.service-area-card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-100);
  padding: var(--space-10);
}

.service-area-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.service-area-card-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.service-area-card-heading {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.service-area-card-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

/* ========== FINAL CTA ========== */

/* Title/body mirror the prior inline styles exactly — extracted to classes so
   the rewritten block carries no inline structural styling. */
.final-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: var(--space-6);
  color: var(--color-white);
}

.final-cta-body {
  max-width: 42rem;
  margin: 0 auto var(--space-8);
  color: var(--color-gray-300);
  font-size: var(--text-lg);
  line-height: 1.7;
}

/* Reassurance line below the buttons. Reuses --color-gray-300 — the same tint
   the CTA body already uses on the hero-bg-warm background. */
.final-cta-support {
  margin-top: var(--space-8);
  color: var(--color-gray-300);
  font-size: var(--text-sm);
}

/* ========== SITE BANNER ========== */

/* Promo banner band: white text on --color-primary-active (#d43800) = 4.81:1 (AA). */
.site-banner {
  background: var(--color-primary-active);
  color: var(--color-white);
  padding: var(--space-3) 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Banner CTA button: --color-primary-active text on --color-white = 4.81:1 (AA). */
.site-banner-cta {
  background: var(--color-white);
  color: var(--color-primary-active);
  border: none;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ========== BLOG LINKS ========== */

/* Blog "Read More" and "Back to Blog" links: --color-accent-dark (#d40067) on
   white card = 5.26:1 (AA). This replaces the lighter --color-accent (#ff4a8b,
   3.18:1) which failed WCAG AA contrast. */
.blog-link {
  color: var(--color-accent-dark);
  font-weight: 500;
}

/* ========== LEGAL PAGES ========== */

/* Privacy and Terms article container. Replaces inline font/color/layout styles
   that also referenced the undefined token --color-gray-800; body text now uses
   --color-gray-700 which is defined and renders correctly. */
.legal-document {
  font-family: var(--font-mono);
  max-width: 42rem;
  margin: 0 auto;
  color: var(--color-gray-700);
  line-height: 1.7;
  font-size: var(--text-sm);
}

/* TOC navigation box. Replaces inline styles that referenced the undefined token
   --color-gray-50 (rendered transparent); background now resolves to --color-cream
   (rgb(247, 245, 242)). */
.legal-toc {
  margin-bottom: var(--space-12);
  padding: var(--space-6);
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

/* Legal page links — TOC and body. Uses --color-primary-dark (#962500) rather than
   --color-primary-active (#d43800) because the TOC links render on the cream
   .legal-toc box, where primary-active is only 4.42:1 (fails AA). primary-dark
   reaches 7.53:1 on cream and 8.20:1 on white (body links). One token covers both. */
.legal-document a {
  color: var(--color-primary-dark);
}