/* ============================================
           BRAND COLORS - Body Symmetry MD
           ============================================
           Red:        #CC0000 (primary accent, CTAs)
           Grey:       #E6E6E6 (light backgrounds)
           Black:      #000000 (text, dark sections)
           White:      #FFFFFF (backgrounds)
           Light Blue: #10769E (secondary accent, trust)
        */
        
        :root {
            --brand-red:         #CC0000;
            --brand-red-dark:    #a30000;
            --brand-red-light:   rgba(204, 0, 0, 0.07);
            --brand-grey:        #dce8f2;
            --brand-grey-dark:   #b8ccde;
            --brand-black:       #000000;
            --brand-black-light: #1a1a1a;
            --brand-white:       #FFFFFF;
            --brand-blue:        #0e6a8e;
            --brand-blue-mid:    #1280aa;
            --brand-blue-dark:   #0a4d68;
            --brand-blue-light:  rgba(14, 106, 142, 0.10);
            --brand-steel:       #1b2f42;
            --brand-navy:        #0e1e2c;
            --surface-cool:      #f1f6fa;
            --surface-ice:       #e4edf5;
            --surface-pale:      #f7fafc;
            --text-primary:      #0d1f2d;
            --text-secondary:    #3a5568;
            --text-muted:        #5d7a8c;
        }

        /* ============================================
           ACCESSIBILITY
           ============================================ */
        
        /* Skip Link */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--brand-red);
            color: var(--brand-white);
            padding: 1rem 2rem;
            border-radius: 0 0 8px 8px;
            font-weight: 600;
            z-index: 10000;
            transition: top 0.3s ease;
        }
        .skip-link:focus {
            top: 0;
            outline: none;
        }
        
        /* Focus States for All Interactive Elements */
        a:focus-visible,
        button:focus-visible,
        .btn:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid var(--brand-red);
            outline-offset: 2px;
        }
        
        /* Reduced Motion */
        @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; }
        }

        /* Reset & Base */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-primary);
            background: var(--surface-pale);
            line-height: 1.7;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; transition: all 0.3s ease; }
        img { max-width: 100%; height: auto; }
        
        /* Typography */
        .font-display { font-family: 'Playfair Display', Georgia, serif; }
        h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.2; }
        
        /* Layout */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        .section { padding: 6rem 0; }
        
        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.875rem 1.75rem;
            border-radius: 4px;
            font-weight: 600;
            font-size: 0.9375rem;
            letter-spacing: 0.025em;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }
        .btn-red {
            background: var(--brand-red);
            color: var(--brand-white);
        }
        .btn-red:hover {
            background: var(--brand-red-dark);
        }
        .btn-gold {
            background: #c9a962;
            color: #1a2744;
        }
        .btn-gold:hover {
            background: #b8994f;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(238, 27, 41, 0.3);
        }
        .btn-black {
            background: var(--brand-black);
            color: var(--brand-white);
        }
        .btn-black:hover {
            background: var(--brand-black-light);
            transform: translateY(-2px);
        }
        .btn-outline {
            background: transparent;
            border: 2px solid var(--brand-white);
            color: var(--brand-white);
        }
        .btn-outline:hover {
            background: var(--brand-white);
            color: var(--brand-black);
        }
        .btn-outline-dark {
            background: transparent;
            border: 2px solid var(--brand-black);
            color: var(--brand-black);
        }
        .btn-outline-dark:hover {
            background: var(--brand-black);
            color: var(--brand-white);
        }
        .btn-outline-light {
            background: transparent;
            border: 2px solid var(--brand-white);
            color: var(--brand-white);
        }
        .btn-outline-light:hover {
            background: var(--brand-white);
            color: var(--brand-black);
        }
        .btn-lg { padding: 1rem 2.25rem; font-size: 1rem; }
        .btn svg { width: 18px; height: 18px; margin-right: 0.5rem; }

        /* ============================================
           HEADER
           ============================================ */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--brand-white);
            box-shadow: 0 1px 0 var(--brand-grey);
        }
        .header-top {
            background: var(--brand-steel);
            color: var(--brand-white);
            padding: 0.625rem 0;
            font-size: 0.875rem;
        }
        .header-top .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-top-left {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }
        .header-top a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .header-top a:hover { color: var(--brand-red); }
        .header-top svg { width: 16px; height: 16px; }
        .header-rating {
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }
        .header-rating .stars { color: #d4a017; letter-spacing: -2px; }
        .header-free { color: #4ade80; font-weight: 600; }
        
        .header-main { padding: 1rem 0; }
        .header-main .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* Logo */
        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .logo-icon {
            width: 48px;
            height: 48px;
            background: var(--brand-black);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .logo-icon::before {
            content: '';
            width: 24px;
            height: 28px;
            background: linear-gradient(180deg, var(--brand-grey) 0%, var(--brand-white) 50%, var(--brand-red) 50%, var(--brand-red) 100%);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }
        .logo-text {
            font-family: 'Playfair Display', serif;
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--brand-black);
            letter-spacing: -0.02em;
        }
        .logo-text span { color: var(--brand-red); font-weight: 400; }
        
        /* Navigation */
        .nav-links {
            display: flex;
            gap: 2.5rem;
        }
        .nav-links ul {
            display: flex;
            gap: 2.5rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .nav-links li {
            margin: 0;
            padding: 0;
        }
        .nav-links a {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.9375rem;
            position: relative;
            display: block;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--brand-red);
            transition: width 0.3s ease;
        }
        .nav-links a:hover::after { width: 100%; }

/* ============================================
   DROPDOWN NAVIGATION
   ============================================ */

/* Parent item needs relative positioning */
.nav-links ul li {
    position: relative;
}

/* The sub-menu */
.nav-links ul ul,
.nav-links .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--brand-white);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--brand-grey);
    padding: 0.75rem 0 0.5rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Show dropdown on hover */
.nav-links ul li:hover > ul,
.nav-links ul li:hover > .sub-menu,
.nav-links ul li:focus-within > ul,
.nav-links ul li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

/* Dropdown items */
.nav-links .sub-menu li,
.nav-links ul ul li {
    display: block;
    width: 100%;
}

.nav-links .sub-menu a,
.nav-links ul ul a {
    display: block;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    border-bottom: none;
}

.nav-links .sub-menu a:hover,
.nav-links ul ul a:hover {
    background: var(--brand-red-light);
    color: var(--brand-red);
}

/* Remove underline animation on dropdown items */
.nav-links .sub-menu a::after,
.nav-links ul ul a::after {
    display: none;
}

/* Small arrow indicator on parent item —
   Override the underline ::after with a chevron for items that have dropdowns */
.nav-links ul li:has(> .sub-menu) > a::after,
.nav-links ul li:has(> ul) > a::after {
    content: '▾';
    display: inline;
    position: static;
    width: auto;
    height: auto;
    background: none;
    margin-left: 0.2rem;
    font-size: 0.75rem;
    color: currentColor;
    opacity: 1;
    transform: none;
    transition: none;
    border: none;
    vertical-align: middle;
}

/* Mobile dropdown — show as stacked list */
.mobile-nav .sub-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--brand-grey);
    pointer-events: all;
}

.mobile-nav .sub-menu a {
    padding: 0.75rem 1rem 0.75rem 2rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: block;
}

.mobile-nav .sub-menu a:hover {
    color: var(--brand-red);
    background: var(--brand-red-light);
}

/* ── Third-tier flyout (flies out to the right) ── */

/* Override position for third-tier — fly right instead of down */
.nav-links .sub-menu .sub-menu {
    top: -0.75rem;
    left: 100%;
    transform: translateX(-8px);
    padding-top: 0.5rem;
}

/* Show third-tier on hover */
.nav-links .sub-menu li:hover > .sub-menu,
.nav-links .sub-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: all;
}

/* Arrow on second-tier items that have a third-tier child */
.nav-links .sub-menu li:has(> .sub-menu) > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.nav-links .sub-menu li:has(> .sub-menu) > a::after {
    content: '›';
    display: inline;
    position: static;
    width: auto;
    height: auto;
    background: none;
    margin-left: auto;
    font-size: 1rem;
    color: currentColor;
    opacity: 0.6;
    transform: none;
    transition: none;
    border: none;
}

/* Mobile third-tier — indent another level */
.mobile-nav .sub-menu .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    background: var(--brand-grey-dark);
}

