/* ==========================================================================
   Base Styles & Variables
   ========================================================================== */
   :root {
    /* Colors */
    --color-primary: #7E5A9B;       /* Deep Purple */
    --color-primary-rgb: 126, 90, 155; /* RGB for opacity */
    --color-highlight: #A17DB5;     /* Lighter Purple */
    --color-secondary: #F5E6B3;     /* Soft Cream/Yellow */
    --color-background: #f8f8f8;    /* Slightly off-white background */
    --color-white: #ffffff;
    --color-text: #2B2E4A;          /* Dark Blue/Gray Text */
    --color-text-light: #5e6381;    /* Lighter text for secondary info */
    --color-accent: #7B68EE;        /* Medium Slate Blue Accent */
    --color-shadow: rgba(43, 46, 74, 0.1); /* Subtle shadow based on text color */
    --color-border: #e0e0e0;        /* Light border color */
    --color-error: #d9534f;         /* Error message color */
    --color-gradient-start: #a17db5; /* Lighter purple for gradient */
    --color-gradient-end: #7e5a9b;   /* Primary purple for gradient */
    --color-gradient-secondary-start: #f5e6b3; /* Cream */
    --color-gradient-secondary-end: #e0d19e; /* Darker Cream */

    /* Spacing */
    --space-xs: 0.5rem;  /* 8px */
    --space-sm: 1rem;    /* 16px */
    --space-md: 2rem;    /* 32px */
    --space-lg: 3rem;    /* 48px */
    --space-xl: 4rem;    /* 64px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --line-height-heading: 1.2;

    /* Tap Target */
    --tap-target-size: 44px;

    /* Header Height */
    --header-height: 80px; /* Adjusted for slightly larger logo/padding */
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: var(--line-height-base);
    background-color: var(--color-background);
    padding-top: var(--header-height); /* Space for fixed header */
    transition: background-color var(--transition-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--line-height-heading);
    color: var(--color-text);
    margin-top: 0; /* Remove default top margin */
    margin-bottom: var(--space-sm); /* Consistent bottom margin */
}

h1 { font-size: 2.5rem; margin-bottom: var(--space-md); font-weight: 700; }
h2 { font-size: 2rem; margin-bottom: calc(var(--space-md) * 0.85); font-weight: 700; color: var(--color-primary); }
h3 { font-size: 1.5rem; margin-bottom: calc(var(--space-sm) * 1.25); font-weight: 600; color: var(--color-text); }
h4 { font-size: 1.2rem; margin-bottom: var(--space-xs); font-weight: 600; }

/* Paragraphs */
p {
    margin-bottom: var(--space-sm);
    max-width: 75ch; /* Improve readability */
}
p:last-child {
    margin-bottom: 0; /* Avoid extra space at end of containers */
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover, a:focus {
    color: var(--color-highlight);
    text-decoration: underline; /* Add underline on hover/focus for clarity */
}
a:focus-visible { /* Enhanced focus outline */
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Lists */
ul, ol {
    list-style: none;
    padding-left: 0; /* Remove default padding */
    margin-bottom: var(--space-sm);
}
li {
    margin-bottom: var(--space-xs);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md); /* Default rounded corners for images */
}

/* Forms */
input,
textarea,
button,
select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

input[type="text"],
input[type="email"],
textarea,
select {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    min-height: var(--tap-target-size);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(126, 90, 155, 0.2); /* Subtle focus ring */
    outline: none;
}
textarea {
    resize: vertical;
    min-height: 120px;
}
label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: bold;
    color: var(--color-text);
}
.form-group { /* Helper for form layout */
    margin-bottom: var(--space-md);
}
.error-message {
    color: var(--color-error);
    font-size: 0.875rem;
    display: block;
    margin-top: -0.5rem; /* Pull up slightly */
    margin-bottom: var(--space-sm);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--color-error);
}


/* ==========================================================================
   Reusable Components & Layout
   ========================================================================== */

/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-sm); /* Add side padding */
    padding-right: var(--space-sm);
}

/* Utility for centering text */
.text-center {
    text-align: center;
}

/* Section Styling */
.section {
    padding: 4rem 1rem; /* Default padding */
    text-align: center;
}

/* Alternating section background colors */
.section:nth-of-type(odd) {
    background-color: var(--color-background); /* Light background */
}

.section:nth-of-type(even) {
    background-color: #f0f0f5; /* Slightly darker background */
}

/* Special section backgrounds */
.meet-karen {
    background-color: #f5f0ff !important; /* Light purple tint */
}

.testimonials-preview {
    background-color: #f0f5ff !important; /* Light blue tint */
}

.cta-strip {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important; /* Primary color with low opacity */
}

/* Make the "Ready to discover" section darker */
.cta-strip {
    background-color: rgba(var(--color-primary-rgb), 0.15) !important;
    padding: var(--space-xl) var(--space-md);
}

/* Enhance visual hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--line-height-heading);
    color: var(--color-text);
    margin-top: 0; /* Remove default top margin */
    margin-bottom: var(--space-sm); /* Consistent bottom margin */
}

h1 { 
    font-size: 2.5rem; 
    margin-bottom: var(--space-md);
    font-weight: 700;
} 

h2 { 
    font-size: 2rem; 
    margin-bottom: calc(var(--space-md) * 0.85);
    font-weight: 700;
    color: var(--color-primary);
} 

h3 { 
    font-size: 1.5rem; 
    margin-bottom: calc(var(--space-sm) * 1.25);
    font-weight: 600;
    color: var(--color-text);
} 

h4 { 
    font-size: 1.2rem; 
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    
    .section {
        padding: 3rem 1rem;
    }
}

/* Cards (used for services, testimonials etc.) */
.card {
    background-color: var(--color-white);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px var(--color-shadow);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    height: 100%; /* Ensure cards in a grid have same height */
    display: flex;
    flex-direction: column;
    text-align: center; /* Ensure card content is centered */
}
.card:hover {
    transform: translateY(-6px) rotate(-0.5deg); /* Slightly more lift and rotation */
    box-shadow: 0 10px 20px rgba(43, 46, 74, 0.2); /* Stronger shadow */
    border: 1px solid var(--color-highlight); /* Add subtle border highlight on hover */
}
.card h3 {
    color: var(--color-primary);
}
.card .btn { /* Button specific styling within cards */
    margin-top: auto; /* Push button to bottom */
    align-self: center; /* Center button inside card */
}

/* Grid Layout */
.grid {
    display: grid;
    gap: var(--space-md);
}
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Responsive grid */

/* Content Grid (Image + Text) */
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
    margin-bottom: var(--space-md);
}

.content-grid .text-content {
    text-align: center;
}

.content-grid .image-content img {
    border-radius: var(--radius-lg); /* Larger radius for feature images */
    box-shadow: 0 6px 15px var(--color-shadow);
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .content-grid .text-content {
        padding: 0 var(--space-md);
    }
    
    /* Variant with image on right */
    .content-grid.image-right {
        grid-template-areas: "text image";
    }
    
    .content-grid.image-right .text-content {
        grid-area: text;
    }
    
    .content-grid.image-right .image-content {
        grid-area: image;
    }
    
    /* Variant with image on left */
    .content-grid.image-left {
        grid-template-areas: "image text";
    }
    
    .content-grid.image-left .text-content {
        grid-area: text;
    }
    
    .content-grid.image-left .image-content {
        grid-area: image;
    }
}

/* CTA Strip & Affirmation Block Styling */
.cta-strip,
.affirmation-block {
    text-align: center;
    padding: 100px var(--space-md);
    position: relative;
    overflow: hidden;
}

.cta-strip h2,
.affirmation-block h2 {
    margin-bottom: var(--space-md);
}

.cta-strip p,
.affirmation-block p {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-md);
}

.cta-strip .btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.affirmation-block {
    background: 
        linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 50%, #f8f9ff 100%),
        radial-gradient(ellipse at center, rgba(126, 90, 155, 0.1) 0%, transparent 70%);
}

.affirmation-block p {
    font-size: 1.8rem;
    font-style: italic;
    color: var(--color-primary);
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(126, 90, 155, 0.1);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.cta-strip {
    background: 
        linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15) 0%, rgba(161, 125, 181, 0.1) 50%, rgba(var(--color-primary-rgb), 0.12) 100%),
        radial-gradient(ellipse at top left, rgba(126, 90, 155, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(161, 125, 181, 0.06) 0%, transparent 60%);
}

.cta-strip h2 {
    font-size: 2.5rem;
    margin-bottom: 24px;
    color: var(--color-primary);
    text-shadow: 0 2px 4px rgba(126, 90, 155, 0.1);
}

.cta-strip p {
    font-size: 1.2rem;
    margin-bottom: 32px;
    color: var(--color-text);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons */
.btn,
button[type="submit"] { /* Apply base button styles to submit buttons too */
    display: inline-block;
    padding: calc(var(--space-sm) - 2px) var(--space-md); /* Adjust padding for border */
    font-family: var(--font-body);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent; /* Reserve space for border on hover/focus */
    transition: background-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
    min-height: var(--tap-target-size);
    min-width: var(--tap-target-size);
    box-shadow: 0 2px 4px var(--color-shadow);
    line-height: 1.5; /* Ensure text centers vertically */
}
.btn:hover,
button[type="submit"]:hover {
    transform: translateY(-3px); /* Slightly more lift */
    box-shadow: 0 6px 12px rgba(43, 46, 74, 0.2); /* Slightly stronger shadow */
    text-decoration: none; /* Remove underline added by default link hover */
}
.btn:focus-visible,
button[type="submit"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    transform: translateY(-1px) scale(1.02); /* Add subtle scale */
    box-shadow: 0 3px 6px rgba(43, 46, 74, 0.12); /* Slightly adjusted shadow for focus */
}

.btn-primary {
    background-image: linear-gradient(to right bottom, var(--color-gradient-start), var(--color-gradient-end));
    background-size: 150% auto; /* For hover effect */
    color: var(--color-white);
    border: none; /* Remove border if using gradient background */
}
.btn-primary:hover,
.btn-primary:focus {
    background-position: right center; /* Change gradient direction on hover */
    background-color: var(--color-highlight); /* Fallback */
    color: var(--color-white);
}

.btn-secondary {
    background-image: linear-gradient(to right, var(--color-gradient-secondary-start), var(--color-gradient-secondary-end));
    background-size: 150% auto;
    color: var(--color-text);
    border: none;
    /* border-color: var(--color-secondary); */ /* Match background */
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-position: right center;
    background-color: #E0D19E; /* Slightly darker secondary */
    color: var(--color-text);
    /* border-color: #E0D19E; */
}

/* Service Cards Specific */
.services-preview .service-card { /* Alias for card */
    text-align: center;
}
.services-preview .service-card:hover {
    transform: translateY(-5px) rotate(-0.5deg); /* Apply consistent hover */
    box-shadow: 0 8px 16px rgba(43, 46, 74, 0.15);
}
.services-preview .service-card h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}
.services-preview .service-card p {
    color: var(--color-text-light); /* Slightly lighter text for description */
    margin-bottom: var(--space-md); /* More space before button */
    margin-left: auto;
    margin-right: auto;
}
.services-preview .service-card .btn-secondary {
    margin-top: auto; /* Push button to bottom */
    align-self: center; /* Center button */
}

/* Testimonial Cards Specific */
.testimonials-preview .testimonial-card {
    text-align: center;
}
.testimonials-preview .testimonial-card p {
    font-style: italic;
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
    flex-grow: 1; /* Make text fill space */
    margin-left: auto;
    margin-right: auto;
}
.testimonials-preview .testimonial-card cite {
    font-style: normal;
    color: var(--color-text-light);
    margin-top: var(--space-sm); /* Space above cite */
    display: block; /* Ensure it's on its own line */
    font-weight: bold;
}

/* Calm Studio In-Person Readings Section */
.calm-studio {
    background: linear-gradient(135deg, #f8f5ff 0%, #f0f0ff 50%, #faf8ff 100%);
    position: relative;
    overflow: hidden;
    padding: var(--space-xxxl) 0;
}

.calm-studio::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    z-index: -1;
    background: 
        radial-gradient(circle at 20% 30%, rgba(161, 125, 181, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(126, 90, 155, 0.06) 0%, transparent 50%);
    filter: blur(40px);
}

/* Main Content Container */
.calm-studio-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xxl);
}

/* Header Section */
.calm-studio-header {
    text-align: center;
    margin-bottom: var(--space-xxl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--space-lg);
}

