/*
Theme Name: WeCare
Theme URI: https://wecare.com
Author: WeCare Team
Author URI: https://wecare.com
Description: A professional theme for WeCare - PCA Services, ARMHS & Housing Stabilization in Minnesota
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wecare
Tags: healthcare, care, services, responsive, modern
*/

/* ==========================================================================
   CSS Variables - WeCare Official Brand Colors
   ========================================================================== */
:root {
    /* Primary Brand Colors - WeCare Style Guide */
    --terracotta: #CE7D4D;         /* PMS 722 C - Warm Brown/Orange */
    --orange: #F7941D;             /* PMS 1495 C - Bright Orange */
    --teal: #3E645D;               /* PMS 5545 C - Teal/Dark Green */
    --forest: #204230;             /* PMS 560 C - Dark Forest Green */

    /* Semantic Color Mapping */
    --primary-color: #3E645D;      /* Teal - Main brand color */
    --secondary-color: #F7941D;    /* Orange - CTA/buttons */
    --accent-color: #CE7D4D;       /* Terracotta - Warm accent */
    --dark-color: #204230;         /* Forest Green - Dark elements */

    /* Theme Colors (used in page templates) */
    --primary-green: #3E645D;
    --primary-green-dark: #204230;
    --accent-orange: #F7941D;
    --accent-terracotta: #CE7D4D;

    /* Neutral Colors */
    --light-color: #F5F5F5;
    --light-gray: #f8f9fa;
    --text-color: #333333;
    --text-light: #666666;
    --white: #FFFFFF;

    /* Typography - Museo (Josefin Sans) & Century Gothic (Poppins) */
    --font-heading: 'Josefin Sans', 'Century Gothic', 'Avenir', sans-serif;
    --font-body: 'Poppins', 'Century Gothic', 'Avenir', sans-serif;
    --font-primary: var(--font-heading);
    --font-secondary: var(--font-body);

    /* Font Sizes - Change these to update across entire site */
    --font-size-hero: clamp(32px, 4.4vw, 40px);    /* Hero/page titles (h1) */
    --font-size-section: clamp(22px, 3.2vw, 28px); /* Section titles (h2) */
    --font-size-heading: 19px;                      /* Card/subsection headings (h3/h4) */
    --font-size-body: 17px;                         /* Body text, paragraphs */
    --font-size-small: 15px;                        /* Small text, captions */
    --font-size-button: 15px;                       /* Buttons */

    /* Spacing scale (8px base) - use these instead of ad-hoc rem values */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 80px;

    /* Surfaces and borders */
    --surface: #FFFFFF;
    --surface-muted: #F6F7F4;
    --border: #DDE2DC;

    /* Card geometry and elevation */
    --radius-card: 12px;
    --radius-control: 10px;
    --elev-1: 0 1px 2px rgba(32,66,48,.06), 0 2px 8px -4px rgba(32,66,48,.14);
    --elev-2: 0 1px 2px rgba(32,66,48,.07), 0 10px 24px -12px rgba(32,66,48,.26);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--white);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
    color: var(--secondary-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    color: var(--teal);
}

h1 { font-size: var(--font-size-hero); font-weight: 700; }
h2 { font-size: var(--font-size-section); font-weight: 600; }
h3 { font-size: var(--font-size-heading); font-weight: 600; }
h4 { font-size: var(--font-size-heading); font-weight: 600; }

img {
    max-width: 100%;
    height: auto;
}

/* Accessibility - Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.service-image-card:focus-visible,
.related-service-card:focus-visible,
.article-link-card:focus-visible {
    outline: 3px solid var(--accent-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Accessibility - Cursor pointer on clickable elements */
a,
button,
.service-image-card,
.related-service-card,
.area-service-card,
.article-link-card,
.google-link,
.service-link,
[role="button"] {
    cursor: pointer;
}

/* Accessibility - Reduced motion */
@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;
    }
}

/* Accessibility - Content line length */
.content-wrapper,
.overview-content-full,
.service-content,
.area-content {
    max-width: 75ch;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
}

.site-main .container,
.section .container,
main .container {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.section {
    padding: 30px 0;
}

/* ==========================================================================
   Header - Modern Glass Style
   ========================================================================== */
.site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

/* Account for fixed header */
.site-main,
main#main {
    padding-top: 100px;
}

/* Adjust header when WordPress admin bar is present */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Logo Styles */
.site-branding .site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-icon svg {
    width: 60px;
    height: 48px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-name {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1;
}

.logo-tagline {
    font-size: var(--font-size-body);
    color: var(--text-light);
    letter-spacing: 0.5px;
}

.logo-tagline em {
    color: var(--secondary-color);
    font-style: italic;
}

/* ==========================================================================
   Navigation - with Dropdowns
   ========================================================================== */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 10px;
    align-items: center;
}

.main-navigation > ul > li {
    position: relative;
}

.main-navigation a {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 15px; /* Navigation exception */
    color: var(--dark-color);
    padding: 15px 20px;
    display: block;
    position: relative;
}

.main-navigation > ul > li > a {
    border-top: 3px solid transparent;
}

.main-navigation > ul > li.current-menu-item > a,
.main-navigation > ul > li:hover > a {
    border-top-color: var(--primary-color);
}

