/**
 * Axis Mental Health - Global Styles
 * 
 * Main stylesheet for design system (variables, components, utilities)
 * Enqueue with priority 20 in functions.php (after Bricks core)
 * 
 * PHILOSOPHY:
 * - CSS variables for all repeated values (colors, spacing, typography)
 * - Let Bricks handle layout (grid, flexbox, positioning)
 * - Global component styles (buttons, forms, cards)
 * - Minimal !important flags (only for critical Bricks overrides)
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
    /* Brand Colors */
    --axis-primary: #0088cc;
    --axis-primary-dark: #006ba3;
    --axis-primary-light: #00a8ff;
    --axis-dark: #1e2a38;
    --axis-dark-overlay: rgba(30, 42, 56, 0.85);
    --axis-dark-overlay-medium: rgba(30, 42, 56, 0.5);
    --axis-dark-blue: #2c3e50;
    --axis-accent: #fba63d;
    --axis-secondary-purple: #8b5cf6;

    /* Layout */
    --axis-container-max: 1200px;
    --axis-white: #ffffff;
    --axis-black: #000000;

    /* Grays */
    --axis-gray-50: #f9fafb;
    --axis-gray-100: #f3f4f6;
    --axis-gray-200: #e5e7eb;
    --axis-gray-300: #d1d5db;
    --axis-gray-400: #9ca3af;
    --axis-gray-500: #6b7280;
    --axis-gray-600: #4b5563;
    --axis-gray-700: #374151;
    --axis-gray-800: #1f2937;
    --axis-gray-900: #111827;

    /* Semantic Colors */
    --axis-text-primary: #333333;
    --axis-text: #333333;
    /* Alias for consistency with existing usage */
    --axis-text-muted: #555555;
    --axis-text-light: rgba(255, 255, 255, 0.85);
    --axis-text-light-strong: rgba(255, 255, 255, 0.9);
    --axis-text-placeholder: #999999;
    --axis-border: #e0e0e0;
    --axis-border-light: #f0f0f0;
    --axis-input-border: #d1d5db;
    /* Input borders - medium-light gray (gray-300) */
    --axis-input-border-focus: var(--axis-primary);
    /* Focus state border color */

    /* Semantic Status Colors */
    --axis-success: #28a745;
    --axis-success-light: #d4edda;
    --axis-success-lighter: #c8e6c9;
    --axis-success-dark: #155724;
    --axis-warning: #ffc107;
    --axis-warning-light: #fff3cd;
    --axis-danger: #dc3545;
    --axis-danger-light: #f8d7da;
    --axis-info: #17a2b8;
    --axis-info-light: #d1ecf1;

    /* Typography Scale - Fluid (responsive) using 1.250 (Major Third) modular scale
       Modern best practice: Base 16px with consistent ratio for visual harmony
       Mobile-first: Smaller base, scales up to desktop
       Reference: https://type-scale.com (Major Third = 1.250 ratio) */
    --axis-text-xs: clamp(12px, 1.5vw, 13px);
    /* Small labels, captions */
    --axis-text-sm: clamp(13px, 1.8vw, 14px);
    /* Secondary text, metadata */
    --axis-text-base: clamp(15px, 2.2vw, 16px);
    /* Body text (WCAG recommended minimum) */
    --axis-text-md: clamp(16px, 2.5vw, 18px);
    /* Emphasized body text */
    --axis-text-lg: clamp(18px, 3vw, 20px);
    /* Lead paragraphs, large body */
    --axis-text-xl: clamp(22px, 3.5vw, 26px);
    /* Card headings (H3) */
    --axis-text-2xl: clamp(26px, 4.5vw, 32px);
    /* Section subheadings (H2 minor) */
    --axis-text-3xl: clamp(30px, 5vw, 36px);
    /* Section headings (H2) */
    --axis-text-4xl: clamp(36px, 6vw, 48px);
    /* Page titles (H1) */
    --axis-text-5xl: clamp(48px, 8vw, 64px);
    /* Hero titles (H1 hero - special) */
    --axis-text-phone: clamp(28px, 6vw, 32px);
    /* Phone numbers (special emphasis) */
    --axis-text-icon: clamp(40px, 8vw, 52px);
    /* Icon sizing */

    /* Bricks Breakpoints - Reference values (use px in @media queries)
       NOTE: CSS variables cannot be used in @media queries due to browser limitations.
       These match Bricks Builder's default breakpoint system. */
    --axis-breakpoint-mobile: 767px;
    /* Mobile: 0-767px */
    --axis-breakpoint-tablet: 991px;
    /* Tablet: 768px-991px */
    --axis-breakpoint-desktop: 992px;
    /* Desktop: 992px+ */

    /* Standardized Media Query Patterns - ALWAYS USE THESE:
       
       Mobile (default - no media query needed for mobile-first)
       Base styles apply to mobile by default
       
       Tablet and up:
       @media (min-width: 768px) { ... }
       
       Desktop and up:
       @media (min-width: 992px) { ... }
       
       Mobile only:
       @media (max-width: 767px) { ... }
       
       Tablet only:
       @media (min-width: 768px) and (max-width: 991px) { ... }
       
       Mobile and tablet (not desktop):
       @media (max-width: 991px) { ... }
    */

    /* Typography */
    --axis-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --axis-font-display: 'Rajdhani', sans-serif;

    /* Line Heights */
    --axis-line-height-tight: 1.2;
    --axis-line-height-relaxed: 1.6;

    /* Font Weights */
    --axis-font-normal: 400;
    --axis-font-medium: 500;
    --axis-font-semibold: 600;
    --axis-font-bold: 700;
    --axis-font-extrabold: 800;

    /* Spacing Scale (4px base) */
    --axis-space-0: 0;
    --axis-space-1: 4px;
    --axis-space-1-5: 6px;
    --axis-space-2: 8px;
    --axis-space-3: 12px;
    --axis-space-4: 16px;
    --axis-space-5: 20px;
    --axis-space-6: 24px;
    --axis-space-7: 28px;
    --axis-space-8: 32px;
    --axis-space-9: 36px;
    --axis-space-10: 40px;
    --axis-space-11: 44px;
    --axis-space-12: 48px;
    --axis-space-16: 64px;
    --axis-space-20: 80px;

    /* Shadows - Standardized depth scale */
    --axis-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.03);
    --axis-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --axis-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --axis-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --axis-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16);
    --axis-shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.20);

    /* Card Shadows - Standardized for interactive cards */
    --axis-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --axis-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    --axis-shadow-card-elevated: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Primary Color Shadows - For focus states and buttons */
    --axis-shadow-primary-focus: 0 0 0 3px rgba(0, 136, 204, 0.1);
    --axis-shadow-primary-sm: 0 4px 12px rgba(0, 136, 204, 0.3);
    --axis-shadow-primary-md: 0 6px 20px rgba(0, 136, 204, 0.4);

    /* Section Padding - Standardized responsive pattern */
    --axis-section-padding-mobile: var(--axis-space-12);
    /* 48px */
    --axis-section-padding-tablet: var(--axis-space-16);
    /* 64px */
    --axis-section-padding-desktop: var(--axis-space-20);
    /* 80px */

    /* Border Radius */
    --axis-radius-sm: 4px;
    --axis-radius-md: 8px;
    --axis-radius-lg: 12px;
    --axis-radius-xl: 16px;
    --axis-radius-full: 9999px;

    /* Transitions */
    --axis-transition-fast: 0.15s ease;
    --axis-transition-base: 0.3s ease;
    --axis-transition-slow: 0.5s ease;

    /* Responsive Breakpoints (for reference in media queries) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 992px;
    --breakpoint-wide: 1200px;

    /* Touch Targets (WCAG 2.1 AAA: 44×44px minimum) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* Gradient System - Reusable patterns */
    --axis-gradient-primary: linear-gradient(135deg, var(--axis-primary-400) 0%, var(--axis-primary-500) 50%, var(--axis-primary-600) 100%);
    --axis-gradient-primary-vertical: linear-gradient(to bottom, var(--axis-primary-400), var(--axis-primary-600));
    --axis-gradient-accent: linear-gradient(135deg, var(--axis-accent-cyan) 0%, var(--axis-accent-green) 100%);
    --axis-gradient-light: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
    --axis-gradient-overlay-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    --axis-gradient-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
}

/* ==========================================================================
   GLOBAL RESETS & BASE STYLES
   ========================================================================== */

