/*
Theme Name: Dallas Mobile Details
Theme URI: https://dallasmobiledetails.com
Author: Dallas Mobile Details
Description: Premium custom WordPress theme for Dallas Mobile Details. Built for speed (90+ PSI), SEO authority, WooCommerce integration, and zero page-builder bloat. Ready to rank on activation.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: dallasmobiledetails
Tags: auto-detailing, mobile-detailing, dallas, woocommerce, custom-theme
*/

/* ============================================================
   SELF-HOSTED FONTS — zero external requests, no GDPR issues
   font-display: swap ensures text is immediately visible while
   fonts load, eliminating the FCP/LCP penalty from font-display: block

   NOTE: these @font-face src URLs must match the preload URLs in
   functions.php EXACTLY. Browsers treat relative and absolute URLs
   as different cache keys — so if preload uses an absolute URL
   and @font-face uses a relative one, the browser refetches the
   font, which defeats the preload and causes FOUT. Both sides
   now use absolute URLs generated at page render time.

   The URLs below are absolute because they're rewritten by WordPress
   at runtime via the dmd_font_face_css() output (see functions.php).
   Relative URLs in a static CSS file are resolved against the CSS
   location, which works, but mismatches the absolute URLs used in
   preload hints — causing double fetches and late swaps.
   ============================================================ */

/* Font metric overrides — adjusts fallback font dimensions to match
   the web font metrics, minimising layout shift (CLS) when fonts swap in.
   Without these, the fallback font (Georgia / Arial) has different
   ascent/descent/size than Cormorant/DM Sans, causing elements to jump. */
@font-face {
  font-family: 'Cormorant Garamond Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 115%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 100%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* The six @font-face declarations below are GENERATED at runtime by
   dmd_output_font_face() in functions.php — they are NOT in this static
   CSS file. This ensures every src URL is absolute and matches the
   preload URLs byte-for-byte. v1.8.5 had these declarations here with
   relative URLs, which worked for loading but caused double-fetching
   when combined with preload hints. */

/* ============================================================
   DESIGN TOKENS — all colours, fonts, spacing as variables
   ============================================================ */
:root {
  /* Brand palette — premium dark gold on deep black */
  --gold:         #C8A96E;
  --gold-light:   #E2C98A;
  --gold-dark:    #A88848;
  --gold-glow:    rgba(200, 169, 110, 0.18);
  --gold-border:  rgba(200, 169, 110, 0.30);

  /* Backgrounds */
  --bg:           #0A0A0A;
  --bg2:          #111111;
  --bg3:          #181818;
  --bg4:          #1E1E1E;
  --bg-card:      rgba(255,255,255,0.03);

  /* Text */
  --white:        #FFFFFF;
  --text:         rgba(255,255,255,0.88);
  --text-muted:   rgba(255,255,255,0.55);
  --text-faint:   rgba(255,255,255,0.30);

  /* Borders */
  --border:       rgba(255,255,255,0.08);
  --border-gold:  rgba(200,169,110,0.25);

  /* Typography */
  --font-head:    'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --font-body:    'DM Sans', 'DM Sans Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Layout */
  --wrap:         1200px;
  --wrap-narrow:  820px;

  /* Motion */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:     cubic-bezier(0, 0, 0.3, 1);
  --dur:          0.35s;

  /* Shapes */
  --radius:       6px;
  --radius-lg:    12px;
  --radius-xl:    20px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* v2.0.0: removed overflow-x: hidden from html and body.
     overflow-x:hidden on an ancestor breaks position:sticky for all
     descendants — the sticky element's nearest scrolling container
     becomes the html/body and the sticky behaviour silently degrades
     to relative. We were seeing this on service-page sidebars. The
     guard against horizontal scroll is now at body level via max-width
     and overflow-clip-margin where needed. */
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* prevent horizontal scroll without breaking position:sticky */
  max-width: 100vw;
  overflow-x: clip;
}
body.no-scroll { overflow: hidden; }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--gold-light); }

ul, ol { list-style: none; }

button, input, textarea, select {
  font-family: var(--font-body);
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--white);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap--narrow {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }
.section--sm { padding: 48px 0; }
.section--lg { padding: 120px 0; }

