/* Mr. Wash — shared site styles (extracted from index.html on 2026-09-15). Edit here, not in the pages. */
/* ── FONTS (self-hosted 2026-10-06: same Google families and weights, latin subset, SIL OFL; no third-party CSS request) ── */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/cinzel-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/assets/fonts/raleway-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-italic-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/great-vibes-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

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

:root {
  /* Light theme (2026-09-17). Token names are kept from the dark build so the markup
     did not have to change: --black is now the page surface, --white the text colour. */
  --black:       #FFFFFF;
  --dark:        #ECEEF1;
  --card:        #FFFFFF;
  --card-hover:  #F7F8FA;
  /* alternate section surface: light grey that fades from/into the white neighbours (no divider lines) */
  --section-alt: linear-gradient(180deg, var(--black) 0, var(--dark) 80px, var(--dark) calc(100% - 80px), var(--black) 100%);
  --gold:        #A8862A;
  --gold-light:  #C9A84C;
  --gold-dark:   #7A5E14;
  /* small gold text on white / light grey: #7D6017 = 5.9:1 / 5.1:1 (WCAG AA). --gold stays for borders, icons and large type */
  --gold-text:   #7D6017;
  --silver-dark: #4A4E54;
  --silver:      #4B5058;
  --silver-light:#2A2D32;
  --white:       #16171A;
  --muted:       #555A62;
  --border:      rgba(168,134,42,0.28);
  --card-shadow: 0 6px 24px rgba(30,30,40,0.07);
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── MOBILE SAFARI TAP FIX ──
   Ensures buttons, anchors, and onclick-bearing elements respond
   reliably on iOS Safari. Fixes three common issues:
   1. 300 ms tap delay → touch-action: manipulation
   2. Gray flash on tap → -webkit-tap-highlight-color
   3. onClick not firing on non-button elements → cursor: pointer
*/
a, button, [onclick], [role="button"],
.option-card, .services-card, .faq-question,
.btn-primary, .btn-secondary, .btn-text, .nav-cta,
.modal-close, .btn-modal {
  -webkit-tap-highlight-color: rgba(201, 168, 76, 0.18);
  touch-action: manipulation;
}
/* Kill sticky :hover on touch devices — prevents hover state from
   "locking on" after a tap, which also makes the next tap fail on iOS. */
@media (hover: none) {
  .btn-primary:hover, .btn-secondary:hover, .btn-text:hover,
  .nav-cta:hover, .btn-modal:hover, .option-card:hover, .services-card:hover,
  .faq-question:hover {
    transform: none !important;
  }
}

/* ── UTILITIES ── */
.gold-text {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.silver-text {
  background: linear-gradient(135deg, #4E5259 0%, #9DA2A9 50%, #4E5259 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.divider {
  display: flex; align-items: center; gap: 16px; justify-content: center; margin: 14px auto 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; max-width: 100px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider-diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(4px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.reveal.visible {
  opacity: 1; transform: translateY(0); filter: blur(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; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 999;
  padding: 14px 64px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
nav.scrolled {
  padding: 12px 64px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  border-bottom-color: rgba(0,0,0,0.06);
}
/* Homepage: the crest lives in the hero — the bar's own logo only appears once the page is scrolled */
nav.nav-home { justify-content: space-between; }
nav.nav-home .nav-logo { opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
nav.nav-home.scrolled .nav-logo { opacity: 1; pointer-events: auto; }
nav.nav-home .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-logo-img {
  height: 68px; width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.nav-logo:hover .nav-logo-img {
  filter: drop-shadow(0 0 20px rgba(201,168,76,0.9));
  transform: scale(1.05);
}
.nav-logo-text { display: none; }
.nav-logo-text .name {
  font-family: 'Great Vibes', cursive; font-size: 1.45rem;
  color: var(--gold-text); line-height: 1;
}
.nav-logo-text .tagline {
  font-family: 'Cinzel', serif; font-size: 0.46rem;
  letter-spacing: 4px; color: var(--silver); text-transform: uppercase;
}
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  font-family: 'Cinzel', serif; font-size: 0.78rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.92); text-decoration: none;
  position: relative; padding-bottom: 4px;
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold-light);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover { color: #F0D080; }
.nav-links a:hover::after { width: 100%; }
nav.scrolled .nav-links a { color: rgba(22,23,26,0.88); }
nav.scrolled .nav-links a:hover { color: var(--gold-text); }
nav:not(.scrolled) .hamburger span { background: #F0D080; }
.nav-cta {
  font-family: 'Cinzel', serif; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: #3A1900;
  background:
    linear-gradient(180deg, rgba(255,236,170,0.18) 0%, rgba(255,236,170,0) 45%, rgba(60,30,0,0.14) 100%),
    linear-gradient(100deg, #C89636 0%, #D6A44F 12.5%, #E7B75A 25%, #E4B65A 37.5%, #D4A851 50%, #E7B75A 62.5%, #F0C46A 75%, #E4B65A 87.5%, #D4A851 100%);
  background-size: 100% 100%, 200% 100%;
  padding: 11px 20px; border: none; border-radius: 4px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 12px;
  transition: background-position 0.5s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s;
  box-shadow: 0 2px 20px rgba(201,168,76,0.25);
}
.nav-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-cta:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(201,168,76,0.5);
}

/* Mobile hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 4px; background: none; border: none;
}
.hamburger span {
  width: 26px; height: 1.5px;
  background: var(--gold);
  transition: all 0.35s var(--ease);
  display: block;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: rgba(255,255,255,0.98);
  flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  backdrop-filter: blur(20px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: 'Cinzel', serif; font-size: 1.1rem;
  letter-spacing: 5px; text-transform: uppercase;
  color: var(--silver); text-decoration: none;
  transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--gold-text); }

/* ── HERO ── */
#hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: 86px 24px 106px;
}

/* Video background */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-video.active { opacity: 1; }

/* Service pills — shows both services in hero */
.hero-services {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
  animation: heroRise 0.8s 0.8s var(--ease-out) both;
}
.hero-pill {
  font-family: 'Cinzel', serif; font-size: 0.86rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  padding: 16px 28px;
  border: 1.5px solid rgba(255,255,255,0.45); border-radius: 4px;
  color: rgba(245,242,236,0.95);
  background: rgba(10,8,4,0.32);
  transition: all 0.6s var(--ease);
  display: flex; align-items: center; gap: 12px;
}
.hero-pill.lit {
  border-color: #C6A552;
  color: #E4C883;
  background: rgba(201,168,76,0.10);
  box-shadow: 0 0 20px rgba(201,168,76,0.18);
}
.hero-pill svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Dark overlay — dims the video so text and logo stay crisp */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(8,8,8,0.54) 0%,
      rgba(8,8,8,0.50) 40%,
      rgba(8,8,8,0.66) 100%),
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(201,168,76,0.07) 0%, transparent 65%);
}

/* Subtle gold grid on top of video */
#hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  z-index: 2; pointer-events: none;
}

/* CSS shimmer fallback (shows when no video file is present) */
.hero-shimmer {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(135deg, #0a0a0a 0%, #141410 30%, #0a0a0a 60%, #111 100%);
  background-size: 400% 400%;
  animation: shimmerBg 12s ease infinite;
}
.hero-shimmer::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,0.08) 0%, transparent 70%);
  animation: glowShift 8s ease-in-out infinite;
}
@keyframes shimmerBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glowShift {
  0%,100% { opacity: 0.6; transform: scale(1) translateY(0); }
  50%      { opacity: 1;   transform: scale(1.1) translateY(-20px); }
}

.hero-content { position: relative; z-index: 3; max-width: 1040px; }

/* Logo */
.hero-logo-wrap {
  margin-bottom: 10px; position: relative;
  display: inline-block;
  animation: heroEntry 1s var(--ease-out) both;
}
.hero-logo-wrap::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,168,76,0.15) 0%, transparent 70%);
  animation: glowPulse 3.5s ease-in-out infinite;
  z-index: 0;
}
.hero-logo-wrap::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 230px; height: 230px; border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(201,168,76,0.55);
  border-right-color: rgba(201,168,76,0.2);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: rotateSlow 14s linear infinite;
  z-index: 0;
}
.hero-logo-wrap img {
  position: relative; z-index: 1; width: 260px; height: auto;
  filter:
    drop-shadow(0 0 28px rgba(201,168,76,0.55))
    drop-shadow(0 0 60px rgba(201,168,76,0.2))
    drop-shadow(0 12px 24px rgba(0,0,0,0.9));
  animation: floatLogo 7s ease-in-out infinite;
}
/* 2026-10-06: the hero must paint at the first frame (LCP: PSI returned NO_LCP when every hero element started at opacity 0).
   The logo now sharpens from a light blur and the hero text rises a few pixels; nothing starts invisible. */
