/*
Theme Name: Artisan of Beauty
Author: You
Description: Custom Theme for Dr. Neavin
Version: 1.2
*/

/* --- 1. Variables & Reset --- */
:root {
    /* Palette */
    --color-main: #eae0d5;       /* Warm Beige */
    --color-accent-dark: #3c4142; /* Charcoal */
    --color-accent-light: #eee7dd; /* Light Linen */
    --color-white: #ffffff;
    
    /* Typography */
    --font-body: 'Montserrat', sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    
    /* Layout */
    --container-width: 1280px;
    --header-height: 80px;
    --border-radius: 2px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
    font-family: var(--font-body);
    background-color: var(--color-accent-light);
    color: var(--color-accent-dark);
    line-height: 1.6;
    padding-bottom: 80px; /* Mobile sticky bar space */
}

@media (min-width: 1024px) { body { padding-bottom: 0; } }

h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }
button { font-family: inherit; }

/* --- 2. Visibility Utilities --- */
.desktop-only { display: none !important; }
.mobile-only { display: block !important; }

@media (min-width: 1024px) {
    .desktop-only { display: flex !important; }
    .mobile-only { display: none !important; }
}

/* --- 3. Layout Utilities --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.w-full { width: 100%; }

.grid-layout { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .grid-sidebar { grid-template-columns: 300px 1fr; gap: 4rem; }
}

.hidden { display: none !important; }
.text-center { text-align: center; }

/* --- 4. Component Styles --- */

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.btn-primary {
    background: var(--color-accent-dark);
    color: var(--color-main);
    border-color: var(--color-accent-dark);
}
.btn-primary:hover {
    background: #2a2e2f;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-outline {
    border-color: var(--color-accent-dark);
    color: var(--color-accent-dark);
    background: transparent;
}
.btn-outline:hover {
    background: var(--color-accent-dark);
    color: var(--color-main);
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(238, 231, 221, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(60, 65, 66, 0.1);
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
}
.nav-item { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.nav-item:hover { opacity: 0.7; }

/* Dropdowns */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: 1px solid rgba(60,65,66,0.1);
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    padding: 0.5rem 0;
    z-index: 1001;
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-link { display: block; padding: 0.75rem 1.5rem; font-size: 0.85rem; }
.dropdown-link:hover { background: var(--color-accent-light); }

/* Mobile Menu */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-accent-dark);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-overlay.active { transform: translateY(0); }
.mobile-link { color: var(--color-main); font-family: var(--font-serif); font-size: 1.5rem; }

/* Hero */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1rem 4rem;
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-main) 100%);
    overflow: hidden; /* <--- THIS LINE FIXES THE SWAYING */
}

/* Credentials Bar */
.credentials-bar {
    background: var(--color-main);
    padding: 4rem 0;
    border-bottom: 1px solid rgba(60,65,66,0.1);
    position: relative;
    z-index: 20;
    margin-top: -2rem;
    border-radius: 3rem 3rem 0 0;
    box-shadow: 0 -20px 40px -15px rgba(0,0,0,0.05);
}
.credentials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    opacity: 0.7;
    width: 100%;
}
.credential-img {
    height: 80px;
    object-fit: contain;
    
    /* This specific filter forces the image to turn Charcoal (#3c4142) */
    filter: brightness(0) saturate(100%) invert(21%) sepia(8%) saturate(542%) hue-rotate(169deg) brightness(97%) contrast(92%);
    
    transition: all 0.3s;
    opacity: 0.7; /* Makes them slightly subtle */
}

.credential-img:hover { 
    /* On hover, make them fully dark and slightly larger */
    opacity: 1; 
    transform: scale(1.05); 
}

/* Sections */
.section { padding: 6rem 0; }
.bg-light { background-color: var(--color-accent-light); }
.bg-main { background-color: var(--color-main); }

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-accent-dark);
}

/* Ratings Cards */
.rating-card {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(60,65,66,0.1);
    padding: 1rem;
    border-radius: var(--border-radius);
}

/* Procedures Tabs & Content */
.tab-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.25rem 2rem;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-body);
    color: #5a6061;
}
.tab-btn:hover { background: rgba(255,255,255,0.5); color: var(--color-accent-dark); }
.tab-btn.active {
    background: var(--color-accent-dark);
    color: var(--color-main);
    border-left-color: var(--color-accent-dark);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.tab-text { font-family: var(--font-serif); font-size: 1.125rem; letter-spacing: 0.05em; }

.procedure-content-box {
    background: var(--color-accent-light); 
    padding: 3rem; 
    border-radius: var(--border-radius); 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.02); 
    position: relative;
    /* FIXED HEIGHT to prevent jumping layout */
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

/* Procedure List */
.proc-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(60,65,66,0.05);
    color: var(--color-accent-dark);
    font-weight: 300;
}
.proc-link:hover { font-weight: 500; border-bottom-color: var(--color-accent-dark); }
.proc-arrow { opacity: 0; transform: translateX(-10px); transition: all 0.3s; }
.proc-link:hover .proc-arrow { opacity: 1; transform: translateX(0); }

/* Testimonials */
.testimonials-section {
    background: var(--color-accent-dark);
    color: var(--color-main);
    position: relative;
    overflow: hidden;
}
.testimonial-dot {
    width: 8px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.testimonial-dot.active { width: 32px; background: var(--color-main); }

/* Locations */
.location-card {
    background: var(--color-accent-light);
    padding: 2.5rem;
    border: 1px solid rgba(60,65,66,0.1);
    transition: all 0.3s;
}
.location-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

/* Contact Form */
.form-container {
    background: var(--color-main);
    padding: 3rem;
    border-top: 4px solid var(--color-accent-dark);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
}
.form-group { margin-bottom: 1.5rem; }
.form-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-accent-dark);
    letter-spacing: 0.05em;
}
.form-input {
    width: 100%;
    padding: 1rem;
    background: var(--color-accent-light);
    border: 1px solid transparent;
    border-bottom: 1px solid rgba(60,65,66,0.2);
    outline: none;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-accent-dark);
    transition: all 0.3s;
}
.form-input:focus { 
    border-bottom-color: var(--color-accent-dark);
    background: var(--color-white);
}
select.form-input { appearance: none; cursor: pointer; }

/* Footer */
.site-footer {
    background: var(--color-accent-dark);
    color: var(--color-main);
    padding: 4rem 0 2rem;
    margin-top: 4rem;
}
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-link { display: block; margin-bottom: 0.5rem; opacity: 0.8; font-size: 0.9rem; }
.footer-link:hover { opacity: 1; }

/* Mobile Sticky Bar */
.mobile-bar {
    display: none; /* Hidden by default on desktop */
}

/* Only show on Mobile (Screens smaller than 1024px) */
@media (max-width: 1023px) {
    .mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px; 
        
        /* Background matches your site theme now */
        background: var(--color-accent-light); 
        border-top: 1px solid rgba(60,65,66,0.1);
        
        /* FORCE Horizontal Layout */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        
        padding: 0;
        margin: 0;
        gap: 0;
        z-index: 9999;
    }

    .mobile-btn {
        /* FORCE Equal Width (33% each) */
        flex: 1 1 0px !important;
        width: 33.33%; 
        
        /* Content Layout */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        /* Styling */
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        
        /* Colors: Using your theme beige instead of white */
        color: var(--color-accent-dark);
        background: var(--color-accent-light); 
        
        border-right: 1px solid rgba(0,0,0,0.05);
        text-decoration: none !important;
        padding: 0;
    }

    /* Remove border from the last button */
    .mobile-btn:last-child {
        border-right: none;
    }

    /* Style the middle button (Text Us) - Dark Background */
    .mobile-btn-primary {
        background: var(--color-accent-dark);
        color: var(--color-main);
    }

    /* Fix Icon spacing */
    .mobile-btn i, 
    .mobile-btn svg {
        margin-bottom: 4px;
        width: 20px;
        height: 20px;
    }
}

