/* ==========================================================================
   Hope's Carpet Cleaning Services — static one-page site
   Palette: ink #0B0B0B · gold #C9A15D / #D8B06B · white · light grey #F5F5F5
   Type: Fraunces (display, variable SOFT/WONK) · Instrument Sans (body)
   ========================================================================== */

:root {
  /* Warm charcoal (ink) scale */
  --ink: #0b0b0b;
  --char-800: #1a1815;
  --char-700: #2c2925;
  --char-600: #433f38;
  --char-500: #655f54;
  --char-300: #beb9ae;
  --char-200: #dad7d0;
  --char-100: #eceae6;
  --char-50: #f6f5f3;

  /* Gold scale */
  --gold-100: #f2e4c4;
  --gold-200: #e6cf9b;
  --gold-300: #d8b06b;
  --gold-400: #c9a15d;
  --gold-500: #ad8545;
  --gold-600: #876632;

  /* Text on light */
  --soft: #46433d;
  --muted: #736e66;

  /* Surfaces (brief palette) */
  --white: #ffffff;
  --grey: #f5f5f5;

  --font-display: 'Fraunces', 'Cooper Std', Georgia, serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-card: 10px;
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05), 0 1px 1px rgba(11, 11, 11, 0.03);
  --shadow-md: 0 4px 12px -4px rgba(11, 11, 11, 0.1), 0 2px 4px rgba(11, 11, 11, 0.04);
  --shadow-lg: 0 24px 60px -28px rgba(11, 11, 11, 0.22), 0 6px 16px -8px rgba(11, 11, 11, 0.08);
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.018em;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; padding: 0; color: inherit; }

::selection { background: var(--gold-200); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Surface-aware focus: brighter gold on ink, deeper gold on light. White
   cards inside dark sections take the light treatment. */
.site-header :focus-visible,
.hero :focus-visible,
.stats :focus-visible,
.on-dark :focus-visible,
.guarantees :focus-visible,
.site-footer :focus-visible,
.drawer :focus-visible {
  outline-color: var(--gold-400);
}
.form-card :focus-visible { outline-color: var(--gold-600); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 16px; z-index: 200;
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 10px 20px; font-size: 14px; font-weight: 500;
}
.skip-link:focus { left: 16px; }

/* Icons */
.icon { width: 16px; height: 16px; flex: none; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 20px; height: 20px; }

/* ---------- Layout ---------- */

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 640px) { .container { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) { .container { padding-left: 40px; padding-right: 40px; } }

.section { padding-top: 96px; padding-bottom: 96px; }
@media (min-width: 640px) { .section { padding-top: 128px; padding-bottom: 128px; } }

/* Surface rules: prose and diagrams sit on white, card collections on grey,
   ledgers on ink. Applied per section, never alternated by position. */
.section--grey { background: var(--grey); }

[id] { scroll-margin-top: 96px; }

/* ---------- Type helpers ---------- */

.h2 {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 640px) { .h2 { font-size: 44px; line-height: 1.1; letter-spacing: -0.018em; } }
@media (min-width: 1024px) { .h2 { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; } }

.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-500);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}

/* Gold rule that draws itself under a key phrase. Default (no JS, or reduced
   motion) is the fully drawn state; JS adds .u-prep to hide it, then .inview
   to draw it once on first scroll into view. */
.u-draw {
  background-image: linear-gradient(var(--gold-400), var(--gold-400));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}