@keyframes heroEntry {
  from { transform: scale(0.96); filter: blur(5px); }
  to   { transform: scale(1);    filter: blur(0); }
}
@keyframes heroRise {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}
@keyframes floatLogo {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes glowPulse {
  0%,100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.14); }
}
@keyframes rotateSlow {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

.hero-eyebrow {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
  font-family: 'Cinzel', serif; font-size: 0.84rem;
  letter-spacing: 4px; color: rgba(242,238,230,0.88); text-transform: uppercase;
  margin-bottom: 34px;
  animation: heroRise 0.8s 0.3s var(--ease-out) both;
}
/* thin rules flanking the eyebrow and between its two phrases */
.hero-eyebrow::before, .hero-eyebrow::after, .hero-eyebrow-sep {
  content: ''; display: block; height: 1px; width: 40px;
  background: rgba(214,195,150,0.7);
}
.hero-eyebrow-sep { width: 26px; }
.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.5rem, 4.3vw, 4.5rem);
  font-weight: 700; line-height: 1.11;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 16px;
  animation: heroRise 0.8s 0.5s var(--ease-out) both;
}
.hero-title .nowrap { white-space: nowrap; }
/* Metallic finish for the headline: champagne highlight on top → amber at the base; bright white-silver */
.hero-title .gold-text {
  background-image: linear-gradient(180deg,
    #C29A4E 18.6%, #D4A657 24%, #E0B76B 29.3%, #E9C173 34.7%, #F2CD7E 40%, #F4D288 45.4%,
    #F3D389 50.8%, #F0CD7E 56.1%, #E8C071 61.5%, #D6AC5B 66.8%, #C49A4C 72.2%);
}
.hero-title .silver-text {
  background-image: linear-gradient(180deg,
    #CFCDCB 18.6%, #C9C9C5 24%, #C2C0BD 29.3%, #C5C4C4 34.7%, #D1CFCC 40%, #E0DEDD 45.4%,
    #EAE8E7 50.8%, #E2DFDD 56.1%, #DEDDDA 61.5%, #D2CCCA 66.8%, #B9B4B1 72.2%);
}
.hero-title { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }
.hero-text-wrap {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-text-wrap.fading {
  opacity: 0;
  transform: translateY(10px);
}
.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.15rem, 1.65vw, 1.7rem);
  font-weight: 500; letter-spacing: 0.2px; line-height: 1.42;
  color: #EDE6D8;
  max-width: 780px; margin: 0 auto 40px;
  animation: heroRise 0.8s 0.7s var(--ease-out) both;
}
.hero-actions {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
  animation: heroRise 0.8s 0.9s var(--ease-out) both;
}
/* Hero buttons are the large variant */
.hero-actions .btn-primary, .hero-actions .btn-text, .hero-actions .btn-secondary {
  font-size: 1.02rem; letter-spacing: 2.5px;
  min-height: 66px; padding: 0 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
}
.hero-actions .btn-primary { min-width: 285px; }
.hero-actions .btn-text { min-width: 252px; }
.hero-actions .btn-text svg, .hero-actions .btn-primary svg { width: 20px; height: 20px; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.btn-primary {
  font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  touch-action: manipulation;
  color: #3A1900;
  background:
    linear-gradient(180deg, rgba(255,236,170,0.18) 0%, rgba(255,236,170,0) 45%, rgba(60,30,0,0.14) 100%),
    linear-gradient(100deg, #C89636 0%, #D6A44F 12.5%, #E7B75A 25%, #E4B65A 37.5%, #D4A851 50%, #E7B75A 62.5%, #F0C46A 75%, #E4B65A 87.5%, #D4A851 100%);
  background-size: 100% 100%, 200% 100%;
  padding: 15px 42px; border: none; border-radius: 4px; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background-position 0.55s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s;
  box-shadow: 0 4px 24px rgba(201,168,76,0.28);
}
.btn-primary:hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(201,168,76,0.52);
}
.btn-secondary {
  font-family: 'Cinzel', serif; font-size: 0.7rem;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-text); background: transparent;
  padding: 14px 42px;
  border: 1.5px solid rgba(201,168,76,0.45); border-radius: 4px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: all 0.35s var(--ease);
}
.btn-secondary:hover {
  border-color: var(--gold); color: var(--gold-dark);
  background: rgba(201,168,76,0.10);
  transform: translateY(-3px);
}
/* Outlined "ghost" button (Text Us) */
.btn-text {
  font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: #F2F2F2;
  background: rgba(10,8,4,0.28);
  padding: 14px 32px;
  border: 1.5px solid rgba(255,255,255,0.6); border-radius: 4px;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease), transform 0.3s var(--ease);
}
.btn-text:hover {
  border-color: #F0D080; color: #F0D080;
  background: rgba(201,168,76,0.08);
  transform: translateY(-3px);
}


/* ── SECTIONS ── */
section { padding: 120px 64px; }
.section-label {
  font-family: 'Cinzel', serif; font-size: 0.62rem;
  letter-spacing: 6px; color: var(--gold-text);
  text-transform: uppercase; text-align: center; margin-bottom: 14px;
}
.section-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.7rem, 2.8vw, 2.7rem);
  font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; text-align: center;
}
.section-sub {
  font-size: 0.95rem; font-weight: 400; color: var(--muted);
  text-align: center; letter-spacing: 0.8px; line-height: 1.8;
  margin: 20px auto 0; max-width: 540px;
}

/* ── STATS ── */
#stats {
  background: var(--black); /* white: Results (grey) follows directly now that the partner card is gone */
  padding: 40px 64px 44px;
}
.stats-services {
  display: flex;
  justify-content: center;
  margin: 0 auto 20px;
}
.stats-services .btn-secondary {
  min-width: 300px;
  text-align: center;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 860px; margin: 0 auto;
}
.stat-cell {
  background: transparent; text-align: center;
  padding: 18px 24px;
  transition: background 0.4s var(--ease);
}
.stat-cell + .stat-cell { border-left: 1px solid var(--border); }
.stat-cell:hover { background: rgba(255,255,255,0.7); }
.stat-num {
  font-family: 'Cinzel', serif; font-size: 2.4rem;
  font-weight: 900; line-height: 1; margin-bottom: 6px;
}
.stat-label {
  font-family: 'Cinzel', serif; font-size: 0.58rem;
  letter-spacing: 4px; text-transform: uppercase; color: var(--silver);
}

/* ── ABOUT ── (homepage "About Us" — matches the Sep 17 2026 mockup; measured at 1885px: 555px copy column, 1110px media column, 40px gap) */
#about {
  position: relative;
  padding: 86px clamp(24px, 4.8vw, 90px) 80px;
  background:
    radial-gradient(circle at 13% 46%, rgba(201,168,76,0.045), transparent 28%),
    radial-gradient(circle at 78% 55%, rgba(201,168,76,0.05), transparent 35%),
    #FFFFFF;
  overflow: hidden;
}
.about-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 555fr) minmax(600px, 1110fr);
  gap: 40px;
  align-items: start;
  max-width: 1705px;
  margin: 0 auto;
  z-index: 1;
}
.about-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 14px;
}
.about-eyebrow {
  display: flex; align-items: center; gap: 12px;
  max-width: 100%;
  margin-bottom: 20px;
  font-family: 'Cinzel', serif;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 3px; color: var(--silver);
  text-transform: uppercase;
  white-space: nowrap;
}
.about-eyebrow::before,
.about-eyebrow::after {
  content: '';
  flex: 0 1 30px; min-width: 0;
  width: 30px; height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.about-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 3.75vw, 4.4rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0 0 20px;
}
.about-title span { display: block; white-space: nowrap; }
.about-title span + span { font-size: 0.665em; margin-top: 0.1em; }
.about-desc {
  max-width: 500px;
  margin-bottom: 26px;
  color: var(--silver);
  font-size: 1.06rem;
  font-weight: 400;
  letter-spacing: 0.1px;
  line-height: 1.55;
}
.about-features {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
  max-width: 560px;
  margin: 0 0 30px;
  list-style: none;
}
.about-feature {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  column-gap: 28px;
  align-items: center;
}
.about-feature-icon {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  color: var(--gold-text);
  background: rgba(201,168,76,0.13);
  border: 1px solid rgba(168,134,42,0.22);
}
.about-feature-icon svg { width: 32px; height: 32px; }
.about-feature-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.about-feature-text strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.38rem; font-weight: 600;
  line-height: 1.1;
  color: var(--white);
}
.about-feature-text span {
  font-size: 0.92rem; font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}
.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: min(100%, 390px);
  min-height: 55px;
  padding: 0 24px;
  border: 0; border-radius: 6px;
  cursor: pointer;
  color: #FFFFFF;
  background: linear-gradient(100deg, #8A6C1C 0%, var(--gold) 55%, #B8963A 100%);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(122,94,20,0.22);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
}
.about-cta svg { width: 28px; height: 13px; flex: 0 0 auto; transition: transform 0.3s var(--ease); }
.about-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(122,94,20,0.3);
}
.about-cta:hover svg { transform: translateX(5px); }
.about-more {
  display: inline-block;
  min-width: 215px;
  margin-top: 26px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--gold);
  color: var(--gold-text);
  font-family: 'Cinzel', serif;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.about-more:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

/* Media column */
.about-media { min-width: 0; }
.about-photo-grid {
  display: grid;
  grid-template-columns: 560fr 537fr;
  gap: 13px;
  width: 100%;
}
.about-photo-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 12px 34px rgba(40,30,10,0.16);
  aspect-ratio: 560 / 617;
  transform: translateZ(0); /* keeps the rounded corners clipping the slider layers in Safari */
}
.about-photo-static { aspect-ratio: 537 / 617; }
.about-photo-card > img, .about-photo-card > picture > img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.about-photo-card:hover > img, .about-photo-card:hover > picture > img { transform: scale(1.03); }
.about-photo-static::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.32) 100%);
}