/* Dropdown Arrow */
.main-navigation .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: var(--text-color);
    vertical-align: middle;
}

/* Dropdown Menu */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.main-navigation li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation ul ul a {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

.main-navigation ul ul a:hover {
    background-color: var(--light-color);
    color: var(--secondary-color);
}

/* Header Right Side */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Header Actions - Buttons and Info */
.header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.header-info {
    font-size: 11px;
    color: var(--text-light);
    text-align: right;
}

.header-info .phone-number {
    color: var(--dark-color);
}

.header-buttons {
    display: flex;
    gap: 10px;
}

.header-buttons .staff-access {
    background-color: var(--primary-color);
    color: var(--white) !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: none;
}

.header-buttons .staff-access:hover {
    background-color: var(--dark-color);
}

.header-buttons .client-login {
    background-color: var(--primary-color);
    color: var(--white) !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.header-buttons .client-login:hover {
    background-color: var(--dark-color);
}

.header-phone {
    font-size: var(--font-size-body);
    color: var(--text-light);
}

.header-phone a {
    color: var(--primary-color);
    font-weight: 600;
}

.header-buttons {
    display: flex;
    gap: 10px;
}


/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--dark-color);
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background: var(--dark-color);
    left: 0;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 350px;
    height: 100%;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 20px;
}

.mobile-menu-overlay.is-active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: var(--text-color);
}

.mobile-nav {
    margin-top: 60px;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav > ul > li {
    border-bottom: 1px solid #eee;
}

.mobile-nav > ul > li > a {
    display: block;
    padding: 15px 0;
    color: var(--text-color);
    font-weight: 500;
    font-size: var(--font-size-body);
    text-decoration: none;
}

.mobile-nav > ul > li > a:hover {
    color: var(--primary-green);
}

.mobile-submenu {
    display: none;
    padding-left: 20px;
    padding-bottom: 10px;
}

.mobile-nav .has-submenu.is-open .mobile-submenu {
    display: block;
}

.mobile-submenu li a {
    display: block;
    padding: 10px 0;
    color: var(--text-light);
    text-decoration: none;
    font-size: var(--font-size-small);
}

.mobile-submenu li a:hover {
    color: var(--primary-green);
}

.mobile-menu-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.mobile-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-green);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 20px;
}

.mobile-menu-actions .btn {
    display: block;
    text-align: center;
    width: 100%;
}

body.mobile-menu-open {
    overflow: hidden;
}

/* ==========================================================================
   Hero Section - Modern Full Width
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 110px;
    background-size: cover;
    background-position: center;
    background-color: var(--dark-color);
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(32, 66, 48, 0.85) 0%, rgba(62, 100, 93, 0.75) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 80px 40px;
    color: var(--white);
}

.hero-logo {
    margin-bottom: 30px;
}

.hero-logo img {
    max-width: 180px;
    opacity: 0.95;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

.hero-title {
    font-size: var(--font-size-hero);
    font-weight: 700;
    margin-bottom: 24px;
    text-shadow: none;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: var(--font-size-body);
    line-height: 1.8;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto 40px;
    font-weight: 400;
}

.hero-subtitle em {
    color: var(--secondary-color);
    font-style: normal;
    font-weight: 600;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
    padding: 150px 0 100px;
    text-align: center;
    margin-top: 70px;
}

.hero-title {
    font-size: var(--font-size-hero);
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: var(--font-size-body);
    opacity: 0.9;
    margin-bottom: 30px;
}

/* ==========================================================================
   Buttons - Modern Style
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    min-height: 44px;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--font-size-button);
    text-transform: none;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #e8850a 100%);
    color: var(--white) !important;
    box-shadow: 0 4px 15px rgba(247, 148, 29, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(247, 148, 29, 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-white {
    background-color: var(--white);
    color: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-outline {
    background-color: transparent;
    color: var(--white) !important;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-color) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   Services Section - Modern Card Layout
   ========================================================================== */
.services-section {
    background-color: var(--white);
}

.section-title-center {
    font-size: var(--font-size-section);
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
    text-transform: none;
    letter-spacing: -0.02em;
    position: relative;
}

.section-title-center::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
    margin: 20px auto 0;
    border-radius: 2px;
}

.service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: center;
    margin-bottom: 100px;
}

.service-row.reverse {
    direction: rtl;
}

.service-row.reverse > * {
    direction: ltr;
}

.service-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.service-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(62, 100, 93, 0.1) 0%, transparent 100%);
    z-index: 1;
}

.service-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.service-image:hover img {
    transform: scale(1.05);
}

.service-content {
    padding: 0;
}

.service-heading {
    font-size: var(--font-size-heading);
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.service-intro {
    font-size: var(--font-size-body);
    margin-bottom: 15px;
    color: var(--text-color);
}

.service-focus {
    font-size: var(--font-size-body);
    margin: 25px 0 15px;
    color: var(--dark-color);
    font-weight: 600;
}

.service-list {
    list-style: none;
    margin-bottom: 30px;
}

.service-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: var(--text-light);
    font-size: var(--font-size-body);
    line-height: 1.6;
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--secondary-color);
    border-radius: 50%;
}

