/* ======================= Basic Setup & Variables ======================= */
:root {
    --color-dark-purple: #392F5A;
    --color-pink: #F092DD;
    --color-light-pink: #FFAFF0;
    --color-white: #FFFFFF;
    --color-light-gray: #f4f4f4;
    --color-text: #4a4a4a;
    
    --font-primary: 'Poppins', sans-serif;
    
    --transition-speed: 300ms;
}

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

html {
    scroll-behavior: smooth;
}

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

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4 {
    color: var(--color-dark-purple);
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }

section {
    padding: 6rem 0;
    overflow: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.full-width-section {
    padding-left: 0;
    padding-right: 0;
}
.full-width-section > .container {
    width: 100%;
    padding: 0 5%;
}

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-speed) ease-in-out;
}

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

.btn-primary:hover {
    background-color: transparent;
    color: var(--color-pink);
    transform: translateY(-3px);
}

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

.btn-secondary:hover {
    background-color: var(--color-dark-purple);
    color: var(--color-white);
    transform: translateY(-3px);
}

/* ======================= Header ======================= */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    transition: all var(--transition-speed) ease;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark-purple);
    text-decoration: none;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a {
    color: var(--color-dark-purple);
    text-decoration: none;
    padding: 0.5rem 1rem;
    position: relative;
    font-weight: 400;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-pink);
    transition: all var(--transition-speed) ease;
    transform: translateX(-50%);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 60%;
}

.nav-toggle { display: none; } /* For mobile */

/* ======================= Section 1: Hero ======================= */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(rgba(57, 47, 90, 0.7), rgba(57, 47, 90, 0.5)), url('images/hero-bg.webp') no-repeat center center/cover;
    padding: 0;
}

.hero-content {
    max-width: 800px;
}
.hero-content h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: 300;
}

/* ======================= Section 2: Welcome / About ======================= */
.welcome-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}
.welcome-image-stack {
    position: relative;
    height: 500px;
}
.welcome-image-stack img {
    position: absolute;
    width: 80%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.img-back {
    top: 0;
    left: 0;
}
.img-front {
    bottom: 0;
    right: 0;
}
.welcome-text h2 {
    margin-bottom: 1rem;
}
.welcome-text p {
    margin-bottom: 1.5rem;
}

/* ======================= Section 3: Featured Services ======================= */
/* =================================================================== */
/* =================== SERVICES TABS COMPONENT STYLES ================ */
/* =================================================================== */

#services {
    background-color: var(--color-light-gray);
}

.tabs-container {
    max-width: 900px;
    margin: 3rem auto 0;
}

/* Tab Navigation Styling */
.tabs-nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2rem;
    gap: 1rem;
}

.tab-btn {
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    position: relative;
    transition: color 0.3s ease;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Sits on top of the container's border */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-pink);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.tab-btn:hover {
    color: var(--color-dark-purple);
}

.tab-btn.active {
    color: var(--color-dark-purple);
}

.tab-btn.active::after {
    transform: scaleX(1);
}

/* Tab Content Styling */
.tabs-content {
    position: relative;
}

.tab-pane {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
    
    /* Animation properties */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

.tab-pane.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* Take up space in the document flow */
    transform: translateY(0);
}

.tab-pane-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.tab-pane-text h3 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

/* Responsive for Tabs */
@media (max-width: 768px) {
    .tabs-nav {
        flex-direction: column;
        border-bottom: none;
    }
    .tab-btn {
        border-bottom: 1px solid #ddd;
    }
    .tab-btn::after {
        height: 100%;
        width: 3px;
        left: 0;
        top: 0;
        transform: scaleY(0);
    }
    .tab-btn.active::after {
        transform: scaleY(1);
    }
    .tab-pane {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .tab-pane-image {
        max-width: 400px;
        margin: 0 auto;
    }
    .tab-pane-text {
        text-align: center;
    }
}

/* ======================= Section 4: Philosophy ======================= */
.parallax-section {
    background: url('images/parallax-bg.webp') no-repeat center center/cover;
    background-attachment: fixed;
    position: relative;
    color: var(--color-white);
    text-align: center;
}
.parallax-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(240, 146, 221, 0.8), rgba(57, 47, 90, 0.8));
}
.philosophy-content {
    position: relative;
    z-index: 2;
}
.philosophy-content blockquote {
    font-size: 2rem;
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto 1rem;
}
.philosophy-content cite {
    font-style: normal;
    font-weight: 600;
}

/* ======================= Section 5: The Experience ======================= */
/* =================================================================== */
/* ============== EXPERIENCE SECTION (REIMAGINED) STYLES ============= */
/* =================================================================== */

#experience-reimagined {
    background-color: #f6f3fa; /* A very light purple-gray */
    padding: 6rem 0;
    overflow: hidden; /* Prevents scrollbars from animation */
}

.experience-container-reimagined {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    align-items: center;
    position: relative;
    min-height: 70vh;
    max-width: 1100px;
    margin: 0 auto;
}

/* The background image container */
.experience-image-bg {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.experience-image-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(250deg, rgba(57, 47, 90, 0.4), transparent 50%);
}

.experience-image-bg img {
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensure it has height on mobile */
    object-fit: cover;
}

/* The overlapping text box */
.experience-text-overlay {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    background: var(--color-white);
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    z-index: 2;
    border-left: 5px solid var(--color-pink);
}

