/*
Theme Name: Better Movement Collective
Theme URI: https://bettermovementco.com.au
Author: BMC Development Team
Author URI: https://bettermovementco.com.au
Description: Custom WordPress theme for Better Movement Collective - A physiotherapy clinic in Hampton, Victoria. Features include sticky navigation with color change, animated brand mark, fullscreen menu overlay with italic hover effects, Instagram integration, and fully responsive design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bmc-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, full-width-template

Better Movement Collective WordPress Theme
"work on yourself • for yourself"
*/

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* Colors */
    --color-primary-bg: #FFFFFF;
    --color-secondary-bg: #FFFFFF;
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-accent: #DECFBA;
    --color-accent-hover: #d4c3ab;
    --color-highlight: #FF0095;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Font Sizes - Desktop */
    --font-size-menu: clamp(48px, 5vw, 91px);
    --font-size-h1: clamp(36px, 3vw, 54px);
    --font-size-h2: clamp(28px, 2.5vw, 42px);
    --font-size-h3: clamp(24px, 2vw, 32px);
    --font-size-body: clamp(16px, 1.25vw, 24px);
    --font-size-body-small: clamp(14px, 1vw, 19px);
    --font-size-small: clamp(14px, 0.9vw, 17px);
    --font-size-button: clamp(16px, 1.5vw, 30px);

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.21;
    --line-height-relaxed: 1.5;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 120px;

    /* Border Radius */
    --radius-button: 18px;
    --radius-button-mobile: 12px;
    --radius-card: 8px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 900;
    --z-modal: 1000;
    --z-overlay: 1100;

    /* Container */
    --container-max: 1920px;
    --container-padding: 39px;
}

/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-primary-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container-fluid {
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.site-header>* {
    pointer-events: auto;
}

/* Brand Logo */
.site-branding {
    position: relative;
    z-index: var(--z-fixed);
}

.logo-full,
.logo-short {
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.logo-full {
    max-width: 497px;
    width: 100%;
    display: block;
}

.logo-short {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 207px;
    opacity: 0;
    transform: translateY(-10px);
    display: block;
}

/* Menu toggle needs padding since header has none */
.menu-toggle {
    margin-top: var(--spacing-lg);
    margin-right: var(--spacing-lg);
}

/* Logo states based on scroll */
.site-header.scrolled .logo-full {
    opacity: 0;
    transform: translateY(-10px);
}

.site-header.scrolled .logo-short {
    opacity: 1;
    transform: translateY(0);
}

/* Hamburger Menu Button */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 67px;
    height: 26px;
    padding: 0;
    background: transparent;
    z-index: var(--z-overlay);
    transition: var(--transition-normal);
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 5px;
    background-color: var(--color-accent);
    transition: var(--transition-normal);
}

/* Menu toggle color states */
.site-header.dark-bg .menu-toggle span {
    background-color: var(--color-accent);
}

.site-header.light-bg .menu-toggle span {
    background-color: var(--color-black);
}

/* Menu toggle active state (X) */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* ============================================
   FULLSCREEN MENU OVERLAY
   ============================================ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    /* Changed from black to transparent */
    z-index: var(--z-modal);
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-overlay__right {
    width: 50%;
    margin-left: auto;
    /* Push to the right */
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--spacing-xl);
    position: relative;
}

/* Brand info in menu */
.menu-brand-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.menu-brand-logo {
    max-width: 300px;
    margin-bottom: var(--spacing-lg);
}

.menu-tagline {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-lg);
}

.menu-philosophy {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    max-width: 400px;
}

.menu-contact-link {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-top: auto;
}

/* Navigation Menu */
.main-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.main-navigation a {
    font-size: var(--font-size-menu);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-transform: uppercase;
    line-height: var(--line-height-tight);
    transition: font-style var(--transition-fast);
}

.main-navigation a:hover,
.main-navigation a:focus {
    font-style: italic;
}

/* Keep current item italic, UNLESS we are hovering over the menu (and not this item) */
.main-navigation .current-menu-item>a {
    font-style: italic;
}

/* If hovering the nav, but NOT hovering the current item, un-italicize the current item */
.main-navigation:hover .current-menu-item>a:not(:hover) {
    font-style: normal;
}

/* Close Button */
.menu-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 40px;
    line-height: 1;
}

/* ============================================
   STICKY BOOK NOW BUTTON
   ============================================ */
.sticky-book-btn {
    position: fixed;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-sticky);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.sticky-book-btn a,
.btn-book-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 29px 9px;
    margin-top: 10px;
    background-color: #000000;
    color: var(--color-white);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-button);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.sticky-book-btn a:hover,
.btn-book-now:hover {
    background-color: #333333;
    transform: scale(1.02);
}

/* Horizontal Book Now Button */
.btn-book-now.horizontal {
    writing-mode: horizontal-tb;
    padding: 14px 30px;
    font-size: var(--font-size-button);
}

/* ============================================
   STICKY FOOTER
   ============================================ */
.sticky-footer {
    /* position: fixed; */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    padding: var(--spacing-lg) var(--container-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-sticky);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
}

.sticky-footer__contact {
    text-transform: uppercase;
}

.sticky-footer__address,
.sticky-footer__email {
    text-align: right;
}

.sticky-footer__email {
    font-size: 15px;
}

.site-main {
    padding-top: 240px;
}

.home .site-main {
    padding-top: 0;
}

/* Page Content */
.page-content.homepage {
    padding-bottom: 0;
}

