/* MX Herbal Beauty — Luxury Hero Section Stylesheet */

/* ==========================================================================
   DESIGN SYSTEM VARIABLES
   ========================================================================== */
:root {
    /* Color Palette */
    --color-forest: #0f2e1e;          /* Premium Deep Forest Green */
    --color-forest-hover: #163f2a;    /* Slightly lighter for hover states */
    --color-gold: #bfa37a;            /* Soft Luxury Ayurvedic Metallic Gold */
    --color-gold-light: #e6d3ba;      /* Lighter shimmer gold */
    --color-gold-dark: #9c8057;       /* Darker shadow gold */
    --color-ivory: #faf9f5;           /* Soft Ivory white */
    --color-charcoal: #1c1c1a;        /* Elegant editorial dark gray */
    
    /* Transparent overlays */
    --glass-nav-bg: rgba(250, 249, 245, 0.03);
    --glass-nav-bg-scrolled: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: rgba(15, 46, 30, 0.05);
    
    /* Typography */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    
    /* Spacing & Layout */
    --max-content-width: 540px;
    --nav-height-normal: 90px;
    --nav-height-scrolled: 70px;
    
    /* Motion & Transitions */
    --transition-lux-slow: all 1.2s cubic-bezier(0.25, 1, 0.3, 1);
    --transition-lux-medium: all 0.6s cubic-bezier(0.25, 1, 0.3, 1);
    --transition-lux-fast: all 0.3s cubic-bezier(0.25, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & FOUNDATIONS
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--color-ivory);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
}

/* Custom Cursor (Luxury desktop refinement) */
.custom-cursor {
    width: 8px;
    height: 8px;
    background: var(--color-gold);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    opacity: 0;
}

.custom-cursor-follower {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(191, 163, 122, 0.3);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
    opacity: 0;
}

body:hover .custom-cursor,
body:hover .custom-cursor-follower {
    opacity: 1;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height-normal);
    z-index: 1000;
    display: flex;
    align-items: center;
    background-color: var(--glass-nav-bg);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: var(--transition-lux-medium);
}

/* Navbar active state on scroll */
.navbar.scrolled {
    height: var(--nav-height-scrolled);
    background-color: var(--glass-nav-bg-scrolled);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px var(--glass-shadow);
}

.nav-container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Menu links */
.nav-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 1.8rem; /* Reduced from 2.5rem to accommodate the premium label words */
}

@media (max-width: 1250px) and (min-width: 901px) {
    .nav-list {
        gap: 0.9rem; /* Tighten gap on laptops */
    }
    .nav-link {
        font-size: 0.74rem !important; /* Scale text down slightly */
        letter-spacing: 0.1em !important;
    }
}

.nav-link {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-charcoal);
    text-decoration: none;
    position: relative;
    padding: 8px 0;
    opacity: 0.8;
    transition: var(--transition-lux-fast);
}

.nav-link:hover, .nav-link.active {
    opacity: 1;
    color: var(--color-forest);
}

/* Underline slide animation */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Navbar CTA button */
.btn-order {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-ivory);
    background-color: var(--color-forest);
    padding: 12px 28px;
    border-radius: 40px;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(15, 46, 30, 0.1);
    transition: var(--transition-lux-fast);
}

.btn-order:hover {
    transform: translateY(-2px);
    background-color: var(--color-forest-hover);
    box-shadow: 0 6px 20px rgba(15, 46, 30, 0.2), 0 0 0 3px rgba(191, 163, 122, 0.2);
}

/* Hamburger button */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.hamburger-bar {
    display: block;
    width: 24px;
    height: 1.5px;
    margin: 5px 0;
    background-color: var(--color-charcoal);
    transition: var(--transition-lux-medium);
}

/* Mobile drawer navigation */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background-color: rgba(250, 249, 245, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    box-shadow: -10px 0 40px rgba(15, 46, 30, 0.05);
    display: flex;
    align-items: center;
    padding: 100px 40px;
    transition: var(--transition-lux-medium);
}

.mobile-drawer.open {
    right: 0;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.mobile-link {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-charcoal);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(191, 163, 122, 0.1);
    display: block;
    transition: var(--transition-lux-fast);
}

.mobile-link.active, .mobile-link:hover {
    color: var(--color-gold-dark);
    padding-left: 8px;
}

.mobile-cta-link {
    background-color: var(--color-forest);
    color: var(--color-ivory) !important;
    text-align: center;
    padding: 15px;
    border-radius: 40px;
    border-bottom: none;
    margin-top: 1rem;
}

/* Hamburger active transformation */
.nav-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ==========================================================================
   HERO CONTAINER LAYOUT
   ========================================================================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* 100% Background cover */
.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background-color: var(--color-ivory); /* Solid background to fill the left gap on ultra-wide screens */
}

/* Dissolved transition bottom fade-out to blend the Hero background into Section 02 */
.hero-bg-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35vh; /* Smooth blend distance */
    background: linear-gradient(180deg, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 1) 100%);
    pointer-events: none;
    z-index: 3;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    background-size: cover; /* Fill the screen completely, removing left white space */
    background-position: right bottom; /* Align to bottom-right so pedestal sits on the ground and is not cut off */
    background-repeat: no-repeat;
}

/* Premium left ivory gradient overlay (masks baked-in background logo and maximizes text contrast) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(250, 249, 245, 1) 0%,
        rgba(250, 249, 245, 0.98) 15%,
        rgba(250, 249, 245, 0.85) 35%,
        rgba(250, 249, 245, 0.4) 55%,
        rgba(250, 249, 245, 0) 75%
    );
    pointer-events: none;
    z-index: 2;
}

/* Gentle Light Shimmer Overlay */
.hero-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 20% 30%,
        rgba(255, 253, 249, 0.08) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    animation: shimmerPulse 8s infinite alternate ease-in-out;
}

@keyframes shimmerPulse {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.9; transform: scale(1.05); }
}

/* Particles Canvas wrapper */
.hero-particles,
.collection-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.hero-particles canvas,
.collection-particles canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Content wrapper grid/flex overlay */
.hero-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 42% 58%; /* Precise desktop layout specification */
    align-items: center;
    height: 100%;
}

.hero-content-wrapper {
    grid-column: 1; /* Sits comfortably in Left 42% column */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content {
    max-width: var(--max-content-width); /* Breathable size (540px limit) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ==========================================================================
   LEFT CONTENT TYPOGRAPHY & SPACING
   ========================================================================== */
/* Gold Label */
.gold-label {
    font-family: var(--font-sans);
    font-size: 1.05rem; /* Bigger, more premium header eyebrow */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em; /* Generous letter spacing */
    color: var(--color-gold-dark);
    margin-bottom: 0.5rem; /* Reduced space */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1), transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

body.loaded .gold-label {
    opacity: 1;
    transform: translateY(0);
}

/* Gold Lotus Divider */
.gold-divider {
    display: flex;
    align-items: center;
    justify-content: center; /* Center-align line dividers globally */
    gap: 12px;
    margin: 0.5rem 0 1.6rem; /* Smaller margins to reduce top gaps */
    color: var(--color-gold);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1) 0.15s, transform 1.2s cubic-bezier(0.25, 1, 0.3, 1) 0.15s;
}

body.loaded .gold-divider {
    opacity: 1;
    transform: translateY(0);
}

/* Keep Hero section left-aligned */
.hero-content .gold-label,
.hero-content .gold-divider {
    justify-content: flex-start;
}

.divider-line {
    height: 1px;
    width: 60px;
    background: linear-gradient(90deg, rgba(191, 163, 122, 0) 0%, rgba(191, 163, 122, 0.5) 100%);
}

.divider-line:last-child {
    background: linear-gradient(90deg, rgba(191, 163, 122, 0.5) 0%, rgba(191, 163, 122, 0) 100%);
}

.divider-lotus {
    color: var(--color-gold-dark);
    flex-shrink: 0;
}

/* Main Heading */
.main-heading {
    font-family: var(--font-serif);
    font-size: 4.8rem;
    font-weight: 300;
    line-height: 1.05;
    color: var(--color-charcoal);
    margin-bottom: 2.2rem;
    display: flex;
    flex-direction: column;
}

/* Accent highlight text in heading */
.accent-text {
    font-style: italic;
    font-weight: 400;
    color: var(--color-forest);
    background: linear-gradient(135deg, var(--color-forest) 30%, var(--color-gold-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding-right: 4px;
}

/* Line-by-line reveal animation setup */
.line-reveal {
    overflow: hidden;
    display: block;
    height: 1.15em;
    margin-bottom: -0.1em;
}

.line-reveal .word {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 1.4s cubic-bezier(0.25, 1, 0.3, 1), opacity 1.2s ease-out;
}

/* Line animations on load */
body.loaded .line-reveal:nth-child(1) .word:nth-child(1) { transition-delay: 0.3s; transform: translateY(0); opacity: 1; }
body.loaded .line-reveal:nth-child(1) .word:nth-child(2) { transition-delay: 0.45s; transform: translateY(0); opacity: 1; }
body.loaded .line-reveal:nth-child(2) .word { transition-delay: 0.65s; transform: translateY(0); opacity: 1; }

/* Paragraph */
.hero-paragraph {
    font-family: var(--font-sans);
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-charcoal);
    margin-bottom: 3.2rem;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1.4s cubic-bezier(0.25, 1, 0.3, 1) 0.8s, transform 1.4s cubic-bezier(0.25, 1, 0.3, 1) 0.8s;
}

body.loaded .hero-paragraph {
    opacity: 1;
    transform: translateY(0);
}

/* Buttons action wrapper */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.4s cubic-bezier(0.25, 1, 0.3, 1) 1s, transform 1.4s cubic-bezier(0.25, 1, 0.3, 1) 1s;
}

body.loaded .hero-actions {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   SECTION 02: BRAND EXPERIENCE & PHILOSOPHY
   ========================================================================== */
.philosophy-section {
    position: relative;
    width: 100%;
    min-height: 100vh; /* More compact viewport alignment */
    background-color: var(--color-ivory);
    padding: 70px 0 80px; /* Reduced vertical padding */
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 4;
    scroll-margin-top: 110px;
}

.philosophy-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.philosophy-bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
}

/* Dissolved transition top fade-in from solid ivory */
.philosophy-bg-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35vh;
    background: linear-gradient(180deg, rgba(250, 249, 245, 1) 0%, rgba(250, 249, 245, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Dissolved transition bottom fade-out to solid ivory */
.philosophy-bg-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    background: linear-gradient(180deg, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 1) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Left side overlay to guarantee text contrast, blending out towards the center */
.philosophy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(250, 249, 245, 0.95) 0%,
        rgba(250, 249, 245, 0.85) 30%,
        rgba(250, 249, 245, 0.5) 55%,
        rgba(250, 249, 245, 0) 75%
    );
    pointer-events: none;
    z-index: 2;
}

.philosophy-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 20% 30%,
        rgba(255, 253, 249, 0.08) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    animation: shimmerPulse 8s infinite alternate ease-in-out;
}