/* Before/after slider — same [data-ba] script as the portfolio cards, white handle like the mockup */
.about-slider { cursor: ew-resize; user-select: none; touch-action: pan-y; }
.about-slider .ba-handle-line {
  width: 2px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 8px rgba(0,0,0,0.28);
}
.about-slider .ba-handle-btn {
  width: 44px; height: 44px;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.about-slider .ba-handle-btn svg { width: 12px; height: 12px; color: #16171A; }
.about-ba-tag {
  position: absolute; bottom: 42px; z-index: 6;
  min-width: 130px;
  padding: 10px 22px 9px;
  border-radius: 999px;
  transform: translateX(-50%);
  color: #FFFFFF;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 3px; line-height: 1;
  text-align: center; text-transform: uppercase;
  pointer-events: none;
}
.about-ba-tag.before { left: 22.5%; background: rgba(50,44,38,0.86); }
.about-ba-tag.after  { left: 77.5%; background: var(--gold-text); }

/* Caption on the equipment photo */
.about-photo-caption {
  position: absolute; z-index: 3;
  right: 18px; bottom: 20px;
  color: #FFFFFF;
  font-family: 'Cinzel', serif;
  font-size: 0.66rem; font-weight: 400;
  letter-spacing: 2.5px; line-height: 1.7;
  text-align: right; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* Stats bar */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 97px;
  margin-top: 26px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(168,134,42,0.14);
  box-shadow: 0 10px 30px rgba(40,30,10,0.08);
}
.about-stat {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  min-width: 0;
  padding: 16px 14px;
}
.about-stat + .about-stat::before {
  content: '';
  position: absolute; left: 0; top: 25px; bottom: 25px;
  width: 1px;
  background: rgba(168,134,42,0.35);
}
.about-stat > svg { width: 34px; height: 34px; flex: 0 0 auto; color: var(--gold-text); }
.about-stat-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.about-stat-copy strong {
  font-family: 'Cinzel', serif;
  font-size: 0.98rem; font-weight: 700;
  letter-spacing: 0.8px; line-height: 1;
  color: var(--white);
  white-space: nowrap;
}
.about-stat-copy span {
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 1.8px; line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* About — responsive */
@media (max-width: 1500px) {
  .about-eyebrow { font-size: 0.58rem; letter-spacing: 2.4px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stat { justify-content: flex-start; padding: 16px 28px; }
  .about-stat:nth-child(odd)::before { display: none; }
  .about-stat:nth-child(n + 3)::after {
    content: '';
    position: absolute; left: 24px; right: 24px; top: 0;
    height: 1px;
    background: rgba(168,134,42,0.3);
  }
}
@media (max-width: 1180px) {
  .about-showcase { grid-template-columns: minmax(300px, 555fr) minmax(480px, 1110fr); gap: 32px; }
  .about-eyebrow { font-size: 0.54rem; letter-spacing: 1.8px; }
  .about-desc { font-size: 0.98rem; }
  .about-feature { grid-template-columns: 58px minmax(0, 1fr); column-gap: 20px; }
  .about-feature-icon { width: 58px; height: 58px; }
  .about-feature-icon svg { width: 26px; height: 26px; }
  .about-feature-text strong { font-size: 1.25rem; }
  .about-feature-text span { font-size: 0.86rem; }
  .about-ba-tag { min-width: 104px; padding: 8px 16px 7px; font-size: 0.6rem; }
}
@media (max-width: 980px) {
  #about { padding: 76px 32px 68px; }
  .about-showcase { grid-template-columns: 1fr; gap: 48px; max-width: 760px; }
  .about-copy { align-items: center; text-align: center; padding-top: 0; }
  .about-eyebrow { font-size: 0.6rem; letter-spacing: 2.6px; }
  .about-title { font-size: clamp(2.3rem, 6.6vw, 3.6rem); }
  .about-desc { max-width: 620px; }
  .about-features { max-width: 520px; text-align: left; }
  .about-cta { width: min(100%, 420px); }
}
@media (max-width: 540px) {
  #about { padding: 64px 20px 58px; }
  .about-showcase { gap: 40px; }
  .about-eyebrow { font-size: 0.54rem; letter-spacing: 2px; white-space: normal; text-align: center; }
  .about-eyebrow::before, .about-eyebrow::after { display: none; }
  .about-title { font-size: clamp(1.9rem, 9.4vw, 2.5rem); line-height: 1.06; }
  .about-title span { white-space: normal; }
  .about-desc { font-size: 0.94rem; line-height: 1.6; margin-bottom: 24px; }
  .about-features { gap: 14px; margin-bottom: 26px; }
  .about-feature { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .about-feature-icon { width: 52px; height: 52px; }
  .about-feature-icon svg { width: 24px; height: 24px; }
  .about-feature-text strong { font-size: 1.15rem; }
  .about-feature-text span { font-size: 0.82rem; }
  .about-cta { min-height: 52px; gap: 18px; font-size: 0.72rem; letter-spacing: 3px; }
  .about-more { margin-top: 22px; font-size: 0.6rem; }
  .about-photo-grid { grid-template-columns: 1fr; gap: 12px; }
  .about-photo-card { border-radius: 10px; aspect-ratio: 1 / 1; }
  .about-photo-static { aspect-ratio: 4 / 3; }
  .about-ba-tag { bottom: 18px; min-width: 88px; padding: 7px 12px 6px; font-size: 0.55rem; letter-spacing: 2px; }
  .about-photo-caption { right: 14px; bottom: 14px; font-size: 0.56rem; letter-spacing: 2px; }
  .about-stats { grid-template-columns: 1fr; margin-top: 14px; }
  .about-stat { justify-content: flex-start; min-height: 66px; padding: 12px 18px; gap: 14px; }
  .about-stat::before { display: none; }
  .about-stat + .about-stat::after {
    content: '';
    position: absolute; left: 18px; right: 18px; top: 0;
    height: 1px;
    background: rgba(168,134,42,0.3);
  }
  .about-stat > svg { width: 30px; height: 30px; }
  .about-stat-copy strong { font-size: 0.88rem; }
  .about-stat-copy span { font-size: 0.6rem; letter-spacing: 1.5px; }
}

/* ── SERVICES ── (homepage "Our Services" — matches the Sep 17 2026 mockup) */
#services.services-section {
  --svc-gold: #A8862A;
  --svc-gold-bright: #E9C45E;
  position: relative;
  padding: 96px 32px 104px;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,168,76,0.07), transparent 70%), var(--section-alt);
  overflow: hidden;
}
.services-head { position: relative; max-width: 1600px; margin: 0 auto; text-align: center; }

/* Side accents — "Cleaner homes, brighter spaces" / "More than clean" */
.services-aside {
  display: none; /* decorative side text retired 2026-09-17 (too busy) */
  position: absolute; top: 53px;
  flex-direction: column;
  font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 400;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--silver-light); line-height: 1.6;
}
.services-aside-left  { left: 75px;  align-items: flex-start; text-align: left; }
.services-aside-right { right: 26px; align-items: center; text-align: center; top: 51px; }
.services-aside span { display: block; padding: 2px 0; }
.services-aside-line { display: block; width: 50px; height: 1px; margin-top: 16px; background: linear-gradient(90deg, var(--svc-gold), rgba(222,190,88,0.2)); }
.services-aside-right .services-aside-line { margin: 14px auto 12px; background: linear-gradient(90deg, rgba(222,190,88,0.2), var(--svc-gold), rgba(222,190,88,0.2)); }
.services-aside em {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 1.65rem; letter-spacing: 0; text-transform: none; line-height: 1;
  color: var(--silver-light);
}

/* Heading stack */
.services-label {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  font-family: 'Cinzel', serif; font-size: 1.02rem; letter-spacing: 5px;
  text-transform: uppercase; color: var(--svc-gold); margin-bottom: 9px;
}
.services-label::before, .services-label::after {
  content: ''; width: 68px; height: 1px;
  background: linear-gradient(90deg, rgba(222,190,88,0), var(--svc-gold));
}
.services-label::after { background: linear-gradient(90deg, var(--svc-gold), rgba(222,190,88,0)); }
.services-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 4.1vw, 4.3rem);
  font-weight: 700; letter-spacing: 1.5px; line-height: 1.05;
  text-transform: uppercase;
}
.services-diamond { width: 8px; height: 8px; background: var(--svc-gold); transform: rotate(45deg); margin: 1px auto 0; }
.services-sub {
  font-size: 1.06rem; font-weight: 400; color: #2E3136;
  line-height: 1.42; letter-spacing: 0.2px;
  max-width: 600px; margin: 9px auto 0;
}
.services-serving {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 3.7px;
  text-transform: uppercase; color: var(--svc-gold); margin-top: 8px;
}
.services-serving svg { width: 15px; height: 19px; flex-shrink: 0; }