/* About page - image locked to top */
.about-page .site-main,
.page-template-page-about .site-main {
    padding-top: 0;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hero-content {
    padding: 310px var(--container-padding) var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

.hero-tagline {
    font-size: clamp(32px, 3.5vw, 54px);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-tight);
}

.hero-tagline span {
    display: block;
}

.hero-tagline .tagline-line-1 {
    margin-bottom: 8px;
}

.hero-tagline .tagline-line-2 {
    margin-left: 267px;
    margin-bottom: 8px;
}

.hero-tagline .tagline-line-3 {
    margin-left: 237px;
}

.hero-philosophy {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    max-width: 450px;
    margin-top: var(--spacing-2xl);
}

.hero-image {
    position: relative;
    overflow: hidden;
}

.hero-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Decorative Line */
.hero-line {
    position: absolute;
    width: 0;
    height: 75%;
    background-color: var(--color-white);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================
   SERVICES SECTION
   ============================================ */
/* Services Section Grid Integration */
.service-item-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    /* Reduced image column width to match design */
    gap: var(--spacing-md);
    /* Reduced from xl to md for "slight gap" */
    align-items: start;
    margin-bottom: var(--spacing-4xl);
    position: relative;
}

.service-col-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.service-text-inner {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-relaxed);
    text-align: left;
}