.mobile-nav .sub-menu .sub-menu a {
    padding-left: 3rem;
    font-size: 0.875rem;
}
        
        /* Mobile Menu Button */
        .mobile-menu-btn {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 44px;
            height: 44px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
        }
        .hamburger-line {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--brand-black);
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        .mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }
        .mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        .mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }
        
        /* Mobile Navigation Panel */
        .mobile-nav {
            display: none;
            position: fixed;
            top: 120px;
            left: 0;
            right: 0;
            background: var(--brand-white);
            padding: 1.5rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            z-index: 999;
            flex-direction: column;
            gap: 0;
            border-top: 1px solid var(--brand-grey);
        }
        .mobile-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        .mobile-nav li {
            margin: 0;
            padding: 0;
        }
        .mobile-nav a {
            padding: 1rem;
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--brand-black);
            border-bottom: 1px solid var(--brand-grey);
            display: block;
        }
        .mobile-nav a:hover {
            color: var(--brand-red);
            background: var(--brand-red-light);
        }
        .mobile-nav.active {
            display: flex;
        }

        /* ============================================
           HERO - Navy with Grid Pattern
           ============================================ */
        .hero {
            background: #F5F5F5;
            min-height: auto;
            padding: 16rem 0 4.5rem;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        /* Grid pattern overlay */
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            background-image: 
                linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
            background-size: 80px 80px;
            pointer-events: none;
        }
        
        /* Subtle vignette */
        .hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.02) 100%);
            pointer-events: none;
        }
        
        /* Hide decorative elements */
        .hero-pattern,
        .hero-noise,
        .hero-beam,
        .hero-particles { display: none; }
        
        /* Bottom border */
        .hero-fade {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgba(0,0,0,0.06);
            pointer-events: none;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        .hero-content { color: var(--brand-black); position: relative; z-index: 1; }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            background: var(--brand-white);
            border: 1px solid rgba(0,0,0,0.08);
            padding: 0.5rem 1rem;
            border-radius: 100px;
            margin-bottom: 2rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--brand-red);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .hero-badge svg {
            width: 18px;
            height: 18px;
            margin-right: 0.5rem;
            color: var(--brand-red);
        }
        
        .hero h1 {
            font-size: 3.75rem;
            line-height: 1.05;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
            color: var(--brand-black);
        }
        .hero h1 .highlight {
            color: var(--brand-red);
            display: block;
        }
        
        .hero-text {
            font-size: 1.25rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            max-width: 540px;
            line-height: 1.7;
        }
        .hero-text strong { color: var(--brand-black); font-weight: 600; }
        
        .hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.625rem;
            margin-bottom: 2.5rem;
        }
        .hero-tag {
            background: var(--brand-white);
            border: 1px solid rgba(0,0,0,0.08);
            padding: 0.5rem 1rem;
            border-radius: 100px;
            font-size: 0.875rem;
            color: var(--text-primary);
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        
        .hero-ctas {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }
        
        .hero-location {
            display: flex;
            align-items: center;
            color: var(--text-muted);
            font-size: 0.9375rem;
        }
        .hero-location svg {
            width: 18px;
            height: 18px;
            margin-right: 0.5rem;
            color: var(--brand-blue);
        }
        
        /* Hero Right Side - Stats & Testimonial */
        .hero-right { position: relative; z-index: 1; }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .stat-card {
            background: var(--brand-white);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        }
        .stat-card .number {
            font-family: 'Playfair Display', serif;
            font-size: 2.75rem;
            font-weight: 700;
            color: var(--brand-red);
            line-height: 1;
            margin-bottom: 0.25rem;
        }
        .stat-card .label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .testimonial-card {
            background: var(--brand-white);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(0,0,0,0.06);
        }
        .testimonial-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        .testimonial-stars {
            color: var(--brand-red);
            font-size: 1.125rem;
            letter-spacing: -2px;
        }
        .testimonial-type {
            font-size: 0.8125rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        .testimonial-text {
            color: var(--text-primary);
            font-size: 1rem;
            line-height: 1.7;
            font-style: italic;
        }
        .testimonial-text strong { color: var(--brand-red); font-style: normal; }
        .testimonial-author {
            margin-top: 1.25rem;
            font-weight: 600;
            color: var(--brand-black);
        }

        /* ============================================
           INTRO SECTION
           ============================================ */
        .intro {
            padding: 3.3rem 0;
            background: var(--brand-white);
        }
        .intro-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        .intro-content p {
            font-size: 1.125rem;
            color: var(--text-secondary);
            line-height: 1.9;
            margin-bottom: 1.5rem;
        }
        .intro-content strong {
            color: var(--brand-black);
            font-weight: 600;
        }
        .intro-highlight {
            display: inline-block;
            background: var(--brand-red-light);
            color: var(--brand-red);
            padding: 0 0.5rem;
            font-weight: 700;
        }

        /* ============================================
           SERVICES SECTION
           ============================================ */
        .services { background: var(--brand-grey); padding: 5rem 0 6rem; }
        
        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .section-label {
            display: inline-block;
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--brand-blue-dark);
            margin-bottom: 1rem;
        }
        .section-title {
            font-size: 2.75rem;
            color: var(--brand-black);
            margin-bottom: 1rem;
        }
        .section-subtitle {
            font-size: 1.125rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
        .service-card {
            background: var(--brand-white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transition: all 0.4s ease;
        }
        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }
        .service-header {
            padding: 2rem 2rem 1.5rem;
            color: var(--brand-white);
        }
        .service-header.women {
            background: linear-gradient(135deg, #c4366e 0%, #e85a8f 100%);
        }
        .service-header.men {
            background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
        }
        .service-header h3 {
            font-size: 2rem;
            margin-bottom: 0.375rem;
        }
        .service-header p {
            opacity: 0.85;
            font-size: 0.9375rem;
        }
        .service-body { padding: 1.5rem 2rem 2rem; }
        .service-list { margin: 1.25rem 0; }
        .service-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        .service-item svg {
            width: 18px;
            height: 18px;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }
        .service-item.pink svg { color: #c4366e; }
        .service-item.dark svg { color: var(--brand-blue); }
        .service-link {
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            font-size: 0.9375rem;
        }
        .service-link.pink { color: #c4366e; }
        .service-link.dark { color: var(--brand-blue); }
        .service-link svg {
            width: 18px;
            height: 18px;
            margin-left: 0.5rem;
            transition: transform 0.3s ease;
        }
        .service-link:hover svg { transform: translateX(4px); }

        /* ============================================
           WHY CHOOSE US (FEATURES)
           ============================================ */
        .features { background: var(--brand-white); }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
        }
        .feature-card {
            text-align: center;
            padding: 2rem 1.5rem;
        }
        .feature-icon {
            width: 72px;
            height: 72px;
            background: var(--brand-red-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }
        .feature-icon svg {
            width: 32px;
            height: 32px;
            color: var(--brand-red);
        }
        .feature-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            color: var(--brand-black);
        }
        .feature-text {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.7;
        }
        
        /* Award Banner */
        .award-banner {
            background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-black-light) 100%);
            border-radius: 16px;
            padding: 2rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 4rem;
            color: var(--brand-white);
        }
        .award-content {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }
        .award-icon {
            width: 64px;
            height: 64px;
            background: var(--brand-red);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .award-icon svg {
            width: 32px;
            height: 32px;
            color: var(--brand-white);
        }
        .award-text h4 {
            font-size: 1.25rem;
            margin-bottom: 0.25rem;
        }
        .award-text p {
            opacity: 0.75;
            font-size: 0.9375rem;
        }

        /* ============================================
           TRANSFORMATIONS SECTION - Psychology-Driven
           ============================================ */
        .transformations {
            background: var(--brand-black);
            color: var(--brand-white);
            position: relative;
            overflow: hidden;
        }
        .transformations::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at 20% 0%, rgba(204, 0, 0, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(16, 118, 158, 0.06) 0%, transparent 50%);
            pointer-events: none;
        }
        .transformations .section-label { color: var(--brand-red); }
        .transformations .section-title { color: var(--brand-white); }
        .transformations .section-subtitle { color: rgba(255, 255, 255, 0.7); max-width: 700px; margin-left: auto; margin-right: auto; }
        
        /* Aggregate Stats Bar */
        .transform-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            margin-bottom: 4rem;
            padding: 2.5rem 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .transform-stat { text-align: center; }
        .transform-stat .number {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--brand-red);
            line-height: 1;
            margin-bottom: 0.5rem;
        }
        .transform-stat .label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9375rem;
        }
        
        /* Section Intro - Emotional Hook */
        .transform-intro {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 3.5rem;
            padding: 0 1rem;
        }
        .transform-intro p {
            font-size: 1.125rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
        }
        .transform-intro strong {
            color: var(--brand-white);
        }
        
        /* Transformation Gallery Grid */
        .transform-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        /* Transformation Card - Premium Design */
        .transform-card {
            background: var(--brand-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .transform-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 35px 70px rgba(0, 0, 0, 0.5);
        }
        
        /* Image Container with Before/After */
        .transform-image-container {
            position: relative;
            aspect-ratio: 4/5;
            overflow: hidden;
            cursor: pointer;
        }
        
        /* Before Image (default state) */
        .transform-before,
        .transform-after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .transform-before {
            z-index: 1;
            filter: grayscale(30%);
        }
        .transform-after {
            z-index: 2;
            opacity: 0;
        }
        
        /* Hover/Active reveals After */
        .transform-card:hover .transform-before,
        .transform-card.active .transform-before {
            opacity: 0;
            transform: scale(1.02);
        }
        .transform-card:hover .transform-after,
        .transform-card.active .transform-after {
            opacity: 1;
        }
        
        /* Placeholder for demo (replace with real photos) */
        .transform-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: var(--text-muted);
            z-index: 1;
            transition: all 0.5s ease;
        }
        .transform-placeholder.before-state {
            background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
        }
        .transform-placeholder.after-state {
            background: linear-gradient(135deg, rgba(16, 118, 158, 0.15) 0%, rgba(204, 0, 0, 0.1) 100%);
            opacity: 0;
            z-index: 2;
        }
        .transform-card:hover .transform-placeholder.before-state,
        .transform-card.active .transform-placeholder.before-state {
            opacity: 0;
        }
        .transform-card:hover .transform-placeholder.after-state,
        .transform-card.active .transform-placeholder.after-state {
            opacity: 1;
        }
        
        .placeholder-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }
        .placeholder-icon svg {
            width: 40px;
            height: 40px;
            opacity: 0.4;
        }
        .placeholder-text {
            font-size: 0.875rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        
        /* Weight Loss Badge Overlay */
        .transform-badge-overlay {
            position: absolute;
            top: 1rem;
            left: 1rem;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .weight-lost-badge {
            background: var(--brand-red);
            color: var(--brand-white);
            padding: 0.625rem 1rem;
            border-radius: 100px;
            font-weight: 700;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            box-shadow: 0 4px 15px rgba(204, 0, 0, 0.4);
        }
        .weight-lost-badge svg {
            width: 16px;
            height: 16px;
        }
        .timeframe-badge {
            background: rgba(0, 0, 0, 0.75);
            color: var(--brand-white);
            padding: 0.375rem 0.75rem;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 500;
            backdrop-filter: blur(10px);
        }
        
        /* Reveal Instruction Overlay */
        .reveal-instruction {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: var(--brand-white);
            padding: 0.5rem 1rem;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 500;
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            backdrop-filter: blur(10px);
            opacity: 1;
            transition: opacity 0.3s ease;
            white-space: nowrap;
        }
        .reveal-instruction svg {
            width: 14px;
            height: 14px;
        }
        .transform-card:hover .reveal-instruction,
        .transform-card.active .reveal-instruction {
            opacity: 0;
        }
        
        /* Card Content */
        .transform-content {
            padding: 1.75rem;
            position: relative;
        }
        
        .transform-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        .transform-treatment {
            display: inline-block;
            background: var(--brand-blue-light);
            color: var(--brand-blue);
            padding: 0.375rem 0.875rem;
            border-radius: 100px;
            font-size: 0.8125rem;
            font-weight: 600;
        }
        .transform-verified {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: #16a34a;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .transform-verified svg {
            width: 14px;
            height: 14px;
        }
        
        .transform-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.375rem;
            font-weight: 600;
            color: var(--brand-black);
            margin-bottom: 0.25rem;
        }
        .transform-location {
            color: var(--text-muted);
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }
        
        /* Quote - Emotional Hook */
        .transform-quote {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.7;
            font-style: italic;
            position: relative;
            padding-left: 1rem;
            border-left: 3px solid var(--brand-red);
        }
        .transform-quote strong {
            color: var(--brand-black);
            font-style: normal;
        }
        
        /* Results Metrics Row */
        .transform-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid var(--brand-grey);
        }
        .metric-item {
            text-align: center;
        }
        .metric-value {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--brand-red);
            line-height: 1;
        }
        .metric-label {
            font-size: 0.6875rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 0.25rem;
        }
        
        /* Featured Card (Charlie - 120 lbs) */
        .transform-card.featured {
            grid-column: span 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .transform-card.featured .transform-image-container {
            aspect-ratio: auto;
        }
        .transform-card.featured .transform-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 2.5rem;
        }
        .transform-card.featured .transform-name {
            font-size: 1.75rem;
        }
        .transform-card.featured .transform-quote {
            font-size: 1.0625rem;
        }
        
        /* CTA Below Gallery */
        .transform-cta {
            text-align: center;
            margin-top: 3rem;
        }
        .transform-cta-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.125rem;
            margin-bottom: 1.5rem;
        }
        .transform-cta-text strong {
            color: var(--brand-white);
        }
        
        /* Mobile Touch Interaction */
        @media (hover: none) {
            .reveal-instruction span::after {
                content: 'Tap';
            }
            .reveal-instruction span::before {
                content: '';
            }
        }
        @media (hover: hover) {
            .reveal-instruction span::after {
                content: 'Hover';
            }
        }
        
        /* Responsive - Tablet */
        @media (max-width: 1024px) {
            .transform-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
            .transform-card.featured {
                grid-column: span 2;
            }
            .transform-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            .transform-stat .number {
                font-size: 2.75rem;
            }
        }
        
        /* Responsive - Mobile */
        @media (max-width: 768px) {
            .transform-gallery {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            .transform-card.featured {
                grid-column: span 1;
                grid-template-columns: 1fr;
            }
            .transform-card.featured .transform-image-container {
                aspect-ratio: 4/5;
            }
            .transform-card.featured .transform-content {
                padding: 1.75rem;
            }
            .transform-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            .transform-stat .number {
                font-size: 2.25rem;
            }
            .transform-stat .label {
                font-size: 0.8125rem;
            }
            .transform-intro p {
                font-size: 1rem;
            }
            .transform-metrics {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* ============================================
           TESTIMONIALS
           ============================================ */
        .testimonials { background: var(--brand-grey); }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }
        .testimonial-grid-card {
            background: var(--brand-white);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .testimonial-grid-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }
        .testimonial-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .testimonial-badge.blue {
            background: var(--brand-blue-light);
            color: var(--brand-blue);
        }
        .testimonial-badge.red {
            background: var(--brand-red-light);
            color: var(--brand-red);
        }
        .testimonial-badge.green {
            background: rgba(34, 197, 94, 0.1);
            color: #16a34a;
        }
        .testimonial-grid-card .stars {
            color: var(--brand-red);
            margin-bottom: 1rem;
            letter-spacing: -2px;
        }
        .testimonial-grid-card p {
            color: var(--text-primary);
            font-size: 0.9375rem;
            line-height: 1.7;
            margin-bottom: 1.25rem;
        }
        .testimonial-author-block {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .testimonial-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            color: var(--brand-white);
        }
        .testimonial-avatar.blue { background: var(--brand-blue); }
        .testimonial-avatar.red { background: var(--brand-red); }
        .testimonial-avatar.black { background: var(--brand-black); }
        .testimonial-author-info strong {
            display: block;
            color: var(--brand-black);
            font-size: 0.9375rem;
        }
        .testimonial-author-info span {
            color: var(--text-muted);
            font-size: 0.8125rem;
        }

        /* ============================================
           FAQ
           ============================================ */
        .faq { background: var(--brand-white); }
        
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            max-width: 1000px;
            margin: 0 auto;
        }
        .faq-item {
            background: var(--brand-grey);
            border-radius: 12px;
            padding: 1rem;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .faq-item:hover {
            background: var(--brand-white);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        }
        .faq-question {
            font-family: 'Playfair Display', serif;
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--brand-black);
            margin-bottom: 0.75rem;
        }
        .faq-answer {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.7;
        }

        /* ============================================
           LOCATIONS
           ============================================ */
        .locations { background: var(--brand-grey); }
        
        .locations-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }
        .location-card {
            background: var(--brand-white);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }
        .location-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        }
        .location-card.primary {
            border: 2px solid var(--brand-red);
        }
        .location-badge {
            display: inline-block;
            background: var(--brand-red);
            color: var(--brand-white);
            padding: 0.25rem 0.75rem;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .location-title {
            font-size: 1.375rem;
            color: var(--brand-black);
            margin-bottom: 0.5rem;
        }
        .location-address {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
        }
        .location-link {
            display: inline-flex;
            align-items: center;
            color: var(--brand-blue);
            font-weight: 600;
            font-size: 0.9375rem;
        }
        .location-link svg {
            width: 16px;
            height: 16px;
            margin-left: 0.5rem;
            transition: transform 0.3s ease;
        }
        .location-link:hover svg { transform: translateX(4px); }
        
        .location-card.virtual {
            background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
            color: var(--brand-white);
        }
        .location-card.virtual .location-title { color: var(--brand-white); }
        .location-card.virtual .location-address { color: rgba(255, 255, 255, 0.8); }
        .location-card.virtual .location-link { color: var(--brand-white); }

        /* ============================================
           CTA / BOOKING SECTION
           ============================================ */
        .cta-section {
            background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-black-light) 100%);
            padding: 6rem 0;
        }
        .cta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }
        .cta-content { color: var(--brand-white); }
        .cta-content .section-label { color: var(--brand-red); }
        .cta-content h2 {
            font-size: 2.75rem;
            margin-bottom: 1.5rem;
        }
        .cta-content p {
            font-size: 1.125rem;
            color: rgba(255, 255, 255, 0.75);
            margin-bottom: 2rem;
            line-height: 1.7;
        }
        
        .cta-benefits { margin-bottom: 2rem; }
        .cta-benefit {
            display: flex;
            align-items: center;
            margin-bottom: 0.875rem;
            color: var(--brand-white);
            font-size: 1rem;
        }
        .cta-benefit svg {
            width: 22px;
            height: 22px;
            color: var(--brand-red);
            margin-right: 0.875rem;
            flex-shrink: 0;
        }
        
        .cta-phone {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 1.5rem;
            display: inline-block;
        }
        .cta-phone p {
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 0.375rem;
            font-size: 0.9375rem;
        }
        .cta-phone a {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--brand-white);
        }
        .cta-phone a:hover { color: var(--brand-red); }
        
        /* Form */
        .form-card {
            background: var(--brand-white);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
        }
        .form-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--brand-black);
            text-align: center;
            margin-bottom: 1.75rem;
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .form-group { margin-bottom: 1rem; }
        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }
        .form-input, .form-select {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 1px solid var(--brand-grey-dark);
            border-radius: 8px;
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s ease;
            background: var(--brand-white);
        }
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px var(--brand-blue-light);
        }
        .form-checkbox {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-bottom: 1.25rem;
        }
        .form-checkbox input { margin-top: 0.25rem; accent-color: var(--brand-red); }
        .form-checkbox a { color: var(--brand-blue); font-weight: 500; }
        .form-submit {
            width: 100%;
            padding: 1rem;
            background: var(--brand-red);
            color: var(--brand-white);
            border: none;
            border-radius: 8px;
            font-size: 1.0625rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }
        .form-submit:hover {
            background: var(--brand-red-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(238, 27, 41, 0.35);
        }
        .form-note {
            text-align: center;
            font-size: 0.8125rem;
            color: var(--text-muted);
            margin-top: 1rem;
        }

        /* ============================================
           FOOTER
           ============================================ */
        .footer {
            background: var(--brand-black);
            color: var(--brand-white);
            padding: 4rem 0 2rem;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.25fr;
            gap: 3rem;
            margin-bottom: 3rem;
        }
        .footer-logo-block { }
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.25rem;
        }
        .footer-logo-icon {
            width: 40px;
            height: 40px;
            background: var(--brand-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer-logo-icon::before {
            content: '';
            width: 20px;
            height: 24px;
            background: linear-gradient(180deg, var(--brand-grey) 0%, var(--brand-white) 50%, var(--brand-red) 50%, var(--brand-red) 100%);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }
        .footer-logo-text {
            font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            font-weight: 700;
        }
        .footer-logo-text span { color: var(--brand-red); font-weight: 400; }
        .footer-desc {
            color: rgba(255, 255, 255, 0.65);
            font-size: 0.9375rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }
        .footer-social {
            display: flex;
            gap: 0.75rem;
        }
        .footer-social a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--brand-white);
            font-size: 0.8125rem;
            font-weight: 600;
        }
        .footer-social a:hover { background: var(--brand-red); }
        
        .footer-title {
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1.25rem;
        }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 0.625rem; }
        .footer-links a {
            color: rgba(255, 255, 255, 0.65);
            font-size: 0.9375rem;
        }
        .footer-links a:hover { color: var(--brand-red); }
        
        .footer-contact a {
            display: flex;
            align-items: center;
            color: rgba(255, 255, 255, 0.65);
            font-size: 0.9375rem;
            margin-bottom: 0.875rem;
        }
        .footer-contact a svg {
            width: 18px;
            height: 18px;
            margin-right: 0.75rem;
        }
        .footer-contact a:hover { color: var(--brand-red); }
        
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .footer-copyright {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.875rem;
        }
        .footer-bottom-links {
            display: flex;
            gap: 1.5rem;
        }
        .footer-bottom-links a {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.875rem;
        }
        .footer-bottom-links a:hover { color: var(--brand-red); }
        .footer-disclaimer {
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.75rem;
            margin-top: 1.5rem;
            line-height: 1.7;
            max-width: 900px;
        }

        /* ============================================
           MOBILE CTA BAR
           ============================================ */
        .mobile-cta {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--brand-white);
            padding: 0.625rem 1rem;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
            z-index: 999;
        }
        .mobile-cta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.625rem;
        }
        /* Mobile CTA Bar Buttons - Compact Size */
        .mobile-cta .btn {
            padding: 0.625rem 1rem;
            font-size: 0.875rem;
            font-weight: 600;
        }

        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 1024px) {
            .hero-grid, .cta-grid { grid-template-columns: 1fr; }
            .hero-right { margin-top: 2rem; }
            .services-grid, .features-grid, .results-grid, .testimonials-grid, .locations-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .results-stats { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .header-cta { display: none; }
            .mobile-menu-btn { display: flex; }
            
            /* Header Top Bar - Mobile Optimization */
            .header-top {
                font-size: 0.75rem;
                padding: 0.5rem 0;
            }
            .header-top .container {
                gap: 0.5rem;
            }
            .header-top-left {
                gap: 0.75rem;
            }
            .header-top a {
                gap: 0.25rem;
                white-space: nowrap;
            }
            .header-top svg {
                width: 14px;
                height: 14px;
                flex-shrink: 0;
            }
            /* Hide rating text on mobile, keep stars */
            .header-rating {
                gap: 0.25rem;
            }
            .header-rating .rating-text {
                display: none;
            }
            .header-free {
                font-size: 0.7rem;
                white-space: nowrap;
            }
            
            .hero { padding-top: 14rem; min-height: auto; padding-bottom: 4rem; }
            .hero h1 { font-size: 2.5rem; }
            .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
            .stat-card { padding: 1rem; }
            .stat-card .number { font-size: 2rem; }
            .section { padding: 4rem 0; }
            .section-title { font-size: 2rem; }
            .services-grid, .features-grid, .results-grid, .testimonials-grid, .locations-grid {
                grid-template-columns: 1fr;
            }
            .faq-grid { grid-template-columns: 1fr; }
            .results-stats { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; text-align: center; }
            .mobile-cta { display: block; }
            .form-row { grid-template-columns: 1fr; }
            .award-banner { flex-direction: column; text-align: center; }
            .award-content { flex-direction: column; text-align: center; }
            body { padding-bottom: 60px; }
            .btn-lg { padding: 0.875rem 1.5rem; font-size: 0.95rem; }
            .hero-ctas { flex-direction: column; gap: 1rem; }
            .hero-ctas .btn { width: 100%; justify-content: center; }
        }
        
        /* ============================================
           VERY SMALL SCREENS (iPhone SE, small Android)
           ============================================ */
        @media (max-width: 375px) {
            .header-top {
                font-size: 0.7rem;
            }
            .header-top-left {
                gap: 0.5rem;
            }
            /* Hide phone number text, keep icon only */
            .phone-number {
                display: none;
            }
            .header-phone svg {
                width: 16px;
                height: 16px;
            }
            /* Even smaller free consultation text */
            .header-free {
                font-size: 0.65rem;
            }
        }
/* ============================================
   HERO - PILLAR PAGE STYLE
   ============================================ */

.hero-pillar {
    background: linear-gradient(135deg, var(--brand-black) 0%, #1a1a1a 100%);
    color: var(--brand-white);
    padding: 10rem 0 5rem;
    position: relative;
    overflow: hidden;
}

/* Subtle grid pattern */
.hero-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.hero-pillar .container { 
    position: relative; 
    z-index: 1; 
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 1.5rem;
}
.breadcrumb a { 
    color: rgba(255,255,255,0.6); 
    transition: color 0.3s ease;
}
.breadcrumb a:hover { 
    color: var(--brand-white); 
}
.breadcrumb-sep { 
    opacity: 0.4; 
}
.breadcrumb-current { 
    color: var(--brand-white); 
}

/* Category Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--brand-blue);
    color: var(--brand-white);
    padding: 0.375rem 1rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
}
.hero-badge svg { 
    width: 14px; 
    height: 14px; 
}

/* Title & Subtitle */
.hero-pillar h1 {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand-white);
    margin-bottom: 1.25rem;
    max-width: 800px;
}
.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    max-width: 650px;
    margin-bottom: 2rem;
}