.u-draw.u-prep {
  background-size: 0% 2px;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.u-draw.u-prep.inview { background-size: 100% 2px; }

.section-head { max-width: 768px; }
.section-head .lede { margin-top: 24px; max-width: 640px; font-size: 17px; line-height: 1.65; color: var(--soft); }
.on-dark .section-head .lede { color: var(--char-200); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn--gold {
  background: var(--gold-400);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.btn--gold:hover { background: var(--gold-300); }
.btn--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--dark:hover { background: var(--char-800); }
.btn--outline-light {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  background: transparent;
}
.btn--outline-light:hover { border-color: var(--gold-400); color: var(--gold-300); }
.btn--outline-dark {
  border: 1px solid var(--char-300);
  background: #fff;
  color: var(--ink);
}
.btn--outline-dark:hover { border-color: var(--ink); background: var(--char-50); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
}
.site-header.scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  flex: none;
}
.brand .brand-name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.brand .brand-sub {
  margin-top: 6px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: rgba(201, 161, 93, 0.9);
}

/* Desktop masthead (>=1280px) */
.header-desktop { display: none; }
@media (min-width: 1280px) {
  .header-desktop { display: block; }
  .header-mobile { display: none; }
}

/* Legal pages keep the compact bar at all widths, at masthead scale on desktop */
.header-mobile--always { display: block; }
@media (min-width: 1280px) {
  .header-mobile.header-mobile--always .bar { height: 84px; }
  .header-mobile.header-mobile--always .brand .brand-name { font-size: 25px; }
  .header-mobile.header-mobile--always .brand .brand-sub { font-size: 9px; letter-spacing: 0.34em; margin-top: 6px; }
}

.header-desktop .masthead {
  position: relative;
  display: flex;
  align-items: center;
  height: 84px;
}
.header-phone {
  position: absolute;
  left: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--char-300);
  transition: color 0.2s;
}
.header-phone:hover { color: #fff; }
.header-phone .icon { color: var(--gold-400); }

.header-cta {
  position: absolute;
  right: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(201, 161, 93, 0.6);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-300);
  transition: border-color 0.2s, color 0.2s;
}
.header-cta:hover { border-color: var(--gold-400); color: var(--gold-200); }

.primary-nav { display: flex; width: 100%; align-items: center; }
.primary-nav .nav-side { display: flex; flex: 1; align-items: center; }
.primary-nav .nav-side--left { justify-content: flex-end; }
.primary-nav .nav-side--right { justify-content: flex-start; }
.primary-nav .brand { margin: 0 40px; }

.nav-link {
  position: relative;
  margin: 0 20px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--char-300);
  transition: color 0.2s;
}
.nav-link:hover { color: #fff; }

/* Mobile header */
.header-mobile .bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.header-mobile .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.header-mobile .brand .brand-name { font-size: 19px; }
.header-mobile .brand .brand-sub { font-size: 8px; letter-spacing: 0.3em; margin-top: 4px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}
.icon-btn--gold {
  border: none;
  background: var(--gold-400);
  color: var(--ink);
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.drawer-panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 86%;
  max-width: 384px;
  overflow-y: auto;
  background: var(--ink);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head .brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; }
.drawer-nav { margin-top: 40px; display: grid; gap: 4px; }
.drawer-nav a {
  display: block;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
}
.drawer-nav a:hover { background: rgba(255, 255, 255, 0.05); }
.drawer-ctas { margin-top: 40px; display: grid; gap: 12px; }
@media (min-width: 1280px) { .drawer { display: none !important; } }

/* ---------- Hero ---------- */

.hero {
  background: var(--ink);
  color: #fff;
  padding-top: 56px;
  padding-bottom: 96px;
}
@media (min-width: 640px) { .hero { padding-top: 80px; padding-bottom: 112px; } }

.hero-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 80px; }
}

.hero h1 {
  max-width: 15ch;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
@media (min-width: 640px) { .hero h1 { font-size: 56px; } }
@media (min-width: 1024px) { .hero h1 { font-size: 68px; } }

.hero-lede {
  margin-top: 24px;
  max-width: 544px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--char-300);
}
.hero-lede strong { font-weight: 600; color: #fff; }

.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.hero-trust {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--char-300);
}
.hero-trust strong { font-weight: 600; color: #fff; }
.hero-trust .sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.15); display: none; }
@media (min-width: 640px) { .hero-trust .sep { display: inline-block; } }
.hero-trust .shield { color: var(--gold-400); }