.calm-studio .section-title {
    color: var(--color-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 4px rgba(126, 90, 155, 0.1);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.calm-studio .section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 5px;
    margin: var(--space-xl) auto var(--space-lg);
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-highlight) 100%);
    border-radius: 3px;
    opacity: 0.9;
}

.location-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
}


/* Grid Layout */
.calm-studio-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 40px;
    align-items: center;
    margin-top: var(--space-xxl);
}

/* Image Section */
.calm-studio-image {
    position: relative;
}

.image-wrapper {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 100px rgba(161, 125, 181, 0.25);
    height: 560px;
    transition: all 0.5s ease;
    transform: perspective(1000px) rotateY(-2deg);
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-wrapper:hover {
    transform: perspective(1000px) rotateY(0deg) translateY(-12px);
    box-shadow: 0 40px 120px rgba(161, 125, 181, 0.35);
}

.image-wrapper:hover img {
    transform: scale(1.03);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    padding: var(--space-xl);
    color: white;
    text-align: center;
}

.overlay-text {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

/* Info Section */
.calm-studio-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: flex-start;
    text-align: left;
    max-width: 65ch;
}

/* Address Card */
.address-card {
    width: 100%;
    max-width: 450px;
    margin-bottom: var(--space-lg);
}

.address-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.4s ease;
}

.address-link:hover {
    transform: translateY(-6px);
}

.address-block {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 245, 255, 0.98) 100%);
    border: 3px solid rgba(161, 125, 181, 0.15);
    border-radius: 28px;
    padding: var(--space-xxxl);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
    box-shadow: 0 20px 60px rgba(161, 125, 181, 0.15);
    transition: all 0.4s ease;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.address-link:hover .address-block {
    transform: translateY(-8px);
    box-shadow: 0 25px 80px rgba(161, 125, 181, 0.25);
    border-color: rgba(161, 125, 181, 0.3);
}

.address-icon {
    font-size: 3.5rem;
    color: var(--color-primary);
    transition: transform 0.4s ease;
    filter: drop-shadow(0 6px 12px rgba(126, 90, 155, 0.3));
    flex-shrink: 0;
}

.address-link:hover .address-icon {
    transform: scale(1.15) rotate(5deg);
}

.address-details {
    text-align: left;
    flex: 1;
}

.studio-name {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    font-weight: 700;
    line-height: 1.2;
}

.address-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.address-line {
    font-size: 1.2rem;
    color: var(--color-text);
    line-height: 1.4;
    font-weight: 500;
}

/* CTA Button */
.calm-studio-cta {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
}

.calm-studio-btn {
    background: linear-gradient(135deg, var(--color-accent) 0%, #a17db5 100%);
    color: white;
    border: none;
    padding: var(--space-xxl) var(--space-xxxl);
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(161, 125, 181, 0.3);
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-lg);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    min-width: 320px;
    justify-content: center;
}

.calm-studio-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.calm-studio-btn:hover::before {
    left: 100%;
}

.calm-studio-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 80px rgba(161, 125, 181, 0.4);
    background: linear-gradient(135deg, #a17db5 0%, var(--color-accent) 100%);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    font-size: 1.4rem;
    transition: transform 0.4s ease;
}

.calm-studio-btn:hover .btn-icon {
    transform: translateX(8px);
}

/* Desktop Enhancements */
@media (min-width: 1024px) {
    .calm-studio {
        padding: var(--space-xxxl) 0 var(--space-xxxxl);
    }
    
    .calm-studio-content {
        padding: 0 var(--space-xxl);
    }
    
    .calm-studio-header {
        margin-bottom: var(--space-xxxl);
        padding-top: var(--space-xl);
    }
    
    .calm-studio-grid {
        gap: 40px;
        margin-top: var(--space-xxxl);
    }
    
    .calm-studio-info {
        gap: var(--space-lg);
    }
    
    .calm-studio-btn {
        padding: var(--space-xxl) var(--space-xxxxl);
        font-size: 1.5rem;
        min-width: 360px;
    }
}

/* Mobile Responsive Design */
@media (max-width: 1023px) {
    .calm-studio {
        padding: var(--space-xl) 0;
    }
    
    .calm-studio-content {
        padding: 0 var(--space-lg);
    }
    
    .calm-studio-header {
        margin-bottom: var(--space-xl);
        padding-top: var(--space-sm);
    }
    
    .calm-studio-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: var(--space-lg);
    }
    
    .calm-studio-image {
        order: 1;
    }
    
    .calm-studio-info {
        order: 2;
        gap: var(--space-lg);
        align-items: center;
        text-align: center;
        max-width: none;
    }
    
    .image-wrapper {
        height: 400px;
    }
    
    .address-card {
        margin-bottom: var(--space-md);
    }
    
    .address-block {
        padding: var(--space-lg);
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    
    .address-details {
        text-align: center;
    }
    
    .address-icon {
        font-size: 2.5rem;
    }
    
    .studio-name {
        font-size: 1.3rem;
        margin-bottom: var(--space-sm);
    }
    
    .address-line {
        font-size: 1rem;
    }
    
    .calm-studio-cta {
        justify-content: center;
        margin-top: var(--space-md);
    }
    
    .calm-studio-btn {
        padding: var(--space-md) var(--space-lg);
        font-size: 1.1rem;
        min-width: 240px;
    }
}

@media (max-width: 480px) {
    .calm-studio-content {
        padding: 0 var(--space-xs);
    }
    
    .calm-studio-header {
        margin-bottom: var(--space-lg);
    }
    
    .calm-studio-grid {
        gap: var(--space-lg);
    }
    
    .image-wrapper {
        height: 300px;
    }
    
    .address-icon {
        font-size: 2rem;
    }
    
    .studio-name {
        font-size: 1.2rem;
    }
    
    .address-line {
        font-size: 0.95rem;
    }
    
    .calm-studio-btn {
        padding: var(--space-sm) var(--space-md);
        font-size: 1rem;
        min-width: 200px;
    }
}


/* Reading Options Highlight */
.reading-options-highlight h2 {
    margin-bottom: 1.5rem;
}

/* Center the introductory paragraph */
.reading-options-highlight .container > p {
    text-align: center;
    margin-left: auto; /* Center block if max-width applies */
    margin-right: auto;
    max-width: 70ch; /* Ensure consistent max-width with other paragraphs */
}

.reading-options-highlight h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    text-align: center; /* Ensure heading is centered */
}

.reading-options-highlight ul {
    list-style: none;
    padding: 0;
    margin: 1rem auto 2rem auto; /* Center list */
    max-width: 500px; /* Constrain width */
    text-align: center; /* Center the list items */
}

.reading-options-highlight li {
    margin-bottom: 0.5rem;
}

.reading-options-highlight .btn {
    margin: 0.5rem;
}

/* Meet Karen Section */
.meet-karen {
    background-color: var(--color-white); /* Keep white or change if needed */
}
.meet-karen img { /* Style for the specific image */
    max-width: 200px; 
    height: auto;
    border-radius: 50%; 
    margin: 2rem auto; 
    display: block;
    border: 4px solid var(--color-accent);
}
.meet-karen p { /* Style for the paragraph under the image */
    max-width: 700px; 
    margin: 0 auto 2rem auto; 
}

.meet-karen .container { /* Added to center button */
    text-align: center;
}

/* Service Section */
.service-section h2, 
.service-section h3 {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.service-section ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: var(--space-md);
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.service-section .btn {
    display: inline-block;
    margin: 32px 0 0 0;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.main-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 5px var(--color-shadow);
    height: var(--header-height);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-md); /* Use consistent spacing */
    max-width: 1400px; /* Limit nav width for very wide screens */
    margin: 0 auto;
}

.logo {
    flex-shrink: 0; /* Prevent logo from shrinking */
    margin-right: var(--space-lg);
}
.logo-image {
    max-height: 75px; /* Increased from 65px for larger logo */
    width: auto;
    border-radius: 0; /* Logos usually don't have rounded corners */
}

.nav-links {
    display: flex;
    gap: var(--space-md); /* Spacing between nav items */
    align-items: center;
    margin: 0;
    padding: 0;
}
.nav-links li {
    margin-bottom: 0; /* Remove bottom margin for horizontal layout */
}
.nav-links a {
    display: flex; /* Use flex for vertical alignment */
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-weight: bold;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    min-height: var(--tap-target-size);
    white-space: nowrap;
}
.nav-links a:hover,
.nav-links a:focus {
    background-color: var(--color-background);
    color: var(--color-primary);
    text-decoration: none; /* Override default link hover */
}
.nav-links a[aria-current="page"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.nav-links .btn-primary { /* Special styling for button in nav */
    padding: calc(var(--space-xs) + 2px) var(--space-md); /* Adjust padding slightly */
    margin-left: var(--space-sm); /* Add space before button */
    box-shadow: none; /* Remove shadow if desired in nav */
}
.nav-links .btn-primary:hover {
    box-shadow: none;
    transform: none; /* Prevent button lift in nav if distracting */
}

/* Mobile Navigation Toggle */
.mobile-nav-toggle {
    display: none; /* Hidden by default on larger screens */
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-text);
    width: var(--tap-target-size);
    height: var(--tap-target-size);
    padding: 0;
    z-index: 1010; /* Ensure it's above nav links when open */
    position: relative; /* For positioning pseudo-elements */
}
.hamburger {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    transition: background-color 0s 0.3s linear; /* Delay background disappearing */
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

/* Mobile Toggle Active State (Using aria-expanded) */
.mobile-nav-toggle[aria-expanded="true"] .hamburger {
    background-color: transparent; /* Middle bar disappears */
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Media Query for Mobile Navigation */
@media (max-width: 767px) {
    .nav-container {
        padding: 0 var(--space-sm); /* Adjust padding for mobile */
    }

    .nav-links {
        position: fixed; /* Changed from absolute */
        top: 0; 
        left: 0; 
        width: 100vw; /* Full width */
        height: 100vh; /* Full height */
        background-color: rgba(var(--color-primary-rgb), 0.97); /* Darker, slightly transparent */
        backdrop-filter: blur(5px); /* Background blur effect */
        box-shadow: none; /* Remove shadow, overlay covers all */
        flex-direction: column;
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically */
        padding: 0; /* Remove padding */
        margin: 0;
        gap: var(--space-md); /* Increase gap between links */

        /* Hide by default, slide in from right */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s;
    }

    /* Use .active class added by JS */
    .nav-links.active { 
        transform: translateX(0);
        visibility: visible;
        /* Remove max-height transitions */
        /* max-height: 100vh; */ 
        /* padding: var(--space-sm) 0; */
    }

    .nav-links li {
        width: auto; /* Allow links to size naturally */
        text-align: center;
        border-bottom: none; /* Remove separator lines */
    }
    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: block; 
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm); 
        justify-content: center; 
        font-size: 1.3rem; /* Larger font size for mobile menu */
        color: var(--color-white); /* White text on dark background */
        font-weight: 400; /* Slightly lighter weight */
    }
    .nav-links a:hover,
    .nav-links a:focus {
        background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight */
        color: var(--color-white);
    }
    .nav-links a[aria-current="page"] {
        background-color: rgba(255, 255, 255, 0.2);
        font-weight: bold;
    }

    .nav-links .btn-primary { /* Adjust button style for mobile menu */
        margin: var(--space-sm) auto; 
        display: inline-block; /* Changed from block */
        width: auto; /* Allow natural width */
        padding: var(--space-sm) var(--space-lg); 
        background-image: linear-gradient(to right, var(--color-gradient-secondary-start), var(--color-gradient-secondary-end)); /* Use secondary gradient */
        color: var(--color-text);
        border: none;
        font-size: 1.2rem; /* Slightly larger button font */
    }
    .nav-links .btn-primary:hover,
    .nav-links .btn-primary:focus {
         background-position: right center;
         background-color: #E0D19E; 
         color: var(--color-text);
    }

    .mobile-nav-toggle {
        display: flex; /* Use flex to center icon */
        align-items: center;
        justify-content: center;
        z-index: 1010; /* Keep above menu */
        position: fixed; /* Fixed position relative to viewport */
        top: calc(var(--header-height) / 2 - var(--tap-target-size) / 2); /* Vertically center in header space */
        right: var(--space-sm); /* Position on the right */
        color: var(--color-text); /* Default color */
        transition: color 0.3s ease;
    }

    /* Change hamburger color when menu is open */
    .mobile-nav-toggle[aria-expanded="true"] {
        color: var(--color-white); /* White X on dark background */
    }

    .mobile-nav-toggle[aria-expanded="true"] .hamburger::before,
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
        background-color: var(--color-white); /* Ensure X bars are white */
    }
}