.philosophy-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 48px; /* Reduced gap to make it compact */
}

/* 1. Header Block Styling */
.philosophy-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.philosophy-title {
    font-family: var(--font-serif);
    font-size: 3.15rem; /* Reduced typography */
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-charcoal);
    margin-bottom: 1.2rem;
    letter-spacing: -0.01em;
}

.philosophy-desc {
    font-family: var(--font-sans);
    font-size: 1.02rem; /* Reduced typography */
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-forest);
    max-width: 640px;
    opacity: 0.9;
}

/* 2. Features Grid Styling (5 Columns, Compact) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
    margin-top: 10px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(191, 163, 122, 0.15);
    border-radius: 12px;
    padding: 16px 12px; /* Compact padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}

.feature-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(191, 163, 122, 0.35);
    box-shadow: 0 10px 25px rgba(15, 46, 30, 0.03);
}

.feature-card-icon-wrap {
    width: 44px; /* Compact wrapper */
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-gold);
    color: var(--color-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: rgba(250, 249, 245, 0.8);
    transition: all 0.4s ease;
}

.feature-card:hover .feature-card-icon-wrap {
    background-color: var(--color-forest);
    border-color: var(--color-forest);
    color: var(--color-gold-light);
}

.feature-card-icon {
    width: 18px; /* Compact icon */
    height: 18px;
}

.feature-card-title {
    font-family: var(--font-sans);
    font-size: 0.72rem; /* Compact text */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-forest);
    line-height: 1.3;
    max-width: 140px;
}

/* 3. Bottom Ingredients Split Layout */
.ingredients-split {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.ingredients-narrative {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.narrative-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--color-gold-dark);
    margin-bottom: 10px;
}

.narrative-title {
    font-family: var(--font-serif);
    font-size: 2.7rem; /* Reduced from 3.4rem */
    font-weight: 300;
    color: var(--color-charcoal);
    margin-bottom: 1.2rem;
    line-height: 1.15;
}

.narrative-desc {
    font-family: var(--font-sans);
    font-size: 0.95rem; /* Reduced from 1.05rem */
    font-weight: 400;
    line-height: 1.7;
    color: rgba(28, 28, 26, 0.82);
    margin-bottom: 2rem;
}

.btn-solid-green {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background-color: var(--color-forest);
    color: var(--color-ivory);
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 46, 30, 0.12);
    transition: var(--transition-lux-fast);
}

.btn-solid-green:hover {
    background-color: var(--color-forest-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 46, 30, 0.2);
}

.btn-solid-green .btn-arrow {
    transition: transform 0.4s ease;
}

.btn-solid-green:hover .btn-arrow {
    transform: translateX(5px);
}

/* Ingredients Circle Grid Styling (Right Column) */
.ingredients-circle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 15px;
    justify-items: center;
}

.ingredient-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.circle-image-wrap {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 1px solid var(--color-gold-dark); /* Thin luxury gold outer ring */
    padding: 3px; /* Gap between gold ring and image */
    background: var(--color-ivory);
    box-shadow: 0 4px 12px rgba(15, 46, 30, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}

.ingredient-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Clip the image itself into a circle */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.ingredient-circle-item:hover .circle-image-wrap {
    transform: translateY(-4px) scale(1.05); /* Smooth elevation lift */
    border-color: var(--color-forest);
    box-shadow: 0 10px 22px rgba(15, 46, 30, 0.12);
}

.ingredient-circle-item:hover .ingredient-img {
    transform: scale(1.1);
}

.ingredient-name {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-forest);
    transition: color 0.3s ease;
}

.ingredient-circle-item:hover .ingredient-name {
    color: var(--color-gold-dark);
}

/* Staggered Scroll Reveal Setup */
.philosophy-section .reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.4s cubic-bezier(0.25, 1, 0.3, 1), transform 1.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.philosophy-section.active .philosophy-header.reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.philosophy-section.active .features-grid.reveal-item {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.philosophy-section.active .ingredients-split.reveal-item {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .philosophy-title {
        font-size: 2.8rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .ingredients-split {
        grid-template-columns: 100%;
        gap: 40px;
    }
    
    .ingredients-narrative {
        align-items: center;
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .circle-image-wrap {
        width: 88px;
        height: 88px;
    }
}

@media (max-width: 900px) {
    .philosophy-container {
        grid-template-columns: 100%;
    }
    
    .philosophy-overlay {
        background: linear-gradient(
            90deg,
            rgba(250, 249, 245, 0.98) 0%,
            rgba(250, 249, 245, 0.90) 35%,
            rgba(250, 249, 245, 0.5) 60%,
            rgba(250, 249, 245, 0) 85%
        );
    }
}

@media (max-width: 767px) {
    .philosophy-section {
        height: auto;
        min-height: 100vh;
        align-items: flex-start;
        padding: 100px 0 80px;
    }
    
    .philosophy-title {
        font-size: 2.6rem;
    }
    
    .narrative-title {
        font-size: 2.8rem;
    }
    
    .philosophy-desc {
        font-size: 1rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .ingredients-circle-grid {
        gap: 24px 15px;
    }
    
    .circle-image-wrap {
        width: 80px;
        height: 80px;
    }
    
    .philosophy-overlay {
        background: linear-gradient(
            180deg,
            rgba(250, 249, 245, 0.98) 0%,
            rgba(250, 249, 245, 0.88) 35%,
            rgba(250, 249, 245, 0.5) 60%,
            rgba(250, 249, 245, 0) 85%
        );
    }
    
    .btn-solid-green {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* ==========================================================================
   BUTTONS & MICRO INTERACTIONS
   ========================================================================== */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 42px;
    border-radius: 50px;
    background-color: var(--color-forest);
    color: var(--color-ivory);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 46, 30, 0.15);
    transition: var(--transition-lux-fast);
}

.btn-arrow {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1);
    flex-shrink: 0;
}

.btn-primary:hover .btn-arrow {
    transform: translateX(5px);
}

/* Hover Lift and Glow */
.btn-primary:hover {
    transform: translateY(-3px);
    background-color: var(--color-forest-hover);
    box-shadow: 0 15px 35px rgba(15, 46, 30, 0.25), 0 0 15px rgba(191, 163, 122, 0.2);
}

/* Diagonal Luxury Gold Shine Animation */
.btn-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: none;
}

.btn-primary:hover .btn-shine {
    left: 170%;
    transition: left 0.8s ease-in-out;
}

/* Secondary Gold Text Link */
.btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    position: relative;
    padding: 8px 0;
    transition: var(--transition-lux-fast);
}

.btn-secondary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 28px); /* Avoid underlining the arrow */
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-secondary:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.gold-arrow {
    color: var(--color-gold-dark);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.btn-secondary:hover .gold-arrow {
    transform: translateX(6px);
}

/* Custom Cursor Interaction on Interactive Elements */
a:hover ~ .custom-cursor,
button:hover ~ .custom-cursor,
.logo-link:hover ~ .custom-cursor {
    width: 14px;
    height: 14px;
    background: var(--color-forest);
}

a:hover ~ .custom-cursor-follower,
button:hover ~ .custom-cursor-follower,
.logo-link:hover ~ .custom-cursor-follower {
    width: 44px;
    height: 44px;
    border-color: var(--color-gold);
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-charcoal);
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.3, 1) 1.5s;
}

