/* ==========================================================================
   SOUTHERN SUDS MOBILE DETAILING — STYLESHEET
   Organized by: variables, resets, layout helpers, components, sections,
   responsive rules. Colors and spacing are driven by CSS custom properties
   so the whole theme can be re-skinned from the :root block below.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. CSS VARIABLES — edit these to change the site-wide color palette    */
/* ---------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-primary: #ef1b1b;
  --color-primary-bright: #ff3131;
  --color-primary-dark: #9f0909;
  --color-black: #050505;
  --color-charcoal: #111111;
  --color-dark-gray: #1c1c1c;
  --color-silver: #c9c9c9;
  --color-white: #ffffff;

  /* Semantic color roles */
  --bg-light: var(--color-white);
  --bg-light-alt: #f5f5f5;
  --bg-dark: var(--color-black);
  --bg-dark-alt: var(--color-charcoal);
  --text-dark: #141414;
  --text-muted: #5c5c5c;
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: #b7b7b7;
  --border-light: #e4e4e4;
  --border-dark: #2a2a2a;

  --accent: var(--color-primary);
  --accent-light: var(--color-primary-bright);
  --accent-glow: var(--color-primary-bright);
  --accent-dark: var(--color-primary-dark);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-primary-bright) 100%);
  --gradient-dark: linear-gradient(180deg, var(--color-black) 0%, var(--color-charcoal) 100%);
  --gradient-shine: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 55%, transparent 70%);

  /* Typography */
  --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow-max: 780px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-sm: 0 2px 10px rgba(5, 7, 13, 0.08);
  --shadow-md: 0 10px 30px rgba(5, 7, 13, 0.14);
  --shadow-lg: 0 20px 50px rgba(5, 7, 13, 0.28);
  --shadow-primary: 0 12px 30px rgba(239, 27, 27, 0.35);
  --glow-primary: 0 0 8px rgba(255, 49, 49, 0.9), 0 0 18px rgba(255, 49, 49, 0.65), 0 0 32px rgba(255, 49, 49, 0.35);

  /* Form field colors — kept distinct from the decorative brand palette
     above so typed text always has guaranteed contrast against dark
     field backgrounds, regardless of what section a form sits in. */
  --form-text: #f4f2ef;
  --form-placeholder: #a8a8a8;
  --form-bg: #171717;
  --form-bg-focus: #1c1c1c;
  --form-border: #454545;
  --form-border-focus: #8e1f28;
  --form-error: #d97979;
  --form-success: #8fb996;

  /* Muted burgundy accent — used for the Services navigation (active-page
     underline, hover glow) as a quieter counterpoint to the bolder
     neon-red brand accent used elsewhere. */
  --burgundy: #5c1a2b;
  --burgundy-light: #8a2942;
  --burgundy-bright: #a83654;
  --transition-fast: 0.18s ease;
  --transition-base: 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Fixed heights used for scroll offsets */
  --announcement-h: 40px;
  --header-h: 104px;
  --mobile-bar-h: 64px;
}

/* ---------------------------------------------------------------------- */
/* 2. RESET & BASE                                                        */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  margin: 0;
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--announcement-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  color: var(--text-dark);
  background: var(--bg-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--mobile-bar-h);
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--space-sm); font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-sm); color: var(--text-muted); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: var(--fs-base); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Visible, consistent focus states for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-glow);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.container-narrow { max-width: var(--container-narrow-max); }

.section { padding: var(--space-2xl) 0; }
.section-dark {
  background: var(--gradient-dark);
  color: var(--text-on-dark);
}
.section-dark p { color: var(--text-on-dark-muted); }
.section-dark h2, .section-dark h3 { color: var(--text-on-dark); }

.section-heading { max-width: 720px; margin: 0 auto var(--space-xl); text-align: center; }
.section-sub { font-size: var(--fs-lg); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-light);
  margin-bottom: var(--space-xs);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary-bright);
  box-shadow: 0 0 6px rgba(255,49,49,0.85);
  flex-shrink: 0;
}
.section-heading .eyebrow { justify-content: center; }
.section-dark .eyebrow { color: var(--accent-glow); }

/* Thin red divider used to separate stacked sections/cards */
.red-divider {
  width: 64px;
  height: 3px;
  margin: var(--space-sm) auto;
  background: linear-gradient(90deg, transparent, var(--color-primary-bright), transparent);
  border: none;
}
/* Angled accent line — decorative brand mark for section headings */
.section-heading::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin: var(--space-sm) auto 0;
  background: var(--color-primary-bright);
  transform: skewX(-20deg);
  box-shadow: 0 0 8px rgba(255,49,49,0.6);
}
/* Subtle carbon-fiber style grid texture for selected dark sections */
.texture-grid {
  position: relative;
}
.texture-grid::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.texture-grid > .container { position: relative; z-index: 1; }