/* Prevent body scroll when mobile nav is open */
body.nav-open {
    overflow: hidden;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    position: relative; /* Needed for pseudo-element */
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    overflow: hidden; /* Contain video */
    background-color: var(--color-primary); /* Fallback background */
}

#hero-video {
    position: absolute;
    top: 0;  /* Change from 50% */
    left: 0; /* Change from 50% */
    width: 100%; /* Change from auto/min-width */
    height: 100%;/* Change from auto/min-height */
    object-fit: cover; /* Ensure video covers the area, cropping if needed */
    z-index: 0; /* Set z-index relative to parent */
    /* transform: translateX(-50%) translateY(-50%); Remove transform */
    /* background-size: cover; Remove - use object-fit */
    opacity: 0.8; /* Slightly reduce video opacity */
}

/* Page Specific Hero Backgrounds (if not using video) */
body.services .hero { background-image: url('../images/services-hero.jpg'); }
body.testimonials .hero { background-image: url('../images/testimonials-hero.jpg'); } /* Add if needed */
body.faq .hero { background-image: url('../images/faq-hero.jpg'); } /* Add if needed */
body.disclaimer .hero { background-image: url('../images/disclaimer-hero.jpg'); } /* Add if needed */

/* Testimonials Page Hero Text Styles */
body.testimonials .hero-title,
body.testimonials .hero-subtitle {
    color: var(--color-white); /* Ensure white text */
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.7),
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(255, 255, 255, 0.3); /* White glow effect */
    position: relative;
    z-index: 3;
}

/* Subtle Cloud Effect for Testimonials Hero */
body.testimonials .hero {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    position: relative;
    overflow: hidden;
}

body.testimonials .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Very subtle cloud layers */
        radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 60%, rgba(255, 255, 255, 0.025) 0%, transparent 45%),
        radial-gradient(ellipse at 30% 80%, rgba(255, 255, 255, 0.035) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
        /* Additional subtle wisps */
        radial-gradient(ellipse at 10% 50%, rgba(255, 255, 255, 0.015) 0%, transparent 35%),
        radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, 0.025) 0%, transparent 30%),
        radial-gradient(ellipse at 40% 90%, rgba(255, 255, 255, 0.02) 0%, transparent 40%);
    background-size: 
        800px 400px, 600px 300px, 700px 350px, 500px 250px,
        650px 325px, 450px 225px, 300px 150px, 250px 125px, 350px 175px;
    animation: subtleClouds 180s ease-in-out infinite;
    z-index: 1;
}

/* Keyframe animation for subtle clouds */
@keyframes subtleClouds {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        opacity: 0.8;
    }
    25% {
        background-position: 25% 10%, 15% 20%, 30% 5%, 20% 15%, 10% 25%, 35% 10%, 5% 15%, 25% 5%, 15% 20%;
        opacity: 0.6;
    }
    50% {
        background-position: 50% 20%, 30% 40%, 60% 10%, 40% 30%, 20% 50%, 70% 20%, 10% 30%, 50% 10%, 30% 40%;
        opacity: 0.9;
    }
    75% {
        background-position: 75% 30%, 45% 60%, 90% 15%, 60% 45%, 30% 75%, 85% 30%, 15% 45%, 75% 15%, 45% 60%;
        opacity: 0.7;
    }
}

.hero::before { /* Darkening overlay */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.5), rgba(43, 46, 74, 0.7)); /* Gradient Overlay */
    /* background-color: rgba(0, 0, 0, 0.5); Remove simple black overlay */
    z-index: 1; /* Above video, below content */
}

.hero-content { /* Container for text content */
    position: relative; /* Ensure it's above the overlay */
    z-index: 2;
    max-width: 900px;
    padding: 0 var(--space-md);
    margin: 0 auto;
    text-align: center;
}

.hero-title {
    font-size: 3.5rem; /* Larger title */
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-white); /* Ensure white */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Text shadow for readability */
    animation: fadeInUp 1s ease-out 0.5s backwards; /* Entrance animation */
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 4.5rem; /* Even larger on desktop */
    }
}
.hero-subtitle {
    font-size: 1.4rem;
    font-weight: 300; /* Lighter weight */
    margin-bottom: var(--space-lg);
    color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    animation: fadeInUp 1s ease-out 0.8s backwards; /* Staggered animation */
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: 1.6rem;
    }
}
.hero .btn-primary {
    padding: calc(var(--space-sm) - 0px) var(--space-lg); /* Larger button padding */
    font-size: 1.1rem; /* Slightly larger text */
    animation: fadeInUp 1s ease-out 1.1s backwards; /* Staggered animation */
}

/* Karen Overlay Hero Section */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55); /* Semi-transparent overlay for better readability */
    z-index: 1; /* Above video, below content */
}

.karen-overlay {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 0 var(--space-md);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

.karen-bio {
    width: 100%;
    text-align: center;
    max-width: 800px;
}

.karen-content-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    margin-top: var(--space-md);
}

.karen-profile {
    flex-shrink: 0;
}

.karen-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 4px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

.karen-text {
    flex: 1;
    text-align: left;
}

/* Glass Text Box for Karen Section */
.glass-text-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: var(--space-xl);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

.glass-text-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-radius: 24px;
    pointer-events: none;
}

.glass-text-box::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.1) 90deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.05) 270deg,
        transparent 360deg
    );
    animation: rotate 20s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Glass Box Hover Effects */
.glass-text-box:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.glass-text-box:hover::after {
    animation-duration: 15s;
    opacity: 0.8;
}

.glass-text-box .karen-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-md);
    text-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 255, 255, 0.3);
    line-height: 1.2;
    position: relative;
    z-index: 2;
    animation: fadeInUp 1s ease-out 0.8s backwards;
}

.glass-text-box .karen-description {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--space-lg);
    text-shadow: 
        1px 1px 4px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 2;
    animation: fadeInUp 1s ease-out 1s backwards;
}

.glass-text-box .btn-primary {
    font-size: 1rem;
    padding: var(--space-sm) var(--space-lg);
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: fadeInUp 1s ease-out 1.2s backwards;
}

/* Hero Logo Styling */
.hero-logo {
    margin-bottom: var(--space-lg);
    margin-top: var(--space-sm);
    text-align: center;
    animation: fadeInUp 1s ease-out 0.4s backwards;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-image {
    max-width: 280px;
    height: auto;
    filter: 
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 30px rgba(126, 90, 155, 0.6))
        drop-shadow(0 0 60px rgba(161, 125, 181, 0.5))
        drop-shadow(0 0 90px rgba(123, 104, 238, 0.4))
        drop-shadow(0 0 120px rgba(126, 90, 155, 0.3));
    transition: all var(--transition-normal);
    position: relative;
    z-index: 2;
}

.hero-logo-image:hover {
    transform: scale(1.08);
    filter: 
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 40px rgba(126, 90, 155, 0.8))
        drop-shadow(0 0 80px rgba(161, 125, 181, 0.7))
        drop-shadow(0 0 120px rgba(123, 104, 238, 0.6))
        drop-shadow(0 0 160px rgba(126, 90, 155, 0.5));
}

/* Enhanced glow effect background */
.hero-logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(126, 90, 155, 0.15) 0%,
        rgba(161, 125, 181, 0.08) 25%,
        rgba(123, 104, 238, 0.05) 50%,
        rgba(126, 90, 155, 0.03) 75%,
        transparent 100%
    );
    border-radius: 50%;
    z-index: 1;
    animation: enhancedGlow 4s ease-in-out infinite alternate;
}

.hero-logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(
        circle,
        rgba(161, 125, 181, 0.12) 0%,
        rgba(123, 104, 238, 0.06) 40%,
        rgba(126, 90, 155, 0.04) 70%,
        transparent 100%
    );
    border-radius: 50%;
    z-index: 1;
    animation: enhancedGlow 3s ease-in-out infinite alternate-reverse;
}

@keyframes enhancedGlow {
    0% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .karen-overlay {
        flex-direction: column;
        text-align: center;
        padding: var(--space-xl) var(--space-md);
        min-height: 90vh;
        justify-content: center;
    }
    
    .karen-bio {
        text-align: center;
        max-width: 100%;
    }
    
    .karen-content-wrapper {
        flex-direction: column;
        gap: var(--space-md);
        margin-top: var(--space-sm);
    }
    
    .karen-photo {
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }
    
    .karen-text {
        text-align: center;
    }
    
    .glass-text-box {
        padding: var(--space-lg);
        margin: 0 var(--space-sm);
    }
    
    .glass-text-box .karen-heading {
        font-size: 2rem;
        text-align: center;
        margin-bottom: var(--space-sm);
    }
    
    .glass-text-box .karen-description {
        font-size: 1rem;
        text-align: center;
        margin-bottom: var(--space-md);
    }
    
    .hero-logo {
        margin-bottom: var(--space-sm);
    }
    
    .hero-logo-image {
        max-width: 200px;
        margin: 0 auto;
    }
    
    .hero-logo::before {
        width: 280px;
        height: 280px;
    }
    
    .hero-logo::after {
        width: 250px;
        height: 250px;
    }
    
    .karen-bio .btn-primary {
        margin-top: var(--space-sm);
        align-self: center;
    }
}

@media (max-width: 480px) {
    .karen-overlay {
        padding: var(--space-lg) var(--space-sm);
        min-height: 85vh;
    }
    
    .karen-content-wrapper {
        gap: var(--space-sm);
        margin-top: var(--space-xs);
    }
    
    .karen-photo {
        width: 160px;
        height: 160px;
        margin: 0 auto;
    }
    
    .glass-text-box {
        padding: var(--space-md);
        margin: 0 var(--space-xs);
    }
    
    .glass-text-box .karen-heading {
        font-size: 1.8rem;
        margin-bottom: var(--space-xs);
        line-height: 1.1;
    }
    
    .glass-text-box .karen-description {
        font-size: 0.95rem;
        margin-bottom: var(--space-sm);
        line-height: 1.5;
    }
    
    .hero-logo {
        margin-bottom: var(--space-xs);
    }
    
    .hero-logo-image {
        max-width: 160px;
        margin: 0 auto;
    }
    
    .hero-logo::before {
        width: 220px;
        height: 220px;
    }
    
    .hero-logo::after {
        width: 200px;
        height: 200px;
    }
    
    .karen-bio .btn-primary {
        font-size: 0.95rem;
        padding: var(--space-xs) var(--space-md);
        margin-top: var(--space-xs);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .karen-overlay {
        padding: var(--space-md) var(--space-xs);
    }
    
    .karen-content-wrapper {
        gap: var(--space-xs);
        margin-top: 0;
    }
    
    .karen-photo {
        width: 140px;
        height: 140px;
    }
    
    .glass-text-box .karen-heading {
        font-size: 1.6rem;
    }
    
    .glass-text-box .karen-description {
        font-size: 0.9rem;
    }
    
    .hero-logo-image {
        max-width: 130px;
    }
    
    .hero-logo::before {
        width: 180px;
        height: 180px;
    }
    
    .hero-logo::after {
        width: 160px;
        height: 160px;
    }
    
    .karen-bio .btn-primary {
        font-size: 0.9rem;
        padding: var(--space-xs) var(--space-sm);
    }
}

/* Reading Options Highlight */
.reading-options-highlight h2 {
    margin-bottom: 1.5rem;
}

/* Center the introductory paragraph */
.reading-options-highlight .container > p {
    text-align: center;
    margin-left: auto; /* Center block if max-width applies */
    margin-right: auto;
    max-width: 70ch; /* Ensure consistent max-width with other paragraphs */
}

.reading-options-highlight h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.reading-options-highlight ul {
    list-style: none;
    padding: 0;
    margin: 1rem auto 2rem auto; /* Center list */
    max-width: 500px; /* Constrain width */
    text-align: left; /* Align text left within the centered list */
}

.reading-options-highlight li {
    margin-bottom: 0.5rem;
}

.reading-options-highlight .btn {
    margin: 0.5rem;
}

.meet-karen {
    background-color: var(--color-white); /* Keep white or change if needed */
}
.meet-karen img { /* Style for the specific image */
    max-width: 200px; 
    height: auto;
    border-radius: 50%; 
    margin: 2rem auto; 
    display: block;
    border: 4px solid var(--color-accent);
}
.meet-karen p { /* Style for the paragraph under the image */
    max-width: 700px; 
    margin: 0 auto 2rem auto; 
}

.meet-karen .container { /* Added to center button */
    text-align: center;
}

.services-preview { /* Add background color here */
    /* background-color: var(--color-background); */ /* Remove static background */
    position: relative; /* Needed for pseudo-element */
    overflow: hidden; /* Contain the effect */
    z-index: 0; /* Ensure it doesn't conflict with fixed header */
}

.services-preview::before {
    content: '';
    position: absolute;
    top: -50px; left: -50px; right: -50px; bottom: -50px; /* Extend beyond bounds for blur */
    z-index: -1; /* Place behind content */
    background: 
        /* Orb 1: Highlight Color */
        radial-gradient(circle at 20% 30%, rgba(var(--color-highlight-rgb, 161, 125, 181), 0.6) 0%, transparent 50%),
        /* Orb 2: Primary Color */
        radial-gradient(circle at 80% 70%, rgba(var(--color-primary-rgb), 0.5) 0%, transparent 50%),
        /* Orb 3: Secondary Color (Subtle) */
        radial-gradient(circle at 50% 90%, rgba(var(--color-secondary-rgb, 245, 230, 179), 0.4) 0%, transparent 60%),
        /* Base Background */
        var(--color-background);
    background-size: 
        500px 500px, /* Orb 1 Size */
        400px 400px, /* Orb 2 Size */
        600px 600px, /* Orb 3 Size */
        100% 100%;   /* Base Background Size */
    background-repeat: no-repeat;
    filter: blur(60px); /* Apply blur for soft orb effect */
    opacity: 0.8; /* Slightly reduce opacity */
    animation: moveOrbs 30s linear infinite alternate; /* New animation */
}

/* Remove the old keyframes */
/* @keyframes moveFractal { ... } */ 

/* New Keyframes for Orb Movement */
@keyframes moveOrbs {
    0% {
        background-position: 
            20% 30%, /* Orb 1 Start */
            80% 70%, /* Orb 2 Start */
            50% 90%, /* Orb 3 Start */
            0% 0%;   /* Base Start */
    }
    100% {
        background-position: 
            30% 40%, /* Orb 1 End */
            70% 60%, /* Orb 2 End */
            40% 80%, /* Orb 3 End */
            0% 0%;   /* Base End */
    }
}

/* Ensure container content is above the pseudo-element */
.services-preview .container {
    position: relative;
    z-index: 1;
}

.services-preview .services-grid {
    gap: var(--space-md); /* Ensure consistent gap */
    margin-bottom: var(--space-lg); /* Space before the button */
}

.services-preview .service-card { /* Alias for card */
    text-align: center;
}
.services-preview .service-card:hover {
    transform: translateY(-5px) rotate(-0.5deg); /* Apply consistent hover */
    box-shadow: 0 8px 16px rgba(43, 46, 74, 0.15);
}
.services-preview .service-card h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}
.services-preview .service-card p {
    color: var(--color-text-light); /* Slightly lighter text for description */
    margin-bottom: var(--space-md); /* More space before button */
}
.services-preview .service-card .btn-secondary {
    margin-top: auto; /* Push button to bottom */
    align-self: center; /* Center button */
}
.services-preview > .container > .btn-primary { 
    display: block; 
    width: fit-content; 
    margin: var(--space-lg) auto 0;
}