/* Cards */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px;
  max-width: 1608px; margin: 16px auto 0;
}
.services-card {
  position: relative; display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(168,134,42,0.30);
  box-shadow: var(--card-shadow);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.services-card:hover {
  border-color: rgba(201,168,76,0.62);
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(40,30,10,0.16);
}
.services-media { position: relative; aspect-ratio: 2.15 / 1; overflow: hidden; background: #E6E8EC; }
.services-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block;
  transition: transform 0.9s var(--ease);
}
.services-card:hover .services-media img { transform: scale(1.04); }
/* faint top shade so the gold number reads on light photos */
.services-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 42%); pointer-events: none; }
.services-num {
  position: absolute; top: 22px; left: 24px; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 400; letter-spacing: 1px;
  color: var(--svc-gold-bright); text-shadow: 0 1px 10px rgba(0,0,0,0.65);
}
.services-num::after { content: ''; width: 40px; height: 1px; background: var(--svc-gold-bright); box-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.services-body { flex: 1; display: flex; flex-direction: column; padding: 24px 22px 22px; }
.services-heading { display: flex; align-items: center; gap: 22px; margin-bottom: 16px; }
.services-icon { width: 56px; height: 56px; flex-shrink: 0; filter: drop-shadow(0 0 5px rgba(201,168,76,0.3)); transition: filter 0.4s var(--ease); }
.services-card:hover .services-icon { filter: drop-shadow(0 0 14px rgba(201,168,76,0.7)); }
.services-name {
  font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 400;
  letter-spacing: 0; text-transform: uppercase; line-height: 1.12; margin-bottom: 5px;
}
.services-tag { display: none; }
.services-tag-unused {
  font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 0.66rem; letter-spacing: 3.7px;
  text-transform: uppercase; color: #6B6E73; line-height: 1.7;
}
.services-desc { font-size: 1.02rem; font-weight: 400; color: #2A2D32; line-height: 1.55; margin-bottom: 20px; }
.services-list {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 14px; margin-bottom: 24px;
}
.services-list li { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; font-weight: 500; color: #1F2226; }
.services-list li::before {
  content: ''; flex-shrink: 0; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8862A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.services-actions { margin-top: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.services-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 255px;
  padding: 15px 20px; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 0.76rem; letter-spacing: 2px; color: #1c1300; white-space: nowrap;
  box-shadow: none;
}
.services-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.services-more {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--silver-light); text-decoration: none;
  transition: color 0.3s var(--ease);
}
/* The line keeps its full 54px in layout and grows via transform — animating width made the link
   wrap to a new line mid-hover (widest card), which dropped the hover and flickered. */
.services-more::before { content: ''; width: 40px; height: 1px; background: var(--svc-gold); opacity: 0.85; transform: scaleX(0.8); transform-origin: left center; transition: transform 0.3s var(--ease); }
.services-more:hover { color: var(--gold-text); }
.services-more:hover::before { transform: scaleX(1); }

/* Responsive */
@media (max-width: 1240px) {
  .services-aside { display: none; }
}
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: 1fr; max-width: 640px; gap: 24px; }
}
@media (max-width: 960px) {
  #services.services-section { padding: 80px 24px 88px; }
  .services-title { font-size: clamp(2rem, 7vw, 3rem); }
  .services-sub { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  #services.services-section { padding: 68px 18px 76px; }
  .services-label { font-size: 0.8rem; letter-spacing: 4px; gap: 12px; }
  .services-label::before, .services-label::after { width: 36px; }
  .services-sub { font-size: 0.98rem; }
  .services-serving { display: block; font-size: 0.66rem; letter-spacing: 3px; line-height: 1.9; padding: 0 8px; }
  .services-serving svg { display: inline-block; vertical-align: -4px; margin-right: 8px; }
  .services-body { padding: 22px 18px 20px; }
  .services-heading { gap: 14px; }
  .services-icon { width: 42px; height: 42px; }
  .services-name { font-size: 1.45rem; }
  .services-tag { font-size: 0.62rem; letter-spacing: 2.6px; }
  .services-list { grid-template-columns: 1fr; gap: 10px; }
  .services-actions { gap: 18px; }
  .services-btn { width: 100%; min-width: 0; justify-content: center; }
}

/* Service-page feature lists (still used by /carpet-cleaning/ etc.) */
.service-features { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.service-features li {
  font-size: 0.8rem; font-weight: 400; color: var(--silver);
  display: flex; align-items: center; gap: 12px;
}
.service-features li::before {
  content: ''; width: 18px; height: 1px;
  background: var(--gold); flex-shrink: 0;
}

/* ── AUSTIN STRIP ── */
.austin-strip {
  background: transparent;
  padding: 36px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.austin-pin {
  width: 28px; height: 28px; flex-shrink: 0;
}
.austin-text {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.9rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align: center;
}
.austin-divider {
  width: 1px; height: 28px;
  background: rgba(201,168,76,0.3);
}
.austin-phone {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.9rem, 2.2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--gold-text);
  text-decoration: none;
  transition: text-shadow 0.3s;
}
.austin-phone:hover { text-shadow: 0 0 20px rgba(201,168,76,0.6); }

/* ── PROCESS ── */
#process { background: var(--section-alt); }
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1140px; margin: 64px auto 0;
}
.process-step {
  background: #FFFFFF; padding: 40px 28px;
  border: 1px solid var(--border); box-shadow: var(--card-shadow);
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.process-step:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(30,30,40,0.12); }
.process-step-num {
  font-family: 'Cinzel', serif; font-size: 4.5rem;
  font-weight: 900; line-height: 1;
  color: rgba(168,134,42,0.16);
  position: absolute; top: 16px; right: 20px;
  transition: color 0.4s var(--ease);
}
.process-step:hover .process-step-num { color: rgba(168,134,42,0.28); }
/* ── SVG ICONS ── */
.card-icon {
  width: 46px; height: 46px; margin-bottom: 22px; display: block;
  filter: drop-shadow(0 0 5px rgba(201,168,76,0.3));
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.process-step:hover .card-icon { filter: drop-shadow(0 0 14px rgba(201,168,76,0.7)); }
.space-icon {
  width: 96px; height: 48px; margin: 0 auto 22px; display: block;
  filter: drop-shadow(0 0 5px rgba(201,168,76,0.3));
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.space-card:hover .space-icon {
  filter: drop-shadow(0 0 14px rgba(201,168,76,0.7));
  transform: scale(1.1) translateY(-2px);
}
.why-icon-svg {
  width: 32px; height: 32px;
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.2));
}
.process-icon { font-size: 1.8rem; margin-bottom: 20px; display: block; }
.process-title {
  font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--white); margin-bottom: 14px;
}
.process-desc {
  font-size: 0.9rem; font-weight: 400; color: var(--muted);
  line-height: 1.75;
}
/* connector line between steps (cards are separate now) */
.process-step:not(:last-child)::after {
  display: none;
  content: ''; position: absolute;
  top: 50%; right: -1px;
  width: 1px; height: 40%;
  transform: translateY(-50%);
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

/* ── SPACES WE CARE FOR ── */
.spaces-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; max-width: 900px; margin: 64px auto 0;
}
.space-card {
  border: 1px solid var(--border); padding: 40px 28px 36px;
  text-align: center; position: relative; overflow: hidden;
  background: var(--dark);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s;
}
.space-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(201,168,76,0.08), transparent 65%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.space-card:hover { border-color: rgba(168,134,42,0.6); transform: translateY(-6px); box-shadow: var(--card-shadow); }
.space-card:hover::before { opacity: 1; }
.space-name {
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--silver-light);
}
.space-desc { font-size: 0.9rem; font-weight: 400; color: var(--muted); line-height: 1.7; margin-top: 12px; }

/* ── WHY US ── */
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1140px; margin: 64px auto 0;
}
.why-item {
  background: #FFFFFF; padding: 40px 28px; text-align: center;
  border: 1px solid var(--border); box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.why-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(30,30,40,0.12); }
.why-icon-wrap {
  width: 70px; height: 70px;
  border: 1px solid rgba(201,168,76,0.25);
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; position: relative;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s;
}
.why-icon-wrap::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(201,168,76,0.08);
}
.why-item:hover .why-icon-wrap {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(201,168,76,0.2);
}
.why-title {
  font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--white); margin-bottom: 12px;
}
.why-desc { font-size: 0.9rem; font-weight: 400; color: var(--muted); line-height: 1.75; }

/* ── TESTIMONIALS ── */
#testimonials { background: var(--black); }
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; max-width: 1140px; margin: 70px auto 0;
}
.testimonial-card {
  background: var(--card); padding: 44px 38px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s, transform 0.4s var(--ease);
}
.testimonial-card:hover {
  border-bottom-color: var(--gold);
  background: var(--card-hover);
  transform: translateY(-4px);
}
.stars { color: var(--gold-text); font-size: 0.75rem; letter-spacing: 4px; margin-bottom: 18px; }
.quote-mark {
  font-family: 'Great Vibes', cursive; font-size: 4.5rem;
  color: rgba(201,168,76,0.12); line-height: 0.5;
  margin-bottom: 18px; display: block;
}
.testimonial-text {
  font-size: 0.88rem; font-weight: 300; color: var(--silver);
  line-height: 1.9; margin-bottom: 26px;
}
.testimonial-author {
  font-family: 'Cinzel', serif; font-size: 0.68rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold-text);
}