h2 { font-size: var(--fs-3xl); }
.text-accent { color: var(--accent-light); }
.section-dark .text-accent { color: var(--accent-glow); }

/* ---------------------------------------------------------------------- */
/* 3. BUTTONS                                                             */
/* ---------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-base);
  border: 2px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
/* Shine sweep — sits at a negative z-index so it stays under the button's
   own text/icons without requiring every button's markup to wrap its
   content in a span. */
.btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.btn:hover::before { left: 140%; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn:focus-visible {
  outline: 3px solid rgba(255, 49, 49, 0.45);
  outline-offset: 4px;
}

.btn-primary {
  background: var(--gradient-primary);
  color: #fff;
  border-color: rgba(255, 49, 49, 0.65);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  border-color: var(--color-primary-bright);
  background: linear-gradient(135deg, var(--color-primary-bright), var(--color-primary-dark));
  box-shadow: var(--glow-primary), inset 0 0 10px rgba(255,255,255,0.12);
}

.btn-secondary {
  background: transparent;
  color: var(--text-dark);
  border-color: var(--border-light);
}
.section-dark .btn-secondary,
.hero .btn-secondary { color: var(--text-on-dark); border-color: rgba(255,255,255,0.55); }
.btn-secondary:hover {
  border-color: var(--color-primary-bright);
  color: var(--color-primary-bright);
  box-shadow: 0 0 10px rgba(255, 49, 49, 0.35), 0 0 22px rgba(255, 49, 49, 0.18);
}

.btn-lg { padding: 1em 2em; font-size: var(--fs-lg); }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------- */
/* 4. ANNOUNCEMENT BAR                                                    */
/* ---------------------------------------------------------------------- */
.announcement-bar {
  background: var(--gradient-primary);
  color: #fff;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.55em var(--space-sm);
  height: var(--announcement-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.announcement-bar p { margin: 0; color: #fff; }
.announcement-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.5em;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* 5. NAVIGATION                                                          */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(5, 5, 5, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.site-header.is-scrolled {
  background: rgba(5, 5, 5, 0.96);
  border-bottom: 1px solid rgba(255, 49, 49, 0.45);
  box-shadow: var(--shadow-lg);
}

.navbar {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  flex-shrink: 0;
}
/* ---------------------------------------------------------------------- */
/* LOGO / BRAND MARK — reusable across nav, mobile menu, hero, footer, and */
/* the booking confirmation. Swap the image file in one place (the <img>   */
/* src) and every placement stays sized correctly via these modifiers.     */
/* ---------------------------------------------------------------------- */
.brand-logo {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-logo--nav { height: 80px; width: auto; }
.brand-logo--hero { width: 220px; height: auto; margin: 0 auto; }
.brand-logo--footer { width: 165px; height: auto; }
.brand-logo--confirm { width: 76px; height: auto; margin: 0 auto var(--space-sm); }

/* Black card treatment for placing the logo on a lighter background —
   rounded corners, thin red border, soft red glow, drop shadow. */
.logo-card {
  display: inline-flex;
  background: var(--color-black);
  border: 1px solid rgba(255, 49, 49, 0.5);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 18px rgba(255, 49, 49, 0.22);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--text-on-dark-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 0.4em 0;
  position: relative;
  transition: color var(--transition-fast);
}
.nav-links a:hover, .nav-links a:focus-visible { color: #fff; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent-glow);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-book-btn { padding: 0.65em 1.3em; min-height: 40px; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Services accordion — inert on desktop (Services stays a plain nav link,
   exactly as before); only becomes an expandable submenu inside the
   mobile menu. See the ≤768px query for the actual accordion styling. */
.nav-services-row { display: flex; align-items: center; }
.nav-services-toggle { display: none; }
.nav-services-submenu { display: none; }

/* ---------------------------------------------------------------------- */
/* 6. HERO                                                                */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  /* Progressive enhancement: dvh tracks the browser's actual visible
     viewport as mobile address-bar chrome shows/hides, avoiding the
     classic black-gap-while-scrolling that plain vh causes on phones.
     Browsers that don't support dvh simply ignore this line and keep
     the vh value above — desktop is unaffected either way. */
  min-height: 88dvh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.78) 60%, rgba(5,5,5,0.96) 100%),
              linear-gradient(100deg, rgba(159,9,9,0.5) 0%, rgba(5,5,5,0.35) 55%),
              radial-gradient(60% 55% at 68% 55%, rgba(255,49,49,0.30) 0%, rgba(255,49,49,0) 70%);
}
.hero-shine {
  position: absolute; inset: 0;
  background: var(--gradient-shine);
  background-size: 250% 250%;
  animation: shineSweep 9s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes shineSweep {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.hero-content { position: relative; z-index: 1; padding: var(--space-2xl) var(--space-md); }
.hero-text { max-width: 640px; }
.hero-text .brand-logo--hero { width: 190px; margin: 0 0 var(--space-md); }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  background: rgba(239, 27, 27, 0.14);
  border: 1px solid rgba(255, 49, 49, 0.5);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  margin-bottom: var(--space-sm);
}
.hero-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary-bright);
  box-shadow: 0 0 8px rgba(255,49,49,0.9);
  flex-shrink: 0;
}
.hero h1 { font-size: clamp(2.25rem, 5.5vw, var(--fs-4xl)); margin-bottom: var(--space-sm); }
.hero-sub { font-size: var(--fs-lg); color: rgba(255,255,255,0.88); max-width: 560px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; }

.hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--accent-glow);
  margin-bottom: var(--space-lg);
}
.hero-phone:hover { color: #fff; }

.trust-indicators {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: var(--space-sm);
  max-width: 480px;
}
.trust-indicators li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.trust-indicators svg { color: var(--accent-glow); flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* 8. FORM ELEMENTS (shared)                                              */
/* ---------------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: var(--space-sm); }
.form-group-full { grid-column: 1 / -1; }
.form-group label {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.section-dark .form-group label { color: var(--text-on-dark); }
.req { color: var(--accent-glow); }

/* Every real text-entry field on the site — booking form, and any future
   modal/contact form — shares this styling so typed text is never
   dark-on-dark. Deliberately unscoped from
   `.form-group` and not tied to `.section` vs `.section-dark` context:
   that context-dependent coloring was the original bug (dark text landed
   on a dark field background whenever the field's section also matched
   the generic `.section` selector). Range/checkbox/radio inputs are
   excluded on purpose — they have their own custom appearance elsewhere. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  color: var(--form-text);
  background-color: var(--form-bg);
  border: 1.5px solid var(--form-border);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
  min-height: 48px;
  caret-color: var(--form-border-focus);
  opacity: 1;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea { resize: vertical; min-height: 100px; }

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
  color: var(--form-text);
  background-color: var(--form-bg-focus);
  border-color: var(--form-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(142, 31, 40, 0.18);
}

select option {
  color: var(--form-text);
  background-color: var(--form-bg);
}

/* Browser autofill (Chrome/Safari) forces its own text/background colors
   unless overridden like this — otherwise autofilled fields can silently
   revert to unreadable default styling. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--form-text) !important;
  caret-color: var(--form-text);
  box-shadow: 0 0 0 1000px var(--form-bg) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Native date/time pickers default to dark-on-transparent icons that
   disappear against a dark field background. */
input[type="date"],
input[type="time"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--form-placeholder);
  background-color: var(--form-bg);
  border-color: var(--form-border);
  opacity: 0.7;
  cursor: not-allowed;
}

.field-error {
  font-size: var(--fs-xs);
  color: var(--form-error);
  min-height: 1em;
  display: block;
}
.field-hint {
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--form-error);
}

