/* =========================================================================
   Regency Auto Protection — Design Tokens & Base Styles
   Palette: monochrome black/white (matches the business's actual black &
   white branding/logo) — no blur/glass effects that would hurt performance
   on low-end mobile devices.
   Type: Space Grotesk (headings) + Inter (body) — both variable-weight
   Google Fonts, loaded with font-display: swap via enqueue.php.

   "Accent" is contextual, not a fixed hue: it's black on light sections and
   white on dark sections, so buttons/links/icons always read as a strong
   black-or-white "pop" against whatever they sit on, instead of one color
   that has to compromise contrast against both. The default values below
   are the light-section values; the block right after flips them for every
   dark-background container (hero, header, footer, dark sections, etc).
   ========================================================================= */

:root {
  /* Color: dark (default brand surfaces — hero, footer, dark sections) */
  --color-ink: #0B0D10;
  --color-ink-raised: #15181D;
  --color-ink-border: rgba(255, 255, 255, 0.09);
  --color-on-ink: #F4F5F7;
  --color-on-ink-muted: #9AA3B0;

  /* Color: light (content sections) */
  --color-paper: #FFFFFF;
  --color-paper-alt: #F5F6F8;
  --color-paper-border: #E3E6EB;
  --color-on-paper: #10131A;
  --color-on-paper-muted: #5B6472;

  /* Brand accent — light-section default (black pop on white/light bg) */
  --color-accent: var(--color-ink);
  --color-accent-hover: #2B2F36;
  --color-accent-soft: rgba(11, 13, 16, 0.07);
  --color-on-accent: #FFFFFF;

  /* Rich red — ad-landing-page accent only (see .lp-body override below) */
  --color-rich-red: #8C1414;
  --color-rich-red-hover: #6E0F0F;

  /* Status */
  --color-star: #F5B301;
  --color-success: #1E9E64;
  --color-danger: #DC2626;

  /* Typography */
  --font-heading: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  /* Spacing scale (8px base) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(16, 19, 26, 0.04), 0 8px 24px rgba(16, 19, 26, 0.06);
  --shadow-raised: 0 12px 32px rgba(11, 13, 16, 0.35);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  --container-width: 1240px;
  --header-height: 76px;
}

/* Dark-section flip: white pop instead of black, on every dark-background
   container. Anything inside these that reads var(--color-accent) etc.
   automatically gets the white values via normal CSS inheritance. */
.hero,
.site-header,
.mobile-nav-panel,
.section--dark,
.site-footer,
.cta-band,
.page-hero,
.deep-dive,
.lp-hero,
.mobile-action-bar {
  --color-accent: #FFFFFF;
  --color-accent-hover: #DADDE2;
  --color-accent-soft: rgba(255, 255, 255, 0.14);
  --color-on-accent: var(--color-ink);
}

/* Ad landing pages only: rich red accent instead of the sitewide black/white
   pop, on both light and dark contexts. Higher specificity than the two
   blocks above so it wins regardless of source order. */
.lp-body .hero,
.lp-body .section--dark {
  --color-accent: var(--color-rich-red);
  --color-accent-hover: var(--color-rich-red-hover);
  --color-accent-soft: rgba(140, 20, 20, 0.16);
  --color-on-accent: #FFFFFF;
}

/* =========================================================================
   Reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-on-paper);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* Visible focus rings everywhere — required for keyboard accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* =========================================================================
   Layout
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }
.section--dark { background: var(--color-ink); color: var(--color-on-ink); }
.section--alt { background: var(--color-paper-alt); }

/* Faint full-bleed car photo behind a section, instead of a flat gradient —
   set --section-photo: url(...) inline per instance. Grayscale + very low
   opacity keeps it a texture, not competing with foreground content; the
   ::before must stay behind .container, which needs its own stacking
   context since a static/z-index:auto descendant paints under a positioned
   sibling by default. */
.section--photo-bg { position: relative; }
.section--photo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--section-photo, none);
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05);
  opacity: var(--section-photo-opacity, 0.08);
  pointer-events: none;
}
.section--photo-bg > .container { position: relative; z-index: 1; }