/* Base body text - consistent across all sections */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    /* Fixed at 16px for accessibility and consistency */
    color: var(--axis-text-primary);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}


/* Consistent box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default link underlines (Bricks doesn't do this) */

/* ==========================================================================
   SECTION HEADINGS - Universal Styling
   ========================================================================== */

/* Section heading wrapper (if using container) */
.section-heading-wrapper {
    text-align: center;
    position: relative;
}

/* Main section headings (H2 - Large by default) */
.section-heading,
.brxe-heading.section-heading {
    width: 100% !important;
    font-size: var(--axis-text-3xl) !important;
    font-weight: var(--axis-font-extrabold) !important;
    color: var(--axis-dark);
    text-align: center !important;
    margin-bottom: var(--axis-space-8) !important;
    margin-top: 0 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

/* H3 section headings default to medium size */
h3.section-heading,
h3.brxe-heading.section-heading {
    font-size: var(--axis-text-2xl) !important;
    font-weight: 700 !important;
    margin-bottom: var(--axis-space-6) !important;
    letter-spacing: -0.01em !important;
}

/* T001 - Global H3 default (lower specificity) */
h3,
.brxe-heading h3,
.axis-section h3 {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Section heading with decorative underline */
.section-heading::after,
.axis-section-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--axis-primary), var(--axis-accent));
    margin: var(--axis-space-6) auto 0;
    border-radius: var(--axis-radius-full);
}

/* Section Heading Modifiers */

/* Medium size variant (explicit override for H2 or other tags) */
.section-heading--medium {
    font-size: var(--axis-text-2xl) !important;
    font-weight: 700 !important;
    margin-bottom: var(--axis-space-6) !important;
    letter-spacing: -0.01em !important;
}

/* No underline variant */
.section-heading--no-underline::after,
.section-heading-wrapper--no-underline .section-heading::after,
.section-heading-wrapper--no-underline .axis-section-heading::after {
    display: none !important;
}

/* Left-aligned variant */
.section-heading-wrapper--left-aligned {
    text-align: left;
}

.section-heading-wrapper--left-aligned .section-heading,
.section-heading-wrapper--left-aligned .section-intro {
    text-align: left !important;
}

/* Move underline to left when left-aligned */
.section-heading-wrapper--left-aligned .section-heading::after {
    margin-left: 0;
    margin-right: auto;
}

/* Shift entire section content left when it contains left-aligned heading */
.axis-section:has(.section-heading-wrapper--left-aligned) {
    align-items: flex-start;
}

/* Respect section gutter when left-aligned */
.axis-section:has(.section-heading-wrapper--left-aligned)>* {
    padding-left: var(--axis-space-5);
    padding-right: var(--axis-space-5);
}

@media (min-width: 992px) {
    .axis-section:has(.section-heading-wrapper--left-aligned)>* {
        padding-left: var(--axis-space-5);
        padding-right: var(--axis-space-5);
    }
}

/* Section subheading (optional overline text) */
.section-overline {
    font-size: var(--axis-text-sm);
    font-weight: var(--axis-font-semibold);
    color: var(--axis-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--axis-space-3);
    display: block;
}

/* Section description (below heading) */
/* Removed specific .section-description rules in favor of global .section-intro styles */

/* Dark section heading variants */
.section-dark .section-heading,
.section-dark .axis-section-heading {
    color: var(--axis-white) !important;
}

.section-dark .section-description,
.section-dark .section-subtitle {
    color: var(--axis-text-light) !important;
}

/* Eyebrow Label (small uppercase label above headings) */
.eyebrow-label {
    font-size: var(--axis-text-xs);
    font-weight: var(--axis-font-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--axis-primary);
    margin-bottom: var(--axis-space-2);
}

/* Mobile adjustments */
@media (max-width: 768px) {

    .section-heading,
    .axis-section-heading {
        font-size: var(--axis-text-2xl);
        margin-bottom: var(--axis-space-6);
    }

    .section-heading::after,
    .axis-section-heading::after {
        margin-top: var(--axis-space-4);
    }

    .section-description {
        font-size: var(--axis-text-base);
        margin-bottom: var(--axis-space-8);
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--axis-transition-base);
}

a:hover {
    color: var(--axis-primary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--axis-font-bold);
    line-height: 1.2;
    margin: 0;
}

/* ==========================================================================
   BUTTON COMPONENT STYLES
   ========================================================================== */

/* Base button styles (applies to Bricks buttons too) */
.btn,
.bricks-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: var(--axis-font-semibold);
    font-size: var(--axis-text-sm);
    padding: 12px 35px;
    min-height: var(--touch-target-min);
    /* WCAG touch target */
    border: none;
    border-radius: var(--axis-radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Primary button */
.btn-primary,
.bricks-button.bricks-background-primary {
    background: var(--axis-primary) !important;
    color: var(--axis-white) !important;
    border: none !important;
    border-radius: var(--axis-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3);
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover,
.bricks-button.bricks-background-primary:hover {
    background: var(--axis-primary-dark) !important;
    /* transform: translateY(-3px) scale(1.02); */
    box-shadow: 0 12px 32px rgba(0, 136, 204, 0.4);
}

/* CTA Buttons - Standardized sizes and styles
   ========================================================================== */

/* Standard CTA Button (use this for most CTAs) */
.btn-cta,
.cta-primary-btn {
    min-height: 56px;
    max-height: 56px;
    padding: var(--axis-space-4) var(--axis-space-8);
    font-size: var(--axis-text-md);
    font-weight: var(--axis-font-semibold);
    /* display: inline-flex; */
    /* align-items: center; */
    /* justify-content: center; */
    text-decoration: none;
    white-space: nowrap;
    /* border-radius: var(--axis-radius-md); */
    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.25);
    /* transition: all var(--axis-transition-base); */
}


/* Large CTA Button (use for hero sections and final CTAs) */
.btn-cta-lg {
    min-height: 64px;
    max-height: 64px;
    padding: var(--axis-space-5) var(--axis-space-10);
    font-size: var(--axis-text-lg);
    font-weight: var(--axis-font-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--axis-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3);
    letter-spacing: 0.02em;
    transition: all var(--axis-transition-base);
}

.btn-cta-lg:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 136, 204, 0.4);
}

@media (min-width: 769px) {
    .btn-cta-lg {
        font-size: var(--axis-text-xl);
        padding: var(--axis-space-6) var(--axis-space-12);
    }
}

@media (max-width: 768px) {
    .btn-cta-lg {
        font-size: 16px;
        /* Prevents iOS zoom */
    }
}

/* Outline button */
.btn-outline {
    /* background: transparent !important; */
    /* color: var(--axis-primary) !important; */
    /* border: 2px solid var(--axis-primary) !important; */
    text-transform: none;
}

.btn-outline:hover {
    background: var(--axis-primary) !important;
    color: var(--axis-white) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3);
}

/* Glass button styles - better contrast versions */
.btn-outline-glass {
    /* background: rgba(0, 107, 163, 0.15); */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 2px solid rgba(0, 107, 163, 0.4) !important;
}

.btn-outline-glass-subtle {
    /* background: rgba(255, 255, 255, 0.1) !important; */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    /* border: 2px solid rgba(0, 107, 163, 0.3) !important; */
}

/* White outline button (for dark backgrounds) */
.btn-outline-white {
    background: transparent !important;
    color: var(--axis-white) !important;
    border: 2px solid var(--axis-white) !important;
}

.btn-outline-white:hover {
    background: var(--axis-white) !important;
    color: var(--axis-dark) !important;
    transform: scale(1.02);
}

/* Section CTA spacing - button after content-wrap container */
.axis-section>.content-wrap+.brxe-button {
    margin-top: var(--axis-space-12);
}

@media (min-width: 769px) {
    .axis-section>.content-wrap+.brxe-button {
        margin-top: var(--axis-space-16);
    }
}

.btn-cta.btn-primary:hover,
.btn-cta-lg.btn-primary:hover,
.cta-primary-btn.btn-primary:hover {
    background: var(--axis-primary-dark);
}

/* CTA Outline - applies outline styling when combined with .btn-cta */
.btn-cta.btn-outline,
.btn-cta-lg.btn-outline,
.cta-primary-btn.btn-outline {
    /* background: transparent; */
    /* color: var(--axis-primary); */
    /* border: 2px solid var(--axis-primary); */
}