body.loaded .scroll-indicator {
    opacity: 0.7;
}

.scroll-indicator:hover {
    opacity: 1;
}

.scroll-lotus-wrap {
    color: var(--color-gold-dark);
    animation: lotusFloating 4s ease-in-out infinite;
}

.scroll-text {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    opacity: 0.8;
}

.scroll-arrow {
    color: var(--color-gold);
    animation: arrowBounce 2.5s infinite ease-in-out;
}

@keyframes lotusFloating {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-3px) rotate(3deg); }
    100% { transform: translateY(0) rotate(0); }
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ==========================================================================
   RESPONSIVE DESIGN & ADAPTATIONS
   ========================================================================== */

/* Large screens center layout protection */
@media (min-width: 1600px) {
    .nav-container, .hero-container {
        padding: 0;
    }
}

/* Tablet Layout (1024px and below) */
@media (max-width: 1024px) {
    :root {
        --nav-height-normal: 80px;
    }
    
    .navbar {
        height: var(--nav-height-normal);
    }
    
    .hero-container {
        grid-template-columns: 50% 50%; /* Shift columns to give text a bit more width */
    }
    
    .main-heading {
        font-size: 3.8rem;
    }
    
    .hero-bg-image {
        background-position: right 62% center; /* Push background image rightwards to avoid product collision */
    }
}

/* Small Tablets / Large Mobiles (900px and below) */
@media (max-width: 900px) {
    .nav-container {
        justify-content: flex-start;
    }

    /* Navbar navigation item hide, show mobile button */
    .nav-menu, .nav-cta {
        display: none;
    }
    
    .nav-toggle {
        display: block;
    }
    
    .hero-container {
        grid-template-columns: 100%; /* Collapse to single column layout */
    }
    
    .hero-content-wrapper {
        grid-column: 1;
        padding-top: 40px;
    }
    
    .hero-content {
        max-width: 600px;
    }
    
    /* Load portrait mobile-optimized background image */
    .hero-bg-image {
        background-image: url('assets/hero/mobile background.png') !important;
        background-position: center 122%;
        background-size: cover;
    }
    
    /* Overlay becomes denser on tablet to protect text readability */
    .hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(250, 249, 245, 0.98) 0%,
            rgba(250, 249, 245, 0.90) 35%,
            rgba(250, 249, 245, 0.5) 60%,
            rgba(250, 249, 245, 0) 85%
        );
    }
}

/* Mobile Screens (767px and below) */
@media (max-width: 767px) {
    :root {
        --nav-height-normal: 70px;
    }
    
    .navbar {
        height: var(--nav-height-normal);
    }
    
    /* Hamburger button as dark forest green square */
    .nav-toggle {
        display: flex;
        background-color: var(--color-forest);
        border: none;
        cursor: pointer;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 15px rgba(15, 46, 30, 0.15);
        padding: 0;
    }
    
    .hamburger-bar {
        width: 18px;
        height: 1.5px;
        margin: 3px 0;
        background-color: var(--color-ivory);
    }
    
    /* Hamburger active transformation */
    .nav-toggle.active .hamburger-bar:nth-child(1) {
        transform: translateY(4.5px) rotate(45deg);
    }
    
    .nav-toggle.active .hamburger-bar:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.active .hamburger-bar:nth-child(3) {
        transform: translateY(-4.5px) rotate(-45deg);
    }
    
    /* Disable Custom Cursor on Touch Devices */
    .custom-cursor, .custom-cursor-follower {
        display: none !important;
    }
    
    /* Layout: Shift content to the top half of the screen on mobile, leaving the bottom for the product photo */
    .hero-section {
        align-items: flex-start;
        padding-top: 110px; /* Space below the navbar */
    }
    
    .hero-container {
        grid-template-columns: 100%;
        align-items: flex-start;
        height: auto;
    }
    
    .hero-content-wrapper {
        padding: 0;
        width: 100%;
    }
    
    .hero-content {
        max-width: 100%;
        align-items: center; /* Center-align typography for premium mobile editorial feel */
        text-align: center;
    }
    
    .gold-label {
        font-size: 0.75rem;
        margin-bottom: 0.8rem;
    }
    
    .gold-divider {
        justify-content: center;
        margin: 0.8rem auto 1.5rem;
        width: auto;
    }
    
    .divider-line {
        width: 45px;
    }
    
    .main-heading {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
        text-align: center;
        align-self: center;
        text-shadow: 0 2px 15px rgba(250, 249, 245, 0.95);
    }
    
    .hero-paragraph {
        font-size: 0.82rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        padding: 0 15px;
        text-align: center;
        text-shadow: 0 2px 10px rgba(250, 249, 245, 0.95);
    }
    
    /* Vertically Stack and Center Buttons */
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .btn-primary {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
        font-size: 0.85rem;
    }
    
    .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
        font-size: 0.85rem;
    }
    
    .btn-secondary::after {
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 180px;
    }
    
    .btn-secondary:hover::after {
        transform: translateX(-50%) scaleX(1);
    }
    
    /* Background adaptation: Center product jar horizontally and anchor pedestal exactly at the bottom */
    .hero-bg-image {
        background-position: center 122%; 
    }
    
    /* Vertical gradient that provides high contrast at the top for centered text, fading to 0% at the bottom */
    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(250, 249, 245, 0.45) 0%,
            rgba(250, 249, 245, 0.25) 45%,
            rgba(250, 249, 245, 0.10) 70%,
            rgba(250, 249, 245, 0) 90%
        );
    }
    
    .scroll-indicator {
        bottom: 2.2rem;
    }
    

}

/* Super narrow devices protection */
@media (max-width: 360px) {
    .main-heading {
        font-size: 2.4rem;
    }
}

/* ==========================================================================
   SECTION 03: BENEFITS & WHY CHOOSE MX — PREMIUM EDITORIAL
   ========================================================================== */
.benefits-section {
    position: relative;
    width: 100%;
    background-color: var(--color-ivory);
    padding: 60px 0 90px; /* Reduced vertical padding gap */
    overflow: hidden;
    z-index: 5;
}

/* Background image layer */
.benefits-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Dissolved transition top fade-in from solid ivory */
.benefits-bg-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(250, 249, 245, 1) 0%, rgba(250, 249, 245, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Dissolved transition bottom fade-out to solid ivory */
.benefits-bg-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 1) 100%);
    pointer-events: none;
    z-index: 3;
}

.benefits-bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.benefits-overlay {
    position: absolute;
    inset: 0;
    background: rgba(252, 250, 246, 0.08);
    pointer-events: none;
    z-index: 2;
}

.benefits-shimmer {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 15%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 65%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    animation: shimmerPulse 10s infinite alternate ease-in-out;
}

/* Main content container */
.benefits-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

/* ─── Section Header ─────────────────────────────────────── */
.benefits-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Inherit gold-label and gold-divider center-align from global rules */
.benefits-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.benefits-title {
    font-family: var(--font-serif);
    font-size: 3.15rem;
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-charcoal);
    letter-spacing: -0.01em;
    margin: 0;
}

.benefits-intro-wrapper {
    max-width: 720px;
    margin: 6px auto 0;
}

.benefits-intro {
    font-family: var(--font-sans);
    font-size: 0.97rem;
    font-weight: 300;
    line-height: 1.82;
    color: var(--color-charcoal);
    opacity: 0.82;
    margin: 0;
}

/* ─── Premium Editorial Benefits Grid ────────────────────── */
.benefits-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 36px;
    width: 100%;
}

/* Individual Benefit Item */
.benefit-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px 26px 26px;
    background: rgba(255, 253, 249, 0.72);
    border: 1px solid rgba(191, 163, 122, 0.14);
    border-radius: 4px; /* Very subtle radius — editorial, not card-like */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    cursor: default;
}

/* Left gold accent line */
.benefit-item::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 0;
    width: 3px;
    height: 38px;
    background: linear-gradient(180deg, var(--color-gold-dark) 0%, transparent 100%);
    border-radius: 0 2px 2px 0;
    opacity: 0.65;
    transition: opacity 0.4s ease, height 0.4s ease;
}

.benefit-item:hover {
    background: rgba(255, 253, 249, 0.95);
    border-color: rgba(191, 163, 122, 0.32);
    box-shadow: 0 8px 40px rgba(15, 46, 30, 0.06), 0 2px 12px rgba(191, 163, 122, 0.1);
}

.benefit-item:hover::before {
    height: 52px;
    opacity: 1;
}