/* Animations - Bot-safe version */
.fade-in-up { 
    opacity: 1; 
    transform: translateY(0); 
}

@media (prefers-reduced-motion: no-preference) {
    .fade-in-up { 
        animation: fadeInUp 0.8s ease both; 
    }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
}

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

/* Prefers reduced motion - instant visibility */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up { animation: none; opacity: 1; transform: none; }
}

/* Filters */
.filter-charcoal { filter: brightness(0) saturate(100%) invert(21%) sepia(8%) saturate(542%) hue-rotate(169deg) brightness(97%) contrast(92%); }
.filter-cream { filter: brightness(0) invert(93%) sepia(8%) saturate(382%) hue-rotate(338deg) brightness(97%) contrast(89%); }

/* --- WORDPRESS MENU BRIDGE --- */
/* This converts WP's standard menu output to match your flex layout */
.wp-menu-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}
.wp-menu-container > li {
    list-style: none;
    position: relative;
}
.wp-menu-container > li > a {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}
/* Dropdowns for WP */
.wp-menu-container > .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: 1px solid rgba(60,65,66,0.1);
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    padding: 0.5rem 0;
    z-index: 1001;
    display: block; /* Overwrite WP hidden */
}
.wp-menu-container > .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.wp-menu-container .sub-menu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    color: var(--color-accent-dark);
}
.wp-menu-container .sub-menu li a:hover {
    background: var(--color-accent-light);
}

/* --- NESTED SUB-MENUS (Sub-Sub Dropdowns) --- */
.wp-menu-container .sub-menu .menu-item-has-children {
    position: relative;
}
.wp-menu-container .sub-menu .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wp-menu-container .sub-menu .menu-item-has-children > a::after {
    content: "›";
    margin-left: 10px;
}

/* CRITICAL: Hide ALL nested sub-menus by default with !important */
.wp-menu-container .sub-menu .sub-menu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px);
    pointer-events: none;
    display: block !important;
    /* ADD STYLING */
    background: var(--color-white);
    border: 1px solid rgba(60,65,66,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 220px;
    padding: 0.5rem 0;
    z-index: 1002;
}

/* Style links in nested sub-menus */
.wp-menu-container .sub-menu .sub-menu li a {
    display: block;
    padding: 0.6rem 1.25rem;
    font-size: 0.8rem;
    color: var(--color-accent-dark);
    white-space: nowrap;
}

.wp-menu-container .sub-menu .sub-menu li a:hover {
    background: var(--color-accent-light);
}

/* Only show when DIRECT parent li is hovered */
.wp-menu-container .sub-menu li.menu-item-has-children:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0);
    pointer-events: auto;
}
/* --- Breast Augmentation Page Styles --- */

/* Sidebar Layout */
@media (min-width: 1024px) {
    .layout-sidebar { grid-template-columns: 250px 1fr; display: grid; gap: 3rem; }
}

/* Sidebar ToC (Table of Contents) */
.toc-box {
    background: var(--color-main);
    border: 1px solid rgba(60,65,66,0.1);
    padding: 1.5rem;
    border-radius: var(--border-radius);
}
/* NEW RULE: This makes the sidebar sticky in the Grid */
.layout-sidebar aside {
    position: sticky;
    position: -webkit-sticky; /* For Safari */
    top: 110px; /* Adjusts how far from top it sticks */
    align-self: start; /* CRITICAL: Prevents it from stretching to full height */
    height: auto;
    z-index: 10;
}
.toc-link {
    display: block;
    padding: 0.5rem 0;
    color: #5a6061;
    font-size: 0.9rem;
    border-left: 2px solid transparent;
    padding-left: 10px;
}
.toc-link:hover, .toc-link.active {
    color: var(--color-accent-dark);
    border-left-color: var(--color-accent-dark);
    font-weight: 600;
}

/* Content Cards */
.card {
    background: var(--color-main);
    padding: 2rem;
    border: 1px solid rgba(60,65,66,0.05);
    border-radius: var(--border-radius);
    transition: transform 0.3s;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.card-white { background: var(--color-white); }

/* Features */
.feature-icon { margin-bottom: 1rem; color: var(--color-accent-dark); opacity: 0.8; }
.feature-title { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 0.5rem; }
.feature-text { font-size: 0.9rem; color: #5a6061; }

/* Timeline */
.timeline-step {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 2rem;
}
.timeline-marker {
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    background: var(--color-main);
    border: 4px solid var(--color-accent-dark);
    border-radius: 50%;
    z-index: 2;
}
.timeline-line {
    position: absolute;
    left: 8px;
    top: 25px;
    bottom: -25px;
    width: 2px;
    background: rgba(60,65,66,0.2);
    z-index: 1;
}
.timeline-step:last-child .timeline-line { display: none; }

/* Comparison Grid */
.comparison-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) { .comparison-grid { grid-template-columns: 1fr 1fr; } }

/* FAQ Accordion */
details {
    background: var(--color-white);
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(60,65,66,0.1);
}
summary {
    padding: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
summary::-webkit-details-marker { display: none; }
.faq-answer {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.95rem;
    color: #5a6061;
    line-height: 1.6;
    border-top: 1px solid rgba(60,65,66,0.05);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

/* Helper Utilities */
.grid { display: grid; gap: 2rem; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* --- Mobile Menu WordPress Bridge --- */

/* Remove default list styling */
.mobile-wp-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between items */
}

/* Style the links to match your original design */
.mobile-wp-menu li a {
    color: var(--color-main);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    text-decoration: none;
    transition: opacity 0.3s;
}

.mobile-wp-menu li a:hover {
    opacity: 0.7;
}

/* Hide Dropdown sub-menus on mobile by default - JS will toggle them */
.mobile-wp-menu .sub-menu {
    display: none;
    padding-left: 0;
    margin-top: 1rem;
}

.mobile-wp-menu .sub-menu.open {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-wp-menu .sub-menu li a {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Nested sub-sub-menus get extra indent */
.mobile-wp-menu .sub-menu .sub-menu {
    margin-top: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(234, 224, 213, 0.3);
}

.mobile-wp-menu .sub-menu .sub-menu li a {
    font-size: 1rem;
    opacity: 0.7;
}

/* Arrow indicator for parent items with children */
.mobile-wp-menu .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-wp-menu .menu-item-has-children > a::after {
    content: "+";
    font-family: var(--font-body);
    font-size: 1rem;
    transition: transform 0.3s;
}

.mobile-wp-menu .menu-item-has-children.open > a::after {
    content: "−";
}

/* --- Sticky Mobile ToC --- */
@media (max-width: 1023px) {
    .mobile-toc-sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 80px; /* Matches your header height */
        z-index: 900; /* Below Header (1000) but above content */
        background: var(--color-accent-light); /* Prevents transparent overlap */
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        margin-top: -1rem; /* Smooths out the spacing */
        transition: all 0.3s ease;
    }

    /* Optional: Add a shadow when it sticks for better visibility */
    .mobile-toc-sticky details {
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        border: 1px solid rgba(60,65,66,0.1);
        background: #ffffff;
    }
}
/* --- EEAT Trust Signals (Home Page) --- */
.eeat-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(60, 65, 66, 0.15);
    padding: 1rem; /* Reduced padding slightly */
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.eeat-card:hover {
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: rgba(60, 65, 66, 0.3);
}

.eeat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--color-accent-dark);
}

.eeat-icon {
    width: 18px; 
    height: 18px; 
    stroke-width: 1.5px;
    flex-shrink: 0;
}

.eeat-value {
    /* Removed var(--font-serif) to keep it clean/modern */
    font-family: var(--font-body); 
    font-size: 1.1rem; 
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.eeat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #6b7274;
    line-height: 1.4;
}
/* --- Testimonial Arrows --- */
.testi-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid rgba(238, 231, 221, 0.2);
    color: var(--color-main);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
}

.testi-arrow:hover {
    background: var(--color-main);
    color: var(--color-accent-dark);
    border-color: var(--color-main);
}

.testi-arrow.left { left: 0; }
.testi-arrow.right { right: 0; }

.testi-arrow i { width: 20px; height: 20px; }

/* --- Generic Page Content Styling --- */
.page-content p { margin-bottom: 1.5rem; line-height: 1.8; }
.page-content h2 { font-size: 2rem; margin-top: 3rem; margin-bottom: 1rem; color: var(--color-accent-dark); }
.page-content h3 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; font-family: var(--font-body); font-weight: 600; }
.page-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.page-content li { margin-bottom: 0.5rem; }
.page-content a { color: var(--color-accent-dark); text-decoration: underline; }

