/*
  Warm / Organic theme — scoped overrides applied only under `.beta-warm-theme`.
  Maps the base site's `primary` and `accent` and stray blue/yellow stops to
  the ASI Warm brand palette (yellow has been removed; warm highlights now
  come from Orange and Dark Beige):
    Navy        #325472
    Azure       #2B5F8A
    Orange      #DE7F2C
    Paper Beige #F3E3D2
    Dark Beige  #E2B585
    Sage Green  #63776B
    Slate       #303F4E
    Warm White  #F9F7F4
    Off-Black   #2C2C2C
  Typography: Libre Baskerville (headers), Montserrat (body), Yellowtail (flourish).
*/

/* Logo swap — show light logo in light mode, dark logo in dark mode. */
.beta-warm-theme .warm-logo-dark { display: none; }
.beta-warm-theme .warm-logo-light { display: inline-block; }
.beta-warm-theme.dark .warm-logo-dark { display: inline-block; }
.beta-warm-theme.dark .warm-logo-light { display: none; }

.beta-warm-theme {
  --w-navy: #325472;
  --w-navy-700: #294664;
  --w-navy-800: #1f3650;
  --w-navy-50: #eef2f6;
  --w-navy-100: #dbe3ec;
  --w-navy-200: #b9c7d6;
  --w-navy-300: #8ea4bb;

  --w-azure: #2b5f8a;
  --w-azure-700: #1f4a6e;

  --w-orange: #de7f2c;
  --w-orange-600: #c06a1e;
  --w-orange-700: #a05716;
  --w-orange-50: #fbeede;
  --w-orange-100: #f7ddbf;
  --w-orange-200: #f1c492;

  /* Yellow has been retired from the warm palette. Aliases below preserve
     existing references but resolve to dark-beige / orange values. */
  --w-yellow: var(--w-dark-beige);
  --w-yellow-100: #f1d4ad;

  --w-paper: #f3e3d2;
  --w-paper-soft: #f8ede0;
  --w-dark-beige: #e2b585;
  --w-sage: #63776b;
  --w-slate: #303f4e;
  --w-warm-white: #f9f7f4;
  --w-off-black: #2c2c2c;

  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--w-off-black);
  background-color: var(--w-paper);
}

/* Legacy synthetic dot pattern — kept for fallback */
/*
.beta-warm-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(160, 120, 80, 0.07) 1px, transparent 1px),
    radial-gradient(rgba(160, 120, 80, 0.05) 1px, transparent 1px);
  background-size: 22px 22px, 37px 37px;
  background-position: 0 0, 11px 11px;
  mix-blend-mode: multiply;
}
*/

.beta-warm-theme h1,
.beta-warm-theme h2,
.beta-warm-theme h3,
.beta-warm-theme h4,
.beta-warm-theme h5,
.beta-warm-theme h6 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--w-navy);
}

/* Headings inherit when a Tailwind color class is present on the heading
   itself or on an ancestor — otherwise the default navy color above wins
   the specificity fight and headings disappear on dark navy sections. */
.beta-warm-theme h1.text-white,
.beta-warm-theme h2.text-white,
.beta-warm-theme h3.text-white,
.beta-warm-theme h4.text-white,
.beta-warm-theme h5.text-white,
.beta-warm-theme h6.text-white,
.beta-warm-theme .text-white h1,
.beta-warm-theme .text-white h2,
.beta-warm-theme .text-white h3,
.beta-warm-theme .text-white h4,
.beta-warm-theme .text-white h5,
.beta-warm-theme .text-white h6,
.beta-warm-theme .bg-primary h1,
.beta-warm-theme .bg-primary h2,
.beta-warm-theme .bg-primary h3,
.beta-warm-theme .bg-primary h4,
.beta-warm-theme .bg-primary h5,
.beta-warm-theme .bg-primary h6,
.beta-warm-theme .bg-primary-500 h1,
.beta-warm-theme .bg-primary-500 h2,
.beta-warm-theme .bg-primary-500 h3,
.beta-warm-theme .bg-primary-500 h4,
.beta-warm-theme .bg-primary-500 h5,
.beta-warm-theme .bg-primary-500 h6,
.beta-warm-theme .bg-primary-600 h1,
.beta-warm-theme .bg-primary-600 h2,
.beta-warm-theme .bg-primary-600 h3,
.beta-warm-theme .bg-primary-600 h4,
.beta-warm-theme .bg-primary-600 h5,
.beta-warm-theme .bg-primary-600 h6,
.beta-warm-theme .bg-primary-700 h1,
.beta-warm-theme .bg-primary-700 h2,
.beta-warm-theme .bg-primary-700 h3,
.beta-warm-theme .bg-primary-700 h4,
.beta-warm-theme .bg-primary-700 h5,
.beta-warm-theme .bg-primary-700 h6,
.beta-warm-theme [class*="from-primary"] h1,
.beta-warm-theme [class*="from-primary"] h2,
.beta-warm-theme [class*="from-primary"] h3,
.beta-warm-theme [class*="from-primary"] h4,
.beta-warm-theme [class*="from-primary"] h5,
.beta-warm-theme [class*="from-primary"] h6 {
  color: #F3E3D2 !important;
}