@keyframes fieldFlash {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px var(--accent-glow); }
}
.field-flash { animation: fieldFlash 0.9s ease; border-color: var(--accent-glow) !important; }

.disclaimer {
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
  max-width: 640px;
  margin: 0 auto var(--space-md);
}
.section:not(.section-dark) .disclaimer { color: var(--text-muted); }
.disclaimer-center { text-align: center; }

/* ---------------------------------------------------------------------- */
/* 9. PACKAGE CARDS                                                       */
/* ---------------------------------------------------------------------- */
.package-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}
.package-card {
  position: relative;
  background: var(--bg-light-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.package-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 49, 49, 0.55);
  box-shadow: var(--shadow-md), 0 0 16px rgba(255, 49, 49, 0.18);
}

.package-card-featured {
  background: var(--gradient-dark);
  color: #fff;
  border-color: var(--color-primary);
  border-top: 3px solid var(--color-primary-bright);
  box-shadow: var(--shadow-primary);
}
@media (min-width: 1025px) {
  .package-card-featured { transform: scale(1.04); }
  .package-card-featured:hover { transform: scale(1.04) translateY(-6px); }
}
.package-card-featured .package-desc,
.package-card-featured .package-time { color: var(--text-on-dark-muted); }
.package-card-featured .package-features li { color: var(--text-on-dark); border-color: var(--border-dark); }