.stars {
  color: var(--gold-400);
  font-size: 13px;
  letter-spacing: 0.15em;
}
/* Authentic Google gold for genuine Google-review ratings */
.stars--google { color: #fbbc04; }

/* Entrance animation */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .fade-up--delay { animation-delay: 0.12s; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- Quote form card ---------- */

.form-card {
  position: relative;
  border-radius: var(--radius-card);
  border-top: 3px solid var(--gold-400);
  background: #fff;
  color: var(--ink);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { .form-card { padding: 32px; } }
.on-dark .form-card,
.hero .form-card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 90px -32px rgba(0, 0, 0, 0.55);
}

.form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-600);
}
.form-card h3 {
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
@media (min-width: 640px) { .form-card h3 { font-size: 28px; } }
.form-card .form-sub { margin-top: 8px; font-size: 14px; color: var(--soft); }

.form-grid { margin-top: 24px; display: grid; gap: 16px; }
@media (min-width: 640px) {
  .form-grid--two { grid-template-columns: 1fr 1fr; }
  .form-grid--two .field--full { grid-column: 1 / -1; }
}
/* In the single-column tablet band the hero card spans the container, so its
   fields pair up; back to one column once the card sits in the narrow hero
   grid column at >=1024px. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero .form-grid { grid-template-columns: 1fr 1fr; }
  .hero .form-grid .field:last-of-type { grid-column: 1 / -1; }
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--soft);
}
.field label .req { color: #e11d48; margin-left: 2px; }

.field input,
.field select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--char-200);
  background: #fff;
  padding: 12px 16px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--ink);
}
.field input::placeholder { color: var(--muted); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold-300);
  box-shadow: 0 0 0 4px var(--gold-100);
}
.field select.is-empty { color: var(--muted); }
.field .field-invalid { border-color: #be123c; }
.field .field-invalid:focus { border-color: #be123c; box-shadow: 0 0 0 4px #fff1f2; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='none' stroke='%23655f54' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 5 L7 9 L11 5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}

.form-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted); }
.form-card .btn { margin-top: 24px; }

.form-error {
  display: none;
  margin-top: 16px;
  border-radius: 8px;
  background: #fff1f2;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #be123c;
}
.form-error.show { display: block; }
.form-error a { font-weight: 600; text-decoration: underline; }

.form-success { display: none; text-align: center; padding: 24px 8px; }
.form-success.show { display: block; }
.form-success .tick {
  margin: 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--gold-100);
  color: var(--gold-600);
}
.form-success h4 { margin-top: 20px; font-size: 26px; color: var(--ink); }
.form-success p { margin-top: 12px; color: var(--soft); }

.hidden-field { display: none !important; }

/* ---------- Stats strip ---------- */

.stats {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ink);
  color: #fff;
}
.stats .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
  padding: 56px 0;
}
@media (min-width: 1024px) {
  .stats .grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .stats .stat { padding: 0 40px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .stats .stat:first-child { border-left: none; padding-left: 0; }
}
.stat dt {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-300);
}
@media (min-width: 640px) { .stat dt { font-size: 48px; } }
.stat dd {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--char-300);
}

/* ---------- About ---------- */

.about-inner { margin: 0 auto; max-width: 768px; }
.prose { margin-top: 32px; }
.prose p { max-width: 640px; font-size: 17px; line-height: 1.75; color: var(--soft); }
.prose p + p { margin-top: 20px; }
.about-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Dark sections ---------- */