.btn-cta.btn-outline:hover,
.btn-cta-lg.btn-outline:hover,
.cta-primary-btn.btn-outline:hover {
    background: var(--axis-primary);
    color: var(--axis-white);
}

/* ==========================================================================
   BADGE COMPONENT STYLES
   ========================================================================== */

/* Hero Badge - Pill-shaped badge with icon + text
   Adapts automatically to light/dark backgrounds */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--axis-space-2);
    padding: var(--axis-space-2) var(--axis-space-4);
    border-radius: var(--axis-radius-full);
    font-size: var(--axis-text-base);
    font-weight: var(--axis-font-medium);
    line-height: 1.4;
    white-space: nowrap;
    transition: all 0.2s ease;

    /* Default: Light background badge (for light sections) */
    background: var(--axis-gray-100);
    color: var(--axis-text-primary);
    border: 1px solid var(--axis-gray-200);
}

.hero-badge .brxe-icon,
.hero-badge i {
    font-size: 1.1em;
    flex-shrink: 0;
    color: var(--axis-primary);
}

.hero-badge .brxe-text-basic,
.hero-badge span {
    margin: 0;
}

.hero-badge:hover {
    background: var(--axis-gray-200);
    transform: translateY(-1px);
}

/* Dark background variant (hero sections, dark areas) */
.hero-section:not(.hero-bg-solid-white) .hero-badge,
.axis-section--bg-dark .hero-badge,
.axis-section--bg-gradient-teal .hero-badge,
[class*="hero-bg-gradient"]:not(.hero-bg-solid-white) .hero-badge,
[class*="hero-bg-solid-dark"] .hero-badge,
[class*="hero-bg-solid-primary"] .hero-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--axis-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-section:not(.hero-bg-solid-white) .hero-badge .brxe-icon,
.axis-section--bg-dark .hero-badge .brxe-icon,
.axis-section--bg-gradient-teal .hero-badge .brxe-icon,
[class*="hero-bg-gradient"]:not(.hero-bg-solid-white) .hero-badge .brxe-icon,
[class*="hero-bg-solid-dark"] .hero-badge .brxe-icon,
[class*="hero-bg-solid-primary"] .hero-badge .brxe-icon,
.hero-section:not(.hero-bg-solid-white) .hero-badge i,
.axis-section--bg-dark .hero-badge i,
.axis-section--bg-gradient-teal .hero-badge i,
[class*="hero-bg-gradient"]:not(.hero-bg-solid-white) .hero-badge i,
[class*="hero-bg-solid-dark"] .hero-badge i,
[class*="hero-bg-solid-primary"] .hero-badge i {
    color: var(--axis-accent);
}

.hero-section:not(.hero-bg-solid-white) .hero-badge:hover,
.axis-section--bg-dark .hero-badge:hover,
[class*="hero-bg-gradient"]:not(.hero-bg-solid-white) .hero-badge:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Light background variant (hero-bg-solid-white with image overlay) - MUST come after dark variants */
.hero-section.hero-bg-solid-white .hero-badge,
.hero-bg-solid-white .hero-badge {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--axis-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-section.hero-bg-solid-white .hero-badge .brxe-icon,
.hero-section.hero-bg-solid-white .hero-badge i,
.hero-bg-solid-white .hero-badge .brxe-icon,
.hero-bg-solid-white .hero-badge i {
    color: var(--axis-primary) !important;
}

.hero-section.hero-bg-solid-white .hero-badge:hover,
.hero-bg-solid-white .hero-badge:hover {
    background: rgba(255, 255, 255, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
}

/* Show badge if JS confirms it has content */
.hero-badge.has-content {
    display: inline-flex;
}

/* Always show badge in Bricks builder */
body.bricks-is-frontend-builder .hero-badge,
body[data-bricks-mode="builder"] .hero-badge,
.bricks-builder .hero-badge {
    display: inline-flex !important;
    opacity: 1 !important;
}

/* Mobile: Full width badges on small screens */
@media (max-width: 640px) {
    .hero-badge {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   FORM COMPONENT STYLES
   ========================================================================== */

/* Global form field styling - scoped to frontend only */
.bricks-is-frontend input[type="text"],
.bricks-is-frontend input[type="email"],
.bricks-is-frontend input[type="tel"],
.bricks-is-frontend input[type="password"],
.bricks-is-frontend input[type="number"],
.bricks-is-frontend input[type="search"],
.bricks-is-frontend input[type="url"],
.bricks-is-frontend textarea,
.bricks-is-frontend select {
    border-radius: var(--axis-radius-sm);
    box-shadow: none;
    background-color: var(--axis-white);
    transition: all 0.2s ease;
    text-align: left;
}

/* FRONTEND-ONLY FOCUS STYLES - Only apply to forms on the frontend, not builder */
.bricks-is-frontend .brxe-form input:focus,
.bricks-is-frontend .brxe-form textarea:focus,
.bricks-is-frontend .brxe-form select:focus,
.bricks-is-frontend .appointment-form input:focus,
.bricks-is-frontend .appointment-form textarea:focus,
.bricks-is-frontend .progressive-form input:focus,
.bricks-is-frontend .progressive-form textarea:focus {
    outline: none;
    border-color: var(--axis-primary);
    box-shadow: 0 0 0 4px rgba(0, 136, 204, 0.25);
    transition: all 0.2s ease;
}

.bricks-is-frontend input::placeholder,
.bricks-is-frontend textarea::placeholder {
    color: var(--axis-text-placeholder) !important;
    opacity: 1 !important;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* Custom select styling */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}

/* Form labels */
label {
    display: block;
    margin-bottom: var(--axis-space-2);
    font-size: var(--axis-text-sm);
    font-weight: var(--axis-font-medium);
    color: var(--axis-text-primary);
}

/* ==========================================================================
   CARD/BOX COMPONENT STYLES
   ========================================================================== */

.card,
.box {
    padding: var(--axis-space-10);
    background: var(--axis-white);
    border-radius: var(--axis-radius-md);
    box-shadow: var(--axis-shadow-md);
}

.card-dark,
.box-dark {
    background: var(--axis-dark);
    color: var(--axis-white);
    box-shadow: var(--axis-shadow-lg);
}

/* ==========================================================================
   STANDARDIZED SECTION PADDING
   Applied to all major content sections for consistent vertical rhythm
   ========================================================================== */

.axis-section {
    padding: var(--axis-section-padding-mobile) var(--axis-space-5);
}

@media (min-width: 769px) and (max-width: 991px) {
    .axis-section {
        padding: var(--axis-section-padding-tablet) var(--axis-space-5);
    }
}

@media (min-width: 992px) {
    .axis-section {
        padding: var(--axis-section-padding-desktop) var(--axis-space-5);
    }
}

/* Padding Modifiers - Minimal padding prevents shadow clipping */
.axis-section--no-top-padding {
    padding-top: var(--axis-space-4) !important;
}

.axis-section--no-bottom-padding {
    padding-bottom: var(--axis-space-8) !important;
}

.axis-section--no-padding {
    padding-top: var(--axis-space-4) !important;
    padding-bottom: var(--axis-space-8) !important;
}

/* Light section background (default) */
.axis-section-light {
    background: var(--axis-white);
}

/* Gray section background (alternating) */
.axis-section-gray {
    background: var(--axis-gray-50);
}

/* Dark section background (contrast) */
.axis-section-dark {
    background: var(--axis-dark);
    color: var(--axis-white);
}

/* ==========================================================================
   STANDARDIZED ICON STYLING
   For card icons, feature icons, etc.
   Note: Card styles moved to components/axis-card.css
   ========================================================================== */

.axis-icon {
    font-size: 48px;
    color: var(--axis-primary);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--axis-space-4);
    transition: transform 0.3s ease;
}



/* Large icon variant */
.axis-icon-lg {
    font-size: 56px;
    width: 56px;
    height: 56px;
}

/* Medium icon variant */
.axis-icon-md {
    font-size: 40px;
    width: 40px;
    height: 40px;
}

/* ==========================================================================
   HERO OVERLAY UTILITIES
   Standard overlay patterns for hero sections across site
   ========================================================================== */

.hero-overlay-dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 42, 56, 0.7);
    pointer-events: none;
    z-index: 1;
}

.hero-overlay-medium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--axis-dark-overlay-medium);
    pointer-events: none;
    z-index: 1;
}

