/* =========================================================================
   ZenBesic — clean & minimal design system (site-wide)
   Loaded AFTER each page's inline <style> so it upgrades the legacy look:
   flat solid buttons (no gradients), hairline-bordered cards (no glass),
   solid maroon accents, no floating orbs. Mirrors the homepage redesign.
   ========================================================================= */

:root {
    --ink: #16130f;
    --muted: #6b6560;
    --line: #e7e3dd;
    --bg-soft: #f7f5f2;
    --brand: #a33a3d;
    --brand-dark: #832d30;
    --brand-tint: #f7ecec;

    /* Flatten legacy CSS-variable gradients to a solid maroon.
       (A gradient between two identical colors renders as a solid fill,
       so every gradient built from these tokens becomes flat.) */
    --primary-hover: 358 46% 43%;                       /* == --primary → solid circles */
    --primary-gradient: linear-gradient(#a33a3d, #a33a3d);
    --gradient-hero: linear-gradient(#a33a3d, #a33a3d);
    --gradient-cta: linear-gradient(#a33a3d, #a33a3d);
    --shadow-cta: 0 1px 2px rgba(0, 0, 0, 0.06);
}

* { -webkit-font-smoothing: antialiased; }

/* Remove the whole-page gradient wash */
body { background: #ffffff !important; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
::selection { background: var(--brand); color: #fff; }

/* ---- Legacy primary button → flat solid maroon ------------------------- */
.btn-cta {
    background: var(--brand) !important;
    color: #fff !important;
    border: 1px solid var(--brand) !important;
    border-radius: 10px !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .18s ease, border-color .18s ease !important;
}
.btn-cta:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    transform: none !important;
    box-shadow: none !important;
}
.btn-cta::before { display: none !important; }

/* ---- Legacy secondary/outline button → clean outline ------------------- */
.btn-secondary {
    background: transparent !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-image: none !important;
    border-radius: 10px !important;
}
.btn-secondary:hover {
    background: transparent !important;
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand) !important;
    border-color: var(--ink) !important;
    transform: none !important;
}

/* ---- Gradient text → solid maroon -------------------------------------- */
.text-primary-gradient,
.bg-primary-gradient.text-transparent,
.text-transparent.bg-clip-text {
    background: none !important;
    -webkit-text-fill-color: var(--brand) !important;
    color: var(--brand) !important;
}

/* ---- Glass header → solid, hairline border ----------------------------- */
.glass-header {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: saturate(180%) blur(10px) !important;
    border-bottom: 1px solid var(--line) !important;
}
/* Tighter header: the h-20 logo made the bar ~112px tall and covered heroes */
header img { height: 3rem !important; width: auto !important; }
/* Make sure the first hero section clears the fixed header */
main > section:first-of-type,
body > section:first-of-type { padding-top: 6.5rem !important; }

/* ---- Glass panels / elevated cards → clean bordered cards -------------- */
.glass-section,
.card-elevated {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.card-elevated:hover {
    box-shadow: none !important;
    border-color: var(--brand) !important;
    transform: translateY(-3px) !important;
}
.card-elevated::before { display: none !important; }

/* ---- Kill decorative floating orbs / blurred blobs --------------------- */
.glass-float,
.floating-orb { display: none !important; }

/* ---- Floating phone button → solid ------------------------------------- */
.floating-phone-btn {
    background: var(--ink) !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
.floating-phone-btn:hover { background: var(--brand) !important; }

/* ---- Form focus states — subtle maroon ring ---------------------------- */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(163, 58, 61, 0.12) !important;
}

/* ---- Flatten Tailwind maroon→black utility gradients ------------------- */
/* Any element whose gradient STARTS at the brand maroon becomes solid.
   Covers buttons, icon circles, badges and gradient-clipped text that use
   `bg-gradient-to-* from-[#A33A3D] to-[#1a0a0a]`. Text stays maroon because
   background-clip:text renders the solid background colour into the glyphs. */
/* Only flatten true maroon→black gradients (buttons, icon circles, badges,
   gradient-clipped headings). Requiring BOTH stops avoids nuking maroon→light
   hero backgrounds like `from-[#A33A3D] to-gray-50` that carry dark text. */
[class*="from-[#A33A3D]"][class*="to-[#1a0a0a]"],
[class*="from-[#a33a3d]"][class*="to-[#1a0a0a]"] {
    background-image: none !important;
    background-color: var(--brand) !important;
}
/* Restore transparent fill for gradient-clipped headings so they show maroon */
[class*="from-[#A33A3D]"][class*="to-[#1a0a0a]"].bg-clip-text,
[class*="from-[#A33A3D]"][class*="to-[#1a0a0a]"].text-transparent {
    background-color: transparent !important;
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand) !important;
}

/* Subtle decorative washes use an opacity modifier, e.g. `from-[#A33A3D]/5`.
   Those are just faint background tints — remove them entirely instead of
   turning them into a solid maroon band (this rule wins because it is more
   specific/later than the flatten rule above). */
[class*="from-[#A33A3D]/"],
[class*="from-[#a33a3d]/"] {
    background-image: none !important;
    background-color: transparent !important;
}

/* ---- Dark slate→maroon hero → clean solid dark, legible text ----------- */
[class*="via-[#A33A3D]"] {
    background-image: none !important;
    background-color: #1b1714 !important;
}
/* Accent word + maroon stats read poorly on dark → soft rose */
[class*="via-[#A33A3D]"] .text-primary-gradient,
[class*="via-[#A33A3D]"] [class*="text-[#A33A3D]"] {
    color: #ec9ea1 !important;
    -webkit-text-fill-color: #ec9ea1 !important;
    background: none !important;
}
/* Dark stat numbers on the dark hero → light */
[class*="via-[#A33A3D]"] .text-gray-600 { color: #d8d2cc !important; }