.experience-text-overlay h2 {
    margin-bottom: 1rem;
}
.experience-text-overlay p {
    margin-bottom: 2rem;
}

/* Desktop Layout (where the magic happens) */
@media (min-width: 992px) {
    .experience-container-reimagined {
        grid-template-columns: repeat(12, 1fr); /* Create a 12-column grid */
    }

    .experience-image-bg {
        grid-column: 4 / -1; /* Image starts at column 4 and goes to the end */
        grid-row: 1 / -1;
    }

    .experience-text-overlay {
        grid-column: 1 / 7; /* Text starts at column 1 and spans to column 7 */
        grid-row: 1 / -1;
        align-self: center; /* Vertically centers the text box */
        max-width: 550px; /* Optional: control max width */
    }
}

/* ======================= Section 6: Testimonials ======================= */
#testimonials {
    background: linear-gradient(to right, var(--color-light-pink), #fde5f5);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.glass-effect {
    padding: 2rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}
.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    border: 3px solid var(--color-white);
}
.testimonial-card h4 {
    margin-top: 1rem;
    color: var(--color-dark-purple);
    font-weight: 700;
}

/* ======================= Section 7: Booking CTA ======================= */
#booking-cta {
    background-color: var(--color-dark-purple);
    color: var(--color-white);
    text-align: center;
}
.cta-container h2, .cta-container p {
    color: var(--color-white);
}
.cta-container h2 {
    margin-bottom: 1rem;
}
.cta-container p {
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* =================================================================== */
/* ======================= SPA MENU PAGE STYLES ====================== */
/* =================================================================== */

/* ======================= Section 1: Menu Hero ======================= */
#menu-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(rgba(240, 146, 221, 0.6), rgba(57, 47, 90, 0.7)), url('images/menu-bg.webp') no-repeat center center/cover;
    padding: 6rem 2rem;
}

.menu-hero-content {
    max-width: 700px;
}
.menu-hero-content h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
}
.menu-hero-content p {
    font-size: 1.1rem;
    font-weight: 300;
}

/* ======================= Section 2: Facial Treatments ======================= */
#facials {
    background-color: var(--color-white);
}

.facial-item {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
}

.facial-item:last-child {
    margin-bottom: 0;
}

/* Alternating layout */
.facial-item:nth-child(even) {
    grid-template-columns: 1.5fr 1fr;
}
.facial-item:nth-child(even) .facial-image {
    order: 2;
}

.facial-image img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.facial-description h3 {
    margin-bottom: 1rem;
}

/* ======================= Section 3: Massage Therapies ======================= */
/* =================================================================== */
/* ============= MASSAGES SECTION (REIMAGINED SLIDER) ================ */
/* =================================================================== */

#massages-reimagined {
    position: relative;
    padding: 6rem 0;
    overflow: hidden; /* Important for the slider effect */
    color: var(--color-white);
}

/* Dynamic Backgrounds */
.slider-backgrounds {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.slider-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-bg.active {
    opacity: 1;
}

/* Add a dark overlay for text readability */
.slider-backgrounds::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(57, 47, 90, 0.85), rgba(57, 47, 90, 0.7));
}

/* Make section titles white on the dark background */
#massages-reimagined .section-title .light-text {
    color: var(--color-white);
}

/* Slider Itself */
.massage-slider-container {
    margin-top: 3rem;
}

.massage-slider-wrapper {
    display: flex;
    align-items: center; /* Vertically align cards */
    /* JS will handle the transform */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.massage-slide {
    flex: 0 0 300px; /* Base width for slides */
    margin: 0 1rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    /* Animation properties */
    transform: scale(0.85);
    opacity: 0.6;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.massage-slide.active {
    transform: scale(1);
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.massage-slide h3 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.massage-slide p {
    color: rgba(255, 255, 255, 0.9);
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.massage-details {
    font-weight: 600;
    color: var(--color-dark-purple);
    background: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: inline-block;
    align-self: center;
}

/* Slider Navigation */
.slider-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.slider-arrow {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Responsive for Slider */
@media (max-width: 768px) {
    .massage-slide {
        flex-basis: 75%; /* Make slides wider on mobile */
        margin: 0 0.5rem;
    }
}

/* ======================= Section 4: Body Treatments ======================= */
#body-treatments {
    padding: 0;
    height: 70vh;
    position: relative;
    background-image: url('images/body-bg.webp'); /* new image */
}

.body-treatment-overlay {
    height: 100%;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
}

.body-treatment-content {
    max-width: 500px;
}
.body-treatment-content h2, .body-treatment-content p {
    color: var(--color-dark-purple); /* Text inside glass is dark */
}
.body-treatment-content h2 {
    margin-bottom: 1rem;
}
.body-treatment-content p {
    margin-bottom: 1.5rem;
}


/* ======================= Section 5: Enhancements ======================= */
#enhancements ul {
    list-style: none;
    padding: 0;
    margin: 2rem auto 0;
    max-width: 800px;
    column-count: 2;
    column-gap: 2rem;
}
#enhancements li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 25px;
}
#enhancements li::before {
    content: '✧';
    color: var(--color-pink);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
}


/* ======================= Section 6: Signature Packages ======================= */
#packages {
    background-color: #fef8ff;
}
.packages-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.packages-image img {
    border-radius: 10px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.packages-text h2 {
    font-weight: 300;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.packages-text h3 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}
.packages-text ul {
    list-style: none;
    margin: 1rem 0 2rem;
}
.packages-text li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 0.5rem;
}
.packages-text li::before {
    content: '✓';
    color: var(--color-pink);
    position: absolute;
    left: 0;
}