.on-dark {
  background: var(--ink);
  color: #fff;
}
.on-dark .h2 { color: #fff; }

/* ---------- Services ---------- */

.service-row {
  display: grid;
  gap: 32px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 48px 0;
}
.service-row:first-of-type { border-top: none; padding-top: 0; }
.service-row:last-of-type { padding-bottom: 0; }
.services-list { margin-top: 56px; }
@media (min-width: 640px) { .services-list { margin-top: 64px; } }
@media (min-width: 1024px) {
  .service-row { grid-template-columns: 1fr 1fr; gap: 64px; }
}

.service-row h3 {
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
}
@media (min-width: 640px) { .service-row h3 { font-size: 30px; } }
.service-row .blurb { margin-top: 12px; max-width: 448px; font-size: 15px; line-height: 1.65; color: var(--char-200); }

.service-features {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  font-size: 14px;
}
@media (min-width: 640px) { .service-features { grid-template-columns: 1fr 1fr; } }
.service-features li { display: flex; align-items: flex-start; gap: 10px; color: var(--char-200); }
.service-features .icon { margin-top: 2px; color: var(--gold-300); }

.service-link {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-200);
  transition: color 0.2s;
}
.service-link:hover { color: #fff; }

/* ---------- Before / after slider ---------- */

.ba-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  cursor: ew-resize;
}
.ba-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 42% 0 0);
}
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58%;
  width: 1px;
  background: var(--gold-400);
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: 58%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--gold-400);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  cursor: ew-resize;
  touch-action: none;
}
.ba-caption {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--char-300);
}
.ba-caption .rule { flex: 1; height: 1px; margin: 0 12px; background: rgba(201, 161, 93, 0.4); }

/* ---------- Why choose ---------- */

.why-grid { margin-top: 56px; display: grid; gap: 48px 64px; }
@media (min-width: 640px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-item .tick-rule { display: block; width: 36px; height: 1px; background: var(--gold-400); }
.why-item h3 { margin-top: 20px; font-size: 24px; line-height: 1.2; color: var(--ink); }
@media (min-width: 640px) { .why-item h3 { font-size: 26px; } }
.why-item p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--soft); }

/* ---------- Process ---------- */

.process-wrap { position: relative; margin-top: 64px; }
@media (min-width: 640px) { .process-wrap { margin-top: 80px; } }
.process-spine {
  display: none;
  position: absolute;
  left: 27.5px;
  top: 28px;
  height: calc(100% - 56px);
  width: 1px;
  background: rgba(201, 161, 93, 0.35);
}
@media (min-width: 640px) { .process-spine { display: block; } }
/* Bright fill scaled by scroll position (JS); invisible without JS */
.process-spine-fill {
  position: absolute;
  inset: 0;
  background: var(--gold-300);
  transform: scaleY(0);
  transform-origin: top;
}

.process-list { display: grid; gap: 40px; }
@media (min-width: 640px) { .process-list { gap: 56px; } }
.process-step { position: relative; display: grid; gap: 20px; }
@media (min-width: 640px) { .process-step { grid-template-columns: 80px minmax(0, 1fr); align-items: start; } }
.process-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 0 0 8px var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--gold-300);
  transition: color 0.3s ease;
}
/* JS-enhanced state: numerals rest at gold-500 (still AA on ink) and ignite
   to full gold as the scroll line passes each disc. No JS = all gold. */
.process-wrap.enhanced .process-num { color: var(--gold-500); }
.process-wrap.enhanced .process-step.lit .process-num { color: var(--gold-300); }
.process-step h3 { font-size: 24px; line-height: 1.2; color: var(--ink); }
@media (min-width: 640px) { .process-step h3 { font-size: 28px; } }
.process-step p { margin-top: 12px; max-width: 576px; font-size: 16px; line-height: 1.65; color: var(--soft); }

/* ---------- Guarantees ledger ---------- */

/* Ink ledger band — the mid-page echo of the stats strip under the hero.
   Kept shallow: an interlude, not a full section. */