.section-head { max-width: 640px; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--color-accent);
  display: inline-block;
}

.section-title { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.section-lede { font-size: var(--text-lg); color: var(--color-on-paper-muted); }
.section--dark .section-lede { color: var(--color-on-ink-muted); }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-sm);
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-hover); }

.btn--ghost-dark { background: transparent; border-color: rgba(255,255,255,0.28); color: var(--color-on-ink); }
.btn--ghost-dark:hover { border-color: var(--color-on-ink); background: rgba(255,255,255,0.06); }

.btn--ghost-light { background: transparent; border-color: var(--color-paper-border); color: var(--color-on-paper); }
.btn--ghost-light:hover { border-color: var(--color-on-paper); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.65rem 1.2rem; font-size: var(--text-xs); }

.btn-icon { width: 1em; height: 1em; flex-shrink: 0; }

/* =========================================================================
   Header / Nav
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(4, 5, 7, 0.98);
  border-bottom: 1px solid var(--color-ink-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Wider than the shared content container: with 8 nav items + logo +
     phone + CTA button, 1240px isn't enough room and nav labels wrap
     onto two lines ("Ceramic Coating" breaking mid-phrase). */
  max-width: 1360px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-on-ink);
}
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.brand--footer .brand-logo { height: 52px; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-menu a {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-on-ink-muted);
  transition: color var(--duration-fast) var(--ease-standard);
  position: relative;
}
.nav-menu a:hover,
.nav-menu a.is-active { color: var(--color-on-ink); }
.nav-menu a.is-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-on-ink);
  font-size: var(--text-sm);
}
.header-phone svg { width: 18px; height: 18px; color: var(--color-accent); }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-on-ink);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-on-ink);
  padding-block: var(--space-9) var(--space-8);
  overflow: hidden;
}
.lp-body .hero { background: #000000; }
.lp-hero-photo {
  position: absolute;
  inset: 0;
  background-image: var(--section-photo, none);
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.22;
  pointer-events: none;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(255, 255, 255, 0.09), transparent 70%),
    radial-gradient(45% 40% at 10% 95%, rgba(255, 255, 255, 0.05), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; }

/* Cursor-following spotlight glow -- JS adds .spotlight-surface + updates
   --spot-x/--spot-y on mousemove (desktop/pointer:fine only). Sits above the
   static ::before glow but must stay below real content, hence the explicit
   z-index above rather than relying on DOM order. */
.spotlight-surface { position: relative; }
.spotlight-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.10), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.spotlight-surface.has-spotlight::after { opacity: 1; }

.hero-copy h1 { font-size: var(--text-5xl); margin-bottom: var(--space-3); }
.hero-copy .accent-word { color: var(--color-accent); }

/* Ad landing pages only: animated shimmer sweep across the accent words --
   a light band pans left to right on a loop, rather than a flat fill. */
.lp-body .hero-copy .accent-word {
  background-image: linear-gradient(90deg, var(--color-rich-red) 0%, var(--color-rich-red) 35%, #FF6B5E 50%, var(--color-rich-red) 65%, var(--color-rich-red) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lp-text-shimmer 3.5s ease-in-out infinite;
}
@keyframes lp-text-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-body .hero-copy .accent-word { animation: none; background-position: 0 0; }
}
.hero-copy p.lede { font-size: var(--text-lg); color: var(--color-on-ink-muted); max-width: 44ch; margin-bottom: var(--space-5); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }

.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-trust-item { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-on-ink-muted); }
.hero-trust-item svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(155deg, rgba(255,255,255,0.14), rgba(11,13,16,0) 60%),
    repeating-linear-gradient(135deg, #1B1F26 0 2px, #171A20 2px 26px);
  border: 1px solid var(--color-ink-border);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}
