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

body {
    font-family: 'Cagliostro', serif;
    font-size: 1.375rem; /* 22px base (increased from 18px) */
    line-height: 1.6;
    color: #ffd875;
    position: relative; /* Enable absolute positioning for floral decorations */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Paragraphs use Cormorant Garamond font */
p {
    font-family: 'Cormorant Garamond', serif !important;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* Header */
.site-header {
    background-color: #96479d;
    padding: 0 2rem;
    overflow: visible;
    position: relative;
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    position: relative;
}

.nav__title {
    font-size: 2.125rem;
    font-weight: 600;
}

.nav__logo {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.nav__logo img {
    height: 100px;
    width: auto;
    display: block;
}

/* Hamburger menu button - hidden on desktop */
.nav__toggle {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    background-color: #96479d;
    border: 2px solid #ffd875;
    border-radius: 4px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.nav__toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffd875;
    transition: all 0.3s ease;
}

.nav__toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.nav__toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav__toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.nav__links {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav__links a {
    text-decoration: none;
    color: #ffd875;
}

.nav__links a:hover {
    text-decoration: underline;
}

/* Side drawer overlay - hidden on desktop */
.nav__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Don't block clicks when not active */
}

.nav__overlay.active {
    opacity: 1;
    pointer-events: auto; /* Allow clicks when active (to close menu) */
}

/* Side drawer navigation - hidden on desktop */
.nav__drawer {
    display: none;
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-color: #96479d;
    z-index: 1000;
    transition: right 0.3s ease;
    padding: 4rem 2rem 2rem;
    overflow-y: auto;
}

.nav__drawer.active {
    right: 0;
}

.nav__drawer .nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.nav__drawer .nav__links a {
    font-size: 1.25rem;
    display: block;
    width: 100%;
}

/* Main Content */
.main-content {
    min-height: calc(100vh - 200px);
    position: relative;
    overflow: hidden; /* Contain floating elements */
}

/* Floating Floral Decorations - Attached to sections */
.floral-decorations {
    display: none; /* Container no longer used, flowers are attached to sections */
}

.floral-sticker {
    position: absolute;
    opacity: 0.9;
    width: 15vw; /* Use viewport width for responsive sizing */
    height: 15vw;
    max-width: 280px; /* Cap maximum size */
    max-height: 280px;
    min-width: 150px; /* Cap minimum size */
    min-height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: float 70s ease-in-out infinite;
    pointer-events: none;
    /* Position in margins, away from content */
    z-index: 1; /* Below content (z-index: 3) and wave dividers (z-index: 10) */
}

/* Different sizes for variety - larger to fill margins while staying within bounds */
.floral-sticker--small {
    width: 12vw;
    height: 12vw;
    max-width: 200px;
    max-height: 200px;
    min-width: 120px;
    min-height: 120px;
    opacity: 0.9;
    top: 770px;
}

.floral-sticker--medium {
    width: 15vw;
    height: 15vw;
    max-width: 240px;
    max-height: 240px;
    min-width: 150px;
    min-height: 150px;
    opacity: 0.9;
}

.floral-sticker--large {
    width: 18vw;
    height: 18vw;
    max-width: 280px;
    max-height: 280px;
    min-width: 180px;
    min-height: 180px;
    opacity: 0.9;
    animation: float-rotate 70s ease-in-out infinite;
}

/* Floating animation (no rotation) */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -15px);
    }
}

/* Floating animation with rotation for large stickers */
@keyframes float-rotate {
    0%, 100% {
        transform: rotate(549deg) translate(0, 0);
    }
    50% {
        transform: rotate(549deg) translate(0, -15px);
    }
}


/* Staggered animation delays for natural movement */
.floral-sticker:nth-child(1) { animation-delay: 0s; }
.floral-sticker:nth-child(2) { animation-delay: 23s; }
.floral-sticker:nth-child(3) { animation-delay: 46s; }

/* Sections need relative positioning for floral decorations */
.section {
    position: relative;
    z-index: 1; /* Same level as flowers - sections render on top due to DOM order */
}

/* Ensure content stays above decorations */
.section__content,
.hero__content,
.editorial-content {
    position: relative;
    z-index: 3; /* Higher than section (z-index: 2) and flowers (z-index: 1) to ensure text is always on top */
}