.guarantees { background: var(--ink); color: #fff; }
.guarantees .grid {
  display: grid;
  gap: 24px;
  padding: 48px 0 0;
}
@media (min-width: 640px) { .guarantees .grid { grid-template-columns: 1fr 1fr; gap: 32px 48px; padding: 56px 0 0; } }
@media (min-width: 1024px) { .guarantees .grid { grid-template-columns: repeat(4, 1fr); } }
.guarantee { border-left: 1px solid var(--gold-400); padding-left: 20px; }
.guarantee h3 { font-size: 18px; color: #fff; }
.guarantee p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--char-200); }
.guarantees-cta { padding: 24px 0 48px 21px; }
@media (min-width: 640px) { .guarantees-cta { padding: 32px 0 56px 21px; } }
.guarantees-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-200);
  transition: color 0.2s;
}
.guarantees-cta a:hover { color: #fff; }

/* ---------- Areas ---------- */

.areas-grid { margin-top: 56px; display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 1024px) { .areas-grid { grid-template-columns: 1fr 1.2fr; } }

.areas-picker {
  border-radius: var(--radius-card);
  border: 1px solid var(--char-200);
  background: #fff;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.areas-picker ul { display: grid; gap: 4px; }
.area-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
  font-size: 16px;
  color: var(--ink);
  transition: background-color 0.15s, color 0.15s;
}
.area-btn:hover { background: var(--char-50); }
.area-btn .pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--char-50);
  color: var(--char-500);
}
.area-btn .name { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.area-btn .pc {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.8;
}
.area-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.area-btn[aria-pressed="true"] .pin { background: var(--gold-400); color: var(--ink); }

.area-panel {
  display: none;
  flex-direction: column;
  border-radius: var(--radius-card);
  border: 1px solid var(--char-200);
  background: #fff;
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.areas-panels { display: flex; flex-direction: column; }
.area-panel.active { display: flex; flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .area-panel.active { animation: fadeUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
.area-panel .pc-eyebrow {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-600);
}
.area-panel h3 { margin-top: 16px; font-size: 32px; line-height: 1.15; color: var(--ink); }
.area-panel .area-blurb { margin-top: 16px; max-width: 65ch; font-size: 16px; line-height: 1.65; color: var(--soft); }
.area-panel .covers-label {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--char-500);
}
.area-panel .covers { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--soft); }
.area-panel .panel-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--char-100);
}
.area-panel .panel-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.area-panel .panel-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Testimonials ---------- */

.reviews { background: var(--grey); }

.google-badge {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid var(--char-200);
  background: #fff;
  padding: 8px 16px;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.google-badge .stars { font-size: 12px; }

.review-grid {
  margin-top: 48px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .review-grid { grid-template-columns: repeat(4, 1fr); } }

.review-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--char-200);
  background: #fff;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.review-top { display: flex; align-items: center; gap: 8px; }
.review-g { width: 15px; height: 15px; }
.review-card blockquote {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.review-card figcaption {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-card .name { font-weight: 600; font-size: 13px; color: var(--ink); }
.review-service {
  margin: 0;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-600);
  text-align: right;
}

/* ---------- FAQs ---------- */

.faq-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 1fr 1.5fr; } }
.faq-intro p { margin-top: 20px; max-width: 320px; color: var(--soft); }
.faq-intro a {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.faq-intro a:hover { text-decoration: underline; text-underline-offset: 4px; }

.faq-list { border-top: 1px solid var(--char-200); border-bottom: 1px solid var(--char-200); }
.faq { border-bottom: 1px solid var(--char-200); }
.faq:last-child { border-bottom: none; }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
@media (min-width: 640px) { .faq summary { font-size: 22px; } }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-icon {
  margin-top: 4px;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--char-300);
  color: var(--char-700);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}
.faq[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold-300);
}
.faq .faq-a { padding: 0 48px 24px 0; font-size: 16px; line-height: 1.65; color: var(--soft); }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
.contact-copy .h2 { max-width: 576px; }
.contact-copy .lede { margin-top: 24px; max-width: 576px; font-size: 17px; line-height: 1.65; color: var(--char-200); }