/* ==========================================================================
   Page Specific Styles & Sections
   ========================================================================== */

/* --- Home Page --- */
.bio-overview {
    /* Removed grid properties from here */
}

/* Apply grid to the actual grid container inside .bio-overview */
.bio-overview .content-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: var(--space-lg);
    align-items: center;
}

.bio-overview .content-grid .image-content img {
    max-width: 350px;
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 15px var(--color-shadow);
    margin: 0 auto; /* Center image on mobile */
    display: block; /* Ensure margin auto works */
}

.bio-overview .content-grid .text-content {
    /* Removed margin: 0 auto; as grid handles positioning */
    max-width: 800px;
    text-align: left; /* Keep text left-aligned */
}

@media (min-width: 769px) {
    .bio-overview .content-grid {
        grid-template-columns: 350px 1fr; /* Two-column layout on desktop */
        /* Removed text-align: left; Inherited or handled by children */
    }
    .bio-overview .content-grid .image-content img {
        margin: 0; /* Align image to start of its column on desktop */
    }
}

.philosophy {
    background-color: var(--color-secondary);
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}
.philosophy .text-center p {
    margin-left: auto;
    margin-right: auto;
}
.philosophy blockquote {
    font-size: 1.4rem;
    font-style: italic;
    color: var(--color-text);
    margin: var(--space-md) auto 0;
    max-width: 70ch;
    position: relative;
    padding: 0 var(--space-md);
}

/* Credentials Section Styling */
.credentials {
    background-color: rgba(var(--color-primary-rgb), 0.15);
    padding: var(--space-xl) 0;
    text-align: center;
}

.credentials .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--space-md);
}

.credentials .credential-item {
    background-color: var(--color-white);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px var(--color-shadow);
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 300px;
    margin: 0 auto;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.credentials .credential-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 46, 74, 0.2);
}

.credentials .credential-item h3 {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 0;
    font-weight: 700;
}

.credentials .credential-item p {
    color: var(--color-text-light);
    margin-top: var(--space-xs);
    margin-bottom: 0;
    font-weight: 500;
}

/* Counter Animation */
.credential-counter {
    display: inline-block;
    font-weight: 700;
}

@keyframes countUp {
    from {
        content: "0";
    }
    to {
        content: "15";
    }
}

.credential-counter::before {
    content: "15";
    display: inline-block;
    animation: countUp 2s steps(15) 0.5s 1 normal both;
}

/* Fix for testimonial cards */
.testimonial-card {
    background-color: var(--color-white);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px var(--color-shadow);
    text-align: center;
    margin-bottom: var(--space-md);
}

.testimonials-preview .testimonials-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 1200px;
    margin: 0 auto var(--space-lg) auto;
}

.testimonials-page .testimonial-card {
    margin-bottom: var(--space-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.testimonials-preview { /* Used on About and Home */
    background-color: var(--color-white); /* Give this a white background for contrast */
}
.testimonials-preview .testimonial-card { /* Use .card styles */
    text-align: center;
}
.testimonials-preview .testimonial-card p {
    font-style: italic;
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
    flex-grow: 1; /* Make text fill space */
    margin-left: auto;
    margin-right: auto;
}
.testimonials-preview .testimonial-card cite {
    font-style: normal;
    color: var(--color-text-light);
    margin-top: var(--space-sm); /* Space above cite */
    display: block; /* Ensure it's on its own line */
    font-weight: bold;
}

/* ==========================================================================
   FAQ Page Styles
   ========================================================================== */
.faq-intro {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.faq-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.9), rgba(var(--color-primary-rgb), 0.7));
    z-index: 1;
}

.faq-intro .container {
    position: relative;
    z-index: 2;
}

.faq-intro .page-title {
    color: var(--color-white);
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.faq-intro .page-subtitle {
    color: var(--color-white);
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0 auto;
    max-width: 800px;
    font-weight: 300;
}

.faq-accordion {
    padding: var(--space-xl) 0;
    background-color: var(--color-background);
}

.accordion-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-sm);
}

.accordion {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px var(--color-shadow);
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.3s ease;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: var(--space-md);
    background-color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.accordion-header:hover {
    background-color: rgba(var(--color-primary-rgb), 0.03);
}

.accordion-header .icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    min-width: 24px;
    text-align: center;
    margin-left: var(--space-sm);
    transition: transform var(--transition-fast);
}

/* Open state for accordion item */
.accordion-item[data-open="true"] {
    background-color: rgba(var(--color-primary-rgb), 0.03);
}

.accordion-item[data-open="true"] .accordion-header {
    color: var(--color-primary);
    font-weight: 700;
}

.accordion-item[data-open="true"] .accordion-header .icon {
    transform: rotate(45deg);
}

.accordion-content {
    height: 0;
    overflow: hidden;
    background-color: var(--color-white);
    padding: 0 var(--space-md);
    transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.accordion-item[data-open="true"] .accordion-content {
    height: auto;
    padding: 0 var(--space-md) var(--space-md);
    background-color: rgba(var(--color-primary-rgb), 0.03);
}

.accordion-content p {
    margin: 0;
    line-height: 1.7;
    color: var(--color-text-light);
}

.accordion-content a {
    color: var(--color-primary);
    font-weight: 500;
}

.faq-cta {
    background-color: rgba(var(--color-primary-rgb), 0.2) !important;
}

@media (max-width: 767px) {
    .faq-intro .page-title {
        font-size: 2.5rem;
    }
    
    .accordion-header {
        padding: var(--space-sm);
        font-size: 1rem;
    }
    
    .accordion-header .header-text {
        width: calc(100% - 40px);
    }
    
    .accordion-content {
        padding: 0 var(--space-sm);
    }
    
    .accordion-item[data-open="true"] .accordion-content {
        padding: 0 var(--space-sm) var(--space-sm);
    }
}

/* ==========================================================================
   Footer & Accessibility
   ========================================================================== */
.main-footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-lg) 0;
    text-align: center;
}

.footer-top {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.footer-bottom {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-logo-image {
    max-height: 80px;
    width: auto;
    margin-bottom: var(--space-sm);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.footer-bottom p {
    margin: var(--space-xs) 0;
    text-align: center;
}

.footer-bottom a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-bottom a:hover,
.footer-bottom a:focus {
    color: var(--color-white);
    text-decoration: underline;
}

/* ==========================================================================
   Accessibility & Utilities
   ========================================================================== */

/* Visually hide text meant only for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Button Groups */
.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.button-group .btn {
    margin: 0;
}

@media (max-width: 480px) {
    .button-group {
        flex-direction: column;
        align-items: center;
    }
    
    .button-group .btn {
        width: 80%;
        margin-bottom: var(--space-xs);
    }
}

/* ==========================================================================
   Testimonials Page Styles
   ========================================================================== */
.testimonials-section {
    background-color: var(--color-background);
    padding: var(--space-xl) 0;
}

/* Make the main heading glow */
body.testimonials .testimonials-section h2 {
    /* Keep default color: var(--color-primary); */
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.9), /* Inner white glow */
        0 0 12px rgba(245, 230, 179, 0.7); /* Outer soft cream glow (--color-secondary) */
}

.testimonials-grid-full {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    max-width: 1200px;
    margin: 0 auto var(--space-lg) auto;
}

.testimonial-item {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px var(--color-shadow);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    height: 100%;
}

.testimonial-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.15);
}

.testimonial-item h3 {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: var(--space-sm);
    border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.1);
    padding-bottom: var(--space-xs);
}

.read-more-content {
    position: relative;
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    margin-bottom: var(--space-sm);
}

.read-more-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    opacity: var(--after-opacity, 1);
    transition: opacity 0.3s ease;
}

.testimonial-item.expanded .read-more-content {
    max-height: 2000px; /* Large enough to contain any testimonial */
}

.testimonial-item.expanded .read-more-content::after {
    opacity: 0;
}

.testimonial-item .read-more-content p {
    margin: 0;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.6;
}

.btn-read-more {
    margin-top: auto;
    align-self: center;
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-read-more:hover {
    background-color: var(--color-primary);
    color: white;
}

@media (max-width: 767px) {
    .testimonials-grid-full {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .testimonial-item {
        padding: var(--space-sm);
    }
}

/* ==========================================================================
   Enhanced Booking Form Styles
   ========================================================================== */
.booking-form-section {
    background: linear-gradient(to bottom, #f8f6ff, var(--color-background));
    padding: var(--space-xl) 0;
}

.booking-form-section .page-title {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    font-size: 2.8rem;
}

.booking-form-section .page-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-lg);
    color: var(--color-text-light);
    font-size: 1.2rem;
}

.booking-form {
    max-width: 750px;
    margin: 0 auto;
    padding: var(--space-lg);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 30px rgba(var(--color-primary-rgb), 0.1);
    text-align: left;
    position: relative;
}

/* Form Progress Steps */
.form-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-lg);
    position: relative;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-background);
    color: var(--color-text-light);
    font-weight: bold;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.step-text {
    font-size: 0.85rem;
    color: var(--color-text-light);
    transition: all 0.3s ease;
}

.progress-line {
    flex-grow: 1;
    height: 3px;
    background-color: var(--color-border);
    position: relative;
    z-index: 1;
    max-width: 100px;
}

.progress-step.active .step-number {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.progress-step.active .step-text {
    color: var(--color-primary);
    font-weight: bold;
}

.progress-step.completed .step-number {
    background-color: var(--color-highlight);
    color: white;
    border-color: var(--color-highlight);
}

/* Form Steps */
.form-step {
    transition: all 0.3s ease;
}

.form-step-title {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
    text-align: center;
    font-size: 1.5rem;
    position: relative;
}

.form-step-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--color-primary);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Form Rows for Inline Fields */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.form-row .form-group {
    flex: 1;
    padding: 0 10px;
    min-width: 240px;
}