/* ======================= Section 7: Spa Etiquette & Booking ======================= */
#etiquette {
    background-color: var(--color-light-gray);
}
.etiquette-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
    background: var(--color-white);
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.etiquette-info h2 {
    margin-bottom: 1rem;
}
.etiquette-cta {
    text-align: center;
}
.etiquette-cta h3 {
    margin-bottom: 0.5rem;
}

/* ======================= Responsive for Menu Page ======================= */
@media (max-width: 992px) {
    .facial-item, .facial-item:nth-child(even) {
        grid-template-columns: 1fr;
    }
    .facial-item:nth-child(even) .facial-image {
        order: -1; /* Image always on top */
    }
    .facial-image img {
        height: 300px;
    }
    .packages-container {
        grid-template-columns: 1fr;
    }
    .etiquette-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    #body-treatments {
        height: auto;
        padding: 4rem 0;
    }
    #enhancements ul {
        column-count: 1;
    }
}

/* =================================================================== */
/* ========================= STORY PAGE STYLES ======================= */
/* =================================================================== */

/* ======================= Section 1: Story Hero ======================= */
#story-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(rgba(57, 47, 90, 0.8), rgba(57, 47, 90, 0.6)), url('images/story-bg.webp') no-repeat center center/cover;
    padding: 6rem 2rem;
}

.story-hero-content {
    max-width: 800px;
}
.story-hero-content h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
}
.story-hero-content p {
    font-size: 1.25rem;
    font-weight: 300;
}

/* ======================= Section 2: Founder ======================= */
#founder {
    background: var(--color-white);
}
.founder-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
}
.founder-image img {
    border-radius: 10px;
    box-shadow: -20px 20px 0 var(--color-light-pink);
}
.founder-text h2 {
    margin-bottom: 1rem;
}

/* ======================= Section 3: Philosophy Pillars ======================= */
/* =================================================================== */
/* =========== PHILOSOPHY PILLARS SECTION (REIMAGINED) =============== */
/* =================================================================== */

#philosophy-reimagined {
    background-color: var(--color-light-gray);
}

.pillars-reimagined-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    background: var(--color-white);
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    margin-top: 3rem;
    min-height: 790px;
}

/* Left Panel: Images */
.pillars-image-panel {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.pillar-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.pillar-image.active {
    opacity: 1;
}

/* Right Panel: Content */
.pillars-content-panel {
    display: flex;
    flex-direction: column;
}

.pillars-nav {
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
}

.pillar-nav-item {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 0 1.5rem 2rem;
    text-align: left;
    cursor: pointer;
    position: relative;
    color: var(--color-text);
    transition: background-color 0.3s ease;
}
.pillar-nav-item:hover {
    background-color: #f9f9f9;
}

.pillar-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 60%;
    width: 4px;
    background: var(--color-pink);
    border-radius: 2px;
    transform: scaleY(0) translateY(-50%);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.pillar-nav-item.active::before {
    transform: scaleY(1) translateY(-50%);
}

.pillar-nav-item h3 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    color: var(--color-dark-purple);
}

.pillar-nav-item span {
    font-size: 0.9rem;
    color: #999;
}

.pillars-text-content {
    flex-grow: 1;
    position: relative;
}

.pillar-text {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.pillar-text.active {
    opacity: 1;
    visibility: visible;
}
.pillar-text p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Responsive for Reimagined Pillars */
@media (max-width: 992px) {
    .pillars-reimagined-container {
        grid-template-columns: 1fr;
        padding: 2rem;
        min-height: 1000px;
    }
    .pillars-image-panel {
        min-height: 300px;
    }
}

@media (max-width: 660px) {
    .pillars-reimagined-container {
        grid-template-columns: 1fr;
        padding: 2rem;
        min-height: 1600px;
    }
  
}
/* ======================= Section 4: Sanctuary Design ======================= */
/* =================================================================== */
/* ============= SANCTUARY DESIGN SECTION (REIMAGINED) =============== */
/* =================================================================== */

#sanctuary-reimagined {
    background-color: var(--color-white);
}

.sanctuary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start; /* Align items to the top */
    margin-top: 3rem;
    position: relative;
}

/* Left Panel: Image Viewer */
.sanctuary-image-viewer {
    position: sticky; /* Makes the image stick as you scroll past the text */
    top: 120px; /* Offset from the top (adjust for header height) */
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    max-height: 400px;
    width: 100%;
}

.sanctuary-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 400px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.sanctuary-image.active {
    opacity: 1;
}

/* Right Panel: Content */
.sanctuary-content .intro-paragraph {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    border-left: 3px solid var(--color-light-pink);
    padding-left: 1.5rem;
}

.sanctuary-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sanctuary-feature-item {
    padding: 1.5rem;
    border: 1px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: var(--color-white);
    transition: background-color 0.3s ease;
}

.sanctuary-feature-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f3fa;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

.sanctuary-feature-item.active::before {
    transform: translateX(0);
}

.sanctuary-feature-item:hover {
    background-color: #fdfaff;
}

.sanctuary-feature-item h4,
.sanctuary-feature-item p {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.sanctuary-feature-item h4 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: var(--color-dark-purple);
}

