/* css/style.css */
:root {
    /* ... same color and font variables as previous Onyx refinement ... */
    --color-primary-bg: #000000; --color-secondary-bg: #080808; --color-surface-bg: #111111; --color-alt-surface-bg: #0A0A0A; --color-join-section-bg: #1A1A1A; --color-text-primary: #E0E0E0; --color-text-secondary: #B0B0B0; --color-text-muted: #AAAAAA; --color-text-muted-darker: #888888; --color-text-emphasis: #FFFFFF; --color-border-light: #333333; --color-border-dark: #222222; --color-quote-icon: #555555; --color-button-light-text: #FFFFFF; --color-button-light-bg: transparent; --color-button-light-border: #FFFFFF; --color-button-light-hover-text: #000000; --color-button-light-hover-bg: #FFFFFF; --color-button-dark-text: #000000; --color-button-dark-bg: #FFFFFF; --color-button-dark-border: #FFFFFF; --color-button-dark-hover-text: #FFFFFF; --color-button-dark-hover-bg: #333333;
    --font-primary: 'Montserrat', sans-serif;
    --spacing-unit: 8px; --header-height: 70px; --section-padding-y: calc(var(--spacing-unit) * 10); --section-padding-x: calc(var(--spacing-unit) * 3); --container-max-width: 1140px; /* Slightly narrower for focused content */ --border-radius-small: 4px; --border-radius-buttons: 3px; --transition-smooth: all 0.3s ease-in-out;
}

/* --- Global Resets & Base Styles (Mostly same) --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { /* ... same ... */
    background-color: var(--color-primary-bg); color: var(--color-text-primary); font-family: var(--font-primary); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; transition: var(--transition-smooth); }
a:hover { color: var(--color-text-emphasis); }
img { max-width: 100%; display: block; }
.container { width: calc(100% - (var(--section-padding-x) * 2)); max-width: var(--container-max-width); margin: 0 auto; }
.bg-alt { background-color: var(--color-secondary-bg); } /* For alternating section backgrounds */
.text-center { text-align: center; }

/* Common Section Styling */
.section-padding { padding: var(--section-padding-y) 0; }
.section-headline { /* Replaces individual h2, h3 styling for section titles */
    font-size: clamp(1.8rem, 5vw, 2.6rem); /* Adjusted */
    font-weight: 600; /* Slightly bolder */
    color: var(--color-text-emphasis);
    margin-bottom: calc(var(--spacing-unit) * 4);
    line-height: 1.3;
}
.section-intro {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto calc(var(--spacing-unit) * 5) auto; /* For centered intros */
}


/* --- Buttons (Same as previous) --- */
.btn { /* ... same btn styles ... */
    display: inline-block; padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 3.25); border: 1px solid; text-transform: uppercase; font-size: 0.8rem; font-weight: 500; letter-spacing: 1px; cursor: pointer; transition: var(--transition-smooth); border-radius: var(--border-radius-buttons);
}
.btn-light { background-color: var(--color-button-light-bg); color: var(--color-button-light-text); border-color: var(--color-button-light-border); }
.btn-light:hover { background-color: var(--color-button-light-hover-bg); color: var(--color-button-light-hover-text); }
.btn-dark { background-color: var(--color-button-dark-bg); color: var(--color-button-dark-text); border-color: var(--color-button-dark-border); }
.btn-dark:hover { background-color: var(--color-button-dark-hover-bg); color: var(--color-button-dark-hover-text); border-color: var(--color-button-dark-hover-bg); }
.btn-small { padding: var(--spacing-unit) calc(var(--spacing-unit) * 2); font-size: 0.75rem; }