.package-badge {
  position: absolute;
  top: -14px;
  left: var(--space-md);
  background: var(--gradient-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-primary);
}
.package-badge-alt { background: linear-gradient(135deg, #2b3350, #4a5578); }

.package-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-size: 1.3rem;
  border-radius: 50%;
  background: rgba(239, 27, 27, 0.12);
  border: 1px solid rgba(255, 49, 49, 0.35);
  margin-bottom: var(--space-xs);
}
.package-card-featured .package-icon { background: rgba(255, 49, 49, 0.18); }
.package-card-header h3 { font-size: var(--fs-xl); margin-bottom: 0.2em; }
.package-price { font-size: var(--fs-lg); font-weight: 800; color: var(--accent); margin-bottom: 0.4em; }
.package-card-featured .package-price { color: var(--accent-glow); }

/* The Mold Remediation cards reuse .package-card but sit inside a
   .section-dark wrapper (for the "specialty restoration" visual weight),
   whereas .package-card is otherwise only ever used on light sections.
   Re-skin the card itself for a dark background so the section-wide
   .section-dark h2/h3/p color rules land correctly instead of producing
   near-white-on-white text. */
#mold-remediation .package-card {
  background: var(--bg-dark-alt);
  border-color: var(--border-dark);
}
#mold-remediation .package-price { color: var(--accent-glow); }
#mold-remediation .package-features li { color: var(--text-on-dark); border-color: var(--border-dark); }
.mold-free-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.package-desc { font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
/* Package buttons can carry long labels (name + price) — let them wrap
   instead of forcing their card's grid column to grow to the unwrapped
   text width, which would blow out the row on wide package names. */
.package-btn { margin-top: auto; white-space: normal; }

.package-features { flex-grow: 1; margin-bottom: var(--space-sm); }
.package-features li {
  padding: 0.5em 0;
  border-bottom: 1px dashed var(--border-light);
  font-size: var(--fs-sm);
  color: var(--text-dark);
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}
.package-features li::before { content: '✓'; color: var(--accent); font-weight: 800; flex-shrink: 0; }
.package-card-featured .package-features li::before { color: var(--accent-glow); }
.package-card-featured .btn-primary { box-shadow: 0 0 10px rgba(255,49,49,0.55), 0 0 22px rgba(255,49,49,0.3); }
.package-features li:last-child { border-bottom: none; }

.package-time { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-sm); }

/* Interior Detailing per-vehicle-size pricing rows (Level cards show 3
   prices instead of one .package-price, since price depends on both the
   selected level and vehicle size). */
.tier-pricing { margin-bottom: var(--space-sm); border-top: 1px solid var(--border-light); }
.tier-pricing li {
  display: flex;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.5em 0;
  border-bottom: 1px dashed var(--border-light);
  font-size: var(--fs-sm);
}
.tier-pricing li span:first-child { color: var(--text-muted); }
.tier-pricing li span:last-child { font-weight: 800; color: var(--accent); }

.package-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: rgba(0,0,0,0.035);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.8em;
  margin-bottom: var(--space-sm);
}

.vehicle-size-info-btn { margin-top: var(--space-sm); }