.sanctuary-feature-item.active h4 {
    color: var(--color-dark-purple);
}

/* Responsive for Reimagined Sanctuary */
@media (max-width: 992px) {
    .sanctuary-grid {
        grid-template-columns: 1fr;
    }
    .sanctuary-image-viewer {
        position: relative; /* Un-stick the image on mobile */
        top: 0;
        margin-bottom: 2rem;
    }
}

/* ======================= Section 5: The Healers ======================= */
#team {
    padding: 0;
    position: relative;
    background-image: url('images/team-bg.webp'); /* Using an existing good image */
    background-attachment: fixed;
}
.team-overlay {
    background: rgba(57, 47, 90, 0.85);
    padding: 8rem 0;
    color: var(--color-white);
}
.team-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.team-content h2, .team-content p {
    color: var(--color-white);
}
.team-content h2 {
    margin-bottom: 1rem;
}

/* ======================= Section 6: Commitment to Nature ======================= */
#commitment {
    background-color: #f6fbf8; /* A light green tint */
}
.commitment-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}
.commitment-image img {
    border-radius: 10px;
    object-fit: cover;
    height: 100%;
}
.commitment-text h2 {
    margin-bottom: 1rem;
}
.commitment-list {
    list-style: none;
    margin-top: 1.5rem;
}
.commitment-list li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 1rem;
}
.commitment-list li::before {
    content: '🌿'; /* Leaf emoji */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
}

/* ======================= Section 7: Invitation ======================= */
#invitation {
    background-color: var(--color-dark-purple);
    color: var(--color-white);
    text-align: center;
}
.invitation-container h2, .invitation-container p {
    color: var(--color-white);
}
.invitation-container h2 {
    margin-bottom: 1rem;
}
.invitation-container p {
    max-width: 700px;
    margin: 0 auto 2rem;
}
/* Re-style button for light on dark */
#invitation .btn-primary {
    background-color: var(--color-white);
    color: var(--color-dark-purple);
    border-color: var(--color-white);
}
#invitation .btn-primary:hover {
    background-color: transparent;
    color: var(--color-white);
}


/* ======================= Responsive for Story Page ======================= */
@media (max-width: 992px) {
    .founder-container, .design-container, .commitment-container {
        grid-template-columns: 1fr;
    }
    .founder-image {
        margin: 0 auto;
        max-width: 400px;
    }
    .design-container {
        gap: 2rem;
    }
    .design-gallery {
        height: auto;
    }
    /* Stack sanctuary images on mobile */
    .gallery-img-1, .gallery-img-2, .gallery-img-3 {
        grid-column: auto;
        grid-row: auto;
    }
    .commitment-container {
        text-align: center;
    }
    .commitment-image {
        order: -1;
        margin: 0 auto;
        max-width: 400px;
    }
    .commitment-list li {
        text-align: left;
    }
}

/* =================================================================== */
/* ======================== PACKAGES PAGE STYLES ===================== */
/* =================================================================== */

/* ======================= Section 1: Packages Hero ======================= */
#packages-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(rgba(240, 146, 221, 0.5), rgba(57, 47, 90, 0.6)), url('images/pack-bg.webp') no-repeat center center/cover;
    padding: 6rem 2rem;
}
.packages-hero-content {
    max-width: 800px;
}
.packages-hero-content h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
}
.packages-hero-content p {
    font-size: 1.2rem;
    font-weight: 300;
}

/* ======================= Section 2: Signature Packages ======================= */
#signature-packages {
    background-color: var(--color-light-gray);
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}
.package-card {
    background-color: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.package-image {
    position: relative;
}
.package-duration {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(57, 47, 90, 0.8);
    color: var(--color-white);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}
.package-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.package-content h3 {
    margin-bottom: 0.5rem;
}
.package-content p {
    flex-grow: 1;
    margin-bottom: 1rem;
}
.btn-link {
    color: var(--color-pink);
    text-decoration: none;
    font-weight: 600;
    align-self: flex-start;
}
.btn-link:hover {
    text-decoration: underline;
}

/* ======================= Section 3: Featured Package ======================= */
.featured-package-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}
.featured-package-image img {
    border-radius: 10px;
}
.section-subtitle {
    color: var(--color-pink);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
}
.featured-package-text h3 {
    margin-bottom: 1rem;
}
.inclusions-list {
    list-style: none;
    margin: 1.5rem 0 2rem;
}
.inclusions-list li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}
.inclusions-list li span {
    color: var(--color-pink);
    font-weight: 600;
    margin-right: 0.8rem;
    font-size: 1.2rem;
}

/* ======================= Section 4: The Guest Journey ======================= */
#package-journey {
    background-color: #fef8ff;
}
.journey-timeline {
    position: relative;
    max-width: 800px;
    margin: 3rem auto 0;
}
.journey-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
    width: 2px;
    background: var(--color-light-pink);
}
.journey-step {
    position: relative;
    margin-bottom: 3rem;
    padding-left: 100px;
}
.journey-step:last-child {
    margin-bottom: 0;
}
.journey-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-pink);
    background: var(--color-white);
}
.journey-icon img {
    width: 100%; height: 100%; object-fit: cover;
}
.journey-content h3 {
    margin-bottom: 0.5rem;
}


.seasonal-overlay {
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align content to the right */
    padding: 8rem 0;
    width: 100%; height: 100%;
}
.seasonal-content {
    max-width: 500px;
}
.seasonal-content h2 {
    color: var(--color-dark-purple);
}