.hero-visual-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Autoplays muted as soon as it scrolls into view (see main.js); this is a
   small corner tap target to unmute, not a full-cover play button -- the
   video is already playing by the time a visitor could reach for it. */
.hero-visual-play {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.hero-visual-play:hover { background: rgba(11, 13, 16, 0.75); transform: scale(1.06); }
.hero-visual-play svg { width: 20px; height: 20px; }
.hero-visual.is-playing .hero-visual-play { display: none; }

.hero-visual-badge {
  position: relative;
  z-index: 1;
  background: rgba(11,13,16,0.75);
  border: 1px solid var(--color-ink-border);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  width: 100%;
  pointer-events: none;
}
.hero-visual-badge .label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-ink-muted); }
.hero-visual-badge .value { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; margin-top: 4px; }
.hero-visual-badge .ig-link { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-accent); font-weight: 600; margin-top: 6px; }
.hero-visual-badge .ig-link svg { width: 13px; height: 13px; }

/* =========================================================================
   Cards
   ========================================================================= */
.card {
  background: var(--color-paper);
  color: var(--color-on-paper);
  border: 1px solid var(--color-paper-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }

.service-card { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.service-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
}
.service-card-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: var(--text-xl); }
.service-card p { color: var(--color-on-paper-muted); font-size: var(--text-sm); flex-grow: 1; }
.service-card .card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); margin-top: var(--space-1); }
.service-card .card-link svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
.service-card:hover .card-link svg { transform: translateX(4px); }

/* Service card v2: photo + overlapping diamond icon badge + centered copy +
   full-bleed CTA button flush to the card edges. Used for the homepage
   "What We Do" grid. overflow:hidden on the card clips the photo's top
   corners and the button's bottom corners to the card's own radius; the
   icon badge overlaps that boundary but stays within the card's total
   height (it overlaps into the body's top padding, not outside the card). */
.service-card-v2 {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-paper-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.service-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.scv2-media { position: relative; }
.scv2-photo {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(11,13,16,0.05), transparent 55%),
    repeating-linear-gradient(135deg, var(--color-paper-alt) 0 2px, #ECEEF1 2px 26px);
  overflow: hidden;
}
.scv2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scv2-icon {
  position: absolute;
  right: 20px;
  bottom: -26px;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--color-ink);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.scv2-icon svg { width: 26px; height: 26px; color: #fff; transform: rotate(-45deg); }

.scv2-body { padding: var(--space-5) var(--space-3) var(--space-3); text-align: center; flex-grow: 1; }
.scv2-body h3 { font-size: var(--text-lg); margin-bottom: 8px; }
.scv2-body p { font-size: var(--text-sm); color: var(--color-on-paper-muted); }

.scv2-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-ink);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 14px;
  /* Fixed, not contextual: this bar is always dark (var(--color-ink) above)
     regardless of the section it sits in, so it needs a separator that
     always contrasts against black -- not var(--color-accent), which would
     resolve to black-on-light-sections and vanish against this always-dark
     background. */
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  transition: background var(--duration-fast) var(--ease-standard);
}
.service-card-v2:hover .scv2-cta { background: #24272C; }
.scv2-cta-arrow {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.scv2-cta-arrow svg { width: 12px; height: 12px; }
.service-card-v2:hover .scv2-cta-arrow { transform: translateX(3px); }

.scv2-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--color-ink);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* Default: compact horizontal icon+text row — used in the Book a Quote
   contact sidebar, where a tall stacked layout would look cramped in a
   narrow card. */
.feature-item { display: flex; gap: var(--space-3); }
.feature-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-ink-raised);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-item h3 { font-size: var(--text-base); margin-bottom: 4px; }
.feature-item p { font-size: var(--text-sm); color: var(--color-on-ink-muted); }

/* Grid variant: icon stacked above text — used in "Why Choose Us" style
   feature grids (homepage, About) where a side-by-side icon+text row gets
   too narrow once the column splits 2-4 ways. */