/* ── BEFORE / AFTER ── */
#portfolio { background: var(--black); padding: 100px 5%; }
.ba-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 20px; max-width: 1140px; margin: 60px auto 0;
}
.ba-card { border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--card); box-shadow: var(--card-shadow); }
.ba-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; cursor: ew-resize; user-select: none;
}
.ba-before, .ba-after { position: absolute; inset: 0; }
.ba-before img, .ba-after img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before img { filter: none; }
.ba-after { clip-path: inset(0 0 0 50%); transition: clip-path 0s; }
.ba-handle {
  position: absolute; top: 0; left: 50%;
  height: 100%; width: 44px;
  transform: translateX(-50%);
  z-index: 10; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ba-handle-line {
  position: absolute; left: 50%; top: 0;
  width: 2px; height: 100%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(201,168,76,0.5);
}
.ba-handle-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 0 24px rgba(201,168,76,0.7);
}
.ba-handle-btn svg { width: 13px; height: 13px; color: #16171A; }
.ba-tag {
  position: absolute; top: 12px; z-index: 6;
  font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 3px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px;
}
.ba-tag.before { left: 12px; background: rgba(0,0,0,0.65); color: #B0B3B8; border: 1px solid rgba(255,255,255,0.08); }
.ba-tag.after  { right: 12px; background: rgba(0,0,0,0.65); color: #E4C883; border: 1px solid rgba(201,168,76,0.3); }
.ba-caption {
  padding: 14px 18px; font-family: 'Cinzel', serif; font-size: 0.6rem;
  letter-spacing: 2px; color: var(--muted); text-transform: uppercase;
  border-top: 1px solid var(--border);
}
/* Static showcase card — same shell as .ba-card but no slider */
.showcase-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
}
.showcase-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.showcase-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.ba-card:hover .showcase-wrap img { transform: scale(1.04); }
.ba-card { transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.ba-card:hover { border-color: rgba(168,134,42,0.45); box-shadow: 0 10px 40px rgba(40,30,10,0.16); }
@media (max-width: 768px) { .ba-grid { grid-template-columns: 1fr; } }

/* Slide hint — when a slider first scrolls into view (JS adds .ba-hint) the handle gives one gentle nudge and a
   "Slide to compare" label fades in under it; removing the class (5 s later, or on the first touch) fades it out. */
.ba-hint-label {
  position: absolute; left: 50%; top: calc(50% + 34px);
  transform: translateX(-50%);
  padding: 7px 14px 6px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  background: rgba(22,20,16,0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-family: 'Cinzel', serif; font-size: 0.52rem; font-weight: 600;
  letter-spacing: 2.5px; line-height: 1; white-space: nowrap; text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.ba-hint .ba-hint-label { opacity: 1; }
@keyframes ba-nudge-clip   { 0%, 100% { clip-path: inset(0 0 0 50%); } 30% { clip-path: inset(0 0 0 45%); } 70% { clip-path: inset(0 0 0 55%); } }
@keyframes ba-nudge-handle { 0%, 100% { left: 50%; }                  30% { left: 45%; }                  70% { left: 55%; } }
.ba-hint .ba-after  { animation: ba-nudge-clip   1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.3s 1; }
.ba-hint .ba-handle { animation: ba-nudge-handle 1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.3s 1; }
@media (prefers-reduced-motion: reduce) { .ba-hint .ba-after, .ba-hint .ba-handle { animation: none; } }

/* ── CTA ── */
/* ── DARK BAND ── charcoal + gold glow, used as a contrast divider (Areas, Why Us, CTA).
   Tokens are re-scoped here so anything inside that reads var(--gold), var(--muted), var(--border)…
   — including inline styles — switches to the light-on-dark palette without per-element rules. */
.section-dark {
  --gold:        #E4C883;
  --gold-light:  #F0D080;
  --gold-dark:   #C9A84C;
  --gold-text:   #E4C883;
  --white:       #F2F2F2;
  --muted:       rgba(255,255,255,0.70);
  --silver:      rgba(255,255,255,0.72);
  --silver-light:rgba(255,255,255,0.88);
  --border:      rgba(201,168,76,0.30);
  --dark:        rgba(255,255,255,0.06);
  --card:        rgba(255,255,255,0.05);
  --card-hover:  rgba(255,255,255,0.09);
  --card-shadow: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201,168,76,0.12) 0%, transparent 70%),
    linear-gradient(135deg, rgba(201,168,76,0.06) 0%, transparent 50%, rgba(201,168,76,0.06) 100%),
    #1A1B1F;
  color: var(--white);
}
.section-dark .gold-text {
  background-image: linear-gradient(180deg, #C29A4E 18.6%, #E0B76B 29.3%, #F2CD7E 40%, #F4D288 45.4%, #F3D389 50.8%, #E8C071 61.5%, #C49A4C 72.2%);
}
.section-dark .silver-text {
  background-image: linear-gradient(180deg, #CFCDCB 18.6%, #C2C0BD 29.3%, #D1CFCC 40%, #EAE8E7 50.8%, #DEDDDA 61.5%, #B9B4B1 72.2%);
}
/* Why Us cards on the band: glass instead of white */
.section-dark .why-item { background: rgba(255,255,255,0.05); }
.section-dark .why-item:hover { background: rgba(255,255,255,0.08); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.section-dark .why-icon-wrap { border-color: rgba(201,168,76,0.45); }
/* Areas chips on the band */
.section-dark .areas-list li:hover { background: rgba(201,168,76,0.12); }
#cta { text-align: center; }
.cta-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.9rem, 3.5vw, 3.4rem);
  font-weight: 900; letter-spacing: 4px;
  text-transform: uppercase; margin-bottom: 14px;
}
.cta-sub {
  font-size: 0.88rem; font-weight: 300;
  color: var(--silver); letter-spacing: 2px; margin-bottom: 46px;
}
.cta-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
footer {
  background: #0F1012;
  padding: 72px 64px 44px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px; margin-bottom: 56px;
}
.footer-logo-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.footer-logo-img {
  height: 56px; width: auto;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
}
.footer-logo-text .name {
  font-family: 'Great Vibes', cursive; font-size: 1.6rem;
  color: #E4C883; line-height: 1;
}
.footer-logo-text .tagline {
  font-family: 'Cinzel', serif; font-size: 0.46rem;
  letter-spacing: 4px; color: rgba(255,255,255,0.6); text-transform: uppercase;
}
.footer-tagline {
  font-size: 0.86rem; font-weight: 300; color: rgba(255,255,255,0.68);
  line-height: 1.85; max-width: 300px;
}
.footer-col-title {
  font-family: 'Cinzel', serif; font-size: 0.62rem;
  letter-spacing: 4px; text-transform: uppercase;
  color: #C9A84C; margin-bottom: 24px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 13px; }
.footer-links li { font-size: 0.86rem; font-weight: 300; color: rgba(255,255,255,0.68); letter-spacing: 0.4px; }
.footer-links a {
  font-size: 0.86rem; font-weight: 300; color: rgba(255,255,255,0.68);
  text-decoration: none; letter-spacing: 0.4px;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.footer-links a:hover { color: #F0D080; padding-left: 6px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-copy {
  font-size: 0.72rem; font-weight: 300; color: rgba(255,255,255,0.5); letter-spacing: 1px;
}
.footer-gold-line {
  width: 52px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  nav { padding: 14px 24px; }
  nav.scrolled { padding: 12px 24px; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; } /* display, but pointer-events:none until .open */

  section { padding: 88px 28px; }
  #stats { padding: 36px 28px 40px; }
  .stats-services .btn-secondary { min-width: min(300px, 100%); }

  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .spaces-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 1fr; gap: 44px; }
  footer { padding: 60px 28px 40px; }
}
@media (max-width: 540px) {
  .process-steps { grid-template-columns: 1fr; }
  .spaces-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-cell + .stat-cell { border-left: 0; border-top: 1px solid var(--border); }
  .why-grid { grid-template-columns: 1fr; }
  .austin-strip { padding: 28px 24px; gap: 14px; }
}

/* ── LOCATION BADGE (hero) ── */
.hero-location-big {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 20px;
  animation: heroRise 0.8s 0.25s var(--ease-out) both;
}
.hero-location-big svg { width: 16px; height: 20px; flex-shrink: 0; }
.hero-location-big span {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  letter-spacing: 4px; text-transform: uppercase; color: #E2C78F;
}
.hero-location-dot {
  width: 4px; height: 4px; background: var(--gold);
  border-radius: 50%; opacity: 0.6;
}

/* ── GALLERY ── */
#gallery { background: var(--black); padding: 88px 0 88px 64px; overflow: hidden; }
.gallery-header { padding-right: 64px; }
.gallery-wrap { position: relative; margin-top: 48px; }
.gallery-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-right: 64px; padding-bottom: 12px;
  scroll-behavior: smooth;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-card {
  flex: 0 0 340px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
}
.gallery-img {
  width: 100%; height: 240px; overflow: hidden; position: relative;
  background: var(--card);
}
.gallery-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(0px);
  transition: transform 0.6s var(--ease), filter 0.4s;
}
.gallery-card:hover .gallery-img img { transform: scale(1.06); }
.gallery-placeholder {
  width: 100%; height: 240px;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  border: 1px dashed rgba(201,168,76,0.2);
  transition: border-color 0.3s;
}
.gallery-card:hover .gallery-placeholder { border-color: rgba(201,168,76,0.5); }
.gallery-placeholder svg { width: 36px; height: 36px; opacity: 0.35; }
.gallery-placeholder span {
  font-family: 'Cinzel', serif; font-size: 0.58rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
}
.gallery-label {
  font-family: 'Cinzel', serif; font-size: 0.62rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--silver);
}
.gallery-tag {
  font-size: 0.75rem; font-weight: 300; color: var(--muted);
}
.gallery-nav {
  display: flex; gap: 12px; margin-top: 32px; padding-right: 64px; justify-content: flex-end;
}
.gallery-btn {
  width: 48px; height: 48px; border: 1px solid rgba(201,168,76,0.3);
  background: transparent; color: var(--gold-text); cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
}
.gallery-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.08); }

/* ── FAQ ── */
#faq { background: var(--section-alt); }
.faq-list { max-width: 820px; margin: 60px auto 0; display: flex; flex-direction: column; gap: 2px; }
.faq-item { background: var(--card); overflow: hidden; }
.faq-question {
  width: 100%; padding: 26px 32px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left;
}
.faq-q-text {
  font-family: 'Cinzel', serif; font-size: 0.82rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--white); transition: color 0.3s;
}
.faq-question:hover .faq-q-text { color: var(--gold-text); }
.faq-icon {
  width: 24px; height: 24px; border: 1px solid rgba(201,168,76,0.3);
  flex-shrink: 0; position: relative; transition: border-color 0.3s, transform 0.4s var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute;
  background: var(--gold); border-radius: 1px;
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 10px; }
.faq-item.open .faq-icon { border-color: var(--gold); transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.45s var(--ease), padding 0.3s;
  padding: 0 32px;
}
.faq-item.open .faq-answer { max-height: 640px; padding: 0 32px 26px; }
.faq-answer p {
  font-size: 0.92rem; font-weight: 400; color: var(--muted);
  line-height: 1.85; border-left: 2px solid rgba(201,168,76,0.3);
  padding-left: 16px;
}