.contact-details { margin-top: 40px; display: grid; gap: 32px; }
.contact-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-300);
}
.contact-phone {
  margin-top: 6px;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: #fff;
}
.contact-phone:hover { color: var(--gold-200); }
.contact-details p.detail { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--char-200); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--char-200);
}
/* Keep the footer's legal links clear of the fixed call bar */
@media (max-width: 1023.98px) { .site-footer { padding-bottom: 88px; } }
.footer-grid { display: grid; gap: 48px; padding: 80px 0; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Three columns in a 2-col tablet grid: let the contact column span the row */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-col--contact { grid-column: 1 / -1; }
  .footer-col--contact .footer-hours { max-width: 380px; }
}
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 4fr 4fr 4fr; } }

.footer-brand .brand { align-items: flex-start; }
.footer-brand .brand-name { font-size: 22px; letter-spacing: -0.01em; }
.footer-brand .brand-sub { letter-spacing: 0.34em; color: var(--gold-300); }
.footer-brand p { margin-top: 20px; max-width: 320px; font-size: 14px; line-height: 1.65; }
.footer-social { margin-top: 24px; display: flex; gap: 12px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--char-200);
  transition: border-color 0.2s, color 0.2s;
}
.footer-social a:hover { border-color: var(--gold-300); color: var(--gold-200); }

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold-300);
  margin: 0;
}
.footer-col ul { margin-top: 20px; display: grid; gap: 12px; font-size: 14px; }
.footer-col a { transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer-contact .icon { margin-top: 3px; color: var(--gold-300); }

.footer-hours {
  margin-top: 24px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
}
.footer-hours .label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold-300);
}
.footer-hours ul { margin-top: 12px; display: grid; gap: 4px; font-size: 13px; }
.footer-hours li { display: flex; justify-content: space-between; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; } }
.footer-bottom ul { display: flex; gap: 20px; }
.footer-bottom a:hover { color: var(--gold-200); }

/* ---------- Sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: none;
}
.sticky-cta.show { display: block; }
@media (min-width: 1024px) { .sticky-cta { display: none !important; } }
.sticky-cta .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--char-200);
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
  box-shadow: 0 24px 60px -28px rgba(11, 11, 11, 0.4);
  backdrop-filter: blur(6px);
}
.sticky-cta .call {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--gold-300);
}
.sticky-cta .btn { flex: 1; }

/* ---------- Legal pages ---------- */

.legal-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  padding: 56px 0 64px;
}
.legal-hero h1 { font-size: 40px; line-height: 1.1; color: var(--ink); }
@media (min-width: 640px) { .legal-hero h1 { font-size: 56px; } }
.legal-hero p { margin-top: 20px; max-width: 640px; font-size: 17px; line-height: 1.65; color: var(--soft); }
.legal-body { padding: 64px 0 96px; }
.legal-body .inner { margin: 0 auto; max-width: 768px; }
.legal-body h2 {
  margin: 48px 0 16px;
  font-size: 24px;
  color: var(--ink);
}
@media (min-width: 640px) { .legal-body h2 { font-size: 30px; } }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { max-width: 640px; font-size: 17px; line-height: 1.75; color: var(--soft); }
.legal-body p + p { margin-top: 20px; }

/* ---------- Attention responses (hover-capable devices only) ----------
   One shared gesture: gold quietly responds to the cursor. No lifts, no
   shadows, no shine — colour and rule-weight only. */
@media (hover: hover) and (pointer: fine) {
  .stat dt { transition: color 0.2s; }
  .stat:hover dt { color: var(--gold-200); }

  .review-card { transition: border-color 0.2s; }
  .review-card:hover { border-color: rgba(201, 161, 93, 0.5); }

  .why-item .tick-rule {
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .why-item:hover .tick-rule { transform: scaleX(2); }

  .guarantee { transition: border-left-width 0.2s ease, padding-left 0.2s ease; }
  .guarantee:hover { border-left-width: 3px; padding-left: 18px; }

  .faq summary:hover .faq-icon { border-color: var(--gold-400); color: var(--gold-600); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}