.modal-inline-link {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.4em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-glow);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  display: inline-block;
}
.modal-inline-link:hover { color: #fff; }

/* ---------------------------------------------------------------------- */
/* 10. COMPARISON TABLE                                                   */
/* ---------------------------------------------------------------------- */
.comparison-wrap { margin-top: var(--space-2xl); }
.comparison-title { text-align: center; font-size: var(--fs-2xl); margin-bottom: var(--space-md); }
.comparison-scroll-hint { display: none; }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-light-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.comparison-table th, .comparison-table td {
  padding: 0.85em 1em;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-sm);
}
.comparison-table thead th {
  background: var(--gradient-dark);
  color: #fff;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comparison-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--text-dark);
}
.comparison-table tbody tr:nth-child(even) { background: rgba(239,27,27,0.04); }
.comparison-table td { color: var(--accent); font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* 11. SPECIALTY SERVICE CARDS                                            */
/* ---------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.service-card {
  background: linear-gradient(145deg, rgba(28,28,28,0.96), rgba(5,5,5,0.98));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 49, 49, 0.85);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 16px rgba(255, 49, 49, 0.25);
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  font-size: 1.15rem;
  border-radius: 50%;
  background: rgba(239, 27, 27, 0.14);
  border: 1px solid rgba(255, 49, 49, 0.35);
  margin-bottom: var(--space-xs);
}
.service-card h3 { font-size: var(--fs-lg); }
.service-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-black);
  background: var(--color-silver);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.6em;
  margin-left: 0.4em;
  vertical-align: middle;
}
.service-price { color: var(--accent-glow); font-weight: 800; margin-bottom: var(--space-xs); }
.service-level-picker { margin-bottom: var(--space-sm); }
.service-level-picker label { display: block; margin-bottom: 0.4em; }
.service-list { margin-bottom: var(--space-sm); }
.service-list li {
  font-size: var(--fs-sm);
  padding: 0.35em 0;
  color: var(--text-on-dark-muted);
  display: flex;
  gap: 0.5em;
}
.service-list li::before { content: '•'; color: var(--accent-glow); font-weight: 800; }
.service-note { font-size: var(--fs-xs); color: var(--text-on-dark-muted); flex-grow: 1; margin-bottom: var(--space-sm); }
.service-card-fleet { background: var(--gradient-primary); border-color: transparent; }
.service-card-fleet .service-note, .service-card-fleet .service-price { color: rgba(255,255,255,0.92); }

/* Same fix as .package-btn: long name + price labels (e.g. "Book Stain
   Removal — $129") must wrap instead of forcing their .services-grid /
   .plan-grid column wider than the other 1fr tracks, which pushes the
   row off the right edge on desktop. */
.service-btn { white-space: normal; }

/* ---------------------------------------------------------------------- */
/* 12. ADD-ONS                                                            */
/* ---------------------------------------------------------------------- */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.addon-chip {
  background: var(--bg-light-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.addon-chip:hover {
  box-shadow: var(--shadow-sm), 0 0 12px rgba(239, 27, 27, 0.18);
  border-color: var(--accent-light);
}
.addon-chip span { font-weight: 700; font-size: var(--fs-sm); color: var(--text-dark); }
.addon-chip small { color: var(--accent); font-weight: 700; font-size: var(--fs-xs); }

/* ---------------------------------------------------------------------- */
/* 14. BENEFIT CARDS                                                      */
/* ---------------------------------------------------------------------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.benefit-card {
  background: var(--bg-light-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 27, 27, 0.4);
  box-shadow: var(--shadow-md), 0 0 14px rgba(239, 27, 27, 0.15);
}
.benefit-icon {
  font-size: 2rem;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-sm);
  background: var(--gradient-primary);
  border-radius: 50%;
}
.benefit-card h3 { font-size: var(--fs-lg); }
.benefit-card p { font-size: var(--fs-sm); margin-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* 15. HOW IT WORKS STEPS                                                 */
/* ---------------------------------------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.step-card {
  position: relative;
  background: var(--bg-dark-alt);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
}
.step-number {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-primary);
}
.step-icon { font-size: 1.8rem; margin-bottom: var(--space-xs); }
.step-card h3 { font-size: var(--fs-lg); }
.step-card p { font-size: var(--fs-sm); margin-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* 16. SERVICE AREA                                                       */
/* ---------------------------------------------------------------------- */
.area-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.area-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.area-primary {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-dark);
}
.area-primary .area-label { margin-bottom: 0.2em; }
.area-label-secondary { margin: 0 0 var(--space-xs); }
.area-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em var(--space-sm);
  margin: 0 0 var(--space-md);
}
.area-list li {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-dark);
  padding: 0.5em 0.8em;
  background: var(--bg-light-alt);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.map-embed {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.map-note {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------- */
/* 17. REVIEWS                                                            */
/* ---------------------------------------------------------------------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.review-card {
  background: var(--bg-dark-alt);
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 49, 49, 0.5);
  box-shadow: 0 0 14px rgba(255, 49, 49, 0.15);
}
.review-stars { color: var(--accent-glow); font-size: var(--fs-lg); letter-spacing: 0.1em; margin-bottom: var(--space-xs); }
.review-placeholder-text { font-style: italic; color: var(--text-on-dark-muted); }
.review-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-on-dark); margin-bottom: 0; }
.reviews-cta { text-align: center; margin-top: var(--space-lg); }

/* ---------------------------------------------------------------------- */
/* 18. ABOUT                                                              */
/* ---------------------------------------------------------------------- */
.about-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}
.about-photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-primary);
}
.photo-placeholder {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-primary);
}

/* ---------------------------------------------------------------------- */
/* 19. MAINTENANCE PLANS                                                  */
/* ---------------------------------------------------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.plan-card {
  background: var(--bg-dark-alt);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.plan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 49, 49, 0.5);
  box-shadow: 0 0 14px rgba(255, 49, 49, 0.15);
}
.plan-card h3 { font-size: var(--fs-lg); }

/* ---------------------------------------------------------------------- */
/* 20. FAQ ACCORDION                                                      */
/* ---------------------------------------------------------------------- */
.accordion-item {
  border-bottom: 1px solid var(--border-light);
}
.accordion-header { margin: 0; }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-sm) 0.25em;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-dark);
}
.accordion-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.accordion-icon::before, .accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--accent);
  transition: transform var(--transition-fast);
}
.accordion-icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.accordion-icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: rotate(90deg); opacity: 0; }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}
.accordion-panel p { padding-bottom: var(--space-sm); margin: 0; }

/* ---------------------------------------------------------------------- */
/* 20b. LEGAL PAGE (Terms & Service Agreement)                            */
/* ---------------------------------------------------------------------- */
.legal-content > p:first-child { font-weight: 600; color: var(--text-dark); }
.legal-content p {
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
  line-height: 1.7;
}
.legal-content h2 {
  font-size: var(--fs-lg);
  margin: var(--space-lg) 0 var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
  color: var(--text-dark);
}
.legal-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--space-md); }
.legal-back-link { text-align: center; margin-top: var(--space-lg); }