/* --- PAGE SPECIFIC: Hotels & Travel --- */

/* Travel Cards */
.travel-card {
    background: var(--color-white);
    border: 1px solid rgba(60,65,66,0.1);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 100%; /* Ensures equal height in grid */
    display: flex;
    flex-direction: column;
}

.travel-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
}

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

.travel-content { 
    padding: 2rem; 
    flex-grow: 1; /* Pushes content to fill space */
}

/* Specific Layout for Horizontal Cards (Santa Barbara Section) */
.travel-card.horizontal {
    flex-direction: row;
    align-items: center;
}

/* Adjust horizontal card for mobile */
@media (max-width: 767px) {
    .travel-card.horizontal {
        flex-direction: column;
    }
    .travel-card.horizontal .travel-img {
        width: 100%;
        height: 200px;
    }
    .travel-card.horizontal .travel-content {
        width: 100%;
    }
}

/* Checklists */
.checklist { 
    list-style: none; 
    padding: 0;
    margin: 0;
}

.checklist li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: #5a6061;
    font-size: 0.95rem;
}

.checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent-dark);
    font-weight: bold;
}
/* --- PAGE SPECIFIC: About Dr. Neavin --- */

/* Quote Section */
.quote-box {
    background: var(--color-accent-dark);
    color: var(--color-main);
    padding: 3rem 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.quote-icon {
    position: absolute;
    top: 1rem;
    left: 1rem;
    opacity: 0.1;
    width: 3rem;
    height: 3rem;
    transform: rotate(180deg);
}

.quote-text {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.6;
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .quote-box { padding: 4rem; }
    .quote-text { font-size: 1.75rem; }
}

/* Stats Boxes (Under Photo) */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.stat-box {
    background: var(--color-main);
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(60,65,66,0.1);
    border-radius: var(--border-radius);
}

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5a6061;
}

/* Awards List */
.awards-container {
    background: rgba(255,255,255,0.5);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(60,65,66,0.1);
    margin-bottom: 4rem;
}

.award-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    transition: background 0.3s;
}

.award-item:hover {
    background: var(--color-white);
}

.award-icon-box {
    background: var(--color-accent-dark);
    color: var(--color-main);
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.award-title {
    font-weight: 700;
    color: var(--color-accent-dark);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.award-meta {
    font-size: 0.75rem;
    color: #5a6061;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Expertise Cards */
.expertise-card {
    background: var(--color-main);
    padding: 2rem;
    border: 1px solid rgba(60,65,66,0.1);
    border-radius: var(--border-radius);
    transition: box-shadow 0.3s;
}

.expertise-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.expertise-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Education Timeline */
.edu-list {
    list-style: none;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(60,65,66,0.2);
    margin-top: 1rem;
}

.edu-item {
    position: relative;
    margin-bottom: 2rem;
}

.edu-item::before {
    content: '';
    position: absolute;
    left: -1.95rem; /* Aligns dot on the line */
    top: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--color-accent-dark);
    border-radius: 50%;
}

.edu-title {
    font-weight: 700;
    color: var(--color-accent-dark);
    font-size: 1.1rem;
}

.edu-loc {
    font-size: 0.9rem;
    color: #5a6061;
    margin-bottom: 0.25rem;
}

/* Publication/Lecture Lists */
.academic-list {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.6;
    color: #5a6061;
}

.academic-item {
    padding-left: 1rem;
    border-left: 1px solid rgba(60,65,66,0.2);
    margin-bottom: 1rem;
}
/* Hero Split Layout Mobile Fix */
@media (max-width: 1023px) {
    .hero .grid-2 {
        display: flex;
        flex-direction: column-reverse; /* Puts image on top */
        gap: 2rem;
        text-align: center;
    }
    
    .hero .grid-2 > div {
        text-align: center; /* Re-center text on mobile */
    }

    .hero .grid-2 h1 {
        font-size: 3rem !important; /* Smaller title on mobile */
    }

    .hero .grid-2 .fade-in-up {
        margin-left: auto;
        margin-right: auto; /* Center alignment tools */
    }
}
/* --- Service Template Styles (Add to style.css) --- */

/* Hero Section (Service Specific) */
/* Assuming .hero base styles exist, specific tweaks if needed */
.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: var(--color-accent-dark);
}

.hero p {
    font-size: 1.2rem;
    color: #5a6061;
    font-weight: 300;
}

/* Sidebar Layout */
.grid-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .grid-sidebar {
        grid-template-columns: 300px 1fr; /* Sidebar width + gap */
    }
}

/* Sticky Table of Contents (ToC) */
.toc-box {
    background: var(--color-main);
    border: 1px solid rgba(60,65,66,0.1);
    padding: 1.5rem;
    position: sticky;
    top: 120px; /* Adjust based on header height */
    border-radius: var(--border-radius);
}

.toc-link {
    display: block;
    padding: 0.5rem 0 0.5rem 1rem;
    font-size: 0.9rem;
    color: #5a6061;
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
}

.toc-link:hover, .toc-link.active {
    color: var(--color-accent-dark);
    border-left-color: var(--color-accent-dark);
    font-weight: 600;
    background-color: rgba(255,255,255,0.3); /* Subtle highlight */
}

/* Service Content Cards */
.card-white {
    background: var(--color-white);
    padding: 2rem;
    border: 1px solid rgba(60,65,66,0.05);
    border-radius: var(--border-radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-white:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Candidates Section */
.content-body {
    font-size: 0.95rem;
    color: #5a6061;
    line-height: 1.6;
}

.content-body ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
}

.content-body li {
    margin-bottom: 0.5rem;
}

/* Procedure Timeline */
.timeline-step {
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: 2rem;
    border-left: 2px solid rgba(238, 231, 221, 0.3); /* Light line color */
    margin-left: 10px;
}

.timeline-step:last-child {
    border-left: none;
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -11px; /* Center on line */
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--color-main);
    border: 4px solid var(--color-accent-dark); /* Or white/accent depending on background */
    border-radius: 50%;
    z-index: 2;
}