/* --- Header & Overlay Menu (Simplified Menu Items) --- */
#main-site-header { /* ... same header styles ... */
    position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 5); z-index: 1000; background-color: rgba(0,0,0,0.4); transition: background-color 0.3s ease;
}
#main-site-header.scrolled { background-color: rgba(0,0,0,0.7); }
.logo, .logo-overlay { /* ... same logo styles ... */
    font-size: 0.85rem; font-weight: 700; letter-spacing: 2.5px; color: var(--color-text-emphasis); text-transform: uppercase;
}
.menu-toggle, #hamburger-menu-btn span, #hamburger-menu-btn.active span, #close-menu-btn { /* ... same toggle styles ... */
    background: none; border: none; cursor: pointer; padding: var(--spacing-unit); z-index: 1001;
}
#hamburger-menu-btn span { display: block; width: 28px; height: 2.5px; background-color: var(--color-text-emphasis); margin: 6px 0; transition: var(--transition-smooth); border-radius: var(--border-radius-small); }
#hamburger-menu-btn.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
#hamburger-menu-btn.active span:nth-child(2) { opacity: 0; }
#hamburger-menu-btn.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
#close-menu-btn { font-size: 2.8rem; color: var(--color-text-emphasis); line-height: 1; }

#overlay-menu { /* ... same overlay structure ... */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-primary-bg); z-index: 1005; display: none; flex-direction: column; align-items: center; justify-content: center; /* Center content vertically */ padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 5); overflow-y: auto; opacity: 0; transition: opacity 0.4s ease-in-out;
}
#overlay-menu.active { display: flex; opacity: 1; }
.overlay-header { /* Positioned at top within overlay */
    position: absolute; top: calc(var(--spacing-unit) * 3); left: calc(var(--spacing-unit) * 5); right: calc(var(--spacing-unit) * 5); display: flex; justify-content: space-between; align-items: center;
}
.overlay-nav ul { list-style: none; text-align: center; margin-bottom: calc(var(--spacing-unit) * 4);}
.overlay-nav ul li a { /* ... same nav link styles ... */
    font-size: clamp(1.8rem, 5vh, 2.5rem); font-weight: 500; display: block; padding: calc(var(--spacing-unit) * 1.25) 0; color: var(--color-text-primary); transition: color 0.2s ease, transform 0.2s ease;
}
.overlay-nav ul li a:hover { color: var(--color-text-emphasis); transform: scale(1.03); }
.overlay-book-btn { /* ... same CTA styles ... */
    margin-top: 0; /* No longer pushing footer down */
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3.75);
}
/* Overlay footer links removed for simplicity */


/* --- Hero Section (Adjusted CTA) --- */
.hero-section { /* ... same general hero styles ... */
    display: flex; align-items: center; min-height: 115vh; padding-top: var(--header-height); background-color: var(--color-surface-bg); overflow: hidden;
}
.hero-content { /* ... same hero content styles ... */
    flex: 1 1 45%; padding: 0 calc(var(--spacing-unit) * 6); max-width: 50%; animation: fadeInUp 0.8s 0.2s ease-out backwards;
}
.hero-content h1 { margin-bottom: calc(var(--spacing-unit) * 3); }
.hero-content p { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 480px; margin-bottom: calc(var(--spacing-unit) * 4); }
.hero-image { /* ... same hero image styles ... */
    flex: 1 1 55%; max-width: 55%; height: 85vh; overflow: hidden;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: zoomIn 1.2s 0.4s ease-out backwards; }
.hero-cta { margin-top: calc(var(--spacing-unit) * 1); }