/* Reusable Wave Overlay Component */
/* Wave SVG path - single shape used for both top and bottom */
:root {
    --wave-svg-path: "M0,60 L1440,60 L1440,30 Q1200,0 960,30 T480,30 T0,30 Z";
    --wave-height: 60px;
}

/* Top wave overlay - shows background of section above in curved cutout */
.has-waves::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--wave-height);
    background-color: #6b4c93; /* Default: matches purple sections */
    /* Mask shows only the area above the wave curve - curve bites downward into image */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 Q1200,60 960,30 T480,30 T0,30 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 Q1200,60 960,30 T480,30 T0,30 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: top;
    -webkit-mask-position: top;
    z-index: 10;
    pointer-events: none;
}

/* Purple sections (.section) always have purple on top (either from nav on first section, or from previous purple/image section) */
.section.has-waves::before {
    background-color: #6b4c93; /* Purple sections always have purple above */
}

/* First section top wave on any page - shows nav bar color (overrides default purple) */
.hero.has-waves:first-of-type::before,
.section.has-waves:first-of-type::before {
    background-color: #96479d; /* Nav bar color */
}

/* Nav-color sections get purple on top (since they come after purple sections) */
.section--nav-color.has-waves::before {
    background-color: #6b4c93; /* Purple from section above */
}

/* Hidden nav-color section - top wave stays purple to match section above */
.intro-section-hidden.section--nav-color.has-waves::before {
    background-color: #6b4c93 !important; /* Purple to match section above when hidden */
}

/* Visible nav-color section - top wave stays purple to create wave divider with section above */
.intro-section-visible.section--nav-color.has-waves::before {
    background-color: #6b4c93 !important; /* Purple to match section above - creates wave divider */
}

/* Hide top wave divider for intro section (section 2) - keep bottom wave divider */
.main-content > section.section--nav-color.has-waves:nth-of-type(3)::before {
    display: none;
}

/* Image sections (hero-image-section) get purple on top (since they come after purple sections) */
.hero-image-section.has-waves::before {
    background-color: #6b4c93; /* Purple from section above */
}

/* Image section after nav-color section - color depends on nav-color section's visibility */
.section--nav-color.has-waves + .hero-image-section.has-waves::before {
    background-color: #96479d !important; /* Nav-color from section above when visible */
}

/* Image section after hidden nav-color section should show purple on top */
.intro-section-hidden.section--nav-color.has-waves + .hero-image-section.has-waves::before {
    background-color: #6b4c93 !important; /* Purple when nav-color section is hidden */
}

/* Image section after visible nav-color section should show nav-color on top */
.intro-section-visible.section--nav-color.has-waves + .hero-image-section.has-waves::before {
    background-color: #96479d !important; /* Nav-color when nav-color section is visible */
}

/* Image section after nav-color section should show nav-color on top */
.hero-image-benefit.has-waves::before {
    background-color: #96479d !important; /* Nav-color from section above */
}

/* CTA section after nav-color section should show nav-color on top */
.section--nav-color.has-waves + .section--cta.has-waves::before {
    background-color: #96479d !important; /* Nav-color from section above */
}

/* Hide bottom wave for sections that are followed by image sections */
.no-bottom-wave.has-waves::after {
    display: none;
}

/* Sections that come after hero/image sections get the appropriate color */
/* Intro section comes after hero - should show hero image in top wave */
/* Actually, since intro is a purple section, it just needs purple above, which it gets from the default .section rule */

/* Bottom wave overlay - shows background of section below in curved cutout */
.has-waves::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--wave-height);
    background-color: #6b4c93; /* Default: matches purple sections */
    /* Mask shows only the area below the wave curve - curve bites upward into image */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1440,60 L1440,30 Q1200,0 960,30 T480,30 T0,30 L0,60 Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1440,60 L1440,30 Q1200,0 960,30 T480,30 T0,30 L0,60 Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: bottom;
    -webkit-mask-position: bottom;
    z-index: 10;
    pointer-events: none;
}

/* Hide section bottom wave on booking page (footer has its own top wave) - must come after base rule */

/* Image sections (hero-image-section) show purple below (since next section is purple) */
.hero-image-section.has-waves::after {
    background-color: #6b4c93; /* Purple section below */
}