.service-col-image {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.service-image-wrapper {
    width: 100%;
    max-width: 450px;
    /* Prevent it from getting too large */
    aspect-ratio: 1;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    margin: 0 auto var(--spacing-md);
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-title-overlay {
    display: none;
    /* Replaced by service-title-side */
}

/* Service title positioned at top of right column, same level as image */
.service-title-side {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    margin: 0 0 var(--spacing-md) 0;
    text-align: left;
    line-height: 1.1;
}

/* Services Hero Section */
.services-hero {
    padding: 100px var(--container-padding) 40px;
    /* Reduced from 180px/60px */
    background-color: var(--color-primary-bg);
    text-align: left;
    border-bottom: 0px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 60px;
    /* Reduced margin */
}

.services-main-title {
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
    color: var(--color-text-primary);
}

.services-section {
    padding-top: 40px;
}

.about-first-paragraph {
    position: absolute;
    left: 38px;
    color: #DECFBA;
    font-size: xx-large;
    top: 470px;
}

.about-second-paragraph {
    font-size: xx-large;
    position: absolute;
    left: 57px;
    color: #DECFBA;
    top: 539px;
}

.about-third-paragraph {
    position: absolute;
    left: 0px;
    color: #DECFBA;
    top: 547px;
    font-size: xx-large;
}

/* Force Content Alignment - All left aligned for vertical consistency */
.service-col-text.col-1 {
    text-align: left;
    padding-left: var(--spacing-2xl);
    padding-top: 147px
        /* Add margin from left edge */
}

.service-col-text.col-3 {
    text-align: left;
    padding-right: var(--spacing-2xl);
    margin-left: -47px;
    /* Add margin from right edge */
}

.service-col-text.col-1 .service-text-inner,
.service-col-text.col-3 .service-text-inner {
    text-align: left;
}

/* Service title in col-3 */
.service-col-text.col-3 .service-title-side {
    text-align: left;
}

.service-book-btn {
    margin-top: var(--spacing-sm);
}

/* Quote Section Inline */
.inline-quote {
    margin: var(--spacing-2xl) 0;
    text-align: center;
}

/* Services Preview on Home */
.services-preview {
    padding: 0;
    margin-bottom: 0;
    width: 68%;
    margin-left: 417px;
    ;
}

.services-preview__content {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: stretch;
}

.services-preview__image {
    flex: 0 0 50%;
    width: 50%;
    position: relative;
}

.services-preview__list {
    flex: 0 0 50%;
    width: 50%;
}

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

.services-preview__list {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-3xl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-primary-bg);
}

.services-preview__list h3 {
    font-weight: var(--font-weight-bold);
    font-size: clamp(24px, 2.5vw, 36px);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.services-preview__list ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.services-preview__list ul li {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.services-preview__list .btn-book-now {
    align-self: flex-start;
    margin-top: var(--spacing-md);
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-page {
    margin: 0;
    padding: 0;
}

.about-section {
    padding: 0;
    margin: 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin: 0;
}

/* Booking Loader & Iframe Logic */
.booking-container {
    position: relative;
    min-height: 800px;
    width: 100%;
    /* iOS Safari scrolling fix */
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

.booking-embed-inner {
    /* iOS Safari iframe scrolling container */
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    width: 100%;
}

.booking-embed-inner iframe {
    width: 100% !important;
    min-width: 100%;
    height: 800px !important;
    border: none;
    background-color: var(--color-primary-bg);
    /* iOS Safari fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.booking-loader {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    z-index: 5;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    text-align: center;
}

.booking-loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Loader Graphics - More Fluid Dots */
.loader-graphics {
    display: flex;
    gap: 12px;
}

.loader-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
    animation: move-fluid 1.2s infinite ease-in-out;
}

.loader-dot:nth-child(2) {
    animation-delay: 0.1s;
}

.loader-dot:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes move-fluid {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.loader-slogan-wrapper {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.loader-slogan {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.loader-slogan.is-fading {
    opacity: 0;
    transform: translateY(10px);
}

.booking-embed-inner {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.booking-embed-inner.is-loaded {
    opacity: 1;
}

.about-image {
    position: relative;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.about-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-image__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    /* Subtle darken */
    color: var(--color-white);
    text-align: center;
    padding: var(--spacing-xl);
    pointer-events: none;
}

.about-image__overlay p {
    font-size: 40px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-transform: lowercase;
    white-space: pre-line;
}

.about-content {
    padding: var(--spacing-xl) var(--spacing-lg);
    padding-right: var(--spacing-3xl);
    /* Prevent content hitting right edge */
    padding-top: 180px;
	padding-left:3px;
    /* Space for header overlap */
}

/* About Title Container - Separate styling */
.about-title-container {
    margin-bottom: var(--spacing-sm);
    /* Slight gap to content as requested */
}

.about-title-container h1 {
    font-size: var(--font-size-h1);
    text-transform: uppercase;
    margin: 0;
    font-weight: 900;
}

/* About Intro Container */
.about-intro-container {
    margin-bottom: var(--spacing-lg);
}

.about-intro-container p {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-relaxed);
}

.about-content h2 {
    font-size: var(--font-size-h1);
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
}

/* Team Section - Integrated */
.about-team-integrated {
    margin-top: var(--spacing-lg);
}

.about-founder {
    margin-bottom: var(--spacing-xl);
}

.about-founder h3 {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.about-founder p {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-relaxed);
}

/* About Preview on Home */
.about-preview {
    padding: 0;
    width: 68%;
    margin-left: 199px;
}

.about-preview__content {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: stretch;
}

.about-preview__image {
    flex: 0 0 50%;
    width: 50%;
    position: relative;
}

.about-preview__text {
    flex: 0 0 50%;
    width: 50%;
}

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

.about-preview__text {
    padding: var(--spacing-3xl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-primary-bg);
}

.about-preview__text h3 {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.about-preview__text p {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* ============================================
   INSTAGRAM FEED SECTION - IMMERSIVE 3D EXPERIENCE
   ============================================ */

/* CSS Variables for Instagram Feed Mood & Animation */
.instagram-section {
    --ig-mood-hue: 30;
    --ig-mood-saturation: 20%;
    --ig-mood-lightness: 97%;
    --ig-glow-color: rgba(222, 207, 186, 0.3);
    --ig-shadow-color: rgba(0, 0, 0, 0.15);
    --ig-card-depth: 0px;
    --ig-ambient-shift: 0;

    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
    margin-bottom: 100px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        hsl(var(--ig-mood-hue), var(--ig-mood-saturation), var(--ig-mood-lightness)) 0%,
        var(--color-primary-bg) 100%
    );
    transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ambient mood overlay that shifts with scroll */
.instagram-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at calc(50% + var(--ig-ambient-shift, 0) * 1px) 50%,
        var(--ig-glow-color) 0%,
        transparent 70%
    );
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.instagram-section h2 {
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
    padding-left: var(--container-padding);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
}

.instagram-grid {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    /* Master perspective container */
    perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective-origin: 100% 50%;
    -webkit-perspective-origin: 100% 50%;
}

.instagram-item {
    aspect-ratio: 1;
    overflow: hidden;
}

.instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.instagram-item:hover img {
    transform: scale(1.05);
}

/* ============================================
   INSTAGRAM PLACEHOLDER GRID - 3D STACKING CARDS
   ============================================ */
.instagram-placeholder-grid {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse; /* RIGHT TO LEFT SCROLL */
    overflow-x: auto;
    overflow-y: visible;
    gap: -20px; /* Negative gap for stacking effect */
    padding: 60px 100px 60px 40px;
    width: 100%;
    margin: 0;
    opacity: 1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* 3D Space */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.instagram-placeholder-grid::-webkit-scrollbar {
    display: none;
}

.instagram-placeholder-item {
    flex: 0 0 380px;
    height: 380px;
    aspect-ratio: 1;
    background: linear-gradient(
        145deg,
        hsl(calc(var(--ig-mood-hue) + var(--card-index, 0) * 5), 15%, 96%) 0%,
        hsl(calc(var(--ig-mood-hue) + var(--card-index, 0) * 5), 10%, 92%) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;

    /* 3D Transform Properties */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform:
        translateZ(calc(var(--card-index, 0) * -30px))
        rotateY(calc(var(--card-index, 0) * -2deg))
        scale(calc(1 - var(--card-index, 0) * 0.02));

    /* Smooth transitions */
    transition:
        transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        filter 0.6s ease;

    will-change: transform, box-shadow, filter;

    /* Stacking shadow */
    box-shadow:
        -15px 15px 30px var(--ig-shadow-color),
        -5px 5px 15px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);

    /* Rounded corners for card feel */
    border-radius: 12px;
    overflow: hidden;

    /* Animation */
    animation:
        bmcFloatEnhanced 8s ease-in-out infinite,
        bmcBreathGlow 6s ease-in-out infinite;
}

/* Stacking depth for each card */
.instagram-placeholder-item:nth-child(1) { --card-index: 0; animation-delay: 0s; }
.instagram-placeholder-item:nth-child(2) { --card-index: 1; animation-delay: -1s; }
.instagram-placeholder-item:nth-child(3) { --card-index: 2; animation-delay: -2s; }
.instagram-placeholder-item:nth-child(4) { --card-index: 3; animation-delay: -3s; }
.instagram-placeholder-item:nth-child(5) { --card-index: 4; animation-delay: -4s; }
.instagram-placeholder-item:nth-child(6) { --card-index: 5; animation-delay: -5s; }
.instagram-placeholder-item:nth-child(7) { --card-index: 6; animation-delay: -6s; }
.instagram-placeholder-item:nth-child(8) { --card-index: 7; animation-delay: -7s; }
.instagram-placeholder-item:nth-child(9) { --card-index: 8; animation-delay: -8s; }

/* Hover state - card lifts and rotates into view */
.instagram-placeholder-item:hover {
    z-index: 100 !important;
    transform:
        translateZ(80px)
        rotateY(0deg)
        rotateX(0deg)
        scale(1.08);
    box-shadow:
        -30px 30px 60px rgba(0, 0, 0, 0.25),
        -10px 10px 30px rgba(0, 0, 0, 0.15),
        0 0 40px var(--ig-glow-color);
    filter: brightness(1.05) saturate(1.1);
    animation-play-state: paused;
}

/* Mouse reaction transforms (applied via JS) */
.instagram-placeholder-item.is-reacting {
    transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

.instagram-placeholder-item svg {
    width: 50px;
    height: 50px;
    color: var(--color-accent);
    filter: drop-shadow(0 4px 8px rgba(222, 207, 186, 0.4));
    transition: transform 0.4s ease, color 0.4s ease;
}

.instagram-placeholder-item:hover svg {
    transform: scale(1.1) rotateZ(5deg);
    color: var(--color-highlight);
}

.instagram-placeholder-content {
    text-align: center;
    padding: 20px var(--container-padding) 40px;
    position: relative;
    z-index: 2;
}

.instagram-placeholder-content p {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   SMASH BALLOON INSTAGRAM - 3D STACKING OVERRIDE
   ============================================ */
.instagram-feed-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding: 60px 100px 60px 40px;
    position: relative;

    /* 3D Container */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.instagram-feed-container::-webkit-scrollbar {
    display: none;
}

/* Force flex layout on Smash Balloon container - RIGHT TO LEFT */
#sb_instagram #sbi_images {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row-reverse !important; /* RIGHT TO LEFT */
    grid-template-columns: none !important;
    width: max-content !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: -15px !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

#sb_instagram #sbi_images > * {
    flex-shrink: 0 !important;
}

/* Enhanced 3D Stacking Cards for Smash Balloon */
#sb_instagram .sbi_item {
    flex: 0 0 380px !important;
    width: 380px !important;
    height: 380px !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    overflow: hidden !important;

    /* 3D Transforms */
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    transform:
        translateZ(calc(var(--card-index, 0) * -25px))
        rotateY(calc(var(--card-index, 0) * -1.5deg))
        scale(calc(1 - var(--card-index, 0) * 0.015)) !important;

    /* Smooth transitions */
    transition:
        transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        filter 0.6s ease !important;

    will-change: transform, box-shadow, filter !important;

    /* Stacking shadow */
    box-shadow:
        -12px 12px 25px var(--ig-shadow-color),
        -4px 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;

    /* Animations */
    animation:
        bmcFloatEnhanced 8s ease-in-out infinite,
        bmcBreathGlow 6s ease-in-out infinite !important;
}

/* Card depth indexing for Smash Balloon */
#sb_instagram .sbi_item:nth-child(1) { --card-index: 0; animation-delay: 0s !important; }
#sb_instagram .sbi_item:nth-child(2) { --card-index: 1; animation-delay: -0.8s !important; }
#sb_instagram .sbi_item:nth-child(3) { --card-index: 2; animation-delay: -1.6s !important; }
#sb_instagram .sbi_item:nth-child(4) { --card-index: 3; animation-delay: -2.4s !important; }
#sb_instagram .sbi_item:nth-child(5) { --card-index: 4; animation-delay: -3.2s !important; }
#sb_instagram .sbi_item:nth-child(6) { --card-index: 5; animation-delay: -4s !important; }
#sb_instagram .sbi_item:nth-child(7) { --card-index: 6; animation-delay: -4.8s !important; }
#sb_instagram .sbi_item:nth-child(8) { --card-index: 7; animation-delay: -5.6s !important; }
#sb_instagram .sbi_item:nth-child(9) { --card-index: 8; animation-delay: -6.4s !important; }

/* Hover state */
#sb_instagram .sbi_item:hover {
    z-index: 100 !important;
    transform:
        translateZ(70px)
        rotateY(0deg)
        rotateX(0deg)
        scale(1.06) !important;
    box-shadow:
        -25px 25px 50px rgba(0, 0, 0, 0.22),
        -8px 8px 25px rgba(0, 0, 0, 0.12),
        0 0 35px var(--ig-glow-color) !important;
    filter: brightness(1.04) saturate(1.08) !important;
    animation-play-state: paused !important;
}

/* Photo styling */
#sb_instagram .sbi_photo {
    height: 380px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

#sb_instagram .sbi_item:hover .sbi_photo {
    transform: scale(1.05) !important;
}

/* Image inner wrapper */
#sb_instagram .sbi_photo_wrap {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Lightbox Styles */
.bmc-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.bmc-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.bmc-lightbox-content {
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    background: #fff;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    border-radius: 4px;
    /* Slight rounding for card look */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bmc-lightbox-overlay.active .bmc-lightbox-content {
    transform: scale(1);
}

.bmc-lightbox-layout {
    display: flex;
    height: 100%;
    max-height: 90vh;
}

.bmc-lightbox-media {
    flex: 1;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bmc-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.bmc-lightbox-details {
    width: 350px;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #eee;
}

.bmc-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.bmc-lightbox-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.bmc-follow-btn {
    color: #405DE6;
    /* Instagram Blueish */
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.bmc-lightbox-caption {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    overflow-y: auto;
    flex: 1;
    margin-bottom: 20px;
}

.bmc-lightbox-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.bmc-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: #262626;
    text-decoration: none;
    transition: background 0.2s ease;
}

.bmc-action-btn:hover {
    background: #fafafa;
}

/* Lightbox Close Button */
.bmc-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    /* White on image side, or mix-blend-mode */
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    line-height: 1;
    z-index: 10;
}

/* Mobile Lightbox */
@media (max-width: 768px) {
    .bmc-lightbox-layout {
        flex-direction: column;
        overflow-y: auto;
    }

    .bmc-lightbox-media {
        min-height: 50vh;
        flex: 0 0 auto;
    }
	.about-content{
		padding-left:17px;
		padding-right:17px;
	}
	}
    .bmc-lightbox-details {
        width: 100%;
        border-left: none;
        flex: 0 0 auto;
    }

    .bmc-lightbox-content {
        max-height: 95vh;
        overflow-y: auto;
    }

    .bmc-lightbox-close {
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-section {
    padding: var(--spacing-2xl) var(--container-padding);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.contact-content {
    max-width: 600px;
}

.contact-content h1 {
    font-size: var(--font-size-h1);
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
}

.contact-info {
    margin-bottom: var(--spacing-xl);
}

.contact-info p {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.contact-info a {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: bolder;
    font-size: x-large;
}

/* Contact Form */
.contact-form {
    margin-top: var(--spacing-xl);
}

.form-group {
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-black);
    padding-bottom: var(--spacing-sm);
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    padding: var(--spacing-sm) 0;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-accent);
}

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

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background-color: var(--color-accent);
    color: var(--color-text-primary);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-button);
    transition: background-color var(--transition-fast);
    margin-top: var(--spacing-md);
}

.btn-submit:hover {
    background-color: var(--color-accent-hover);
}

/* Success Message */
.form-success {
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
}

/* ============================================
   BOOK NOW PAGE
   ============================================ */
.booking-section {
    padding: var(--spacing-3xl) var(--container-padding);
    min-height: 100vh;
}

.booking-embed {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 800px;
    background-color: var(--color-primary-bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.booking-embed iframe {
    width: 100%;
    height: 100%;
    min-height: 800px;
    border: none;
}

.booking-embed-inner {
    width: 100%;
}

/* iOS Safari Fallback Message */
.ios-fallback-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-button);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
    z-index: 10;
}

.ios-fallback-content h3 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
}

.ios-fallback-content p {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-secondary);
}

.ios-book-btn {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.ios-try-again-btn {
    background: transparent;
    border: 1px solid var(--color-text-primary);
    padding: 10px 20px;
    font-size: var(--font-size-small);
    cursor: pointer;
    border-radius: var(--radius-button);
    transition: background-color var(--transition-fast);
}

.ios-try-again-btn:hover {
    background: var(--color-primary-bg);
}

/* iOS Safari Specific iframe fixes */
@supports (-webkit-touch-callout: none) {
    .booking-embed-inner {
        -webkit-overflow-scrolling: touch;
        overflow: auto;
        position: relative;
    }

    .booking-embed-inner iframe {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        width: 100% !important;
        min-height: 800px !important;
    }
}

/* CRM Management Section */
.booking-management {
    margin-top: var(--spacing-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    border-top: 1px solid var(--color-secondary-bg);
}

.manage-link {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}

.manage-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.manage-link:hover {
    color: var(--color-accent);
}

.manage-link:hover::after {
    width: 100%;
}

.management-separator {
    color: var(--color-accent);
    opacity: 0.5;
}

/* ============================================
   INSPIRATIONAL QUOTES
   ============================================ */
.quote-section {
    padding: var(--spacing-xl) var(--container-padding);
}

.quote-text {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    max-width: 600px;
    white-space: pre-line;
}

.quote-text.right {
    margin-left: auto;
    text-align: right;
}

/* ============================================
   PAGE TEMPLATES
   ============================================ */
.page-content {
    padding-bottom: 120px;
    /* Space for sticky footer */
}

/* ============================================
   RESPONSIVE STYLES - TABLET
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --container-padding: 24px;
    }

    .hero-section {
        grid-template-columns: 1fr;
    }

    .hero-image {
        min-height: 50vh;
        width: 100%;
        order: 1;
    }

    .hero-content {
        width: 100%;
        order: 2;
        padding-top: var(--spacing-2xl);
    }

    .hero-line {
        display: none;
    }

    .services-preview__content,
    .about-preview__content {
        flex-direction: column;
    }

    .services-preview__image,
    .services-preview__list,
    .about-preview__image,
    .about-preview__text {
        width: 100%;
        flex: 0 0 100%;
    }

    .services-preview__image,
    .about-preview__image {
        min-height: 400px;
    }

    .menu-overlay__right {
        width: 80%;
        margin-left: auto;
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .menu-overlay {
        background-color: transparent;
    }

    .sticky-book-btn {
        right: var(--spacing-sm);
    }

    .sticky-buttons-container {
        display: flex;
        flex-direction: row;
        /* Stacks vertically due to vertical-rl in parent */
        gap: 10px;
        align-items: center;
    }

    /* Momence Widget Support */
    .booking-embed #ribbon-schedule {
        width: 100%;
        min-height: 800px;
        display: block;
    }
}

/* ============================================
   RESPONSIVE STYLES - MOBILE
   ============================================ */
@media (max-width: 767px) {
    :root {
        --container-padding: 16px;
        --spacing-lg: 24px;
        --spacing-xl: 40px;
        --spacing-2xl: 60px;
        --spacing-3xl: 80px;
    }

    .services-section {
        padding-left: 7px;
        padding-right: 7px;
    }

    .site-header {
        padding: var(--spacing-md) var(--container-padding);
    }

    .logo-full {
        max-width: 290px;
    }

    .logo-short {
        max-width: 116px;
    }

    .menu-toggle {
        width: 50px;
        height: 20px;
    }

    .menu-toggle span {
        height: 3px;
    }

    .main-navigation a {
        font-size: 38px;
    }

    /* Mobile Hero Section */
    .hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-content {
        padding: var(--spacing-3xl) var(--container-padding) var(--spacing-xl);
        order: 2;
    }

    .hero-image {
        min-height: 60vh;
        order: 1;
    }

    .hero-tagline {
        font-size: clamp(28px, 6vw, 36px);
        margin-bottom: var(--spacing-md);
    }

    .hero-tagline .tagline-line-1,
    .hero-tagline .tagline-line-2,
    .hero-tagline .tagline-line-3 {
        margin-left: 0;
    }

    .hero-tagline .tagline-line-2 {
        margin-left: 167px;
    }

    .hero-tagline .tagline-line-3 {
        margin-left: 137px;
    }

    .hero-philosophy {
        font-size: clamp(14px, 3.5vw, 16px);
        margin-top: var(--spacing-lg);
        max-width: 100%;
    }

    .hero-line {
        display: none;
    }

    .service-item-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Mobile Adjustments for Preview Sections */
    .services-preview {
        padding: 0;
        margin-bottom: 0;
        width: 100%;
        margin-left: 0;
    }

    .services-preview__content,
    .about-preview__content {
        flex-direction: column;
    }

    .services-preview__image,
    .services-preview__list,
    .about-preview__image,
    .about-preview__text {
        width: 100%;
        flex: 0 0 100%;
    }

    /* Services Preview Mobile */
    .services-preview__image {
        min-height: 300px;
        padding-right: 47px;
    }

    .services-preview__list {
        padding: var(--spacing-xl) var(--container-padding);
        padding-left: calc(var(--container-padding) * 2.5);
        text-align: left;
        margin-left: 77px;
    }

    .services-preview__list h3 {
        font-size: clamp(20px, 5vw, 24px);
    }

    .services-preview__list ul li {
        font-size: clamp(16px, 4vw, 20px);
    }

    /* About Preview Mobile */
    .about-preview {
        width: 77%;
        margin-left: 30px;
    }

    .about-preview__image {
        min-height: 300px;
        margin-left: 157px;
        width: 87%;
    }

    .about-preview__text {
        padding: var(--spacing-xl) var(--container-padding);
        padding-left: calc(var(--container-padding) * 2.5);
        text-align: left;
        order: 2;
        margin-left: -47px;
    }

    .about-preview__text h3 {
        font-size: clamp(20px, 5vw, 24px);
    }

    .about-preview__text p {
        font-size: clamp(16px, 4vw, 20px);
    }

    .service-col-text.col-1 {
        display: none;
    }

    .service-col-text.col-3 {
        display: block;
        order: 2;
        padding-left: 1px;
        /* Reset desktop padding */
    }

    .service-col-image {
        order: 1;
    }

    .service-title-side {
        font-size: clamp(20px, 5vw, 28px);
        text-align: center;
        margin-bottom: var(--spacing-sm);
    }

    .service-title-side {
        margin-left: 47px;
    }

    .service-col-text.col-3 .service-text-inner {
        text-align: left;
        margin-left: 37px;
        margin-right: -67px;
        padding: 7px;
    }

    .service-title-overlay {
        display: none;
    }

    .sticky-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
        padding: var(--spacing-md);
    }

    .sticky-footer__address,
    .sticky-footer__email {
        text-align: center;
    }

    .about-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .about-image {
        min-height: 400px;
    }

    .about-content {
        padding: var(--spacing-lg) 0;
        padding-right: 17px;
        padding-left: 17px;
        /* Reset desktop padding */
        padding-top: var(--spacing-lg);
        /* Reset header overlap spacing */
    }

    .sticky-book-btn {
        position: fixed;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        writing-mode: vertical-rl;
        z-index: var(--z-sticky);
    }

    .sticky-book-btn a {
        padding: 20px 8px;
        font-size: 16px;
        border-radius: var(--radius-button) 0 0 var(--radius-button);
    }

    .booking-container {
        min-height: 85vh;
    }

    .booking-embed-inner iframe {
        height: 800px !important;
        /* Ensure consistent height even on mobile */
    }



    .page-content {
        padding-bottom: 160px;
        padding-left: 0;
        padding-right: 0;
    }

    .site-main {
        padding-top: 160px;
    }

    .home .site-main {
        padding-top: 0;
    }
}

/* ============================================
   WORDPRESS SPECIFIC STYLES
   ============================================ */
/* Admin bar adjustment */
.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Block Editor Styles */
.wp-block-group {
    padding: var(--spacing-lg);
}

/* Alignment classes */
.alignwide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Image handling */
.wp-block-image img {
    height: auto;
}

.wp-block-image.aligncenter {
    text-align: center;
}

/* Contact Form 7 Styles */
.wpcf7 {
    max-width: 500px;
}

.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: var(--spacing-md);
    position: relative;
    overflow: hidden;
}

/* Sliding Text Mask Overlay */
.wpcf7-form-control-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, var(--color-white) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wpcf7-form-control-wrap.is-scrolled::before {
    opacity: 1;
}

.wpcf7-form-control {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-black);
    background: transparent;
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    padding: var(--spacing-sm) 0;
    scroll-behavior: smooth;
    display: block;
    transition: border-bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), padding-left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.wpcf7-form-control:focus {
    outline: none;
    border-bottom: 2px solid var(--color-accent);
    padding-left: 10px;
}

textarea.wpcf7-form-control {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    resize: none;
    height: 60px;
    /* Single line height */
    min-height: 60px;
    padding-top: 20px;
    padding-bottom: 0;
}

textarea.wpcf7-form-control::-webkit-scrollbar {
    display: none;
}

textarea.wpcf7-form-control {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Instagram Feed Fade - Enhanced with depth illusion */
.instagram-feed-container {
    position: relative;
}

.instagram-feed-container::before,
.instagram-feed-container::after,
.instagram-placeholder-grid::before,
.instagram-placeholder-grid::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

/* Left fade (entry point - subtle) */
.instagram-feed-container::before,
.instagram-placeholder-grid::before {
    left: 0;
    width: 60px;
    background: linear-gradient(
        to right,
        hsl(var(--ig-mood-hue, 30), var(--ig-mood-saturation, 20%), var(--ig-mood-lightness, 97%)) 0%,
        transparent 100%
    );
}

/* Right fade (exit point - stronger for depth) */
.instagram-feed-container::after,
.instagram-placeholder-grid::after {
    right: 0;
    width: 150px;
    background: linear-gradient(
        to left,
        var(--color-white) 0%,
        rgba(255, 255, 255, 0.9) 30%,
        transparent 100%
    );
}

/* 3D depth shadow overlay */
.instagram-grid::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.03) 0%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background-color: var(--color-accent);
    color: var(--color-text-primary);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-button);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.wpcf7-submit:hover {
    background-color: var(--color-accent-hover);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* ============================================
   MOBILE INSTAGRAM 3D ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .instagram-section {
        padding: var(--spacing-xl) 0 var(--spacing-2xl);
        margin-bottom: 60px;
    }

    .instagram-grid {
        perspective: 1200px;
        -webkit-perspective: 1200px;
        perspective-origin: 80% 50%;
    }

    .instagram-placeholder-grid,
    .instagram-feed-container {
        padding: 40px 60px 40px 20px;
        gap: -10px;
    }

    #sb_instagram .sbi_item,
    .instagram-placeholder-item {
        flex: 0 0 280px !important;
        width: 280px !important;
        height: 280px !important;
        border-radius: 10px !important;
    }

    #sb_instagram .sbi_photo {
        height: 280px !important;
    }

    /* Reduce 3D depth on mobile for performance */
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        transform:
            translateZ(calc(var(--card-index, 0) * -15px))
            rotateY(calc(var(--card-index, 0) * -1deg))
            scale(calc(1 - var(--card-index, 0) * 0.01)) !important;
    }

    .instagram-placeholder-item:hover,
    #sb_instagram .sbi_item:hover {
        transform:
            translateZ(40px)
            rotateY(0deg)
            scale(1.04) !important;
    }

    /* Reduce animation intensity on mobile */
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        animation:
            bmcFloatMobile 10s ease-in-out infinite !important;
    }

    .instagram-scroll-hint {
        right: 15px;
        opacity: 0.5;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        animation: none !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }

    .instagram-section::before {
        animation: none !important;
    }

    .instagram-scroll-hint {
        display: none;
    }
}