/* ==========================================================================
   Why Choose Section - Modern Cards
   ========================================================================== */
.why-choose-section {
    background: linear-gradient(180deg, var(--light-color) 0%, var(--white) 100%);
}

.why-choose-section h2 {
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    background: var(--white);
    padding: 48px 32px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 20px -5px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(62, 100, 93, 0.2);
    border-color: var(--secondary-color);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(247, 148, 29, 0.1) 0%, rgba(206, 125, 77, 0.1) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    color: var(--white);
    transform: scale(1.05);
}

.feature-icon svg {
    width: 36px;
    height: 36px;
}

.feature-card h4 {
    font-size: var(--font-size-body);
    color: var(--dark-color);
    margin-bottom: 12px;
    font-weight: 600;
}

.feature-card p {
    font-size: var(--font-size-body);
    color: var(--text-light);
    line-height: 1.7;
}

/* ==========================================================================
   CTA Section - Modern Gradient
   ========================================================================== */
.cta-section {
    background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-color) 100%);
    color: var(--white);
    text-align: center;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(247, 148, 29, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-section h2 {
    font-size: var(--font-size-section);
    margin-bottom: 16px;
    font-weight: 700;
    color: white;
}

.cta-section p {
    font-size: var(--font-size-body);
    opacity: 0.9;
    margin-bottom: 36px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Footer - Modern Dark Style
   ========================================================================== */
.site-footer {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 80px 0 40px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
}

.footer-section h4 {
    color: var(--secondary-color);
    margin-bottom: 24px;
    font-size: var(--font-size-heading);
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 10px;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-section a:hover {
    color: var(--white);
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.footer-contact-info {
    margin-top: 15px;
}

.footer-contact-info a {
    display: block;
    margin-bottom: 8px;
}

.footer-bottom {
    text-align: center;
    padding-top: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-small);
}

/* Footer Bottom Links */
.footer-bottom-links {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-body);
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--accent-orange);
}

.footer-bottom-links .separator {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 1rem;
}

/* ==========================================================================
   Footer - Centered Minimal Style (Option 1)
   ========================================================================== */
.site-footer-centered {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 60px 0 40px;
    text-align: center;
}

.site-footer-centered .container {
    max-width: 900px;
}

.footer-logo {
    margin-bottom: 1.5rem;
}

.footer-logo img {
    height: 50px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-services-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.footer-services-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-services-nav a:hover {
    color: var(--accent-orange);
}

.footer-services-nav .dot {
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--font-size-button);
}

.footer-contact-line {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-body);
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-small);
}

.footer-contact-line span,
.footer-contact-line a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact-line a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-line a:hover {
    color: var(--accent-orange);
}

.footer-contact-line .dot {
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--font-size-button);
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.footer-social a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social a:hover {
    color: var(--accent-orange);
    transform: translateY(-2px);
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 1.25rem;
}

.footer-bottom-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-small);
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--font-size-small);
}

.footer-bottom-centered a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-centered a:hover {
    color: var(--accent-orange);
}

.footer-bottom-centered .separator {
    color: rgba(255, 255, 255, 0.3);
}

.footer-bottom-centered .copyright {
    color: rgba(255, 255, 255, 0.8);
}

/* Footer Centered - Mobile Responsive */
@media (max-width: 768px) {
    .site-footer-centered {
        padding: 40px 0 30px;
    }

    .footer-services-nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    .footer-services-nav .dot {
        display: none;
    }

    .footer-contact-line {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-contact-line .dot {
        display: none;
    }

    .footer-bottom-centered {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-bottom-centered .separator {
        display: none;
    }
}

/* External Resources Section */
.external-resources {
    margin-top: 2.5rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--primary-green);
}

.external-resources h3 {
    color: var(--primary-green);
    font-size: var(--font-size-body);
    margin-bottom: 0.75rem;
}

.external-resources > p {
    color: var(--text-color);
    margin-bottom: 1rem;
}

.resource-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-links li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.resource-links li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent-orange);
    font-weight: bold;
}

.resource-links a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 500;
}

.resource-links a:hover {
    color: var(--accent-orange);
    text-decoration: underline;
}

/* Service Areas Box */
.service-areas {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    font-size: var(--font-size-body);
}

.service-areas strong {
    color: var(--accent-orange);
}