/* Hero section shows purple below */
.hero.has-waves::after {
    background-color: #6b4c93; /* Purple section below */
}

/* Nav-color sections - bottom wave shows nav-color to match image section's top wave */
.section--nav-color.has-waves::after {
    background-color: #96479d; /* Nav-color - matches image section's top wave when followed by image section */
}

/* Nav-color sections followed by purple sections - bottom wave should be purple to match next section */
.section--nav-color.has-waves:has(+ .section.has-waves:not(.section--nav-color):not(.hero-image-section):not(.section--cta))::after {
    background-color: #6b4c93; /* Purple to match the next purple section */
}

/* CTA section with image background shows footer color below */
.section--cta.has-waves::after {
    background-color: #96479d; /* Footer color */
}

/* Hero Section */
.hero {
    padding: 4rem 2rem;
    position: relative;
    z-index: 1; /* Same level as flowers - hero renders on top due to DOM order */
    min-height: 80vh; /* Make hero section taller to show more of the background image */
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0);
    border-image: none;
}

/* Only apply overflow hidden to hero sections that have the background div (not hero-image-section) */
.hero:not(.hero-image-section) {
    overflow: hidden; /* Clip the background element */
}

/* Mirrored background layer - separate div to avoid conflicts with wave dividers */
.hero__background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/Edited/1%20%281%29.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transform: scaleX(-1); /* Mirror horizontally */
    z-index: -1; /* Behind wave dividers (z-index: 10) and content */
    pointer-events: none;
}

/* Hero image sections - full-width background images with more vertical space */
.hero-image-section {
    min-height: 60vh; /* Minimum viewport height for better visibility */
    padding: 8rem 2rem; /* Increased vertical padding */
    background-size: cover;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    overflow: visible; /* Don't clip background images */
}

.hero__content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


/* Hero with editorial flow */
.hero.editorial-section .hero__content {
    max-width: 900px;
    line-height: 1.8;
}

.hero__image {
    width: 350px;
    height: 350px;
    background-color: #e0e0e0;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #d4af37;
    box-sizing: border-box;
    shape-outside: circle(50%);
    margin: 0 2rem 1rem 0;
    float: left;
    position: relative;
    z-index: 5; /* Above floral decorations (z-index: 0) */
}

.hero__image img {
    width: 107%;
    height: 107%;
    object-fit: cover;
    display: block;
    margin: -3.5%;
    transform: none;
}

.hero__heading {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #ffd875;
    font-family: 'Cormorant Garamond', serif !important;
}

.hero__content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #ffd875;
    text-align: justify;
    hyphens: none;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1em;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

.hero__content .hero__tagline,
.editorial-content .hero__tagline,
.hero.editorial-section .hero__content .hero__tagline {
    font-size: 2.25rem;
    font-style: italic;
    color: #ffd875;
    margin-bottom: 1.5rem;
    text-align: center !important;
    hyphens: none;
    font-family: 'Cormorant Garamond', serif !important;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 1), 1px -1px 0 rgba(0, 0, 0, 1), -1px 1px 0 rgba(0, 0, 0, 1), 1px 1px 0 rgba(0, 0, 0, 1), 3px 3px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7) !important;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

.hero__intro {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__intro p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #ffd875;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1em;
}

.hero__text {
    text-align: center;
}

.hero--with-background .hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sections */
.section {
    padding: 4rem 2rem;
    background-color: #6b4c93;
    color: #ffd875;
    position: relative; /* Allows absolute positioning of flowers within */
    overflow: visible; /* Allow flowers to extend slightly beyond if needed */
    margin-bottom: 0; /* Remove any default margin */
}

/* Add padding to sections with waves so content doesn't get covered by wave dividers */
.section.has-waves,
.hero.has-waves,
.editorial-section.has-waves {
    padding-top: calc(4rem + var(--wave-height));
    padding-bottom: calc(4rem + var(--wave-height));
}

.section:nth-child(even) {
    background-color: #6b4c93;
    color: #ffd875;
}

/* Increase height of first section */
.main-content > .section:first-of-type {
    min-height: 80vh;
    padding-top: calc(8rem + var(--wave-height));
    padding-bottom: calc(8rem + var(--wave-height));
}