/* ============================================================
   TOP ANNOUNCEMENT BAR
   ============================================================ */
.topbar {
  background: var(--gold);
  color: #000;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 9px 24px;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 100;
}
.topbar a { color: #000; text-decoration: underline; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  /* v1.9.0: removed backdrop-filter: blur(16px). On throttled mobile CPUs
     (what Lighthouse tests), the compositor spent ~600ms per frame running
     a Gaussian blur over whatever was underneath, which added ~2000ms of
     LCP "element render delay" without ever producing a visible difference
     against the near-black header background. Using a solid 96%-opacity
     color is visually indistinguishable but costs the compositor nothing. */
  background: rgba(10,10,10,0.96);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}

.site-header.scrolled {
  background: rgba(10,10,10,0.98);
  box-shadow: 0 4px 40px rgba(0,0,0,0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 0;
}
/* SVG logo sizing */
.dmd-logo-svg {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.dmd-logo-svg--footer {
  height: 44px;
}
.dmd-logo-svg--mobile-nav {
  height: 32px;
}
@media (max-width: 400px) {
  .dmd-logo-svg { height: 32px; }
}

/* Primary nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.primary-nav__item { position: relative; }
.primary-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.primary-nav__link:hover,
.primary-nav__link.active {
  color: var(--white);
  background: var(--bg-card);
}

/* Dropdown */
.primary-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.22s var(--ease);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.primary-nav__item:hover .primary-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.primary-nav__dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.18s var(--ease);
}
.primary-nav__dropdown a:hover {
  color: var(--gold);
  background: var(--gold-glow);
}

/* Header CTA */
.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header-phone {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  display: none;
}
@media (min-width: 900px) {
  .header-phone { display: block; }
}
.header-phone:hover { color: var(--gold); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius);
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}
/* ── Desktop nav visible above 900px, hidden below ── */
@media (max-width: 899px) {
  .primary-nav--desktop { display: none !important; }
  .nav-toggle { display: flex; }
}
@media (min-width: 900px) {
  .mobile-nav { display: none !important; }
  .nav-toggle { display: none; }
}

/* ── MOBILE NAV OVERLAY ──
   Lives OUTSIDE <header> in the DOM — backdrop-filter on .site-header
   creates a stacking context that traps position:fixed children in
   WebKit/Safari. By making this a sibling of <header>, it sits in the
   root stacking context and z-index works correctly on all browsers.
*/
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
}
.mobile-nav__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}
.mobile-nav.open .mobile-nav__inner {
  transform: translateX(0);
}
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-nav__brand {
  display: flex;
  align-items: center;
}
.mobile-nav__close {
  width: 34px;
  height: 34px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.mobile-nav__close:hover { border-color: var(--gold); color: var(--gold); }
.mobile-nav__link {
  display: block;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, background 0.2s;
}
.mobile-nav__link:hover { color: var(--gold); background: var(--gold-glow); }
.mobile-nav__group { border-bottom: 1px solid var(--border); }
.mobile-nav__group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.mobile-nav__group-toggle:hover { color: var(--gold); }
.mobile-nav__group-toggle svg { transition: transform 0.25s var(--ease); flex-shrink: 0; }
.mobile-nav__group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
  background: var(--bg3);
}
.mobile-nav__group-toggle[aria-expanded="true"] + .mobile-nav__sub { max-height: 700px; }
.mobile-nav__sub-link {
  display: block;
  padding: 10px 20px 10px 28px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.2s, background 0.2s;
}
.mobile-nav__sub-link:hover { color: var(--gold); background: var(--gold-glow); }
.mobile-nav__sub-link--all {
  color: var(--gold);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 12px;
  padding-bottom: 12px;
}
.mobile-nav__cta {
  padding: 20px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  border: none;
}

.btn--primary {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 0 0 var(--gold-glow);
}
.btn--primary:hover {
  background: var(--gold-light);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--gold-glow);
}
.btn--primary:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--border-gold);
}
.btn--outline:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}

.btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

.btn--lg { padding: 16px 36px; font-size: 15px; }
.btn--sm { padding: 9px 18px; font-size: 12px; }