/* Procedure Specific Content Area */
.procedure-specific-content h3 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--color-main); /* Assuming dark background */
}

.procedure-specific-content p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    font-weight: 300;
}

/* FAQ Accordion */
.faq-item {
    background: var(--color-white);
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(60,65,66,0.1);
}

.faq-summary {
    padding: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-accent-dark);
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-answer {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.95rem;
    color: #5a6061;
    line-height: 1.6;
    border-top: 1px solid rgba(60,65,66,0.05);
}

/* Mobile Sticky Bar (Ensure consistency) */
.mobile-bar {
    /* ... existing styles ... */
    height: 60px; /* Fixed height */
    padding: 0;
}

.mobile-btn {
    /* ... existing styles ... */
    border-right: 1px solid rgba(60,65,66,0.1);
}
/* Update Section Titles */
h2 {
    font-family: var(--font-serif);
    font-size: 3rem; /* Increase size */
    font-weight: 300; /* Lighter weight feels more expensive */
    letter-spacing: -0.02em; /* Tighten slightly for elegance */
    margin-bottom: 2rem;
}

/* Update "Eyebrow" text (the small text above headers) */
.uppercase.font-bold {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.25em; /* Wide tracking is a classic luxury signal */
    font-weight: 500;
    color: var(--color-accent-dark);
    opacity: 0.6; /* Soften it so it doesn't compete with the H2 */
}

/*NEW ADDITIONS*/

/* Candidates Redesign */
.candidates-panel {
    background: #fff;
    border: 1px solid rgba(60,65,66,0.08);
    padding: 3rem 2rem;
    position: relative;
}
.candidates-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
@media(min-width: 768px) {
    .candidates-grid {
        flex-direction: row;
        gap: 0; /* Gap handled by padding */
    }
}
.candidate-col {
    flex: 1;
    padding: 0 2rem;
}
.vertical-divider {
    width: 1px;
    background: rgba(60,65,66,0.1);
    align-self: stretch;
    display: none;
}
@media(min-width: 768px) { .vertical-divider { display: block; } }

.col-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 1rem;
}
.col-header h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin: 0;
    color: var(--color-accent-dark);
}
.icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0fdf4; /* Light green bg */
    color: #166534; /* Dark green icon */
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle.error {
    background: #fef2f2; /* Light red bg */
    color: #991b1b; /* Dark red icon */
}
/* Techniques Redesign */
.techniques-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media(min-width: 768px) { .techniques-grid { grid-template-columns: repeat(2, 1fr); } }

.tech-card {
    background: var(--color-white); /* or #fff */
    padding: 3rem 2rem;
    border: 1px solid rgba(60,65,66,0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}
.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.tech-number {
    position: absolute;
    top: -10px;
    right: 10px;
    font-family: var(--font-serif);
    font-size: 6rem;
    color: var(--color-main); /* Warm Beige */
    opacity: 0.3;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}
.tech-title {
    position: relative;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    z-index: 1;
}
.tech-desc {
    position: relative;
    font-size: 0.95rem;
    color: #5a6061;
    line-height: 1.7;
    z-index: 1;
}
/* Cost Redesign */
.cost-card {
    background: #fff;
    padding: 10px; /* Double border effect */
    border: 1px solid rgba(60,65,66,0.05);
}
.cost-inner {
    border: 1px solid var(--color-main); /* Inner decorative border */
    padding: 4rem 2rem;
    text-align: center;
}
.cost-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 1rem;
}
.cost-price {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--color-accent-dark);
    line-height: 1;
    margin-bottom: 2rem;
}
.cost-divider {
    width: 40px;
    height: 1px;
    background: var(--color-accent-dark);
    margin: 0 auto 2rem;
}
.cost-body {
    max-width: 500px;
    margin: 0 auto;
    font-size: 0.95rem;
    color: #5a6061;
    line-height: 1.8;
}
/* Safety Redesign */
.safety-wrapper {
    display: grid;
    gap: 4rem;
    align-items: start;
}
@media(min-width: 1024px) {
    .safety-wrapper { grid-template-columns: 1fr 1fr; }
}
.safety-narrative h2 {
    font-family: var(--font-serif);
    line-height: 1.1;
}
.safety-text {
    font-size: 1.05rem;
    color: #5a6061;
    line-height: 1.8;
}
.safety-list-box {
    background: #faf9f7; /* Very light beige/grey */
    padding: 3rem;
    border-radius: 2px;
}
/* Styling the list inside the risk content */
.risk-content ul {
    list-style: none;
    padding: 0;
}
.risk-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--color-accent-dark);
}
.risk-content li::before {
    content: "•";
    color: var(--color-accent-dark);
    position: absolute;
    left: 0;
    font-weight: bold;
}
/* --- LUXURY BIO SECTION --- */

/* Layout Container */
.section-bio {
    padding: 2rem 0;
}
.bio-container {
    display: grid;
    gap: 4rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .bio-container {
        grid-template-columns: 0.8fr 1.2fr; /* Image takes slightly less space */
        gap: 6rem;
    }
}

/* 1. Image with "Floating" Border Frame */
.bio-frame-wrapper {
    position: relative;
    padding-left: 1.5rem; /* Space for the frame to poke out */
    padding-bottom: 1.5rem;
}
.bio-img {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.bio-frame-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90%; 
    height: 90%;
    border: 1px solid var(--color-accent-dark);
    z-index: 1; /* Sits behind image */
    opacity: 0.3;
}

/* 2. Typography */
.eyebrow-luxury {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #888;
    margin-bottom: 1rem;
}
.bio-title {
    font-family: var(--font-serif);
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: var(--color-accent-dark);
}
.bio-body {
    color: #5a6061;
    line-height: 1.8;
    margin-bottom: 3rem;
    font-size: 1.05rem;
}

/* 3. The Credentials "Bar" */
.credentials-bar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(60,65,66,0.1);
    border-bottom: 1px solid rgba(60,65,66,0.1);
}
@media (min-width: 768px) {
    .credentials-bar {
        flex-direction: row;
        align-items: center;
        gap: 0; /* Gap handled by padding/dividers */
    }
}

.cred-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.cred-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent-dark);
    color: var(--color-main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cred-icon svg {
    width: 24px;
    height: 24px;
}

.cred-text {
    display: flex;
    flex-direction: column;
}
.cred-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 2px;
}
.cred-value {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--color-accent-dark);
}

/* Vertical Divider between credentials */
.cred-divider {
    width: 1px;
    height: 40px;
    background: rgba(60,65,66,0.1);
    margin: 0 2rem;
    display: none;
}
@media (min-width: 768px) { .cred-divider { display: block; } }

/* 4. Signature */
.bio-signature {
    font-family: 'Cormorant Garamond', serif; /* Or var(--font-serif) */
    font-style: italic;
    font-size: 2.5rem; /* Made slightly larger for impact */
    margin-top: 2.5rem; /* Space between photo frame and name */
    color: var(--color-accent-dark);
    text-align: center; /* Centers it under the image */
    line-height: 1;
}
/* --- LUXURY TESTIMONIALS --- */