/* ---------------------------------------------------------------------- */
/* 21. BOOKING FORM                                                       */
/* ---------------------------------------------------------------------- */
.booking-steps {
  display: flex;
  align-items: flex-start;
  max-width: 780px;
  margin: 0 auto var(--space-lg);
}
.booking-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  flex: 0 0 auto;
  width: 4.5rem;
}
.booking-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--border-dark);
  color: var(--text-on-dark-muted);
  font-weight: 800;
  font-size: var(--fs-sm);
  background: var(--bg-dark-alt);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.booking-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-on-dark-muted);
  text-align: center;
  transition: color var(--transition-fast);
}
.booking-step-dot.is-active .booking-step-num {
  border-color: var(--color-primary);
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(239, 27, 27, 0.18);
}
.booking-step-dot.is-active .booking-step-label { color: var(--text-on-dark); }
.booking-step-dot.is-complete .booking-step-num {
  border-color: var(--color-primary);
  background: transparent;
  color: var(--accent-glow);
}
.booking-step-dot.is-complete .booking-step-label { color: var(--text-on-dark-muted); }
.booking-step-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--border-dark);
  margin-top: 17px;
}

.booking-step-nav {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.booking-step-nav .booking-next-btn { flex: 1 1 auto; }
.booking-step-nav .booking-back-btn { flex: 0 0 auto; }
.booking-step-nav .btn-lg { flex: 1 1 auto; }

.service-summary-box {
  max-width: 780px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-dark-alt);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(239, 27, 27, 0.15);
}
.service-summary-box h3 { font-size: var(--fs-lg); color: var(--text-on-dark); margin-bottom: 0.3em; }
.service-summary-box p { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-bottom: var(--space-sm); }
.service-summary-box ul { list-style: none; margin: 0; padding: 0; }
.service-summary-box li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.5em 0;
  border-bottom: 1px dashed var(--border-dark);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}
.service-summary-box li:last-child {
  border-bottom: none;
  font-weight: 700;
  color: var(--text-on-dark);
}
.service-summary-box li span:last-child { color: var(--accent-glow); font-weight: 700; text-align: right; }

.booking-form {
  max-width: 780px;
  margin: 0 auto;
  background: var(--bg-dark-alt);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}
.form-fieldset legend {
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--text-on-dark);
  padding: 0 0 var(--space-sm);
  border-bottom: 1px solid var(--border-dark);
  width: 100%;
  margin-bottom: var(--space-sm);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-md);
}
.form-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6em;
  background: rgba(255,255,255,0.03);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}
.form-checkbox input { margin-top: 0.3em; width: 18px; height: 18px; flex-shrink: 0; }
.form-checkbox label { font-weight: 500; font-size: var(--fs-sm); }
.form-checkbox label a { color: var(--accent-glow); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.form-checkbox label a:hover { color: #fff; }

.addon-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.addon-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--form-border);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.addon-checkbox:hover { border-color: var(--form-border-focus); }
.addon-checkbox:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(239, 27, 27, 0.1);
}
.addon-checkbox input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
.addon-checkbox-name { flex-grow: 1; font-weight: 600; font-size: var(--fs-sm); color: var(--form-text); }
.addon-checkbox-price { font-weight: 700; font-size: var(--fs-xs); color: var(--accent-glow); white-space: nowrap; }

.form-confirmation {
  text-align: center;
  padding: var(--space-lg);
  margin-top: var(--space-md);
  background: rgba(239, 27, 27, 0.10);
  border: 1px solid var(--accent-light);
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
}
.form-confirmation svg { color: var(--accent-glow); margin: 0 auto var(--space-xs); }
.form-confirmation p { margin-bottom: 0; }

.respond-time-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.respond-time-option {
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--form-border);
  border-radius: var(--radius-sm);
  padding: 0.9em 1em;
  cursor: pointer;
  font-weight: 600;
  color: var(--form-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.respond-time-option:hover { border-color: var(--form-border-focus); }
.respond-time-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(239, 27, 27, 0.1);
}
.respond-time-option input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.direct-contact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  color: var(--accent-glow);
}
.contact-link:hover { color: #fff; }

/* ---------------------------------------------------------------------- */
/* 21b. CONTACT SECTION                                                   */
/* ---------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.contact-card {
  text-align: center;
  background: var(--bg-dark-alt);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--burgundy-bright);
  box-shadow: 0 10px 26px rgba(92, 26, 43, 0.35);
}
.contact-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  font-size: 1.4rem;
  border-radius: 50%;
  background: rgba(168, 54, 84, 0.16);
  border: 1px solid rgba(168, 54, 84, 0.4);
  margin-bottom: var(--space-xs);
}
.contact-card h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-on-dark-muted);
  margin-bottom: 0.4em;
}
.contact-card a {
  font-weight: 700;
  color: var(--text-on-dark);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.contact-card a:hover { color: var(--burgundy-bright); }
.contact-card p { color: var(--text-on-dark); margin: 0; font-weight: 600; font-size: var(--fs-sm); }

.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}
.contact-section .btn-secondary:hover {
  border-color: var(--burgundy-bright);
  color: var(--burgundy-bright);
  box-shadow: 0 0 10px rgba(168, 54, 84, 0.35), 0 0 22px rgba(168, 54, 84, 0.18);
}

/* ---------------------------------------------------------------------- */
/* 22. FOOTER                                                             */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--color-black);
  color: var(--text-on-dark-muted);
  padding: var(--space-2xl) 0 var(--space-md);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}