.beta-warm-theme button,
.beta-warm-theme input,
.beta-warm-theme textarea,
.beta-warm-theme select,
.beta-warm-theme label {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Flourish utility class — Yellowtail for occasional warm headings */
.beta-warm-theme .font-flourish,
.beta-warm-theme .font-script {
  font-family: 'Yellowtail', 'Caveat', 'Brush Script MT', cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1.1;
}

/* Primary (navy) remaps */
.beta-warm-theme .bg-primary,
.beta-warm-theme .bg-primary-500 { background-color: var(--w-navy) !important; }
.beta-warm-theme .bg-primary-600 { background-color: var(--w-navy-700) !important; }
.beta-warm-theme .bg-primary-700 { background-color: var(--w-navy-800) !important; }
.beta-warm-theme .bg-primary-50 { background-color: var(--w-paper-soft) !important; }
.beta-warm-theme .bg-primary-100 { background-color: var(--w-navy-100) !important; }
.beta-warm-theme .bg-primary-200\/20,
.beta-warm-theme .bg-primary-100\/30 { background-color: rgba(50, 84, 114, 0.16) !important; }
.beta-warm-theme .bg-primary-200\/50 { background-color: rgba(50, 84, 114, 0.3) !important; }

.beta-warm-theme .text-primary,
.beta-warm-theme .text-primary-500 { color: var(--w-navy) !important; }
.beta-warm-theme .text-primary-100 { color: var(--w-navy-200) !important; }
.beta-warm-theme .text-primary-700 { color: var(--w-navy-800) !important; }

.beta-warm-theme .border-primary-200 { border-color: var(--w-dark-beige) !important; }
.beta-warm-theme .border-primary-300 { border-color: var(--w-navy-300) !important; }

.beta-warm-theme .hover\:bg-primary:hover,
.beta-warm-theme .hover\:bg-primary-500:hover { background-color: var(--w-navy) !important; }
.beta-warm-theme .hover\:bg-primary-600:hover { background-color: var(--w-navy-700) !important; }
.beta-warm-theme .hover\:bg-primary-700:hover { background-color: var(--w-navy-800) !important; }
.beta-warm-theme .hover\:text-primary:hover,
.beta-warm-theme .hover\:text-primary-700:hover { color: var(--w-azure) !important; }
.beta-warm-theme .hover\:border-primary-300:hover { border-color: var(--w-navy-300) !important; }
.beta-warm-theme .group:hover .group-hover\:bg-primary { background-color: var(--w-navy) !important; }

/* Gradients using the warm brand gradient (navy → azure → orange → yellow) */
.beta-warm-theme .from-primary { --tw-gradient-from: var(--w-navy) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(50,84,114,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme .to-primary-700 { --tw-gradient-to: var(--w-azure) var(--tw-gradient-to-position) !important; }
.beta-warm-theme .from-primary-50 { --tw-gradient-from: var(--w-paper-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(248,237,224,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme .to-primary-50 { --tw-gradient-to: var(--w-paper-soft) var(--tw-gradient-to-position) !important; }
.beta-warm-theme .via-white { --tw-gradient-to: rgba(249,247,244,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--w-warm-white) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* Accent (orange) remaps */
.beta-warm-theme .bg-accent,
.beta-warm-theme .bg-accent-500 { background-color: var(--w-orange) !important; }
.beta-warm-theme .bg-accent-50 { background-color: var(--w-orange-50) !important; }
.beta-warm-theme .bg-accent-200\/25 { background-color: rgba(222, 127, 44, 0.22) !important; }

.beta-warm-theme .text-accent,
.beta-warm-theme .text-accent-400 { color: var(--w-orange) !important; }
.beta-warm-theme .text-accent-600 { color: var(--w-orange-600) !important; }
.beta-warm-theme .text-accent-700 { color: var(--w-orange-700) !important; }

.beta-warm-theme .border-accent,
.beta-warm-theme .border-accent-200 { border-color: var(--w-orange) !important; }

.beta-warm-theme .hover\:bg-accent:hover,
.beta-warm-theme .hover\:bg-accent-500:hover { background-color: var(--w-orange-600) !important; }
.beta-warm-theme .hover\:bg-accent-600:hover { background-color: var(--w-orange-700) !important; }

.beta-warm-theme .from-accent-50 { --tw-gradient-from: var(--w-orange-50) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(251,238,222,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme .to-accent-50 { --tw-gradient-to: var(--w-orange-50) var(--tw-gradient-to-position) !important; }

/* Stray blue / yellow used in section gradients → warm palette */
.beta-warm-theme .from-blue-50 { --tw-gradient-from: var(--w-paper) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(243,227,210,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme .from-blue-100 { --tw-gradient-from: #e6d3bd var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(230,211,189,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme .via-yellow-50 { --tw-gradient-stops: var(--tw-gradient-from), var(--w-paper-soft) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-warm-theme .via-yellow-100 { --tw-gradient-stops: var(--tw-gradient-from), var(--w-yellow-100) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-warm-theme .to-yellow-50 { --tw-gradient-to: var(--w-paper-soft) var(--tw-gradient-to-position) !important; }
.beta-warm-theme .to-blue-50 { --tw-gradient-to: var(--w-paper) var(--tw-gradient-to-position) !important; }

.beta-warm-theme .bg-blue-200\/20,
.beta-warm-theme .bg-blue-300\/20,
.beta-warm-theme .bg-blue-300\/30 { background-color: rgba(43, 95, 138, 0.15) !important; }

.beta-warm-theme .bg-yellow-200\/20,
.beta-warm-theme .bg-yellow-300\/20,
.beta-warm-theme .bg-yellow-300\/30 { background-color: rgba(226, 181, 133, 0.32) !important; }

/* Star ratings → warm orange (yellow removed) */
.beta-warm-theme .fill-yellow-400 { fill: var(--w-orange) !important; }
.beta-warm-theme .text-yellow-400 { color: var(--w-orange) !important; }

/* Cream surface utilities pick up the warm paper-beige tone so cards,
   modals, and panels sit on-brand instead of stark white. Header keeps
   a solid warm-white bg via a more specific rule below. */
.beta-warm-theme .bg-white { background-color: var(--w-paper) !important; }
.beta-warm-theme .bg-gray-50 { background-color: var(--w-paper-soft) !important; }
.beta-warm-theme .bg-gray-100 { background-color: var(--w-paper-soft) !important; }

/* Restore solid warm-white for the fixed header so scrolled content
   doesn't bleed through. */
.beta-warm-theme header.bg-white,
.beta-warm-theme header .bg-white {
  background-color: var(--w-paper) !important;
}

/* Hero overlay layers — soften the gradient + aura blobs so the page-level
   paper texture shows through at the top of the page. The hero markup uses
   an absolute gradient div as its first child plus two blurred aura divs. */
.beta-warm-theme #home > .absolute:first-of-type {
  opacity: 0.45;
}
.beta-warm-theme #home > .absolute.rounded-full {
  opacity: 0.6;
}

.beta-warm-theme .text-gray-900 { color: var(--w-slate) !important; }
.beta-warm-theme .text-gray-800 { color: var(--w-off-black) !important; }
.beta-warm-theme .text-gray-700 { color: #3f4a55 !important; }
.beta-warm-theme .text-gray-600 { color: #55606b !important; }

.beta-warm-theme .border-gray-200 { border-color: #d4d4d4 !important; }
.beta-warm-theme .border-gray-100 { border-color: #e5e5e5 !important; }

/* Bordered card modules — warm cream background with a clean gray outline. */
.beta-warm-theme :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.border, .border-2) {
  border-color: #cfcfcf !important;
}
.beta-warm-theme.dark :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.border, .border-2) {
  border-color: rgba(200, 200, 200, 0.22) !important;
}
.beta-warm-theme [class*="border-accent"],
.beta-warm-theme [class*="border-primary"]:not(.border-primary) {
  border-color: #cfcfcf !important;
}
.beta-warm-theme.dark [class*="border-accent"],
.beta-warm-theme.dark [class*="border-primary"]:not(.border-primary) {
  border-color: rgba(200, 200, 200, 0.22) !important;
}

/* Links default to azure */
.beta-warm-theme a {
  color: inherit;
}
.beta-warm-theme a.text-primary,
.beta-warm-theme a.text-primary-700 {
  color: var(--w-azure) !important;
}

/* Rounded, friendlier corners for cards and buttons */
.beta-warm-theme .rounded-lg { border-radius: 0.75rem !important; }
.beta-warm-theme .rounded-xl { border-radius: 1.25rem !important; }
.beta-warm-theme .rounded-2xl { border-radius: 1.5rem !important; }

/* Pill-shaped buttons — fully rounded on the short axis,
   flat along the long axis. Scoped to real buttons and button-like links;
   icon-only square buttons opt out via [data-warm-btn="icon"]. */
.beta-warm-theme button:not([data-warm-btn="icon"]),
.beta-warm-theme a[class*="bg-primary"],
.beta-warm-theme a[class*="bg-accent"],
.beta-warm-theme a[class*="bg-secondary"],
.beta-warm-theme input[type="button"],
.beta-warm-theme input[type="submit"] {
  border-radius: 9999px !important;
}

/* Headline sizing tuned to warm spec (hero 36-60, titles 36-48, sections 24-36) */
.beta-warm-theme .text-5xl { font-size: 3rem !important; }       /* 48px */
.beta-warm-theme .text-6xl { font-size: 3.5rem !important; }     /* 56px */
.beta-warm-theme .text-7xl { font-size: 3.75rem !important; }    /* 60px */

/* Contrast safety — lock readable text color on every brand surface.
   Dark surfaces (navy, orange accent) take white; pale surfaces
   (paper, beige, yellow, orange-50) take slate so labels never vanish.
   svg/path are excluded so Lucide icons keep their own strokes. */
.beta-warm-theme .bg-primary,
.beta-warm-theme .bg-primary-500,
.beta-warm-theme .bg-primary-600,
.beta-warm-theme .bg-primary-700,
.beta-warm-theme .hover\:bg-primary:hover,
.beta-warm-theme .hover\:bg-primary-500:hover,
.beta-warm-theme .hover\:bg-primary-600:hover,
.beta-warm-theme .hover\:bg-primary-700:hover,
.beta-warm-theme .group:hover .group-hover\:bg-primary,
.beta-warm-theme .bg-accent,
.beta-warm-theme .bg-accent-500,
.beta-warm-theme .hover\:bg-accent:hover,
.beta-warm-theme .hover\:bg-accent-500:hover,
.beta-warm-theme .hover\:bg-accent-600:hover {
  color: #ffffff !important;
}

.beta-warm-theme a.warm-cta-beige,
.beta-warm-theme a.warm-cta-beige > *:not(svg):not(path) {
  color: #F3E3D2 !important;
}

.beta-warm-theme .bg-primary > *:not(svg):not(path),
.beta-warm-theme .bg-primary-500 > *:not(svg):not(path),
.beta-warm-theme .bg-primary-600 > *:not(svg):not(path),
.beta-warm-theme .bg-primary-700 > *:not(svg):not(path),
.beta-warm-theme .bg-accent > *:not(svg):not(path),
.beta-warm-theme .bg-accent-500 > *:not(svg):not(path) {
  color: #ffffff !important;
}

.beta-warm-theme .group:hover .group-hover\:bg-primary > *:not(svg):not(path),
.beta-warm-theme .group:hover .group-hover\:text-white {
  color: #ffffff !important;
}

/* Yellow highlights demand dark text — white on #FFE163 fails every
   contrast check (~1.3:1). */
.beta-warm-theme .bg-yellow-100,
.beta-warm-theme .bg-yellow-200,
.beta-warm-theme .bg-yellow-300 {
  background-color: var(--w-dark-beige) !important;
  color: var(--w-slate) !important;
}

/* Lift accent text to the darker orange-700 when it lands on pale
   surfaces — bright #DE7F2C fails AA for small text on paper/white. */
.beta-warm-theme .bg-primary-50 .text-accent,
.beta-warm-theme .bg-accent-50 .text-accent,
.beta-warm-theme .bg-gray-50 .text-accent,
.beta-warm-theme .bg-white .text-accent {
  color: var(--w-orange-700) !important;
}

/* Keep hero "trusted since" badge readable: navy text on paper tint */
.beta-warm-theme .text-primary-700 { color: var(--w-navy-800) !important; }

/* Disabled buttons get a muted beige, not stark gray */
.beta-warm-theme .disabled\:bg-gray-300:disabled,
.beta-warm-theme [disabled].bg-gray-300 {
  background-color: var(--w-dark-beige) !important;
  color: #6d5a46 !important;
}

/* Hand-warmed shadows on CTAs */
.beta-warm-theme .bg-accent,
.beta-warm-theme .bg-accent-500 {
  box-shadow: 0 6px 18px rgba(222, 127, 44, 0.28);
}
.beta-warm-theme .bg-accent:hover,
.beta-warm-theme .hover\:bg-accent-600:hover {
  box-shadow: 0 8px 22px rgba(222, 127, 44, 0.38);
}

/* =====================================================================
   Dark mode — `.beta-warm-theme.dark`
   Warm amber-black palette. Keeps the hand-made, paper feel even in
   dark mode by tinting surfaces with a faint orange cast and swapping
   the light paper-dot overlay for a darker amber speckle.
   ===================================================================== */
.beta-warm-theme.dark {
  --w-dark-page: #0f0c09;
  --w-dark-section: #17120e;
  --w-dark-card: #221c15;
  --w-dark-elevated: #2d251c;
  --w-dark-text: #faf3e7;
  --w-dark-text-secondary: #ddd1bd;
  --w-dark-text-muted: #b4a791;
  --w-dark-border: rgba(180, 128, 78, 0.38);
  --w-dark-border-strong: rgba(200, 142, 86, 0.58);
  --w-dark-navy: #7aa3cc;
  --w-dark-orange: #f2a25a;
  /* Yellow retired — alias resolves to a warm beige tone for legacy refs. */
  --w-dark-yellow: #c9a978;

  background-color: var(--w-dark-page);
  color: var(--w-dark-text);
  color-scheme: dark;
}

/* Page base surfaces */
.beta-warm-theme.dark {
  background-color: var(--w-dark-page) !important;
}
.beta-warm-theme.dark .bg-white {
  background-color: var(--w-dark-elevated) !important;
}
.beta-warm-theme.dark .bg-white\/95 { background-color: rgba(54, 44, 34, 0.95) !important; }
.beta-warm-theme.dark .bg-white\/90 { background-color: rgba(54, 44, 34, 0.92) !important; }
.beta-warm-theme.dark .bg-white\/85 { background-color: rgba(54, 44, 34, 0.88) !important; }
.beta-warm-theme.dark .bg-white\/80 { background-color: rgba(54, 44, 34, 0.84) !important; }
.beta-warm-theme.dark .bg-white\/60 { background-color: rgba(54, 44, 34, 0.7) !important; }
.beta-warm-theme.dark .bg-gray-50 { background-color: var(--w-dark-section) !important; }
.beta-warm-theme.dark .bg-gray-100 { background-color: var(--w-dark-card) !important; }
.beta-warm-theme.dark .bg-gray-200 { background-color: var(--w-dark-elevated) !important; }

/* Borders that explicitly use translucent white look silver in dark
   mode — remap them to a warm brown so card outlines read as cocoa. */
.beta-warm-theme.dark .border-white,
.beta-warm-theme.dark .border-white\/80 { border-color: rgba(160, 110, 65, 0.55) !important; }
.beta-warm-theme.dark .border-white\/60 { border-color: rgba(160, 110, 65, 0.45) !important; }
.beta-warm-theme.dark .border-white\/40 { border-color: rgba(160, 110, 65, 0.3) !important; }
.beta-warm-theme.dark .border-white\/20 { border-color: rgba(160, 110, 65, 0.22) !important; }
.beta-warm-theme.dark .ring-black\/5 { --tw-ring-color: rgba(160, 110, 65, 0.3) !important; }
.beta-warm-theme.dark .ring-black\/10 { --tw-ring-color: rgba(160, 110, 65, 0.4) !important; }
.beta-warm-theme.dark .ring-slate-200 { --tw-ring-color: rgba(160, 110, 65, 0.32) !important; }

/* Drop shadows in dark mode: soften the default black shadow and tint
   it warm so cards don't render with a flat grey halo against the dark
   paper. Also style the carousel scrollbar so it doesn't read as a
   strange light band under the testimonial cards. */
.beta-warm-theme.dark .shadow-sm { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.35) !important; }
.beta-warm-theme.dark .shadow,
.beta-warm-theme.dark .shadow-md { box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important; }
.beta-warm-theme.dark .shadow-lg { box-shadow: 0 12px 20px -6px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.45) !important; }
.beta-warm-theme.dark .shadow-xl { box-shadow: 0 18px 28px -8px rgba(0, 0, 0, 0.65), 0 6px 10px -6px rgba(0, 0, 0, 0.5) !important; }
.beta-warm-theme.dark .hover\:shadow-md:hover { box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important; }
.beta-warm-theme.dark .hover\:shadow-lg:hover { box-shadow: 0 14px 24px -6px rgba(0, 0, 0, 0.65), 0 4px 8px -4px rgba(0, 0, 0, 0.45) !important; }
.beta-warm-theme.dark .hover\:shadow-xl:hover { box-shadow: 0 20px 32px -8px rgba(0, 0, 0, 0.7), 0 6px 10px -6px rgba(0, 0, 0, 0.5) !important; }

.beta-warm-theme .testimonials-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.beta-warm-theme .testimonials-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

.beta-warm-theme.dark *::-webkit-scrollbar { height: 8px; width: 8px; }
.beta-warm-theme.dark *::-webkit-scrollbar-track { background: transparent; }
.beta-warm-theme.dark *::-webkit-scrollbar-thumb {
  background: rgba(160, 110, 65, 0.35);
  border-radius: 4px;
}
.beta-warm-theme.dark *::-webkit-scrollbar-thumb:hover { background: rgba(160, 110, 65, 0.55); }
.beta-warm-theme.dark * { scrollbar-color: rgba(160, 110, 65, 0.35) transparent; }

/* Primary navy surfaces — lifted for visibility on deep warm-black */
.beta-warm-theme.dark .bg-primary,
.beta-warm-theme.dark .bg-primary-500 { background-color: #4e7aa5 !important; }
.beta-warm-theme.dark .bg-primary-600 { background-color: #3f688f !important; }
.beta-warm-theme.dark .bg-primary-700 { background-color: #325578 !important; }
.beta-warm-theme.dark .bg-primary-50 { background-color: var(--w-dark-section) !important; }
.beta-warm-theme.dark .bg-primary-100 { background-color: rgba(91, 132, 176, 0.18) !important; }

/* Text utilities: invert grays to warm-white tiers */
.beta-warm-theme.dark .text-gray-900 { color: var(--w-dark-text) !important; }
.beta-warm-theme.dark .text-gray-800 { color: var(--w-dark-text) !important; }
.beta-warm-theme.dark .text-gray-700 { color: var(--w-dark-text-secondary) !important; }
.beta-warm-theme.dark .text-gray-600 { color: var(--w-dark-text-secondary) !important; }
.beta-warm-theme.dark .text-gray-500 { color: var(--w-dark-text-muted) !important; }
.beta-warm-theme.dark .text-gray-400 { color: var(--w-dark-text-muted) !important; }
.beta-warm-theme.dark .text-black { color: var(--w-dark-text) !important; }

/* Primary text brightens so navy stays readable on warm-black */
.beta-warm-theme.dark .text-primary,
.beta-warm-theme.dark .text-primary-500 { color: #6aa9e0 !important; }
.beta-warm-theme.dark .text-primary-600 { color: #5a9cd6 !important; }
.beta-warm-theme.dark .text-primary-700 { color: #7fb6e6 !important; }
.beta-warm-theme.dark .text-primary-100 { color: #d6e6f4 !important; }

/* Default heading color in dark mode: warm off-white (overrides the
   navy-on-light base rule at the top of the file) */
.beta-warm-theme.dark h1,
.beta-warm-theme.dark h2,
.beta-warm-theme.dark h3,
.beta-warm-theme.dark h4,
.beta-warm-theme.dark h5,
.beta-warm-theme.dark h6 {
  color: var(--w-dark-text);
}

/* Borders */
.beta-warm-theme.dark .border-gray-200 { border-color: var(--w-dark-border) !important; }
.beta-warm-theme.dark .border-gray-100 { border-color: var(--w-dark-border) !important; }
.beta-warm-theme.dark .border-gray-300 { border-color: var(--w-dark-border-strong) !important; }
.beta-warm-theme.dark .border-primary-200 { border-color: rgba(226, 181, 133, 0.25) !important; }
.beta-warm-theme.dark .border-primary-300 { border-color: rgba(91, 132, 176, 0.5) !important; }

/* Gradients — warm tones in dark */
.beta-warm-theme.dark .from-primary { --tw-gradient-from: #2a496b var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(42,73,107,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme.dark .to-primary-700 { --tw-gradient-to: #1b2f46 var(--tw-gradient-to-position) !important; }
.beta-warm-theme.dark .from-primary-50 { --tw-gradient-from: var(--w-dark-section) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(34,28,22,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme.dark .to-primary-50 { --tw-gradient-to: var(--w-dark-section) var(--tw-gradient-to-position) !important; }
.beta-warm-theme.dark .via-white { --tw-gradient-to: rgba(26,22,18,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--w-dark-page) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-warm-theme.dark .from-blue-50 { --tw-gradient-from: var(--w-dark-section) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(34,28,22,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme.dark .from-blue-100 { --tw-gradient-from: #2d3744 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(45,55,68,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-warm-theme.dark .to-blue-50 { --tw-gradient-to: var(--w-dark-section) var(--tw-gradient-to-position) !important; }
.beta-warm-theme.dark .via-yellow-50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(184, 153, 104, 0.10) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-warm-theme.dark .via-yellow-100 { --tw-gradient-stops: var(--tw-gradient-from), rgba(184, 153, 104, 0.16) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-warm-theme.dark .to-yellow-50 { --tw-gradient-to: rgba(184, 153, 104, 0.12) var(--tw-gradient-to-position) !important; }

/* Tinted surface washes */
.beta-warm-theme.dark .bg-blue-50 { background-color: rgba(91, 132, 176, 0.1) !important; }
.beta-warm-theme.dark .bg-yellow-50 { background-color: rgba(184, 153, 104, 0.10) !important; }
.beta-warm-theme.dark .bg-yellow-100,
.beta-warm-theme.dark .bg-yellow-200,
.beta-warm-theme.dark .bg-yellow-300 {
  background-color: rgba(184, 153, 104, 0.22) !important;
  color: var(--w-dark-text) !important;
}
.beta-warm-theme.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
.beta-warm-theme.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }

/* Accent orange brightens slightly */
.beta-warm-theme.dark .bg-accent,
.beta-warm-theme.dark .bg-accent-500 { background-color: var(--w-dark-orange) !important; }
.beta-warm-theme.dark .bg-accent-50 { background-color: rgba(232, 144, 68, 0.1) !important; }
.beta-warm-theme.dark .text-accent,
.beta-warm-theme.dark .text-accent-400,
.beta-warm-theme.dark .text-accent-600 { color: #ffb878 !important; }
.beta-warm-theme.dark .text-accent-700 { color: #f2a25a !important; }
.beta-warm-theme.dark .fill-yellow-400 { fill: var(--w-dark-orange) !important; }
.beta-warm-theme.dark .text-yellow-400 { color: var(--w-dark-orange) !important; }

/* On pale-surface override, dark mode prefers an even brighter orange
   so small accent text stays readable on the warm card tier */
.beta-warm-theme.dark .bg-primary-50 .text-accent,
.beta-warm-theme.dark .bg-accent-50 .text-accent,
.beta-warm-theme.dark .bg-gray-50 .text-accent,
.beta-warm-theme.dark .bg-white .text-accent {
  color: #f4a765 !important;
}

/* Form controls */
.beta-warm-theme.dark input,
.beta-warm-theme.dark textarea,
.beta-warm-theme.dark select {
  background-color: var(--w-dark-card) !important;
  color: var(--w-dark-text) !important;
  border-color: var(--w-dark-border-strong) !important;
}
.beta-warm-theme.dark input::placeholder,
.beta-warm-theme.dark textarea::placeholder {
  color: var(--w-dark-text-muted) !important;
}
.beta-warm-theme.dark input:focus,
.beta-warm-theme.dark textarea:focus,
.beta-warm-theme.dark select:focus {
  border-color: var(--w-dark-orange) !important;
  outline-color: var(--w-dark-orange) !important;
}

/* Shadows: softer glow rather than hard drop on dark warm-black */
.beta-warm-theme.dark .shadow,
.beta-warm-theme.dark .shadow-sm,
.beta-warm-theme.dark .shadow-md,
.beta-warm-theme.dark .shadow-lg,
.beta-warm-theme.dark .shadow-xl,
.beta-warm-theme.dark .shadow-2xl {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

/* CTA shadows preserved but retuned for dark */
.beta-warm-theme.dark .bg-accent,
.beta-warm-theme.dark .bg-accent-500 {
  box-shadow: 0 6px 22px rgba(232, 144, 68, 0.45) !important;
}

/* Disabled buttons */
.beta-warm-theme.dark .disabled\:bg-gray-300:disabled,
.beta-warm-theme.dark [disabled].bg-gray-300 {
  background-color: #3a3024 !important;
  color: var(--w-dark-text-muted) !important;
}

/* Images: soften glare */
.beta-warm-theme.dark img:not([src*=".svg"]) {
  filter: brightness(0.9) contrast(1.02);
}

/* Scrollbar */
.beta-warm-theme.dark ::-webkit-scrollbar { width: 12px; height: 12px; }
.beta-warm-theme.dark ::-webkit-scrollbar-track { background: var(--w-dark-page); }
.beta-warm-theme.dark ::-webkit-scrollbar-thumb {
  background: var(--w-dark-elevated);
  border-radius: 6px;
  border: 3px solid var(--w-dark-page);
}
.beta-warm-theme.dark ::-webkit-scrollbar-thumb:hover { background: #48382a; }

/* =====================================================================
   Page background — paper beige + subtle warm gradient orbs.
   ===================================================================== */
.beta-warm-theme {
  background-color: var(--w-paper);
  isolation: isolate;
}
.beta-warm-theme::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(680px circle at 8% 12%, rgba(226, 181, 133, 0.45) 0%, rgba(226, 181, 133, 0) 70%),
    radial-gradient(720px circle at 92% 18%, rgba(222, 127, 44, 0.18) 0%, rgba(222, 127, 44, 0) 70%),
    radial-gradient(760px circle at 30% 95%, rgba(99, 119, 107, 0.18) 0%, rgba(99, 119, 107, 0) 70%);
}
.beta-warm-theme.dark {
  background-color: var(--w-dark-page);
}
.beta-warm-theme.dark::after {
  background:
    radial-gradient(620px circle at 12% 14%, rgba(232, 144, 68, 0.08) 0%, rgba(232, 144, 68, 0) 70%),
    radial-gradient(700px circle at 88% 30%, rgba(184, 153, 104, 0.05) 0%, rgba(184, 153, 104, 0) 70%),
    radial-gradient(720px circle at 30% 92%, rgba(91, 132, 176, 0.06) 0%, rgba(91, 132, 176, 0) 70%);
}

/* =====================================================================
   Subheader pill / small caps lockup used across the warm components.
   Body uses Montserrat — subheaders pick up Libre Baskerville for that
   editorial feel without going full script.
   ===================================================================== */
.beta-warm-theme .subheader {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* =====================================================================
   Themable card surface used by Pricing, Contact, Services, About.
   Light: warm white with a thin dark-beige border.
   Dark: amber-tinted card surface with warm border.
   ===================================================================== */
.beta-warm-theme .corp-card {
  background-color: var(--w-paper);
  border: 1px solid rgba(226, 181, 133, 0.6);
  box-shadow: 0 2px 10px rgba(50, 84, 114, 0.05);
}
.beta-warm-theme.dark .corp-card {
  background-color: rgba(43, 36, 28, 0.85) !important;
  border-color: var(--w-dark-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* FAQ rows (Services page) */
.beta-warm-theme .corp-faq-item {
  background-color: var(--w-paper-soft);
  border: 1px solid rgba(226, 181, 133, 0.6);
}
.beta-warm-theme .corp-faq-item.corp-faq-open {
  background-color: var(--w-paper-soft);
  border-color: rgba(222, 127, 44, 0.5);
}
.beta-warm-theme.dark .corp-faq-item {
  background-color: rgba(43, 36, 28, 0.6) !important;
  border-color: var(--w-dark-border) !important;
}
.beta-warm-theme.dark .corp-faq-item.corp-faq-open {
  background-color: rgba(232, 144, 68, 0.12) !important;
  border-color: rgba(232, 144, 68, 0.5) !important;
}

/* =====================================================================
   Home page section bands and contact card.
   ===================================================================== */
.beta-warm-theme .home-band-cream-blue {
  background: linear-gradient(
    to bottom,
    #efddc4 0%,
    #f1e2cc 20%,
    #f3e7d4 55%,
    #f0dcc3 100%
  );
}
.beta-warm-theme .home-band-blue-white {
  background: linear-gradient(
    to bottom,
    rgba(222, 127, 44, 0.12) 0%,
    rgba(243, 227, 210, 0.45) 32%,
    rgba(243, 227, 210, 0.45) 100%
  );
}
.beta-warm-theme.dark .home-band-cream-blue,
.beta-warm-theme.dark .home-band-blue-white {
  background: none;
}

.beta-warm-theme .home-contact-card {
  background-color: rgba(243, 227, 210, 0.9);
  border: 1px solid rgba(226, 181, 133, 0.7);
}
.beta-warm-theme.dark .home-contact-card {
  background-color: rgba(43, 36, 28, 0.78) !important;
  border-color: var(--w-dark-border) !important;
}

/* =====================================================================
   Hero bottom fade — meets the next section's tint.
   ===================================================================== */
.beta-warm-theme .warm-hero-bg {
  background: transparent;
}

.beta-warm-theme .warm-home-bg {
  background: linear-gradient(
    to bottom,
    #f6ead9 0%,
    #f2e3cd 45%,
    #eedcc2 70%,
    #f1e2cc 100%
  );
}
.beta-warm-theme.dark .warm-home-bg {
  background: var(--w-dark-page);
}

.beta-warm-theme .hero-bottom-fade {
  background: transparent;
}
.beta-warm-theme.dark .hero-bottom-fade {
  background: none;
}

/* Photography tone — slight warm wash so photos sit on the paper bg. */
.beta-warm-theme .brand-photo-tone {
  filter: saturate(0.98) contrast(1.02);
}
.beta-warm-theme.dark .brand-photo-tone {
  filter: brightness(0.92) contrast(1.02);
}

/* =====================================================================
   Translucent cards & bg-white opacity variants — render as fully
   opaque warm surfaces so hero gradient blobs don't bleed through.
   ===================================================================== */
.beta-warm-theme .bg-white\/95,
.beta-warm-theme .bg-white\/90,
.beta-warm-theme .bg-white\/85,
.beta-warm-theme .bg-white\/80,
.beta-warm-theme .bg-white\/75,
.beta-warm-theme .bg-white\/70 {
  background-color: var(--w-paper) !important;
  position: relative;
  z-index: 1;
}
.beta-warm-theme.dark .bg-white\/95,
.beta-warm-theme.dark .bg-white\/90,
.beta-warm-theme.dark .bg-white\/85,
.beta-warm-theme.dark .bg-white\/80,
.beta-warm-theme.dark .bg-white\/75,
.beta-warm-theme.dark .bg-white\/70 {
  background-color: var(--w-dark-card) !important;
}

/* Neutralize backdrop-blur on module cards — combined with the gradient
   blobs in the hero and section backgrounds it causes the blur to leak
   on top of the card rather than staying behind it. */
.beta-warm-theme .backdrop-blur-sm,
.beta-warm-theme .backdrop-blur,
.beta-warm-theme .backdrop-blur-md,
.beta-warm-theme .backdrop-blur-lg {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Slate utilities used on home compare card */
.beta-warm-theme .bg-slate-100 { background-color: var(--w-paper-soft) !important; }
.beta-warm-theme .bg-slate-200 { background-color: var(--w-dark-beige) !important; }
.beta-warm-theme .border-slate-200 { border-color: rgba(226, 181, 133, 0.6) !important; }
.beta-warm-theme .text-slate-900 { color: var(--w-slate) !important; }
.beta-warm-theme .text-slate-800 { color: var(--w-off-black) !important; }
.beta-warm-theme .text-slate-700 { color: #3f4a55 !important; }
.beta-warm-theme .text-slate-600 { color: #55606b !important; }
.beta-warm-theme.dark .bg-slate-100 { background-color: var(--w-dark-section) !important; }
.beta-warm-theme.dark .bg-slate-200 { background-color: var(--w-dark-elevated) !important; }
.beta-warm-theme.dark .border-slate-200 { border-color: var(--w-dark-border) !important; }
.beta-warm-theme.dark .text-slate-900 { color: var(--w-dark-text) !important; }
.beta-warm-theme.dark .text-slate-800 { color: var(--w-dark-text-secondary) !important; }
.beta-warm-theme.dark .text-slate-700 { color: var(--w-dark-text-secondary) !important; }
.beta-warm-theme.dark .text-slate-600 { color: var(--w-dark-text-muted) !important; }

/* =====================================================================
   Section gradient washes — neutralized in dark so the warm-black
   page color shows through (mirrors the corporate behavior).
   ===================================================================== */
.beta-warm-theme.dark #services.bg-gradient-to-br,
.beta-warm-theme.dark #about.bg-gradient-to-br {
  background-image: none !important;
  background-color: transparent !important;
}

/* About callout (from-primary-50 to-accent-50) becomes a soft surface. */
.beta-warm-theme .from-primary-50.to-accent-50 {
  background-image: none !important;
  background-color: var(--w-paper-soft);
  border: 1px solid rgba(226, 181, 133, 0.6);
}
.beta-warm-theme.dark .from-primary-50.to-accent-50 {
  background-color: var(--w-dark-section) !important;
  border-color: var(--w-dark-border);
}

/* Decorative orbs on services/about sections — warm tones, not blues. */
.beta-warm-theme #services .bg-blue-200\/20,
.beta-warm-theme #about .bg-blue-200\/20 {
  background-color: rgba(222, 127, 44, 0.18) !important;
}
.beta-warm-theme #services .bg-yellow-200\/20,
.beta-warm-theme #about .bg-yellow-200\/20 {
  background-color: rgba(99, 119, 107, 0.18) !important;
}
.beta-warm-theme.dark #services .bg-blue-200\/20,
.beta-warm-theme.dark #about .bg-blue-200\/20 {
  background-color: rgba(232, 144, 68, 0.18) !important;
}
.beta-warm-theme.dark #services .bg-yellow-200\/20,
.beta-warm-theme.dark #about .bg-yellow-200\/20 {
  background-color: rgba(217, 185, 63, 0.14) !important;
}

/* =====================================================================
   Inputs in corp-card containers — warm field styling.
   ===================================================================== */
.beta-warm-theme .corp-card input,
.beta-warm-theme .corp-card textarea,
.beta-warm-theme .corp-card select {
  background-color: var(--w-paper-soft);
  border-color: rgba(226, 181, 133, 0.7);
  color: var(--w-off-black);
}
.beta-warm-theme .corp-card input::placeholder,
.beta-warm-theme .corp-card textarea::placeholder {
  color: rgba(85, 96, 107, 0.7);
}
.beta-warm-theme .corp-card input:focus,
.beta-warm-theme .corp-card textarea:focus,
.beta-warm-theme .corp-card select:focus {
  background-color: var(--w-warm-white);
  border-color: var(--w-orange) !important;
}
.beta-warm-theme.dark .corp-card input,
.beta-warm-theme.dark .corp-card textarea,
.beta-warm-theme.dark .corp-card select {
  background-color: var(--w-dark-card) !important;
  color: var(--w-dark-text) !important;
  border-color: var(--w-dark-border-strong) !important;
}

/* =====================================================================
   Hero photo tonemap & operator imagery — warm wash on light, gentle
   dim on dark.
   ===================================================================== */
.beta-warm-theme img:not([src*=".svg"]) {
  filter: saturate(0.97);
}

/* CTA button text: light beige instead of pure white on warm theme */
.beta-warm-theme .bg-primary.text-white,
.beta-warm-theme .bg-accent.text-white,
.beta-warm-theme a.bg-primary,
.beta-warm-theme button.bg-primary,
.beta-warm-theme a.bg-accent,
.beta-warm-theme button.bg-accent {
  color: #F3E3D2 !important;
}

/* =====================================================================
   Editorial design system borrowed from the Answering Specialists
   Lovable concept — serif display headline with an italic accent,
   uppercase eyebrow labels, borderless peach-tinted feature cards,
   numbered step watermarks, and a teal closing-CTA block.
   ===================================================================== */

.beta-warm-theme {
  --w-peach-card: #f3e3d2;
  --w-peach-card-hover: #ecd7bf;
  --w-peach-card-border: #d6cec3;
  --w-eyebrow: #c86a1e;
  --w-cta-teal: #4a6d82;
  --w-cta-teal-deep: #375668;
  --w-step-numeral: rgba(222, 127, 44, 0.28);
  --w-sage-band: #d9dfd2;
}
.beta-warm-theme.dark {
  --w-peach-card: #3a2f24;
  --w-peach-card-hover: #45382a;
  --w-peach-card-border: rgba(200, 190, 175, 0.18);
  --w-eyebrow: #f4a765;
  --w-cta-teal: #2f4a5d;
  --w-cta-teal-deep: #24394a;
  --w-step-numeral: rgba(244, 167, 101, 0.24);
  --w-sage-band: #242a22;
}

.beta-warm-theme .warm-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-eyebrow);
  margin-bottom: 0.75rem;
}

.beta-warm-theme .warm-display {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--w-navy);
}
.beta-warm-theme.dark .warm-display {
  color: var(--w-dark-text);
}
.beta-warm-theme .warm-display-italic {
  font-style: italic;
  font-weight: 500;
  color: var(--w-orange);
}
.beta-warm-theme.dark .warm-display-italic {
  color: var(--w-dark-orange);
}

.beta-warm-theme .warm-card {
  position: relative;
  z-index: 1;
  background-color: var(--w-peach-card);
  border: 1px solid var(--w-peach-card-border) !important;
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 6px 18px rgba(92, 58, 24, 0.08);
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.beta-warm-theme .warm-card:hover {
  background-color: var(--w-peach-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(92, 58, 24, 0.12);
}
.beta-warm-theme.dark .warm-card {
  background-color: var(--w-peach-card);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.beta-warm-theme.dark .warm-card:hover {
  background-color: var(--w-peach-card-hover);
}

.beta-warm-theme .warm-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background-color: var(--w-sage);
  color: #f3e3d2;
  margin-bottom: 1.25rem;
}
.beta-warm-theme.dark .warm-card-icon {
  background-color: #536354;
  color: var(--w-dark-text);
}

.beta-warm-theme .warm-step-card {
  position: relative;
  z-index: 1;
  background-color: var(--w-peach-card);
  border: 1px solid var(--w-peach-card-border) !important;
  border-radius: 1.25rem;
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.beta-warm-theme .warm-step-card:hover {
  background-color: var(--w-peach-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(92, 58, 24, 0.12);
}
.beta-warm-theme .warm-step-numeral {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  color: var(--w-step-numeral);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  display: block;
}

.beta-warm-theme .warm-stat-chip {
  position: absolute;
  left: 1.25rem;
  bottom: -1.25rem;
  background-color: var(--w-warm-white);
  border-radius: 999px;
  padding: 0.65rem 1rem 0.65rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: 0 10px 28px rgba(50, 84, 114, 0.18);
  z-index: 2;
}
.beta-warm-theme.dark .warm-stat-chip {
  background-color: var(--w-dark-elevated);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.beta-warm-theme .warm-stat-chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--w-sage);
  color: #f3e3d2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.beta-warm-theme .warm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(249, 247, 244, 0.85);
  border: 1px solid rgba(226, 181, 133, 0.55);
  color: var(--w-slate);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}
.beta-warm-theme.dark .warm-hero-badge {
  background-color: rgba(54, 44, 34, 0.8);
  border-color: var(--w-dark-border);
  color: var(--w-dark-text);
}

.beta-warm-theme .warm-cta-block {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  padding: 3.5rem 2rem;
  background:
    radial-gradient(600px circle at 85% 20%, rgba(232, 144, 68, 0.32) 0%, rgba(232, 144, 68, 0) 60%),
    radial-gradient(500px circle at 10% 90%, rgba(99, 119, 107, 0.35) 0%, rgba(99, 119, 107, 0) 60%),
    linear-gradient(135deg, var(--w-cta-teal) 0%, var(--w-cta-teal-deep) 100%);
  color: #f3e3d2;
  box-shadow: 0 24px 48px rgba(50, 84, 114, 0.22);
}
.beta-warm-theme .warm-cta-block h2,
.beta-warm-theme .warm-cta-block h3 {
  color: #f5e9dc !important;
}
.beta-warm-theme.dark .warm-cta-block {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.beta-warm-theme .warm-band-sage {
  background-color: var(--w-sage-band);
}

.beta-warm-theme .warm-ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--w-slate);
  font-weight: 600;
  padding: 0.85rem 0.5rem;
  border-radius: 0;
  transition: color 180ms ease;
}
.beta-warm-theme .warm-ghost-link:hover {
  color: var(--w-orange-700);
}
.beta-warm-theme.dark .warm-ghost-link {
  color: var(--w-dark-text);
}
.beta-warm-theme.dark .warm-ghost-link:hover {
  color: var(--w-dark-orange);
}

/* Slider thumb override — replace default blue with theme navy */
.beta-warm-theme .slider-thumb::-webkit-slider-thumb {
  background: #325472 !important;
}
.beta-warm-theme .slider-thumb::-webkit-slider-thumb:hover {
  background: #21405d !important;
}
.beta-warm-theme .slider-thumb::-moz-range-thumb {
  background: #325472 !important;
}
.beta-warm-theme .slider-thumb::-moz-range-thumb:hover {
  background: #21405d !important;
}

/* =====================================================================
   Dark mode — chrome (header / footer) and decorative glow blobs.
   Uses warm elevated tones so the fixed header and footer read as part
   of the same natural palette rather than plain white or flat grey.
   ===================================================================== */

/* Fixed header: warm dark surface with a faint amber border.
   Targets the fixed header element directly so it wins over bg-white. */
.beta-warm-theme.dark > header,
.beta-warm-theme.dark header.fixed {
  background-color: rgba(31, 25, 19, 0.94) !important;
  border-bottom-color: rgba(200, 142, 86, 0.28) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Header nav links and phone color */
.beta-warm-theme.dark header a,
.beta-warm-theme.dark header button {
  color: var(--w-dark-text-secondary);
}
.beta-warm-theme.dark header a:hover,
.beta-warm-theme.dark header button:hover {
  color: var(--w-dark-orange);
}
.beta-warm-theme.dark header .bg-accent,
.beta-warm-theme.dark header .bg-primary {
  color: #fff !important;
}

/* Mobile menu panel + "More" dropdown */
.beta-warm-theme.dark header .lg\:hidden.bg-white,
.beta-warm-theme.dark header .bg-white {
  background-color: rgba(42, 35, 27, 0.98) !important;
  border-color: rgba(200, 142, 86, 0.28) !important;
}
.beta-warm-theme.dark header .border-t {
  border-color: rgba(200, 142, 86, 0.28) !important;
}
.beta-warm-theme.dark header .hover\:bg-gray-50:hover {
  background-color: rgba(242, 162, 90, 0.08) !important;
}

/* Footer: warm near-black that sits below the page, with amber accents */
.beta-warm-theme.dark footer.bg-gray-900 {
  background-color: #17120e !important;
  color: var(--w-dark-text-secondary) !important;
  border-top: 1px solid rgba(200, 142, 86, 0.18);
}
.beta-warm-theme.dark footer .text-white {
  color: var(--w-dark-text) !important;
}
.beta-warm-theme.dark footer .text-gray-300,
.beta-warm-theme.dark footer .text-gray-400 {
  color: var(--w-dark-text-secondary) !important;
}
.beta-warm-theme.dark footer .text-gray-500,
.beta-warm-theme.dark footer .text-gray-600 {
  color: var(--w-dark-text-muted) !important;
}
.beta-warm-theme.dark footer .border-gray-800 {
  border-color: rgba(200, 142, 86, 0.18) !important;
}
.beta-warm-theme.dark footer a:hover {
  color: var(--w-dark-orange) !important;
}

/* Decorative hero / about page glow blobs — theme-aware via class. */
.beta-warm-theme .warm-glow-navy,
.beta-warm-theme .warm-glow-orange {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}
.beta-warm-theme .warm-glow-navy {
  background-color: rgba(50, 84, 114, 0.35);
}
.beta-warm-theme .warm-glow-orange {
  background-color: rgba(222, 127, 44, 0.35);
}
.beta-warm-theme.dark .warm-glow-navy {
  background-color: rgba(122, 163, 204, 0.18);
}
.beta-warm-theme.dark .warm-glow-orange {
  background-color: rgba(242, 162, 90, 0.22);
}

/* Headings inside dark footer should stay warm-white even with overrides */
.beta-warm-theme.dark footer h3,
.beta-warm-theme.dark footer h4 {
  color: var(--w-dark-text) !important;
}


/* =====================================================================
   WordPress compatibility layer — styles the shared PHP templates' helper
   classes (.corp-card, .corp-icon-badge, .corp-home-wash, .corp-faq-item,
   .asi-input, .legal-content, .subheader) under the warm variant so the
   same templates render on-brand without forking.
   ===================================================================== */

/* Corporate logo pair hides under warm; warm logo pair is rendered by PHP. */
.beta-warm-theme .corp-logo-light,
.beta-warm-theme .corp-logo-dark { display: none !important; }

/* Page wash — warm paper background with gradient orbs, mirroring the
   warm::after decoration but scoped to the template's corp-home-wash. */
.beta-warm-theme .corp-home-wash,
.beta-warm-theme .warm-home-bg {
  position: relative;
  background-color: var(--w-paper);
  background-image:
    radial-gradient(680px circle at 8% 12%, rgba(226, 181, 133, 0.55) 0%, rgba(226, 181, 133, 0) 70%),
    radial-gradient(720px circle at 92% 18%, rgba(222, 127, 44, 0.22) 0%, rgba(222, 127, 44, 0) 70%),
    radial-gradient(760px circle at 30% 95%, rgba(99, 119, 107, 0.22) 0%, rgba(99, 119, 107, 0) 70%),
    linear-gradient(180deg, #f6ead9 0%, #f2e3cd 55%, #eedcc2 100%);
  background-repeat: no-repeat;
}
html.dark .beta-warm-theme .corp-home-wash,
html.dark .beta-warm-theme .warm-home-bg,
.beta-warm-theme.dark .corp-home-wash,
.beta-warm-theme.dark .warm-home-bg {
  background-color: var(--w-dark-page);
  background-image:
    radial-gradient(620px circle at 12% 14%, rgba(232, 144, 68, 0.14) 0%, rgba(232, 144, 68, 0) 70%),
    radial-gradient(700px circle at 88% 30%, rgba(184, 153, 104, 0.1) 0%, rgba(184, 153, 104, 0) 70%),
    radial-gradient(720px circle at 30% 92%, rgba(91, 132, 176, 0.12) 0%, rgba(91, 132, 176, 0) 70%);
  background-repeat: no-repeat;
}

/* Corp card & icon badge take on warm paper + sage/orange accents */
.beta-warm-theme .corp-card {
  background-color: var(--w-paper);
  border: 1px solid rgba(226, 181, 133, 0.6);
  border-radius: 1.25rem;
  box-shadow: 0 2px 10px rgba(50, 84, 114, 0.05);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.beta-warm-theme .corp-card:hover {
  box-shadow: 0 10px 24px rgba(92, 58, 24, 0.12);
}
.beta-warm-theme.dark .corp-card {
  background-color: rgba(43, 36, 28, 0.85) !important;
  border-color: var(--w-dark-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.beta-warm-theme .corp-icon-badge {
  background-color: var(--w-orange-50);
  color: var(--w-orange-700);
}
.beta-warm-theme.dark .corp-icon-badge {
  background-color: rgba(232, 144, 68, 0.14);
  color: var(--w-dark-orange);
}

/* FAQ row surface */
.beta-warm-theme .corp-faq-item {
  background-color: var(--w-paper-soft);
  border: 1px solid rgba(226, 181, 133, 0.6);
  border-radius: 1.25rem;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.beta-warm-theme .corp-faq-item[data-faq-open] {
  background-color: var(--w-paper);
  border-color: rgba(222, 127, 44, 0.5);
}
.beta-warm-theme .corp-faq-item[data-faq-open] [data-faq-chevron] { transform: rotate(180deg); }
.beta-warm-theme.dark .corp-faq-item {
  background-color: rgba(43, 36, 28, 0.6) !important;
  border-color: var(--w-dark-border) !important;
}
.beta-warm-theme.dark .corp-faq-item[data-faq-open] {
  background-color: rgba(232, 144, 68, 0.12) !important;
  border-color: rgba(232, 144, 68, 0.5) !important;
}

/* Quote / contact form input */
.beta-warm-theme .asi-input {
  background-color: var(--w-paper-soft);
  border: 1px solid rgba(226, 181, 133, 0.7);
  color: var(--w-off-black);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.beta-warm-theme .asi-input:focus {
  background-color: var(--w-warm-white);
  border-color: var(--w-orange) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(222, 127, 44, 0.18);
}
.beta-warm-theme.dark .asi-input {
  background-color: var(--w-dark-card) !important;
  color: var(--w-dark-text) !important;
  border-color: var(--w-dark-border-strong) !important;
}

/* Legal document body */
.beta-warm-theme .legal-content h2 { margin-top: 2rem; color: var(--w-navy); }
.beta-warm-theme .legal-content h3 { margin-top: 1.25rem; color: var(--w-navy); }
.beta-warm-theme .legal-content p,
.beta-warm-theme .legal-content li { color: #3f4a55; }
.beta-warm-theme.dark .legal-content h2,
.beta-warm-theme.dark .legal-content h3 { color: var(--w-dark-text); }
.beta-warm-theme.dark .legal-content p,
.beta-warm-theme.dark .legal-content li { color: var(--w-dark-text-secondary); }

/* Small chip used for phone icon lockup in header */
.beta-warm-theme .phone-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: var(--w-orange-50);
  color: var(--w-orange-700);
}
.beta-warm-theme.dark .phone-chip {
  background-color: rgba(232, 144, 68, 0.18);
  color: var(--w-dark-orange);
}

/* CTA hover: warm buttons shift navy→deeper navy, orange→deeper orange */
.beta-warm-theme .cta-blue-hover.bg-accent:hover,
.beta-warm-theme .cta-blue-hover.bg-primary:hover {
  filter: brightness(0.95);
}

/* Theme toggle icon swap */
.beta-warm-theme .theme-icon-dark { display: none; }
.beta-warm-theme.dark .theme-icon-light { display: none; }
.beta-warm-theme.dark .theme-icon-dark { display: inline-block; }

/* =====================================================================
   Paper grain overlay — mirrors the warm React theme's body texture.
   Applied as a fixed-position backdrop so every page picks up the grain
   without each template having to opt in.
   ===================================================================== */
.beta-warm-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url('../images/warm/paper_texture.webp');
  background-size: 420px 420px;
  background-repeat: repeat;
  opacity: 0.18;
  mix-blend-mode: multiply;
}
.beta-warm-theme.dark::before {
  opacity: 0.08;
  mix-blend-mode: screen;
}

/* Feature card icon — solid sage-tinted rounded square, mirroring the
   React warm-card-icon treatment. No splotch art. */
.beta-warm-theme .warm-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background-color: var(--w-sage);
  color: #f3e3d2;
  margin-bottom: 1.25rem;
}
.beta-warm-theme.dark .warm-card-icon {
  background-color: #536354;
  color: var(--w-dark-text);
}

/* Torn-paper bottom edge for sections that need a hand-made break. */
.beta-warm-theme .warm-torn-bottom {
  position: relative;
}
.beta-warm-theme .warm-torn-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24px;
  background-image: url('../images/warm/masks/torn-paper.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Warm hero "since 1982" badge gets a soft paper-tinted pill. */
.beta-warm-theme .warm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background-color: rgba(243, 227, 210, 0.85);
  border: 1px solid rgba(222, 127, 44, 0.25);
  color: var(--w-navy);
  font-size: 0.8125rem;
  font-weight: 600;
}