/* ── BOOKING MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(24,20,12,0.6); backdrop-filter: blur(12px);
  align-items: flex-start; justify-content: center;
  padding: 16px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--dark); border: 1px solid var(--border);
  width: 100%; max-width: 640px;
  margin: auto;
  position: relative; animation: fadeUp 0.4s var(--ease-out);
}
.modal-header {
  padding: 32px 36px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.modal-title {
  font-family: 'Cinzel', serif; font-size: 1rem;
  letter-spacing: 3px; text-transform: uppercase;
}
.modal-subtitle {
  font-size: 0.78rem; font-weight: 300; color: var(--muted);
  letter-spacing: 1px; margin-top: 4px;
}
.modal-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0; transition: color 0.3s;
}
.modal-close:hover { color: var(--gold-text); }
.modal-body { padding: 32px 36px; }
.modal-footer {
  padding: 24px 36px 32px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}

/* Sweeper booking widget inside the quote window (2026-10-08, replaced the 3-step wizard; quote-wizard.js) */
.modal.modal-booking { max-width: 960px; }
.booking-frame-wrap { position: relative; background: #fff; }
.booking-frame-wrap iframe {
  position: relative; display: block; width: 100%; border: 0; background: transparent;
  height: calc(100vh - 220px); height: min(820px, calc(100dvh - 220px)); min-height: 480px;
}
.booking-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; letter-spacing: 1px; color: var(--muted);
}
.booking-frame-wrap.is-loaded .booking-loading { display: none; }
.booking-help {
  margin: 0; padding: 14px 36px 20px; border-top: 1px solid var(--border);
  font-size: 0.78rem; line-height: 1.6; color: var(--muted);
}
.booking-help a { color: var(--gold-text); }
@media (max-width: 540px) {
  /* Phones: the window fills the screen and only the widget scrolls */
  #bookingModal { padding: 0; overflow: hidden; }
  .modal.modal-booking { height: 100vh; height: 100dvh; margin: 0; border: 0; display: flex; flex-direction: column; }
  .modal-booking .booking-frame-wrap { flex: 1; min-height: 0; }
  .modal-booking .booking-frame-wrap iframe { height: 100%; min-height: 0; }
  .booking-help { padding: 12px 20px 16px; }
}
/* /book/ page: the same widget inline (tools/build-book-page.mjs) */
.book-page { padding: 130px 24px 72px; }
.book-intro { max-width: 960px; margin: 0 auto 28px; text-align: center; }
.book-frame { max-width: 960px; margin: 0 auto; border: 1px solid var(--border); scroll-margin-top: 90px; }
.book-frame iframe { height: 820px; height: min(820px, calc(100dvh - 110px)); min-height: 560px; }
.book-help { max-width: 960px; margin: 0 auto; border: 1px solid var(--border); border-top: 0; }
.book-head { display: none; }
/* Phones (same breakpoint as the phone contact bar): /book/ looks exactly like the phone quote window on the other
   pages (João 2026-10-08): full screen, the quote-window header with × (→ homepage), the widget at full width filling
   the rest, the help line at the bottom. The page itself never scrolls, only the widget. Nav, intro, footer and phone
   bar are hidden here. */
@media (max-width: 640px) {
  body.book-body { overflow: hidden; padding-bottom: 0; }
  .book-body #navbar, .book-body footer, .book-body .book-intro { display: none; }
  .book-body .book-page { position: fixed; inset: 0; padding: 0; background: var(--dark); display: flex; flex-direction: column; }
  .book-body .book-head { display: flex; }
  .book-body .book-head .modal-close { text-decoration: none; }
  .book-body .book-frame { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; border: 0; }
  .book-body .book-frame iframe { height: 100%; min-height: 0; }
  .book-body .book-help { max-width: none; margin: 0; border: 0; border-top: 1px solid var(--border); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
}

/* Steps indicator */
.steps-bar {
  display: flex; gap: 6px; margin-bottom: 32px;
}
.step-dot {
  flex: 1; height: 3px; background: rgba(0,0,0,0.08);
  transition: background 0.4s;
}
.step-dot.active { background: var(--gold); }
.step-dot.done { background: rgba(201,168,76,0.35); }

/* Option cards inside modal */
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.option-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.option-card {
  border: 1px solid rgba(0,0,0,0.10); padding: 18px 16px;
  cursor: pointer; text-align: center; background: var(--card);
  transition: all 0.3s var(--ease); position: relative;
}
.option-card:hover { border-color: rgba(201,168,76,0.45); background: var(--card-hover); }
.option-card.selected { border-color: var(--gold); background: rgba(201,168,76,0.07); }
.option-card.selected::after {
  content: '✓'; position: absolute; top: 8px; right: 10px;
  font-size: 0.7rem; color: var(--gold-text);
}
.option-icon { width: 40px; height: 40px; margin: 0 auto 12px; display: block; }
.option-name {
  font-family: 'Cinzel', serif; font-size: 0.68rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--white);
  margin-bottom: 4px;
}
.option-desc { font-size: 0.72rem; font-weight: 300; color: var(--muted); }

/* Price summary */
.price-summary {
  background: var(--card); border: 1px solid var(--border); padding: 24px;
  margin-bottom: 24px;
}
.price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 0.82rem; color: var(--silver);
}
.price-row:last-child { border-bottom: none; }

.btn-modal {
  font-family: 'Cinzel', serif; font-size: 0.68rem;
  letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; padding: 13px 32px; border: none;
  transition: all 0.35s var(--ease);
}
.btn-modal-primary {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  background-size: 200%; color: #3A1900;
  box-shadow: 0 4px 20px rgba(201,168,76,0.25);
}
.btn-modal-primary:hover { background-position: right; box-shadow: 0 6px 30px rgba(201,168,76,0.45); }
.btn-modal-back { background: transparent; border: 1px solid rgba(0,0,0,0.15); color: var(--muted); }
.btn-modal-back:hover { border-color: var(--gold); color: var(--gold-text); }

.step-panel { display: none; }
.step-panel.active { display: block; }
.step-question {
  font-family: 'Cinzel', serif; font-size: 0.88rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--white); margin-bottom: 24px;
}
@media (max-width: 540px) {
  .option-grid { grid-template-columns: 1fr; }
  .modal-body { padding: 24px 20px; }
  .modal-header { padding: 24px 20px 18px; }
  .modal-footer { padding: 18px 20px 24px; }
  #gallery { padding: 88px 0 88px 24px; }
  .gallery-header { padding-right: 24px; }
  .gallery-nav { padding-right: 24px; }
}

/* ── PROMO BANNER ── */
.promo-banner {
  background: linear-gradient(90deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.18) 50%, rgba(201,168,76,0.08) 100%);
  border-top: 1px solid rgba(201, 168, 76, 0.35);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  padding: 14px 24px;
}
.promo-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.promo-banner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  flex-shrink: 0;
}
.promo-banner-text {
  color: var(--silver-light);
  font-size: 0.92rem;
  letter-spacing: 0.3px;
}
.promo-banner-text strong { color: var(--gold-text); font-weight: 600; }
.promo-banner-text em { color: var(--gold-text); font-style: normal; font-weight: 500; }
.promo-banner-cta {
  color: var(--gold-text);
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--gold);
  transition: background 0.2s, color 0.2s;
}
.promo-banner-cta:hover {
  background: var(--gold);
  color: #0a0a0a;
}
@media (max-width: 640px) {
  .promo-banner { padding: 12px 16px; }
  .promo-banner-text { font-size: 0.85rem; text-align: center; }
}

/* ── Areas We Serve ── */
.areas-list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 12px; max-width: 760px; margin: 36px auto 28px;
}
.areas-list li {
  font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--silver-light); padding: 12px 18px;
  border: 1px solid var(--border); background: var(--dark);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.areas-list li:hover { border-color: rgba(201,168,76,0.5); color: var(--gold-text); }