/* Service Areas Badge (for services page) */
.service-areas-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-green);
    font-size: var(--font-size-small);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
    .header-container {
        padding: 10px 20px;
    }
    
    .main-navigation {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-right,
    .header-actions {
        display: none;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-section {
        margin-top: 70px;
        min-height: 400px;
    }
    
    .hero-title {
        font-size: var(--font-size-hero);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-heading);
    }
    
    .service-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .service-row.reverse {
        direction: ltr;
    }
    
    .service-image img {
        height: 250px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .section {
        padding: 50px 0;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .section-title-center {
        font-size: var(--font-size-body);
    }
}

/* ==========================================================================
   Mobile Menu (When Active)
   ========================================================================== */
.main-navigation.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 20px;
}

.main-navigation.active ul {
    flex-direction: column;
    gap: 0;
}

.main-navigation.active li {
    border-bottom: 1px solid #eee;
}

.main-navigation.active a {
    padding: 15px 0;
}

.main-navigation.active ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding-left: 20px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.lead { font-size: var(--font-size-body); color: var(--text-light); }

/* ==========================================================================
   Page Hero
   ========================================================================== */
.page-hero {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    color: var(--white);
    padding: 120px 0 60px;
    text-align: center;
}

.page-title {
    font-size: var(--font-size-hero);
    margin-bottom: 15px;
}

.page-subtitle {
    font-size: var(--font-size-body);
    opacity: 0.9;
}

/* ==========================================================================
   About Page Styles
   ========================================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.about-text p {
    margin-bottom: 15px;
    color: var(--text-light);
}

.about-image img {
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Mission & Vision */
.mission-vision {
    background-color: var(--light-color);
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.mv-card {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.mv-icon {
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.mv-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.mv-card p {
    color: var(--text-light);
    line-height: 1.7;
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.team-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.team-image {
    height: 250px;
    background: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-info {
    padding: 25px;
}

.team-info h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.team-info p {
    color: var(--text-light);
    font-size: var(--font-size-heading);
}

/* ==========================================================================
   Contact Page Styles
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
}

.contact-info h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-details {
    margin: 30px 0;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-icon {
    color: var(--secondary-color);
    flex-shrink: 0;
}

.contact-text h4 {
    font-size: var(--font-size-body);
    margin-bottom: 5px;
    color: var(--dark-color);
}

.contact-text p,
.contact-text a {
    color: var(--text-light);
}

.contact-social {
    margin-top: 30px;
}

.contact-social h4 {
    margin-bottom: 15px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--secondary-color);
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--light-color);
    padding: 40px;
    border-radius: 10px;
}

.contact-form-wrapper h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
    border-color: var(--primary-color);
}

/* ==========================================================================
   Referral Page Styles
   ========================================================================== */
.referral-intro {
    max-width: 800px;
    margin: 0 auto 50px;
}

.referral-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.referral-cards .referral-card:nth-child(4),
.referral-cards .referral-card:nth-child(5) {
    grid-column: span 1;
}

/* Center the last row with 2 items */
.referral-cards::after {
    content: '';
    grid-column: span 1;
}

.referral-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--secondary-color);
}

.referral-card h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: var(--font-size-body);
}

.referral-card > p {
    font-size: var(--font-size-body);
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--text-color);
}

.referral-card > p:last-child {
    margin-bottom: 0;
    font-size: var(--font-size-small);
    color: var(--text-light);
}

.referral-card ul {
    list-style: none;
    margin-bottom: 15px;
}

.referral-card li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
    color: var(--text-light);
}

.referral-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
}

.referral-form-section {
    background-color: var(--light-color);
    padding: 60px 0;
}

.referral-form-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.referral-form-container .form-header {
    background: white;
    padding: 24px 32px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.referral-form-container .form-header h2 {
    font-size: var(--font-size-hero);
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-green);
}

.referral-form-container .form-header p {
    color: #6b7280;
    font-size: var(--font-size-heading);
    margin: 0;
}

.referral-form-container .form-body {
    padding: 40px 48px;
}

.referral-form-container .form-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.referral-form-container .form-section:last-of-type {
    margin-bottom: 24px;
}

.referral-form-container .section-title {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.referral-form-container .section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--accent-orange);
    border-radius: 2px;
}

.referral-form-container .section-note {
    font-size: var(--font-size-body);
    color: #6b7280;
    margin-bottom: 16px;
}

.referral-form-container .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.referral-form-container .form-group {
    display: flex;
    flex-direction: column;
}

.referral-form-container .form-group.full-width {
    grid-column: 1 / -1;
}

.referral-form-container label {
    font-size: var(--font-size-body);
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.referral-form-container .required {
    color: #ef4444;
    margin-left: 2px;
}

.referral-form-container input[type="text"],
.referral-form-container input[type="email"],
.referral-form-container input[type="tel"],
.referral-form-container input[type="date"],
.referral-form-container select,
.referral-form-container textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: var(--font-size-heading);
    line-height: 1.5;
    min-height: 40px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.referral-form-container select {
    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='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.referral-form-container input:focus,
.referral-form-container select:focus,
.referral-form-container textarea:focus {
    outline: 2px solid var(--accent-orange);
    outline-offset: 1px;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(212, 113, 26, 0.1);
}

.referral-form-container textarea {
    resize: vertical;
    min-height: 80px;
}

.referral-form-container .checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
}

.referral-form-container .checkbox-group.insurance-options {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.referral-form-container .checkbox-item,
.referral-form-container .radio-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

.referral-form-container .checkbox-item input,
.referral-form-container .radio-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-orange);
    margin-top: 2px;
    flex-shrink: 0;
}

.referral-form-container .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.referral-form-container .radio-group.vertical {
    flex-direction: column;
    gap: 12px;
}

.referral-form-container .conditional-section {
    display: none;
    margin-top: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 3px solid var(--accent-orange);
}

.referral-form-container .conditional-section.visible {
    display: block;
}

.referral-form-container .file-note {
    font-size: var(--font-size-body);
    color: #6b7280;
    margin-top: 4px;
}

