:root {
    /* Brand Colors - Salmon/Coral (Friendly & Approachable) */
    --color-primary: #f56a6a;
    --color-primary-hover: #e55a5a;
    --color-primary-contrast: #d44949;

    /* Secondary Colors - Sage Green (Trust & Calm) */
    --color-secondary: #a5c18c;
    --color-secondary-light: #e8f0e1;

    /* Navigation - Bold & Clean */
    --nav-link-color: #555555;
    --nav-link-hover: #f56a6a;
    --nav-link-weight: 700;
    --nav-font-size: 1rem;

    /* Primary Button Gradient */
    --btn-primary-bg-start: #f56a6a;
    --btn-primary-bg-end: #e55a5a;
    --btn-primary-text: #ffffff;
    --btn-primary-border: #d44949;

    /* Hero Section Gradient - Warmer tone */
    --hero-bg-gradient: linear-gradient(180deg, #fdf4f4 0%, #ffffff 100%);
    --color-card-feature-bg: linear-gradient(135deg, #fdf4f4 0%, #f9e1e1 100%);

    /* Status Colors */
    --color-success: #2E7D32;
    --color-success-contrast: #1B5E20;
    --color-warning: #3099ef;
    --color-warning-contrast: #279af8;
    --color-danger: #C62828;
    --color-danger-contrast: #B71C1C;

    /* Surface Colors */
    --color-bg-body: #f9f9f9;
    --color-bg-card: #ffffff;
    --color-border: #e0e0e0;
    --color-border-accent: #a5c18c;
    /* Sage border from old site */

    /* Text Colors */
    --color-text: #444444;
    --color-text-bold: #222222;
    --color-text-light: #777777;

    /* Decorative */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
    --radius-card: 16px;
    --radius-btn: 30px;
    /* More rounded like modern SaaS but old site feel */

    /* Padding */
    --card-padding: 2.5rem;
    --card-padding-mobile: 1rem;
}

/* Layout Overrides to Fix Logo/Menu */
.nav-logo,
#header .nav-logo {
    max-height: 64px !important;
    width: auto !important;
}

@media (max-width: 768px) {

    .nav-logo,
    #header .nav-logo {
        max-height: 30px !important;
    }
}

.desktop-nav,
#header .desktop-nav {
    margin-left: auto !important;
    display: flex !important;
}

@media (max-width: 768px) {

    .desktop-nav,
    #header .desktop-nav {
        display: none !important;
    }
}

/* Fix Hero Overlap */
.main-content,
#main.main-content {
    padding-top: 90px !important;
}

@media (max-width: 768px) {

    .main-content,
    #main.main-content {
        padding-top: 55px !important;
    }
}

/* Constrain Header Width */
.header-inner,
#header .header-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
}