.footer-logo { display: flex; align-items: center; gap: 0.6em; margin-bottom: var(--space-sm); }
.footer-desc { font-size: var(--fs-sm); max-width: 280px; }
.footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  color: var(--text-on-dark-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.footer-social a:hover { border-color: var(--accent-light); color: var(--accent-glow); }

.footer-col h4 {
  color: #fff;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}
.footer-list li { margin-bottom: 0.6em; font-size: var(--fs-sm); }
.footer-tagline { color: var(--color-primary-bright); font-weight: 700; }
.footer-list a { color: var(--text-on-dark-muted); transition: color var(--transition-fast); overflow-wrap: anywhere; }
.footer-list a:hover { color: var(--accent-glow); }
.footer-link-btn {
  background: none;
  border: none;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
  padding: 0;
  text-align: left;
  transition: color var(--transition-fast);
}
.footer-link-btn:hover { color: var(--accent-glow); }

.footer-bottom {
  max-width: var(--container-max);
  margin: var(--space-lg) auto 0;
  padding: var(--space-md) var(--space-md) 0;
  border-top: 1px solid var(--border-dark);
  text-align: center;
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------------- */
/* 23. MODALS                                                             */
/* ---------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,7,13,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  position: relative;
  background: var(--bg-dark-alt);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 560px;
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  color: var(--text-on-dark);
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute;
  top: var(--space-sm); right: var(--space-sm);
  background: none;
  border: none;
  color: var(--text-on-dark-muted);
  font-size: 1.6rem;
  line-height: 1;
  width: 36px; height: 36px;
}
.modal-close:hover { color: #fff; }

/* ---------------------------------------------------------------------- */
/* 24. MOBILE ACTION BAR & BACK TO TOP                                    */
/* ---------------------------------------------------------------------- */
.mobile-action-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(5,5,5,0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 49, 49, 0.35);
  z-index: 400;
  align-items: stretch;
  justify-content: space-around;
}
.mobile-action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-on-dark-muted);
  font-size: 0.7rem;
  font-weight: 700;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.mobile-action-item:active,
.mobile-action-item:focus-visible {
  color: var(--color-primary-bright);
  background: rgba(239, 27, 27, 0.08);
}
.mobile-action-primary {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.15), 0 0 14px rgba(255,49,49,0.35);
}
.mobile-action-primary:active,
.mobile-action-primary:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-bright), var(--color-primary-dark));
}

.back-to-top {
  position: fixed;
  right: var(--space-sm);
  bottom: calc(var(--mobile-bar-h) + var(--space-sm));
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-primary);
  z-index: 400;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { transform: translateY(-3px); }

/* Floating desktop Book Now button — desktop/tablet only; the mobile
   action bar already covers this role on small screens. */