.feature-item--stacked { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.feature-item--stacked p { max-width: 32ch; }

.testimonial-card { display: flex; flex-direction: column; gap: var(--space-2); }
.stars { display: flex; gap: 2px; color: var(--color-star); }
.stars svg { width: 16px; height: 16px; }
.testimonial-card p.quote { font-size: var(--text-base); color: var(--color-on-paper); }
.testimonial-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent-soft); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm);
}
.testimonial-name { font-weight: 600; font-size: var(--text-sm); }
.testimonial-sub { font-size: var(--text-xs); color: var(--color-on-paper-muted); }

/* Homepage testimonial marquee: an auto-scrolling, right-to-left strip of
   review cards on a slight fixed 3D angle. The track renders the review
   list twice back to back and animates exactly -50% so the loop is
   seamless; pausing on hover/focus lets a visitor actually read one.
   The mouse-tracked tilt in main.js still runs on these same
   .testimonial-card elements -- its inline transform on hover simply
   overrides the resting rotateY below, and clears back to it on
   mouseleave. */
.testimonial-marquee { overflow: hidden; perspective: 1400px; }
.testimonial-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: testimonial-scroll 42s linear infinite;
}
.testimonial-marquee:hover .testimonial-track,
.testimonial-marquee:focus-within .testimonial-track {
  animation-play-state: paused;
}
.testimonial-track .testimonial-card {
  flex: 0 0 360px;
  transform: perspective(1000px) rotateY(-6deg);
  transition: transform var(--duration-base) var(--ease-standard);
}
.testimonial-track .testimonial-card p.quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
@keyframes testimonial-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
}

.stat-item { text-align: center; }
.stat-value { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; color: var(--color-accent); }
.stat-label { font-size: var(--text-sm); color: var(--color-on-ink-muted); margin-top: 4px; }

/* =========================================================================
   Process / steps
   ========================================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); counter-reset: step; }
.step { position: relative; padding-top: var(--space-5); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-2);
}
.step h3 { font-size: var(--text-base); margin-bottom: 4px; }
.step p { font-size: var(--text-sm); color: var(--color-on-paper-muted); }
.section--dark .step p { color: var(--color-on-ink-muted); }

/* =========================================================================
   Pricing / packages
   ========================================================================= */
.pricing-card {
  background: var(--color-paper);
  border: 1px solid var(--color-paper-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing-card--featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-card);
  position: relative;
}
.pricing-badge {
  position: absolute;
  top: -14px;
  left: var(--space-4);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.pricing-name { font-size: var(--text-lg); font-weight: 700; }
.pricing-sale-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 4px;
}
.pricing-price { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; }
.pricing-price span { font-size: var(--text-sm); font-weight: 500; color: var(--color-on-paper-muted); }
.pricing-original {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-on-paper-muted);
  text-decoration: line-through;
  margin-right: 6px;
}
.pricing-note { font-size: var(--text-xs); color: var(--color-on-paper-muted); }
.pricing-disclaimer { text-align: center; font-size: var(--text-sm); color: var(--color-on-paper-muted); margin-top: var(--space-4); }
.pricing-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.pricing-list li { display: flex; gap: 8px; font-size: var(--text-sm); align-items: flex-start; }
.pricing-list svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

/* =========================================================================
   Forms
   ========================================================================= */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: var(--text-sm); font-weight: 600; }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-paper-border);
  background: var(--color-paper);
  color: var(--color-on-paper);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-hint { font-size: var(--text-xs); color: var(--color-on-paper-muted); }