/* ============================================================
   SECTION LABELS & HEADINGS
   ============================================================ */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--gold);
}

.section-head { margin-bottom: 48px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.7;
}
/* v1.9.7: when .section-head also has .text-center, the paragraph block
   itself needs auto horizontal margins. text-align:center centers the
   TEXT inside the box, but with max-width:560px the box still pins to
   the left edge of its parent. margin:0 auto centers the box too. */
.section-head.text-center p { margin-left: auto; margin-right: auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* v1.9.2: if the image ever fails to load, prevent the alt text from
     rendering as visible page content. font-size:0 collapses any text
     node the browser would otherwise display; color matches the hero bg
     as a second line of defence. Screen readers still read the alt
     attribute — this only affects the visual fallback text. */
  font-size: 0;
  color: var(--bg);
  /* v1.9.0: removed will-change: auto — that IS the default value, so the
     declaration was a no-op. If we added will-change: transform here it
     would actually hurt LCP by forcing a new compositor layer for the
     image before it finished decoding. */
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,10,0.97) 0%,
    rgba(10,10,10,0.88) 50%,
    rgba(10,10,10,0.93) 100%
  );
  z-index: 1;
}
.hero__decor {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  opacity: 0.3;
  pointer-events: none;
}
@media (max-width: 899px) {
  .hero__decor { display: none; }
}
.hero__decor::after {
  content: '';
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 80px 0;
}
/* v1.9.0: removed .hero__badge, .hero__badge-dot, and @keyframes pulse.
   Those styles targeted elements that never rendered in front-page.php,
   single-dmd_service.php, or any other template. 28 lines of dead CSS
   plus a running animation target that didn't exist. */

.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  margin-bottom: 20px;
  font-weight: 700;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
}
.hero__sub {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 540px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero__trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.hero__trust-icon {
  color: var(--gold);
  font-size: 14px;
}

/* Hero stats strip */
.hero-stats {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}
.hero-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  text-align: center;
}
.hero-stats__item {
  padding: 0 32px;
  border-right: 1px solid var(--border);
}
.hero-stats__item:last-child { border-right: none; }
.hero-stats__num {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.hero-stats__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   SERVICE CARDS (WooCommerce-style)
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-decoration: none;
  display: block;
  color: inherit;
  position: relative;
}
.service-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px var(--border-gold);
  color: inherit;
}

.service-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--bg3);
  display: block;
  transition: transform 0.4s ease;
}
.service-card:hover .service-card__img { transform: scale(1.04); }
.service-card__img-fallback {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--bg3), var(--bg4));
}
.service-card__img-placeholder {
  width: 100%;
  height: 200px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-faint);
}

.service-card__body {
  padding: 22px;
}
.service-card__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.service-card__title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.2;
}
.service-card__desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.service-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.service-card__price {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
}
.service-card__price small {
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--text-faint);
  font-weight: 400;
  margin-left: 2px;
}
.service-card__cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.service-card__cta::after {
  content: '→';
  transition: transform 0.2s var(--ease);
}
.service-card:hover .service-card__cta::after {
  transform: translateX(4px);
}

/* ============================================================
   PACKAGES TABLE (Martin-style collection pages)
   ============================================================ */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}