/* Large Rich Icon Ring */
.benefit-icon-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.2px solid rgba(191, 163, 122, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 248, 242, 0.9);
    color: var(--color-forest);
    flex-shrink: 0;
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    box-shadow: 0 2px 12px rgba(191, 163, 122, 0.12);
}

/* Outer ring glow element */
.benefit-icon-ring::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(191, 163, 122, 0.12);
    transition: all 0.5s ease;
}

.benefit-item:hover .benefit-icon-ring {
    background: var(--color-forest);
    color: rgba(251, 248, 242, 1);
    border-color: var(--color-forest);
    box-shadow: 0 6px 24px rgba(15, 46, 30, 0.2);
    transform: scale(1.06);
}

.benefit-item:hover .benefit-icon-ring::after {
    inset: -10px;
    border-color: rgba(15, 46, 30, 0.1);
}

/* SVG Icon sizing */
.benefit-svg {
    width: 30px;
    height: 30px;
    transition: all 0.4s ease;
}

/* Italic serif gold number */
.benefit-number {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--color-gold-dark);
    opacity: 0.9;
    line-height: 1;
    margin-top: 4px;
    transition: color 0.4s ease;
}

.benefit-item:hover .benefit-number {
    color: var(--color-forest);
}

/* Benefit title */
.benefit-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-forest);
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin: 0;
    transition: color 0.4s ease;
}

.benefit-item:hover .benefit-title {
    color: var(--color-charcoal);
}

/* Benefit description */
.benefit-desc {
    font-family: var(--font-sans);
    font-size: 0.855rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-charcoal);
    opacity: 0.82;
    margin: 0;
}

/* Botanical keyword tags */
.benefit-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    opacity: 0.75;
    padding: 4px 10px;
    border: 1px solid rgba(191, 163, 122, 0.22);
    border-radius: 20px;
    margin-top: 4px;
    background: rgba(251, 248, 242, 0.5);
    transition: all 0.4s ease;
}

.benefit-item:hover .benefit-tag {
    opacity: 1;
    border-color: rgba(191, 163, 122, 0.45);
    background: rgba(251, 248, 242, 0.95);
}

/* ─── Elegant Closing Section ────────────────────────────── */
.benefits-closing {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 8px;
}

.closing-ornament {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-gold-dark);
    opacity: 0.55;
    width: 100%;
    max-width: 540px;
}

.closing-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191, 163, 122, 0.5), transparent);
}

.closing-leaf {
    flex-shrink: 0;
}

.footer-quote {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-forest);
    max-width: 640px;
    margin: 0;
    letter-spacing: 0.01em;
}

.footer-cta {
    margin-top: 8px;
}

/* ─── Scroll Reveal Animations ────────────────────────────── */
.benefits-section .reveal-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

.benefits-section.active .benefits-header.reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.benefits-section.active .benefit-item.reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.benefits-section.active .benefit-item.reveal-item:nth-child(1) { transition-delay: 0.15s; }
.benefits-section.active .benefit-item.reveal-item:nth-child(2) { transition-delay: 0.25s; }
.benefits-section.active .benefit-item.reveal-item:nth-child(3) { transition-delay: 0.35s; }
.benefits-section.active .benefit-item.reveal-item:nth-child(4) { transition-delay: 0.45s; }
.benefits-section.active .benefit-item.reveal-item:nth-child(5) { transition-delay: 0.55s; }
.benefits-section.active .benefit-item.reveal-item:nth-child(6) { transition-delay: 0.65s; }

.benefits-section.active .benefits-closing.reveal-item {
    transition-delay: 0.75s;
    opacity: 1;
    transform: translateY(0);
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
    .benefits-title {
        font-size: 2.2rem;
    }
    .benefits-editorial-grid {
        gap: 36px 28px;
    }
}

@media (max-width: 960px) {
    .benefits-section {
        padding: 110px 0 72px;
    }
    .benefits-title {
        font-size: 1.95rem;
    }
    .benefits-editorial-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
}

@media (max-width: 640px) {
    .benefits-section {
        padding: 90px 0 60px;
    }
    .benefits-title {
        font-size: 1.65rem;
    }
    .benefits-intro {
        font-size: 0.87rem;
    }
    .benefits-container {
        gap: 40px;
    }
    .benefits-editorial-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .benefit-item {
        padding: 22px 20px 20px;
    }
    .footer-quote {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   SECTION 04: THE MX COLLECTION
   ========================================================================== */
.collection-section {
    position: relative;
    width: 100%;
    background-color: var(--color-ivory);
    padding: 70px 0 120px; /* Reduced vertical padding gap */
    overflow: visible;
    z-index: 5;
}

/* Background image layer */
.collection-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Dissolved transition top fade-in from solid ivory */
.collection-bg-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(250, 249, 245, 1) 0%, rgba(250, 249, 245, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Dissolved transition bottom fade-out to solid ivory */
.collection-bg-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 1) 100%);
    pointer-events: none;
    z-index: 3;
}

.collection-bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.collection-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(250, 249, 245, 0.05); /* Ivory overlay ~5% */
    pointer-events: none;
    z-index: 2;
}

.collection-shimmer {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 65%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}

/* Main container */
.collection-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

/* Header */
.collection-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.collection-title {
    font-family: var(--font-serif);
    font-size: 3.15rem;
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-forest);
    letter-spacing: -0.01em;
    margin: 0;
}

.collection-title .gold-highlight {
    color: var(--color-gold-dark);
    font-weight: inherit;
}

.collection-intro-wrapper {
    max-width: 700px;
    margin: 6px auto 0;
}

.collection-intro {
    font-family: var(--font-sans);
    font-size: 0.97rem;
    font-weight: 300;
    line-height: 1.82;
    color: var(--color-charcoal);
    opacity: 0.82;
    margin: 0;
}

/* Product Grid */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px; /* Large spacing to keep cards separate */
    width: 100%;
    max-width: 1400px;
    margin: 80px auto 0;
}

/* Product Card */
.product-card {
    position: relative;
    background-color: #fbfbf9; /* Soft warm ivory background */
    border: 1px solid rgba(191, 163, 122, 0.22); /* Thin gold border */
    border-radius: 30px;
    padding: 0 32px 36px;
    box-shadow: 0 15px 35px rgba(15, 46, 30, 0.03); /* Soft shadow */
    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1),
                border-color 0.6s cubic-bezier(0.25, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.25, 1, 0.3, 1);
    cursor: default;
    overflow: visible;
    margin-top: 25px; /* Room for product image overlap */
}

/* Faint botanical line illustration inside bottom corners of card */
.product-card::after {
    content: '';
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23bfa37a' stroke-width='0.45' opacity='0.08'><path d='M10 90 Q40 80 60 50 C65 40 70 25 75 10 M40 65 C43 58 50 52 58 55 C66 58 64 65 58 65 Z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}

/* Badge style */
.product-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    border: 1px solid rgba(191, 163, 122, 0.4);
    padding: 4px 10px;
    border-radius: 20px;
    background-color: rgba(251, 248, 242, 0.9);
    z-index: 4;
}

/* Hover state lifts card */
.product-card:hover {
    transform: translateY(-10px);
    border-color: rgba(191, 163, 122, 0.6);
    box-shadow: 0 25px 50px rgba(15, 46, 30, 0.07), 0 5px 15px rgba(191, 163, 122, 0.1);
}

/* Overlapping Product Image styling */
.product-image-container {
    position: relative;
    width: 100%;
    height: 180px;
    margin-top: -55px; /* Product overlaps the card by 25px+ */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.product-image {
    max-height: 220px;
    width: auto;
    object-fit: contain;
    z-index: 3;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Spotlight element behind product image */
.product-spotlight {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

/* Floating animation keyframe */
@keyframes floatingProduct {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.floating-product {
    animation: floatingProduct 6s ease-in-out infinite;
}

.product-card:hover .floating-product {
    animation-play-state: paused;
}

/* Hover scales product PNG */
.product-card:hover .product-image {
    transform: scale(1.03) translateY(-4px);
}

/* Product core details */
.product-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 12px;
}

.product-gender {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold-dark);
}

.product-name {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--color-forest);
    line-height: 1.25;
}

.product-description {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--color-charcoal);
    opacity: 0.85;
    text-align: center;
    margin-bottom: 24px;
    flex-grow: 1; /* Match heights across cards */
}

/* Size Capsules */
.product-sizes-section {
    width: 100%;
    margin-bottom: 24px;
}

.small-section-title {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-charcoal);
    opacity: 0.6;
    text-align: center;
    margin-bottom: 12px;
}

.sizes-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.size-capsule {
    flex: 1;
    max-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(191, 163, 122, 0.22);
    background-color: #faf9f5;
    box-shadow: 0 2px 8px rgba(15, 46, 30, 0.015);
    transition: all 0.3s ease;
}

.size-capsule-icon {
    width: 14px;
    height: 14px;
    color: var(--color-gold-dark);
}

.size-weight {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-charcoal);
}