.rap-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.form-alert--success { background: rgba(30, 158, 100, 0.1); color: #16794D; border: 1px solid rgba(30,158,100,0.3); }
.form-alert--error { background: rgba(220, 38, 38, 0.08); color: var(--color-danger); border: 1px solid rgba(220,38,38,0.25); }

/* =========================================================================
   FAQ accordion
   ========================================================================= */
.accordion-item { border-bottom: 1px solid var(--color-paper-border); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-on-paper);
}
.accordion-icon { flex-shrink: 0; width: 22px; height: 22px; transition: transform var(--duration-base) var(--ease-standard); }
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-standard);
}
.accordion-panel-inner { padding-bottom: var(--space-4); color: var(--color-on-paper-muted); font-size: var(--text-base); max-width: 68ch; }
.section--dark .accordion-item { border-bottom-color: var(--color-ink-border); }
.section--dark .accordion-trigger { color: var(--color-on-ink); }
.section--dark .accordion-panel-inner { color: var(--color-on-ink-muted); }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band {
  background: var(--color-ink);
  color: var(--color-on-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 90% at 100% 0%, rgba(255,255,255,0.14), transparent 70%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--text-2xl); margin-bottom: 4px; }
.cta-band p { color: var(--color-on-ink-muted); }
.cta-band-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--color-ink); color: var(--color-on-ink-muted); padding-block: var(--space-7) var(--space-5); font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-ink-border); margin-bottom: var(--space-4); }
.footer-brand p { max-width: 34ch; margin-top: var(--space-2); }
.footer-heading { font-family: var(--font-heading); color: var(--color-on-ink); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a { transition: color var(--duration-fast) var(--ease-standard); }
.footer-links a:hover { color: var(--color-on-ink); }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--color-ink-border);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.footer-social a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

/* =========================================================================
   Sticky mobile action bar (call + book) — hidden on desktop
   ========================================================================= */
.mobile-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--color-ink);
  border-top: 1px solid var(--color-ink-border);
  padding: 10px var(--space-3);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: var(--space-2);
}
.mobile-action-bar a { flex: 1; }

/* =========================================================================
   Motion-ready utility classes
   Default state is fully visible — JS (main.js) only adds the animated
   entrance when GSAP is available and the user hasn't requested reduced
   motion. This means the page is 100% usable/readable with JS disabled.
   ========================================================================= */
.reveal, .stagger-parent > * { opacity: 1; }
.js-motion-ready .reveal { opacity: 0; }
.js-motion-ready .stagger-parent > * { opacity: 0; }

/* =========================================================================
   Page hero (service/inner pages — shorter than homepage hero)
   ========================================================================= */
.page-hero { position: relative; background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--space-8) var(--space-6); }
.page-hero .eyebrow { color: var(--color-accent); }
.page-hero--video { overflow: hidden; }
.page-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Keeps the white headline/body text readable regardless of what's
   playing behind it -- without this a bright frame of the video could
   wash out the text. */
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 13, 16, 0.6);
  z-index: 1;
}
.page-hero--video .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: var(--text-4xl); max-width: 20ch; }
.page-hero p.lede { font-size: var(--text-lg); color: var(--color-on-ink-muted); max-width: 60ch; margin-top: var(--space-2); }
.breadcrumbs { display: flex; gap: 8px; font-size: var(--text-xs); color: var(--color-on-ink-muted); margin-bottom: var(--space-3); }
.breadcrumbs a:hover { color: var(--color-on-ink); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.two-col-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(11,13,16,0.05), transparent 55%),
    repeating-linear-gradient(135deg, var(--color-paper-alt) 0 2px, #ECEEF1 2px 26px);
  border: 1px solid var(--color-paper-border);
  overflow: hidden;
}
.two-col-media.is-dark {
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,0.1), transparent 55%),
    repeating-linear-gradient(135deg, #1B1F26 0 2px, #171A20 2px 26px);
  border-color: var(--color-ink-border);
}
.two-col-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Used where the media is a real portrait-shot photo (not a placeholder) --
   matches the hero video's 4/5 ratio instead of the default 4/3, so a tall
   photo isn't cropped down to a short landscape strip. */
.two-col-media--tall { aspect-ratio: 4/5; }