.reviews-grid-luxury {
    display: grid;
    gap: 3rem;
}
@media(min-width: 1024px) {
    .reviews-grid-luxury {
        grid-template-columns: 1.2fr 0.8fr; /* Spotlight gets more space */
        align-items: center; /* Center vertically */
    }
}

/* 1. The Spotlight Card (Left) */
.review-spotlight {
    background: var(--color-accent-dark); /* Dark Charcoal background */
    color: var(--color-main); /* Beige text */
    padding: 3rem; /* Reduced padding slightly */
    position: relative;
    border-radius: 2px;
}
.quote-mark {
    font-family: var(--font-serif);
    font-size: 6rem;
    line-height: 1;
    opacity: 0.2;
    position: absolute;
    top: 1rem;
    left: 1.5rem;
}
.spotlight-text {
    font-family: var(--font-serif);
    font-size: 1.4rem; /* Large, readable text */
    line-height: 1.4;
    font-style: italic;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}
.spotlight-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
}
.stars-gold {
    color: #d4af37;
    display: flex;
    gap: 4px;
}
.stars-gold svg { width: 18px; height: 18px; }

.spotlight-author {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

/* 2. The Review Stack (Right) */
.review-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.review-card-small {
    background: #fff;
    border: 1px solid rgba(60,65,66,0.08);
    padding: 1.5rem;
    transition: transform 0.3s;
}
.review-card-small:hover {
    transform: translateX(5px);
    border-color: var(--color-accent-dark);
}
.stars-small {
    color: #d4af37;
    display: flex;
    gap: 2px;
    margin-bottom: 0.5rem;
}
.stars-small svg { width: 12px; height: 12px; }

.review-small-text {
    font-size: 0.9rem;
    color: #5a6061;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.review-small-author {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}

.btn-text-only {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--color-accent-dark);
    border-bottom: 1px solid transparent;
    transition: all 0.3s;
}
.btn-text-only:hover {
    border-bottom-color: var(--color-accent-dark);
}
/* --- FIX FOR DETAILS SECTION SPACING --- */

#details {
    margin-top: 5rem;      /* Pushes the section down from Testimonials */
    padding-top: 5rem;     /* Adds internal breathing room */
    border-top: 1px solid rgba(60,65,66,0.1); /* A thin, elegant divider line */
    
    /* This ensures the title isn't hidden behind your fixed header when clicked */
    scroll-margin-top: 140px; 
}

/* Ensure the grid inside has room to breathe */
.techniques-grid {
    margin-top: 3rem;
}
/* --- COMPREHENSIVE AFTERCARE (Concierge Section) --- */

.aftercare-section {
    background-color: var(--color-accent-dark); /* Charcoal */
    color: var(--color-main); /* Beige text */
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Optional: Add a subtle texture overlay if you have one */
.aftercare-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.05;
    pointer-events: none;
}

.aftercare-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 5rem;
    position: relative;
    z-index: 2;
}

.aftercare-title {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--color-main);
    margin-bottom: 1.5rem;
}

.aftercare-intro {
    font-size: 1.1rem;
    opacity: 0.8;
    line-height: 1.8;
    font-weight: 300;
}

/* Grid Layout */
.aftercare-grid {
    display: grid;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

@media (min-width: 1024px) {
    .aftercare-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

/* Individual Care Pillars */
.care-pillar {
    text-align: center;
    padding: 2rem;
    border: 1px solid rgba(238, 224, 213, 0.1); /* Very subtle beige border */
    border-radius: 2px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.care-pillar:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.03); /* Slight highlight on hover */
    border-color: rgba(238, 224, 213, 0.3);
}

.care-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 2rem;
    background: rgba(238, 224, 213, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-main);
}
.care-icon svg {
    width: 24px;
    height: 24px;
}

.care-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-main);
}

.care-desc {
    font-size: 0.95rem;
    opacity: 0.7;
    line-height: 1.6;
}
/* --- LUXURY RECOVERY TIMELINE --- */

.recovery-section {
    /* FIX: Adds breathing room so it doesn't touch the Aftercare section */
    padding-top: 6rem; 
    margin-bottom: 4rem;
}

.recovery-flow {
    position: relative;
    padding: 2rem 0;
}

/* The Grid Setup */
.recovery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

/* Desktop: Horizontal Layout */
@media (min-width: 768px) {
    .recovery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0; /* Removing gap because we handle spacing internally */
    }
    
    /* The Horizontal Line spanning across */
    .flow-line-desktop {
        position: absolute;
        top: 28px; /* Aligns with the dots */
        left: 10%; /* Start slightly in */
        right: 10%; /* End slightly in */
        height: 1px;
        background: rgba(60,65,66,0.2); /* Subtle charcoal line */
        z-index: 0;
        display: block;
    }
}
@media (max-width: 767px) {
    .flow-line-desktop { display: none; } /* Hide line on mobile */
}

/* Individual Step Styling */
.recovery-step {
    position: relative;
    text-align: center;
    z-index: 1;
    padding: 0 1rem;
}

/* The Marker (Dot) */
.rec-marker {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.rec-dot {
    width: 16px;
    height: 16px;
    background: var(--color-main); /* Beige center */
    border: 3px solid var(--color-accent-dark); /* Charcoal ring */
    border-radius: 50%;
    box-shadow: 0 0 0 5px #fff; /* White halo to hide the line behind it */
}

/* Typography */
.rec-time {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-accent-dark);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.rec-milestone {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #5a6061;
    font-weight: 500;
    line-height: 1.5;
    max-width: 200px;
    margin: 0 auto;
}

/* Mobile Vertical Line Adjustment */
@media (max-width: 767px) {
    .recovery-step {
        display: flex;
        text-align: left;
        gap: 1.5rem;
    }
    .recovery-step::before {
        /* Creates a vertical line on mobile */
        content: '';
        position: absolute;
        left: 23px; /* Aligns with dot */
        top: 0;
        bottom: -3rem; /* Extends to next item */
        width: 1px;
        background: rgba(60,65,66,0.1);
        z-index: -1;
    }
    .recovery-step:last-child::before {
        display: none;
    }
    .rec-marker {
        margin-bottom: 0;
    }
    .rec-milestone {
        margin: 0; /* Reset auto margin for left align */
        max-width: 100%;
    }
}
/* --- SURGICAL DETAILS (Accordion Layout) --- */

.tech-accordion-container {
    border-top: 1px solid var(--color-accent-dark); /* Strong start line */
}

.tech-accordion-item {
    border-bottom: 1px solid rgba(60,65,66,0.1);
    background: transparent;
    transition: background 0.3s ease;
}

/* Hover Effect: Subtle Highlight */
.tech-accordion-item:hover {
    background: #faf9f7;
}

/* When Open: Distinct Background */
.tech-accordion-item[open] {
    background: #fff; /* Keep it clean white when reading */
    border-bottom: 1px solid var(--color-accent-dark); /* Highlight the active area */
}

/* The Clickable Header */
.tech-summary {
    display: flex;
    align-items: center; /* Center vertically */
    padding: 2.5rem 0; /* Tall click area */
    cursor: pointer;
    list-style: none; /* Hide default arrow */
    position: relative;
    padding-right: 2rem; /* Space for icon */
}

.tech-summary::-webkit-details-marker {
    display: none; /* Chrome hide marker */
}

/* 1. The Number */
.tech-index {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    opacity: 0.4;
    width: 60px; /* Fixed width for alignment */
    flex-shrink: 0;
}

/* 2. The Title */
.tech-heading {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-accent-dark);
    margin: 0;
    flex-grow: 1; /* Pushes icon to the right */
    line-height: 1.1;
}