.booking-form .form-group {
    margin-bottom: var(--space-md);
    position: relative;
}

.booking-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: #f9f9fd;
}

.booking-form input:focus,
.booking-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
    outline: none;
}

/* Reading Options */
.reading-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: var(--space-md);
}

.reading-option {
    position: relative;
    margin-bottom: 0;
}

.reading-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.reading-option-label {
    display: block;
    padding: 20px;
    background-color: #f9f9fd;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
}

.reading-option input[type="radio"]:checked + .reading-option-label {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.reading-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.reading-option-title {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.reading-option-duration {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.reading-option-price {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-text);
    margin-bottom: 10px;
}

.reading-option-desc {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

/* Session Type Options */
.session-type-options {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

.session-type-options legend {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-xs);
}

.session-type-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: var(--space-md);
}

.session-type-option {
    position: relative;
    margin-bottom: 0;
}

.session-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.session-type-label {
    display: block;
    padding: 18px;
    background-color: #f8f9fa;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
}

.session-type-option input[type="radio"]:checked + .session-type-label {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.session-type-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.session-type-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.session-type-title {
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.session-type-desc {
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.3;
}

/* Form Navigation */
.form-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-md);
}

.form-nav button {
    min-width: 120px;
}

.form-nav button.prev-step {
    margin-right: auto;
}

.form-nav button.next-step {
    margin-left: auto;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: bold;
    padding: calc(var(--space-sm) - 2px) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: rgba(var(--color-primary-rgb), 0.05);
    transform: translateY(-2px);
}

/* Checkbox Styling */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    padding-left: 40px;
    position: relative;
    margin: var(--space-md) 0;
    min-height: var(--tap-target-size);
}

.checkbox-group input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.checkbox-group label {
    position: relative;
    padding-left: 0;
    cursor: pointer;
    line-height: 1.5;
    font-weight: normal;
    min-height: 24px;
    display: flex;
    align-items: center;
    padding: var(--space-xs) 0;
}

.checkbox-group label::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background-color: #f9f9fd;
    transition: all 0.2s ease;
    cursor: pointer;
}

.checkbox-group label::after {
    content: '';
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg) scale(0);
    width: 12px;
    height: 6px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transition: all 0.2s ease;
    opacity: 0;
}

.checkbox-group input[type="checkbox"]:checked + label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-group input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(-45deg) scale(1);
    opacity: 1;
}

.checkbox-group input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.checkbox-group input[type="checkbox"]:hover + label::before {
    border-color: var(--color-primary);
}

/* Ensure the entire label area is clickable */
.checkbox-group label::before {
    pointer-events: none;
}

.checkbox-group input[type="checkbox"] + label {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Mobile touch improvements */
.checkbox-group {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-group input[type="checkbox"] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Ensure smooth transitions on mobile */
.checkbox-group label::before,
.checkbox-group label::after {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Active state for better mobile feedback */
.checkbox-group input[type="checkbox"]:active + label::before {
    transform: translateY(-50%) scale(0.95);
}

.checkbox-group input[type="checkbox"]:checked:active + label::before {
    transform: translateY(-50%) scale(0.95);
}

/* Form errors and validation */
.form-error {
    color: var(--color-error);
    font-size: 0.85rem;
    display: block;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.input-error {
    border-color: var(--color-error) !important;
}

/* Form confirmation message */
.form-confirmation {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05), rgba(var(--color-primary-rgb), 0.1));
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border-left: 4px solid var(--color-primary);
    text-align: center;
}

.form-confirmation h2 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.form-note {
    margin-top: var(--space-md);
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-align: center;
    font-style: italic;
}

/* Payment Options Section */
.payment-options-section {
    background-color: #f5f0ff;
    padding: var(--space-xl) 0;
    text-align: center;
}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.payment-method {
    background-color: var(--color-white);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.1);
    text-align: center;
    max-width: 300px;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.payment-method:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}

.payment-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.payment-method h3 {
    margin-bottom: var(--space-xs);
}

.payment-method p {
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
}

.venmo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #3D95CE; /* Venmo blue */
    color: white;
    border-color: #3D95CE;
}

.venmo-btn:hover {
    background-color: #2D85BE;
    border-color: #2D85BE;
    color: white;
}

.venmo-btn i {
    font-size: 1.2rem;
}

/* ==========================================================================
   Thank You Page Styles
   ========================================================================== */
.thank-you-section {
    padding: var(--space-xl) 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.thank-you-content {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px var(--color-shadow);
}

.thank-you-icon {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    display: block;
}

.thank-you-message {
    text-align: left;
    margin: var(--space-lg) 0;
}

.thank-you-message p {
    margin-bottom: var(--space-sm);
    font-size: 1.1rem;
    line-height: 1.6;
}

.next-steps {
    background: var(--color-background);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.next-steps h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
}

.next-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.next-steps li {
    padding: var(--space-xs) 0;
    position: relative;
    padding-left: 1.5rem;
}

.next-steps li:before {
    content: "✓";
    color: var(--color-primary);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.contact-info {
    background: var(--color-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.contact-info p {
    margin-bottom: var(--space-xs);
}

.contact-info a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    text-decoration: underline;
}

.thank-you-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-lg);
}

.thank-you-actions .btn {
    min-width: 150px;
}

@media (max-width: 768px) {
    .thank-you-content {
        padding: var(--space-md);
        margin: 0 var(--space-sm);
    }
    
    .thank-you-icon {
        font-size: 3rem;
    }
    
    .thank-you-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .thank-you-actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05), rgba(var(--color-primary-rgb), 0.1));
    padding: var(--space-xl) 0;
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-content h2 {
    margin-bottom: var(--space-sm);
}

.newsletter-content p {
    margin-bottom: var(--space-md);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Mailchimp Form Styling */
#mc_embed_shell {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-md);
}

#mc_embed_signup {
    background: transparent;
    clear: left;
    font: 14px var(--font-body);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

#mc_embed_signup h2 {
    display: none; /* Hide the h2 since we have our own */
}

#mc_embed_signup .indicates-required {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

#mc_embed_signup .asterisk {
    color: var(--color-error);
}

#mc_embed_signup .mc-field-group {
    margin-bottom: var(--space-sm);
    text-align: left;
}

#mc_embed_signup .mc-field-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
}

#mc_embed_signup .mc-field-group input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: white;
    box-sizing: border-box;
    height: 48px;
    font-family: var(--font-body);
}

#mc_embed_signup .mc-field-group input[type="email"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
    outline: none;
}

#mc_embed_signup .clear {
    text-align: center;
    margin-top: var(--space-sm);
}

#mc_embed_signup .button {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    min-height: 48px;
    display: inline-block;
    text-decoration: none;
}

#mc_embed_signup .button:hover {
    background-color: var(--color-highlight);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

#mc_embed_signup .button:active {
    transform: translateY(0);
}

#mc_embed_signup .response {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 600;
}

#mc_embed_signup #mce-error-response {
    background-color: rgba(217, 83, 79, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(217, 83, 79, 0.3);
}

#mc_embed_signup #mce-success-response {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .booking-form {
        padding: var(--space-md) var(--space-sm);
    }
    
    .reading-options {
        grid-template-columns: 1fr;
    }
    
    .session-type-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .form-row .form-group {
        min-width: 100%;
    }
    
    .form-nav {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .form-nav button {
        width: 100%;
        margin: 0 !important;
    }
    
    .payment-methods {
        flex-direction: column;
        align-items: center;
    }
    
    .newsletter-form-group {
        flex-direction: column;
    }
    
    .newsletter-form-group input[type="email"] {
        border-radius: var(--radius-sm);
        margin-bottom: var(--space-xs);
    }
    
    .newsletter-form-group button {
        border-radius: var(--radius-sm);
        width: 100%;
    }
}

/* iOS-specific adjustments */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS input padding issues */
    input,
    textarea,
    select {
        -webkit-appearance: none;
        border-radius: var(--radius-sm);
    }
    
    /* Fix for iOS button styling */
    button,
    .btn {
        -webkit-appearance: none;
        border-radius: var(--radius-sm) !important;
    }
    
    /* Mobile checkbox improvements */
    .checkbox-group {
        padding-left: 50px;
        margin: var(--space-lg) 0;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 28px;
        height: 28px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .checkbox-group label::before {
        width: 28px;
        height: 28px;
        left: -50px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 8px;
    }
    
    .checkbox-group label::after {
        left: -42px;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg) scale(0);
        width: 14px;
        height: 7px;
    }
    
    .checkbox-group input[type="checkbox"]:checked + label::after {
        transform: translateY(-50%) rotate(-45deg) scale(1);
    }
    
    .checkbox-group label {
        min-height: 28px;
        padding: var(--space-sm) 0;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Ensure proper touch targets */
    .checkbox-group {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* ==========================================================================
   Services Page Styles
   ========================================================================== */
.service-section {
    padding: 100px 0;
    position: relative; /* Ensure child pseudo-elements are positioned correctly */
    overflow: hidden; /* Contain background effects */
}

/* Existing alternating backgrounds */
.service-section:nth-child(odd) {
    background-color: var(--color-background);
}

.service-section:nth-child(even) {
    background-color: #f0f0f5;
}

/* Dark Theme for Psychic Readings Section - Cosmic Nebula Background */
#psychic {
    background: 
        radial-gradient(ellipse at center, rgba(10, 15, 24, 0.3) 0%, rgba(27, 37, 64, 0.8) 100%),
        linear-gradient(135deg, #0A0F18 0%, #1B2540 100%) !important;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Deep Space Starfield - Layer 1 (Dense) */
#psychic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 200px 90px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 240px 50px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 280px 20px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 320px 70px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 360px 40px, rgba(255, 255, 255, 0.5), transparent);
    background-repeat: repeat;
    background-size: 400px 400px;
    animation: starfield-drift 45s linear infinite, star-twinkle 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Deep Space Starfield - Layer 2 (Sparse) */
#psychic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(3px 3px at 50px 100px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 150px 200px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 250px 150px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 350px 50px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(3px 3px at 450px 250px, rgba(255, 255, 255, 0.4), transparent);
    background-repeat: repeat;
    background-size: 500px 500px;
    animation: starfield-drift 60s linear infinite reverse, star-twinkle 18s ease-in-out infinite 3s;
    pointer-events: none;
    z-index: 1;
}

/* Nebula Texture Layer */
#psychic .container::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(126, 90, 155, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(123, 104, 238, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(161, 125, 181, 0.04) 0%, transparent 40%);
    background-size: 600px 400px, 500px 300px, 400px 500px;
    animation: nebula-drift 35s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Atmospheric Bloom */
#psychic .container::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(140, 120, 220, 0.12) 0%, transparent 70%);
    filter: blur(40px);
    animation: atmospheric-bloom 40s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Animation Keyframes */
@keyframes starfield-drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100px, -100px); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes nebula-drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-20px, 10px) rotate(1deg); }
}

@keyframes atmospheric-bloom {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

#psychic .container {
    position: relative;
    z-index: 2;
}

#psychic h2 {
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 16px;
    text-align: left;
    line-height: 1.2;
    background: linear-gradient(135deg, #ffffff 0%, #a17db5 50%, #7e5a9b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#psychic h3 {
    color: #ffffff !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 24px 0 12px 0;
    text-align: left;
}

#psychic p {
    color: #D5DEE7 !important;
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 16px;
    text-align: left;
}

#psychic ul {
    color: #D5DEE7 !important;
    padding-left: 1.5rem;
    margin-bottom: 24px;
    text-align: left;
}

#psychic li {
    color: #D5DEE7 !important;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Cosmic Glass Text Card */
#psychic .text-content {
    background: rgba(12, 16, 24, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(140, 120, 220, 0.12);
    position: relative;
    z-index: 3;
    max-width: 700px;
    margin: 0 auto;
}

/* Cool frame for psychic reading image */
#psychic .image-content {
    position: relative;
    z-index: 2;
}

/* Crystal Orb with Rim Glow and Breathing Animation */
#psychic .image-content img {
    border-radius: var(--radius-lg);
    box-shadow: 
        0 0 30px rgba(126, 90, 155, 0.4),
        0 0 60px rgba(126, 90, 155, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    background: linear-gradient(135deg, rgba(126, 90, 155, 0.3), rgba(161, 125, 181, 0.2), rgba(123, 104, 238, 0.3)) border-box;
    position: relative;
    transition: all var(--transition-normal);
    animation: crystal-breathing 40s ease-in-out infinite;
}