/* --- About Section (Combined with Stylist) --- */
.about-section { background-color: var(--color-primary-bg); }
.about-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 5);
    align-items: center;
}
.about-text-content .section-headline { margin-bottom: calc(var(--spacing-unit) * 3); }
.about-text-content > p { /* Intro paragraph */
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.stylist-feature { margin-bottom: calc(var(--spacing-unit) * 4); }
.stylist-feature h3 { /* Eleanor Lake */
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 600;
    color: var(--color-text-emphasis);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.stylist-title-feature { /* FOUNDER / MASTER STYLIST */
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.stylist-feature p { /* Bio */
    color: var(--color-text-primary);
    line-height: 1.7;
}
.new-guest-info {
    font-size: 1rem;
    color: var(--color-text-secondary);
    background-color: var(--color-surface-bg); /* Subtle background */
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius-small);
    border-left: 3px solid var(--color-text-emphasis); /* Accent border */
}
.about-image-stylist img {
    width: 100%;
    max-width: 450px; /* Control max size */
    margin: 0 auto; /* Center if smaller than column */
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-small);
}
@media (min-width: 768px) {
    .about-container { grid-template-columns: 1.2fr 1fr; /* Text | Image */ }
    .about-text-content { order: 1; }
    .about-image-stylist { order: 2; }
}


/* --- Services Section --- */
.services-section { background-color: var(--color-alt-surface-bg); }
.services-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
}
.service-category-card {
    background-color: var(--color-surface-bg);
    padding: calc(var(--spacing-unit) * 4);
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border-dark);
}
.service-category-name { /* Expert Hair Color etc. */
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-emphasis);
    margin-bottom: var(--spacing-unit);
}
.service-category-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}
.service-items-list {
    list-style: none;
    padding-left: 0;
}
.service-items-list li {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    padding: calc(var(--spacing-unit) * 0.75) 0;
    border-bottom: 1px solid var(--color-border-dark);
}
.service-items-list li:last-child { border-bottom: none; }


/* --- Brands Section (No major change needed) --- */
.brands-section { /* ... same as before ... */
    padding: calc(var(--spacing-unit) * 7.5) 0; background-color: var(--color-primary-bg); /* Match body for seamless feel */ border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border-dark);
}
.brands-section .container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: calc(var(--spacing-unit) * 3); }
.brands-section img { height: 35px; width: auto; opacity: 0.6; transition: opacity 0.25s ease; } /* Reduced opacity */
.brands-section img:hover { opacity: 0.9; }


/* --- Testimonial Section (No major change needed) --- */
.testimonial-section { /* ... same as before ... */
    padding: calc(var(--spacing-unit) * 12.5) 0; text-align: center; background-color: var(--color-secondary-bg);
}
.quote-icon { font-size: 5rem; color: var(--color-quote-icon); line-height: 0.5; margin-bottom: calc(var(--spacing-unit) * -1.25); }
.testimonial-section blockquote { font-size: clamp(1.5rem, 4vw, 1.8rem); font-weight: 300; max-width: 750px; margin: 0 auto calc(var(--spacing-unit) * 3) auto; color: var(--color-text-primary); line-height: 1.55; }
.testimonial-section .attribution { font-size: 1rem; font-style: italic; color: var(--color-text-muted); }


/* --- Join Section (Use .section-headline) --- */
.join-section { /* ... same as before, but using .section-headline now ... */
    padding: calc(var(--spacing-unit) * 10) 0; background-color: var(--color-join-section-bg); text-align: center;
}
.join-content { max-width: 650px; margin: 0 auto calc(var(--spacing-unit) * 5) auto; }
.join-content .section-headline { font-size: clamp(3rem, 8vw, 4.5rem); margin-bottom: var(--spacing-unit)*2; } /* Adjusted headline size */
.join-content p { color: var(--color-text-secondary); margin-bottom: calc(var(--spacing-unit) * 4); }
.newsletter-form { /* ... same ... */
    display: flex; justify-content: center; gap: var(--spacing-unit); flex-wrap: wrap;
}
.newsletter-form input[type="email"] { padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); border: 1px solid var(--color-border-light); background-color: #222; color: var(--color-text-emphasis); min-width: 280px; font-family: inherit; border-radius: var(--border-radius-buttons); }
.newsletter-form input[type="email"]::placeholder { color: var(--color-text-muted-darker); }
.join-gallery { /* ... same ... */
    display: flex; justify-content: center; gap: calc(var(--spacing-unit) * 1.25); flex-wrap: wrap; padding: 0 calc(var(--spacing-unit) * 2.5); margin-top: calc(var(--spacing-unit) * 5);
}
.join-gallery img { height: 130px; width: auto; object-fit: cover; border-radius: var(--border-radius-small); transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; }
.join-gallery img:hover { transform: scale(1.04); opacity: 0.85; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }


/* --- Contact Section (Enhanced) --- */
.contact-section { background-color: var(--color-surface-bg); } /* Different bg for contrast */
.contact-section .section-headline { margin-bottom: calc(var(--spacing-unit) * 6); }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 6);
}
.contact-info h3 { /* Salon Name */
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text-emphasis);
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.contact-info p {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    color: var(--color-text-secondary);
    line-height: 1.7;
}
.contact-info p strong { color: var(--color-text-primary); }
.contact-info h4 { /* Opening Hours title */
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-emphasis);
    margin-top: calc(var(--spacing-unit) * 3);
    margin-bottom: var(--spacing-unit);
}
.opening-hours-list {
    list-style: none;
    padding-left: 0;
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 3);
}
.opening-hours-list li { margin-bottom: calc(var(--spacing-unit) * 0.5); }
.social-icons-contact a {
    margin-right: calc(var(--spacing-unit) * 1.5);
    font-size: 1.5rem; /* Larger icons in contact */
    color: var(--color-text-muted);
}
.social-icons-contact a:hover { color: var(--color-text-emphasis); }
.contact-map img {
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border-dark);
    min-height: 300px; object-fit: cover; /* Ensure map placeholder looks decent */
}
@media (min-width: 768px) {
    .contact-grid { grid-template-columns: 1fr 1.2fr; /* Info | Map */ }
}


/* --- Footer (Simplified - No link columns from original) --- */
#main-site-footer {
    background-color: var(--color-primary-bg);
    padding: calc(var(--spacing-unit) * 5) 0; /* Reduced padding */
    font-size: 0.9rem; color: var(--color-text-muted-darker);
    border-top: 1px solid var(--color-border-dark);
}
.copyright { text-align: center; }
.copyright p { color: #666; /* Slightly lighter than darkest muted */ }


/* --- TCA Showcase Button --- */
.tca-simple-showcase-btn { /* ... same styles as before ... */
    position: fixed; bottom: calc(var(--spacing-unit) * 2.5); right: calc(var(--spacing-unit) * 2.5); background-color: var(--color-button-dark-bg); color: var(--color-button-dark-text); padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2); border-radius: 25px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 3px 10px rgba(255,255,255,0.1); z-index: 900; transition: var(--transition-smooth); display: inline-flex; align-items: center; gap: calc(var(--spacing-unit) * 0.8); border: 1px solid var(--color-border-light);
}
.tca-simple-showcase-btn:hover { background-color: var(--color-button-dark-hover-bg); color: var(--color-button-dark-hover-text); transform: translateY(-2px) scale(1.03); }
.tca-simple-showcase-btn svg { fill: currentColor; }


/* --- Animations (Same as previous) --- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* --- Media Queries (Ensure readability and flow) --- */
@media (max-width: 992px) {
    .hero-section, .about-section .about-container { flex-direction: column; min-height: auto; }
    .hero-content, .hero-image, .about-text-content, .about-image-stylist { max-width: 100%; flex-basis: auto; }
    .hero-image, .about-image-stylist img { height: 60vh; max-height: 450px; }
    .hero-content { padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 2.5); text-align: center; }
    .about-text-content { order: 1; padding-bottom: var(--section-padding-y);}
    .about-image-stylist { order: 2; margin-top: calc(var(--spacing-unit) * -5); /* Pull image up slightly */ } /* Negative margin to overlap if desired */
}

@media (max-width: 768px) {
    #main-site-header { padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3); }
    .hero-image, .about-image-stylist img { height: 50vh; }
    .section-headline { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-map { margin-top: calc(var(--spacing-unit) * 4); }
}

@media (max-width: 480px) {
    .logo { font-size: 0.8rem; }
    .hero-content h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
    .hero-content p { font-size: 1rem; }
    .overlay-nav ul li a { font-size: clamp(1.5rem, 4.5vh, 2rem); }
    .tca-simple-showcase-btn span { display: none; }
    .tca-simple-showcase-btn { padding: var(--spacing-unit); }
}