.areas-list a { color: inherit; text-decoration: none; }
.areas-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* ── Quote links on the wide service cards ── */
.quote-link {
  margin-top:18px; display:inline-block; padding:12px 28px; border:1px solid var(--gold);
  font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:3px; text-transform:uppercase;
  color: var(--gold-text); text-decoration:none; transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.quote-link:hover { background: var(--gold); color: #3A1900; }

/* ── Service pages (carpet-cleaning, upholstery-cleaning, area-rug-cleaning) ── */
.page-hero {
  min-height: 74vh;
  background: var(--page-hero-image) center / cover no-repeat, var(--black);
}
.page-hero-video { object-position: center; }
.page-hero .hero-overlay { z-index: 1; }
.page-hero .hero-title { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.page-hero .hero-tagline { max-width: 640px; margin-left: auto; margin-right: auto; }
.page-hero .hero-actions { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) {
  .hero-logo-wrap, .hero-logo-wrap img, .hero-services, .hero-eyebrow, .hero-title, .hero-tagline, .hero-actions, .hero-location-big, .breadcrumb { animation: none; }
}
.breadcrumb {
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  animation: heroRise 0.8s 0.2s var(--ease-out) both;
}
.breadcrumb a { color: var(--silver); text-decoration: none; }
.breadcrumb a:hover { color: #F0D080; }
.breadcrumb span[aria-current] { color: var(--gold-text); }
.svc-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start;
  max-width: 1100px; margin: 0 auto;
}
.svc-prose p { color: var(--silver); font-weight: 300; line-height: 1.85; font-size: 0.98rem; margin-top: 22px; }
.svc-prose .section-title { margin-bottom: 4px; }
.svc-included {
  border: 1px solid var(--border); background: var(--card); padding: 40px 34px;
  position: relative;
}
.svc-included::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.08), transparent 60%); pointer-events: none;
}
.svc-included-title {
  font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 18px;
}
/* The hero keeps its dark photo/video treatment on the light theme — keep its chrome light */
#hero .breadcrumb { color: rgba(242,242,242,0.6); }
#hero .breadcrumb a { color: rgba(242,242,242,0.85); }
#hero .breadcrumb span[aria-current] { color: #E4C883; }
#hero .btn-secondary { color: #E4C883; border-color: rgba(228,200,131,0.55); background: rgba(10,8,4,0.42); } /* dark backing: gold text keeps >= 4.5:1 over the lighter hero photos */
#hero .btn-secondary:hover { color: #F0D080; border-color: #F0D080; background: rgba(201,168,76,0.12); }
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: 36px; }
  .page-hero { min-height: 64vh; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-video { display: none; }
}

/* ── Hero / nav responsive (homepage design, 2026-09-17) ── */
@media (max-width: 1300px) {
  /* not enough room to centre the links beside the CTA — fall back to left/right */
  nav.nav-home { justify-content: space-between; }
  nav.nav-home .nav-links { position: static; transform: none; gap: 28px; }
}
@media (max-width: 1100px) {
  .hero-title .nowrap { white-space: normal; }
}
@media (max-width: 960px) {
  /* links + CTA are hidden here; logo (once scrolled) left, hamburger right */
  nav.nav-home { justify-content: space-between; }
}
@media (max-width: 640px) {
  #hero { padding: 92px 20px 48px; justify-content: flex-start; min-height: 0; }
  #hero.page-hero { min-height: 0; }
  .hero-location-big { margin-bottom: 8px; }
  .hero-logo-wrap { margin-bottom: 4px; }
  .hero-logo-wrap img { width: 150px; }
  .hero-logo-wrap::before { width: 150px; height: 150px; }
  .hero-logo-wrap::after { width: 140px; height: 140px; }
  .hero-eyebrow { font-size: 0.66rem; letter-spacing: 3px; gap: 6px 12px; margin-bottom: 14px; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 22px; }
  .hero-eyebrow-sep { width: 16px; }
  .hero-title { letter-spacing: 1px; }
  .hero-tagline { margin-bottom: 18px; font-size: 1.08rem; }
  .hero-services { gap: 10px; margin-bottom: 18px; flex-wrap: nowrap; }
  .hero-pill { font-size: 0.62rem; letter-spacing: 1.5px; padding: 10px 12px; gap: 7px; }
  .hero-pill svg { width: 18px; height: 18px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn-primary, .hero-actions .btn-text, .hero-actions .btn-secondary {
    font-size: 0.86rem; letter-spacing: 2px; min-height: 56px; padding: 0 24px; width: min(100%, 360px);
  }
}

/* ── TRUSTED PARTNER (Rita Cleaning Services) ── restored 2026-10-05 below the reviews */
#testimonials { padding-bottom: 56px; } /* the partner card continues this white band */
#partner {
  padding: 0 24px 104px;
  background: var(--black);
}
.partner-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
  text-decoration: none;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.partner-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(168,134,42,0.14);
}
.partner-logo {
  height: 72px; width: 72px; object-fit: contain; display: block;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
}
.partner-copy { min-width: 0; }
.partner-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-text);
  margin: 0 0 6px;
}
.partner-text {
  color: var(--silver-light);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
.partner-text strong { color: var(--white); font-weight: 600; }
.partner-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-text);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.35s var(--ease);
}
.partner-card:hover .partner-arrow { background: var(--gold); color: #fff; transform: translateX(3px); }
.partner-arrow svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  #partner { padding: 0 20px 80px; }
  .partner-card { grid-template-columns: 1fr; text-align: center; gap: 14px; padding: 24px 22px; }
  .partner-logo, .partner-arrow { margin: 0 auto; }
}

/* ══ V2 PAGES (service, town and hub pages; 2026-10-06 SEO loop) ══
   Scannable layout from the homepage's own vocabulary: hero → overlapping answer / at-a-glance card → icon cards →
   steps → before/after → FAQ accordions + sources toggle → link tiles → CTA band. Small gold text uses --gold-text (AA). */
a.hero-pill { text-decoration: none; }
.mobile-menu-contact { display: flex; gap: 12px; }
.mobile-menu .mobile-menu-contact a {
  font-size: 0.8rem; letter-spacing: 3px; padding: 13px 18px; min-height: 46px;
  border: 1px solid var(--border); color: var(--gold-text); display: inline-flex; align-items: center;
}
@media (max-height: 740px) { .mobile-menu { gap: 22px; } .mobile-menu a { font-size: 0.95rem; } }
.breadcrumb a { display: inline-block; padding: 6px 2px; }
.footer-links a { display: inline-block; padding: 4px 0; }
.footer-col-title a { color: inherit; text-decoration: none; }
.photo-note { text-align: center; font-size: 0.8rem; font-style: italic; color: var(--muted); margin: 12px auto 0; max-width: 560px; }

.v2-hero .hero-content { max-width: 920px; }
.v2-hero .hero-tagline { margin-bottom: 30px; }
.v2-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 24px; }
.v2-chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  border: 1px solid rgba(228,200,131,0.5); border-radius: 999px; background: rgba(10,8,4,0.38);
  color: #F2EEE6; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.4px;
}
.v2-chip-icon { width: 16px; height: 16px; flex: 0 0 auto; }

.v2-section { padding: 104px 64px; }
.v2-alt { background: var(--section-alt); }
.v2-intro { max-width: 760px; margin: 26px auto 0; text-align: center; color: var(--silver); line-height: 1.8; font-size: 1rem; font-weight: 400; }
.v2-note { text-align: center; margin: 34px auto 0; color: var(--muted); font-size: 0.9rem; font-weight: 400; max-width: 640px; line-height: 1.7; }
.v2-icon { width: 34px; height: 34px; flex: 0 0 auto; }

/* overlapping card under the hero: answer box (service) / at-a-glance strip (town) / town chips (hub) */
.v2-answer-wrap, .v2-glance-wrap { position: relative; z-index: 4; padding: 0 24px; margin-top: -60px; }
.v2-answer {
  max-width: 880px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--gold);
  box-shadow: 0 18px 50px rgba(20,20,30,0.12); padding: 30px 38px;
}
.v2-answer h2 { font-family: 'Cinzel', serif; font-size: clamp(1.02rem, 1.6vw, 1.28rem); font-weight: 600; letter-spacing: 1px; color: var(--white); margin-bottom: 12px; }
.v2-answer p { color: var(--silver); line-height: 1.75; font-size: 1rem; font-weight: 400; }
.v2-answer a { color: var(--gold-text); }
.v2-town-chips {
  list-style: none; max-width: 1040px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--gold); box-shadow: 0 18px 50px rgba(20,20,30,0.12); padding: 22px;
}
.v2-town-chips a {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; min-height: 44px; border: 1px solid var(--border);
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--silver-light); text-decoration: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.v2-town-chips a:hover { border-color: var(--gold); color: var(--gold-text); }

/* icon cards */
.v2-cards { max-width: 1140px; margin: 46px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.v2-card {
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--card-shadow); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.v2-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(30,30,40,0.10); }
.v2-card h3, .v2-step h3, .v2-limits h3, .v2-svc-body h3 {
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); margin-bottom: 6px; line-height: 1.4;
}
.v2-card p, .v2-step p, .v2-limits p, .v2-svc-body p { color: var(--silver); font-size: 0.94rem; line-height: 1.65; font-weight: 400; }
.v2-card a, .v2-limits a, .faq-answer a { color: var(--gold-text); }
.v2-cards-compact .v2-card { padding: 22px; }

/* steps */
.v2-steps { list-style: none; max-width: 1140px; margin: 46px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.v2-step { padding: 28px 22px 24px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--card-shadow); }
.v2-step-num {
  display: block; margin-bottom: 10px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.7rem; line-height: 1;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* honest-limits card */
.v2-limits {
  max-width: 880px; margin: 28px auto 0; display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 26px; background: rgba(201,168,76,0.08); border-left: 3px solid var(--gold);
}
.v2-limits .v2-icon { width: 28px; height: 28px; }

/* service cards on town pages */
.v2-svc-cards { max-width: 1140px; margin: 46px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.v2-svc-card { background: var(--card); border: 1px solid var(--border); box-shadow: var(--card-shadow); display: flex; flex-direction: column; overflow: hidden; }
.v2-svc-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--dark); }
.v2-svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.v2-svc-card:hover .v2-svc-media img { transform: scale(1.04); }
.v2-svc-media-icon { display: flex; align-items: center; justify-content: center; }
.v2-svc-media-icon .v2-icon { width: 64px; height: 64px; }
.v2-svc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v2-svc-link {
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  color: var(--gold-text); font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
}
.v2-tile-arrow { width: 16px; height: 16px; flex: 0 0 auto; }