.package-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.package-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
}
.package-card--featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(200,169,110,0.07) 0%, var(--bg2) 100%);
}
.package-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 40px;
  white-space: nowrap;
}
.package-card__name {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.package-card__price {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 20px;
  line-height: 1;
}
.package-card__price sup {
  font-size: 1rem;
  vertical-align: super;
  font-weight: 400;
}
.package-card__price span {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text-faint);
  font-weight: 400;
}
.package-card__features {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.package-card__feature {
  font-size: 13.5px;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.package-card__feature::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 1px;
}
.package-card .btn { width: 100%; justify-content: center; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}
.process-step {
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.process-step__num {
  width: 56px;
  height: 56px;
  background: var(--bg2);
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 auto 20px;
}
.process-step h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.process-step p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.review-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  position: relative;
  transition: border-color var(--dur) var(--ease);
}
.review-card:hover { border-color: var(--border-gold); }
.review-card__stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.review-card__text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 18px;
  font-style: italic;
}
.review-card__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.review-card__location {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}
.review-card__source {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip {
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  padding: 64px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, var(--gold-glow), transparent);
  pointer-events: none;
}
.cta-strip h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 14px;
  position: relative;
}
.cta-strip p {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 32px;
  position: relative;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.cta-strip__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-faint);
}
.breadcrumb__item a {
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb__item a:hover { color: var(--gold); }
.breadcrumb__sep { color: var(--text-faint); }
.breadcrumb__current { color: var(--text-muted); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 60px 0 48px;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 14px;
}
.page-hero p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================
   AREA CARDS
   ============================================================ */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.area-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.area-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
  color: inherit;
}
.area-card__city {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}
.area-card__state {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.area-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--gold); }
.faq-icon {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding 0.3s;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.7;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  padding-bottom: 20px;
}

/* ============================================================
   CONTACT / BOOKING FORM
   ============================================================ */
.contact-form {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group--full { grid-column: 1 / -1; }
.form-group label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--white);
  transition: border-color 0.2s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  outline: none;
}
.form-group select option { background: var(--bg3); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit {
  margin-top: 8px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.form-note {
  font-size: 12px;
  color: var(--text-faint);
}
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  background: var(--bg3);
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 64px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 1050px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 550px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h5 { margin-bottom: 10px; font-size: 10px; }
  .footer-col ul { gap: 6px; }
  .footer-col ul a { font-size: 12.5px; }
}

.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-brand__desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-decoration: none;
}
.footer-contact-item:hover { color: var(--gold); }
.footer-contact-icon { color: var(--gold); font-size: 13px; width: 16px; }

.footer-col h5 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.footer-bottom a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer-bottom a:hover { color: var(--gold); }

/* ============================================================
   PROMO POPUP
   ============================================================ */
.promo-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.promo-popup.visible {
  opacity: 1;
  pointer-events: all;
}
.promo-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  /* v1.9.0: removed backdrop-filter: blur(6px). The popup appears after
     60s so it doesn't affect LCP, but the blur was forcing the compositor
     to re-render the entire page underneath once the popup showed. */
}
.promo-popup__box {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
.promo-popup.visible .promo-popup__box { transform: translateY(0); }
.promo-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted);
  transition: all 0.2s;
}
.promo-popup__close:hover { border-color: var(--gold); color: var(--gold); }
.promo-popup__badge {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 40px;
  margin-bottom: 20px;
}
.promo-popup__discount {
  font-family: var(--font-head);
  font-size: 5rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.promo-popup h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.promo-popup p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.promo-popup__code {
  background: var(--bg3);
  border: 1px dashed var(--border-gold);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.promo-popup__code:hover { background: var(--gold-glow); }
.promo-popup__skip {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-faint);
  cursor: pointer;
}
.promo-popup__skip:hover { color: var(--text-muted); }

/* ============================================================
   WOOCOMMERCE OVERRIDES (minimal, load only on shop pages)
   ============================================================ */
.woocommerce-breadcrumb { display: none; } /* we use custom breadcrumbs */
.woocommerce .woocommerce-result-count { color: var(--text-muted); font-size: 13px; }
.woocommerce ul.products li.product a.button,
.woocommerce .button {
  background: var(--gold) !important;
  color: #000 !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  transition: background 0.2s !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce .button:hover {
  background: var(--gold-light) !important;
}
.woocommerce ul.products li.product {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease) !important;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--border-gold) !important;
}
.woocommerce ul.products li.product a img {
  margin-bottom: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head) !important;
  font-size: 1.1rem !important;
  color: var(--white) !important;
  padding: 16px 20px 8px !important;
}
.woocommerce ul.products li.product .price {
  color: var(--gold) !important;
  font-family: var(--font-head) !important;
  font-size: 1.1rem !important;
  padding: 0 20px 16px !important;
}

/* ============================================================
   SINGLE SERVICE PAGE
   ============================================================ */