/* ======================= Section 6: Bespoke Journeys ======================= */
.bespoke-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.bespoke-builder {
    background: var(--color-light-gray);
    padding: 2rem;
    border-radius: 10px;
    border-left: 5px solid var(--color-pink);
}
.bespoke-builder h3 {
    margin-bottom: 1rem;
}
.bespoke-builder ul {
    list-style: none;
    margin-bottom: 1.5rem;
}
.bespoke-builder li {
    padding: 0.5rem 0;
    border-bottom: 1px dotted #ccc;
}
.bespoke-builder img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin-top: 1rem;
}


/* ======================= Section 7: Booking Consultation ======================= */
#booking-consultation {
    background-color: var(--color-light-gray);
}
.consultation-container {
    text-align: center;
}
.consultation-container p {
    max-width: 600px;
    margin: 1rem auto 2rem;
}
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ======================= Responsive for Packages Page ======================= */
@media (max-width: 992px) {
    .featured-package-container, .bespoke-container {
        grid-template-columns: 1fr;
    }
    .featured-package-image {
        margin: 0 auto;
        max-width: 500px;
    }
    .seasonal-overlay {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .journey-timeline::before {
        left: 50%;
        margin-left: -1px;
    }
    .journey-step {
        padding-left: 0;
        text-align: center;
    }
    .journey-icon {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 1rem;
    }
}

/* =================================================================== */
/* ========================== GIFTS PAGE STYLES ====================== */
/* =================================================================== */

/* ======================= Section 1: Gifts Hero ======================= */
#gifts-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(rgba(57, 47, 90, 0.6), rgba(240, 146, 221, 0.4)), url('images/gifts-bg.webp') no-repeat center center/cover;
    padding: 6rem 2rem;
}
.gifts-hero-content {
    max-width: 700px;
}
.gifts-hero-content h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
}
.gifts-hero-content p {
    font-size: 1.2rem;
    font-weight: 300;
}

/* ======================= Section 2: Gift Cards ======================= */
.gift-cards-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}
.gift-card-visuals {
    position: relative;
    height: 450px;
}
.gift-card-visuals img {
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    position: absolute;
}
.gift-box-image {
    top: 0;
    left: 0;
    width: 80%;
    z-index: 1;
}
.gift-card-image {
    bottom: 0;
    right: 0;
    width: 60%;
    z-index: 2;
    border: 5px solid white;
}
.gift-card-info h2 {
    margin-bottom: 1rem;
}
.amount-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.amount-selector button {
    padding: 0.7rem 1.5rem;
    border: 1px solid #ccc;
    background: var(--color-white);
    border-radius: 30px;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}
.amount-selector button:hover, .amount-selector button:focus {
    background: var(--color-pink);
    color: var(--color-white);
    border-color: var(--color-pink);
}

/* ======================= Section 3: Curated Gift Experiences ======================= */
#curated-gifts {
    background: var(--color-light-gray);
}
.curated-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.gift-package-card {
    background: var(--color-white);
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.gift-package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.gift-package-card img {
    border-radius: 10px;
    margin-bottom: 1.5rem;
}
.gift-package-card h3 {
    margin-bottom: 0.5rem;
}
.gift-package-card p {
    margin-bottom: 1.5rem;
}

/* ======================= Section 4: The Boutique ======================= */
#boutique {
    background-image: url('images/boutique-bg.webp'); /* products flat lay */
}
.boutique-overlay {
    background: rgba(255, 255, 255, 0.7);
    padding: 8rem 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
}
.boutique-content {
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
}
.boutique-content p {
    margin-bottom: 1.5rem;
}

/* ======================= Section 5: Corporate Wellness Gifting ======================= */
/* =================================================================== */
/* ============= CORPORATE GIFTING SECTION (REIMAGINED) ============== */
/* =================================================================== */

#corporate-reimagined {
    background: var(--color-light-gray);
    overflow: hidden; /* Prevent scrollbars during animation */
}