.section--nav-color {
    background-color: #96479d !important; /* Nav bar color */
    color: #ffd875;
}

.section__content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

/* Editorial Style Layout */
.editorial-section {
    padding: 4rem 2rem;
}

.editorial-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 3rem; /* Increased horizontal padding to create more margin space for larger flowers */
    line-height: 1.8;
    position: relative;
    z-index: 3; /* Above flowers (z-index: 1) - using 3 to ensure proper stacking */
}

.editorial-content h2 {
    margin-bottom: 2rem;
    font-size: 3.5rem;
    color: #ffd875;
    font-family: 'Cormorant Garamond', serif !important;
}

.editorial-content p {
    margin-bottom: 1.5rem;
    color: #ffd875;
    text-align: justify;
    position: relative;
    z-index: 3; /* Above flowers (z-index: 1) - inherit stacking context from parent */
    font-family: 'Cormorant Garamond', serif !important;
    line-height: 1.6;
    letter-spacing: -0.01em;
    font-size: 1em; /* Increased from 0.88em */
}

.editorial-content .text-link {
    color: #ffd875;
    text-decoration: underline;
    font-weight: normal;
    cursor: pointer;
    position: relative;
    z-index: 10000; /* Very high z-index to be above overlay and all other elements */
    touch-action: manipulation; /* Improve mobile touch responsiveness */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
}

.editorial-content .text-link:hover {
    color: #d4af37;
    text-decoration: underline;
}

.intro-section-hidden {
    max-height: 0;
    overflow: hidden; /* Hide content but flowers are absolutely positioned outside */
    opacity: 0;
    transition: max-height 0.6s ease-out, opacity 0.6s ease-out, padding-top 0.6s ease-out, padding-bottom 0.6s ease-out;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
    border: none;
}

/* Flowers should always be visible - they're absolutely positioned relative to section */
.intro-section-hidden .floral-sticker,
.intro-section-visible .floral-sticker {
    opacity: 0.9 !important; /* Always show flowers */
    pointer-events: none; /* Don't interfere with clicks */
}

.intro-section-visible {
    max-height: 5000px; /* Large enough to accommodate content */
    opacity: 1;
    transition: max-height 0.6s ease-in, opacity 0.6s ease-in, padding-top 0.6s ease-in, padding-bottom 0.6s ease-in;
    /* Restore normal padding - will be calculated by .section.has-waves */
}

/* Exclude intro paragraph from the smaller font size - it has its own sizing */
.hero-intro-content p {
    font-size: 1em;
}

/* Hero Intro Content - Redesigned for calm, readable presentation */
.hero-intro-content {
    line-height: 1.6; /* Reduced line spacing */
    letter-spacing: -0.01em; /* Slightly decreased for better flow */
    font-family: 'Cormorant Garamond', serif !important; /* Use Cormorant Garamond font for intro paragraph - override global p rule */
    font-size: 1em; /* Increased from 0.88em */
}

.hero-intro-lead,
.editorial-content .hero-intro-lead {
    font-size: 2rem !important;
    font-style: italic;
    margin-bottom: 2rem;
    font-weight: normal; /* Remove bold */
    color: #ffd875;
    font-family: 'Cormorant Garamond', serif !important; /* Override global p rule */
    text-align: center !important;
    hyphens: none;
}

.hero-intro-paragraph {
    margin-bottom: 2rem;
    font-weight: normal; /* Remove bold */
    color: #ffd875;
    line-height: 1.6; /* Reduced line spacing to match container */
    letter-spacing: -0.01em;
    font-family: 'Cormorant Garamond', serif !important; /* Override global p rule */
    font-size: 1em; /* Match standard paragraph size */
}

.editorial-content ol li {
    margin-bottom: 1.5rem;
}