.checklist { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-base); }
.checklist svg { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* =========================================================================
   Deep-dive panel: a bordered, framed section for expanded per-service
   education content -- visually distinct from the plain dark sections
   elsewhere on the page so it reads as a deliberate "spec sheet" moment,
   not just another block of dark background.
   ========================================================================= */
.deep-dive { background: var(--color-ink); color: var(--color-on-ink); }
.deep-dive-panel {
  position: relative;
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(255,255,255,0.06), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 28px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-7);
  align-items: center;
  overflow: hidden;
}
.deep-dive-body p { color: var(--color-on-ink-muted); font-size: var(--text-base); margin-top: var(--space-2); }
.deep-dive-body .checklist { margin-top: var(--space-4); }
.deep-dive-body .checklist li { color: var(--color-on-ink); }
.deep-dive-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-left: 1px solid var(--color-ink-border);
  padding-left: var(--space-6);
}
.deep-dive-stat-value { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-accent); line-height: 1; }
.deep-dive-stat-label { font-size: var(--text-sm); color: var(--color-on-ink-muted); margin-top: 6px; }

/* =========================================================================
   Responsive breakpoints: 1440 desktop-wide (default above), 1024, 768, 375
   ========================================================================= */
@media (max-width: 1240px) {
  .container { padding-inline: var(--space-4); }
}

@media (max-width: 1024px) {
  :root { --text-5xl: 3rem; --text-4xl: 2.5rem; --header-height: 68px; }
  .hero .container { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .deep-dive-panel { grid-template-columns: 1fr; padding: var(--space-5); }
  .deep-dive-stats { border-left: none; border-top: 1px solid var(--color-ink-border); padding-left: 0; padding-top: var(--space-4); flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }
}

@media (max-width: 768px) {
  .nav-menu, .header-phone-wrap { display: none; }
  .nav-toggle { display: flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .section { padding-block: var(--space-7); }
  .hero { padding-block: var(--space-7) var(--space-6); }
  .hero-copy h1 { font-size: var(--text-4xl); }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .mobile-action-bar { display: flex; }
  body { padding-bottom: 72px; } /* room for sticky action bar */
  .pricing-card--featured { transform: none; }
}

@media (max-width: 375px) {
  :root { --text-4xl: 2.1rem; --text-3xl: 1.75rem; }
  .container { padding-inline: var(--space-3); }
}

/* Mobile nav panel */
.mobile-nav-panel {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-ink);
  z-index: 49;
  padding: var(--space-5) var(--space-4);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
  overflow-y: auto;
}
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-panel .nav-menu { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.mobile-nav-panel .nav-menu a { font-size: var(--text-xl); padding: var(--space-2) 0; }
.mobile-nav-panel .header-phone { margin-top: var(--space-4); font-size: var(--text-lg); }

/* =========================================================================
   Ad landing pages (Meta/paid traffic) -- deliberately no site nav: a
   single scrolling path to one action (call or fill the form), no menu
   links to click away on.

   Structured to match a closing-focused reference layout the client
   provided: centered pill badges + centered headlines throughout, a large
   bordered hero media panel, repeated icon-card grids (benefits/features/
   process), a photo+checklist "personalized process" card, a trust-badge
   row, a bordered form panel, a two-column FAQ, and a bright closing band
   -- all rendered in the site's real black/white brand (no color accent),
   using real Regency photography in place of any reference imagery.
   ========================================================================= */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(4, 5, 7, 0.98);
  border-bottom: 1px solid var(--color-ink-border);
  padding-block: var(--space-3);
}
.lp-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.lp-header .brand-logo { height: 40px; width: auto; }

.lp-footer {
  background: var(--color-ink);
  color: var(--color-on-ink-muted);
  text-align: center;
  padding-block: var(--space-5);
  font-size: var(--text-sm);
}
.lp-footer a { color: var(--color-on-ink); font-weight: 600; }
.lp-footer p + p { margin-top: 4px; }

/* Every section head on these pages is centered, including the intro
   above two-column layouts -- unlike the rest of the site, which keeps
   headings inside whichever column they belong to. */
.lp-section-head-center { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-6); }
.lp-section-head-center .section-lede { margin-inline: auto; }