/* Ensure hero content sits above overlay */
.hero-overlay-dark>*,
.hero-overlay-medium>* {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   FORM ERROR STATES (Global Standardization)
   Consistent error styling for all forms site-wide
   ========================================================================== */

/* Required field indicator */
.form-label-required::after,
label.required::after,
label[data-required="true"]::after {
    content: '*';
    color: var(--axis-danger);
    margin-left: var(--axis-space-1);
    font-weight: var(--axis-font-bold);
}

/* Error state for inputs */
input.error,
textarea.error,
select.error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--axis-danger);
}

input.error:focus,
textarea.error:focus,
select.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Error message container */
.form-field-error,
.bricks-form-field-error {
    display: block;
    margin-top: var(--axis-space-2);
    font-size: var(--axis-text-sm);
    color: var(--axis-danger);
    line-height: 1.4;
}

/* ==========================================================================
   OUTLINE GLASS BUTTON (Premium Hero CTA Pattern)
   Sophisticated glass effect for hero CTAs on dark backgrounds
   ========================================================================== */


.btn-outline-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--axis-white);
    transform: translateY(-2px);
}

/* Subtle variant for secondary CTAs */
.btn-outline-glass-subtle {
    /* background: rgba(255, 255, 255, 0.05); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    /* color: var(--axis-white); */
}

.btn-outline-glass-subtle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* ==========================================================================
   CARD INTERACTIVE UTILITIES
   Standardized hover states for interactive cards
   ========================================================================== */

.axis-card-interactive {
    transition: all 250ms ease-in-out;
}

/* Interactive card modifier - for clickable cards with links */
.axis-card-interactive {
    cursor: pointer;
}

.axis-card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--axis-shadow-card-hover);
}

/* Disable transform on mobile for performance */
@media (max-width: 768px) {
    .axis-card-interactive:hover {
        transform: none;
    }
}

/* Small icon variant */
.axis-icon-sm {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* ===================================================
   12. Component: axis-badge-strip (Hero Pill Bar)
   =================================================== */

/* MOVED TO: components/axis-badge-strip.css
   Badge strip component has been extracted to its own file for better organization
   and reusability across homepage and contact page.
   
   Available classes:
   - .axis-badge-strip (base container)
   - .axis-badge-strip--clean (white card variant)
   - .axis-badge-strip--glass-dark (dark glass variant)
*/

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Spacing utilities - Margin */
.mt-0 {
    margin-top: var(--axis-space-0);
}

.mt-4 {
    margin-top: var(--axis-space-4);
}

.mt-8 {
    margin-top: var(--axis-space-8);
}

.mt-10 {
    margin-top: var(--axis-space-10);
}

.mb-0 {
    margin-bottom: var(--axis-space-0);
}

.mb-4 {
    margin-bottom: var(--axis-space-4);
}

.mb-8 {
    margin-bottom: var(--axis-space-8);
}

.mb-10 {
    margin-bottom: var(--axis-space-10);
}

/* Spacing utilities - Padding */
.p-0 {
    padding: var(--axis-space-0);
}

.p-4 {
    padding: var(--axis-space-4);
}

.p-8 {
    padding: var(--axis-space-8);
}

.p-10 {
    padding: var(--axis-space-10);
}

/* Text utilities */
.text-primary {
    color: var(--axis-primary);
}

.text-dark {
    color: var(--axis-dark);
}

.text-muted {
    color: var(--axis-text-muted);
}

.text-white {
    color: var(--axis-white);
}

.text-xs {
    font-size: var(--axis-text-xs);
}

.text-sm,
.axis-text-sm {
    font-size: var(--axis-text-sm);
}

.text-base {
    font-size: var(--axis-text-base);
}

/* Rich text editor custom formats */
.axis-text-lg {
    font-size: var(--axis-text-lg);
    /* font-weight: 500; */
    line-height: 1.5;
}

.axis-text-featured {
    font-size: clamp(18px, 3vw, 20px);
    font-weight: 600;
    color: var(--axis-primary);
    line-height: 1.4;
}

.axis-text-highlight {
    background: linear-gradient(to right, rgba(0, 136, 204, 0.1) 0%, rgba(0, 136, 204, 0.05) 100%);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

/* ==========================================================================
   RICH TEXT EDITOR CUSTOM UTILITIES
   ========================================================================== */

/* Text Size Utilities */
.axis-text-xl {
    font-size: var(--axis-text-xl);
    line-height: 1.5;
}

.axis-text-lg {
    font-size: var(--axis-text-lg);
    /* line-height: 1.6; */
}

.axis-text-base {
    font-size: var(--axis-text-base);
    line-height: 1.6;
}

/* Text Color Utilities */
.axis-color-primary {
    color: var(--axis-primary) !important;
}

.axis-color-navy {
    color: var(--axis-dark) !important;
}

.axis-color-green {
    color: var(--axis-success) !important;
}

.axis-color-orange {
    color: var(--axis-accent) !important;
}

.axis-color-purple {
    color: var(--axis-secondary-purple) !important;
}

.axis-color-gray {
    color: var(--axis-gray-500) !important;
}

.axis-color-black {
    color: var(--axis-black) !important;
}

.axis-color-white {
    color: var(--axis-white) !important;
}

/* Background Highlights */
.axis-bg-highlight {
    background: rgba(0, 136, 204, 0.1);
    padding: var(--axis-space-1) var(--axis-space-2);
    border-radius: var(--axis-radius-sm);
}

.axis-bg-orange {
    background: rgba(251, 166, 61, 0.15);
    padding: var(--axis-space-1) var(--axis-space-2);
    border-radius: var(--axis-radius-sm);
}

.axis-bg-success {
    background: rgba(40, 167, 69, 0.15);
    padding: var(--axis-space-1) var(--axis-space-2);
    border-radius: var(--axis-radius-sm);
}

.axis-bg-warning {
    background: rgba(255, 193, 7, 0.15);
    padding: var(--axis-space-1) var(--axis-space-2);
    border-radius: var(--axis-radius-sm);
}

/* Text Weight Variations */
.axis-text-light {
    font-weight: 300;
}

.axis-text-normal {
    font-weight: 400;
}

.axis-text-medium {
    font-weight: 500;
}

.axis-text-bold {
    font-weight: 700;
}

/* Utility Text Styles */
.axis-text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.axis-text-italic {
    font-style: italic;
}

.axis-text-underline {
    text-decoration: underline;
}

/* List Style Utilities */
.axis-list-checkmarks {
    list-style: none;
    padding-left: 1.5em;
}

/* List Style Utilities */
.axis-list-checkmarks {
    list-style: none;
    padding-left: 1.5em;
}

.axis-list-checkmarks li {
    position: relative;
    margin-bottom: 0.5em;
}

.axis-list-checkmarks li::before {
    content: '✓';
    position: absolute;
    left: -1.2em;
    color: var(--axis-primary);
    font-weight: bold;
    font-size: 1.1em;
}

/* Match checkmark color to any preceding colored text */
[class*="axis-color-"]+.axis-list-checkmarks li::before,
[class*="axis-color-"]~.axis-list-checkmarks li::before {
    color: inherit;
}

.axis-list-arrows {
    list-style: none;
    padding-left: 1.5em;
}

.axis-list-arrows li {
    position: relative;
    margin-bottom: 0.5em;
}

.axis-list-arrows li::before {
    content: '→';
    position: absolute;
    left: -1.2em;
    color: var(--axis-primary);
    font-weight: bold;
}

.axis-list-numbers {
    counter-reset: axis-counter;
    padding-left: 1.8em;
}

.axis-list-numbers li {
    counter-increment: axis-counter;
    position: relative;
    margin-bottom: 0.5em;
    list-style: none;
}

.axis-list-numbers li::before {
    content: counter(axis-counter) '.';
    position: absolute;
    left: -1.5em;
    color: var(--axis-primary);
    font-weight: 600;
    font-size: 0.9em;
}

.axis-list-bullets {
    list-style-type: disc;
    padding-left: 1.5em;
}

.axis-list-bullets li {
    margin-bottom: 0.5em;
}

.axis-list-bullets li::marker {
    color: var(--axis-gray-500);
}

.axis-list-clean {
    list-style: none;
    padding-left: 0;
}

.axis-list-clean li {
    margin-bottom: 0.5em;
}

/* Blockquote styling (override Bricks defaults, use with rich text editor) */
blockquote.axis-blockquote {
    border: none;
    padding: 0;
    margin: 0;
    position: static;
    font-family: inherit;
    font-size: inherit;
    font-style: italic;
    display: inline;
    quotes: "" " " "";
}

/* Make blockquote paragraphs inline too */
blockquote.axis-blockquote p {
    display: inline;
    margin: 0;
    padding: 0;
}

blockquote.axis-blockquote::before {
    content: open-quote;
    font-size: 1.35em;
    line-height: 0;
    vertical-align: -0.1em;
}

blockquote.axis-blockquote::after {
    content: close-quote;
    font-size: 1.35em;
    line-height: 0;
    vertical-align: -0.1em;
}

/* Dark background adjustments for rich text formats */
.axis-section--bg-dark .axis-text-highlight,
.axis-section--bg-primary .axis-text-highlight,
.axis-section--bg-gradient-primary .axis-text-highlight,
.axis-section--bg-gradient-teal .axis-text-highlight {
    background: rgba(255, 255, 255, 0.1);
}

/* Dark background adjustments for section headings and intro text */
.axis-section--bg-dark .section-heading,
.axis-section--bg-dark .section-heading-wrapper .section-heading,
.axis-section--bg-primary .section-heading,
.axis-section--bg-primary .section-heading-wrapper .section-heading,
.axis-section--bg-gradient .section-heading,
.axis-section--bg-gradient .section-heading-wrapper .section-heading,
.axis-section--bg-gradient-primary .section-heading,
.axis-section--bg-gradient-primary .section-heading-wrapper .section-heading,
.axis-section--bg-gradient-teal .section-heading,
.axis-section--bg-gradient-teal .section-heading-wrapper .section-heading {
    color: var(--axis-white) !important;
}

.axis-section--bg-dark .section-intro,
.axis-section--bg-dark .section-heading-wrapper .section-intro,
.axis-section--bg-dark .section-intro p,
.axis-section--bg-primary .section-intro,
.axis-section--bg-primary .section-heading-wrapper .section-intro,
.axis-section--bg-primary .section-intro p,
.axis-section--bg-gradient .section-intro,
.axis-section--bg-gradient .section-heading-wrapper .section-intro,
.axis-section--bg-gradient .section-intro p,
.axis-section--bg-gradient-primary .section-intro,
.axis-section--bg-gradient-primary .section-heading-wrapper .section-intro,
.axis-section--bg-gradient-primary .section-intro p,
.axis-section--bg-gradient-teal .section-intro,
.axis-section--bg-gradient-teal .section-heading-wrapper .section-intro,
.axis-section--bg-gradient-teal .section-intro p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Keep the decorative underline visible with white/accent colors on dark backgrounds */
.axis-section--bg-dark .section-heading::after,
.axis-section--bg-primary .section-heading::after,
.axis-section--bg-gradient .section-heading::after,
.axis-section--bg-gradient-primary .section-heading::after,
.axis-section--bg-gradient-teal .section-heading::after {
    background: linear-gradient(90deg, var(--axis-white), var(--axis-accent));
}


.text-lg {
    font-size: var(--axis-text-lg);
}

.text-xl {
    font-size: var(--axis-text-xl);
}

.text-2xl {
    font-size: var(--axis-text-2xl);
}

.font-normal {
    font-weight: var(--axis-font-normal);
}

.font-medium {
    font-weight: var(--axis-font-medium);
}

.font-semibold {
    font-weight: var(--axis-font-semibold);
}

.font-bold {
    font-weight: var(--axis-font-bold);
}

/* Display utilities */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

/* Centered button row utility (Global) */
.btn-center-row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--axis-space-6);
}