.editorial-content .editorial-tagline {
    font-size: 2rem;
    font-style: italic;
    color: #ffd875;
    margin-bottom: 1.5rem;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    hyphens: none;
    font-family: 'Cagliostro', serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

.editorial-content .editorial-centered {
    text-align: center !important;
    font-family: 'Cormorant Garamond', serif !important;
}

/* About page paragraph groups */
.about-paragraph-group p {
    margin-bottom: 2rem;
    font-family: 'Cormorant Garamond', serif !important;
    line-height: 1.6;
    letter-spacing: -0.01em;
    font-size: 1em; /* Matches home page editorial content */
}

.editorial-content .editorial-cormorant {
    font-family: 'Cormorant Garamond', serif !important;
}

.editorial-content .editorial-heading-font {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.625rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.editorial-content .editorial-first-words {
    font-size: 1em;
    font-weight: normal; /* Remove bold */
}

.editorial-content .editorial-bold {
    font-size: 1em; /* Same size as normal paragraphs */
    font-style: normal; /* Remove italic */
    font-weight: normal; /* Remove bold */
    color: #ffd875;
    margin-bottom: 1.5rem;
    margin-top: 0;
    font-family: 'Cormorant Garamond', serif !important;
    text-align: center !important;
    hyphens: none;
}

.editorial-content .editorial-quote {
    font-size: 1.5em; /* Split difference between 1em and 2em */
    font-style: italic;
    font-weight: normal;
    color: #ffd875;
    margin-bottom: 2rem;
    margin-top: 0;
    font-family: 'Cormorant Garamond', serif !important;
    text-align: center;
}

.text-medium {
    font-size: 1em !important; /* Standard paragraph text size */
    text-align: justify; /* Justify to fill the space and maintain editorial curves */
    word-spacing: normal; /* Standard word spacing */
    text-justify: inter-word; /* Use word spacing for justification rather than letter spacing */
    letter-spacing: -0.01em; /* Default letter spacing */
    position: relative;
    z-index: 2; /* Below image (z-index: 5) but above background */
}

.text-medium--lead {
    font-size: 1.5em !important; /* Larger font size for "Meet Peyta" */
}

.editorial-image {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #d4af37;
    box-sizing: border-box;
    shape-outside: circle(50%);
    margin: 1rem 2rem 1rem 0;
    position: relative;
    z-index: 5; /* Above floral decorations (z-index: 0) */
}

.editorial-image--left {
    float: left;
    shape-outside: circle(50%);
    transform: scaleX(-1);
}

.editorial-image--right {
    float: right;
    shape-outside: circle(50%);
    margin: 1rem 0 1rem 1.5rem; /* Reduced from 2rem to bring text closer */
}

.editorial-image--right-tight {
    float: right;
    shape-outside: circle(204px at center); /* Account for 400px image + 4px border on each side = 408px total, so 204px radius */
    shape-margin: 2rem; /* Increased space around the shape to prevent text overlap */
    margin: 1rem 0 1rem 1.5rem; /* Margin to prevent text from going behind image */
    position: relative;
    z-index: 5; /* Ensure image stays above text */
}

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

.editorial-image--right img[src="assets/images/Edited/10.jpg"] {
    transform: scaleX(-1);
}

.editorial-image--right-tight img {
    shape-outside: circle(204px at center); /* Apply shape-outside to the image itself */
    shape-margin: 1.5rem; /* Space around the shape */
}

.editorial-cta {
    clear: both;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 3; /* Above wave dividers */
}

.editorial-cta--left {
    clear: none;
    text-align: left;
    float: left;
    margin-top: 2rem;
    margin-right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-family: 'Cormorant Garamond', serif !important;
}

.section h2,
.section--alt h2,
.section--cta h2,
.testimonials h2 {
    color: #ffd875;
    font-family: 'Cormorant Garamond', serif !important;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

.section h3,
.section--alt h3,
.section--cta h3,
.testimonials h3 {
    color: #ffd875;
    font-family: 'Cormorant Garamond', serif !important;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

.section h4,
.section--alt h4,
.section--cta h4,
.testimonials h4 {
    color: #ffd875;
    font-family: 'Cormorant Garamond', serif !important;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

.section p,
.section--alt p,
.section--cta p,
.testimonials p {
    color: #ffd875;
    font-family: 'Cagliostro', serif;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

.section li {
    color: #ffd875;
    position: relative;
    z-index: 2; /* Above flowers (z-index: 1) */
}

/* Editorial flow by default - remove rigid grids */
.section__content {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Override grid for editorial sections */
.editorial-content {
    display: block;
}

/* Sections with images - use editorial flow */
.section__text {
    margin-bottom: 1.5rem;
}

.section__text p {
    text-align: justify;
    hyphens: none;
    margin-bottom: 1.5rem;
}

/* Only apply float to images that exist in editorial sections */
.editorial-section .section__image {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #d4af37;
    box-sizing: border-box;
    shape-outside: circle(50%);
    margin: 1rem 2rem 1rem 0;
    float: left;
    position: relative;
    z-index: 5; /* Above floral decorations (z-index: 0) */
}

.editorial-section.section--alt .section__image {
    float: right;
    margin: 1rem 0 1rem 2rem;
}

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

/* Clear floats after editorial sections - but not if section has waves (they use ::after for waves) */
.editorial-section:not(.has-waves)::after {
    content: "";
    display: table;
    clear: both;
}

/* Hero section with editorial flow */

/* Keep testimonials grid layout and center header/CTA */
.testimonials .section__content {
    max-width: 1200px;
    text-align: center; /* Center the inline-block button */
}

.testimonials h2 {
    text-align: center;
}

.testimonials .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 0 0;
    padding: 0 1.5rem; /* Reduced padding to fit text more snugly */
    white-space: nowrap; /* Prevent text from wrapping */
    line-height: 1; /* Single line height */
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* CTA sections - centered text */
.section--cta .section__content {
    text-align: center;
}

.section--full-width .section__content,
.testimonials .section__content {
    grid-template-columns: 1fr;
}

.section--cta .section__content {
    grid-template-columns: 1fr;
    text-align: center;
}

.section h3 {
    font-size: 2.5rem;
    margin: 2rem 0 1rem 0;
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif !important;
}

.section h3:first-child {
    margin-top: 0;
}

.section h4 {
    font-size: 2rem;
    margin: 1.5rem 0 0.75rem 0;
    font-weight: 500;
    font-family: 'Cormorant Garamond', serif !important;
}

.content-list {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.content-list li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.8;
    color: #ffd875;
}

.content-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4b2177;
    font-weight: bold;
    font-size: 1.625rem;
}

.section__text p {
    margin-bottom: 1rem;
    line-height: 1.8;
    font-family: 'Cagliostro', serif;
}

.section--alt {
    background-color: #6b4c93;
    color: #ffd875;
}

.section--cta {
    text-align: center;
    background-image: url('../images/Edited/9%20%281%29.jpg');
    background-size: cover;
    background-position: center 70%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    color: #ffd875;
    min-height: 50vh; /* Minimum viewport height for better visibility */
    padding: 8rem 2rem calc(4rem + var(--wave-height)); /* Increased vertical padding */
}

/* Overlay for better text readability */
.section--cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(107, 76, 147, 0.3); /* Purple overlay with 30% opacity */
    z-index: 1;
}

.section--cta .section__content {
    position: relative;
    z-index: 2;
}

.section__image {
    width: 100%;
    aspect-ratio: 1;
    background-color: #e0e0e0;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #d4af37;
    box-sizing: border-box;
    position: relative;
    z-index: 5; /* Above floral decorations (z-index: 0) */
}

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

/* Pelvic credit text styling */
.section__image--pelvic-credit {
    overflow: visible !important;
}

.pelvic-image-credit {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #333;
    font-family: 'Overlock', cursive;
    pointer-events: none;
}

.pelvic-image-credit a {
    pointer-events: all;
    text-decoration: underline;
    color: #333;
}

/* Remove bold from text-double (kept for compatibility but no longer bold) */
.text-double {
    font-weight: normal;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem;
    background-color: #4b2177;
    color: #ffd875;
    text-decoration: none;
    border-radius: 50%; /* Creates perfect circle/ellipse */
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
    line-height: 1; /* Single line height */
    box-sizing: border-box;
    height: 3rem; /* Circle height - creates base circle */
    min-width: 3rem; /* Minimum width matches height for circle */
    width: auto; /* Width expands based on content */
    aspect-ratio: auto; /* Allow width to expand beyond height to create oval */
    white-space: nowrap; /* Prevent text wrapping */
    position: relative;
    z-index: 10000; /* Very high z-index to be above overlay (z-index: 999) and all other elements */
    touch-action: manipulation; /* Improve mobile touch responsiveness */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
    cursor: pointer;
}

.btn:hover {
    background-color: #3a1a5f;
}

.btn--large {
    padding: 0 3.5rem;
    font-size: 1.5rem;
    border-radius: 50%; /* Creates perfect circle/ellipse */
    line-height: 1;
    box-sizing: border-box;
    height: 3.5rem; /* Circle height - creates base circle */
    min-width: 3.5rem; /* Minimum width matches height for circle */
    width: auto; /* Width expands based on content */
}

/* Testimonials */
.testimonials {
    background-color: #6b4c93;
    color: #ffd875;
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.testimonial-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 4px;
    color: #ffd875;
}

.testimonial-card blockquote {
    margin: 0 0 1rem 0;
    font-style: italic;
    line-height: 1.8;
    font-family: 'Cormorant Garamond', serif !important;
}

.testimonial-card cite {
    display: block;
    text-align: right;
    font-style: normal;
    color: #ffd875;
    font-size: 1rem;
}

.testimonial-card cite::before {
    content: "— ";
}

/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: 2rem auto 0;
    text-align: left;
}

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

.hidden {
    display: none !important;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #ffd875;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.125rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4b2177;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn {
    width: auto;
    min-width: 3rem;
    margin-top: 0;
    cursor: pointer;
    border: none;
    font-size: 1.125rem;
    border-radius: 50%; /* Creates perfect circle/ellipse */
    height: 3rem;
    padding: 0 2.5rem;
}

.contact-form .btn:hover {
    background-color: #3a1a5f;
}

/* Success Popup */
.success-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.success-popup__content {
    background-color: #6b4c93;
    padding: 3rem;
    border-radius: 8px;
    max-width: 500px;
    text-align: center;
    border: 2px solid #ffd875;
}

.success-popup__content p {
    margin-bottom: 2rem;
    font-size: 1.25rem;
    color: #ffd875;
}

.success-popup__content .btn {
    margin-top: 1rem;
}

/* Calendly Embed */
.calendly-embed {
    margin: 2rem 0;
    width: 100%;
    max-width: 100%;
}

.calendly-inline-widget {
    width: 100%;
    min-width: 320px;
    height: 700px;
    border-radius: 4px;
    overflow: hidden;
}

/* Footer */
.site-footer {
    background-color: #96479d;
    color: #ffd875;
    padding: 2rem;
    padding-top: calc(2rem + var(--wave-height));
    text-align: center;
    position: relative;
}

/* Footer top wave - transitions from last section */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--wave-height);
    background-color: #6b4c93; /* Default: purple sections */
    /* Mask shows only the area above the wave curve - curve bites downward into footer */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 Q1200,60 960,30 T480,30 T0,30 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 Q1200,60 960,30 T480,30 T0,30 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: top;
    -webkit-mask-position: top;
    z-index: 10;
    pointer-events: none;
}

/* Hide section bottom wave on booking page (footer has its own top wave) */
/* Hide section bottom wave divider on booking page (footer has its own top wave) */
.booking-page .main-content > section.has-waves::after {
    display: none !important;
}

/* Ensure booking page section background extends fully with no gaps */
.booking-page .main-content {
    background-color: #6b4c93;
    margin-bottom: 0;
}

.booking-page .main-content > section.has-waves {
    margin-bottom: 0 !important;
}

/* Hide footer wave when main ends with CTA section that has waves (CTA's bottom wave handles the transition) */
/* Since footer is sibling of main, use :has() to check if main's last child is CTA with waves */
.main-content:has(> .section--cta.has-waves:last-child) ~ .site-footer::before {
    display: none;
}

/* Adjust footer padding when wave is hidden (when last section is CTA with waves) */
.main-content:has(> .section--cta.has-waves:last-child) ~ .site-footer {
    padding-top: 2rem;
}

/* Dynamic Content Sections */
#dynamic-sections {
    margin-top: 2rem;
}

.dynamic-header {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 3rem;
    margin: 2rem 0 1rem 0;
    color: #ffd875;
    font-weight: 600;
}

.dynamic-subheader {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.5rem;
    margin: 2rem 0 1rem 0;
    color: #ffd875;
    font-weight: 600;
}

.dynamic-quote {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    margin: 2rem 0;
    padding: 1rem 0;
    color: #ffd875;
    border-left: 3px solid #d4af37;
    padding-left: 2rem;
}

.dynamic-quote p {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    margin: 0;
    line-height: 1.8;
}

.dynamic-paragraph {
    font-family: 'Cagliostro', serif !important;
    margin-bottom: 1.5rem;
    color: #ffd875;
    line-height: 1.8;
    text-align: justify;
    hyphens: none;
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        padding: 3rem 1.5rem;
        background-attachment: scroll; /* Disable fixed on mobile for better performance */
    }

    .hero-image-section {
        min-height: 40vh; /* Smaller height on mobile */
        padding: 6rem 1.5rem;
        background-size: cover; /* Cover the space while scaling */
    }

    .section--cta {
        background-attachment: scroll; /* Disable parallax on mobile for performance */
        min-height: 40vh; /* Smaller height on mobile */
        padding: 6rem 1.5rem calc(3rem + var(--wave-height));
        background-size: cover; /* Cover the space while scaling */
    }

    .hero__background {
        background-size: cover; /* Cover the space while scaling */
    }

    .hero__heading {
        font-size: 3rem;
    }

    .hero__content p {
        text-align: left;
    }

    .hero__content .hero__tagline {
        font-size: 1.875rem;
        text-align: center !important;
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 1), 1px -1px 0 rgba(0, 0, 0, 1), -1px 1px 0 rgba(0, 0, 0, 1), 1px 1px 0 rgba(0, 0, 0, 1), 3px 3px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7) !important;
    }

    .hero__image {
        float: none;
        width: 250px;
        height: 250px;
        margin: 0 auto 2rem auto;
        display: block;
    }

    .hero__image img {
        transform: none;
    }

    /* Mobile Navigation */
    .nav {
        justify-content: flex-start;
        padding-left: 1rem;
    }

    .nav__links {
        display: none; /* Hide desktop nav links */
    }

    /* Show drawer navigation links */
    .nav__drawer .nav__links {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .nav__toggle {
        display: flex !important; /* Show hamburger button */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    .nav__overlay,
    .nav__drawer {
        display: block; /* Show overlay and drawer */
    }

    /* Mobile: Hide flowers on mobile to avoid clutter */
    .floral-sticker {
        display: none;
    }

    /* Editorial layout - mobile: stack images above text */
    .editorial-section {
        padding: 2rem 1rem;
    }

    .editorial-content {
        max-width: 100%;
        text-align: center; /* Center content on mobile */
    }

    /* Mobile: Images above content, centered */
    .section__image,
    .editorial-image,
    .hero__image {
        float: none !important;
        width: 280px;
        height: 280px;
        margin: 0 auto 2rem auto;
        display: block;
        position: relative;
        z-index: 2; /* Above section background */
    }

    .section--alt .section__image {
        float: none !important;
        margin: 0 auto 2rem auto;
    }

    .editorial-image--left,
    .editorial-image--right {
        float: none !important;
        margin: 0 auto 2rem auto;
    }

    .editorial-content p,
    .hero-intro-content,
    .breast-massage-content,
    .pelvic-care-content,
    .about-paragraph-group {
        text-align: center; /* Center all content on mobile */
    }

    .editorial-content .editorial-tagline {
        font-size: 1.625rem;
        text-align: center !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .editorial-content .editorial-bold {
        font-size: 1.5rem; /* Slightly smaller on mobile */
        text-align: center !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .editorial-cta {
        text-align: center;
    }

    /* Ensure buttons are clickable on mobile */
    .btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        position: relative;
        z-index: 10000 !important; /* Very high z-index to be above overlay */
        min-height: 44px; /* iOS recommended minimum touch target size */
    }

    button.btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: 10000 !important;
    }

    /* Ensure read-more links are clickable on mobile */
    .text-link,
    .read-more-link {
        position: relative;
        z-index: 10000 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        min-height: 44px; /* iOS recommended minimum touch target size */
        display: inline-block; /* Ensure proper touch target */
    }

    /* Ensure main content is above overlay when menu is closed */
    .main-content {
        position: relative;
        z-index: 1;
    }

    /* Ensure content areas are clickable */
    .section__content,
    .hero__content,
    .editorial-content {
        position: relative;
        z-index: 2;
    }
}