/* Rim Glow Effect */
#psychic .image-content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(ellipse, rgba(126, 90, 155, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(25px);
    z-index: -1;
    animation: rim-glow 35s ease-in-out infinite;
}

/* Dust Motes - Single pseudo-element for both motes */
#psychic .image-content::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: dust-mote-1 25s linear infinite;
    z-index: 1;
}

/* Additional dust mote using a child element */
#psychic .image-content {
    position: relative;
}

#psychic .image-content .dust-mote {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: dust-mote-2 30s linear infinite 5s;
    z-index: 1;
}

/* Crystal Orb Animations */
@keyframes crystal-breathing {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes rim-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes dust-mote-1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(20px, -10px) scale(1.2); opacity: 0.6; }
    50% { transform: translate(40px, 5px) scale(0.8); opacity: 0.4; }
    75% { transform: translate(60px, -5px) scale(1.1); opacity: 0.5; }
    100% { transform: translate(80px, 0) scale(1); opacity: 0.3; }
}

@keyframes dust-mote-2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    25% { transform: translate(-15px, 10px) scale(1.3); opacity: 0.4; }
    50% { transform: translate(-30px, -5px) scale(0.9); opacity: 0.3; }
    75% { transform: translate(-45px, 8px) scale(1.1); opacity: 0.4; }
    100% { transform: translate(-60px, 0) scale(1); opacity: 0.2; }
}

#psychic .image-content:hover img {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 0 40px rgba(126, 90, 155, 0.6),
        0 0 80px rgba(126, 90, 155, 0.3),
        0 25px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Responsive Layout for Psychic Section */
@media (min-width: 1024px) {
    #psychic .content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: start;
        padding: 0 48px;
    }
    
    #psychic .text-content {
        max-width: 680px;
        margin: 0;
    }
    
    #psychic .image-content {
        margin-top: 0;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #psychic .content-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    #psychic .text-content {
        max-width: 600px;
        margin: 0 auto;
    }
    
    #psychic .image-content {
        margin: 0 auto;
        max-width: 400px;
    }
    
    /* Reduce star density on tablet */
    #psychic::before {
        background-size: 500px 500px;
    }
    
    #psychic::after {
        background-size: 600px 600px;
    }
}

@media (max-width: 767px) {
    #psychic .text-content {
        padding: 24px;
        margin: 0 12px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 
            0 16px 48px rgba(0, 0, 0, 0.28),
            0 0 32px rgba(140, 120, 220, 0.1);
    }
    
    #psychic .image-content {
        margin: 24px auto 0;
        max-width: 300px;
    }
    
    /* Reduce backdrop blur and shadows on mobile */
    #psychic .text-content {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    #psychic::before,
    #psychic::after,
    #psychic .container::before,
    #psychic .container::after,
    #psychic .image-content img,
    #psychic .image-content::before,
    #psychic .image-content::after {
        animation: none !important;
    }
    
    #psychic .image-content img {
        transform: none !important;
    }
}

/* Focus states for accessibility */
#psychic .btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

#psychic a:focus {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* Mediumship Section - Cosmic Gradient Background */
#mediumship {
    background: 
        radial-gradient(ellipse at center, #0C1124 0%, #1B1D36 50%, #2C2150 100%) !important;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Subtle Particle Field */
#mediumship::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 193, 7, 0.15), transparent),
        radial-gradient(1px 1px at 60px 80px, rgba(255, 193, 7, 0.12), transparent),
        radial-gradient(2px 2px at 100px 40px, rgba(255, 193, 7, 0.18), transparent),
        radial-gradient(1px 1px at 140px 90px, rgba(255, 193, 7, 0.14), transparent),
        radial-gradient(2px 2px at 180px 20px, rgba(255, 193, 7, 0.16), transparent),
        radial-gradient(1px 1px at 220px 70px, rgba(255, 193, 7, 0.13), transparent),
        radial-gradient(2px 2px at 260px 50px, rgba(255, 193, 7, 0.17), transparent),
        radial-gradient(1px 1px at 300px 10px, rgba(255, 193, 7, 0.11), transparent);
    background-repeat: repeat;
    background-size: 320px 320px;
    animation: particle-drift 40s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Additional Particle Layer */
#mediumship::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(1px 1px at 40px 60px, rgba(255, 193, 7, 0.1), transparent),
        radial-gradient(2px 2px at 80px 20px, rgba(255, 193, 7, 0.12), transparent),
        radial-gradient(1px 1px at 120px 100px, rgba(255, 193, 7, 0.08), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 193, 7, 0.14), transparent),
        radial-gradient(1px 1px at 200px 80px, rgba(255, 193, 7, 0.09), transparent),
        radial-gradient(2px 2px at 240px 40px, rgba(255, 193, 7, 0.13), transparent);
    background-repeat: repeat;
    background-size: 280px 280px;
    animation: particle-drift 45s linear infinite reverse;
    pointer-events: none;
    z-index: 1;
}

/* Particle Drift Animation */
@keyframes particle-drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100px, -100px); }
}

#mediumship .container {
    position: relative;
    z-index: 2;
}

/* Text Block with Backdrop Blur */
#mediumship .text-content {
    background: transparent;
    position: relative;
    z-index: 3;
    max-width: 100%;
    margin: 0;
}

#mediumship .text-content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: rgba(12, 14, 24, 0.55);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border-radius: 16px;
    z-index: -1;
}

/* Removed old shimmer effect - using new particle field instead */

#mediumship h2 {
    background: linear-gradient(135deg, #CBA6F7 0%, #E0C7FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 20px;
    text-align: left;
    line-height: 1.2;
}

#mediumship h3 {
    color: #F3F6FA !important;
    font-size: 1.375rem;
    font-weight: 700;
    margin: 24px 0 12px 0;
    text-align: left;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, #CBA6F7, #E0C7FF) 1;
    padding-bottom: 8px;
}

#mediumship p {
    color: #D5DEE7 !important;
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 16px;
    text-align: left;
}

#mediumship ul {
    color: #D5DEE7 !important;
    padding-left: 1.5rem;
    margin-bottom: 24px;
    text-align: left;
}

#mediumship li {
    color: #D5DEE7 !important;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Surreal Artwork Styling */
#mediumship .image-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0;
}

#mediumship .image-content img {
    border-radius: 20px;
    box-shadow: 
        0 0 30px rgba(180, 140, 255, 0.25),
        0 20px 40px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-normal);
    width: 100%;
    height: auto;
}

#mediumship .image-content:hover img {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 
        0 0 40px rgba(180, 140, 255, 0.35),
        0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Dark Theme for Past Life Exploration Section */
#past-life {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

#past-life::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Technicolor cloud layers - vibrant colors */
        radial-gradient(ellipse at 20% 30%, rgba(255, 0, 150, 0.15) 0%, rgba(255, 100, 200, 0.1) 30%, transparent 60%),
        radial-gradient(ellipse at 70% 20%, rgba(0, 255, 150, 0.12) 0%, rgba(100, 255, 200, 0.08) 25%, transparent 55%),
        radial-gradient(ellipse at 50% 70%, rgba(150, 0, 255, 0.18) 0%, rgba(200, 100, 255, 0.12) 35%, transparent 65%),
        radial-gradient(ellipse at 80% 60%, rgba(255, 150, 0, 0.14) 0%, rgba(255, 200, 100, 0.09) 28%, transparent 58%),
        radial-gradient(ellipse at 30% 80%, rgba(0, 150, 255, 0.16) 0%, rgba(100, 200, 255, 0.11) 32%, transparent 62%),
        radial-gradient(ellipse at 90% 40%, rgba(255, 0, 255, 0.13) 0%, rgba(255, 100, 255, 0.08) 26%, transparent 56%),
        /* Additional cloud wisps */
        radial-gradient(ellipse at 10% 50%, rgba(126, 90, 155, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 60% 10%, rgba(161, 125, 181, 0.06) 0%, transparent 35%),
        radial-gradient(ellipse at 40% 90%, rgba(123, 104, 238, 0.07) 0%, transparent 38%);
    background-size: 
        600px 300px, 500px 250px, 700px 350px, 550px 275px, 650px 325px, 450px 225px,
        300px 150px, 250px 125px, 350px 175px;
    animation: technicolorClouds 45s ease-in-out infinite;
    z-index: 1;
}

#past-life::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 20%, rgba(126, 90, 155, 0.05) 50%, transparent 80%);
    animation: shimmer 18s ease-in-out infinite;
    z-index: 1;
}

#past-life .container {
    position: relative;
    z-index: 2;
}

#past-life h2 {
    color: var(--color-white) !important;
    text-shadow: 
        0 0 10px rgba(126, 90, 155, 0.5),
        0 0 20px rgba(126, 90, 155, 0.3),
        0 0 30px rgba(126, 90, 155, 0.1) !important;
    background: linear-gradient(135deg, #ffffff 0%, #a17db5 50%, #7e5a9b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

#past-life p {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Cool frame for past life image */
#past-life .service-section-image {
    border-radius: var(--radius-lg);
    box-shadow: 
        0 0 30px rgba(126, 90, 155, 0.4),
        0 0 60px rgba(126, 90, 155, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    background: linear-gradient(135deg, rgba(126, 90, 155, 0.3), rgba(161, 125, 181, 0.2), rgba(123, 104, 238, 0.3)) border-box;
    position: relative;
    transition: all var(--transition-normal);
}

#past-life .service-section-image::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, 
        rgba(126, 90, 155, 0.8) 0%, 
        rgba(161, 125, 181, 0.6) 25%, 
        rgba(123, 104, 238, 0.8) 50%, 
        rgba(161, 125, 181, 0.6) 75%, 
        rgba(126, 90, 155, 0.8) 100%);
    border-radius: var(--radius-lg);
    z-index: -1;
    animation: borderGlow 3s ease-in-out infinite;
}

#past-life .service-section-image:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 0 40px rgba(126, 90, 155, 0.6),
        0 0 80px rgba(126, 90, 155, 0.3),
        0 25px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Button styling for dark sections */
#psychic .btn-primary,
#past-life .btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-highlight) 100%);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    transition: all var(--transition-normal);
}

#psychic .btn-primary:hover,
#past-life .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--color-highlight) 0%, var(--color-primary) 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Mediumship CTA Button with Violet Gradient */
#mediumship .btn-primary {
    background: linear-gradient(135deg, #9D6DFF 0%, #C68CFF 100%);
    color: white;
    font-weight: 500;
    border-radius: 7px;
    border: none;
    padding: 12px 24px;
    text-decoration: none;
    display: inline-block;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(157, 109, 255, 0.3);
}

#mediumship .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 0 16px rgba(180, 120, 255, 0.35),
        0 8px 25px rgba(157, 109, 255, 0.4);
    background: linear-gradient(135deg, #C68CFF 0%, #9D6DFF 100%);
}

#mediumship .btn-primary:focus {
    outline: 2px solid rgba(203, 166, 247, 0.8);
    outline-offset: 2px;
}

/* Responsive Layout for Mediumship Section */
@media (min-width: 1024px) {
    #mediumship .content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: center;
        padding: 0 48px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    #mediumship .text-content {
        max-width: 100%;
        margin: 0;
    }
    
    #mediumship .image-content {
        max-width: 100%;
        margin: 0;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #mediumship .content-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 24px;
    }
    
    #mediumship .text-content {
        max-width: 100%;
        margin: 0 auto;
    }
    
    #mediumship .image-content {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Reduce particle density on tablet */
    #mediumship::before {
        background-size: 400px 400px;
    }
    
    #mediumship::after {
        background-size: 350px 350px;
    }
}

@media (max-width: 767px) {
    #mediumship .content-grid {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 16px;
    }
    
    #mediumship .text-content {
        max-width: 100%;
        margin: 0 auto;
        padding: 16px 20px;
    }
    
    #mediumship .text-content::before {
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    
    #mediumship .image-content {
        max-width: 100%;
        margin: 0 auto 24px;
    }
}

/* Accessibility: Prefers Reduced Motion for Mediumship */
@media (prefers-reduced-motion: reduce) {
    #mediumship::before,
    #mediumship::after {
        animation: none !important;
    }
    
    #mediumship .image-content img {
        transform: none !important;
    }
}

/* Focus states for mediumship accessibility */
#mediumship .btn:focus {
    outline: 2px solid rgba(203, 166, 247, 0.8);
    outline-offset: 2px;
}