/* Centered pill badge, used for every eyebrow on these pages instead of
   the sitewide dash-prefixed label. */
.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-ink-border);
  background: var(--color-ink-raised);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-ink-muted);
  margin-bottom: var(--space-3);
}
.lp-pill strong { color: var(--color-on-ink); }
.lp-pill .stars { display: inline-flex; gap: 1px; }
.lp-pill .stars svg { width: 14px; height: 14px; }
.lp-section--light .lp-pill { border-color: var(--color-paper-border); background: var(--color-paper-alt); color: var(--color-on-paper-muted); }
.lp-section--light .lp-pill strong { color: var(--color-on-paper); }

/* White section for alternation against the default dark sections. */
.lp-section--light { background: var(--color-paper); color: var(--color-on-paper); }
.lp-section--light .section-lede { color: var(--color-on-paper-muted); }

/* Large bordered hero media panel with a caption chip overlaid bottom-
   left, instead of the sitewide .hero-visual's padding+badge treatment. */
.lp-hero-media {
  position: relative;
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-ink-border);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
}
.lp-hero-media img, .lp-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero-caption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  background: rgba(11, 13, 16, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-ink-border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-on-ink);
}
@media (max-width: 768px) { .lp-hero-media { aspect-ratio: 4 / 5; } }

/* Lead form in the hero, sized to match rather than a separate card. */
.lp-hero-form { max-width: 480px; margin-inline: auto; text-align: left; }
.lp-consent { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-xs); color: var(--color-on-ink-muted); margin-top: var(--space-2); }
.lp-consent input { margin-top: 3px; accent-color: var(--color-accent); }
.lp-section--light .lp-consent { color: var(--color-on-paper-muted); }
.lp-consent a { color: inherit; text-decoration: underline; }

/* Testimonial marquee under the hero form. */
.lp-hero-reviews { margin-top: var(--space-5); max-width: 100%; }
.lp-hero-reviews .testimonial-track .card { flex: 0 0 280px; }

/* .card renders solid white regardless of section; this local flip keeps
   a .btn--accent inside it legible when the card sits in a dark section. */