.corporate-grid-reimagined {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Left Panel: Content */
.corporate-text-reimagined h3 {
    font-size: 2.2rem;
    margin: 0.5rem 0 1rem;
}

.corporate-text-reimagined > p {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

.corporate-benefits-list {
    list-style: none;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.benefit-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-pink);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.benefit-text h4 {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.benefit-text p {
    line-height: 1.6;
}

/* Right Panel: Image Stack */
.corporate-image-stack {
    position: relative;
    min-height: 550px; /* Give the container height */
}

.image-frame {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    padding: 0.75rem; /* Creates the inner border effect */
    background: var(--color-white);
    box-shadow: 0 20px 50px rgba(57, 47, 90, 0.15);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.image-frame:hover {
    transform: scale(1.03);
    z-index: 15; /* Ensure hovered image is on top */
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.image-frame.top {
    width: 65%;
    height: 70%;
    top: 0;
    left: 0;
    z-index: 10;
}

.image-frame.bottom {
    width: 65%;
    height: 70%;
    bottom: 0;
    right: 0;
    z-index: 12; /* Sits on top of the other image */
}

/* Responsive for Reimagined Corporate Section */
@media (max-width: 992px) {
    .corporate-grid-reimagined {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .corporate-text-reimagined {
        text-align: center;
    }
    .benefit-item {
        text-align: left; /* Keep benefit text left-aligned */
    }
    .corporate-image-stack {
        margin-top: 2rem;
        min-height: 450px;
    }
}
/* ======================= Section 6: How It Works ======================= */
#gifting-process {
    background-color: #fef8ff;
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
    text-align: center;
}
.process-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--color-white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    /* ADD THESE LINES */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-pink); /* This will color the SVG */
    background-color: var(--color-white); /* Ensures a solid background */
}

.process-step h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* ======================= Section 7: Gift Testimonial CTA ======================= */
#gift-testimonial {
    background-color: var(--color-dark-purple);
    color: var(--color-white);
    text-align: center;
}
.testimonial-cta-container blockquote {
    color: var(--color-white);
    font-size: 1.8rem;
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    border-left: 3px solid var(--color-pink);
    padding-left: 2rem;
    text-align: left;
}
.testimonial-cta-container cite {
    display: block;
    margin: 1rem 0 2.5rem;
    font-style: normal;
    font-weight: 600;
    color: var(--color-light-pink);
    text-align: right;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ======================= Responsive for Gifts Page ======================= */
@media (max-width: 992px) {
    .gift-cards-container, .corporate-container {
        grid-template-columns: 1fr;
    }
    .gift-card-visuals {
        max-width: 500px;
        margin: 0 auto 2rem;
        height: 350px;
        display: none;
    }
    .corporate-image {
        order: -1;
        margin: 0 auto;
        max-width: 500px;
    }
}

/* =================================================================== */
/* ====================== HEALTH & SAFETY PAGE STYLES ================ */
/* =================================================================== */

/* ======================= Section 1: Health Hero ======================= */
#health-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(rgba(57, 47, 90, 0.6), rgba(57, 47, 90, 0.5)), url('images/health-bg.webp') no-repeat center center/cover;
    padding: 6rem 2rem;
}
.health-hero-content {
    max-width: 800px;
}
.health-hero-content h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
}
.health-hero-content p {
    font-size: 1.2rem;
    font-weight: 300;
}

/* ======================= Section 2: Science of Relaxation ======================= */
/* =================================================================== */
/* =========== SCIENCE OF RELAXATION SECTION (REIMAGINED) ============ */
/* =================================================================== */

#science-reimagined {
    background-color: #f9f7fc; /* A very light, calming purple */
    overflow: hidden;
}

.science-grid-reimagined {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr; /* text-image-text ratio */
    gap: 3rem;
    align-items: center;
}

/* Kicker/Eyebrow Text Styling */
.science-kicker {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-pink);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* Center Image Styling */
.science-image-center {
    border-radius: 12px;
    overflow: hidden;
    /* This clip-path creates a subtle, elegant arch shape */
    clip-path: inset(0 0 0 0 round 12px);
    box-shadow: 0 20px 50px rgba(57, 47, 90, 0.1);
    transition: transform 0.4s ease;
}
.science-image-center:hover {
    transform: scale(1.03);
}

.science-image-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right Text Panel Styling */
.science-text-benefits h3 {
    margin-bottom: 1rem;
}

.science-benefits-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.science-benefits-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 1rem;
}

.science-benefits-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-pink);
    font-weight: 600;
}

/* Responsive for Reimagined Science Section */
@media (max-width: 992px) {
    .science-grid-reimagined {
        grid-template-columns: 1fr; /* Stack the columns */
        gap: 2.5rem;
    }

    .science-image-center {
        order: 1; /* Image appears after the intro text */
        max-width: 400px;
        margin: 0 auto;
    }

    .science-text-intro {
        order: 0;
        text-align: center;
    }

    .science-text-benefits {
        order: 2;
        text-align: center;
    }

    .science-benefits-list li {
        text-align: left; /* Keep list items left-aligned for readability */
        display: inline-block; /* Helps with centering the list block */
    }
}

/* ======================= Section 3: Commitment to Hygiene ======================= */
#hygiene {
    background-color: var(--color-light-gray);
}
.hygiene-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.hygiene-item {
    background: var(--color-white);
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: 10px;
    border-bottom: 4px solid var(--color-light-pink);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.hygiene-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    object-fit: cover;
}
.hygiene-item h3 {
    margin-bottom: 0.5rem;
}

/* ======================= Section 4: Mind-Body Connection ======================= */
#mind-body {
    background-image: url('images/mind-bg.webp'); /* new image */
    color: var(--color-white);
    text-align: center;
}
#mind-body .mind-body-overlay {
    background: rgba(57, 47, 90, 0.85);
    padding: 6rem 0;
    width: 100%; height: 100%;
}
#mind-body blockquote {
    font-size: 2.2rem;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto 1rem;
}
#mind-body cite {
    font-style: normal;
    font-weight: 600;
}


/* ======================= Section 5: Natural Ingredients ======================= */
/* =================================================================== */
/* ============= INGREDIENTS SECTION (REIMAGINED) ==================== */
/* =================================================================== */

#ingredients-reimagined {
    background-color: var(--color-white);
}

.ingredients-grid-reimagined {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    min-height: 500px;
}

.ingredient-feature {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    color: var(--color-white);
    flex-grow: 1; /* For the expanding effect */
    transition: flex-grow 0.6s cubic-bezier(0.19, 1, 0.22, 1), 
                filter 0.6s ease, opacity 0.6s ease;
}