.floating-book-btn {
  position: fixed;
  right: var(--space-sm);
  bottom: calc(var(--mobile-bar-h) + var(--space-sm) + 46px + var(--space-sm));
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: var(--color-black);
  color: var(--text-on-dark);
  border: 1px solid rgba(255, 49, 49, 0.6);
  border-radius: var(--radius-pill);
  padding: 0.8em 1.3em;
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.floating-book-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.floating-book-btn:hover {
  border-color: var(--color-primary-bright);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}
.floating-book-btn[hidden] { display: none; }
@media (max-width: 768px) {
  .floating-book-btn { display: none; }
}

/* ---------------------------------------------------------------------- */
/* 25. SCROLL REVEAL ANIMATION                                            */
/* ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* ---------------------------------------------------------------------- */
/* 26. RESPONSIVE — TABLET (≤ 1024px)                                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Compact the header just enough that all 8 nav links fit on one line
     above the mobile hamburger breakpoint — same links, same order, just
     tighter spacing/type. Superseded entirely by the mobile hamburger
     menu once the ≤768px query below takes over. */
  .brand-logo--nav { height: 64px; }
  .nav-links { gap: 0.7rem; }
  .nav-links a { font-size: 0.85rem; }
  .nav-book-btn { padding: 0.55em 1em; font-size: 0.85rem; }

  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .addon-checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .area-layout { grid-template-columns: 1fr; }
  .about-layout { grid-template-columns: 1fr; }
  .photo-placeholder, .about-photo-img { max-width: 320px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------- */
/* 27. RESPONSIVE — MOBILE (≤ 768px)                                      */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-h: 78px;

    /* A slightly zoomed-out mobile scale — same type/spacing ratios as
       desktop, just dialed down a step so cards and sections don't each
       eat the whole viewport. Every component below already reads its
       sizing from these variables, so this is the single lever for the
       "more compact" pass rather than resizing each component by hand. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.375rem;

    --space-xs: 0.4rem;
    --space-sm: 0.75rem;
    --space-md: 1.125rem;
    --space-lg: 1.875rem;
    --space-xl: 2.75rem;
    --space-2xl: 3.5rem;
  }
  .brand-logo--nav { height: 58px; }
  h2 { font-size: var(--fs-2xl); }
  .btn { padding: 0.7em 1.3em; }
  .package-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .service-icon { width: 34px; height: 34px; font-size: 1rem; }

  .nav-links {
    position: fixed;
    top: calc(var(--header-h) + var(--announcement-h));
    left: 0; right: 0;
    background: var(--color-black);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    /* Vertical padding/border live only on .is-open — a fixed-position
       panel with max-height:0 still renders its padding-box and border
       even at zero height, which showed up as a permanent black strip
       stuck under the header regardless of scroll position. */
    padding: 0 var(--space-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    border-bottom: 0 solid var(--border-dark);
  }
  .nav-links.is-open {
    max-height: 80vh; max-height: 80dvh;
    overflow-y: auto;
    padding: var(--space-sm) var(--space-md);
    border-bottom-width: 1px;
  }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.9em 0; width: 100%; border-bottom: 1px solid var(--border-dark); min-height: 44px; }
  .nav-book-btn { display: none; }
  .hamburger { display: flex; width: 44px; height: 44px; }
  .section { padding: var(--space-2xl) 0; }

  /* Full-width buttons can have long labels (e.g. package/mold CTAs with
     prices baked in) — let them wrap to a second line instead of the
     desktop nowrap clipping the text. */
  .btn-block { white-space: normal; min-height: 48px; height: auto; text-align: center; }

  /* Services accordion (mobile only) */
  .nav-item-services { display: flex; flex-direction: column; }
  .nav-services-row {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--border-dark);
  }
  .nav-services-row a { flex: 1; width: auto; border-bottom: none; }
  .nav-services-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    flex-shrink: 0;
  }
  .nav-services-toggle span { position: relative; width: 12px; height: 12px; display: block; }
  .nav-services-toggle span::before,
  .nav-services-toggle span::after {
    content: '';
    position: absolute;
    background: #fff;
    transition: transform var(--transition-fast);
  }
  .nav-services-toggle span::before { top: 5px; left: 0; width: 12px; height: 2px; }
  .nav-services-toggle span::after { top: 0; left: 5px; width: 2px; height: 12px; }
  .nav-services-toggle[aria-expanded="true"] span::after { transform: scaleY(0); }

  .nav-services-submenu {
    display: block;
    max-height: 0;
    overflow: hidden;
    width: 100%;
    padding-left: var(--space-sm);
    transition: max-height var(--transition-base);
  }
  .nav-services-submenu.is-open { max-height: 600px; }
  .nav-services-submenu li { width: 100%; }
  .nav-services-submenu a {
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
    padding: 0.75em 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed var(--border-dark);
  }
  .nav-services-submenu li:last-child a { border-bottom: none; }

  .mobile-action-bar { display: flex; }
  body { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px)); }

  .hero { min-height: 70vh; min-height: 70dvh; }
  .trust-indicators { grid-template-columns: 1fr 1fr; }

  .package-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .addon-grid { grid-template-columns: 1fr 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .addon-checkbox-grid { grid-template-columns: 1fr; }
  .area-list { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-cta-row { flex-direction: column; align-items: stretch; }
  .form-grid { grid-template-columns: 1fr; }

  /* Comparison table on mobile: a stacked card per row (13 rows × 5 lines
     each) ran several screens tall. A compact horizontally-scrollable
     table keeps every row to a single compact line instead, cutting the
     section's height dramatically while keeping all the same data. The
     service-name column stays pinned so it's still readable while
     swiping through the price columns. */
  .comparison-scroll-hint {
    display: block;
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: -0.4em 0 0.4em;
  }
  .comparison-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .comparison-table {
    min-width: 540px;
    box-shadow: none;
    border-radius: 0;
  }
  .comparison-table th, .comparison-table td {
    padding: 0.5em 0.6em;
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .section { padding: 2.5rem 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .addon-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { width: 100%; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .contact-grid { grid-template-columns: 1fr; }
  .mold-free-cta { flex-direction: column; align-items: stretch; }
  .mold-free-cta .btn { width: 100%; }

  /* Footer reads better centered once it collapses to one column */
  .footer-col { text-align: center; }
  .footer-logo { justify-content: center; }
  .footer-social { justify-content: center; }
  .footer-desc { margin-left: auto; margin-right: auto; }
}