/* 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;
  color: var(--color-primary-active);
  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) ========== */

/* .service-card is a markup/test hook — no rule of its own. Visual styling
   (background, border, shadow, hover lift) comes from .card. */

/* Image-ready media slot. Until real project photos exist it shows the
   service's icon + a clearly-marked "coming soon" label so the card reads as
   intentionally photo-ready rather than broken. When a photo lands, swap the
   inner markup for an <img>; the 16:10 footprint keeps the grid from shifting. */
.service-card-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 16 / 10;
  margin-bottom: var(--space-6);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-gray-400);
}

.service-card-media-label {
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Override inherited --color-gray-400 (~2.5:1 on muted surface) — use darker token for AA (~7.6:1) */
  color: var(--color-gray-600);
}

.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;
}

/* ========== 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);
}