/* The background image and its overlay */
.ingredient-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.ingredient-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(57, 47, 90, 0.85) 0%, transparent 70%);
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* The main content container */
.ingredient-content {
    position: relative; /* Sits on top of the background */
    z-index: 2;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ingredient-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ingredient-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-header h3 {
    color: var(--color-white);
    font-size: 1.5rem;
}

/* The hidden description */
.ingredient-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out 0.1s, 
                margin-top 0.5s ease-out;
}
.ingredient-description p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* --- The Interactive Spotlight Effect --- */

/* On hover/active, the card expands and description appears */
.ingredient-feature:hover,
.ingredient-feature.active {
    flex-grow: 2; /* Make the active card wider */
}
.ingredient-feature:hover .ingredient-bg,
.ingredient-feature.active .ingredient-bg {
    transform: scale(1.05);
}
.ingredient-feature:hover .ingredient-description,
.ingredient-feature.active .ingredient-description {
    max-height: 150px; /* Adjust if your text is longer */
    opacity: 1;
    margin-top: 1rem;
}

/* When the container is hovered, fade out the non-hovered items */
.ingredients-grid-reimagined:hover .ingredient-feature:not(:hover) {
    flex-grow: 0.5; /* Make other cards shrink */
    filter: brightness(0.7);
}
.ingredients-grid-reimagined .ingredient-feature.active:not(:hover) {
    flex-grow: 2;
}

/* Responsive */
@media (max-width: 992px) {
    .ingredients-grid-reimagined {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ingredient-feature,
    .ingredients-grid-reimagined:hover .ingredient-feature:not(:hover),
    .ingredient-feature:hover {
        flex-grow: 1; /* Disable the flex-grow effect on mobile */
    }
    /* On mobile, show the description by default for clarity */
    .ingredient-description {
        max-height: 150px;
        opacity: 1;
        margin-top: 1rem;
    }
}
/* ======================= Section 6: Guest Wellness Guide ======================= */
#guest-guide {
    background-color: #f6fbf8; /* Light green tint */
}
.guide-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}
.guide-image img {
    border-radius: 10px;
}
.guide-text h2 {
    margin-bottom: 1rem;
}
.guide-text ul {
    list-style: none;
    margin-top: 1.5rem;
}
.guide-text li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 1rem;
}
.guide-text li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-pink);
}

/* ======================= Section 7: Health FAQs ======================= */
#health-faq {
    background-color: var(--color-light-gray);
}
.faq-container {
    max-width: 800px;
    margin: 2rem auto 0;
}
.faq-item {
    border-bottom: 1px solid #ddd;
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem 0;
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dark-purple);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question::after {
    content: '+';
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-pink);
    transition: transform var(--transition-speed) ease;
}
.faq-item.active .faq-question::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}
.faq-answer p {
    padding-bottom: 1.5rem;
}

/* ======================= Responsive for Health Page ======================= */
@media (max-width: 992px) {
    .science-container, .guide-container {
        grid-template-columns: 1fr;
    }
    .science-image, .guide-image {
        order: -1;
        margin: 0 auto;
        max-width: 500px;
    }
}

/* =================================================================== */
/* ======================== GALLERY PAGE STYLES ====================== */
/* =================================================================== */

/* ======================= Section 1: Gallery Hero ======================= */
#gallery-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(rgba(57, 47, 90, 0.6), rgba(57, 47, 90, 0.5)), url('images/gallery-bg.webp') no-repeat center center/cover;
    padding: 6rem 2rem;
}
.gallery-hero-content {
    max-width: 800px;
}
.gallery-hero-content h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
}
.gallery-hero-content p {
    font-size: 1.2rem;
    font-weight: 300;
}

/* ======================= Section 2: The Space ======================= */
#the-space {
    background-color: var(--color-light-gray);
}
.space-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 1.5rem;
    margin-top: 3rem;
}
.grid-item {
    overflow: hidden;
    border-radius: 10px;
}
.grid-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.grid-item img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.grid-item.tall {
    grid-row: span 2;
}
.grid-item.wide {
    grid-column: span 2;
}

/* ======================= Section 3: Treatments in Motion (Slider) ======================= */
.slider-container {
    position: relative;
    max-width: 1200px;
    margin: 3rem auto 0;
    overflow: hidden;
    border-radius: 10px;
}
.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slide {
    min-width: 100%;
    box-sizing: border-box;
}
.slide img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    color: var(--color-dark-purple);
    cursor: pointer;
    transition: background 0.3s ease;
}
.slider-btn:hover {
    background: var(--color-white);
}
.slider-btn.prev { left: 1rem; }
.slider-btn.next { right: 1rem; }

/* ======================= Section 4: Atmosphere Quote ======================= */
#gallery-quote {
    background-image: url('images/parallax-bg.webp'); /* existing parallax */
    color: var(--color-white);
    text-align: center;
}
.gallery-quote-overlay {
    background: rgba(240, 146, 221, 0.7);
    padding: 6rem 0;
}
#gallery-quote p {
    font-size: 2.2rem;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto 1rem;
    font-style: italic;
}
#gallery-quote cite {
    font-style: normal;
    font-weight: 600;
}

/* ======================= Section 5: Relaxation Spaces ======================= */
#relaxation-spaces {
    background: url('images/space-bg.webp') no-repeat center center/cover;
    min-height: 70vh;
    padding: 6rem 0;
    display: flex;
    align-items: center;
}
.relaxation-container {
    display: flex;
    justify-content: flex-end;
}
.relaxation-text-box {
    max-width: 500px;
    color: var(--color-dark-purple); /* For readability on glass */
}
.relaxation-text-box h2 {
    margin-bottom: 1rem;
}