#mediumship a:focus {
    outline: 2px solid rgba(203, 166, 247, 0.6);
    outline-offset: 2px;
}

/* Keyframe animations for dark theme */
@keyframes milkyWayStars {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
    100% {
        background-position: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    }
}

@keyframes fractalPatterns {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: rotate(90deg) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: rotate(180deg) scale(0.9);
        opacity: 0.9;
    }
    75% {
        transform: rotate(270deg) scale(1.05);
        opacity: 0.7;
    }
}

@keyframes technicolorClouds {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1);
        opacity: 0.8;
    }
    20% {
        transform: translateX(20px) translateY(-10px) scale(1.05);
        opacity: 0.6;
    }
    40% {
        transform: translateX(-15px) translateY(15px) scale(0.95);
        opacity: 0.9;
    }
    60% {
        transform: translateX(25px) translateY(5px) scale(1.08);
        opacity: 0.7;
    }
    80% {
        transform: translateX(-10px) translateY(-20px) scale(0.92);
        opacity: 0.85;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 0;
    }
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Ethereal Vortex Animations */
@keyframes vortexRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes vortexPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes clockFloat {
    0%, 100% {
        background-position: 
            15% 25%, 85% 35%, 25% 75%, 75% 85%, 50% 15%, 90% 65%;
        opacity: 0.4;
    }
    25% {
        background-position: 
            20% 20%, 80% 40%, 30% 70%, 70% 90%, 45% 20%, 85% 60%;
        opacity: 0.6;
    }
    50% {
        background-position: 
            10% 30%, 90% 30%, 20% 80%, 80% 80%, 55% 10%, 95% 70%;
        opacity: 0.5;
    }
    75% {
        background-position: 
            25% 15%, 75% 45%, 35% 65%, 65% 75%, 40% 25%, 80% 55%;
        opacity: 0.7;
    }
}

@keyframes etherealFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-10px) rotate(90deg) scale(1.1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-5px) rotate(180deg) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-15px) rotate(270deg) scale(1.05);
        opacity: 0.6;
    }
}

@keyframes etherealShimmer {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* --- Soul Journey Readings Section (#soul-readings) - REMOVED --- */

/* Ensure content is above the pseudo-element */
/*
#soul-readings .container {
    position: relative;
    z-index: 1;
}
*/

.service-header-centered {
    max-width: 800px;
    margin: 0 auto var(--space-lg) auto;
    text-align: center;
}

.service-header-centered h2 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.service-header-centered p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.service-benefits {
    margin-bottom: var(--space-lg);
}

.benefit-card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px var(--color-shadow);
    padding: var(--space-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.15);
}

.benefit-card h3 {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--space-sm);
    border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.1);
    padding-bottom: var(--space-xs);
}

.benefit-card ul {
    padding-left: 1.5rem;
    list-style-type: disc;
    margin-top: var(--space-sm);
}

.benefit-card li {
    margin-bottom: 0.75rem;
    color: var(--color-text-light);
}

/* Quote Block */
.quote-block {
    background-color: rgba(var(--color-primary-rgb), 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-lg) auto;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 4px 12px var(--color-shadow);
}

.quote-block p {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-primary);
    margin: 0;
    font-weight: 300;
}

/* Improve content grid for services */
.service-section .content-grid {
    margin-bottom: 0;
    gap: 60px;
    align-items: center;
}

.service-section .content-grid .text-content {
    padding: 40px;
}

.service-section .content-grid .text-content h2 {
    text-align: left;
    margin-bottom: 24px;
    font-size: 2.5rem;
    line-height: 1.2;
}

.service-section .content-grid .text-content h3 {
    margin: 32px 0 16px 0;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.service-section .content-grid .text-content p {
    text-align: left;
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.service-section .content-grid .text-content ul {
    margin: 20px 0;
    padding-left: 24px;
}

.service-section .content-grid .text-content li {
    margin-bottom: 12px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.service-section .content-grid .image-content img {
    max-height: 500px;
    object-fit: cover;
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Visual separation and spacing between service blocks */
.service-section + .service-section {
    position: relative;
    padding-top: calc(var(--space-xl) + var(--space-lg));
}

.service-section + .service-section::before {
    content: '';
    display: block;
    width: 140px;
    height: 4px;
    margin: 0 auto var(--space-xl);
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-highlight) 100%);
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(161, 125, 181, 0.25);
    opacity: 0.9;
}

@media (max-width: 767px) {
    .service-section {
        padding: 60px 0;
    }
    
    .service-section .content-grid {
        gap: 40px;
    }
    
    .service-section .content-grid .text-content {
        order: 1;
        padding: 24px;
    }
    
    .service-section .content-grid .image-content {
        order: 0;
    }
    
    .service-section .content-grid .text-content h2 {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .service-section .content-grid .text-content h3 {
        text-align: center;
        font-size: 1.3rem;
        margin: 24px 0 12px 0;
    }
    
    .service-section .content-grid .text-content p {
        text-align: center;
        font-size: 1rem;
        margin-bottom: 16px;
    }
    
    .service-section .content-grid .text-content ul {
        text-align: left;
        max-width: 400px;
        margin: 16px auto;
    }
    
    .service-section .content-grid .image-content img {
        max-height: 300px;
    }
    
    .service-section + .service-section {
        padding-top: calc(var(--space-lg) + 24px);
    }
    
    .service-section + .service-section::before {
        width: 96px;
        margin-bottom: var(--space-lg);
    }
    
    .service-section .btn {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 24px auto 0;
        text-align: center;
    }
    
    .reading-options-highlight {
        padding: 80px 0 !important;
        min-height: 400px;
    }
    
    .pricing-section {
        padding: 80px 0;
    }
    
    .cta-strip,
    .affirmation-block {
        padding: 80px 16px;
    }
}

/* Form loading animation */
.form-loading {
    text-align: center;
    padding: var(--space-lg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: var(--radius-md);
}

.form-loading p {
    margin-top: var(--space-md);
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 500;
}

.psychic-ball {
    width: 120px;
    height: 120px;
    position: relative;
    margin: 0 auto;
}

.psychic-ball-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(var(--color-primary-rgb), 0.8) 70%);
    box-shadow: 
        0 0 15px rgba(var(--color-primary-rgb), 0.5),
        0 0 30px rgba(var(--color-primary-rgb), 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    position: relative;
    animation: float 3s ease-in-out infinite;
    overflow: hidden;
}

.psychic-ball-stars {
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 2px, transparent 2px);
    background-size: 20px 20px, 30px 30px, 25px 25px;
    background-position: 0 0, 10px 10px, 15px 15px;
    opacity: 0.7;
    animation: twinkle 4s linear infinite, rotate 15s linear infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Add a magical glow effect on hover */
.psychic-ball:hover .psychic-ball-inner {
    box-shadow: 
        0 0 20px rgba(var(--color-primary-rgb), 0.7),
        0 0 40px rgba(var(--color-primary-rgb), 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.6);
}

.centered-text {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Newsletter Thank You Message */
.newsletter-thank-you {
    display: none;
    background-color: rgba(var(--color-primary-rgb), 0.1);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    text-align: center;
    border-left: 4px solid var(--color-primary);
}

.newsletter-thank-you h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.newsletter-thank-you p {
    margin: 0;
}

/* Disclaimer Page Specific Styles */
.disclaimer-section .centered-text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.disclaimer-section h1 {
    text-align: center;
    margin-bottom: 2rem;
}

.disclaimer-section h2 {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.disclaimer-section p {
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Animations & Effects
   ========================================================================== */

/* Define keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Base state for elements that will be animated on scroll */
.animate-on-scroll {
    opacity: 0; /* Start hidden */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animation variations (applied by JS when element is visible) */
.animate-on-scroll.fade-in-up {
    transform: translateY(30px);
}
.animate-on-scroll.slide-in-left {
    transform: translateX(-50px);
}
.animate-on-scroll.slide-in-right {
    transform: translateX(50px);
}

/* Active state (applied by JS) */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Remove default fade-in from HTML if using scroll animations */
.fade-in {
    /* Consider removing if replacing with JS-driven animations */
    /* opacity: 1; */
    /* animation: fadeInAnimation ease 1s; */
    /* animation-iteration-count: 1; */
    /* animation-fill-mode: forwards; */
}

/* @keyframes fadeInAnimation { */
    /* 0% { opacity: 0; } */
    /* 100% { opacity: 1; } */
/* } */


/* ==========================================================================
   Form Loading Indicator (Keep existing styles)
   ========================================================================== */
.form-loading {
    text-align: center;
    padding: var(--space-lg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: var(--radius-md);
}

.form-loading p {
    margin-top: var(--space-md);
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 500;
}

.psychic-ball {
    width: 120px;
    height: 120px;
    position: relative;
    margin: 0 auto;
}

.psychic-ball-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(var(--color-primary-rgb), 0.8) 70%);
    box-shadow: 
        0 0 15px rgba(var(--color-primary-rgb), 0.5),
        0 0 30px rgba(var(--color-primary-rgb), 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    position: relative;
    animation: float 3s ease-in-out infinite;
    overflow: hidden;
}

.psychic-ball-stars {
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 2px, transparent 2px);
    background-size: 20px 20px, 30px 30px, 25px 25px;
    background-position: 0 0, 10px 10px, 15px 15px;
    opacity: 0.7;
    animation: twinkle 4s linear infinite, rotate 15s linear infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Add a magical glow effect on hover */
.psychic-ball:hover .psychic-ball-inner {
    box-shadow: 
        0 0 20px rgba(var(--color-primary-rgb), 0.7),
        0 0 40px rgba(var(--color-primary-rgb), 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.6);
}

.centered-text {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Newsletter Thank You Message */
.newsletter-thank-you {
    display: none;
    background-color: rgba(var(--color-primary-rgb), 0.1);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    text-align: center;
    border-left: 4px solid var(--color-primary);
}

.newsletter-thank-you h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.newsletter-thank-you p {
    margin: 0;
}

/* Disclaimer Page Specific Styles */
.disclaimer-section .centered-text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.disclaimer-section h1 {
    text-align: center;
    margin-bottom: 2rem;
}

.disclaimer-section h2 {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.disclaimer-section p {
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    margin-bottom: 1.5rem;
}

/* --- Past Life Exploration Section (#past-life) --- */
#past-life .text-content h2,
#past-life .text-content p {
    text-align: center; /* Ensure text is centered */
    max-width: 70ch;   /* Apply consistent max-width for readability */
    margin-left: auto;  /* Center the block elements */
    margin-right: auto;
}

/* Ensure the button container is also centered */
#past-life .text-content div {
    text-align: center;
}

/* New Liquid Glass Block Design for Past Life Section */
.past-life-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.past-life-image-block,
.past-life-text-block,
.past-life-cta-block {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.past-life-image-block {
    padding: 30px;
    max-width: 400px;
    width: 100%;
}

.past-life-text-block {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.past-life-cta-block {
    padding: 30px;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

/* Liquid Glass Hover Effects */
.past-life-image-block:hover,
.past-life-text-block:hover,
.past-life-cta-block:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(126, 90, 155, 0.3);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(126, 90, 155, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Animated Background Gradient for Glass Blocks */
.past-life-image-block::before,
.past-life-text-block::before,
.past-life-cta-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.6s ease;
}

.past-life-image-block:hover::before,
.past-life-text-block:hover::before,
.past-life-cta-block:hover::before {
    left: 100%;
}

/* Image Styling within Glass Block */
.past-life-image-block .service-section-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 16px;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(126, 90, 155, 0.3);
    transition: all 0.4s ease;
}

.past-life-image-block:hover .service-section-image {
    transform: scale(1.05);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(126, 90, 155, 0.4);
}

/* Typography within Glass Blocks */
.past-life-text-block h2 {
    color: var(--color-white) !important;
    text-shadow: 
        0 0 10px rgba(126, 90, 155, 0.5),
        0 0 20px rgba(126, 90, 155, 0.3),
        0 0 30px rgba(126, 90, 155, 0.1) !important;
    background: linear-gradient(135deg, #ffffff 0%, #a17db5 50%, #7e5a9b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.5rem;
    margin-bottom: 24px;
    line-height: 1.2;
}

.past-life-text-block p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0;
}

/* Button Styling within Glass Block */
.past-life-cta-block .btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-highlight) 100%);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    transition: all 0.4s ease;
    padding: 16px 32px;
    font-size: 1.1rem;
}

.past-life-cta-block .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(126, 90, 155, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--color-highlight) 0%, var(--color-primary) 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Responsive Design for Glass Blocks */
@media (max-width: 768px) {
    .past-life-content {
        gap: 30px;
        padding: 0 16px;
    }
    
    .past-life-image-block,
    .past-life-text-block,
    .past-life-cta-block {
        padding: 24px;
    }
    
    .past-life-text-block h2 {
        font-size: 2rem;
    }
    
    .past-life-text-block p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .past-life-content {
        gap: 24px;
    }
    
    .past-life-image-block,
    .past-life-text-block,
    .past-life-cta-block {
        padding: 20px;
        border-radius: 20px;
    }
    
    .past-life-text-block h2 {
        font-size: 1.75rem;
    }
}

/* Pricing Section Styles */
.pricing-section {
    background: 
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%),
        radial-gradient(ellipse at top right, rgba(126, 90, 155, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(161, 125, 181, 0.03) 0%, transparent 60%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.pricing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(126, 90, 155, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(161, 125, 181, 0.06) 0%, transparent 50%);
    z-index: 1;
}

.pricing-section .container {
    position: relative;
    z-index: 2;
}

.pricing-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-option {
    text-align: center;
    padding: var(--space-lg);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px var(--color-shadow);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.pricing-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.15);
}

.pricing-option h3 {
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
    font-weight: 700;
}

.pricing-option p {
    color: var(--color-text-light);
    line-height: var(--line-height-base);
    margin: 0;
}

.pricing-note {
    font-style: italic;
    color: var(--color-text-light);
    margin: var(--space-lg) auto;
    text-align: center;
    max-width: 600px;
}

.pricing-section .button-group {
    text-align: center;
    margin-top: var(--space-lg);
}

/* Video Section Styles */
.video-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.video-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(126, 90, 155, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(161, 125, 181, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(123, 104, 238, 0.05) 0%, transparent 50%);
    animation: floatingOrbs 20s ease-in-out infinite;
}

.video-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%);
    animation: shimmer 8s ease-in-out infinite;
}

@keyframes floatingOrbs {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    33% {
        transform: translateY(-20px) rotate(120deg);
        opacity: 0.4;
    }
    66% {
        transform: translateY(10px) rotate(240deg);
        opacity: 0.6;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 0;
    }
}

.video-section .section-title {
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.video-section .centered-text {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.video-container {
    max-width: 800px;
    margin: var(--space-lg) auto;
    position: relative;
    z-index: 2;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: 2px solid rgba(126, 90, 155, 0.3);
}

.video-wrapper:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(126, 90, 155, 0.6);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
}

.video-cta {
    text-align: center;
    margin-top: var(--space-lg);
    position: relative;
    z-index: 2;
}

.video-section .btn {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-highlight) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-normal);
}

.video-section .btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Mobile video adjustments */
@media (max-width: 768px) {
    .video-container {
        margin: var(--space-md) auto;
    }
    
    .video-wrapper {
        border-radius: var(--radius-md);
    }
    
    .video-wrapper iframe {
        border-radius: var(--radius-md);
    }
}

/* Comedy Show Section Styles */
.comedy-show {
    padding: var(--space-xl) 0;
    background: linear-gradient(135deg, #f8f0ff 0%, #e8d5f2 50%, #d4c4e8 100%);
}

.comedy-show-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.comedy-show-image {
    order: 1;
}

.comedy-show-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 25px rgba(43, 46, 74, 0.15);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.comedy-show-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(43, 46, 74, 0.2);
}

.comedy-show-content {
    order: 2;
    text-align: left;
    max-width: 65ch;
}

.comedy-show-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
}

.comedy-show-content h2 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.comedy-show-content h2 em {
    color: var(--color-primary);
    font-style: italic;
}

.comedy-show-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    max-width: 65ch;
}

.comedy-show-content p:last-of-type {
    margin-bottom: var(--space-lg);
}

.comedy-show-cta {
    margin-top: var(--space-md);
}

.comedy-show-cta .btn {
    font-size: 1.1rem;
    padding: var(--space-sm) var(--space-lg);
    text-decoration: none;
    display: inline-block;
}

/* Desktop Layout */
@media (min-width: 768px) {
    .comedy-show-grid {
        grid-template-columns: 58% 42%;
        gap: 48px;
    }
    
    .comedy-show-image {
        order: 1;
    }
    
    .comedy-show-content {
        order: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .comedy-show-content h2 {
        font-size: 2.5rem;
    }
}

/* Mobile Layout */
@media (max-width: 767px) {
    .comedy-show {
        padding: var(--space-lg) 0;
    }
    
    .comedy-show-grid {
        gap: var(--space-md);
    }
    
    .comedy-show-content {
        text-align: center;
        max-width: 100%;
    }
    
    .comedy-show-content h2 {
        font-size: 2rem;
    }
    
    .comedy-show-content p {
        font-size: 1rem;
        max-width: 100%;
    }
}

/* Experience Stats Section */
.experience-stats {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    padding: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.experience-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(126, 90, 155, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(161, 125, 181, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, rgba(123, 104, 238, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 10% 90%, rgba(126, 90, 155, 0.06) 0%, transparent 70%);
    animation: floatingOrbs 25s ease-in-out infinite;
}

.experience-stats::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 20%, rgba(126, 90, 155, 0.05) 50%, transparent 80%);
    animation: shimmer 12s ease-in-out infinite;
}

@keyframes floatingOrbs {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-15px) rotate(90deg) scale(1.05);
        opacity: 0.6;
    }
    50% {
        transform: translateY(5px) rotate(180deg) scale(0.95);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-8px) rotate(270deg) scale(1.02);
        opacity: 0.7;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 0;
    }
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.stat-block {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-highlight) 100%);
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3);
}