.referral-form-container .consent-box {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 16px;
}

.referral-form-container .consent-box h4 {
    color: #92400e;
    margin-bottom: 8px;
    font-size: var(--font-size-body);
}

.referral-form-container .consent-box p {
    font-size: var(--font-size-body);
    color: #78350f;
    margin-bottom: 12px;
    line-height: 1.6;
}

.referral-form-container .consent-check {
    margin-top: 12px;
}

.referral-form-container .submit-btn {
    max-width: 300px;
    width: 100%;
    margin: 24px auto 0;
    display: block;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent-orange) 0%, #B85E15 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-body);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.referral-form-container .submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 113, 26, 0.3);
}

.referral-form-container .submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.referral-form-container .loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.referral-form-container .success-message {
    display: none;
    text-align: center;
    padding: 40px;
}

.referral-form-container .success-message.visible {
    display: block;
}

.referral-form-container .success-icon {
    width: 64px;
    height: 64px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.referral-form-container .success-icon svg {
    width: 32px;
    height: 32px;
    color: white;
    stroke: white;
}

.referral-form-container .success-message h3 {
    color: #059669;
    margin-bottom: 8px;
}

.referral-form-container .success-message > p {
    color: #6b7280;
}

.referral-form-container .reference-box {
    background: #f3f4f6;
    padding: 12px 24px;
    border-radius: 8px;
    margin-top: 16px;
    display: inline-block;
}

.referral-form-container .success-actions {
    margin-top: 24px;
}

.referral-form-container .error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #dc2626;
    display: none;
}

.referral-form-container .error-message.visible {
    display: block;
}

.referral-cta {
    padding: 60px 0;
}

@media (max-width: 768px) {
    .referral-form-container .form-body {
        padding: 24px 20px;
    }

    .referral-form-container .form-row {
        grid-template-columns: 1fr;
    }

    .referral-form-container .checkbox-group {
        grid-template-columns: 1fr;
    }
}

/* Service Detail Pages */
.service-detail {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.service-detail:last-child {
    border-bottom: none;
}

.service-detail h4 {
    color: var(--primary-color);
    margin: 15px 0 8px;
}

/* ==========================================================================
   Responsive - Additional Pages
   ========================================================================== */
@media (max-width: 1024px) {
    .mv-grid {
        grid-template-columns: 1fr;
    }

    .referral-cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .referral-cards::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .referral-cards {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: 100px 0 50px;
    }
    
    .page-title {
        font-size: var(--font-size-hero);
    }
    
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .referral-form-wrapper {
        padding: 30px 20px;
    }
    
    .checkbox-group {
        flex-direction: column;
    }
}

/* Logo Image Styles */
.logo-image {
    height: 66px;
    width: auto;
    max-width: 336px;
}

/* Override existing logo styles */
.site-branding .site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}


/* Important Notice Styling */
.important-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-left: 4px solid #f39c12;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.important-notice strong {
    color: #d68910;
}

/* ==========================================================================
   Consistent Page Layout Utilities
   ========================================================================== */

/* Section Padding */
.section-padding {
    padding: 3rem 0;
}

.section-padding-sm {
    padding: 3rem 0;
}

/* Background Utilities */
.bg-light {
    background-color: #f8f9fa;
}

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

.bg-white {
    background-color: white;
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-white {
    color: white;
}

/* Section Titles */
.section-title {
    color: var(--primary-green);
    font-size: var(--font-size-section);
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--text-light);
    font-size: var(--font-size-body);
    margin-bottom: 2rem;
}

/* Page Hero - Consistent Styling */
.page-hero {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    color: white;
    padding: 140px 0 80px;
    text-align: center;
}

.page-hero .page-title {
    color: white;
    font-size: var(--font-size-hero);
    margin-bottom: 1rem;
}

.page-hero .page-subtitle,
.page-hero .hero-description {
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--font-size-body);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Consistent CTA Section */
.cta-section-bottom {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    padding: 4rem 0;
    text-align: center;
}

.cta-section-bottom h2 {
    color: white;
    margin-bottom: 0.75rem;
}

.cta-section-bottom p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-body);
    margin-bottom: 1.5rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Button Utilities - Additional variants */
.btn-outline-white {
    background: transparent;
    color: white !important;
    border: 2px solid white;
}

.btn-outline-white:hover {
    background: white;
    color: var(--primary-green) !important;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: var(--font-size-body);
}

/* Card Utilities */
.card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-accent {
    border-left: 4px solid var(--accent-orange);
}

/* Intro Content Block */
.intro-block {
    max-width: 800px;
    margin-bottom: 3rem;
}