/* 3. The Toggle Icon (+ / -) */
.tech-toggle-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(60,65,66,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-dark);
    transition: all 0.3s;
}

.tech-accordion-item[open] .tech-toggle-icon {
    background: var(--color-accent-dark);
    color: var(--color-main);
    border-color: var(--color-accent-dark);
}

.icon-minus { display: none; }
.tech-accordion-item[open] .icon-plus { display: none; }
.tech-accordion-item[open] .icon-minus { display: block; }


/* The Expanded Content */
.tech-content-wrapper {
    padding-bottom: 3rem;
    padding-left: 60px; /* Indent to align with title, not number */
    padding-right: 2rem;
    max-width: 900px;
    /* Optional: Animation for smooth open */
    animation: fadeIn 0.5s ease;
}

.tech-body-expanded {
    font-size: 1.05rem;
    color: #5a6061;
    line-height: 1.8;
}

/* Mobile Tweaks */
@media (max-width: 767px) {
    .tech-summary {
        padding: 1.5rem 0;
        align-items: flex-start; /* Stack for mobile */
    }
    .tech-index {
        width: 40px;
        padding-top: 5px;
    }
    .tech-heading {
        font-size: 1.5rem;
        padding-right: 1rem;
    }
    .tech-content-wrapper {
        padding-left: 0; /* Remove indent on mobile */
    }
}
/* --- INTERACTIVE TOOL STYLING --- */

.assessment-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(60,65,66,0.1);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.tool-header {
    background: var(--color-accent-dark);
    color: var(--color-main);
    padding: 3rem 2rem;
    text-align: center;
}

.tool-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-main);
}

.tool-desc {
    opacity: 0.8;
    font-weight: 300;
}

/* Progress Bar */
.tool-progress {
    background: #f5f5f5;
    padding: 1.5rem 2rem;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.progress-track {
    height: 2px;
    background: #e0e0e0;
    width: 100%;
    position: relative;
    top: 5px;
    z-index: 1;
}

.progress-fill {
    height: 100%;
    background: var(--color-accent-dark);
    transition: width 0.4s ease;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-top: -6px; /* Pull up to sit on line */
}

.step-dot {
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    transition: all 0.3s;
}

.step-dot.active, .step-dot.completed {
    border-color: var(--color-accent-dark);
    background: var(--color-accent-dark);
}

/* Interface Screens */
.tool-content {
    padding: 3rem 2rem;
    min-height: 400px;
}

.tool-screen {
    display: none;
    animation: fadeIn 0.5s ease;
    text-align: center;
}

.tool-screen.active {
    display: block;
}

.q-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--color-accent-dark);
    margin-bottom: 2rem;
}

/* Options Grid */
.options-grid {
    display: grid;
    gap: 1rem;
}
.options-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.options-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media(max-width: 600px) { .options-grid.cols-2, .options-grid.cols-3 { grid-template-columns: 1fr; } }

.tool-option {
    background: #fff;
    border: 1px solid rgba(60,65,66,0.1);
    padding: 2rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--color-accent-dark);
    font-family: var(--font-body);
}

.tool-option:hover {
    background: var(--color-main);
    border-color: var(--color-main);
}

.tool-option.selected {
    background: var(--color-accent-dark);
    color: var(--color-main);
    border-color: var(--color-accent-dark);
}

.tool-option i {
    width: 32px;
    height: 32px;
}

/* Specific Breast Icon SVG styles */
.breast-icon {
    width: 60px;
    height: 60px;
    opacity: 0.6;
}
.tool-option.selected .breast-icon { opacity: 1; }

/* Result Screen */
.result-box {
    max-width: 500px;
    margin: 0 auto;
}
.result-icon-check {
    width: 60px;
    height: 60px;
    background: #dcfce7; /* Light green */
    color: #166534;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.rec-box {
    background: #faf9f7;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 4px solid var(--color-accent-dark);
}
.rec-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: #888;
}
.rec-name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-accent-dark);
    margin: 0.5rem 0;
}
/* Fix spacing between Tool and Cost sections */
#assessment-tool {
    margin-bottom: 5rem; /* Adds clear separation */
    padding-bottom: 2rem;
}

/* Ensure the Cost section itself has breathing room on top */
#cost {
    scroll-margin-top: 100px; /* Fixes jump if clicking from sidebar */
    position: relative; 
    z-index: 2; /* Ensures it sits cleanly on top */
}
/* --- ASSESSMENT TOOL BUTTONS FIX --- */

/* The "Continue" Button (Screen 3) */
.btn-tool-next {
    background-color: var(--color-accent-dark); /* Charcoal */
    color: var(--color-main); /* Beige Text */
    border: 1px solid var(--color-accent-dark);
    padding: 1rem 2.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 2rem;
    width: 100%; /* Full width on mobile looks better */
    max-width: 300px;
}

.btn-tool-next:hover {
    background-color: #fff;
    color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* The "Start Over" Button (Result Screen) */
.result-actions .btn-text-only {
    background: transparent;
    border: none;
    color: #888;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    margin-top: 1rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: all 0.3s;
}

.result-actions .btn-text-only:hover {
    color: var(--color-accent-dark);
    border-bottom-color: var(--color-accent-dark);
}

/* Fix for the Result Screen Buttons Layout */
.result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
/* --- STICKY HUB LAYOUT --- */

/* The Container for each Category Row */
.hub-sticky-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative; /* Essential for sticky logic context */
}

@media (min-width: 1024px) {
    .hub-sticky-row {
        display: grid;
        grid-template-columns: 350px 1fr; /* Left (Sticky) | Right (Scroll) */
        gap: 5rem;
        /* FIX: Changed from 'start' to 'stretch'. This makes the left column tall enough to stick. */
        align-items: stretch; 
    }

    /* The Sticky Column Wrapper */
    .hub-sticky-col {
        height: 100%; /* Spans full height of the row to define scroll area */
    }

    /* The Actual Sticky Element */
    .sticky-element {
        position: sticky;
        position: -webkit-sticky;
        top: 100px; /* Distance from top of screen where it sticks */
        transition: transform 0.3s ease;
    }
}

/* Image Styling */
.hub-cat-image {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    background: var(--color-accent-dark);
    aspect-ratio: 3/4;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.hub-cat-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}

.hub-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hub-cat-image:hover .hub-img {
    transform: scale(1.05);
}

.hub-cat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem;
    z-index: 2;
}

.hub-cat-title {
    color: #fff;
    font-family: var(--font-serif);
    font-size: 3rem;
    margin: 0;
    line-height: 1;
}

.hub-cat-subtitle {
    display: block;
    margin-top: 0.5rem;
    color: rgba(255,255,255,0.8);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Right Column: Procedure List */
.hub-list-col {
    display: flex;
    flex-direction: column;
    padding-top: 1rem; /* Visual alignment with sticky image */
}

/* List Item Styling (Same as before, refined) */
.hub-item {
    display: block;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(60,65,66,0.1);
    transition: all 0.4s ease;
    text-decoration: none;
    position: relative;
}

.hub-item:first-child {
    border-top: 1px solid rgba(60,65,66,0.1);
}

.hub-item:hover {
    padding-left: 2rem;
    background: linear-gradient(to right, #faf9f7, transparent); /* Subtle luxury fade */
    border-bottom-color: var(--color-accent-dark);
}

.hub-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.hub-item-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--color-accent-dark);
    margin: 0;
    transition: color 0.3s;
}

