:root {
            --bg-color: #fdfbfc;
            --text-main: #2d3132;
            --text-muted: #5c6466;
            --accent: #c4a484; /* Soft warm sand/gold — decorative & text on dark backgrounds */
            --accent-text: #85603c; /* Darker gold for text on light backgrounds — 4.8:1 on white */
            --accent-light: #f5efe9;
            --border-color: #eae6e3;
            --card-bg: #ffffff;
            --font-sans: 'DM Sans', sans-serif;
            --font-serif: 'Playfair Display', serif;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        img {
            -webkit-user-drag: none;
            -webkit-touch-callout: none;
        }

        html {
            scroll-behavior: smooth;
            scrollbar-gutter: stable;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-color);
            color: var(--text-main);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        /* Smooth Page Load Fade-In */
        header, #home-view, #gallery-view, #treatment-view {
            animation: fadeIn 0.08s ease-in-out;
        }
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        h1, h2, h3, h4 {
            font-family: var(--font-serif);
            font-weight: 500;
            letter-spacing: -0.02em;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: color 0.3s ease;
        }
        /* Anchoring offset — var(--header-h) is set by JS once the real header
           height is known; the 80px fallback covers the pre-JS paint and desktop
           sticky header. The 8px buffer prevents sections from sitting flush
           against the header bottom on native hash-navigation (back links). */
        section {
            scroll-margin-top: calc(var(--header-h, 80px) + 8px);
        }

        .skip-link {
            position: absolute;
            top: -100px;
            left: 1rem;
            z-index: 2000;
            background-color: var(--text-main);
            color: #ffffff;
            padding: 0.75rem 1.25rem;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: top 0.2s ease;
        }

        .skip-link:focus {
            top: 1rem;
        }

        /* Header & Navigation Integration Styles */
        header {
            position: sticky;
            top: 0;
            background-color: rgba(253, 251, 252, 0.95);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            backdrop-filter: blur(8px);
            transition: transform 200ms ease;
        }

        header.header--hidden {
            transform: translateY(-100%);
            pointer-events: none; /* belt-and-braces for browsers without inert support */
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0.6rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        /* Brand Logo Container Wrapper Layout */
        .logo-link {
            display: inline-flex;
            align-items: center;
            height: 54px;
            min-height: 48px; /* Ensures modern mobile touch target compliance */
            z-index: 1002;
        }

        .logo-img {
            height: 100%;
            width: auto;
            object-fit: contain;
            display: block;
            mix-blend-mode: multiply;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        nav a {
            display: inline-block;
            padding: 0.5rem 0; /* Clear hit state target padding for wider finger clicks */
        }

        nav a:hover {
            color: var(--accent-text);
        }

        .cta-btn {
            background-color: var(--text-main);
            color: #ffffff;
            padding: 0.6rem 1.2rem;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: background-color 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px; /* Great for mobile click compliance */
            z-index: 1002;
        }

        .cta-btn:hover {
            background-color: var(--accent);
            color: var(--text-main);
        }

        /* Pure CSS Hamburger Menu Styles */
        .menu-toggle-input {
            position: absolute; opacity: 0; /* Keeps the checkbox invisible */
            /* display: none; */
        }

        .hamburger-label {
            display: none; /* Hidden completely on desktop viewports */
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            cursor: pointer;
            z-index: 1002;
            padding: 2px;
            box-sizing: content-box;
        }

        .hamburger-label span {
            display: block;
            height: 3px;
            width: 100%;
            background-color: var(--text-main);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /* Mobile specific variant inside the hamburger list */
        .mobile-menu-cta {
            display: none;
        }

        /* Hero Section */
        .hero {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3.5rem 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .hero-text h1 {
            font-size: 3.5rem;
            line-height: 1.1;
            margin-bottom: 1.5rem;
        }

        .hero-text p {
            font-size: 1.15rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            max-width: 500px;
        }

        .hero-image-wrapper {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.03);
            background-color: var(--accent-light);
            aspect-ratio: 4/5;
        }

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

        /* About Me Section */
        .about-me-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2.5rem 2rem;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 4rem;
            align-items: center;
            border-top: 1px solid var(--border-color);
        }

        .about-image-wrapper {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0,0,0,0.02);
            background-color: var(--accent-light);
            aspect-ratio: 1/1;
            width: 100%;
            max-width: 450px;
        }

        .about-text h2 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .about-text .subtitle {
            font-family: var(--font-sans);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 0.85rem;
            color: var(--accent-text);
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .about-text p {
            color: var(--text-muted);
            font-size: 1.05rem;
            margin-bottom: 1.2rem;
        }

        /* Treatments Section */
        .treatments-section {
            background-color: var(--accent-light);
            padding: 2rem 2rem 3.5rem 2rem;
        }

        .faq-section {
            background-color: var(--bg-color);
            padding: 2rem 2rem 3.5rem 2rem;
            border-top: 1px solid var(--border-color);
        }

        .section-container {
            max-width: 1200px;
            margin: 0 auto;
        }

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

        .section-header h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .section-header p {
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
        }

        /* FAQ list — shared by index.html and every treatment page */
        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .faq-item {
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            box-shadow: 0 5px 15px rgba(0,0,0,0.01);
        }

        .faq-item h3 {
            font-family: var(--font-sans);
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .faq-item p {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 0;
        }

        /* Copy Email to Clipboard */
        .copy-email-btn {
            display: inline-flex;
            align-items: center;
            margin-left: 0.5rem;
            padding: 0.2rem 0.7rem;
            font-family: var(--font-sans);
            font-size: 0.8rem;
            font-weight: 600;
            color: inherit;
            background: transparent;
            border: 1px solid currentColor;
            border-radius: 20px;
            cursor: pointer;
            opacity: 0.85;
            transition: opacity 0.2s ease;
            vertical-align: middle;
        }

        .copy-email-btn:hover,
        .copy-email-btn:focus-visible {
            opacity: 1;
        }

        .copy-email-btn.is-copied {
            opacity: 1;
        }

        .email-copy-tip {
            display: block;
            font-size: 0.85rem;
            margin-top: 0.4rem;
            opacity: 0.8;
        }

        /* Treatment page content blocks */
        .treatment-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        /* Reserves space for the treatment hero image via aspect-ratio (set per
           page inline) so swapping the source image never requires markup
           changes and the layout never shifts while it loads. */
        .treatment-hero-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            background-color: var(--accent-light);
        }

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

        .treatment-description {
            margin-bottom: 3rem;
            line-height: 1.8;
            color: var(--text-muted);
        }

        .treatment-care-sections {
            display: grid;
            gap: 3rem;
            margin-bottom: 4rem;
        }

        #treatment-view {
            padding-top: 2rem;
            padding-bottom: 4rem;
        }

        /* Contact Page & Form */
        #contact-view {
            padding-top: 2rem;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.75rem;
            margin: 0 auto 4rem;
            max-width: 560px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-label {
            font-weight: 500;
            font-size: 0.95rem;
            color: var(--text-main);
        }

        .required-mark {
            color: var(--accent-text);
        }

        .form-input,
        .form-textarea {
            font-family: var(--font-sans);
            font-size: 1rem;
            color: var(--text-main);
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 0.85rem 1rem;
            min-height: 48px;
            width: 100%;
        }

        .form-textarea {
            resize: vertical;
            min-height: 160px;
            line-height: 1.6;
        }

        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(196, 164, 132, 0.25);
        }

        .form-input:invalid:not(:placeholder-shown),
        .form-textarea:invalid:not(:placeholder-shown) {
            border-color: #c0392b;
        }

        .char-counter {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-align: right;
        }

        .form-checkbox-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .form-checkbox-row input[type="checkbox"] {
            width: 20px;
            height: 20px;
            min-width: 20px;
            margin-top: 0.15rem;
            accent-color: var(--accent-text);
        }

        .form-checkbox-row label {
            font-size: 0.92rem;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .form-checkbox-row label a {
            color: var(--accent-text);
            text-decoration: underline;
        }

        .form-submit-btn {
            border: none;
            cursor: pointer;
            font-family: var(--font-sans);
            width: fit-content;
            padding: 0.9rem 2rem;
            font-size: 1rem;
        }

        .h-captcha {
            margin: 0.25rem 0;
        }

        .captcha-error {
            display: none;
            color: #c0392b;
            font-size: 0.85rem;
            margin-top: -0.75rem;
        }

        .captcha-error.is-visible {
            display: block;
        }

        .submit-error {
            display: none;
            color: #c0392b;
            font-size: 0.85rem;
            margin-top: -0.75rem;
        }

        .submit-error.is-visible {
            display: block;
        }

        /* Thank You Page */
        .thank-you-view {
            padding: 4rem 1.5rem 5rem;
            text-align: center;
        }

        .thank-you-content {
            max-width: 560px;
            margin: 0 auto;
        }

        .thank-you-content p {
            color: var(--text-muted);
            font-size: 1.1rem;
            line-height: 1.7;
            margin: 1.5rem 0 2.5rem;
        }

        .thank-you-content .social-links {
            justify-content: center;
            margin-top: 2rem !important;
        }

        /* Facials page — merged steam facial + roller image, used at every width.
           Acts as an aspect-ratio wrapper (see .treatment-hero-wrapper) rather
           than styling the <img> directly, so the source image can be swapped
           without any markup changes. */
        .facial-images-combined {
            width: 100%;
            max-width: 700px;
            margin: 0 auto 2rem;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            aspect-ratio: 1460 / 1285;
            overflow: hidden;
            position: relative;
        }

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

        .clinical-journey {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .clinical-journey-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            text-align: left;
        }

        .journey-icon {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            padding: 0.6rem;
            border-radius: 50%;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--accent-text);
        }

        .clinical-journey-item p {
            color: var(--text-muted);
            font-size: 0.98rem;
            line-height: 1.5;
        }

        .clinical-journey-item strong {
            color: var(--text-main);
        }

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

        .card {
            background: var(--card-bg);
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
            border: 1px solid var(--border-color);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-image {
            height: 220px;
            background-color: #eee;
            position: relative;
        }

        .card-content {
            padding: 2rem;
        }

        .card-content h3 {
            font-size: 1.4rem;
            margin-bottom: 0.75rem;
        }

        .card-content p {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }

        /* Results / Before & After Section */
        .results-section {
            padding: 2rem 2rem 3.5rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .transformation-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-top: 2rem;
        }

        .transformation-gallery {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .transformation-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 1.5rem;
        }

        .transformation-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .transformation-subtitle {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .side-by-side {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .img-box {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            background: #eee;
            aspect-ratio: 1/1;
        }

        .img-label {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            padding: 2px 8px;
            font-size: 0.75rem;
            border-radius: 2px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Reviews Section Layout Component */
        .reviews-section {
            background-color: var(--accent-light);
            padding: 2rem 2rem 3.5rem 2rem;
            border-top: 1px solid var(--border-color);
        }

        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3.5rem;
        }

        .review-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.01);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .stars {
            color: var(--accent-text);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .review-text {
            font-style: italic;
            color: var(--text-main);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
            line-height: 1.5;
        }

        .review-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--accent-light);
            color: var(--accent-text);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 0.05em;
        }

        .author-info h4 {
            font-family: var(--font-sans);
            font-size: 0.9rem;
            font-weight: 600;
        }

        .author-info p {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .reviews-action {
            text-align: center;
        }
        /* Reviews CTA Button Styling - currently removed the link button as no path*/
        .reviews-link-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--text-main);
            color: #ffffff;
            padding: 0.8rem 2rem;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
            min-height: 48px; /* High fidelity tap state ergonomics */
        }

        .reviews-link-btn:hover {
            background-color: var(--accent);
            color: var(--text-main);
            transform: translateY(-2px);
        }

        /* Location Section -- change this back to var(--bg-color) if add other sections back */
        .location-section {
            background-color: var(--accent-light);
            padding: 2rem 2rem 3.5rem 2rem;
            border-top: 1px solid var(--border-color);
        }

        .location-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 4rem;
            align-items: center;
        }

        .location-text h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }

        .location-address-row {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            margin-bottom: 1.2rem;
        }

        .location-address {
            font-size: 1.15rem;
            color: var(--text-main);
            flex: 1;
        }

        .social-links {
            display: flex;
            gap: 1.25rem; /* Upgraded structural spacing for finger clicks */
            margin-top: 1rem;
            align-items: center;
        }

        .social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px; /* Increased size to easily meet accessibility targets */
            height: 44px;
            border-radius: 50%;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            transition: all 0.3s ease;
        }

        /* Specific dark variant styling for the contact section layout */
        .booking-section .social-icon {
            background-color: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.15);
            color: #ffffff;
        }

        .social-icon:hover {
            background-color: var(--text-main);
            color: #ffffff;
            transform: translateY(-2px);
        }

        .booking-section .social-icon:hover {
            background-color: var(--accent);
            color: var(--text-main);
            border-color: var(--accent);
        }

        .social-icon svg {
            width: 22px;
            height: 22px;
            fill: currentColor;
        }

        .location-notes {
            color: var(--text-muted);
            font-size: 1rem;
        }

        .location-hours {
            margin-top: 1.5rem;
        }

        .location-hours h3 {
            font-family: var(--font-serif);
            font-size: 1.15rem;
            color: var(--text-main);
            margin-bottom: 0.6rem;
        }

        .hours-list {
            margin: 0;
        }

        .hours-row {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.45rem 0;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.95rem;
        }

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

        .hours-row dt {
            color: var(--text-main);
            font-weight: 600;
        }

        .hours-row dd {
            margin: 0;
            color: var(--text-muted);
            text-align: right;
        }

        .location-photo {
            width: clamp(90px, 22vw, 150px);
            flex-shrink: 0;
        }

        .map-wrapper {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.04);
            border: 1px solid var(--border-color);
            height: 400px;
            background-color: #eee;
            width: 100%;
        }

        .map-wrapper iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        /* Blocks the map from hijacking page-scroll: this overlay sits above the
           iframe and absorbs the wheel event itself (an iframe is a separate
           browsing context, so JS on our page can't intercept events once they
           land inside it — only a same-origin element on top can). A plain
           two-finger scroll passes straight through to the page as normal,
           since the overlay has nothing to scroll. Pinch-to-zoom / Ctrl+scroll
           (script.js watches for wheel event's ctrlKey) or a click temporarily
           disables the overlay so the gesture reaches the map underneath. */
        .map-scroll-guard {
            position: absolute;
            inset: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .map-scroll-guard-hint {
            background: rgba(45, 49, 50, 0.85);
            color: #ffffff;
            font-size: 0.85rem;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }

        .map-scroll-guard:hover .map-scroll-guard-hint {
            opacity: 1;
        }

        /* Booking & Contact Section */
        .booking-section {
            background-color: var(--text-main);
            color: #ffffff;
            padding: 2rem 2rem 3rem 2rem;
        }

        .booking-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .booking-info h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--accent-light);
        }

        .booking-info p {
            color: #b0b5b8;
            margin-bottom: 2rem;
        }

        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .contact-item h4 {
            font-family: var(--font-sans);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.1em;
            color: var(--accent);
            margin-bottom: 0.5rem; /* Better breathing space */
        }

        .contact-item p {
            margin-bottom: 0;
            color: #ffffff;
            font-size: 1.1rem;
        }
        
        .contact-item .email-copy-tip {
            font-size: 0.85rem;
        }

        .contact-item p a {
            display: inline-block;
            padding: 0.4rem 0; /* Ensures fat-finger click targets pass validation */
        }

        .booking-actions {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            background: rgba(255,255,255,0.03);
            padding: 3rem;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.07);
        }

        .booking-actions h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }

        .book-now-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--accent);
            color: var(--text-main);
            padding: 1rem 2.5rem;
            border-radius: 4px;
            font-weight: 600;
            font-size: 1.1rem;
            margin-top: 1rem;
            transition: background-color 0.3s ease, transform 0.2s ease;
            min-height: 52px; /* Flawless mobile touch ergonomics */
            width: auto;
        }

        .book-now-btn:hover {
            background-color: #ebd5bf;
            transform: translateY(-2px);
        }

        footer {
            background: #242728;
            color: #969a9c;
            text-align: center;
            padding: 2.5rem 2rem;
            font-size: 0.85rem;
            border-top: 1px solid #2d3132;
        }

        .footer-links {
            margin-top: 1.25rem;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
        }

        .footer-legal-link {
            color: var(--accent);
            text-decoration: none;
            transition: text-decoration 0.3s ease;
            cursor: pointer;
            padding: 0.5rem; /* Expanded touch zone */
            display: inline-block;
        }

        .footer-legal-link:hover {
            text-decoration: underline;
        }

        /* Privacy Policy Modal Styles */
        .legal-modal {
            display: none;
            position: fixed;
            z-index: 20000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(45, 49, 50, 0.7);
            backdrop-filter: blur(4px);
        }

        .modal-content {
            background-color: var(--bg-color);
            color: var(--text-main);
            margin: 5% auto;
            padding: 3rem;
            border: 1px solid var(--border-color);
            width: 90%;
            max-width: 750px;
            border-radius: 8px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            max-height: 85vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; /* Butter-smooth scrolling on iPhones */
        }

        .close-modal {
            background: none;
            border: none;
            appearance: none;
            font-family: inherit;
            color: var(--text-muted);
            float: right;
            font-size: 2.5rem; /* Enlarged slightly for mobile close tracking */
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
            margin-top: -1rem;
            padding: 0.5rem; /* Larger hitbox area */
        }

        .close-modal:hover {
            color: var(--text-main);
        }

        .modal-body h3 {
            font-size: 1.6rem;
            margin: 1.5rem 0 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.25rem;
        }
        
        .modal-body h4 {
            font-family: var(--font-sans);
            font-weight: 700;
            font-size: 1rem;
            margin-top: 1rem;
            color: var(--text-main);
        }

        .modal-body p, .modal-body ul {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .modal-body ul {
            padding-left: 1.5rem;
        }

        /* Responsive Layout Design Override Breakpoints */
        @media (max-width: 900px) {
            .hero, .transformation-container, .location-container, .booking-container {
                grid-template-columns: 1fr;
                gap: 3rem;
            }
            
            /* Layout inversion engine for About Section */
            .about-me-section {
                padding: 2.5rem 1.5rem 4rem 1.5rem;
                display: flex;
                flex-direction: column-reverse;
                gap: 2rem;
            }

            .hero {
                padding: 2.5rem 1.5rem 3rem 1.5rem;
            }
            .hero-text h1 {
                font-size: 2.5rem; 
            }
            .hero-image-wrapper {
                aspect-ratio: 4/4.5;
            }
            .about-image-wrapper {
                max-width: 100%;
                aspect-ratio: 3/4;
            }
            .treatments-section, .results-section, .reviews-section, .location-section, .booking-section, .faq-section {
                padding: 2.5rem 1.5rem 4rem 1.5rem;
            }
            .booking-actions {
                padding: 2rem 1.5rem; 
                align-items: stretch; 
            }
            .book-now-btn {
                width: 100%;
            }
            .form-submit-btn {
                width: 100%;
            }
            .map-wrapper {
                height: 300px;
            }
            .modal-content {
                padding: 2rem 1.5rem;
                margin: 10% auto;
                width: 95%;
            }
            /* Hero paragraph no longer constrained once hero stacks to one column */
            .hero-text p {
                max-width: 100%;
            }
        }

        /* Hamburger Menu — triggers at tablet width and below */
        @media (max-width: 900px) {
            header {
                position: fixed;
                width: 100%;
            }

            /* Fallback offset before JS sets exact height — prevents content flash under fixed header */
            body {
                padding-top: 63px;
            }

            .nav-container {
                display: grid;
                grid-template-columns: auto 1fr;
                align-items: center;
                gap: 1rem;
                padding: 0.6rem 1rem;
            }

            /* Hide the inline CTA button — it appears inside the hamburger menu instead */
            .nav-container > .cta-btn {
                display: none !important;
            }

            .hamburger-label {
                display: flex;
                grid-column: 2;
                justify-self: end;
            }

            header nav {
                grid-column: 1 / span 2;
                width: 100%;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            }

            nav ul {
                flex-direction: column;
                gap: 0;
                padding: 0.5rem 0 1rem 0;
                border-top: 1px solid var(--border-color);
                margin-top: 0.5rem;
            }

            nav a {
                display: block;
                width: 100%;
                padding: 0.8rem 0.5rem;
                font-size: 1.05rem;
                border-bottom: 1px solid rgba(234, 230, 227, 0.5);
            }

            .mobile-menu-cta {
                display: block !important;
                padding: 1rem 0.5rem 0.5rem 0.5rem;
            }

            .mobile-menu-cta .cta-btn {
                width: 100%;
                font-size: 1rem;
                padding: 0.8rem 1.2rem;
                min-height: 48px;
            }

            .menu-toggle-input:checked ~ nav {
                max-height: 480px;
            }

            .menu-toggle-input:checked ~ .hamburger-label span:nth-child(1) {
                transform: translateY(9px) rotate(45deg);
            }
            .menu-toggle-input:checked ~ .hamburger-label span:nth-child(2) {
                opacity: 0;
            }
            .menu-toggle-input:checked ~ .hamburger-label span:nth-child(3) {
                transform: translateY(-9px) rotate(-45deg);
            }

            .logo-link {
                grid-column: 1;
                height: 44px;
            }
        }

        /* Phone-only overrides */
        @media (max-width: 600px) {
            .logo-link span {
                font-size: 1.1rem !important;
            }
            .side-by-side {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            .modal-content {
                margin: 0;
                width: 100%;
                height: 100%;
                max-height: 100vh;
                border-radius: 0;
            }
            .close-modal {
                margin-top: 0;
            }
            .location-photo {
                width: 70px;
            }
            .location-address {
                font-size: 1rem;
            }
            .location-hours h3 {
                font-size: 1.05rem;
            }
            .hours-row {
                font-size: 0.88rem;
            }
            .follow-btn-row {
                display: grid;
                grid-template-columns: max-content;
                justify-items: center;
            }
            .follow-btn {
                width: 100%;
                white-space: nowrap;
            }
        }
/* --- GALLERY VIEW STYLES --- */
        #gallery-view {
            width: 100%;
        }
        .gallery-section-1 {
            padding: 2rem 2rem 3.5rem 2rem;
            background-color: var(--bg-color);
        }
        .gallery-section-2 {
            padding: 2rem 2rem 3.5rem 2rem;
            background-color: var(--accent-light);
            border-top: 1px solid var(--border-color);
        }
        .gallery-inner {
            max-width: 1200px;
            margin: 0 auto;
        }
        .page-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .page-header h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .page-header h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .page-header p {
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.1rem;
        }
        /* Horizontal photo scrollers — shared by the Clinical Treatments and
           Treatment Clinic galleries. Fixed card widths (rather than a grid
           that reflows into rows) mean adding more photos over time makes the
           row scroll further instead of growing the page, and both galleries
           always render photos at the same size. */
        .photo-scroller {
            position: relative;
        }

        .gallery-grid,
        .clinic-photos-grid {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            max-width: 900px;
            margin: 0 auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .gallery-grid::-webkit-scrollbar,
        .clinic-photos-grid::-webkit-scrollbar {
            display: none;
        }

        .follow-btn-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

        .follow-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.6rem 1.25rem;
            border-radius: 4px;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .follow-btn:hover {
            background-color: var(--text-main);
            color: #ffffff;
            transform: translateY(-2px);
        }
        .follow-btn svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        .clinic-photo-wrapper,
        .treatment-photo-wrapper {
            flex: 0 0 210px;
            width: 210px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            aspect-ratio: 3/4;
            background: #eee;
            cursor: pointer;
            scroll-snap-align: start;
        }

        .scroll-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.92);
            color: var(--text-main);
            font-size: 1.4rem;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: background-color 0.2s ease, opacity 0.2s ease;
        }
        .scroll-arrow:hover {
            background: #fff;
        }
        .scroll-arrow[hidden] {
            display: none;
        }
        .scroll-arrow--prev { left: -0.5rem; }
        .scroll-arrow--next { right: -0.5rem; }
        .clinic-photo-wrapper img,
        .treatment-photo-wrapper img {
            transition: transform 0.3s ease;
        }
        .clinic-photo-wrapper:hover img,
        .clinic-photo-wrapper:focus-visible img,
        .treatment-photo-wrapper:hover img,
        .treatment-photo-wrapper:focus-visible img {
            transform: scale(1.05);
        }
        .clinic-photo-wrapper:focus-visible,
        .treatment-photo-wrapper:focus-visible {
            outline: 2px solid var(--accent-text);
            outline-offset: 2px;
        }

        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 9000;
            align-items: center;
            justify-content: center;
        }
        .lightbox.is-open { display: flex; }
        .lightbox-img {
            max-height: 88vh;
            max-width: 84vw;
            object-fit: contain;
            border-radius: 4px;
            display: block;
        }
        @keyframes lb-exit-left {
            from { transform: translateX(0);    opacity: 1; }
            to   { transform: translateX(-60px); opacity: 0; }
        }
        @keyframes lb-exit-right {
            from { transform: translateX(0);    opacity: 1; }
            to   { transform: translateX(60px);  opacity: 0; }
        }
        @keyframes lb-enter-right {
            from { transform: translateX(60px);  opacity: 0; }
            to   { transform: translateX(0);    opacity: 1; }
        }
        @keyframes lb-enter-left {
            from { transform: translateX(-60px); opacity: 0; }
            to   { transform: translateX(0);    opacity: 1; }
        }
        .lightbox-close {
            position: absolute;
            top: 1rem;
            right: 1.25rem;
            background: none;
            border: none;
            color: #fff;
            font-size: 2.5rem;
            cursor: pointer;
            line-height: 1;
            padding: 0.25rem 0.5rem;
            opacity: 0.75;
        }
        .lightbox-close:hover { opacity: 1; }
        .lightbox-prev,
        .lightbox-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.12);
            border: none;
            color: #fff;
            font-size: 2rem;
            padding: 0.85rem 1.1rem;
            cursor: pointer;
            border-radius: 4px;
            line-height: 1;
            opacity: 0.8;
            transition: background 0.2s, opacity 0.2s;
        }
        .lightbox-prev:hover,
        .lightbox-next:hover { background: rgba(255, 255, 255, 0.22); opacity: 1; }
        .lightbox-prev { left: 1rem; }
        .lightbox-next { right: 1rem; }
        .lightbox-counter {
            position: absolute;
            bottom: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.8rem;
            font-family: var(--font-sans);
            letter-spacing: 0.05em;
        }

        @media (max-width: 900px) {
            .gallery-section-1 { padding: 2.5rem 1.5rem 4rem 1.5rem; }
            .gallery-section-2 { padding: 2.5rem 1.5rem 4rem 1.5rem; }
            .scroll-arrow--prev { left: 0.25rem; }
            .scroll-arrow--next { right: 0.25rem; }
            .page-header h1 { font-size: 2.5rem; }
            .page-header h2 { font-size: 2rem; }
        }

        @media (max-width: 640px) {
            .lightbox-img { max-width: 78vw; }
            .lightbox-prev, .lightbox-next { font-size: 1.5rem; padding: 0.6rem 0.75rem; }
        }

        @media (max-width: 480px) {
            .hero-text h1 { font-size: 2rem; }
            .page-header h1 { font-size: 2rem; }
            .page-header h2 { font-size: 1.75rem; }
            .gallery-section-2 { padding: 2rem 1.25rem 3rem 1.25rem; }
        }

/* --- HOW TO BOOK VIEW STYLES --- */

        .booking-cta-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 8px 20px rgba(0,0,0,0.04);
        }

        .book-treatment-card {
            position: relative;
            display: block;
            margin-bottom: 1rem;
            padding: 1.25rem 2.75rem 1.25rem 1.5rem;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: inherit;
            text-decoration: none;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .book-treatment-card::after {
            content: '\2192';
            position: absolute;
            right: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent-text);
            font-size: 1.2rem;
            font-weight: 600;
        }

        .book-treatment-card:hover,
        .book-treatment-card:focus-visible {
            transform: translateY(-2px);
            border-color: var(--accent-text);
            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        }

        .book-treatment-card:focus-visible {
            outline: 2px solid var(--accent-text);
            outline-offset: 2px;
        }