.intro-block h2 {
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.intro-block p {
    font-size: var(--font-size-body);
    line-height: 1.8;
    color: var(--text-color);
}

/* Grid Utilities */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

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

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

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

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero {
        padding: 120px 0 60px;
    }

    .page-hero .page-title {
        font-size: var(--font-size-hero); /* clamp() already scales this */
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 3.5rem 0;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .page-hero {
        padding: 100px 0 50px;
    }

    .page-hero .page-title {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn-white,
    .cta-buttons .btn-outline-white {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

/* ==========================================================================
   HOME PAGE - CLEAN & SIMPLE
   ========================================================================== */

/* Hero Clean */
.hero-clean {
    background: linear-gradient(135deg, var(--forest) 0%, var(--teal) 100%);
    padding: 160px 0 40px;
    display: flex;
    align-items: center;
}

.hero-clean-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.hero-clean-content h1 {
    color: var(--white);
    font-size: var(--font-size-hero);
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-clean-content > p {
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-body);
    line-height: 1.7;
    margin-bottom: 32px;
}

.hero-clean-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hero-phone-line {
    margin: 0;
}

.hero-phone-line a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
}

.hero-phone-line a:hover {
    color: var(--orange);
}

/* Services Simple */
.services-simple {
    background: var(--light-gray);
}

.services-simple-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.service-simple-card {
    background: var(--white);
    padding: 28px 24px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.service-simple-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: var(--teal);
}

.service-simple-icon {
    width: 56px;
    height: 56px;
    background: rgba(62,100,93,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--teal);
}

.service-simple-card h3 {
    font-size: var(--font-size-body);
    color: var(--forest);
    margin-bottom: 8px;
}

.service-simple-card p {
    font-size: var(--font-size-body);
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

/* Why Simple */
.why-simple {
    background: var(--white);
}

.why-simple-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.why-simple-content h2 {
    font-size: var(--font-size-section);
    color: var(--forest);
    margin-bottom: 32px;
}

.why-simple-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    text-align: left;
}

.why-simple-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    font-size: var(--font-size-body);
    color: var(--text-color);
}

.why-simple-list li:last-child {
    border-bottom: none;
}

.why-simple-list svg {
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Stats Section */
.stats-section {
    background: var(--light-gray);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 800px;
    margin: 0 auto 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: var(--font-size-hero);
    font-weight: 700;
    color: var(--primary-green);
    font-family: var(--font-heading);
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    display: block;
    font-size: var(--font-size-body);
    color: var(--text-light);
    font-weight: 500;
}

.google-review-link {
    text-align: center;
    margin-top: 30px;
}

.google-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: white;
    border-radius: 50px;
    color: var(--text-color);
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.google-link:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
    color: var(--primary-green);
}

.google-link svg {
    color: #4285f4;
}

/* CTA Simple */
.cta-simple {
    background: linear-gradient(135deg, var(--forest) 0%, var(--teal) 100%);
}

.cta-simple-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-simple-content h2 {
    color: var(--white);
    font-size: var(--font-size-section);
    margin-bottom: 12px;
}

.cta-simple-content > p {
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-body);
    margin-bottom: 28px;
}

.cta-simple-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive - Simple Home */
@media (max-width: 1024px) {
    .services-simple-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-clean {
        padding: 120px 0 30px;
    }

    .hero-clean-buttons {
        flex-direction: column;
        align-items: center;
    }

    .services-simple-grid {
        grid-template-columns: 1fr;
    }

    .cta-simple-buttons {
        flex-direction: column;
        align-items: center;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* FAQ Sections */
.faq-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.faq-section h2 {
    color: var(--primary-green);
    margin-bottom: 2rem;
    text-align: center;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid var(--accent-orange);
}

.faq-item h3 {
    color: var(--primary-green);
    font-size: var(--font-size-heading);
    margin-bottom: 0.75rem;
}

.faq-item p {
    color: var(--text-color);
    font-size: var(--font-size-body);
    line-height: 1.7;
    margin: 0;
}

.faq-item a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
}

.faq-item a:hover {
    color: var(--accent-orange);
}

/* Related Services Cross-Links */
.related-services {
    background: var(--light-gray);
}

.related-services h2 {
    color: var(--primary-green);
    margin-bottom: 2rem;
}

.related-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.related-service-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border-left: 4px solid var(--accent-orange);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.related-service-card h3 {
    color: var(--primary-green);
    font-size: var(--font-size-heading);
    margin-bottom: 0.5rem;
}

.related-service-card p {
    color: var(--text-color);
    font-size: var(--font-size-body);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .related-services-grid {
        grid-template-columns: 1fr;
    }
}

/* Article Link Cards */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.article-link-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.article-link-card h3 {
    color: var(--primary-green);
    font-size: var(--font-size-heading);
    margin-bottom: 0.5rem;
}

.article-link-card p {
    color: var(--text-color);
    font-size: var(--font-size-body);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* Clinical Review Badge */
.clinical-review-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e8f5e9;
    border-radius: 8px;
    border-left: 3px solid var(--primary-green);
    font-size: var(--font-size-small);
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.clinical-review-badge svg {
    color: var(--primary-green);
    flex-shrink: 0;
}

.clinical-review-badge strong {
    color: var(--primary-green);
}

/* Last Updated Badge */
.last-updated {
    font-size: var(--font-size-small);
    color: var(--text-light);
    margin-top: 0.25rem;
}

.last-updated time {
    font-weight: 500;
}

/* Learn More Articles (inline in service pages) */
.learn-more-articles {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

/* ==========================================================================
   Small Mobile (375px and below)
   ========================================================================== */
@media (max-width: 375px) {
    :root {
        --font-size-hero: clamp(22px, 6vw, 28px);
        --font-size-section: clamp(18px, 5vw, 22px);
        --font-size-heading: 16px;
    }

    .container {
        padding: 0 1rem;
    }

    .hero-clean {
        padding: 40px 0;
    }

    .hero-clean-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-clean-buttons .btn {
        width: 100%;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .trust-items {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .trust-item {
        flex: none;
    }

    .testimonials-grid {
        gap: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Newsletter Signup */
.footer-newsletter {
    text-align: center;
    padding: 2rem 0;
    max-width: 600px;
    margin: 0 auto;
}

.footer-newsletter h3 {
    color: var(--primary-green);
    font-size: var(--font-size-section);
    margin-bottom: 0.5rem;
}

.footer-newsletter p {
    font-size: var(--font-size-body);
    color: #666;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.newsletter-fields {
    display: flex;
    gap: 0.5rem;
    max-width: 550px;
    margin: 0 auto;
}

.newsletter-fields input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: var(--font-size-body);
    font-family: inherit;
    transition: border-color 0.2s;
}

.newsletter-fields input:focus {
    outline: none;
    border-color: var(--primary-green);
}

.newsletter-btn {
    white-space: nowrap;
    padding: 0.75rem 1.5rem;
    flex-shrink: 0;
}

.newsletter-message {
    margin-top: 0.75rem;
    font-size: var(--font-size-body);
    padding: 0.5rem;
    border-radius: 6px;
}

.newsletter-message.success {
    color: #155724;
    background: #d4edda;
}

.newsletter-message.error {
    color: #721c24;
    background: #f8d7da;
}

@media (max-width: 600px) {
    .newsletter-fields {
        flex-direction: column;
    }

    .newsletter-btn {
        width: 100%;
    }
}

/* Archive and search result headers (index.php) */
.archive-header {
    text-align: center;
    margin: 2.5rem 0 1rem;
}

.archive-header .archive-description {
    max-width: 700px;
    margin: 0.75rem auto 0;
    color: var(--text-color);
    font-size: var(--font-size-body);
    line-height: 1.6;
}

/* ------------------------------------------------------------------
   Touch target and anchor-offset fixes
   ------------------------------------------------------------------ */

/* The site header is fixed at ~89px, so an anchor or in-page jump would
   otherwise land with its target hidden underneath it. */
html {
    scroll-padding-top: 100px;
}

/* Footer links sat at 20-27px tall. Padding lifts them toward the 44px
   recommended touch target without changing the type scale or the
   horizontal rhythm of the inline lists. */
.footer-services-nav a,
.footer-contact-line a,
.footer-legal a {
    display: inline-block;
    padding: 9px 4px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 768px) {
    /* On phones the dot separators crowd the taller links, so give the
       inline rows a little more breathing room. */
    .footer-services-nav,
    .footer-contact-line {
        line-height: 1.4;
    }
}

/* ==========================================================================
   Design system pass - Direction A
   Typography rhythm, one card treatment, consistent section spacing.
   Colors, fonts, navigation and page structure are unchanged.
   ========================================================================== */

body { line-height: 1.7; }
h1 { line-height: 1.12; letter-spacing: -0.015em; }
h2 { line-height: 1.2;  letter-spacing: -0.01em; }
h3,
h4 { line-height: 1.3; }
p  { line-height: 1.7; }

/* Buttons square off slightly; the pill shape read as dated against the
   squarer cards and form fields used elsewhere on the site. */
.btn {
    border-radius: var(--radius-control);
    letter-spacing: 0.01em;
}

/* One card treatment across every grid, so radius and lift no longer vary
   from template to template. */
.service-image-card,
.related-service-card,
.feature-card,
.value-card,
.condition-card,
.eligibility-card,
.mnsure-service-card,
.area-service-card,
.complaint-option,
.post-card,
.team-member {
    border-radius: var(--radius-card);
    box-shadow: var(--elev-1);
}

.service-image-card:hover,
.related-service-card:hover,
.area-service-card:hover,
.post-card:hover {
    box-shadow: var(--elev-2);
}

/* Section rhythm: one value instead of the 30px / 60px / 80px mix. */
.section {
    padding: var(--space-8) 0;
}

@media (max-width: 768px) {
    .section {
        padding: var(--space-7) 0;
    }
}

/* Elementor's global kit sets body typography on any page that contains
   Elementor content, which left body text at 14px on some pages and 17px on
   others. One selector of higher specificity keeps the scale consistent
   site-wide; Elementor's own per-widget typography is untouched. */
:root body {
    font-size: var(--font-size-body);
    line-height: 1.7;
}

/* Service rows pair a fixed-height image with a text column that can run
   several times longer, leaving most of the image column empty. Pinning the
   image keeps it beside the text it illustrates instead of stranding it at
   the top. Desktop only - the columns stack on smaller screens. */
@media (min-width: 993px) {
    .service-row {
        align-items: start;
    }

    .service-row .service-image {
        position: sticky;
        top: calc(var(--header-height, 89px) + var(--space-5));
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-row .service-image {
        position: static;
    }
}

/* ==========================================================================
   Homepage hero and trust figures
   Two-column hero: copy left, photograph right. Falls back to a single
   stacked column below 900px, with the photo above the copy on phones.
   ========================================================================== */

.hero-clean {
    padding: 0;
    display: block;
}

.hero-clean-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    gap: 0;
}

.hero-clean-content {
    padding: clamp(48px, 6vw, 92px) clamp(24px, 4vw, 56px) clamp(44px, 5vw, 76px);
    align-self: center;
    max-width: 60ch;
}

.hero-kicker {
    font-family: var(--font-heading);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin: 0 0 var(--space-3);
}

.hero-clean-content h1 {
    text-wrap: balance;
    max-width: 20ch;
    margin-bottom: var(--space-4);
}

.hero-clean-content .hero-lede {
    color: rgba(255,255,255,0.88);
    font-size: var(--font-size-body);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    max-width: 52ch;
}

.hero-clean-buttons {
    justify-content: flex-start;
    margin-bottom: var(--space-5);
}

.hero-phone-line {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: 0;
}

.hero-phone-line a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--white);
    text-decoration: none;
    padding-block: 6px;
}

.hero-phone-number {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.hero-phone-line a:hover .hero-phone-number {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero-fax {
    color: rgba(255,255,255,0.72);
    font-size: var(--font-size-small);
}

.hero-clean-figure {
    margin: 0;
    position: relative;
    min-height: 420px;
}

.hero-clean-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 32% center;
}

/* A soft wash on the photo's inner edge so the headline column and the
   image read as one surface rather than two pasted-together halves. */
.hero-clean-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--forest) 0%, rgba(32,66,48,0.35) 22%, transparent 55%);
    pointer-events: none;
}

@media (max-width: 900px) {
    .hero-clean-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-clean-figure {
        order: -1;
        min-height: 260px;
    }

    .hero-clean-figure::after {
        background: linear-gradient(180deg, transparent 40%, rgba(32,66,48,0.55) 100%);
    }

    .hero-clean-content {
        max-width: none;
        padding-top: var(--space-6);
    }

    .hero-clean-content h1 {
        max-width: none;
    }
}

/* Trust figures ---------------------------------------------------------- */

.trust-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0;
}

.trust-bar .trust-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    justify-content: stretch;
}

.trust-bar .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding: var(--space-5) var(--space-3);
    border-right: 1px solid var(--border);
    color: inherit;
    flex: initial;
}