.hub-item:hover .hub-item-title {
    color: #000;
}

.hub-arrow {
    color: var(--color-accent-dark);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hub-item:hover .hub-arrow {
    opacity: 1;
    transform: translateX(0);
}

.hub-item-desc {
    font-size: 1rem;
    color: #5a6061;
    font-weight: 300;
    max-width: 85%;
    line-height: 1.6;
}

/* Divider between Categories */
.hub-divider {
    height: 1px;
    background: transparent;
    margin: 6rem 0; /* Space between categories */
}

/* Mobile Tweaks */
@media (max-width: 1023px) {
    .hub-cat-image {
        aspect-ratio: 16/9; /* Landscape on mobile */
    }
    .hub-cat-title {
        font-size: 2rem;
    }
    .hub-divider {
        margin: 3rem 0;
        background: rgba(0,0,0,0.05); /* Visible divider on mobile */
    }
    .hub-item {
        padding: 1.5rem 0;
    }
    .hub-item-title {
        font-size: 1.25rem;
    }
}
/* FORCE RESET FOR STICKY PARENTS */
body, html {
    overflow-x: visible !important; /* Temporarily force visibility to test */
}


/* --- MOBILE STICKY FIX (The Reveal Effect) --- */

/* 1. Global Sticky Definition (Apply to Mobile & Desktop) */
.sticky-element {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    align-self: start;
    z-index: 1; /* Low z-index so content scrolls OVER it */
}

/* 2. Mobile Specific Logic (< 1024px) */
@media (max-width: 1023px) {
    
    .hub-sticky-row {
        /* Ensure the row acts as the sticky container */
        display: block; /* Stacks vertically */
        position: relative;
        overflow: visible;
        margin-bottom: 0;
    }

    .hub-sticky-col {
        /* FIX: The WRAPPER must be sticky on mobile, not just the image inside */
        position: sticky; 
        position: -webkit-sticky;
        top: 0;
        height: 50vh; /* Fixed height for the viewport window */
        z-index: 1;   /* Sit behind the list */
    }

    /* Reset the inner element so it doesn't fight the wrapper */
    .hub-sticky-col .sticky-element {
        position: static; 
        height: 100%;
        width: 100%;
    }

    .hub-cat-image {
        height: 100%; /* Fill the sticky wrapper */
        width: 100%;
    }
    
    .hub-img {
        height: 100%;
        object-fit: cover;
    }

    .hub-list-col {
        /* CRITICAL: The list must sit ON TOP of the sticky image */
        position: relative;
        z-index: 10; 
        background: var(--color-accent-light); /* Must match site bg */
        
        /* Card Effect: Overlap the image slightly */
        margin-top: -2rem; 
        padding-top: 2rem;
        padding-bottom: 4rem; /* Extra space at bottom */
        border-radius: 20px 20px 0 0; 
        box-shadow: 0 -10px 30px rgba(0,0,0,0.05); 
        min-height: 50vh; /* Ensure it's tall enough to cover */
    }
    
    .hub-item {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
/* Fix spacing for Expected Results section */
#results {
    margin-top: 2rem; /* Ensures distance from Benefits section */
    padding-top: 2rem; /* Internal spacing */
    scroll-margin-top: 120px; /* Ensures sticky header doesn't cover title when linked */
}
/* --- LUXURY CANDIDATES SECTION --- */

.candidates-luxury-section {
    padding: 4rem 0;
}

.candidates-split-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    border-top: 1px solid rgba(60,65,66,0.1);
    border-bottom: 1px solid rgba(60,65,66,0.1);
}

@media (min-width: 1024px) {
    .candidates-split-panel {
        flex-direction: row;
        align-items: stretch;
    }
}

/* Common Panel Styling */
.cand-panel {
    flex: 1;
    padding: 4rem 3rem;
    display: flex;
    justify-content: center;
}

.cand-inner {
    max-width: 400px; /* Keeps text columns readable */
    width: 100%;
}

/* Distinct Panel Backgrounds */
.ideal-panel {
    background: #fff; /* Crisp White */
}

.caution-panel {
    background: #faf9f7; /* Very subtle warm grey/beige */
}

/* The Center Divider Line */
.cand-center-line {
    display: none;
}

@media (min-width: 1024px) {
    .cand-center-line {
        display: block;
        width: 1px;
        background: rgba(60,65,66,0.1);
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        z-index: 2;
    }
}

/* Icon Styling */
.cand-icon-wrapper {
    width: 40px;
    height: 40px;
    margin-bottom: 1.5rem;
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
}

.cand-icon-wrapper svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
}

.cand-icon-wrapper.caution {
    color: #888; /* Muted grey for "Not Ideal" instead of red */
}

/* Typography */
.cand-heading {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--color-accent-dark);
    margin-bottom: 1.5rem;
}

.cand-content {
    font-size: 1rem;
    color: #5a6061;
    line-height: 1.8;
}

/* List Formatting */
.cand-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cand-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

/* Custom Bullet Points */
.ideal-panel .cand-content li::before {
    content: "✓";
    color: var(--color-accent-dark);
    position: absolute;
    left: 0;
    font-weight: 500;
}

.caution-panel .cand-content li::before {
    content: "—"; /* Simple dash for negative list */
    color: #888;
    position: absolute;
    left: 0;
}
/* --- FACELIFT TYPE FINDER (FTF) --- */

.ftf-wrapper {
    background: #fff;
    padding: 4rem 2rem;
    border-radius: 2px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    max-width: 900px;
    margin: 0 auto 4rem;
    border: 1px solid rgba(60,65,66,0.1);
}

.ftf-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ftf-header h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-accent-dark);
    margin-bottom: 1rem;
}

.ftf-header p {
    font-size: 1rem;
    font-weight: 300;
    color: #5a6061;
    max-width: 500px;
    margin: 0 auto;
}

/* Progress Bar */
.ftf-progress {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.ftf-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f0f0f0;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.ftf-dot.active {
    background: var(--color-accent-dark);
    transform: scale(1.2);
}

.ftf-dot.completed {
    background: var(--color-main); /* Beige for past steps */
}

/* Question Cards */
.ftf-card {
    display: none; /* Hidden by default */
    animation: fadeIn 0.6s ease;
}

.ftf-card.active {
    display: block;
}

.ftf-q-number {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #888;
    margin-bottom: 1rem;
    text-align: center;
    display: block;
}

.ftf-q-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-accent-dark);
    margin-bottom: 2rem;
    text-align: center;
    line-height: 1.2;
}

/* Options Grid */
.ftf-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media(min-width: 768px) {
    .ftf-options { grid-template-columns: repeat(3, 1fr); }
    .ftf-options.cols-2 { grid-template-columns: 1fr 1fr; } /* For 2-answer screens */
}