.size-price {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-forest);
}

.product-card:hover .size-capsule {
    border-color: rgba(191, 163, 122, 0.45);
    box-shadow: 0 4px 12px rgba(15, 46, 30, 0.03);
}

/* Best For Icons styling */
.product-bestfor-section {
    width: 100%;
    margin-bottom: 28px;
}

.bestfor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    justify-items: center;
}

.bestfor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.bestfor-icon {
    width: 18px;
    height: 18px;
    color: var(--color-gold-dark);
    transition: color 0.3s ease;
}

.bestfor-label {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--color-charcoal);
    opacity: 0.75;
    line-height: 1.2;
}

.product-card:hover .bestfor-icon {
    color: var(--color-forest);
}

/* Button style */
.btn-product {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background-color: var(--color-forest);
    color: var(--color-ivory);
    border-radius: 50px;
    border: 1px solid transparent;
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(15, 46, 30, 0.1);
}

.btn-product-arrow {
    transition: transform 0.4s ease;
}

.btn-product:hover {
    transform: translateY(-3px);
    background-color: var(--color-forest-hover);
    border-color: var(--color-gold);
    box-shadow: 0 10px 25px rgba(15, 46, 30, 0.2), 0 0 15px rgba(191, 163, 122, 0.2);
}

.btn-product:hover .btn-product-arrow {
    transform: translateX(5px);
}

/* ─── Scroll Reveal Animations ────────────────────────────── */
.collection-section .reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

.collection-section.active .collection-header.reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.collection-section.active .product-card.reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.collection-section.active .product-card.reveal-item:nth-child(1) { transition-delay: 0.15s; }
.collection-section.active .product-card.reveal-item:nth-child(2) { transition-delay: 0.25s; }
.collection-section.active .product-card.reveal-item:nth-child(3) { transition-delay: 0.35s; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .collection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        margin-top: 60px;
    }
    .collection-grid .product-card:last-child {
        grid-column: 1 / span 2;
        justify-self: center;
        width: 100%;
        max-width: 440px;
    }
}

@media (max-width: 768px) {
    .collection-section {
        padding: 100px 0 80px;
    }
    .collection-title {
        font-size: 2.2rem;
    }
    .collection-grid {
        grid-template-columns: 100%;
        gap: 50px;
        margin-top: 50px;
    }
    .collection-grid .product-card:last-child {
        grid-column: auto;
        justify-self: auto;
        max-width: 100%;
    }
    .product-card {
        margin-top: 40px;
        padding: 0 24px 28px;
    }
}

/* ==========================================================================
   SECTION 05: HOW TO USE — THE HERBAL RITUAL
   ========================================================================== */
.ritual-section {
    position: relative;
    width: 100%;
    background-color: var(--color-ivory);
    padding: 70px 0 130px; /* Reduced vertical padding gap */
    overflow: hidden;
    z-index: 5;
}

/* Seamless Section Transitions */
.ritual-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ritual-bg-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(180deg, var(--color-ivory) 0%, rgba(250, 249, 245, 0.6) 50%, transparent 100%);
    pointer-events: none;
    z-index: 3;
}

.ritual-bg-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(180deg, transparent 0%, rgba(250, 249, 245, 0.6) 50%, var(--color-ivory) 100%);
    pointer-events: none;
    z-index: 3;
}

.ritual-bg-image {
    width: 100%;
    height: 100%;
    background-image: url("assets/background3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.ritual-overlay {
    position: absolute;
    inset: 0;
    background: rgba(250, 249, 245, 0.62);
    backdrop-filter: blur(3px);
    z-index: 2;
}

.ritual-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 4;
}

/* Header Elements */
.ritual-header {
    text-align: center;
    margin-bottom: 45px;
}

.ritual-header .gold-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.eyebrow-leaf {
    color: var(--color-gold);
    display: inline-block;
    transition: transform 0.6s ease;
}

.ritual-header:hover .eyebrow-leaf-left {
    transform: rotate(-25deg);
}

.ritual-header:hover .eyebrow-leaf-right {
    transform: rotate(25deg);
}

.ritual-title {
    font-family: var(--font-serif);
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-forest);
    margin: 18px 0;
    text-align: center;
}

.ritual-title .gold-highlight {
    color: var(--color-gold);
    font-style: italic;
}

.ritual-intro-tagline {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-forest);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.ritual-intro-desc {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: var(--color-charcoal);
    opacity: 0.75;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Interactive Switch */
.ritual-switch-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.ritual-switch {
    position: relative;
    display: flex;
    width: 660px;
    max-width: 100%;
    height: 60px;
    border-radius: 50px;
    border: 1px solid rgba(191, 163, 122, 0.35);
    background: rgba(250, 249, 245, 0.72);
    padding: 4px;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.ritual-switch-bg {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: var(--color-forest);
    border-radius: 50px;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 4px 15px rgba(15, 46, 30, 0.15);
}

.ritual-switch.active-hair .ritual-switch-bg {
    transform: translateX(100%);
}

.ritual-switch-btn {
    flex: 1;
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-gold-dark);
    cursor: pointer;
    z-index: 2;
    transition: color 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 50px;
    min-height: 44px; /* Touch target minimum height */
    outline: none;
}

.ritual-switch-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-gold);
}

.ritual-switch-btn.active {
    color: var(--color-ivory);
}

.ritual-switch-btn:hover:not(.active) {
    color: var(--color-forest);
}

.tab-icon {
    font-size: 1.05rem;
    transition: transform 0.3s ease;
}

.ritual-switch-btn:hover .tab-icon {
    transform: scale(1.15);
}

/* Ritual Content Dynamic Panels */
.ritual-content-panel {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.ritual-sub-header {
    text-align: center;
    margin-bottom: 50px;
}

.ritual-sub-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--color-forest);
    margin-bottom: 10px;
}

.ritual-sub-desc {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--color-gold-dark);
}

/* Cards & Arrows Grid */
.ritual-cards-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    z-index: 5;
}

.ritual-card {
    background: rgba(255, 252, 245, 0.72);
    border: 1px solid rgba(184, 143, 63, 0.25);
    border-radius: 26px;
    padding: 40px 28px 45px;
    box-shadow: 0 15px 40px rgba(40, 30, 10, 0.04);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.3, 1),
                border-color 0.5s ease;
    position: relative;
}

.ritual-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(40, 30, 10, 0.08);
    border-color: rgba(184, 143, 63, 0.45);
}

.ritual-card-number {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--color-gold);
    margin-bottom: 22px;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Step Circle Images & Fallback */
.ritual-card-image-circle {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 26px;
    border: 1px solid rgba(191, 163, 122, 0.25);
    box-shadow: 0 8px 24px rgba(40, 30, 10, 0.05);
    background: linear-gradient(135deg, #fdfbf7 0%, #f7efe1 100%);
    aspect-ratio: 1 / 1;
}

.ritual-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.ritual-card:hover .ritual-card-img {
    transform: scale(1.035);
}

.ritual-card-img.hide {
    display: none;
}

/* Fallback Botanical Placeholder */
.ritual-card-img-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fdfbf7 0%, #f7efe1 100%);
    padding: 20px;
}

.ritual-card-img-placeholder.show {
    display: flex;
}

.placeholder-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
    color: var(--color-gold);
}

.placeholder-text {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-gold-dark);
}

/* Step Typography */
.ritual-card-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.ritual-card-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-forest);
    text-transform: uppercase;
}

.ritual-card-icon {
    width: 18px;
    height: 18px;
    color: var(--color-gold);
    stroke-width: 1.5;
}

.ritual-card-desc {
    font-family: var(--font-sans);
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--color-charcoal);
    opacity: 0.85;
}

/* Connecting Arrows */
.ritual-arrow-connector {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(156, 128, 87, 0.3);
    z-index: 10;
    pointer-events: none;
    top: 180px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1),
                background-color 0.3s ease;
}

.ritual-arrow-connector svg {
    width: 16px;
    height: 16px;
    color: var(--color-ivory);
    stroke-width: 2.5;
}

.ritual-arrow-connector-1 { left: calc(25% - 16px); }
.ritual-arrow-connector-2 { left: calc(50% - 16px); }
.ritual-arrow-connector-3 { left: calc(75% - 16px); }

/* Horizontal shift on card hover */
.ritual-cards-container:has(.ritual-card-1:hover) .ritual-arrow-connector-1 { transform: translateX(4px); }
.ritual-cards-container:has(.ritual-card-2:hover) .ritual-arrow-connector-1 { transform: translateX(-4px); }
.ritual-cards-container:has(.ritual-card-2:hover) .ritual-arrow-connector-2 { transform: translateX(4px); }
.ritual-cards-container:has(.ritual-card-3:hover) .ritual-arrow-connector-2 { transform: translateX(-4px); }
.ritual-cards-container:has(.ritual-card-3:hover) .ritual-arrow-connector-3 { transform: translateX(4px); }
.ritual-cards-container:has(.ritual-card-4:hover) .ritual-arrow-connector-3 { transform: translateX(-4px); }