/* ======================= Section 6: The Finer Details ======================= */
#finer-details {
    background-color: var(--color-light-gray);
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.detail-item {
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.detail-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.detail-item h3, .detail-item p {
    padding: 0 1.5rem;
}
.detail-item h3 { margin: 1.5rem 0 0.5rem; }
.detail-item p { padding-bottom: 1.5rem; }

/* ======================= Section 7: Invitation CTA ======================= */
#gallery-cta {
    background-color: var(--color-dark-purple);
}
#gallery-cta .cta-container {
    text-align: center;
}
#gallery-cta h2, #gallery-cta p {
    color: var(--color-white);
}
#gallery-cta p {
    max-width: 700px;
    margin: 1rem auto 2rem;
}

/* ======================= Responsive for Gallery Page ======================= */
@media (max-width: 992px) {
    .space-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .grid-item.tall, .grid-item.wide {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .space-gallery-grid {
        grid-template-columns: 1fr;
    }
    .relaxation-container {
        justify-content: center;
    }
    .relaxation-text-box {
        text-align: center;
    }
}

/* ======================= Footer ======================= */
.main-footer {
    background-color: var(--color-light-gray);
    padding: 4rem 0 2rem;
    color: var(--color-text);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-col h4 {
    margin-bottom: 1rem;
}
.footer-col ul {
    list-style: none;
}
.footer-col li {
    margin-bottom: 0.5rem;
}
.footer-col a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}
.footer-col a:hover {
    color: var(--color-pink);
}
.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    margin-right: 0.5rem;
}
.footer-bottom {
    text-align: center;
    border-top: 1px solid #ddd;
    padding-top: 2rem;
    font-size: 0.9rem;
}

/* ======================= Scroll Animations ======================= */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in {
    opacity: 0;
}
.fade-in-up {
    transform: translateY(50px);
}
.slide-in-left {
    transform: translateX(-50px);
}
.slide-in-right {
    transform: translateX(50px);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* ======================= Responsive Design ======================= */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    section { padding: 4rem 0; }

    .welcome-container, .experience-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .welcome-image-stack {
        margin: 0 auto;
        max-width: 400px;
        height: 450px;
        display: none;
    }
    .experience-container .experience-image {
        order: -1; /* Move image to top on mobile */
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: var(--color-dark-purple);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        padding-top: 5rem;
    }
    .main-nav.active {
        transform: translateX(0);
    }
    .main-nav ul {
        flex-direction: column;
        align-items: center;
    }
    .main-nav a {
        color: var(--color-white);
        font-size: 1.5rem;
        display: block;
        padding: 1rem;
    }
    .nav-toggle {
        display: block;
        position: relative;
        z-index: 1001;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .hamburger, .hamburger::before, .hamburger::after {
        content: '';
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--color-dark-purple);
        transition: all 0.3s ease-in-out;
    }
    .hamburger::before {
        transform: translateY(-8px);
    }
    .hamburger::after {
        transform: translateY(8px);
    }
    .nav-open .hamburger {
        background-color: transparent;
    }
    .nav-open .hamburger{
        background-color: transparent; /* Change to white when menu is open */
    }
    .nav-open .hamburger::before {
        transform: rotate(45deg);
        background-color: #fff;
    }
    .nav-open .hamburger::after {
        transform: rotate(-45deg);
        background-color: #fff;
    }
}

/* =================================================================== */
/* ======================== LEGAL PAGES STYLES ======================= */
/* =================================================================== */

.legal-hero {
    padding: 6rem 0 4rem;
    background-color: var(--color-light-gray);
    text-align: center;
    margin-top: 60px; /* Adjust based on your header height */
}

.legal-page-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.legal-page-subtitle {
    font-size: 1.2rem;
    color: var(--color-text);
    max-width: 600px;
    margin: 0 auto;
}

.legal-content {
    padding: 4rem 0;
}

.legal-content-container {
    max-width: 800px; /* Optimal width for readability */
}

.legal-content-container article {
    margin-bottom: 3rem;
}

.legal-content-container h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-light-pink);
}

.legal-content-container p, 
.legal-content-container li {
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-content-container ul {
    list-style: disc;
    padding-left: 2rem;
}

.last-updated {
    font-style: italic;
    color: #888;
    margin-bottom: 3rem;
}

/* =================================================================== */
/* ====================== THANK YOU UTILITY PAGE ===================== */
/* =================================================================== */

body.utility-page-body {
    background: linear-gradient(135deg, #fef8ff, var(--color-light-gray));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    font-family: var(--font-primary);
}

.thank-you-main {
    width: 100%;
}

.thank-you-box {
    max-width: 500px;
    margin: 0 auto;
    background: var(--color-white);
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    text-align: center;
}

.thank-you-box h1 {
    color: var(--color-dark-purple);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.thank-you-box p {
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.thank-you-box .btn {
    margin-top: 1rem;
}

/* --- Elegant Checkmark Animation --- */
.checkmark-svg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--color-light-pink);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 4;
    stroke: var(--color-pink);
    fill: none;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* --- Entrance Animation for the Box --- */
@keyframes fadeInBox {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.thank-you-box.animate-on-load {
    animation: fadeInBox 0.5s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
    opacity: 0; /* Start as invisible */
}