/* Quick Answer Box - AEO Optimized */
.quick-answer {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 4px solid var(--brand-blue);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    max-width: 700px;
}
.quick-answer-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--brand-blue);
    margin-bottom: 0.75rem;
}
.quick-answer-label svg { 
    width: 14px; 
    height: 14px; 
}
.quick-answer p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
    margin: 0;
}
.quick-answer strong { 
    color: var(--brand-white); 
}

/* Hero CTAs */
.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-white);
    line-height: 1;
}
.hero-stat-value span { 
    color: var(--brand-red); 
}
.hero-stat-label {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.375rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .hero-pillar {
        padding: 8rem 0 4rem;
    }
    .hero-pillar h1 {
        font-size: 2.25rem;
    }
    .hero-subtitle {
        font-size: 1.125rem;
    }
    .hero-stats {
        gap: 2rem;
    }
    .hero-stat-value {
        font-size: 2rem;
    }
    .hero-ctas {
        flex-direction: column;
    }
    .hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================
   TABLE OF CONTENTS + STICKY CTA
   ============================================ */

.toc-section {
    padding: 3rem 0;
    background: var(--brand-grey);
}

.toc-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

/* TOC Card */
.toc-card {
    background: var(--brand-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.toc-title {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--brand-black);
}

.toc-title svg { 
    width: 20px; 
    height: 20px; 
    color: var(--brand-blue); 
}

/* TOC Links Grid */
.toc-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.toc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.toc-link:hover {
    background: var(--brand-blue-light);
    color: var(--brand-blue);
    transform: translateX(4px);
}

.toc-link-num {
    width: 24px;
    height: 24px;
    background: var(--brand-grey);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.toc-link:hover .toc-link-num {
    background: var(--brand-blue);
    color: var(--brand-white);
}

/* Sticky CTA Sidebar */
.sticky-sidebar {
    position: sticky;
    top: 140px;
}

.sticky-cta {
    background: var(--brand-black);
    color: var(--brand-white);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

.sticky-cta-badge {
    display: inline-block;
    background: var(--brand-red);
    color: var(--brand-white);
    padding: 0.25rem 0.875rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.sticky-cta h3 {
    font-size: 1.375rem;
    color: var(--brand-white);
    margin-bottom: 0.75rem;
}

.sticky-cta p {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.5rem;
}

.sticky-cta .btn { 
    width: 100%; 
    margin-bottom: 1rem; 
}

.sticky-cta-phone {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0 !important;
}

.sticky-cta-phone a {
    color: var(--brand-white);
    font-weight: 600;
    transition: color 0.3s ease;
}

.sticky-cta-phone a:hover { 
    color: var(--brand-red); 
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .toc-grid {
        grid-template-columns: 1fr;
    }
    .sticky-sidebar {
        position: static;
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .toc-links {
        grid-template-columns: 1fr;
    }
    .toc-section {
        padding: 2rem 0;
    }
}
/* ============================================
   SYMPTOM CHECKER - Interactive Tool
   ============================================ */

.symptom-checker { 
    padding: 5rem 0; 
}

/* Symptom Grid */
.symptom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 850px;
    margin: 0 auto 2rem;
}

/* Symptom Item - Default State */
.symptom-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--brand-white);
    border: 2px solid var(--brand-grey);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.symptom-item:hover { 
    background: #f5f5f5;
    border-color: var(--brand-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.symptom-item:focus {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* Symptom Item - Selected State */
.symptom-item.selected {
    background: var(--brand-red-light);
    border-color: var(--brand-red);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.15);
}

.symptom-item.selected:hover {
    background: rgba(204, 0, 0, 0.12);
}

/* Checkbox */
.symptom-checkbox {
    width: 26px;
    height: 26px;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    background: var(--brand-white);
}

.symptom-item:hover .symptom-checkbox {
    border-color: var(--brand-blue);
}

/* Checkbox - Selected State (RED) */
.symptom-item.selected .symptom-checkbox {
    background: var(--brand-red);
    border-color: var(--brand-red);
}

/* Checkmark Icon */
.symptom-checkbox svg {
    width: 14px;
    height: 14px;
    color: var(--brand-white);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.symptom-item.selected .symptom-checkbox svg {
    opacity: 1;
    transform: scale(1);
}

/* Symptom Text */
.symptom-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ============================================
   RESULT BOX (Shows at 3+ selections)
   ============================================ */

.symptom-result {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #0d6a8c 100%);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(16, 118, 158, 0.25);
    
    /* Hidden by default - NO white space */
    display: none;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Result Box - Show State (appears with animation) */
.symptom-result.show {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Result Icon */
.symptom-result-icon {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.symptom-result-icon svg { 
    width: 32px; 
    height: 32px; 
    color: var(--brand-white); 
}

/* Result Title */
.symptom-result-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-white);
    margin-bottom: 0.75rem;
}

/* Result Text */
.symptom-result-text {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.symptom-result-text strong { 
    color: var(--brand-white); 
    font-weight: 700;
}

/* Result Button */
.symptom-result .btn {
    background: var(--brand-white);
    color: var(--brand-blue);
    font-weight: 700;
    padding: 1rem 2rem;
    font-size: 1rem;
}

.symptom-result .btn:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Result Note */
.symptom-result-note {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.6);
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .symptom-checker {
        padding: 3rem 0;
    }
    
    .symptom-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    .symptom-item {
        padding: 1rem 1.25rem;
    }
    
    .symptom-result {
        padding: 2rem 1.5rem;
    }
    
    .symptom-result-title {
        font-size: 1.25rem;
    }
    
    .symptom-result-text {
        font-size: 1rem;
    }
}
/* ============================================
   ARTICLE CONTENT SECTIONS
   ============================================ */

.article-section { 
    padding: 5rem 0;
    background: #f0f7fa; /* Very pale blue - lighter than key fact box */
}

/* Alternating background for visual separation */
.article-section.section-alt { 
    background: #e8f2f7; /* Slightly darker pale blue for contrast */
}

/* Container for article content */
.container-narrow {
    max-width: 800px;
    margin: 0 auto;
}

/* Article Content Typography */
.article-content h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: 140px; /* For anchor link offset */
    color: var(--brand-black);
}

.article-content h3 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    color: var(--brand-black);
}

.article-content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

/* Lists */
.article-content ul, 
.article-content ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.article-content li {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.article-content li strong {
    color: var(--brand-black);
    font-weight: 600;
}

/* Links */
.article-content a {
    color: var(--brand-blue);
    text-decoration: underline;
}

.article-content a:hover {
    color: var(--brand-blue-dark);
}

/* ============================================
   KEY FACT BOX (Blue Callout)
   ============================================ */

.key-fact {
    background: var(--brand-blue-light);
    border-left: 4px solid var(--brand-blue);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.key-fact-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--brand-blue);
    margin-bottom: 0.625rem;
}

.key-fact-label svg { 
    width: 16px; 
    height: 16px; 
}

.key-fact p {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0;
    line-height: 1.7;
}

.key-fact p:last-child {
    margin-bottom: 0;
}

.key-fact strong {
    color: var(--brand-black);
    font-weight: 600;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .article-section {
        padding: 3rem 0;
    }
    
    .article-content h2 {
        font-size: 1.75rem;
    }
    
    .article-content h3 {
        font-size: 1.375rem;
    }
    
    .article-content p,
    .article-content li {
        font-size: 1rem;
    }
    
    .key-fact {
        padding: 1.25rem;
        margin: 1.5rem 0;
    }
}
/* ============================================
   SYMPTOMS CARDS - 3 Category Grid
   ============================================ */

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

/* Symptom Category Card */
.symptom-category {
    background: var(--brand-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.symptom-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Category Icon */
.symptom-category-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* Icon Color Variants */
.symptom-category-icon.red { 
    background: var(--brand-red-light); 
    color: var(--brand-red); 
}

.symptom-category-icon.blue { 
    background: var(--brand-blue-light); 
    color: var(--brand-blue); 
}

.symptom-category-icon.green { 
    background: rgba(34, 197, 94, 0.1); 
    color: #16a34a; 
}

.symptom-category-icon svg { 
    width: 28px; 
    height: 28px; 
}

/* Category Title */
.symptom-category h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--brand-black);
}

/* Symptom List */
.symptom-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.symptom-category-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--brand-grey);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.symptom-category-list li:last-child { 
    border-bottom: none; 
}

/* Checkmark Icons */
.symptom-category-list svg {
    width: 16px;
    height: 16px;
    color: #16a34a; /* Green checkmark */
    flex-shrink: 0;
    margin-top: 3px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

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

@media (max-width: 768px) {
    .symptoms-grid { 
        grid-template-columns: 1fr; 
        gap: 1.25rem;
    }
    
    .symptom-category {
        padding: 1.5rem;
    }
}
/* ============================================
   BENEFITS CARDS - Grid Layout
   ============================================ */

.benefits-section {
    background: #f0f7fa; /* Same pale blue as content sections */
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

/* Benefit Card */
.benefit-card {
    background: transparent; /* Transparent by default */
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--brand-blue);
    background: var(--brand-white); /* White on hover */
}

/* Benefit Icon */
.benefit-icon {
    width: 64px;
    height: 64px;
    background: var(--brand-blue-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon { 
    background: var(--brand-blue); 
}

.benefit-icon svg { 
    width: 28px; 
    height: 28px; 
    color: var(--brand-blue); 
    transition: color 0.3s ease; 
}

.benefit-card:hover .benefit-icon svg { 
    color: var(--brand-white); 
}

/* Benefit Title */
.benefit-card h4 {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
    color: var(--brand-black);
    font-weight: 600;
}

/* Benefit Description */
.benefit-card p {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .benefits-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 768px) {
    .benefits-grid { 
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .benefit-card {
        padding: 1.5rem;
    }
    
    .benefit-icon {
        width: 56px;
        height: 56px;
    }
    
    .benefit-icon svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .benefits-grid { 
        grid-template-columns: 1fr;
    }
}
/* ============================================
   TREATMENT OPTIONS CARDS
   ============================================ */

.treatment-options-section {
    background: var(--brand-white); /* White background */
}

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

/* Treatment Card */
.treatment-card {
    background: var(--brand-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Treatment Header - Black by default */
.treatment-header {
    background: var(--brand-black);
    color: var(--brand-white);
    padding: 1.5rem;
    position: relative;
}

/* Treatment Header - Red for "Most Popular" */
.treatment-card.popular .treatment-header {
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
}

/* "Most Popular" Badge */
.treatment-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--brand-white);
    color: var(--brand-red);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Treatment Title & Subtitle */
.treatment-header h3 {
    font-size: 1.375rem;
    color: var(--brand-white);
    margin-bottom: 0.25rem;
}

.treatment-header p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* Treatment Body */
.treatment-body { 
    padding: 1.75rem; 
}

/* Features List */
.treatment-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.treatment-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--brand-grey);
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.treatment-features li:last-child { 
    border-bottom: none; 
}

/* Green Checkmarks */
.treatment-features svg {
    width: 18px;
    height: 18px;
    color: #16a34a; /* Green */
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

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

@media (max-width: 768px) {
    .treatment-grid { 
        grid-template-columns: 1fr; 
        gap: 1.25rem;
    }
    
    .treatment-header {
        padding: 1.25rem;
    }
    
    .treatment-body {
        padding: 1.5rem;
    }
}
/* ============================================
   TIMELINE - What to Expect
   ============================================ */

.timeline-section {
    background: #f0f7fa; /* Pale blue background */
}

.timeline {
    max-width: 700px;
    margin: 3rem auto 0;
    position: relative;
}

/* Vertical connecting line */
.timeline::before {
    content: '';
    position: absolute;
    left: 23px; /* Center of the 48px marker */
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand-grey);
}

/* Timeline Item */
.timeline-item {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
    position: relative;
}

.timeline-item:last-child { 
    padding-bottom: 0; 
}

/* Numbered Red Circle Marker */
.timeline-marker {
    width: 48px;
    height: 48px;
    background: var(--brand-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-white);
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1; /* Above the connecting line */
    line-height: 1; /* Force line-height to 1 for better centering */
    padding-bottom: 2px; /* Nudge up slightly to compensate for font metrics */
}

/* Timeline Content */
.timeline-content { 
    flex: 1; 
    padding-top: 0.5rem; 
}

/* Time Period Badge */
.timeline-time {
    display: inline-block;
    background: var(--brand-grey);
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Timeline Item Title */
.timeline-content h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--brand-black);
}

/* Timeline Item Description */
.timeline-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .timeline {
        max-width: 100%;
        padding-left: 1rem;
    }
    
    .timeline::before {
        left: 19px; /* Adjust for smaller marker */
    }
    
    .timeline-marker {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .timeline-item {
        gap: 1rem;
        padding-bottom: 2rem;
    }
    
    .timeline-content h4 {
        font-size: 1.125rem;
    }
    
    .timeline-content p {
        font-size: 0.875rem;
    }
}
/* ============================================
   UNIVERSAL SCROLL OFFSET FOR ANCHOR LINKS
   ============================================
   
   Adds scroll offset to all sections so they don't 
   get cut off by the fixed header when clicked from TOC
   ============================================ */

/* Apply to all section classes */
.section,
.hero-pillar,
.toc-section,
.symptom-checker,
.article-section,
.benefits-section,
.treatment-options-section,
.timeline-section {
    scroll-margin-top: 100px;
}
/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-section {
    background: var(--brand-white); /* White background */
    scroll-margin-top: 100px; /* Offset for fixed header anchor links */
}

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

/* FAQ Item */
.faq-item {
    background: var(--brand-white);
    border-radius: 16px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Question Header */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.75rem; /* 14px top/bottom, 28px left/right */
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-question:hover { 
    background: #f9f9f9; 
}

.faq-question h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    padding-right: 1rem;
    color: var(--brand-black);
}

/* Toggle Button (Chevron) */
.faq-toggle {
    width: 32px;
    height: 32px;
    background: var(--brand-grey);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-toggle svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

/* Open State - Red Circle & Rotated Chevron */
.faq-item.open .faq-toggle {
    background: var(--brand-red);
}

.faq-item.open .faq-toggle svg {
    color: var(--brand-white);
    transform: rotate(180deg);
}

/* Answer (Collapsed by Default) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer-inner {
    padding: 0 1.75rem 0.875rem; /* 0 top, 28px sides, 14px bottom */
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Open State - Expand Answer */
.faq-item.open .faq-answer { 
    max-height: 1000px; /* Increased from 500px for longer answers */
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .faq-list {
        max-width: 100%;
    }
    
    .faq-question {
        padding: 1.25rem 1.5rem;
    }
    
    .faq-question h3 {
        font-size: 1rem;
    }
    
    .faq-answer-inner {
        padding: 0 1.5rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .faq-toggle {
        width: 28px;
        height: 28px;
    }
    
    .faq-toggle svg {
        width: 14px;
        height: 14px;
    }
}
/* ============================================
   PATIENT SUCCESS STORY
   ============================================ */

.patient-story-section {
    padding: 5rem 0;
    background: #f0f7fa; /* Pale blue background */
    scroll-margin-top: 100px; /* Offset for fixed header anchor links */
}

/* Horizontal Story Card */
.patient-story-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    background: var(--brand-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 3rem auto 0;
}

/* Left Side - Before/After Image */
.patient-story-image {
    position: relative;
    background: linear-gradient(135deg, var(--brand-grey) 0%, #ccc 100%);
    min-height: 400px;
    overflow: hidden;
}

/* Actual Before/After Images */
.patient-story-before,
.patient-story-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.patient-story-before {
    z-index: 1;
    filter: grayscale(30%);
}

.patient-story-after {
    z-index: 2;
    opacity: 0;
}

/* Hover Effect - Reveal After Image */
.patient-story-card:hover .patient-story-before {
    opacity: 0;
    transform: scale(1.02);
}

.patient-story-card:hover .patient-story-after {
    opacity: 1;
}

/* Image Placeholders (if no images uploaded) */
.patient-story-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.patient-story-placeholder.before { 
    z-index: 2; 
    background: linear-gradient(135deg, #ddd 0%, #bbb 100%); 
}

.patient-story-placeholder.after {
    z-index: 1;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: var(--brand-white);
}

/* Hover Effect - Reveal After */
.patient-story-card:hover .patient-story-placeholder.before { 
    opacity: 0; 
}

/* Person Icons */
.patient-story-placeholder svg { 
    width: 64px; 
    height: 64px; 
    color: rgba(0,0,0,0.2); 
    margin-bottom: 0.5rem; 
}

.patient-story-placeholder.after svg { 
    color: rgba(255,255,255,0.3); 
}

.patient-story-placeholder span { 
    font-size: 0.875rem; 
    font-weight: 600; 
    color: rgba(0,0,0,0.4); 
}

.patient-story-placeholder.after span { 
    color: rgba(255,255,255,0.6); 
}

/* Weight Lost Badge */
.patient-story-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--brand-red);
    color: var(--brand-white);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 700;
    z-index: 10;
}

/* Right Side - Content */
.patient-story-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tags (Treatment & Verified) */
.patient-story-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.patient-story-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.patient-story-tag.service { 
    background: var(--brand-blue-light); 
    color: var(--brand-blue); 
}

.patient-story-tag.verified { 
    background: rgba(34, 197, 94, 0.1); 
    color: #16a34a; 
}

.patient-story-tag svg { 
    width: 12px; 
    height: 12px; 
}

/* Patient Name */
.patient-story-content h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--brand-black);
}

/* Location & Duration */
.patient-story-details {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

/* Patient Quote */
.patient-story-quote {
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--brand-red);
}

.patient-story-quote p {
    margin: 0;
}

.patient-story-quote em { 
    font-style: normal; 
    color: var(--text-primary); 
    font-weight: 600; 
}

/* Results Stats */
.patient-story-stats {
    display: flex;
    gap: 2rem;
}

.patient-story-stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-red);
}

.patient-story-stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .patient-story-card {
        grid-template-columns: 280px 1fr;
    }
    
    .patient-story-content {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .patient-story-card {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .patient-story-image {
        min-height: 300px;
    }
    
    .patient-story-content {
        padding: 1.75rem;
    }
    
    .patient-story-content h3 {
        font-size: 1.5rem;
    }
    
    .patient-story-quote {
        font-size: 1rem;
    }
    
    .patient-story-stats {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}
/* ============================================
   LOCATIONS SECTION
   ============================================ */

.locations-section {
    background: #f0f7fa; /* Light grey background */
    padding: 5rem 0;
    scroll-margin-top: 100px; /* Offset for fixed header anchor links */
}

/* 3-Column Grid */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
}

/* Region Title with Icon */
.region-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-blue);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--brand-blue-light);
}

.region-title svg { 
    color: var(--brand-blue); 
}

/* Location Cards Container */
.location-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual Location Card */
.location-card {
    background: var(--brand-white);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--brand-grey);
    transition: all 0.3s ease;
    position: relative;
}

.location-card:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Featured Location (Headquarters) */
.location-card.featured {
    border-color: var(--brand-blue);
    border-width: 2px;
}

/* Headquarters Badge */
.location-badge {
    position: absolute;
    top: -10px;
    right: 1rem;
    background: var(--brand-blue);
    color: var(--brand-white);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
}

/* Location Name */
.location-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Address */
.location-address {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* Serving Areas */
.location-serving {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.location-serving strong {
    color: var(--text-secondary);
}

/* View Location Link */
.location-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-blue);
    transition: color 0.3s ease;
}

.location-link:hover { 
    color: var(--brand-blue-dark); 
}

/* ============================================
   SEO SERVICE AREAS (Full Width Below)
   ============================================ */

.service-areas-seo {
    background: var(--brand-white);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--brand-grey);
}

.service-areas-seo h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    text-align: center;
}

.service-areas-list {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 0.75rem;
    text-align: center;
}

.service-areas-list:last-child { 
    margin-bottom: 0; 
}

.service-areas-list strong {
    color: var(--brand-blue);
    font-weight: 600;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .locations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .locations-section {
        padding: 4rem 0;
    }
    
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .region-title {
        font-size: 1.125rem;
    }
    
    .location-card {
        padding: 1.25rem;
    }
    
    .service-areas-seo {
        padding: 1.5rem;
    }
    
    .service-areas-list {
        text-align: left;
    }
}
/* ============================================
   RELATED TOPICS / CLUSTER LINKS
   ============================================ */

.cluster-section {
    padding: 5rem 0;
    background: var(--brand-black); /* Black background */
    scroll-margin-top: 100px; /* Offset for fixed header anchor links */
}

/* White text on black background */
.cluster-section .section-header { 
    color: var(--brand-white); 
}

.cluster-section .section-label {
    color: rgba(255,255,255,0.5);
}

.cluster-section .section-title { 
    color: var(--brand-white); 
}

.cluster-section .section-subtitle { 
    color: rgba(255,255,255,0.7); 
}

/* 4-Column Grid */
.cluster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

/* Topic Card */
.cluster-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.75rem;
    transition: all 0.3s ease;
}