.lp-form-card { --color-accent: var(--color-ink); --color-accent-hover: #24272C; --color-on-accent: #FFFFFF; }

/* Icon-square card, reused for the benefits / features / process grids --
   the one repeating "designed" unit across the page. */
.lp-icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.lp-icon-card {
  background: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.lp-icon-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
}
.lp-icon-card:hover .lp-icon-badge {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.lp-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-ink);
  transition: background 0.25s ease, color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.lp-icon-badge svg { width: 20px; height: 20px; }
.lp-icon-card h3 { font-size: var(--text-base); margin-bottom: 4px; }
.lp-icon-card p { font-size: var(--text-sm); color: var(--color-on-ink-muted); }
.lp-section--light .lp-icon-card { background: var(--color-paper-alt); border-color: var(--color-paper-border); }
.lp-section--light .lp-icon-card p { color: var(--color-on-paper-muted); }
.lp-section--light .lp-icon-badge { background: var(--color-ink); color: #fff; }
/* !important below is deliberate: several instances of .lp-icon-grid carry
   an inline style="grid-template-columns: repeat(N, 1fr)" to control the
   desktop column count. Inline styles normally beat external stylesheet
   rules regardless of media query, which would force that same column
   count on narrow phones too and break the layout (horizontal overflow).
   !important is the only way for these breakpoints to win over an inline
   style, guaranteeing mobile safety no matter what column count any
   instance, present or future, sets inline for desktop. */
@media (max-width: 900px) { .lp-icon-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .lp-icon-grid { grid-template-columns: 1fr !important; } }

/* Bordered intro/highlight paragraph box, used above the icon grids. */
.lp-highlight-box {
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.02);
  max-width: 760px;
  margin: 0 auto var(--space-6);
  text-align: center;
  color: var(--color-on-ink-muted);
}
.lp-section--light .lp-highlight-box { background: var(--color-paper-alt); border-color: var(--color-paper-border); color: var(--color-on-paper-muted); }

/* "Personalized process" split card: photo (with a badge) on top, a small
   label strip, title, description, checklist -- one bordered unit. */
.lp-split-card { border: 1px solid var(--color-ink-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-ink-raised); }
.lp-split-card-media { position: relative; aspect-ratio: 4 / 3; }
.lp-split-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-split-card-badge { position: absolute; top: var(--space-3); left: var(--space-3); background: #fff; color: var(--color-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }
.lp-split-card-label { padding: var(--space-3) var(--space-4) 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-on-ink-muted); }
.lp-split-card-label strong { color: var(--color-on-ink); }
.lp-split-card-body { padding: var(--space-2) var(--space-4) var(--space-4); }
.lp-split-card-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.lp-split-card-body p { color: var(--color-on-ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }

/* Trust-badge row (3 small square cards: icon, bold word, caption). */
.lp-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.lp-trust-badge { background: var(--color-ink-raised); border: 1px solid var(--color-ink-border); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; }
.lp-trust-badge svg { width: 22px; height: 22px; color: var(--color-on-ink); }
.lp-trust-badge strong { display: block; font-size: var(--text-sm); font-weight: 700; margin-top: 6px; }
.lp-trust-badge span { font-size: var(--text-xs); color: var(--color-on-ink-muted); }

/* Bordered form panel used for the final CTA (sits inside a
   .section--photo-bg parent for the faint background photo). */
.lp-form-panel {
  position: relative;
  z-index: 1;
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: rgba(11, 13, 16, 0.75);
  backdrop-filter: blur(6px);
}
.lp-form-panel .form-field label { color: var(--color-on-ink); }
.lp-form-panel .form-field input,
.lp-form-panel .form-field select,
.lp-form-panel .form-field textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-ink-border);
  color: var(--color-on-ink);
}
.lp-form-panel .lp-consent { color: var(--color-on-ink-muted); }

/* Two-column FAQ with a circular chevron instead of the sitewide plain +. */
.lp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lp-faq-grid .accordion-item { border: 1px solid var(--color-ink-border); border-radius: var(--radius-md); padding-inline: var(--space-4); }
.lp-faq-grid .accordion-trigger { padding-block: var(--space-3); }
.lp-faq-grid .accordion-panel-inner { padding-bottom: var(--space-3); }
.lp-faq-grid .accordion-icon-circle { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-section--light .lp-faq-grid .accordion-item { border-color: var(--color-paper-border); }
.lp-section--light .lp-faq-grid .accordion-icon-circle { background: var(--color-paper-alt); }
@media (max-width: 768px) { .lp-faq-grid { grid-template-columns: 1fr; } }

/* Bright closing band -- Caruso's uses a saturated blue gradient here;
   Regency's equivalent "pop" moment is white-on-black instead of another
   color, keeping the black/white brand intact. */
.lp-bright-band { background: linear-gradient(160deg, #FFFFFF 0%, #E3E6EB 100%); color: var(--color-ink); text-align: center; padding-block: var(--space-8); }
.lp-bright-band .section-title { color: var(--color-ink); }
.lp-bright-band p { color: var(--color-on-paper-muted); max-width: 56ch; margin-inline: auto; }
.lp-bright-band .btn--accent { background: var(--color-ink); color: #fff; }
.lp-bright-band .btn--accent:hover { background: #24272C; }

/* =========================================================================
   Reduced motion: disable all non-essential animation/transition
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .stagger-parent > * { opacity: 1 !important; transform: none !important; }
}