/* Mobile-optimized floating animation */
@keyframes bmcFloatMobile {
    0%, 100% {
        transform:
            translateZ(calc(var(--card-index, 0) * -15px))
            translateY(0px)
            scale(calc(1 - var(--card-index, 0) * 0.01));
    }
    50% {
        transform:
            translateZ(calc(var(--card-index, 0) * -15px))
            translateY(-6px)
            scale(calc(1 - var(--card-index, 0) * 0.01 + 0.005));
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        flex: 0 0 340px !important;
        width: 340px !important;
        height: 340px !important;
    }

    #sb_instagram .sbi_photo {
        height: 340px !important;
    }

    .instagram-grid {
        perspective: 1600px;
    }
}

/* Lightbox Animation Enhancement */
.bmc-lightbox-content {
    animation: bmcZoomIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes bmcZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   INSTAGRAM 3D ANIMATIONS - ENHANCED
   ============================================ */

/* Legacy Float Animation (backwards compat) */
@keyframes bmcFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Enhanced Floating Animation with subtle rotation */
@keyframes bmcFloatEnhanced {
    0%, 100% {
        transform:
            translateZ(calc(var(--card-index, 0) * -25px))
            rotateY(calc(var(--card-index, 0) * -1.5deg))
            translateY(0px)
            rotateX(0deg)
            scale(calc(1 - var(--card-index, 0) * 0.015));
    }
    25% {
        transform:
            translateZ(calc(var(--card-index, 0) * -25px))
            rotateY(calc(var(--card-index, 0) * -1.5deg + 1deg))
            translateY(-8px)
            rotateX(1deg)
            scale(calc(1 - var(--card-index, 0) * 0.015));
    }
    50% {
        transform:
            translateZ(calc(var(--card-index, 0) * -25px))
            rotateY(calc(var(--card-index, 0) * -1.5deg))
            translateY(-12px)
            rotateX(0deg)
            scale(calc(1 - var(--card-index, 0) * 0.015 + 0.01));
    }
    75% {
        transform:
            translateZ(calc(var(--card-index, 0) * -25px))
            rotateY(calc(var(--card-index, 0) * -1.5deg - 1deg))
            translateY(-6px)
            rotateX(-1deg)
            scale(calc(1 - var(--card-index, 0) * 0.015));
    }
}

/* Breathing glow animation for ambient mood */
@keyframes bmcBreathGlow {
    0%, 100% {
        box-shadow:
            -12px 12px 25px var(--ig-shadow-color),
            -4px 4px 12px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            -15px 15px 35px var(--ig-shadow-color),
            -6px 6px 18px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 0 20px rgba(222, 207, 186, 0.15);
    }
}

/* Mood shift animation for section background */
@keyframes bmcMoodShift {
    0%, 100% {
        --ig-mood-hue: 30;
        --ig-mood-saturation: 20%;
    }
    25% {
        --ig-mood-hue: 35;
        --ig-mood-saturation: 22%;
    }
    50% {
        --ig-mood-hue: 25;
        --ig-mood-saturation: 18%;
    }
    75% {
        --ig-mood-hue: 32;
        --ig-mood-saturation: 21%;
    }
}

/* Card entrance animation */
@keyframes bmcCardEnter {
    0% {
        opacity: 0;
        transform:
            translateZ(-200px)
            rotateY(25deg)
            translateX(100px)
            scale(0.8);
    }
    100% {
        opacity: 1;
        transform:
            translateZ(calc(var(--card-index, 0) * -25px))
            rotateY(calc(var(--card-index, 0) * -1.5deg))
            translateX(0)
            scale(calc(1 - var(--card-index, 0) * 0.015));
    }
}

/* Shimmer effect for loading/ambient */
@keyframes bmcShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Pulse glow for hover feedback */
@keyframes bmcPulseGlow {
    0%, 100% {
        box-shadow:
            -25px 25px 50px rgba(0, 0, 0, 0.22),
            0 0 30px var(--ig-glow-color);
    }
    50% {
        box-shadow:
            -30px 30px 60px rgba(0, 0, 0, 0.25),
            0 0 50px var(--ig-glow-color);
    }
}

/* Fix for horizontal scroll area depth */
.instagram-grid {
    perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective-origin: 100% 50%;
    -webkit-perspective-origin: 100% 50%;
    overflow: visible !important;
}

/* Instagram section mood sensing class states */
.instagram-section.mood-warm {
    --ig-mood-hue: 35;
    --ig-glow-color: rgba(255, 200, 150, 0.3);
}

.instagram-section.mood-cool {
    --ig-mood-hue: 220;
    --ig-glow-color: rgba(180, 200, 255, 0.25);
}

.instagram-section.mood-zen {
    --ig-mood-hue: 120;
    --ig-glow-color: rgba(180, 220, 180, 0.2);
}

.instagram-section.mood-energetic {
    --ig-mood-hue: 350;
    --ig-glow-color: rgba(255, 150, 180, 0.25);
}

/* Card mouse-reactive state */
.instagram-placeholder-item.mouse-reactive,
#sb_instagram .sbi_item.mouse-reactive {
    transition:
        transform 0.1s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.3s ease !important;
}