.service-hero {
  position: relative;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 64px 0 56px;
}
.service-content {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .service-content { grid-template-columns: 1fr; }
}
.service-sidebar {
  position: sticky;
  top: 90px;
}
.service-sidebar-card {
  background: var(--bg2);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.service-sidebar-card h4 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 20px;
}
.service-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.service-price-row:last-of-type { border-bottom: none; }
.service-price-row span:first-child { color: var(--text-muted); }
.service-price-row span:last-child { color: var(--gold); font-weight: 600; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.blog-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.blog-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  color: inherit;
}
.blog-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--bg3);
}
.blog-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.blog-card__title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
  flex: 1;
}
.blog-card__meta {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   BLOG CONTENT — rich post typography (images, video, quotes,
   tables, embeds, galleries, code, lists, separators)
   ============================================================ */
.blog-content { font-size: 17px; color: var(--text-muted); line-height: 1.85; }
.blog-content > * + * { margin-top: 1.6em; }
.blog-content h2 { font-family: var(--h-font); font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--white); margin-top: 2.4em; line-height: 1.3; }
.blog-content h3 { font-family: var(--h-font); font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--white); margin-top: 2em; line-height: 1.35; }
.blog-content h4 { font-family: var(--b-font); font-size: 1.05rem; font-weight: 600; color: var(--gold-light); margin-top: 1.8em; text-transform: uppercase; letter-spacing: 0.04em; }
.blog-content p { margin-top: 1.2em; }
.blog-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; transition: color var(--ease); }
.blog-content a:hover { color: var(--gold-light); }
.blog-content strong { color: var(--white); font-weight: 600; }
.blog-content em { font-style: italic; }

/* Lists */
.blog-content ul, .blog-content ol { margin-top: 1.2em; padding-left: 1.6em; }
.blog-content li { margin-top: 0.5em; }
.blog-content li::marker { color: var(--gold); }
.blog-content ol li::marker { font-weight: 600; }

/* Images */
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-top: 1.6em;
  display: block;
}
.blog-content figure { margin: 2em 0; }
.blog-content figure img { margin-top: 0; }
.blog-content figcaption {
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

/* WordPress alignment classes */
.blog-content .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.blog-content .alignleft { float: left; margin: 0.4em 1.6em 1em 0; max-width: 50%; }
.blog-content .alignright { float: right; margin: 0.4em 0 1em 1.6em; max-width: 50%; }
.blog-content .alignwide { margin-left: -40px; margin-right: -40px; max-width: calc(100% + 80px); }
.blog-content .alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; border-radius: 0; }
@media (max-width: 768px) {
  .blog-content .alignleft, .blog-content .alignright { float: none; max-width: 100%; margin: 1.2em 0; }
  .blog-content .alignwide { margin-left: -16px; margin-right: -16px; max-width: calc(100% + 32px); }
}

/* Blockquotes */
.blog-content blockquote,
.blog-content .wp-block-quote {
  margin: 2em 0;
  padding: 24px 28px 24px 24px;
  border-left: 3px solid var(--gold);
  background: var(--bg2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--white);
  font-size: 1.05em;
  line-height: 1.7;
}
.blog-content blockquote p { margin-top: 0; }
.blog-content blockquote p + p { margin-top: 0.8em; }
.blog-content blockquote cite,
.blog-content .wp-block-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-style: normal;
  color: var(--gold);
  font-weight: 500;
}
.blog-content blockquote cite::before { content: '— '; }

/* Pullquotes */
.blog-content .wp-block-pullquote {
  border-top: 2px solid var(--gold-border);
  border-bottom: 2px solid var(--gold-border);
  border-left: none;
  background: transparent;
  text-align: center;
  padding: 32px 24px;
  margin: 2.4em 0;
  font-family: var(--h-font);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

/* Video & Embeds */
.blog-content iframe,
.blog-content video,
.blog-content .wp-block-embed {
  max-width: 100%;
  border-radius: var(--radius-lg);
  margin-top: 1.6em;
}
.blog-content .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.blog-content .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin-top: 0;
}
.blog-content video { width: 100%; height: auto; display: block; }