.btn-center-row a,
.btn-center-row button,
.btn-center-row .bricks-button,
.btn-center-row .btn {
    display: inline-block;
}

/* Global Reusable Utilities (promoted) */

/* Asymmetric two-column grid utility */
.axis-two-col-42-58 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-10);
    align-items: start;
}

@media (min-width: 992px) {
    .axis-two-col-42-58 {
        grid-template-columns: 42% 58%;
        gap: var(--axis-space-12);
    }
}

/* Readable measure utility for text blocks */
.axis-measure {
    max-width: 65ch;
}

/* Standard Section Intro (global) - Consistent spacing rhythm */
.section-intro,
.axis-section .section-intro,
.section-description,
.axis-section .section-description {
    text-align: center;
    max-width: 65ch;
    margin: var(--axis-space-1) auto var(--axis-space-10);
    font-size: var(--axis-text-lg);
    line-height: 1.7;
    color: var(--axis-text-muted);
}

/* Desktop sizing removed - sections control their own text size */

/* Dark section variant */
.section-dark .section-intro,
.section-dark .section-description {
    color: var(--axis-text-light) !important;
}

/* Bricks text elements used as intros should inherit intro styling */
.axis-section>.brxe-text,
.axis-section>.brxe-text-basic,
.axis-section>.brxe-rich-text {
    text-align: center;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

/* Add spacing after intro text when it's a direct child of axis-section */
.axis-section>.brxe-text-basic.section-intro-text,
.axis-section>.brxe-text.section-intro-text {
    margin-bottom: var(--axis-space-10);
}


/* ===== Global Utilities: Calm transitions, cards, grid gaps, icon sizes ===== */
.axis-transition-calm {
    transition: box-shadow 160ms ease, background-color 160ms ease,
        border-color 160ms ease, color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .axis-transition-calm {
        transition: none;
    }
}

/* Section border utilities */
.section-border-top {
    border-top: 1px solid var(--axis-gray-300);
}

.section-border-bottom {
    border-bottom: 1px solid var(--axis-gray-300);
}

.section-border-y {
    border-top: 1px solid var(--axis-gray-300);
    border-bottom: 1px solid var(--axis-gray-300);
}

.section-border-all {
    border: 1px solid var(--axis-gray-300);
}



/* Grid gap utilities */
.axis-grid-gap-6 {
    gap: var(--axis-space-6);
}

.axis-grid-gap-7 {
    gap: var(--axis-space-7);
}

.axis-grid-gap-8 {
    gap: var(--axis-space-8);
}

.axis-grid-gap-11 {
    gap: var(--axis-space-11);
}

/* Icon sizing */
.axis-icon-44 {
    width: 44px;
    height: 44px;
    font-size: 44px;
}

.axis-icon-52 {
    width: 52px;
    height: 52px;
    font-size: 52px;
}

.axis-icon-56 {
    width: 56px;
    height: 56px;
    font-size: 56px;
}

/* CTA group alignment utility */
.axis-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--axis-space-5);
    text-align: center;
    flex-wrap: wrap;
}

/* Auto-fit responsive grids (items fill available space) */
.axis-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--axis-space-8);
    width: 100%;
    /* Neutral container - cards define width */
}

.axis-grid-auto-lg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--axis-space-8);
}

/* Two-column split layouts with ratio variations */
.axis-two-col-50-50 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-10);
    align-items: center;
}

@media (min-width: 992px) {
    .axis-two-col-50-50 {
        grid-template-columns: 1fr 1fr;
        gap: var(--axis-space-12);
    }
}

.axis-two-col-60-40 {
    display: grid;
    grid-template-columns: 1fr;
    /* gap: var(--axis-space-10); */
    align-items: start;
}

@media (min-width: 992px) {
    .axis-two-col-60-40 {
        grid-template-columns: 60% 40%;
        grid-template-rows: min-content;
        gap: var(--axis-space-12);
        align-items: stretch;
    }
}

.axis-two-col-40-60 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-10);
    align-items: start;
}

@media (min-width: 992px) {
    .axis-two-col-40-60 {
        grid-template-columns: 40% 60%;
        grid-template-rows: min-content;
        gap: var(--axis-space-12);
        align-items: stretch;
    }
}

/* Image constraints for two-column layouts */
.axis-two-col-60-40 .brxe-image,
.axis-two-col-40-60 .brxe-image,
.axis-two-col-50-50 .brxe-image {
    width: 100%;
    height: 0;
    min-height: 100%;
    overflow: hidden;
    align-self: stretch;
}

.axis-two-col-60-40 .brxe-image img,
.axis-two-col-40-60 .brxe-image img,
.axis-two-col-50-50 .brxe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   ENHANCED CARD SYSTEM - Modular card components
   ========================================================================== */



/* Interactive card states */
.axis-card-interactive {
    cursor: pointer;
    transition: all var(--axis-transition-base);
}