.cluster-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-red);
    background: rgba(255,255,255,0.08);
}

/* Icon Square */
.cluster-icon {
    width: 48px;
    height: 48px;
    background: var(--brand-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.cluster-icon svg { 
    width: 24px; 
    height: 24px; 
    color: var(--brand-white); 
}

/* Card Title */
.cluster-card h4 {
    font-size: 1.125rem;
    color: var(--brand-white);
    margin-bottom: 0.625rem;
}

/* Card Description */
.cluster-card p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Read Guide Link */
.cluster-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-red);
    font-size: 0.875rem;
    font-weight: 600;
    transition: gap 0.3s ease;
}

.cluster-link:hover { 
    gap: 0.75rem; 
}

.cluster-link svg { 
    width: 16px; 
    height: 16px; 
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .cluster-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .cluster-section {
        padding: 4rem 0;
    }
    
    .cluster-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .cluster-card {
        padding: 1.5rem;
    }
}
/* ============================================
   CTA / CONTACT FORM SECTION (Pillar Pages)
   ============================================ */

.cta-section-pillar {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    padding: 6rem 0;
    scroll-margin-top: 100px;
}

/* 2-Column Grid */
.cta-section-pillar .cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Left Column - Content */
.cta-section-pillar .cta-content {
    color: #fff;
}