/* hub town cards */
.v2-group-title { max-width: 1140px; margin: 50px auto 16px; font-family: 'Cinzel', serif; font-size: 0.86rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-text); }
.v2-town-cards { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.v2-town-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--card-shadow);
  text-decoration: none; color: var(--white); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.v2-town-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 34px rgba(30,30,40,0.10); }
.v2-town-name { display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 1px; }
.v2-town-name .v2-icon { width: 22px; height: 22px; }
.v2-town-blurb { color: var(--silver); font-size: 0.94rem; line-height: 1.6; font-weight: 400; }
.v2-town-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--gold-text); font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; }

/* link tiles */
.v2-related { padding-top: 0; }
.v2-mini-title { text-align: center; font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-text); }
.v2-tiles { max-width: 1040px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.v2-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; min-height: 58px;
  border: 1px solid var(--border); background: var(--card); color: var(--white); text-decoration: none;
  font-family: 'Cinzel', serif; font-size: 0.76rem; letter-spacing: 1.8px; text-transform: uppercase;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.v2-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.v2-tile-icon .v2-icon { width: 28px; height: 28px; }
.v2-tile-icon span { flex: 1; }
.section-dark .v2-tile { background: rgba(255,255,255,0.05); color: #F2F2F2; }


.v2-ba-grid { margin-top: 40px; }

@media (max-width: 980px) {
  .v2-steps { grid-template-columns: repeat(2, 1fr); }
  .v2-svc-cards { grid-template-columns: 1fr; max-width: 640px; }
  .v2-svc-card { flex-direction: row; }
  .v2-svc-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 100%; }
  /* The photos are 4:3; deferred ones start as a 1×1 placeholder (D28 A), so give the img that ratio up front (no jump on load). */
  .v2-svc-media img { aspect-ratio: 4 / 3; }
}
@media (max-width: 960px) {
  .v2-section { padding: 80px 24px; }
}
@media (max-width: 800px) {
}
@media (max-width: 640px) {
  .v2-answer-wrap, .v2-glance-wrap { margin-top: -36px; padding: 0 16px; }
  .v2-answer { padding: 24px 22px; }
  .v2-chips { gap: 6px 8px; margin-top: 18px; }
  .v2-chips li { font-size: 0.74rem; padding: 7px 12px; }
  .v2-card { flex-direction: row; align-items: flex-start; padding: 18px; gap: 14px; }
  .v2-card .v2-icon { width: 30px; height: 30px; }
  .v2-steps { grid-template-columns: 1fr; gap: 12px; }
  .v2-step { display: grid; grid-template-columns: 46px 1fr; column-gap: 10px; padding: 20px 18px; }
  .v2-step-num { grid-row: span 2; margin: 0; font-size: 1.5rem; }
  .v2-svc-card { flex-direction: column; }
  .v2-svc-media { flex: none; aspect-ratio: 16 / 9; }
  .v2-limits { padding: 18px; }
  .v2-town-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-card, .v2-town-card, .v2-tile, .v2-svc-media img { transition: none; }
}

@media (max-width: 640px) {
  .page-hero { background: var(--page-hero-image-sm, var(--page-hero-image)) center / cover no-repeat, var(--black); }
}
/* card columns follow the item count (no orphan rows): 3 / 6 / 5 items -> 3 columns, 4 / 8 -> 4, 2 -> 2 */
@media (min-width: 981px) {
  .v2-cards.v2-cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; }
  .v2-cards.v2-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .v2-cards.v2-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}
@media (max-width: 980px) and (min-width: 641px) { .v2-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) and (min-width: 961px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
/* design review fixes (2026-10-06) */
.v2-hero .hero-overlay {
  background: linear-gradient(to bottom, rgba(8,8,8,0.64) 0%, rgba(8,8,8,0.58) 45%, rgba(8,8,8,0.72) 100%);
}
.v2-svc-body a, .v2-intro a, .v2-town-blurb a { color: var(--gold-text); }
@media (min-width: 981px) { .v2-town-cards { grid-template-columns: repeat(3, 1fr); } }
.v2-group-legend { max-width: 980px; margin: 22px auto 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; font-size: 0.86rem; color: var(--muted); font-weight: 400; }
.v2-group-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--gold); transform: rotate(45deg) translateY(-2px); }
.v2-town-county { font-family: 'Cinzel', serif; font-size: 0.64rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-text); }
#services .v2-tiles { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); max-width: 1100px; }
@media (max-width: 640px) {
  .v2-svc-media { min-height: 0; }
  .v2-intro { text-align: left; font-size: 0.96rem; }
  .v2-group-legend { justify-content: flex-start; }
}
/* decorative ghost step numbers: drawn by CSS so they stay out of the accessibility tree (contrast audit, 2026-10-06) */
.process-step-num::before { content: attr(data-n); }
/* phone contact bar (all pages; sits inside <footer> so it is site chrome) */
.mobile-cta-bar { display: none; }
@media (max-width: 640px) {
  .mobile-cta-bar {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
    background: rgba(22,23,26,0.96); border-top: 1px solid rgba(201,168,76,0.45); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 8px;
  }
  .mobile-cta-bar a {
    display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid rgba(228,200,131,0.55);
    font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: #F2EEE6; text-decoration: none;
  }
  .mobile-cta-bar .mobile-cta-quote { background: linear-gradient(100deg, #C89636 0%, #E7B75A 50%, #D4A851 100%); color: #3A1900; border-color: transparent; font-weight: 600; }
  body { padding-bottom: 66px; }
}
.faq-h { margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; }
.home-answer { margin-top: 0; padding: 56px 24px 8px; }
.v2-town-name { margin: 0; }
/* hero text over photos/video: soft shadow + darker button backing (measured over the lighter hero frames, 2026-10-06) */
#hero .hero-eyebrow, #hero .breadcrumb, #hero .hero-tagline, #hero .v2-hero-chips { text-shadow: 0 1px 8px rgba(0,0,0,0.65); }
#hero .btn-text { background: rgba(10,8,4,0.42); }
#hero .hero-eyebrow { color: #F2EEE6; }
#hero .breadcrumb span[aria-current] { color: #F0D79A; }
/* town pages: where we work (neighborhood chips), João 2026-10-06 */
.v2-area-strip { max-width: 1040px; margin: 0 auto; text-align: center; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--gold); box-shadow: 0 18px 50px rgba(20,20,30,0.12); padding: 26px 22px 24px; }
.v2-area-title { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--white); margin: 0 0 6px; }
.v2-area-lead { font-size: 0.92rem; color: var(--silver); font-weight: 400; margin: 0 0 16px; }
.v2-area-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.v2-area-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; min-height: 44px; border: 1px solid var(--border); font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--silver-light); }
@media (max-width: 640px) { .v2-area-strip { padding: 22px 16px 18px; } .v2-area-chips { gap: 8px; } .v2-area-chips li { padding: 8px 12px; min-height: 40px; font-size: 0.68rem; letter-spacing: 1.5px; } }
/* Mobile LCP (release PSI 2026-10-06): service-page heroes use their section background as the poster (preloaded per
   screen size) and phones never play the clip, so the video is hidden there. The homepage video keeps its poster, which
   is preloaded at high priority: without a poster Chrome scores the first video frame, which arrives seconds later. */
@media (max-width: 640px) {
  .page-hero-video { display: none; }
}

/* ── MEET THE OWNER ── (2026-10-07) portrait + short story, scannable: chips, 2-sentence intro, one quote */
#owner { padding: 72px 24px; background: var(--section-alt); }
.owner-card { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 380px 1fr; grid-template-areas: "photo head" "photo body"; column-gap: 48px; row-gap: 0; align-items: center; }
.owner-photo { grid-area: photo; }
.owner-head { grid-area: head; align-self: end; }
.owner-body { grid-area: body; align-self: start; }
.owner-photo { margin: 0; position: relative; }
.owner-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.owner-photo::after { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid rgba(201,168,76,.55); z-index: -1; }
.owner-eyebrow { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-text); margin: 0 0 10px; }
.owner-title { font-family: 'Cinzel', serif; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; margin: 0 0 18px; }
.owner-title span { display: block; }
.owner-title span + span { font-size: .6em; margin-top: .25em; }
.owner-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.owner-chips li { font-size: .82rem; padding: 6px 12px; border: 1px solid rgba(201,168,76,.5); color: var(--text, #222); background: var(--card); }
.owner-desc { font-size: 1rem; line-height: 1.75; color: var(--silver); margin: 0 0 18px; max-width: 34em; }
.owner-quote { margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--gold-text); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.35rem; line-height: 1.45; }
.owner-quote cite { display: block; margin-top: 6px; font-family: 'Raleway', sans-serif; font-style: normal; font-size: .78rem; letter-spacing: 1px; color: var(--gold-text); }
@media (max-width: 760px) {
  #owner { padding: 56px 16px; }
  /* phones: name and title above the photo, details below it (João 2026-10-07) */
  .owner-card { grid-template-columns: 1fr; grid-template-areas: "head" "photo" "body"; row-gap: 22px; }
  .owner-photo { max-width: 300px; width: 100%; margin: 0 auto; }
  .owner-head { text-align: center; }
  .owner-title { margin-bottom: 0; }
}