/* Result Information Strip */
.ritual-result-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 252, 245, 0.55);
    border: 1px solid rgba(191, 163, 122, 0.22);
    border-radius: 20px;
    padding: 22px 40px;
    margin-top: 60px;
    gap: 30px;
    backdrop-filter: blur(8px);
}

.ritual-result-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ritual-result-eyebrow {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-forest);
    white-space: nowrap;
}

.ritual-result-text {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-charcoal);
    opacity: 0.8;
}

.ritual-result-labels {
    display: flex;
    align-items: center;
    gap: 30px;
}

.ritual-label-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-forest);
    white-space: nowrap;
}

.ritual-label-icon {
    width: 18px;
    height: 18px;
    color: var(--color-gold);
    stroke-width: 1.5;
}

/* Bottom Quotes & Close */
.ritual-closing {
    text-align: center;
    margin-top: 90px;
}

.closing-quote-top {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    color: var(--color-forest);
    font-weight: 400;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.closing-quote-italic {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-style: italic;
    color: var(--color-gold-dark);
    margin-bottom: 25px;
}

.ritual-closing .closing-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
    gap: 15px;
}

.ritual-closing .closing-line {
    height: 1px;
    background: linear-gradient(90deg, rgba(191, 163, 122, 0) 0%, rgba(191, 163, 122, 0.3) 50%, rgba(191, 163, 122, 0) 100%);
    width: 80px;
}

.ritual-closing .closing-leaf {
    color: var(--color-gold);
    opacity: 0.8;
}

/* ─── Scroll Reveal Animations for Section 05 ───────────────── */
.ritual-section .reveal-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

.ritual-section.active .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveals for cards */
.ritual-section.active .ritual-card.reveal-item:nth-child(1) { transition-delay: 0.1s; }
.ritual-section.active .ritual-card.reveal-item:nth-child(2) { transition-delay: 0.2s; }
.ritual-section.active .ritual-card.reveal-item:nth-child(3) { transition-delay: 0.3s; }
.ritual-section.active .ritual-card.reveal-item:nth-child(4) { transition-delay: 0.4s; }

/* ─── Responsive Media Queries ────────────────────────────── */
@media (max-width: 1350px) {
    .ritual-container {
        padding: 0 30px;
    }
    .ritual-cards-container {
        gap: 20px;
    }
    .ritual-card {
        padding: 35px 20px 40px;
    }
    .ritual-arrow-connector-1 { left: calc(25% - 16px); }
    .ritual-arrow-connector-2 { left: calc(50% - 16px); }
    .ritual-arrow-connector-3 { left: calc(75% - 16px); }
}

@media (max-width: 1200px) {
    .ritual-section {
        padding: 100px 0;
    }
    .ritual-title {
        font-size: 3.5rem;
    }
    .ritual-arrow-connector {
        display: none;
    }
    .ritual-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .ritual-result-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 25px 30px;
    }
    .ritual-result-labels {
        width: 100%;
        flex-wrap: wrap;
        gap: 15px 25px;
    }
}

@media (max-width: 768px) {
    .ritual-section {
        padding: 80px 0;
    }
    .ritual-title {
        font-size: 2.6rem;
    }
    .ritual-intro-tagline {
        font-size: 1.15rem;
    }
    .ritual-intro-desc {
        font-size: 0.95rem;
    }
    .ritual-switch {
        height: 52px;
        margin-bottom: 40px;
    }
    .ritual-switch-btn {
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        gap: 4px;
    }
    .ritual-sub-header {
        margin-bottom: 35px;
    }
    .ritual-sub-title {
        font-size: 1.8rem;
    }
    .ritual-sub-desc {
        font-size: 0.95rem;
    }
    .ritual-cards-container {
        grid-template-columns: 100%;
        gap: 25px;
    }
    .ritual-card {
        padding: 40px 24px;
    }
    .ritual-card-image-circle {
        width: 160px;
        height: 160px;
        margin-bottom: 20px;
    }
    .ritual-result-strip {
        padding: 25px 20px;
        text-align: center;
        align-items: center;
    }
    .ritual-result-info {
        flex-direction: column;
        gap: 8px;
    }
    .ritual-result-eyebrow {
        font-size: 1.1rem;
    }
    .ritual-result-labels {
        justify-content: center;
    }
    .ritual-closing {
        margin-top: 70px;
    }
    .closing-quote-top {
        font-size: 1.4rem;
    }
    .closing-quote-italic {
        font-size: 1.25rem;
    }
}

/* Reduced Motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ritual-section .reveal-item,
    .ritual-card,
    .ritual-card-img,
    .ritual-arrow-connector,
    .ritual-switch-bg {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   SECTION 06: PREMIUM CONTACT & ENQUIRY
   ========================================================================== */
.contact-section {
    position: relative;
    width: 100%;
    background-color: #07110D; /* Deep forest-black identity */
    color: #F5EFE4; /* Warm ivory text */
    padding: 75px 0 0; /* Reduced top gap, continuous closing composition */
    overflow: hidden;
    z-index: 5;
    border-top: 1px solid rgba(198, 161, 91, 0.18);
}

.contact-bg-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, rgba(198, 161, 91, 0.08), transparent 35%);
    pointer-events: none;
    z-index: 1;
}

.contact-container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 4;
}

/* Header */
.contact-header {
    text-align: center;
    margin-bottom: 70px;
}

.contact-header .gold-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.contact-title {
    font-family: var(--font-serif);
    font-size: 3.8rem;
    font-weight: 500;
    line-height: 1.15;
    color: #F5EFE4;
    margin: 18px 0;
    text-align: center;
}

.contact-title .gold-highlight {
    color: #C6A15B; /* --footer-gold */
    font-style: italic;
}

.contact-intro {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: #A9ADA7; /* --footer-muted */
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Two Column Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 100px;
    margin-bottom: 120px;
}

/* Left Side — Enquiry Form */
.contact-form-wrap {
    text-align: left;
    position: relative;
}

.form-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #C6A15B;
    display: block;
    margin-bottom: 8px;
}

.form-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 500;
    color: #F5EFE4;
    margin-bottom: 40px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 35px;
    margin-bottom: 40px;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #C6A15B;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.form-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(245, 239, 228, 0.20);
    padding: 14px 0;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    color: #F5EFE4;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0;
}

.form-input::placeholder {
    color: rgba(245, 239, 228, 0.40);
    font-weight: 300;
}

.form-input:focus {
    border-bottom-color: #C6A15B;
    box-shadow: 0 1px 0 rgba(198, 161, 91, 0.15);
}

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

/* Custom Dropdown Styling */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #C6A15B;
    pointer-events: none;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 25px;
}

.form-select option {
    background-color: #0C1913; /* Darker green surface */
    color: #F5EFE4;
    padding: 10px;
}

/* Submit Button */
.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #C6A15B;
    color: #07110D;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    padding: 18px 38px;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease;
    outline: none;
}

.btn-submit:hover {
    background-color: #d3b06c;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(198, 161, 91, 0.22);
}

.btn-submit .btn-arrow {
    transition: transform 0.3s ease;
}

.btn-submit:hover .btn-arrow {
    transform: translateX(4px);
}

/* Validation Message */
.error-msg {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    color: #E27C62; /* Soft warm terracotta */
    margin-top: 6px;
    min-height: 18px;
    display: block;
    font-weight: 400;
}

/* Success State styling */
.form-success-state {
    padding: 60px 40px;
    border: 1px solid rgba(198, 161, 91, 0.25);
    background-color: #0C1913;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(7, 17, 13, 0.2);
    animation: successFadeIn 0.5s ease forwards;
}

@keyframes successFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1px solid rgba(198, 161, 91, 0.35);
    color: #C6A15B;
    margin-bottom: 25px;
    background: rgba(198, 161, 91, 0.05);
}

.success-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: #F5EFE4;
    margin-bottom: 12px;
}

.success-desc {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    color: #A9ADA7;
    line-height: 1.6;
}

/* Right Side — Contact Details */
.contact-info-wrap {
    text-align: left;
    position: relative;
}

.info-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #C6A15B;
    display: block;
    margin-bottom: 8px;
}

.info-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 500;
    color: #F5EFE4;
    margin-bottom: 22px;
}

.info-desc {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    line-height: 1.65;
    color: #A9ADA7;
    margin-bottom: 45px;
}

.contact-details {
    margin-bottom: 45px;
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(245, 239, 228, 0.08);
}

.contact-row:last-child {
    border-bottom: none;
}

.contact-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(198, 161, 91, 0.30);
    color: #C6A15B;
    flex-shrink: 0;
}

.contact-icon-box svg {
    width: 18px;
    height: 18px;
}

.contact-text-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-row-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #C6A15B;
}

.contact-row-value {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #F5EFE4;
    text-decoration: none;
    font-style: normal;
    transition: color 0.3s ease;
    line-height: 1.5;
}