.cta-section-pillar .cta-content .section-label {
    color: var(--brand-red);
}

.cta-section-pillar .cta-content h2 {
    font-size: 2.75rem;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.cta-section-pillar .cta-content h2 .highlight {
    color: var(--brand-red);
}

.cta-section-pillar .cta-content > p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 2rem;
    line-height: 1.7;
}

/* Benefits Checklist */
.cta-section-pillar .cta-benefits {
    margin-bottom: 2rem;
}

.cta-section-pillar .cta-benefit {
    display: flex;
    align-items: center;
    margin-bottom: 0.875rem;
    color: #fff;
    font-size: 1rem;
}

.cta-section-pillar .cta-benefit svg {
    width: 22px;
    height: 22px;
    color: var(--brand-red);
    margin-right: 0.875rem;
    flex-shrink: 0;
}

/* Phone Number Box */
.cta-section-pillar .cta-phone {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 1.5rem;
    display: inline-block;
}

.cta-section-pillar .cta-phone p {
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
}

.cta-section-pillar .cta-phone a {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.cta-section-pillar .cta-phone a:hover { 
    color: var(--brand-red); 
}

/* Right Column - Form Card */
.form-card {
    background: var(--brand-white);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.form-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-black);
    text-align: center;
    margin-bottom: 1.75rem;
}