/* Tables */
.blog-content table,
.blog-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 14px;
}
.blog-content table th {
  background: var(--bg3);
  color: var(--gold);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--gold-border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.blog-content table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.blog-content table tr:hover td { background: rgba(200,169,110,0.04); }

/* Code */
.blog-content code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.88em;
  background: var(--bg3);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--gold-light);
}
.blog-content pre {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: 14px;
  line-height: 1.6;
}
.blog-content pre code { background: none; padding: 0; font-size: inherit; }

/* Separators */
.blog-content hr,
.blog-content .wp-block-separator {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2.4em 0;
}
.blog-content .wp-block-separator.is-style-wide { width: 100%; }
.blog-content .wp-block-separator.is-style-dots {
  background: none;
  text-align: center;
  line-height: 1;
}
.blog-content .wp-block-separator.is-style-dots::before {
  content: '···';
  color: var(--gold);
  font-size: 1.4em;
  letter-spacing: 0.6em;
}

/* Gallery */
.blog-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 1.6em 0;
}
.blog-content .wp-block-gallery img {
  margin-top: 0;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.blog-content .wp-block-gallery .wp-block-image { margin: 0; }

/* Clearfix for floated images */
.blog-content::after { content: ''; display: table; clear: both; }

/* Blog sidebar responsive */
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr !important; }
  .blog-layout aside { position: static !important; }
}

/* ============================================================
   LOCATION PAGE
   ============================================================ */
.location-map {
  width: 100%;
  height: 320px;
  background: var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   TRUST BADGES / CERTIFICATIONS
   ============================================================ */
.trust-badges {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.trust-badge__icon {
  font-size: 22px;
  color: var(--gold);
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-gold { color: var(--gold); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 48px; }
.mb-sm { margin-bottom: 16px; }
.mb-md { margin-bottom: 32px; }
.mb-lg { margin-bottom: 48px; }

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .hero { min-height: 70vh; }
  .hero__content { padding: 60px 0; }
  .section { padding: 56px 0; }
  .section--lg { padding: 80px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .packages-grid { grid-template-columns: 1fr; }
  .hero-stats__grid { grid-template-columns: 1fr 1fr; }
  .hero-stats__item { border-right: none; border-bottom: 1px solid var(--border); }
  .hero-stats__item:nth-child(2n) { border-right: none; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-steps::before { display: none; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero-stats__grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .promo-popup__box { padding: 32px 24px; }
}

/* ============================================================
   AREA PAGE — rich location content
   ============================================================ */
.area-prose {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-top: 16px;
}
.area-highlight {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  margin: 40px 0;
}
.area-tip {
  background: linear-gradient(135deg, rgba(200,169,110,0.06), rgba(200,169,110,0.02));
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 32px;
  margin: 40px 0;
}

/* ============================================================
   SERVICE CARD — description text (replaces giant icons)
   ============================================================ */
.service-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 8px;
  flex: 1;
}

/* ============================================================
   REVIEWS SLIDER
   ============================================================ */
.reviews-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.reviews-slider::-webkit-scrollbar { height: 4px; }
.reviews-slider::-webkit-scrollbar-track { background: transparent; }
.reviews-slider::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 4px; }
.review-slide {
  flex: 0 0 340px;
  max-width: 340px;
  scroll-snap-align: start;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.review-slide__stars { color: var(--gold); font-size: 14px; margin-bottom: 12px; }
.review-slide__text { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; font-style: italic; }
.review-slide__author { font-size: 13px; font-weight: 600; color: var(--white); }
.review-slide__city { font-size: 12px; color: var(--text-muted); }
@media (max-width: 600px) {
  .review-slide { flex: 0 0 280px; max-width: 280px; }
}

/* ============================================================
   GALLERY SLIDER (homepage)
   ============================================================ */
.gallery-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.gallery-slider::-webkit-scrollbar { height: 4px; }
.gallery-slider::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 4px; }
.gallery-slide {
  flex: 0 0 360px;
  max-width: 360px;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.gallery-slide img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-slide:hover img { transform: scale(1.04); }
.gallery-slide__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .gallery-slide { flex: 0 0 280px; max-width: 280px; }
  .gallery-slide img { height: 210px; }
}

/* ============================================================
   SERVICE BENEFITS GRID
   ============================================================ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.benefit-item {
  padding: 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.benefit-item h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.benefit-item p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ============================================================
   WHY SERVICE SECTION
   ============================================================ */
.why-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  margin: 48px 0;
}
.why-section h2 { margin-bottom: 16px; }
.why-section p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
}
.why-section p + p { margin-top: 14px; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header, .promo-popup, .cta-strip, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   WOOCOMMERCE & ADDITIONAL COMPONENTS (merged from features.css)
   ============================================================ */
/* features.css — WooCommerce + additional component styles */

/* ── Shop / Product Archive ── */
.woocommerce-page .page-hero { display: block; }

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  text-decoration: none;
}

/* ── Single Product ── */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
  }
}

