:root {
        --ruby: #7A1F2D;
        --champagne: #D4AF37;
        --ivory: #F8F6F3;
        --charcoal: #2B2B2B;
        --blush: #E7C9C9;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        background: var(--ivory);
        color: var(--charcoal);
        line-height: 1.6;
    }

    header {
        background: var(--ivory);
        padding: 2rem;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

     .header-logo {
            max-width: 90%;
            height: auto;
            Margin-top: -.5em;
            Margin-bottom: -1em;
        }
    
     @media (min-width: 768px) {
     .header-logo {
                max-width: 500px;
            }
        }
 /*
    header h1 {
        font-family: 'Playfair Display', serif;
        color: var(--ruby);
        font-size: 2.5rem;
        max-width: auto;
        Margin-top: -.5em;
        Margin-bottom: -1em;
    } */
    

    header p {
        font-style: italic;
        color: var(--charcoal);
    }

    nav {
        margin-top: 1rem;
    }

    nav a {
        margin: 0 1rem;
        text-decoration: none;
        color: var(--charcoal);
        font-weight: 500;
    }

    section {
        padding: 4rem 2rem;
        max-width: 1000px;
        margin: auto;
    }

    h2 {
        font-family: 'Playfair Display', serif;
        color: var(--ruby);
        margin-bottom: 1rem;
        text-align: center;
    }

    .hero {
        text-align: center;
        padding: 4rem 2rem;
        background: var(--ivory);
    }

    .hero h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .cta-btn {
        background: var(--ruby);
        color: white;
        padding: 1rem 2rem;
        border: none;
        border-radius: 40px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        margin-top: 1.5rem;
        transition: 0.3s;
    }

    .cta-btn:hover {
        background: var(--champagne);
        color: var(--charcoal);
    }

    .about,
    .services,
    .contact,
    .mailerlite {
        background: white;
        margin: 2rem auto;
        border-radius: 12px;
        padding: 3rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .about-section p {
        margin-bottom: 1.75em;
    }

    .about-section h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2.1rem;
            color: #7A1F2D;
            margin-bottom: 0.75rem;
        }
    

        .about-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            max-width: 1100px;
            margin: 0 auto;
        }
    
        .about-text {
            flex: 1 1 55%;
            font-size: 1rem;
            color: #444;
            line-height: 1.7;
        }
    
        .about-divider {
            width: 2px;
            height: 220px;
            background-color: #ddd;            
            flex-shrink: 0;
        }
    
        .about-image {
            flex: 1 1 35%;
            display: flex;
            justify-content: center;
        }
    
        .about-image img {
            width: 230px;
            height: 230px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #b23a48;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    
        /* ✅ Mobile Optimization */
        @media (max-width: 800px) {
            .about-container {
                flex-direction: column-reverse;
                text-align: center;
                gap: 2rem;
            }
    
            .about-divider {
                display: none;
            }
    
            .about-text {
                text-align: center;
            }
    
            .about-image img {
                width: 200px;
                height: 200px;
            }
        }
 


.services {
    background-color: #F8F6F3;
    padding: 5rem 2rem;
    text-align: center;
}

.services h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    color: #7A1F2D;
    margin-bottom: 0.75rem;
}

.services-intro {
    color: #5A4E4D;
    max-width: 750px;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.ruby-header {
    color: #7A1F2D;
    font-family: 'Playfair Display', serif;
    border-bottom: 2px solid #D4AF37;
    display: inline-block;
    margin-bottom: 1.5rem;
    padding-bottom: 0.4rem;
    font-size: 1.5rem;
}

.services-group {
    margin-bottom: 3.5rem;
    text-align: left;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.service-item {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}

.service-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.service-item h4 {
    font-family: 'Montserrat', sans-serif;
    color: #2B2B2B;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.service-item p {
    color: #5A4E4D;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.service-item ul {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: #5A4E4D;
}

.price {
    font-weight: 600;
    color: #7A1F2D;
    margin-top: 0.5rem;
}

.coming-soon {
    opacity: 0.85;
    font-style: italic;
    text-align: center;
}
 

    footer {
        text-align: center;
        padding: 2rem;
        font-size: 0.9rem;
        color: var(--charcoal);
    }

        footer a,
        .modal-content a {
            color: var(--ruby);
            text-decoration: none;
            font-weight: 500;
        }
    
        footer a:hover,
        .modal-content a:hover {
            text-decoration: underline;
            color: var(--champagne);
        }

    a.policy-link {
        color: var(--ruby);
        text-decoration: underline;
        cursor: pointer;
    }

    /* Modal for policies */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .modal-content {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        max-width: 600px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .close {
        float: right;
        cursor: pointer;
        font-weight: bold;
    }

    .mailerlite iframe {
        width: 100%;
        border: none;
        height: 400px;
    }

        .contact-link {
            color: black;
            text-decoration: none;
        }
    
        .contact-link:hover {
            text-decoration: underline;
            color: var(--ruby);
        }



                .calendly {
                    background: white;
                    margin: 2rem auto;
                    border-radius: 12px;
                    padding: 3rem;
                    text-align: center;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                }
        
                .calendly h2 {
                    font-family: 'Playfair Display', serif;
                    color: var(--ruby);
                    margin-bottom: 1rem;
                                font-size: 2.1rem;
                }
        
                .calendly p {
                    color: var(--charcoal);
                    max-width: 600px;
                    margin: 0 auto 2rem;
                    line-height: 1.6;
                }


                .calendly-btn {
                    display: inline-block;
                    background: var(--ruby);
                    color: white;
                    padding: 1rem 2.5rem;
                    border-radius: 40px;
                    font-size: 1rem;
                    text-decoration: none;
                    text-transform: none;
                    letter-spacing: 0.3px;
                    /* optional, helps define boldness */
                    transition: all 0.3s ease;
                    -webkit-font-smoothing: antialiased;
                    /* smoother bold rendering */
                    -webkit-text-stroke: 0.2px transparent;
                    /* forces render on iOS */
                    font-weight: 700;
                }
        
                .calendly-btn:hover {
                    background: var(--champagne);
                    color: var(--charcoal);
                    transform: translateY(-2px);
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
                }
        
                .calendly-btn:active {
                    transform: scale(0.97);
                }

                @media (max-width: 768px) {
                    .calendly-btn {
                        font-weight: 800 !important;
                        -webkit-font-smoothing: unset !important;
                        -webkit-text-stroke: 0.3px transparent;
                        text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
                    }
                }


#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--ruby);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

#scrollTopBtn:hover {
    background-color: var(--champagne);
    color: var(--charcoal);
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
}