/* Form Styling (if using native form) */
.form-card form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.form-group { 
    margin-bottom: 1rem; 
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input, 
.form-select, 
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--brand-grey-dark);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--brand-white);
}

.form-input:focus, 
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(16, 118, 158, 0.1);
}

.form-submit {
    width: 100%;
    padding: 1rem;
    background: var(--brand-red);
    color: var(--brand-white);
    border: none;
    border-radius: 8px;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-submit:hover {
    background: var(--brand-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(204, 0, 0, 0.35);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .cta-section-pillar .cta-grid {
        gap: 3rem;
    }
    
    .cta-section-pillar .cta-content h2 {
        font-size: 2.25rem;
    }
}

@media (max-width: 768px) {
    .cta-section-pillar {
        padding: 4rem 0;
    }
    
    .cta-section-pillar .cta-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .cta-section-pillar .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-section-pillar .cta-content > p {
        font-size: 1rem;
    }
    
    .cta-section-pillar .cta-phone {
        width: 100%;
        text-align: center;
    }
    
    .form-card {
        padding: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}
/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-accordion-section {
    background: var(--brand-white); /* White background */
    scroll-margin-top: 100px; /* Offset for fixed header anchor links */
}

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

/* FAQ Item */
.faq-accordion-item {
    background: var(--brand-white);
    border-radius: 16px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-accordion-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Question Header */
.faq-accordion-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.75rem; /* 14px top/bottom, 28px left/right */
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-accordion-question:hover { 
    background: #f9f9f9; 
}

.faq-accordion-question h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    padding-right: 1rem;
    color: var(--brand-black);
}

/* Toggle Button (Chevron) */
.faq-accordion-toggle {
    width: 32px;
    height: 32px;
    background: var(--brand-grey);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-accordion-toggle svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

/* Open State - Red Circle & Rotated Chevron */
.faq-accordion-item.open .faq-accordion-toggle {
    background: var(--brand-red);
}

.faq-accordion-item.open .faq-accordion-toggle svg {
    color: var(--brand-white);
    transform: rotate(180deg);
}

/* Answer (Collapsed by Default) */
.faq-accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-accordion-answer-inner {
    padding: 0 1.75rem 0.875rem; /* 0 top, 28px sides, 14px bottom */
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Open State - Expand Answer */
.faq-accordion-item.open .faq-accordion-answer { 
    max-height: 1000px; /* Increased from 500px for longer answers */
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .faq-accordion-list {
        max-width: 100%;
    }
    
    .faq-accordion-question {
        padding: 1.25rem 1.5rem;
    }
    
    .faq-accordion-question h3 {
        font-size: 1rem;
    }
    
    .faq-accordion-answer-inner {
        padding: 0 1.5rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .faq-accordion-toggle {
        width: 28px;
        height: 28px;
    }
    
    .faq-accordion-toggle svg {
        width: 14px;
        height: 14px;
    }
}
/* ============================================
   HOMEPAGE FAQ ACCORDION
   ============================================ */

.homepage-faq-section {
    background: var(--brand-white);
    scroll-margin-top: 100px;
}

.homepage-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.homepage-faq-item {
    background: var(--brand-grey);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.homepage-faq-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.homepage-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.75rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.homepage-faq-question:hover {
    background: rgba(0, 0, 0, 0.03);
}

.homepage-faq-question h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-black);
    margin: 0;
    padding-right: 1rem;
}

.homepage-faq-toggle {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.homepage-faq-toggle svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.homepage-faq-item.open .homepage-faq-toggle {
    background: var(--brand-red);
}

.homepage-faq-item.open .homepage-faq-toggle svg {
    color: var(--brand-white);
    transform: rotate(180deg);
}

.homepage-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.homepage-faq-answer-inner {
    padding: 0 1.75rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.homepage-faq-answer-inner p {
    margin: 0;
}

.homepage-faq-item.open .homepage-faq-answer {
    max-height: 1000px;
}

/* Responsive */
@media (max-width: 768px) {
    .homepage-faq-grid {
        grid-template-columns: 1fr;
    }
    
    .homepage-faq-question {
        padding: 1.25rem 1.5rem;
    }
    
    .homepage-faq-question h3 {
        font-size: 1rem;
    }
}

/* ============================================================
   SERVICE PILLAR PAGE CSS — v2
   Matches: services-page-template.php class names exactly
   ============================================================ */

/* ── SHARED LAYOUT ─────────────────────────────────────────── */
.services-page .section {
    padding: 5rem 0;
}
.services-page .section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.services-page .section-label {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #10769E;
    margin-bottom: 0.875rem;
}
.services-page .section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.services-page .section-subtitle {
    font-size: 1.125rem;
    color: #5a5556;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── SECTION 0: HERO ───────────────────────────────────────── */
.hero-pillar {
    background: #000;
    padding: 12.75rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.hero-pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}
.hero-pillar-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero-pillar-content {
    max-width: 600px;
}

/* Breadcrumb */
.hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.hero-breadcrumb a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.hero-breadcrumb a:hover { color: #fff; }
.hero-breadcrumb span { color: rgba(255,255,255,0.4); }

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #CC0000;
    margin-bottom: 1.5rem;
}

/* Title */
.hero-pillar-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.hero-pillar-subtitle {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* Quick Answer */
.hero-quick-answer {
    background: rgba(255,255,255,0.06);
    border-left: 3px solid #CC0000;
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: 1.75rem;
}
.hero-quick-answer strong {
    color: #CC0000;
    font-weight: 700;
}

/* CTAs */
.hero-pillar-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Right side */
.hero-pillar-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.hero-stat-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.hero-stat-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #CC0000;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.hero-stat-label {
    font-size: 0.875rem;
    color: #5a5556;
    font-weight: 500;
}

/* Hero FAQ accordion */
.hero-faq-list {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.hero-faq-item {
    border-bottom: 1px solid #E6E6E6;
}
.hero-faq-item:last-child { border-bottom: none; }
.hero-faq-item summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;
}
.hero-faq-item summary::-webkit-details-marker { display: none; }
.hero-faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: #CC0000;
    flex-shrink: 0;
}
.hero-faq-item[open] summary::after { content: '−'; }
.hero-faq-item p {
    padding: 0 1.25rem 1rem;
    font-size: 0.9375rem;
    color: #5a5556;
    line-height: 1.7;
    margin: 0;
}

/* ── SECTION 1: TABLE OF CONTENTS ──────────────────────────── */
.toc-section {
    background: #fff;
    padding: 3rem 0;
    border-bottom: 1px solid #E6E6E6;
}
.toc-inner {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}
.toc-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.25rem;
}
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}
.toc-list li {
    margin-bottom: 0.625rem;
    break-inside: avoid;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.toc-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #CC0000;
    border-radius: 50%;
    flex-shrink: 0;
}
.toc-list a {
    color: #10769E;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}
.toc-list a:hover { text-decoration: underline; }

/* TOC CTA sidebar card */
.toc-cta-card {
    background: #000;
    color: #fff;
    border-radius: 16px;
    padding: 1.75rem;
}
.toc-cta-badge {
    display: inline-block;
    background: #CC0000;
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.toc-cta-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #fff;
}
.toc-cta-card p {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.toc-cta-card .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.toc-phone {
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}
.toc-phone:hover { color: #fff; }

/* ── SECTION 2: SYMPTOM CHECKER ────────────────────────────── */
.symptom-checker {
    background: #F5F5F5;
}
.symptom-checker-inner {
    max-width: 900px;
    margin: 0 auto;
}
.symptom-checker-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.symptom-checker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.symptom-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.symptom-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
    color: #333;
}
.symptom-item:hover {
    border-color: #CC0000;
    box-shadow: 0 2px 8px rgba(204,0,0,0.08);
}
.symptom-check {
    accent-color: #CC0000;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.symptom-result {
    background: #000;
    border: 1px solid rgba(204,0,0,0.3);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 40px rgba(204,0,0,0.15);
    position: sticky;
    top: 120px;
}
.symptom-result h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
.result-text {
    color: rgba(255,255,255,0.8);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.symptom-result .btn {
    width: 100%;
    justify-content: center;
}
.result-note {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.875rem;
    line-height: 1.6;
}

/* ── SECTION 3: ARTICLE CONTENT ────────────────────────────── */
.article-section {
    background: #fff;
    padding: 5rem 0;
}
.article-inner {
    max-width: 800px;
    margin: 0 auto;
}
.article-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 2rem;
    line-height: 1.2;
}
.article-body h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #000;
    margin: 2rem 0 0.75rem;
}
.article-paragraph {
    color: #5a5556;
    font-size: 1rem;
    line-height: 1.85;
    margin-bottom: 1.25rem;
}
.key-fact {
    background: rgba(204,0,0,0.05);
    border-left: 4px solid #CC0000;
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    color: #333;
    line-height: 1.7;
    margin: 1.5rem 0;
    font-weight: 500;
}

/* ── SECTION 4: SYMPTOM CATEGORIES ─────────────────────────── */
.symptoms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.symptom-category {
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.symptom-category-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.symptom-category-icon svg {
    width: 28px;
    height: 28px;
}
.symptom-category-icon.red   { background: rgba(204,0,0,0.08);  color: #CC0000; }
.symptom-category-icon.blue  { background: rgba(16,118,158,0.1); color: #10769E; }
.symptom-category-icon.green { background: rgba(34,197,94,0.1);  color: #16a34a; }
.symptom-category h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1rem;
}
.symptom-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.symptom-category-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F5F5F5;
    font-size: 0.9375rem;
    color: #5a5556;
    line-height: 1.5;
}
.symptom-category-list li:last-child { border-bottom: none; }
.symptom-category-list svg {
    width: 16px;
    height: 16px;
    color: #CC0000;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── SECTION 5: BENEFITS ────────────────────────────────────── */
.benefits-section {
    background: #F5F5F5;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.benefit-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.benefit-icon {
    width: 64px;
    height: 64px;
    background: rgba(204,0,0,0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: #CC0000;
}
.benefit-icon svg {
    width: 30px;
    height: 30px;
}
.benefit-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.75rem;
}
.benefit-card p {
    font-size: 0.9375rem;
    color: #5a5556;
    line-height: 1.7;
}

/* ── SECTION 6: TREATMENT CARDS ────────────────────────────── */
.treatment-options-section {
    background: #fff;
}
.treatment-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.treatment-card {
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}
.treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
.treatment-card--popular {
    border-color: #CC0000;
    box-shadow: 0 8px 32px rgba(204,0,0,0.12);
}

/* Card header banner */
.treatment-card-header {
    background: #000;
    padding: 2rem 1.75rem 1.5rem;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.treatment-card--popular .treatment-card-header {
    background: #CC0000;
}
.treatment-popular-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #fff;
    color: #CC0000;
    padding: 0.25rem 0.875rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.treatment-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.treatment-subtitle {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.75);
    margin: 0.375rem 0 0;
    line-height: 1.5;
}

/* Card body */
.treatment-card-body {
    padding: 1.5rem 1.75rem 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.treatment-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}
.treatment-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #F5F5F5;
    font-size: 0.9375rem;
    color: #333;
    line-height: 1.5;
}
.treatment-features li:last-child { border-bottom: none; }
.treatment-features svg {
    width: 16px;
    height: 16px;
    color: #CC0000;
    flex-shrink: 0;
    margin-top: 2px;
}
.treatment-card .btn {
    width: 100%;
    justify-content: center;
}

/* ── SECTION 7: TIMELINE ────────────────────────────────────── */
.timeline-section {
    background: #F5F5F5;
}
.timeline {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
}
/* Vertical line — centered on the 56px marker column: left = 28px - 1px */
.timeline::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: #CC0000;
    opacity: 0.2;
}
.timeline-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
    position: relative;
    align-items: start;
}
.timeline-item:last-child { margin-bottom: 0; }

/* Numbered circle — sits in the 56px column, centered */
.timeline-marker {
    width: 56px;
    height: 56px;
    background: #CC0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(204,0,0,0.35);
    position: relative;
    z-index: 1;
}

/* Content card */
.timeline-content {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    border: 1px solid #E6E6E6;
}
/* Time badge inside card */
.timeline-time {
    display: inline-block;
    background: #F5F5F5;
    border: 1px solid #E6E6E6;
    color: #CC0000;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.625rem;
}
.timeline-content h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.375rem;
}
.timeline-content p {
    font-size: 0.9375rem;
    color: #5a5556;
    line-height: 1.7;
    margin: 0;
}

/* ── SECTION 8: FAQ ACCORDION ───────────────────────────────── */
.faq-section {
    background: #fff;
}
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    margin-bottom: 0.875rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.faq-item[open] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-color: rgba(204,0,0,0.2);
}
.faq-question {
    padding: 1.25rem 1.5rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: #CC0000;
    flex-shrink: 0;
    font-family: sans-serif;
    transition: transform 0.2s ease;
}
.faq-item[open] .faq-question::after { content: '−'; }
.faq-answer {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #F5F5F5;
}
.faq-answer p {
    font-size: 0.9375rem;
    color: #5a5556;
    line-height: 1.8;
    margin: 1rem 0 0;
}

/* ── SECTION 9: PATIENT STORY ───────────────────────────────── */
.patient-story-section {
    background: #000;
    color: #fff;
    padding: 5rem 0;
}
.patient-story-section .section-header {
    margin-bottom: 2.5rem;
}
.patient-story-section .section-label { color: #CC0000; }
.patient-story-section .section-title { color: #fff; }
.patient-story-section .section-subtitle { color: rgba(255,255,255,0.7); }

.patient-story-card {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0;
    align-items: stretch;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    max-width: 960px;
    margin: 0 auto;
}
.patient-story-photo {
    position: relative;
    background: #1a1a1a;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}
.story-weight-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: #CC0000;
    color: #fff;
    padding: 0.5rem 1.125rem;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(204,0,0,0.4);
}
.patient-story-content {
    background: #fff;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}
.story-treatment-tag {
    display: inline-block;
    background: rgba(16,118,158,0.1);
    color: #10769E;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    width: fit-content;
}
.story-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 1.2;
}
.story-details {
    font-size: 0.9375rem;
    color: #999;
    margin: 0;
}
.story-quote {
    font-size: 1rem;
    color: #5a5556;
    line-height: 1.75;
    font-style: italic;
    padding-left: 1.25rem;
    border-left: 3px solid #CC0000;
    margin: 0.5rem 0;
}
.story-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 1.25rem;
    border-top: 1px solid #E6E6E6;
    margin-top: 0.5rem;
}
.story-stat {
    text-align: center;
    padding: 0 0.5rem;
    border-right: 1px solid #E6E6E6;
}
.story-stat:last-child { border-right: none; }
.story-stat-value {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: #CC0000;
    line-height: 1;
}
.story-stat-label {
    display: block;
    font-size: 0.6875rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.375rem;
}

/* ── SECTION 10: LOCATIONS ──────────────────────────────────── */
.locations-section {
    background: #F5F5F5;
    padding: 5rem 0;
}
.location-region {
    margin-bottom: 2.5rem;
}
.location-region:last-child { margin-bottom: 0; }
.location-region-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #E6E6E6;
}
.location-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.location-card {
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.location-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.location-card--featured {
    border-color: #CC0000;
    box-shadow: 0 4px 20px rgba(204,0,0,0.08);
}
.location-badge {
    display: inline-block;
    background: #CC0000;
    color: #fff;
    padding: 0.2rem 0.625rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.location-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.5rem;
}
.location-address {
    font-size: 0.875rem;
    color: #5a5556;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.location-serving {
    font-size: 0.8125rem;
    color: #999;
    margin-bottom: 1rem;
}
.location-link {
    display: inline-flex;
    align-items: center;
    color: #10769E;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.location-link:hover { text-decoration: underline; }

/* ── SECTION 11: RELATED TOPICS (cluster) ───────────────────── */
.topic-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.topic-card {
    display: block;
    background: #F5F5F5;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
    color: inherit;
}
.topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border-color: #CC0000;
    background: #fff;
}
.topic-icon {
    width: 56px;
    height: 56px;
    background: rgba(204,0,0,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CC0000;
    margin-bottom: 1.25rem;
}
.topic-icon svg {
    width: 28px;
    height: 28px;
}
.topic-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.5rem;
}
.topic-card p {
    font-size: 0.9375rem;
    color: #5a5556;
    line-height: 1.6;
    margin: 0;
}
/* ── CTA PILLAR (alternate template class names) ────────────── */
.cta-pillar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.cta-pillar-content {
    color: #fff;
}
.cta-pillar-content .section-label { color: var(--brand-red); }
.cta-pillar-content h2 {
    font-size: 2.75rem;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}
.cta-pillar-content > p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 2rem;
    line-height: 1.7;
}
.cta-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.cta-benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.875rem;
}
.cta-benefits-list svg {
    width: 22px;
    height: 22px;
    min-width: 22px;
    color: var(--brand-red);
    flex-shrink: 0;
}
.cta-phone-block {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: inline-block;
}
.cta-phone-block p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    margin: 0 0 0.375rem;
}
.cta-phone-block a {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}
.cta-phone-block a:hover { color: var(--brand-red); }
.cta-pillar-form {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.cta-pillar-form h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 1.5rem;
}
.cta-pillar-form iframe {
    display: block;
    width: 100%;
    min-height: 500px;
    border: none;
}


@media (max-width: 1024px) {
    .hero-pillar-inner {
        grid-template-columns: 1fr;
    }
    .hero-pillar-right {
        max-width: 600px;
    }
    .toc-inner {
        grid-template-columns: 1fr;
    }
    .toc-cta-card {
        max-width: 500px;
    }
    .treatment-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .location-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cta-pillar-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .hero-pillar { padding: 8rem 0 4rem; }
    .hero-pillar-title { font-size: 2.25rem; }
    .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .symptom-checker-grid { grid-template-columns: 1fr; }
    .symptoms-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; }
    .treatment-cards-grid { grid-template-columns: 1fr; }
    .timeline::before { display: none; }
    .timeline-item { grid-template-columns: 56px 1fr; gap: 0.75rem; }
    .patient-story-card {
        grid-template-columns: 1fr;
    }
    .patient-story-photo { min-height: 260px; }
    .story-stats { grid-template-columns: repeat(3, 1fr); }
    .location-cards-grid { grid-template-columns: 1fr; }
    .topic-cards-grid { grid-template-columns: 1fr; }
    .toc-list { columns: 1; }
    .services-page .section-title { font-size: 1.875rem; }
}

/* ============================================================
   BODY SYMMETRY MD — Homepage v5 CSS Additions
   Add this entire block to the END of assets/css/main.css
   (or paste into WP Admin > Appearance > Customize > CSS)
   ============================================================ */

/* Variables and body background defined in :root at top of file */

/* ── Header ──────────────────────────────────────────────── */
.header-top { background: var(--brand-steel); }
.header-rating .stars { color: #d4a017; }
.nav-links a::after { background: var(--brand-blue); }

/* ── HERO ────────────────────────────────────────────────── */
.home .hero {
    position: relative;
    min-height: 100vh;
    padding: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #f5f3ef;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 62% center;
    display: block;
}
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(248,246,242,0.88) 0%,
        rgba(248,246,242,0.78) 22%,
        rgba(248,246,242,0.48) 40%,
        rgba(248,246,242,0.18) 58%,
        rgba(248,246,242,0.04) 72%,
        rgba(248,246,242,0.00) 100%
    );
}
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-blue-dark) 0%, var(--brand-blue-mid) 50%, transparent 100%);
    z-index: 10;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to top, #f2f2f2 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}