.ftf-opt {
    background: #fff;
    border: 1px solid rgba(60,65,66,0.15);
    padding: 2rem;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.ftf-opt:hover {
    border-color: var(--color-accent-dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.ftf-opt.selected {
    background: var(--color-accent-dark);
    color: var(--color-main);
    border-color: var(--color-accent-dark);
}

.ftf-marker {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(60,65,66,0.3);
    border-radius: 50%;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ftf-opt.selected .ftf-marker {
    border-color: var(--color-main);
    background: var(--color-main);
}

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

.ftf-btn {
    padding: 1rem 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.ftf-btn-next {
    background: var(--color-accent-dark);
    color: var(--color-main);
}
.ftf-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ftf-btn-back {
    background: transparent;
    color: #888;
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 1rem;
}

/* Results Screen */
.ftf-results {
    display: none;
    text-align: center;
    padding: 2rem;
    background: #faf9f7; /* Subtle beige bg */
    border: 1px solid rgba(60,65,66,0.05);
}

.ftf-results.show { display: block; animation: fadeInUp 0.8s ease; }

.ftf-res-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #888;
    margin-bottom: 1rem;
}

.ftf-res-title {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--color-accent-dark);
    margin-bottom: 1.5rem;
}

.ftf-res-desc {
    font-size: 1.1rem;
    color: #5a6061;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.ftf-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.ftf-tag {
    background: #fff;
    border: 1px solid rgba(60,65,66,0.1);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent-dark);
}
/* Mommy Makeover Procedures Grid - 2x2 Layout */
.proc-grid-luxury {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .proc-grid-luxury {
        grid-template-columns: 1fr;
    }
}
/* Mobile Menu Toggle Button */
.mobile-wp-menu .menu-item-has-children {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.mobile-wp-menu .menu-item-has-children > a {
    display: inline-block;
}

.submenu-toggle {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--color-main);
    width: 32px;
    height: 32px;
    margin-left: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.3s ease;
}

.submenu-toggle:hover {
    background: rgba(255,255,255,0.2);
}

.mobile-wp-menu .menu-item-has-children > .sub-menu {
    width: 100%;
}

/* Remove the old ::after arrow since we have a button now */
.mobile-wp-menu .menu-item-has-children > a::after {
    display: none;
}
/* Fluent Forms Custom Styling for Artisan of Beauty */

/* Form container */
.fluentform {
    background: var(--color-main);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

/* All input fields */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(60,65,66,0.15);
    border-radius: var(--border-radius);
    background: rgba(255,255,255,0.5);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-text);
    transition: all 0.3s ease;
}

.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
    outline: none;
    border-color: var(--color-accent-dark);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(60,65,66,0.08);
}

/* Labels */
.fluentform .ff-el-input--label label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

/* Hide default labels if using placeholders */
.fluentform .ff-el-input--label {
    margin-bottom: 0.5rem;
}

/* Submit button */
.fluentform button[type="submit"],
.fluentform .ff-btn-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--color-accent-dark);
    color: var(--color-main);
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fluentform button[type="submit"]:hover,
.fluentform .ff-btn-submit:hover {
    background: var(--color-text);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(60,65,66,0.2);
}

/* Field spacing */
.fluentform .ff-el-group {
    margin-bottom: 1.5rem;
}

/* Two-column layout for name/email/phone if needed */
.fluentform .ff-t-container {
    gap: 1.5rem;
}

/* Textarea specific */
.fluentform textarea {
    min-height: 120px;
    resize: vertical;
}

/* Placeholder styling */
.fluentform input::placeholder,
.fluentform textarea::placeholder {
    color: #5a6061;
    opacity: 0.6;
}

/* Remove any default Fluent Forms borders/shadows */
.fluentform .ff-el-input--content {
    border: none;
    box-shadow: none;
}

/* Error states */
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea {
    border-color: #c53030;
}

.fluentform .error.text-danger {
    font-size: 0.75rem;
    color: #c53030;
    margin-top: 0.5rem;
}
/* Dark Fluent Form Styling for Service Pages */

.dark-form-section {
    background: #3c4142;
    padding: 4rem 2rem;
    border-radius: var(--border-radius);
    text-align: center;
}

.dark-form-section .form-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(238,231,221,0.7);
    margin-bottom: 0.75rem;
}

.dark-form-section .form-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-style: italic;
    color: var(--color-main);
    margin-bottom: 0.75rem;
}

.dark-form-section .form-subtitle {
    font-size: 1rem;
    color: rgba(238,231,221,0.7);
    margin-bottom: 2.5rem;
}

/* Form container */
.dark-form-section .fluentform {
    max-width: 600px;
    margin: 0 auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

/* Input fields */
.dark-form-section .fluentform input[type="text"],
.dark-form-section .fluentform input[type="email"],
.dark-form-section .fluentform input[type="tel"],
.dark-form-section .fluentform textarea {
    width: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    background: rgba(60,65,66,0.8);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #fff;
    transition: all 0.3s ease;
}

.dark-form-section .fluentform input:focus,
.dark-form-section .fluentform textarea:focus {
    outline: none;
    border-color: rgba(255,255,255,0.5);
    background: rgba(60,65,66,1);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

/* Placeholder styling */
.dark-form-section .fluentform input::placeholder,
.dark-form-section .fluentform textarea::placeholder {
    color: rgba(255,255,255,0.4);
}

/* Hide labels (using placeholders instead) */
.dark-form-section .fluentform .ff-el-input--label {
    display: none;
}

/* Field spacing */
.dark-form-section .fluentform .ff-el-group {
    margin-bottom: 1rem;
}

/* Textarea */
.dark-form-section .fluentform textarea {
    min-height: 120px;
    resize: vertical;
}

/* Submit button */
.dark-form-section .fluentform button[type="submit"],
.dark-form-section .fluentform .ff-btn-submit {
    width: 100%;
    padding: 1.1rem 2rem;
    background: var(--color-main);
    color: var(--color-text);
    border: none;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.dark-form-section .fluentform button[type="submit"]:hover,
.dark-form-section .fluentform .ff-btn-submit:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Remove default Fluent styling */
.dark-form-section .fluentform .ff-el-input--content {
    border: none;
    box-shadow: none;
    background: transparent;
}
/* Force button styling override */
.dark-form-section .fluentform .ff-btn-submit,
.dark-form-section .fluentform button[type="submit"],
.dark-form-section .fluentform .ff-btn.ff-btn-submit,
.dark-form-section .fluentform .ff-el-group.ff-btn-submit-holder button,
.dark-form-section .ff_submit_btn_wrapper button,
.dark-form-section .ff_submit_btn_wrapper .ff-btn-submit {
    background: var(--color-main) !important;
    color: var(--color-text) !important;
    border: none !important;
}

.dark-form-section .fluentform .ff-btn-submit:hover,
.dark-form-section .fluentform button[type="submit"]:hover,
.dark-form-section .ff_submit_btn_wrapper button:hover {
    background: #fff !important;
    color: var(--color-text) !important;
}
/* === GOOGLEBOT-SAFE ANIMATION FIX === */

/* DEFAULT: All content visible (for Googlebot & no-JS users) */
.fade-in-up,
[class*="fade-in"],
.delay-100,
.delay-200,
.delay-300 {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* JAVASCRIPT ENABLED: Hide initially, then animate */
.js-enabled .fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.js-enabled .delay-100 { animation-delay: 0.1s; }
.js-enabled .delay-200 { animation-delay: 0.2s; }
.js-enabled .delay-300 { animation-delay: 0.3s; }

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .js-enabled .fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Mobile menu stays hidden without JS */
.mobile-menu-overlay:not(.active) {
    display: none !important;
}

/* Mobile hero layout adjustments */
@media (max-width: 1024px) {
    [class*="hero-split"] {
        min-height: auto;
    }
    
    [class*="hero-content"] {
        padding-top: 100px;
    }
    
    .hero {
        min-height: auto;
        padding-top: 100px;
    }
    
    .hero .grid-2 {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
    }
}