.axis-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--axis-shadow-card-hover);
    border-color: rgba(0, 136, 204, 0.2);
}



@media (min-width: 769px) {
    .axis-cta-group {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--axis-space-7);
        text-align: left;
    }
}

/* Badge overlay utility (absolute positioning with clamp sizing) */
.axis-badge-overlay {
    position: absolute;
    bottom: var(--axis-space-4);
    left: var(--axis-space-4);
    background: var(--axis-white);
    border: 2px solid var(--axis-primary);
    border-radius: var(--axis-radius-lg);
    padding: var(--axis-space-3) var(--axis-space-5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: clamp(220px, 40%, 280px);
    z-index: 10;
    text-align: left;
}

@media (max-width: 991px) {
    .axis-badge-overlay {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: var(--axis-space-6);
        max-width: min(100%, 540px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .axis-badge-overlay {
        bottom: var(--axis-space-2);
        left: var(--axis-space-2);
        max-width: clamp(180px, 72%, 220px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);
    }
}

/* ==========================================================================
   BRICKS-SPECIFIC OVERRIDES (Minimal - only when necessary)
   ========================================================================== */

/* Ensure Bricks buttons inherit our styles */
.brxe-button.bricks-button {
    font-family: inherit !important;
    color: inherit;
}

/* Fix Bricks list items if needed */
.brxe-list li {
    list-style-position: inside;
}

/* ==========================================================================
   ANIMATION & MOTION
   ========================================================================== */

/* Respect user's motion preferences (WCAG 2.1) */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Smooth scroll for anchor links */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   INTERACTIVE STATE ENHANCEMENTS
   ========================================================================== */

/* Enhanced button active state */
.btn:active,
.bricks-button:active {
    transform: translateY(0);
    box-shadow: var(--axis-shadow-sm);
}

/* Disabled button state */
.btn:disabled,
.bricks-button:disabled,
.btn[disabled],
.bricks-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state for buttons with animated spinner */
.btn.loading,
.bricks-button.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn.loading::after,
.bricks-button.loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ==========================================================================
   SMOOTH TRANSITIONS FOR ALL INTERACTIVE ELEMENTS
   ========================================================================== */

/* Minimal transitions - removed for cleaner aesthetic */

/* ==========================================================================
   CARD COMPONENTS (Treatment, Service, Therapy Cards)
   ========================================================================== */

/* Card grid layouts - responsive auto-fit pattern */
.what-i-treat-grid,
.how-therapy-works-grid,
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--axis-space-8);
    max-width: var(--axis-container-max);
    margin: 0 auto;
}

/* Generic card styling (treatment, service, therapy cards) */
.treatment-card,
.service-card,
.therapy-step-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: var(--axis-space-8);
    background: var(--axis-white);
    border-radius: var(--axis-radius-lg);
    box-shadow: var(--axis-shadow-sm);
    transition: all var(--axis-transition-base);
}

.treatment-card:hover,
.service-card:hover,
.therapy-step-card:hover {
    box-shadow: var(--axis-shadow-lg);
    transform: translateY(-4px);
}

/* Clickable card styling (pseudo-element approach for accessibility) */
.clickable-card {
    cursor: pointer;
    position: relative;
}

.clickable-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.clickable-card a,
.clickable-card button {
    position: relative;
    z-index: 2;
}

/* Card title */
.treatment-card h3,
.service-card h3,
.therapy-step-card h3 {
    font-size: var(--axis-text-xl);
    font-weight: var(--axis-font-bold);
    color: var(--axis-dark);
    margin-bottom: var(--axis-space-4);
}

/* Card description with line clamp */
.treatment-card p,
.service-card p,
.therapy-step-card p {
    flex-grow: 1;
    font-size: var(--axis-text-base);
    line-height: 1.6;
    color: var(--axis-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile: Smaller cards */
@media (max-width: 768px) {

    .what-i-treat-grid,
    .how-therapy-works-grid,
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--axis-space-6);
    }

    .treatment-card,
    .service-card,
    .therapy-step-card {
        min-height: auto;
        padding: var(--axis-space-6);
    }
}

/* ==========================================================================
   CTA SECTIONS
   ========================================================================== */

/* Limit CTA section widths for better readability */
.cta-section-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.cta-section .bricks-button,
.cta-section .btn {
    margin: var(--axis-space-6) auto 0;
}

/* CTA actions wrapper (Global) */
.cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--axis-space-6);
    text-align: center;
}

@media (max-width: 768px) {
    .cta-actions {
        flex-direction: column;
        gap: var(--axis-space-4);
    }
}

/* Horizontal CTA layout variant - placed after mobile rules for proper cascade */
.cta-actions.cta-actions--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-width: 768px) {

    /* Keep horizontal layout on mobile when explicitly set */
    .cta-actions.cta-actions--horizontal {
        flex-direction: row;
        justify-content: center;
    }
}

/* Mobile: Hide mid-page CTAs (keep hero + floating button only) */
@media (max-width: 768px) {
    .cta-section:not(.hero-section):not(.footer-cta) {
        display: none;
    }
}

/* ==========================================================================
   FOCUS VISIBLE (Better keyboard navigation)
   ========================================================================== */

/* Only show focus outline for keyboard navigation */
:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {

    /* Hide non-essential elements when printing */
    .bricks-mobile-menu-toggle,
    .bricks-mobile-menu-wrapper,
    .bricks-mobile-menu-overlay,
    .skip-to-content,
    .back-to-top {
        display: none !important;
    }

    /* Ensure text is readable */
    body {
        color: #000000;
        background: #ffffff;
    }

    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
    }

    /* Avoid page breaks inside elements */
    .card,
    .box,
    .welcome-box,
    .appointment-form-box {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   GLOBAL ENHANCEMENTS (New)
   ========================================================================== */

/* (moved to header-navigation.css) */

/* Fade-up animation for sections */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up-on-scroll {
    animation: fadeUp 0.6s ease-out;
}

/* Floating mobile CTA button - hide on desktop */
.floating-cta-mobile {
    display: none;
}

/* Floating mobile CTA button - show and position on mobile */
@media (max-width: 991px) {
    .floating-cta-mobile {
        display: block !important;
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1001 !important;
        box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3) !important;
        animation: slideUp 0.3s ease-out;
        width: auto !important;
        max-width: calc(100% - 40px) !important;
        overflow: visible !important;
        padding: var(--axis-space-3);
    }

    @keyframes slideUp {
        from {
            transform: translateX(-50%) translateY(100px);
            opacity: 0;
        }

        to {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
    }

    .btn-outline,
    .btn-secondary,
    .btn-outline-white {
        width: auto !important;
        /* display: inline-block !important; */
    }
}

/* ==========================================================================
   GLOBAL POLISH (merged from comprehensive-polish.css)
   ========================================================================== */

/* Typography standardization */
.about-preview-section h2,
.faq-section h2,
.final-cta-section h2 {
    font-weight: var(--axis-font-bold);
}

.step-title {
    font-weight: var(--axis-font-semibold);
}

.about-bio,
.faq-accordion p,
.section-subtitle {
    line-height: 1.6;
}

/* About section enhancements */
@media (min-width: 992px) {
    .about-preview-wrapper {
        gap: var(--axis-space-12);
    }
}

.credentials-wrapper {
    background: var(--axis-gray-50);
    padding: var(--axis-space-7) var(--axis-space-8);
    border-radius: var(--axis-radius-lg);
    border-left: 3px solid var(--axis-primary);
    box-shadow:
        0 4px 12px rgba(0, 136, 204, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.credentials-wrapper:hover {
    box-shadow:
        0 6px 16px rgba(0, 136, 204, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
}

.about-preview-image {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.about-preview-image:hover {
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.18),
        0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px) scale(1.01);
}

.about-bio p {
    margin-bottom: 1.25em;
}

.about-bio p:last-child {
    margin-bottom: 0;
}

/* FAQ CTA button */
.faq-cta-btn {
    width: 100%;
}

@media (min-width: 769px) {
    .faq-cta-btn {
        width: auto;
        margin: 0 auto;
        display: table;
    }
}

/* Final CTA content */
.final-cta-content,
.cta-content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 768px) {
    .cta-buttons-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--axis-space-4);
    }

    .cta-urgency {
        margin-bottom: var(--axis-space-4);
    }
}

/* Footer global spacing */
.footer-top-grid {
    display: grid;
    gap: var(--axis-space-8);
}