.hero-pattern, .hero-noise, .hero-beam,
.hero-particles, .hero-fade { display: none; }
.hero .container {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    padding-top: 17.75rem;
    padding-bottom: 5.625rem;
    width: 100%;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
    width: 100%;
}
.hero-content { color: var(--text-primary); }
.hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(14,106,142,0.25);
    backdrop-filter: blur(8px);
    padding: 0.5rem 1.1rem;
    border-radius: 100px;
    margin-bottom: 2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-blue-dark);
    box-shadow: 0 2px 12px rgba(14,106,142,0.10);
}
.hero-badge svg { width:16px; height:16px; margin-right:0.5rem; color:var(--brand-blue); flex-shrink:0; }
.hero h1 {
    font-size: clamp(2.75rem, 4.5vw, 4.25rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    font-weight: 700;
}
.hero h1 .highlight { display: block; color: var(--brand-blue); font-style: italic; }
.hero-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 500px;
    line-height: 1.8;
}
.hero-text strong { color: var(--text-primary); font-weight: 700; }
.hero-tags { display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2.25rem; }
.hero-tag {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(14,106,142,0.20);
    color: var(--brand-blue-dark);
    padding: 0.375rem 1rem;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-ctas .btn-outline-dark {
    border-color: rgba(13,31,45,0.35);
    color: var(--text-primary);
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(4px);
}
.hero-ctas .btn-outline-dark:hover {
    background: rgba(255,255,255,0.85);
    border-color: var(--brand-blue);
    color: var(--brand-blue-dark);
}
.hero-location { display:flex; align-items:center; color:var(--text-muted); font-size:0.875rem; gap:0.5rem; }
.hero-location svg { width:15px; height:15px; color:var(--brand-blue); flex-shrink:0; }
.hero-right { display:flex; flex-direction:column; gap:1.25rem; }
.hero-glass-panel {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 #fff;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    background: rgba(14,106,142,0.10);
    border-radius: 12px;
    overflow: hidden;
}
.stat-card {
    background: rgba(255,255,255,0.85);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: background 0.2s;
    border: none;
    box-shadow: none;
}
.stat-card:hover { background: rgba(14,106,142,0.06); }
.stat-card .number {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--brand-blue);
    line-height: 1;
    margin-bottom: 0.4rem;
}
.stat-card .label { color:var(--text-muted); font-size:0.75rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; }
.testimonial-card { background:transparent; border:none; box-shadow:none; padding:0; }
.testimonial-stars { color: #d4a017; font-size:1rem; letter-spacing:-1px; }
.testimonial-type { color:var(--text-muted); font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.testimonial-text { color:var(--text-secondary); font-size:0.9375rem; line-height:1.7; font-style:italic; margin-bottom:0.75rem; }
.testimonial-text strong { color:var(--text-primary); font-style:normal; }
.testimonial-author { color:var(--text-muted); font-size:0.8125rem; font-weight:600; }
.hero-section-divider {
    position:absolute; bottom:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, rgba(14,106,142,0.25) 0%, rgba(14,106,142,0.10) 50%, transparent 100%);
    z-index: 10;
}
@media (max-width:1024px) {
    .hero-grid { grid-template-columns:1fr; gap:2.5rem; }
    .hero .container { padding-top:8rem; }
    .hero h1 { font-size:2.75rem; }
    .hero-bg::after { background:rgba(248,246,242,0.80); }
}
@media (max-width:768px) {
    .home .hero { min-height:auto; }
    .hero .container { padding-top:7rem; padding-bottom:3rem; }
    .hero h1 { font-size:2.25rem; }
    .hero-bg img { object-position:75% center; }
    .hero-bg::after { background:rgba(248,246,242,0.82); }
}

/* ── INTRO (Before / After) ──────────────────────────────── */
.intro { position:relative; overflow:hidden; }
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    min-height: 580px;
}
.cb-left {
    background: #f2f2f2;
    padding: 5rem 3.5rem 5rem 5rem;
    display: flex; flex-direction:column; justify-content:center;
    position: relative;
}
.cb-problem-label {
    font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
    color:#aaa; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.6rem;
}
.cb-problem-label::before { content:''; width:20px; height:1px; background:#ccc; flex-shrink:0; }
.cb-problem-headline {
    font-family:'Playfair Display',serif;
    font-size: clamp(1.75rem, 2.5vw, 2.75rem);
    font-weight:600; color:#999; line-height:1.2; margin-bottom:1.75rem; font-style:italic;
}
.cb-symptoms { list-style:none; display:flex; flex-direction:column; gap:0.875rem; }
.cb-symptoms li { display:flex; align-items:flex-start; gap:0.75rem; font-size:0.9375rem; color:#999; line-height:1.55; }
.cb-symptoms li::before { content:'—'; color:#ccc; font-weight:300; flex-shrink:0; }
.cb-divider-img { position:relative; overflow:hidden; z-index:5; }
.cb-divider-img img { width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block; }
.cb-divider-img::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(to right, rgba(242,242,242,0.3) 0%, transparent 20%),
                linear-gradient(to left, rgba(14,30,44,0.35) 0%, transparent 30%);
    z-index:1; pointer-events:none;
}
.cb-divider-img::after {
    content:'Physician Supervised';
    position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
    white-space:nowrap; background:rgba(14,30,44,0.88); backdrop-filter:blur(10px);
    color:#fff; font-size:0.6rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    padding:0.5rem 1rem; border-radius:100px; border:1px solid rgba(18,128,170,0.4); z-index:2;
}
.cb-right {
    background: var(--brand-navy);
    padding: 5rem 5rem 5rem 3.5rem;
    display:flex; flex-direction:column; justify-content:center;
    position:relative; overflow:hidden;
}
.cb-right::before {
    content:''; position:absolute; top:-20%; right:-10%; width:65%; height:80%;
    background:radial-gradient(circle, rgba(18,128,170,0.18) 0%, transparent 65%);
    pointer-events:none;
}
.cb-solution-label {
    font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--brand-blue-mid); margin-bottom:1.5rem; display:flex; align-items:center; gap:0.6rem; position:relative; z-index:1;
}
.cb-solution-label::before { content:''; width:20px; height:1px; background:var(--brand-blue-mid); flex-shrink:0; }
.cb-solution-headline {
    font-family:'Playfair Display',serif; font-size:clamp(1.75rem,2.5vw,2.75rem);
    font-weight:700; color:#fff; line-height:1.2; margin-bottom:1.5rem; position:relative; z-index:1;
}
.cb-solution-headline em { color:var(--brand-blue-mid); font-style:italic; }
.cb-solution-body { font-size:1rem; color:rgba(255,255,255,0.70); line-height:1.85; max-width:420px; margin-bottom:2.5rem; position:relative; z-index:1; }
.cb-solution-body strong { color:#fff; }
.cb-chips { display:flex; flex-wrap:wrap; gap:0.75rem; position:relative; z-index:1; }
.cb-chip { background:rgba(18,128,170,0.14); border:1px solid rgba(18,128,170,0.35); color:rgba(255,255,255,0.88); padding:0.5rem 1.1rem; border-radius:100px; font-size:0.8125rem; font-weight:600; }
.cb-chip .accent { color:var(--brand-blue-mid); }
@media (max-width:960px) {
    .intro-grid { grid-template-columns:1fr; }
    .cb-divider-img { height:300px; }
    .cb-left  { padding:4rem 2.5rem; }
    .cb-right { padding:4rem 2.5rem; }
}

/* ── SERVICES ────────────────────────────────────────────── */
.services { background:var(--surface-cool); }
.service-card:hover { box-shadow:0 20px 40px rgba(14,106,142,0.16); }
.service-header.women {
    background: linear-gradient(135deg, rgba(196,54,110,0.88) 0%, rgba(196,54,110,0.72) 100%);
}
.service-header.men {
    background: linear-gradient(160deg, #0e6a8e 0%, #0a4d68 100%);
}

/* ── FEATURES / WHY US ───────────────────────────────────── */
.features { background:var(--brand-white); }
.feature-icon { background:var(--brand-blue-light); }
.feature-icon svg { color:var(--brand-blue); }
.features-photo-strip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    margin: 3rem 0 2.5rem;
}
.fstrip-item { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 8px 24px rgba(14,106,142,0.12); }
.fstrip-item img { width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; transition:transform 0.5s ease; }
.fstrip-item:hover img { transform:scale(1.04); }
.fstrip-item span {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(transparent, rgba(10,20,32,0.85));
    color:#fff; font-size:0.75rem; font-weight:700;
    padding:2rem 1rem 0.875rem; letter-spacing:0.04em; text-transform:uppercase;
}
@media (max-width:768px) { .features-photo-strip { grid-template-columns:1fr; gap:1rem; } }

/* ── TRANSFORMATIONS ─────────────────────────────────────── */
.transformations { background:var(--brand-black); }
.transform-stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
    margin-bottom:4rem; padding:2.5rem 0;
    border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1);
}
.transform-stat { text-align:center; }
.transform-stat .number { font-family:'Playfair Display',serif; font-size:3.5rem; font-weight:700; color:var(--brand-red); line-height:1; margin-bottom:0.5rem; }
.transform-stat .label { color:rgba(255,255,255,0.7); font-size:0.9375rem; }
@media (max-width:1024px) { .transform-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) { .transform-stats { grid-template-columns:repeat(2,1fr); gap:1rem; } }

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testimonials { background:var(--surface-cool); }
.testimonial-grid-card .stars { color:#d4a017; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { background:var(--surface-pale); }
.faq-item {
    background: var(--surface-ice);
    border-radius: 12px;
    padding: 1.75rem;
    border-left: 3px solid rgba(14,106,142,0.2);
}

/* ── LOCATIONS ───────────────────────────────────────────── */
.locations { background:var(--surface-cool); }
.location-card.primary { border:2px solid var(--brand-blue); }
.location-badge { background:var(--brand-blue); }
.location-card:hover { box-shadow:0 12px 30px rgba(14,106,142,0.14); }
.location-card.virtual { background:linear-gradient(160deg, #0e6a8e 0%, #0a4d68 100%); }
.location-link { color:var(--brand-blue); }

/* ── CTA SECTION ─────────────────────────────────────────── */
/* Background set inline from ACF field — no CSS needed here */
.cta-section { padding:6rem 0; }

/* ── SECTION LABEL (global eyebrow) ─────────────────────── */
.section-label { color:var(--brand-blue); }

/* ── Responsive overrides (mobile) ──────────────────────── */
@media (max-width:768px) {
    .hero-ctas { flex-direction:column; gap:1rem; }
    .hero-ctas .btn { width:100%; justify-content:center; }
}

/* ── Remove all inter-section gaps ── */
main, #main-content, .site-main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

section,
.section,
.intro,
.hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

main > *:not(script),
#main-content > *:not(script) {
    display: block;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.intro {
    padding: 0 !important;
}
/* ── Homepage FAQ override (homepage only) ── */
.homepage-faq .faq-item {
    cursor: default;
}

.homepage-faq .faq-answer {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

.homepage-faq .faq-item::after,
.homepage-faq .faq-item::before {
    display: none !important;
}

.homepage-faq .faq-toggle,
.homepage-faq .faq-icon,
.homepage-faq .faq-item > span:last-child {
    display: none !important;
}
.homepage-faq .faq-question::after {
    display: none !important;
}