/* Visible entrance animation trigger */
.instagram-section.in-view .instagram-placeholder-item,
.instagram-section.in-view #sb_instagram .sbi_item {
    animation:
        bmcCardEnter 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        bmcFloatEnhanced 8s ease-in-out 0.8s infinite,
        bmcBreathGlow 6s ease-in-out 0.8s infinite;
}

/* Stagger entrance delays */
.instagram-section.in-view .instagram-placeholder-item:nth-child(1),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(1) { animation-delay: 0s, 0.8s, 0.8s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(2),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(2) { animation-delay: 0.08s, 0.88s, 0.88s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(3),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(3) { animation-delay: 0.16s, 0.96s, 0.96s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(4),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(4) { animation-delay: 0.24s, 1.04s, 1.04s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(5),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(5) { animation-delay: 0.32s, 1.12s, 1.12s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(6),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(6) { animation-delay: 0.4s, 1.2s, 1.2s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(7),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(7) { animation-delay: 0.48s, 1.28s, 1.28s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(8),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(8) { animation-delay: 0.56s, 1.36s, 1.36s; }
.instagram-section.in-view .instagram-placeholder-item:nth-child(9),
.instagram-section.in-view #sb_instagram .sbi_item:nth-child(9) { animation-delay: 0.64s, 1.44s, 1.44s; }

/* Scroll indicator hint */
.instagram-scroll-hint {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    pointer-events: none;
    animation: fadeInOut 3s ease-in-out infinite;
    z-index: 10;
}

.instagram-scroll-hint svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
    animation: scrollArrowBounce 1.5s ease-in-out infinite;
}

.instagram-scroll-hint span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    writing-mode: vertical-rl;
}

@keyframes scrollArrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

.animate-stagger.active>*:nth-child(1) {
    animation: fadeIn 0.6s ease 0.1s forwards;
}

.animate-stagger.active>*:nth-child(2) {
    animation: fadeIn 0.6s ease 0.2s forwards;
}

.animate-stagger.active>*:nth-child(3) {
    animation: fadeIn 0.6s ease 0.3s forwards;
}

.animate-stagger.active>*:nth-child(4) {
    animation: fadeIn 0.6s ease 0.4s forwards;
}

/* ============================================
   INSTAGRAM 3D CROSS-BROWSER COMPATIBILITY
   ============================================ */

/* Vendor prefixes for 3D transforms */
.instagram-placeholder-item,
#sb_instagram .sbi_item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

.instagram-grid,
.instagram-feed-container,
.instagram-placeholder-grid {
    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
    perspective: 2000px;

    -webkit-perspective-origin: 100% 50%;
    -moz-perspective-origin: 100% 50%;
    perspective-origin: 100% 50%;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .instagram-feed-container,
    .instagram-placeholder-grid {
        -webkit-overflow-scrolling: touch;
    }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        transform-style: preserve-3d;
    }
}

/* Edge/IE fallback (graceful degradation) */
@supports not (transform-style: preserve-3d) {
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        transform: none !important;
        transition: box-shadow 0.3s ease, opacity 0.3s ease !important;
    }

    .instagram-placeholder-item:hover,
    #sb_instagram .sbi_item:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        opacity: 0.95;
    }
}

/* High-DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .instagram-placeholder-item,
    #sb_instagram .sbi_item {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Hardware acceleration hints */
.instagram-placeholder-item,
#sb_instagram .sbi_item,
.instagram-feed-container,
.instagram-placeholder-grid {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-will-change: transform, box-shadow;
    will-change: transform, box-shadow;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .site-header,
    .sticky-book-btn,
    .sticky-footer,
    .menu-overlay,
    .instagram-section {
        display: none !important;
    }

    .page-content {
        padding: 0;
    }
}