a.contact-row-value:hover {
    color: #C6A15B;
}

/* WhatsApp CTA */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 1px solid rgba(198, 161, 91, 0.40);
    color: #F5EFE4;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 16px 32px;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.btn-whatsapp:hover {
    background-color: rgba(198, 161, 91, 0.08);
    border-color: #C6A15B;
    transform: translateY(-1px);
}

/* Botanical Decorations */
.contact-botanical-decor {
    position: absolute;
    color: #C6A15B;
    opacity: 0.04;
    pointer-events: none;
    z-index: 2;
}

.contact-botanical-left {
    left: -20px;
    bottom: 240px;
    width: 140px;
}

.contact-botanical-right {
    right: -20px;
    top: 140px;
    width: 140px;
}

/* Footer Separation Divider */
.contact-footer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 161, 91, 0.35), transparent);
    margin: 100px 0 90px;
}

/* ==========================================================================
   MAIN FOOTER AREA
   ========================================================================== */
.footer-area {
    padding-bottom: 60px;
    position: relative;
    z-index: 4;
}

.footer-container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 80px;
    text-align: left;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* Brand Column */
.footer-logo-image {
    height: 76px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 20px;
    align-self: flex-start;
}

.brand-col .footer-tagline {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    color: #C6A15B;
    margin-bottom: 15px;
}

.brand-col .footer-brand-desc {
    font-family: var(--font-sans);
    font-size: 0.94rem;
    line-height: 1.7;
    color: #A9ADA7;
    max-width: 320px;
}

/* Navigation Links */
.footer-accordion-header {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #C6A15B;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 28px;
    text-align: left;
    cursor: default;
    padding: 0;
    outline: none;
}

.footer-accordion-header .accordion-icon {
    display: none;
    color: #C6A15B;
}

.footer-links-wrapper {
    width: 100%;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links a {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #A9ADA7;
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding: 2px 0;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #F5EFE4;
}

/* Tiny gold line underline animation */
.footer-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #C6A15B;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-cta-line {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #A9ADA7;
    margin-top: 10px;
    border-top: 1px solid rgba(245, 239, 228, 0.06);
    padding-top: 15px;
}

.footer-cta-line .footer-cta-link {
    color: #C6A15B;
    font-weight: 600;
}

.footer-cta-line .footer-cta-link::after {
    display: none;
}

.footer-cta-line .footer-cta-link:hover {
    color: #F5EFE4;
}

/* Bottom Footer Bar */
.footer-bottom-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(245, 239, 228, 0.08);
    margin: 70px 0 35px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer-copyright p {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: #A9ADA7;
    opacity: 0.85;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(198, 161, 91, 0.20);
    color: #A9ADA7;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.footer-socials a:hover {
    color: #C6A15B;
    border-color: #C6A15B;
    background-color: rgba(198, 161, 91, 0.05);
}

.footer-socials svg {
    width: 16px;
    height: 16px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.footer-bottom-links a {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: #A9ADA7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #C6A15B;
}

/* ─── Scroll Reveal Animations for Section 06 ───────────────── */
.contact-section .reveal-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Left Form slides from left slightly */
.contact-section .contact-form-wrap.reveal-item {
    transform: translate(-20px, 15px);
}

/* Right Info slides from right slightly */
.contact-section .contact-info-wrap.reveal-item {
    transform: translate(20px, 15px);
}

.contact-section.active .reveal-item {
    opacity: 1;
    transform: translate(0, 0);
}

/* ─── Responsive Media Queries ────────────────────────────── */
@media (max-width: 1200px) {
    .contact-layout {
        gap: 60px;
    }
    .footer-columns {
        gap: 40px;
    }
}

@media (max-width: 991px) {
    .contact-title {
        font-size: 3.2rem;
    }
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 70px;
        margin-bottom: 80px;
    }
    .contact-section .contact-form-wrap.reveal-item,
    .contact-section .contact-info-wrap.reveal-item {
        transform: translateY(20px);
    }
    .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 50px 40px;
    }
    .brand-col {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 100px 0 0;
    }
    .contact-container {
        padding: 0 24px;
    }
    .contact-title {
        font-size: 2.5rem;
    }
    .form-title, .info-title {
        font-size: 1.85rem;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .form-group.full-width {
        grid-column: auto;
    }
    .btn-submit {
        width: 100%;
    }
    .footer-container {
        padding: 0 24px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    .footer-bottom-links {
        order: 3;
        justify-content: center;
    }
    .footer-socials {
        order: 2;
        justify-content: center;
    }
    .footer-copyright {
        order: 1;
    }
}

/* Mobile Accordions (below 600px) */
@media (max-width: 600px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .brand-col {
        grid-column: auto;
        padding-bottom: 40px;
        border-bottom: 1px solid rgba(198, 161, 91, 0.1);
        margin-bottom: 15px;
    }
    .footer-accordion-header {
        cursor: pointer;
        padding: 20px 0;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(198, 161, 91, 0.1);
        display: flex;
    }
    .footer-accordion-header .accordion-icon {
        display: block;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.3, 1);
    }
    .footer-accordion-header[aria-expanded="true"] .accordion-icon {
        transform: rotate(45deg);
    }
    .footer-links-wrapper {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.25, 1, 0.3, 1);
    }
    .footer-links {
        padding: 20px 0;
        gap: 14px;
    }
}

/* Accessibility Focus Visible states */
.form-input:focus-visible,
.btn-submit:focus-visible,
.btn-whatsapp:focus-visible,
.footer-links a:focus-visible,
.footer-socials a:focus-visible,
.footer-bottom-links a:focus-visible,
.footer-accordion-header:focus-visible {
    outline: 2px solid #C6A15B;
    outline-offset: 4px;
}

/* Reduced Motion preference */
@media (prefers-reduced-motion: reduce) {
    .contact-section .reveal-item,
    .btn-submit,
    .btn-submit .btn-arrow,
    .footer-accordion-header .accordion-icon,
    .footer-links-wrapper,
    .footer-links a::after {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    .contact-section .contact-form-wrap.reveal-item,
    .contact-section .contact-info-wrap.reveal-item {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   ORDER MODAL & CART SELECTION (GLASSMORPHISM)
   ========================================================================== */
.order-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 17, 13, 0.55); /* Translucent forest-black overlay */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.order-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.order-modal-container {
    background-color: rgba(245, 239, 228, 0.90); /* Translucent ivory glass container */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(198, 161, 91, 0.28);
    box-shadow: 0 35px 80px rgba(7, 17, 13, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.40);
    width: 95%;
    max-width: 960px; /* Wider layout for columns */
    max-height: 90vh;
    border-radius: 24px;
    padding: 40px 45px;
    position: relative;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(198, 161, 91, 0.3) transparent;
    transform: translateY(25px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Two-column checkout layout */
.order-two-columns {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: start;
}

.order-form-grid-modal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
}

.order-modal-overlay.active .order-modal-container {
    transform: translateY(0);
}

/* Scrollbar Customization for Modal Container */
.order-modal-container::-webkit-scrollbar {
    width: 6px;
}
.order-modal-container::-webkit-scrollbar-thumb {
    background-color: rgba(198, 161, 91, 0.3);
    border-radius: 4px;
}

/* Close Button */
.order-modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: transparent;
    border: 1px solid rgba(198, 161, 91, 0.20);
    color: var(--color-charcoal);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    outline: none;
    z-index: 10;
}

.order-modal-close:hover {
    background-color: rgba(198, 161, 91, 0.08);
    border-color: #C6A15B;
    transform: rotate(90deg);
}

/* Header */
.order-modal-header {
    text-align: center;
    margin-bottom: 35px;
}

.order-modal-title {
    font-family: var(--font-serif);
    font-size: 2.3rem;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 10px 0;
}

.order-modal-subtitle {
    font-family: var(--font-sans);
    font-size: 0.94rem;
    color: var(--color-forest);
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
    opacity: 0.85;
}

/* Form Titles */
.order-section-title {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #C6A15B;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(198, 161, 91, 0.15);
    padding-bottom: 8px;
    margin-bottom: 25px;
}

/* Cart Selector */
.order-cart-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

/* Dynamic Accordion Cart Cards */
.cart-product-card {
    background-color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(198, 161, 91, 0.12);
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 14px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cart-product-card:hover {
    background-color: rgba(255, 255, 255, 0.70);
    border-color: rgba(198, 161, 91, 0.25);
    box-shadow: 0 8px 24px rgba(7, 17, 13, 0.04);
}

.cart-product-card.active {
    background-color: rgba(255, 255, 255, 0.85);
    border-color: rgba(198, 161, 91, 0.35);
}

.cart-product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cart-product-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-product-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0;
}

.cart-product-price-range {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #C6A15B;
    font-weight: 600;
    margin: 0;
}

.cart-product-summary {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-forest);
    opacity: 0.8;
    margin: 0;
    font-style: italic;
}

/* Toggle Buttons */
.btn-cart-toggle {
    background-color: #0C1913;
    color: #F5EFE4;
    border: 1px solid rgba(198, 161, 91, 0.3);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    outline: none;
    flex-shrink: 0;
}

.btn-cart-toggle:hover {
    background-color: #102119;
    border-color: #C6A15B;
    color: #C6A15B;
}

.btn-cart-toggle.has-items {
    background-color: rgba(198, 161, 91, 0.1);
    color: #C6A15B;
    border-color: #C6A15B;
}

.btn-cart-toggle.has-items:hover {
    background-color: #C6A15B;
    color: #07110D;
}

.btn-cart-toggle.active {
    background-color: #C6A15B;
    color: #07110D;
    border-color: #C6A15B;
}

/* Variants Drawer sliding */
.cart-product-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.drawer-divider {
    height: 1px;
    background-color: rgba(198, 161, 91, 0.12);
    margin: 14px 0;
}

.drawer-variants-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 5px;
}