.woocommerce div.product .product_title {
  font-family: var(--font-head) !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  color: var(--white) !important;
  margin-bottom: 12px !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-head) !important;
  font-size: 2rem !important;
  color: var(--gold) !important;
  margin-bottom: 20px !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  background: var(--gold) !important;
  color: #000 !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius) !important;
  padding: 13px 28px !important;
  border: none !important;
  transition: background 0.25s, transform 0.2s !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--gold-light) !important;
  transform: translateY(-1px) !important;
}

/* Quantity input */
.woocommerce .quantity .qty {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  width: 80px !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  border: none !important;
  background: var(--bg2) !important;
  border-radius: var(--radius-lg) !important;
  margin-top: 0 !important;
  padding: 28px !important;
  color: var(--text-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* Cart & Checkout */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce {
  color: var(--text) !important;
}
.woocommerce table.shop_table {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
.woocommerce table.shop_table th {
  background: var(--bg2) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 16px !important;
}
.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 16px !important;
  color: var(--text) !important;
  background: var(--bg) !important;
}

/* Checkout form fields */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}
.woocommerce form .form-row label {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Product category archive header */
.woocommerce-products-header__title.page-title {
  font-family: var(--font-head) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  color: var(--white) !important;
  text-align: center;
  margin-bottom: 12px;
}

/* Stars */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--gold) !important;
}

/* ── Notices ── */
.woocommerce-message,
.woocommerce-info {
  background: var(--bg2) !important;
  border-top: 3px solid var(--gold) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
.woocommerce-error {
  background: rgba(224,80,80,0.1) !important;
  border-top: 3px solid #e05050 !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}

/* ── Vehicle type pages ── */
.vehicle-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.vehicle-feature {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}
.vehicle-feature strong {
  display: block;
  color: var(--white);
  font-size: 15px;
  margin-bottom: 6px;
}

/* ============================================================
   WOOCOMMERCE — match theme design
   ============================================================ */

/* Single product add-to-cart form */
.wc-purchase-box form.cart {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.wc-purchase-box .qty {
  width: 70px;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  text-align: center;
}
.wc-purchase-box .qty:focus {
  outline: none;
  border-color: var(--gold);
}
.wc-purchase-box .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--gold);
  color: #000;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.wc-purchase-box .single_add_to_cart_button:hover {
  background: var(--gold-light);
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--bg2);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-muted);
  list-style: none;
}
.woocommerce-error {
  border-color: #e05555;
}

/* Cart / checkout pages */
.woocommerce-cart table.cart,
.woocommerce-checkout form.checkout {
  color: var(--text);
}
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.woocommerce table.shop_table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
}
.woocommerce table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.woocommerce .cart_totals,
.woocommerce #order_review {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 20px;
}
/* Checkout & cart buttons */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: var(--gold);
  color: #000 !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.woocommerce .button:hover,