.stat-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(var(--color-primary-rgb), 0.02) 100%);
    pointer-events: none;
}

.stat-block:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.stat-block:hover::before {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.5);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
    text-shadow: 
        0 2px 4px rgba(var(--color-primary-rgb), 0.2),
        0 0 20px rgba(var(--color-primary-rgb), 0.1);
    position: relative;
    z-index: 3;
}

.stat-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 3;
}

.stat-description {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.5;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 3;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .stats-container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .stat-block {
        padding: var(--space-lg);
    }
    
    .stat-number {
        font-size: 3rem;
    }
}

/* Disabled Payment Method Styles */
.payment-method-disabled {
    opacity: 0.5;
    filter: grayscale(100%);
    pointer-events: none;
    position: relative;
}

.coming-soon {
    display: inline-block;
    background-color: var(--color-text-light);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Virtual Readings Highlight Background */
.reading-options-highlight {
    background: 
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 30%, #dee2e6 70%, #f1f3f4 100%),
        radial-gradient(ellipse at top left, rgba(126, 90, 155, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(161, 125, 181, 0.08) 0%, transparent 50%) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 120px 0 !important;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.reading-options-highlight::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(126, 90, 155, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(161, 125, 181, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(123, 104, 238, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(126, 90, 155, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 90% 10%, rgba(161, 125, 181, 0.05) 0%, transparent 70%);
    animation: gentleFloat 25s ease-in-out infinite;
    z-index: 1;
}

.reading-options-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 20%, rgba(126, 90, 155, 0.08) 50%, transparent 80%),
        linear-gradient(135deg, transparent 40%, rgba(161, 125, 181, 0.05) 60%, transparent 80%);
    animation: shimmer 12s ease-in-out infinite;
    z-index: 1;
}

/* Add floating geometric elements */
.reading-options-highlight .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.reading-options-highlight .floating-shapes::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 10%;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, rgba(126, 90, 155, 0.1), rgba(161, 125, 181, 0.1));
    border-radius: 50%;
    animation: floatShape1 15s ease-in-out infinite;
    box-shadow: 0 8px 20px rgba(126, 90, 155, 0.2);
}

.reading-options-highlight .floating-shapes::after {
    content: '';
    position: absolute;
    top: 60%;
    right: 15%;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.15), rgba(126, 90, 155, 0.1));
    border-radius: 8px;
    animation: floatShape2 18s ease-in-out infinite;
    box-shadow: 0 6px 15px rgba(123, 104, 238, 0.2);
}

.reading-options-highlight .container {
    position: relative !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.reading-options-highlight h2 {
    color: var(--color-primary) !important;
    text-shadow: 
        0 2px 4px rgba(var(--color-primary-rgb), 0.2),
        0 0 20px rgba(var(--color-primary-rgb), 0.1) !important;
    position: relative !important;
    z-index: 4 !important;
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-highlight));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reading-options-highlight .container > p {
    color: var(--color-text) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    position: relative !important;
    z-index: 4 !important;
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.reading-options-highlight .button-group {
    position: relative !important;
    z-index: 4 !important;
}

.reading-options-highlight .btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-highlight) 100%);
    box-shadow: 
        0 8px 20px rgba(var(--color-primary-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    padding: calc(var(--space-sm) + 4px) var(--space-lg);
    font-size: 1.1rem;
}

.reading-options-highlight .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 25px rgba(var(--color-primary-rgb), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--color-highlight) 0%, var(--color-primary) 100%);
}

/* Keyframe animations */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-20px) rotate(90deg) scale(1.05);
        opacity: 0.6;
    }
    50% {
        transform: translateY(10px) rotate(180deg) scale(0.95);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-8px) rotate(270deg) scale(1.02);
        opacity: 0.7;
    }
}

@keyframes floatShape1 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 0.9;
    }
}

@keyframes floatShape2 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(25px) rotate(-180deg);
        opacity: 0.8;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 0;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .reading-options-highlight {
        min-height: 300px;
        padding: var(--space-lg) 0 !important;
    }
    
    .reading-options-highlight .container {
        padding: var(--space-lg);
        margin: 0 var(--space-sm);
    }
    
    .reading-options-highlight h2 {
        font-size: 2rem;
    }
    
    .reading-options-highlight .container > p {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   Rating & Statistics Section
   ========================================================================== */
.rating-stats {
    background: linear-gradient(135deg, 
        rgba(var(--color-primary-rgb), 0.05) 0%, 
        rgba(var(--color-highlight-rgb, 161, 125, 181), 0.08) 50%, 
        rgba(var(--color-secondary-rgb, 245, 230, 179), 0.06) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--space-xl) 0;
    text-align: center;
}

.rating-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(126, 90, 155, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(161, 125, 181, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(123, 104, 238, 0.06) 0%, transparent 60%);
    animation: gentleFloat 30s ease-in-out infinite;
    z-index: 1;
}

.rating-stats .container {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.rating-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.rating-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-heading);
    margin: 0;
}

.stars {
    display: flex;
    gap: 2px;
    margin: 0;
}

.star {
    font-size: 1.8rem;
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(255, 215, 0, 0.3);
}

.rating-text {
    display: none; /* Hide the rating text for cleaner look */
}

.stats-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 120px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-heading);
    margin-bottom: var(--space-xs);
    text-shadow: 
        0 2px 4px rgba(var(--color-primary-rgb), 0.2),
        0 0 15px rgba(var(--color-primary-rgb), 0.1);
    background: linear-gradient(135deg, var(--color-primary), var(--color-highlight));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-link {
    color: inherit;
    text-decoration: none;
    transition: all var(--transition-normal);
    display: inline-block;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
}

.stat-link:hover {
    transform: scale(1.1);
    text-shadow: 
        0 4px 8px rgba(var(--color-primary-rgb), 0.3),
        0 0 25px rgba(var(--color-primary-rgb), 0.2);
    background: rgba(var(--color-primary-rgb), 0.1);
    -webkit-text-fill-color: var(--color-primary);
    background-clip: unset;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--color-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(var(--color-primary-rgb), 0.3) 20%, 
        rgba(var(--color-primary-rgb), 0.5) 50%, 
        rgba(var(--color-primary-rgb), 0.3) 80%, 
        transparent 100%);
    border-radius: 1px;
}

/* Animations */
@keyframes starTwinkle {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Mobile adjustments for rating section */
@media (max-width: 768px) {
    .rating-stats .container {
        padding: var(--space-md);
        margin: 0 var(--space-sm);
    }
    
    .rating-display {
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
    }
    
    .rating-number {
        font-size: 2.5rem;
    }
    
    .star {
        font-size: 1.5rem;
    }
    
    .stats-container {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .stat-divider {
        width: 60px;
        height: 2px;
        background: linear-gradient(to right, 
            transparent 0%, 
            rgba(var(--color-primary-rgb), 0.3) 20%, 
            rgba(var(--color-primary-rgb), 0.5) 50%, 
            rgba(var(--color-primary-rgb), 0.3) 80%, 
            transparent 100%);
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
}