.trust-bar .trust-item:last-child {
    border-right: 0;
}

.trust-figure {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    line-height: 1;
    color: var(--primary-green-dark);
    font-variant-numeric: tabular-nums;
}

.trust-star {
    color: #FBBC04;
    font-size: 0.7em;
    margin-left: 2px;
}

.trust-plus {
    color: var(--accent-orange);
}

.trust-label {
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 500;
}

@media (max-width: 640px) {
    .trust-bar .trust-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-bar .trust-item {
        border-bottom: 1px solid var(--border);
    }

    .trust-bar .trust-item:nth-child(2) {
        border-right: 0;
    }

    .trust-bar .trust-item:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

/* Section heads: a left-aligned title with a line that answers the question
   people actually arrive with, plus an optional link to the full list.
   The centred title + orange rule treatment stays for the other sections. */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.section-title-left {
    font-size: var(--font-size-section);
    color: var(--primary-green-dark);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
}

.section-head-sub {
    margin: 0;
    color: var(--text-light);
    font-size: var(--font-size-body);
    max-width: 52ch;
}

.section-head-link {
    color: var(--accent-terracotta);
    font-weight: 600;
    font-size: var(--font-size-body);
    text-decoration: none;
    white-space: nowrap;
    padding-block: 8px;
}

.section-head-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 640px) {
    .section-head {
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* A single, quiet entrance. Content renders visible by default, so a failed
   or blocked script never leaves the page blank, and anyone who asks for
   reduced motion gets no movement at all. */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal[data-reveal="pending"] {
        opacity: 0;
        transform: translateY(10px);
    }

    .js-reveal {
        transition: opacity .5s ease, transform .5s ease;
    }
}

/* The header is fixed, so the hero's first line needs clearance. */
.hero-clean-content {
    padding-top: calc(var(--header-height, 89px) + clamp(28px, 4vw, 56px));
}

.hero-clean-figure img {
    object-position: 18% center;
}

@media (max-width: 900px) {
    .hero-clean-content {
        padding-top: var(--space-6);
    }

    .hero-clean-figure {
        margin-top: 89px;
    }
}

/* Full-bleed hero: the green field already spans the viewport, so the photo
   should too. The copy keeps the same left edge as the 1100px content
   container used by every section below it. */
.hero-clean-container {
    max-width: none;
}

.hero-clean-content {
    padding-left: max(24px, calc((100vw - 1100px) / 2));
    padding-right: clamp(24px, 4vw, 64px);
    max-width: none;
}

@media (max-width: 900px) {
    .hero-clean-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 900px) {
    /* Clear the fixed header with padding on the hero itself; a margin on the
       figure left a sliver of the green field showing above the photo. */
    .hero-clean {
        padding-top: var(--header-height, 89px);
    }

    .hero-clean-figure {
        margin-top: 0;
    }
}