.woocommerce #place_order:hover {
  background: var(--gold-light);
  color: #000 !important;
}
/* Checkout form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.woocommerce form .form-row label {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 6px;
  display: block;
}
/* Package card flex fix for archive */
.packages-grid .package-card {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   AUTHORITY HUB — /car-detailing-dallas/  (v1.9.1)
   Classes prefixed .hub- so they don't collide with existing
   .service-*, .area-*, .pricing-* used elsewhere in the theme.
   ============================================================ */

/* --- Decision gate: symptom → service routing --- */
.decision-gate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin: 24px 0 8px;
}
.decision-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.decision-item__trigger {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.decision-item__route {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--white);
  font-weight: 600;
  line-height: 1.3;
}
.decision-item__route a {
  color: var(--gold-light);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.decision-item__route a:hover { border-bottom-color: var(--gold-light); }

/* --- Inline callout used below the decision gate --- */
.hub-callout {
  background: var(--bg3);
  border-left: 3px solid var(--gold);
  padding: 18px 24px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: 20px 0 0;
}
.hub-callout p { margin: 0; font-size: 15px; }
.hub-callout strong { color: var(--gold-light); }

/* --- Services grid w/ "Choose this when" triggers --- */
.hub-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}
.hub-service-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
}
.hub-service-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
}
.hub-service-card__name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--gold-light);
  margin-bottom: 8px;
  font-weight: 600;
}
.hub-service-card__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 14px;
}
.hub-service-card__when {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.hub-service-card__when-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}

/* --- Pricing overview rows (simpler than package-card) --- */
.hub-price-rows {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 14px 0 20px;
}
.hub-price-row {
  background: var(--bg3);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.hub-price-row__name {
  font-weight: 500;
  color: var(--white);
  font-size: 15.5px;
}
.hub-price-row__price {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--gold);
  white-space: nowrap;
}

/* --- Area grid w/ featured Dallas card --- */
.hub-areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 24px 0 8px;
}
.hub-area-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: block;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s;
}
.hub-area-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
}
.hub-area-card--featured {
  border-color: var(--border-gold);
  background: var(--bg4);
}
.hub-area-card--featured .hub-area-card__city { color: var(--gold); }
.hub-area-card__city {
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 4px;
}
.hub-area-card__note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* --- Soft CTA at page end (handoff to conversion page) --- */
.hub-cta {
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  text-align: center;
}

/* --- Mobile --- */
@media (max-width: 700px) {
  .decision-gate { grid-template-columns: 1fr; }
  .hub-services-grid { grid-template-columns: 1fr; }
  .hub-areas-grid { grid-template-columns: 1fr 1fr; }
  .hub-price-row { grid-template-columns: 1fr; gap: 4px; }
  .hub-price-row__price { font-size: 1.15rem; }
  .hub-cta { padding: 32px 22px; }
}

/* ============================================================
   v1.9.7 — FOOTER GMB MAP
   v1.9.9: rewrote the placeholder/iframe layering. Previous version
   used ::before for the loading text, but once iframe was injected
   the pseudo-element was still rendering on the left side because
   the iframe didn't span the full container width. Now: position
   the iframe absolutely so it ALWAYS fills the container, and
   place the placeholder behind it via z-index. When iframe injects,
   it covers the placeholder completely.
   ============================================================ */
.footer-map-wrap {
  background: var(--bg);
  padding: 0 0 32px;
}
.footer-map {
  position: relative;
  height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-map::before {
  content: '📍 Loading map…';
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.footer-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  z-index: 2;
}

/* ============================================================
   v1.9.7 — ESTIMATE CALCULATOR
   ============================================================ */
.estimator {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 36px 32px;
}
.estimator__step + .estimator__step { margin-top: 32px; }
.estimator__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.estimator__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.estimator__option {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.estimator__option:hover {
  border-color: var(--border-gold);
  color: var(--white);
}
.estimator__option.is-selected {
  background: var(--gold-glow);
  border-color: var(--gold);
  color: var(--gold-light);
  font-weight: 600;
}
.estimator__hint {
  margin-top: 28px;
  padding: 14px 18px;
  background: var(--bg3);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}
.estimator__result {
  margin-top: 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--bg3), var(--bg));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  text-align: center;
}
.estimator__result-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.estimator__result-price {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
  font-weight: 600;
}
.estimator__result-dash {
  color: var(--text-faint);
  margin: 0 8px;
  font-weight: 400;
}
.estimator__result-note {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 22px;
}
.estimator__result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .estimator { padding: 24px; }
  .estimator__option { padding: 10px 14px; font-size: 13px; }
}