.footer-contact-list li,
.footer-legal-links a {
    margin-bottom: var(--axis-space-2);
}

/* Sticky header shadow (handled in header-navigation.css) */

/* ==========================================================================
   VISUAL POLISH (merged from visual-polish-enhancements.css)
   ========================================================================== */

/* Hero section text shadows */
.hero-section .hero-title,
.hero-section .brxe-heading {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3);
    /* letter-spacing: -0.02em; */
}

.hero-section .hero-subtitle,
.hero-section .brxe-text {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Hero content wrapper (Global) */
.hero-content-wrap {
    /* max-width: 1000px; */
    margin: 0 auto;
    text-align: center;
    padding-inline: var(--axis-space-5);
}

/* Hero CTA buttons */
.hero-section .btn,
.hero-section .bricks-button {
    box-shadow:
        0 4px 12px rgba(0, 136, 204, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
}

.hero-section .btn:hover,
.hero-section .bricks-button:hover {
    box-shadow:
        0 6px 20px rgba(0, 136, 204, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* ==========================================================================
   LEGACY HERO STYLES (for older sections)
   ========================================================================== */

/* Welcome/Booking section */
.welcome-box {
    /* Shadows moved to welcome-booking-section.css */
    position: relative;
}

.welcome-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--axis-dark-overlay);
    border-radius: var(--axis-radius-lg);
    z-index: 0;
}

/* Gradient bar removed - managed in welcome-booking-section.css */

.appointment-form-box {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Removed - focus styles now global in line 569 */

/* Footer link animations */
.footer-menu a,
.footer-legal-links a,
.footer-contact-list a {
    transition: all 0.2s ease;
    position: relative;
}

.footer-menu a::after,
.footer-legal-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--axis-primary);
    transition: width 0.3s ease;
}

.footer-menu a:hover::after,
.footer-legal-links a:hover::after {
    width: 100%;
}

.footer-social-links a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-links a:hover {
    transform: translateY(-4px) scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 136, 204, 0.3));
}

.btn-primary::before,
.bricks-button.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 0;
}

.btn-primary:hover::before,
.bricks-button.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover,
.bricks-button.btn-primary:hover {
    box-shadow:
        0 6px 20px rgba(0, 136, 204, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px) scale(1.02);
}

/* Glass button variant - override transforms to prevent conflicts */
.btn-outline-glass.btn-primary:hover {
    transform: translateY(-2px);
    overflow: visible;
}

/* Focus states for accessibility - buttons and links only */
.btn:focus-visible,
.bricks-button:focus-visible,
a:focus-visible {
    box-shadow: 0 0 0 4px rgba(0, 136, 204, 0.1);
}

/* Input focus styles are handled globally at line 569 */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   GLOBAL LINK STYLES
   ========================================================================== */

.link-primary {
    color: var(--axis-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.link-primary:hover {
    color: var(--axis-primary-dark);
}

.link-accent {
    color: var(--axis-accent);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.link-accent:hover {
    color: var(--axis-accent-dark, var(--axis-primary));
}

/* ==========================================================================
   GLOBAL ICON STYLES
   ========================================================================== */

.icon-primary {
    color: var(--axis-primary);
}

.icon-accent {
    color: var(--axis-accent);
}

.icon-light {
    color: var(--axis-text-light-strong);
}

/* ==========================================================================
   CONTACT LINK STYLES (for consistency across site)
   ========================================================================== */

.contact-link {
    color: var(--axis-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: var(--axis-primary-dark);
}

/* Phone numbers get special treatment */
.contact-link[href^="tel:"] {
    font-weight: 600;
}

/* ==========================================================================
   SOCIAL ICON STYLES (reusable across site)
   ========================================================================== */

.social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--axis-white);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.social-icon-link:hover {
    background: var(--axis-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.social-icon-link i,
.social-icon-link::before {
    color: var(--axis-white);
    font-size: 20px;
}

/* Selection styling */
::selection {
    background: rgba(0, 136, 204, 0.2);
    color: var(--axis-dark);
}

::-moz-selection {
    background: rgba(0, 136, 204, 0.2);
    color: var(--axis-dark);
}


/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Contact-specific utility classes are defined in contact-page.css to avoid duplication. */

/* ==========================================================================
   PREMIUM INTERACTIVE CARD SYSTEM (Global Reusable Components)
   Promoted from contact-page.css for site-wide reuse
   ========================================================================== */



.axis-card-disabled:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.axis-card-disabled::before {
    display: none;
}

.axis-card-disabled .axis-icon-interactive {
    transform: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   PREMIUM FORM STYLING (Global Reusable)
   High-end form inputs with elevation and focus states
   ========================================================================== */

.axis-form-premium input[type="text"],
.axis-form-premium input[type="email"],
.axis-form-premium input[type="tel"],
.axis-form-premium textarea,
.axis-form-premium select {
    width: 100%;
    padding: 16px 24px;
    font-size: 18px;
    border: 2px solid var(--axis-gray-300);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 24px;
    font-family: inherit;
    background: var(--axis-white);
}

/* Removed - focus styles now global in line 569 */

.axis-form-premium textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.7;
}

/* Premium submit button (larger, more prominent) */
.axis-form-premium button[type="submit"],
.axis-form-premium .btn-submit {
    width: 100%;
    padding: 24px;
    background: linear-gradient(135deg, var(--axis-primary) 0%, var(--axis-primary-light) 100%);
    color: var(--axis-white);
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 64px;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.25);
}

.axis-form-premium button[type="submit"]:hover,
.axis-form-premium .btn-submit:hover {
    background: linear-gradient(135deg, var(--axis-primary-dark) 0%, var(--axis-primary) 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 136, 204, 0.4);
}

.axis-form-premium button[type="submit"]:active,
.axis-form-premium .btn-submit:active {
    transform: translateY(-1px);
}

/* ==========================================================================
   GRADIENT HERO SECTION PATTERN (Global Reusable)
   Premium brand gradient with mesh overlay effect
   ========================================================================== */

.axis-hero-gradient {
    position: relative;
    background: linear-gradient(135deg, var(--axis-primary) 0%, var(--axis-primary-light) 50%, var(--axis-accent) 100%);
    color: var(--axis-white);
    overflow: hidden;
}

/* Premium mesh gradient overlay */
.axis-hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(251, 166, 61, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 168, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    background-size: 100% 100%;
    pointer-events: none;
}

/* Subtle dot pattern texture */
.axis-hero-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.4;
    pointer-events: none;
}

/* Ensure content stays above overlays */
.axis-hero-gradient .content-wrap,
.axis-hero-gradient>* {
    position: relative;
    z-index: 10;
}

/* Premium text shadows for readability on gradients */
.axis-hero-gradient h1,
.axis-hero-gradient h2,
.axis-hero-gradient .hero-heading {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.axis-hero-gradient p,
.axis-hero-gradient .hero-subtitle {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   BUTTON VARIANTS (Extended from base button system)
   ========================================================================== */

/* Link-style button with arrow animation */
.btn-link-arrow {
    background: none;
    border: none;
    color: var(--axis-primary);
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.btn-link-arrow:hover {
    color: var(--axis-primary-dark);
    gap: 16px;
}

.btn-link-arrow::after {
    content: '→';
    transition: transform 0.25s ease;
    font-size: 20px;
}

.btn-link-arrow:hover::after {
    transform: translateX(4px);
}

/* Gradient secondary button (for accents) */
.btn-gradient-secondary {
    background: linear-gradient(135deg, var(--axis-accent) 0%, #f59e0b 100%);
    color: var(--axis-white);
    border: none;
    padding: 24px 56px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px rgba(251, 166, 61, 0.25);
}

.btn-gradient-secondary:hover {
    background: linear-gradient(135deg, #f59e0b 0%, var(--axis-accent) 100%);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(251, 166, 61, 0.4);
}

.btn-gradient-secondary:active {
    transform: translateY(-2px);
}

/* Disabled button states (works with all button variants) */
.btn-disabled,
.btn:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--axis-gray-300);
    color: var(--axis-gray-400);
}

.btn-disabled:hover,
.btn:disabled:hover,
button:disabled:hover {
    background: transparent;
    color: var(--axis-gray-400);
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   UTILITY: BORDERED STATUS BOXES (for availability, alerts, etc)
   ========================================================================== */

.axis-status-box {
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
    border-left: 5px solid;
    font-weight: 700;
}

.axis-status-success {
    background: linear-gradient(135deg, #d4edda 0%, #c8e6c9 100%);
    border-left-color: #28a745;
    color: #155724;
}

.axis-status-info {
    background: rgba(0, 136, 204, 0.1);
    border-left-color: var(--axis-primary);
    color: var(--axis-primary);
}

.axis-status-warning {
    background: rgba(251, 166, 61, 0.15);
    border-left-color: var(--axis-accent);
    color: #c87a00;
}

/* ==========================================================================
   RESPONSIVE MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
    .axis-card-premium:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .axis-card-accent-left {
        padding: 24px;
    }

    .axis-form-premium input,
    .axis-form-premium textarea {
        font-size: 17px;
    }

    .axis-form-premium button[type="submit"] {
        font-size: 19px;
        min-height: 64px;
    }

    .btn-gradient-secondary {
        font-size: 18px;
        padding: 16px 48px;
        min-height: 56px;
    }
}

@media (max-width: 480px) {

    .axis-card-premium,
    .axis-card-accent-left {
        padding: 24px 20px;
    }

    .axis-form-premium input,
    .axis-form-premium textarea {
        font-size: 17px;
        padding: 16px 24px;
    }
}

/* Global layout & utility classes (promoted per responsive best practices)
    Reuse across pages; local files should compose these rather than re-implement. */

.content-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}

@media (min-width: 1200px) {
    .grid-2 {
        gap: var(--space-8);
    }
}

.card {
    background: var(--axis-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.heading-accent {
    position: relative;
    padding-bottom: var(--space-2);
}

.heading-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4rem;
    height: 3px;
    background: var(--brand-primary-600);
}

/* Vertical stack utilities for consistent rhythm */
.stack-4>*+* {
    margin-top: var(--space-4);
}

.stack-6>*+* {
    margin-top: var(--space-6);
}

.stack-8>*+* {
    margin-top: var(--space-8);
}

/* Padding utilities */
.pad-4 {
    padding: var(--space-4);
}

.pad-6 {
    padding: var(--space-6);
}

.pad-8 {
    padding: var(--space-8);
}

/* Gap utilities for grids/flex containers */
.gap-6 {
    gap: var(--space-6);
}

.gap-7 {
    gap: var(--space-7);
}

.gap-8 {
    gap: var(--space-8);
}

/* Alignment helpers */
.align-start {
    align-items: start;
}

.align-center {
    align-items: center;
}

/* ==========================================================================
   STANDARDIZED SECTION SYSTEM
   Added: December 3, 2025
   Purpose: Unified section structure to reduce duplication
   ========================================================================== */

/* Base Section - Standard vertical rhythm */
.axis-section {
    padding: clamp(60px, 10vh, 100px) 0;
    position: relative;
}

/* Fix for theme override: .brxe-container {width: 100%} removes gutters */
/* .axis-section .brxe-container,
.axis-section>.container,
.welcome-booking-section .brxe-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
}
 */
.welcome-booking-section .brxe-container {

    /* margin-left: var(--axis-space-16); */
    /* margin-right: var(--axis-space-16); */
    padding-left: 120px;
    padding-right: 120px;
}
@media (max-width: 767px) {
   .welcome-booking-section .brxe-container {

    /* margin-left: var(--axis-space-16); */
    /* margin-right: var(--axis-space-16); */
    padding-left: 0px;
    padding-right: 0px;
}
}


/* Section Size Variants */
.axis-section--compact {
    padding: clamp(40px, 6vh, 60px) 0;
}

.axis-section--spacious {
    padding: clamp(80px, 12vh, 140px) 0;
}

/* Background Variants */
.axis-section--bg-white {
    background: var(--axis-white);
}

.axis-section--bg-light {
    background: var(--axis-gray-50);
}

.axis-section--bg-dark {
    background: var(--axis-dark);
    color: var(--axis-white);
}

.axis-section--bg-primary {
    background: var(--axis-primary);
    color: var(--axis-white);
}

.axis-section--bg-gradient {
    background: linear-gradient(135deg, rgb(0, 136, 204) 0%, rgb(251, 166, 61) 100%);
    color: var(--axis-white);
}

.axis-section--bg-gradient-teal {
    background: linear-gradient(135deg, rgb(20, 184, 166) 0%, rgb(6, 78, 159) 100%);
    color: var(--axis-white);
}

.axis-section--bg-gradient-dark {
    background: linear-gradient(135deg, var(--axis-dark) 0%, var(--axis-primary) 100%);
    color: var(--axis-white);
}

.axis-section--bg-gradient-light {
    background: linear-gradient(180deg, var(--axis-white) 0%, var(--axis-gray-50) 100%);
}

/* Section Border Options */
.axis-section--border-top {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.axis-section--border-bottom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.axis-section--border-top-light {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Standardized Grid Utilities */
.axis-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-6);
}

@media (min-width: 767px) {
    .axis-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--axis-space-8);
    }
}

.axis-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-6);
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .axis-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .axis-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--axis-space-8);
    }
}

.axis-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-6);
}