.drawer-variant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.variant-details {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 2px;
}

.variant-name {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.variant-price {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-forest);
    opacity: 0.8;
}

/* Variant Counter box */
.variant-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(198, 161, 91, 0.15);
    border-radius: 50px;
    padding: 3px 10px;
}

.var-qty-btn {
    background: transparent;
    border: none;
    font-size: 0.75rem;
    color: var(--color-charcoal);
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease;
    outline: none;
}

.var-qty-btn:hover {
    color: #C6A15B;
}

.var-qty-val {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
}

/* Customer Fields Grid */
.order-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 30px;
    margin-bottom: 35px;
    text-align: left;
}

.order-form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.order-form-group.full-width {
    grid-column: span 2;
}

.order-form-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #C6A15B;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.order-form-input {
    background-color: rgba(255, 255, 255, 0.40);
    border: 1px solid rgba(198, 161, 91, 0.20);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    color: var(--color-charcoal);
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.order-form-input::placeholder {
    color: rgba(7, 17, 13, 0.35);
}

.order-form-input:focus {
    border-color: #C6A15B;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 15px rgba(198, 161, 91, 0.08);
}

.order-form-textarea {
    min-height: 90px;
    resize: vertical;
    border-radius: 12px;
}

.order-error-text {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: #E27C62;
    margin-top: 5px;
    min-height: 15px;
    display: block;
}

/* Submit Button */
.btn-order-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #C6A15B;
    color: #07110D;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    padding: 18px 0;
    width: 100%;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease;
    outline: none;
}

.btn-order-submit:hover {
    background-color: #d3b06c;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(198, 161, 91, 0.22);
}

.btn-order-submit:hover .btn-arrow {
    transform: translateX(4px);
}

/* Success Layout */
.order-modal-success {
    text-align: center;
    padding: 40px 10px 10px;
    animation: orderSuccessFadeIn 0.5s ease forwards;
}

@keyframes orderSuccessFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.order-success-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(198, 161, 91, 0.35);
    color: #C6A15B;
    margin-bottom: 25px;
    background: rgba(198, 161, 91, 0.05);
}

.order-success-title {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    color: var(--color-charcoal);
    margin-bottom: 12px;
}

.order-success-desc {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: var(--color-forest);
    opacity: 0.85;
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto 35px;
}

.btn-order-success-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(198, 161, 91, 0.40);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 16px 38px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    outline: none;
}

.btn-order-success-close:hover {
    background-color: rgba(198, 161, 91, 0.06);
    border-color: #C6A15B;
}

/* Focus Visible for modal elements */
.order-form-input:focus-visible,
.btn-order-submit:focus-visible,
.btn-order-success-close:focus-visible,
.order-modal-close:focus-visible {
    outline: 2px solid #C6A15B;
    outline-offset: 4px;
}

/* Responsive constraints for order modal */
@media (max-width: 850px) {
    .order-two-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .order-modal-container {
        padding: 35px 24px;
        max-height: 92vh;
    }
    .order-modal-title {
        font-size: 1.85rem;
    }
}

@media (max-width: 480px) {
    .order-cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }
    .cart-item-quantity {
        align-self: flex-end;
    }
}

/* Floating WhatsApp Badge */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #0C1913; /* Forest black */
    border: 1px solid rgba(198, 161, 91, 0.40); /* Luxury gold border */
    color: #C6A15B; /* Gold icon */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(7, 17, 13, 0.25);
    z-index: 999;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.floating-whatsapp:hover {
    transform: scale(1.08) translateY(-2px);
    border-color: #C6A15B;
    background-color: #102119;
}

.whatsapp-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(198, 161, 91, 0.35);
    pointer-events: none;
    animation: whatsappPulse 2.2s infinite ease-in-out;
}

@keyframes whatsappPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.floating-whatsapp:focus-visible {
    outline: 2px solid #C6A15B;
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .floating-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
}

/* Segmented Switch for Modal */
.modal-switch-wrapper {
    position: relative;
    display: flex;
    background-color: rgba(198, 161, 91, 0.06);
    border: 1px solid rgba(198, 161, 91, 0.20);
    border-radius: 50px;
    padding: 3px;
    width: 290px;
    margin: 0 auto 30px;
    z-index: 10;
}

.modal-switch-bg {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background-color: #C6A15B; /* Gold pill */
    border-radius: 50px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1);
    z-index: 1;
}

.modal-switch-btn {
    position: relative;
    flex: 1;
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-charcoal);
    padding: 11px 0;
    cursor: pointer;
    border-radius: 50px;
    transition: color 0.4s ease;
    z-index: 2;
    text-transform: uppercase;
    outline: none;
}

.modal-switch-btn.active {
    color: #07110D !important;
}

.modal-switch-btn:focus-visible {
    outline: 2px solid #C6A15B;
    outline-offset: 2px;
}

/* Custom Phone Input Container */
.phone-input-container {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(198, 161, 91, 0.20);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.50);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

/* For dark section (Section 6) contact form */
.contact-section .phone-input-container {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(198, 161, 91, 0.15);
}

.phone-input-container:focus-within {
    border-color: #C6A15B;
    box-shadow: 0 0 0 1px #C6A15B;
}

.country-code-selector {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    border-right: 1px solid rgba(198, 161, 91, 0.20);
    user-select: none;
    z-index: 15;
}

.contact-section .country-code-selector {
    border-right-color: rgba(198, 161, 91, 0.15);
}

.selected-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--color-charcoal);
}

.contact-section .selected-flag {
    color: var(--color-cream);
}

.selected-flag .chevron {
    transition: transform 0.3s ease;
    opacity: 0.7;
}

.country-code-selector.open .selected-flag .chevron {
    transform: rotate(180deg);
}

/* Custom Dropdown List */
.country-dropdown-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 250px;
    max-height: 220px;
    overflow-y: auto;
    background-color: rgba(245, 239, 228, 0.98); /* Ivory glass matching modal */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(198, 161, 91, 0.30);
    border-radius: 12px;
    box-shadow: 0 15px 45px rgba(7, 17, 13, 0.18);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

/* For dark section (Section 6) custom drop theme */
.contact-section .country-dropdown-list {
    background-color: rgba(12, 25, 19, 0.98); /* Forest black glass */
    border-color: rgba(198, 161, 91, 0.25);
}

.country-dropdown-list.show {
    display: flex;
}

.country-search-box {
    padding: 8px;
    border-bottom: 1px solid rgba(198, 161, 91, 0.12);
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
}

.country-search-input {
    width: 100%;
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    border: 1px solid rgba(198, 161, 91, 0.20);
    border-radius: 6px;
    outline: none;
    background-color: rgba(255, 255, 255, 0.50);
    color: var(--color-charcoal);
}

.contact-section .country-search-input {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-cream);
    border-color: rgba(198, 161, 91, 0.15);
}

.country-list-items {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(198, 161, 91, 0.3) transparent;
}

.country-list-items::-webkit-scrollbar {
    width: 4px;
}
.country-list-items::-webkit-scrollbar-thumb {
    background-color: rgba(198, 161, 91, 0.3);
    border-radius: 4px;
}

.country-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: var(--color-charcoal);
}

.contact-section .country-item {
    color: var(--color-cream);
}

.country-item:hover {
    background-color: rgba(198, 161, 91, 0.12);
    color: var(--color-charcoal);
}

.contact-section .country-item:hover {
    background-color: rgba(198, 161, 91, 0.20);
    color: #F5EFE4;
}

.country-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-name {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.country-dial {
    font-weight: 600;
    color: #C6A15B;
    font-size: 0.78rem;
}

/* Remove border/styling from inner text field */
.phone-input-container .tel-input-field {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex: 1;
    padding: 10px 14px;
    outline: none !important;
    box-shadow: none !important;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--color-charcoal);
    width: 100%;
}

.contact-section .phone-input-container .tel-input-field {
    color: var(--color-cream);
}

.flag-icon-img {
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(7, 17, 13, 0.18);
    flex-shrink: 0;
}