@media (min-width: 640px) {
    .axis-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .axis-grid-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--axis-space-8);
    }
}

/* Grid alignment helpers */
.axis-grid-stretch {
    align-items: stretch;
}

.axis-grid-start {
    align-items: start;
}

.axis-grid-center {
    align-items: center;
}

/* Two-column with flexible percentage split (form ~55%, info ~45%) */
.axis-grid-2-auto {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-8);
}

@media (min-width: 992px) {
    .axis-grid-2-auto {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--axis-space-10);
    }
}

/* ==========================================================================
   STANDARDIZED CARD SYSTEM
   Added: December 3, 2025
   Purpose: Unified card structure to reduce duplication across sections
   ========================================================================== */

/* Card Grid Container - for stacking cards in right column */
.axis-card-grid {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-6);
}

/* Base Card - Common structure */
.axis-card {
    background: var(--axis-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--axis-radius-xl);
    box-shadow: var(--axis-shadow-card);
    padding: var(--axis-space-8);
    display: flex;
    flex-direction: column;
    transition: all var(--axis-transition-base);
}

/* Interactive card (clickable/hoverable) */
.axis-card--interactive {
    cursor: pointer;
}

.axis-card--interactive:hover {
    box-shadow: var(--axis-shadow-card-hover);
    transform: translateY(-2px);
}

/* Card Size Variants */
.axis-card--compact {
    padding: var(--axis-space-6);
}

.axis-card--spacious {
    padding: var(--axis-space-10);
}

/* Card Background Variants */
.axis-card--gradient-light {
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.03) 0%, rgba(30, 42, 56, 0.03) 100%);
}

.axis-card--dark {
    background: var(--axis-dark);
    color: var(--axis-white);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Card Border Accents */
.axis-card--accent-left {
    border-left: 4px solid var(--axis-primary);
}

.axis-card--accent-top {
    position: relative;
    overflow: hidden;
}

.axis-card--accent-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--axis-gradient-accent);
    opacity: 1;
}

/* Card Shadow Variants */
.axis-card--shadow-sm {
    box-shadow: var(--axis-shadow-sm);
}

.axis-card--shadow-md {
    box-shadow: var(--axis-shadow-md);
}

.axis-card--shadow-lg {
    box-shadow: var(--axis-shadow-lg);
}

/* Card Text Alignment */
.axis-card--text-center {
    text-align: center;
    align-items: center;
}

/* Card Height Fill (for grid layouts) */
.axis-card--fill-height {
    height: 100%;
}

/* Mobile optimizations for all cards */
@media (max-width: 768px) {
    .axis-card {
        padding: var(--axis-space-6);
    }

    .axis-card--spacious {
        padding: var(--axis-space-8);
    }
}

/* ==========================================================================
   FLEXIBLE CONTENT BLOCK COMPONENT
   Auto-hide empty elements to reduce visual clutter
   ========================================================================== */

/* Hide empty headings, text elements, and images without src */
.brxe-fcb001 .brxe-heading:empty,
.brxe-fcb001 .brxe-text-basic:empty,
.brxe-fcb001 .brxe-image:not([src]),
.brxe-fcb001 .brxe-image[src=""],
#brxe-fcb006:empty,
#brxe-fcb007:empty,
#brxe-fcb008:not([src]),
#brxe-fcb009:empty,
#brxe-fcb010:empty {
    display: none;
}